色彩進(jìn)階技巧，幫你創(chuàng )造更優(yōu)質(zhì)的網(wǎng)頁(yè)用戶(hù)體驗

色彩幾乎是所有設計系統中不可忽略的組成部分，而在網(wǎng)頁(yè)設計中，色彩自己所發(fā)揮的作用并不單一，除了最基本的著(zhù)色構成色彩搭配的作用之外，色彩能夠通過(guò)對比創(chuàng )造視覺(jué)焦點(diǎn)，構建信息條理，影響用戶(hù)情緒，甚至指導訪(fǎng)客的舉動(dòng)。

所以，在玩轉配色自己之外，進(jìn)階的色彩運用技巧還有許多。

1、通過(guò)比例轉變創(chuàng )造視覺(jué)焦點(diǎn)

控制色彩的比例來(lái)創(chuàng )造視覺(jué)焦點(diǎn)是常見(jiàn)的色彩運用手法之一，控制色彩的比例現實(shí)重要是通過(guò)控制色彩所在元素的大小來(lái)達成結果的。比如Viporte 這個(gè)網(wǎng)站，當你上下滾動(dòng)首頁(yè)的時(shí)候，每個(gè)部分都用超大的字體進(jìn)行了裝飾，而每個(gè)字母都使用了漂亮的色彩進(jìn)行添補。不同的筆墨使用了不同的色彩，并且搭配以響應的圖片。每個(gè)頁(yè)面的焦點(diǎn)一定是最中間的圖片和字母，而焦點(diǎn)的形成和色彩的比例與運用脫不開(kāi)關(guān)系?？刂粕实恼急?，無(wú)論是多照舊少，只要有明確的目的，總能形成吸引細致力的焦點(diǎn)。無(wú)論是我們常說(shuō)的“萬(wàn)花叢中一點(diǎn)綠”，照舊極簡(jiǎn)主義設計中大面積的留白，都是色彩比例控制下所構成視覺(jué)焦點(diǎn)的典型案例。

2、通過(guò)對比度吸引用戶(hù)細致

在設計過(guò)程中，使用色彩來(lái)控制對比度也是設計師頻繁使用的技巧之一。當設計的團體色調趨于柔和和鎮靜的時(shí)候，忽然注入強對比的色彩，能夠瞬間捉住用戶(hù)的細致力。

而Thinx 這個(gè)網(wǎng)站在設計的時(shí)候就將對比度控制得很好。網(wǎng)頁(yè)主體的配色采用的是經(jīng)典的詬誶搭配，白色的背景搭配黑色的文本。而團體的設計感的來(lái)源則重要源于排版和彩色的圖片。網(wǎng)站所采用的圖片顯明經(jīng)過(guò)精心的選擇和設計，紅色的底色、黑色的內衣和模特外露的精致肌膚色在圖片激烈的碰撞，漂亮而充滿(mǎn)勾引，圖片勇敢的色調搭配和素色的背景與筆墨形成了光顯而強烈的對比，無(wú)論是經(jīng)典的紅黑搭配，照舊永恒的詬誶配色，都充足漂亮和吸引人。

Thinx 這個(gè)案例我特別很是喜好，并且經(jīng)常會(huì )用到，由于它證實(shí)了設計師并不肯定非得靠高飽和度的霓虹色來(lái)創(chuàng )造高對比度的配色。即使是兩種平衡的顏色，也能讓整個(gè)設計脫穎而出。

3、使用色彩創(chuàng )造UX模式

高度同等的配色方案能夠創(chuàng )造出視覺(jué)模式，而延長(cháng)到用戶(hù)體驗上，則會(huì )讓整個(gè)UX呈現出模式化的特性。模式化的設計讓用戶(hù)更容易適應，用戶(hù)更容易摸索出規律，也更容易產(chǎn)生相匹配的預期，換句話(huà)說(shuō)，UX模式能夠培養用戶(hù)風(fēng)俗，同用戶(hù)產(chǎn)生深刻的關(guān)聯(lián)。就像用戶(hù)風(fēng)俗了某些特定的圖標之后，在其他地方看到這些圖標就知道它們的含義，曉暢該如何交互了。比如，小房子圖標會(huì )讓用戶(hù)想到首頁(yè)、主頁(yè)，而垃圾桶則會(huì )關(guān)聯(lián)上刪除的概念。色彩相對而言更加主觀(guān)，由于每個(gè)網(wǎng)站和APP都會(huì )采用本身的配色方案，不同的色彩代表不同的含義。

那我們就拿Underbelly 這個(gè)產(chǎn)品展示頁(yè)作為示例吧。在Underbelly 這個(gè)網(wǎng)站中，所有可點(diǎn)擊的組件都是藍色的，你在試用網(wǎng)站幾秒鐘之后，能夠快速掌握這個(gè)UX模式，并且曉暢如何操作。這就是Underbelly 通過(guò)色彩構建UX模式的方法。UX模式的上風(fēng)在于，它讓用戶(hù)更快地熟識你的產(chǎn)品。越容易識別，用戶(hù)的想法越少，產(chǎn)品的的使用也就更加順暢了。