這5個色彩進階技巧，能幫你創(chuàng)造更優(yōu)質(zhì)的網(wǎng)頁用戶體驗

色彩幾乎是所有設(shè)計體系中不可忽略的組成部分，而在網(wǎng)頁設(shè)計中，色彩本身所發(fā)揮的作用并不單一，除了最基本的著色構(gòu)成色彩搭配的作用之外，色彩能夠通過對比創(chuàng)造視覺焦點，構(gòu)建信息層次，影響用戶情緒，甚至引導(dǎo)訪客的行為。

所以，在玩轉(zhuǎn)配色本身之外，進階的色彩運用技巧還有很多。

1、通過比例變化創(chuàng)造視覺焦點

控制色彩的比例來創(chuàng)造視覺焦點是常見的色彩運用手法之一，控制色彩的比例實際主要是通過控制色彩所在元素的大小來達成效果的。比如Viporte 這個網(wǎng)站，當(dāng)你上下滾動首頁的時候，每個部分都用超大的字體進行了裝飾，而每個字母都使用了漂亮的色彩進行填充。不同的文字使用了不同的色彩，并且搭配以相應(yīng)的圖片。每個頁面的焦點肯定是最中心的圖片和字母，而焦點的形成和色彩的比例與運用脫不開關(guān)系。控制色彩的占比，無論是多還是少，只要有明確的目的，總能形成吸引注意力的焦點。無論是我們常說的“萬花叢中一點綠”，還是極簡主義設(shè)計中大面積的留白，都是色彩比例控制下所構(gòu)成視覺焦點的典型案例。

2、通過對比度吸引用戶注意

在設(shè)計過程中，使用色彩來控制對比度也是設(shè)計師頻繁使用的技巧之一。當(dāng)設(shè)計的整體色調(diào)趨于柔和和平靜的時候，突然注入強對比的色彩，能夠瞬間抓住用戶的注意力。

而Thinx 這個網(wǎng)站在設(shè)計的時候就將對比度控制得很好。網(wǎng)頁主體的配色采用的是經(jīng)典的黑白搭配，白色的背景搭配黑色的文本。而整體的設(shè)計感的來源則主要源于排版和彩色的圖片。網(wǎng)站所采用的圖片明顯經(jīng)過精心的選擇和設(shè)計，紅色的底色、黑色的內(nèi)衣和模特外露的細膩肌膚色在圖片激烈的碰撞，漂亮而充滿誘惑，圖片大膽的色調(diào)搭配和素色的背景與文字形成了鮮明而強烈的對比，無論是經(jīng)典的紅黑搭配，還是永恒的黑白配色，都足夠漂亮和吸引人。

Thinx 這個案例我非常喜歡，并且經(jīng)常會用到，因為它證明了設(shè)計師并不一定非得靠高飽和度的霓虹色來創(chuàng)造高對比度的配色。即使是兩種平衡的顏色，也能讓整個設(shè)計脫穎而出。

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

高度一致的配色方案能夠創(chuàng)造出視覺模式，而延伸到用戶體驗上，則會讓整個UX呈現(xiàn)出模式化的特征。模式化的設(shè)計讓用戶更容易適應(yīng)，用戶更容易摸索出規(guī)律，也更容易產(chǎn)生相匹配的預(yù)期，換句話說，UX模式能夠培養(yǎng)用戶習(xí)慣，同用戶產(chǎn)生深刻的關(guān)聯(lián)。就像用戶習(xí)慣了某些特定的圖標之后，在其他地方看到這些圖標就知道它們的含義，明白該如何交互了。比如，小房子圖標會讓用戶想到首頁、主頁，而垃圾桶則會關(guān)聯(lián)上刪除的概念。色彩相對而言更加主觀，因為每個網(wǎng)站和APP都會采用自己的配色方案，不同的色彩代表不同的含義。

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

4、使用色彩來創(chuàng)建層次

當(dāng)我們?yōu)g覽網(wǎng)頁和各種界面的時候，信息的層次感很大程度是借助視覺來營造的。使用色彩來創(chuàng)造視覺層次感就很順其自然了。

在Skore 的產(chǎn)品頁面中，每一個部分都有使用到綠色的元素。重復(fù)的綠色元素不僅創(chuàng)建出可供用戶快速識別的模式，它也讓用戶能夠快速明白哪些因素更加重要。通常，我們解釋視覺層次的時候，會用不同大小、粗細的字體來闡述信息層次和結(jié)構(gòu)，但是不同強度的色彩，同樣可以實現(xiàn)層次的劃分。

在Skore 這個案例當(dāng)中，綠色和灰色的文本以及白色的背景之間有著良好的對比度，整個配色方案不依賴其他的強調(diào)色，以綠色為主。這種相對穩(wěn)定的配色結(jié)構(gòu)有助于讓每個部分都有層次地呈現(xiàn)出來。綠色不僅吸引用戶關(guān)注關(guān)鍵的元素，而且為不同的部分的內(nèi)部提供層次結(jié)構(gòu)。

5、充分利用色彩的相似性

除開其他的目的，設(shè)計師使用色彩或者調(diào)整色彩的目的，基本都是為了創(chuàng)造設(shè)計的一致性。InVision 的年度總結(jié)頁面使用了從粉色到紫色的漸變，在頁面的下方，粉色和紫色同樣應(yīng)用到了按鈕中，此外，在著陸頁當(dāng)中，將對比度明顯的白色置于粉色+紫色的背景之上，確保信息的清晰呈現(xiàn)。如果色彩每次都不一樣，那么整個設(shè)計看起來就不是那么令人難忘了。

另外一個案例來自于 Comotion。Comotion 的工作室首頁采用了幾種不同的色彩，但是這些色彩的色調(diào)是非常接近的，從而創(chuàng)建出了一種和而不同的配色方案。在這個設(shè)計案例當(dāng)中，幾個不同的色彩互為搭配，并不會太過于突出，但是又能夠恰到好處地進行強調(diào)，最終讓色彩足夠好看，有保持了用戶的參與度。

結(jié)語

色彩能夠幫助設(shè)計師達成各種各樣的目的，靈活的運用能夠讓實現(xiàn)這一切。當(dāng)你將上述的色彩使用技巧都合理的運用起來，可以靈活的創(chuàng)造視覺焦點，構(gòu)造層次，打造真正有趣而有用的設(shè)計。

網(wǎng)站標題：這5個色彩進階技巧，能幫你創(chuàng)造更優(yōu)質(zhì)的網(wǎng)頁用戶體驗
鏈接URL：http://muchs.cn/news39/173039.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有用戶體驗等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)