彩色微調(diào)用戶體驗(yàn)的5種技術(shù)

網(wǎng)站設(shè)計(jì)制作是任何設(shè)計(jì)系統(tǒng)中的關(guān)鍵元素之一。在網(wǎng)站或應(yīng)用程序中，可以通過多種方式使用顏色：有時(shí)可以通過對(duì)比或?qū)㈩伾拗圃谶x定的位置來使用顏色來創(chuàng)建焦點(diǎn)；顏色還可以幫助建立層次結(jié)構(gòu)，從而影響用戶的外觀。

在本文中，我們將討論如何策略性地使用顏色。

1.通過比例確定重點(diǎn)

顏色比例的一個(gè)很好的例子是Viporte的設(shè)計(jì)。當(dāng)您向下滾動(dòng)他們的主頁時(shí)，每個(gè)部分的中央都裝飾著一個(gè)大字母。在各節(jié)的動(dòng)畫開始播放之前，字母會(huì)填充有漂亮的顏色。動(dòng)畫的不同圖像的顏色與字母的顏色有關(guān)。重點(diǎn)肯定是在部分的中心，這在一定程度上要?dú)w功于顏色的集中使用。比例各不相同-有時(shí)顏色很少，有時(shí)顏色很多。無論哪種方式，都可以使用比例來吸引注意力。如果顏色在每個(gè)部分的整個(gè)地方都更加明顯，那么焦點(diǎn)就不會(huì)那么清晰。

2.通過對(duì)比吸引注意力

顏色可以操縱的另一件事是對(duì)比度。當(dāng)整體設(shè)計(jì)的顏色沉穩(wěn)或柔和時(shí)，添加對(duì)比色會(huì)引起圖像的注意。

這正是Thinx設(shè)計(jì)中正在發(fā)生的事情。在主頁上，界面的整體配色方案實(shí)際上是黑白的。但是，設(shè)計(jì)很大程度上依賴于大量照片。特別是在主頁頂部，內(nèi)衣的照片具有深紅色背景。與頁面上的所有其他內(nèi)容相比，該字體非常大膽。毫無疑問，這里突出的是深紅色。紅色與黑白配色方案相比具有更高的對(duì)比度。我喜歡以Thinx為例，因?yàn)樗砻?，明亮和霓虹色并不是唯一適合通過對(duì)比吸引別人注意力的顏色。這實(shí)際上只是兩種顏色的平衡，這會(huì)讓其中一種真正脫穎而出。

3.使用顏色創(chuàng)建UX模式

創(chuàng)建視覺模式的最佳方法是保持一致性。反過來，模式會(huì)創(chuàng)建用戶可以習(xí)慣的關(guān)系。這與用戶習(xí)慣于驗(yàn)證與某些動(dòng)作相關(guān)的圖標(biāo)的方式相同，即，垃圾桶意味著刪除。顏色更具主觀性，因?yàn)槊總€(gè)網(wǎng)站或應(yīng)用程序都可以對(duì)顏色做出自己的含義。

讓我們與Underbelly的產(chǎn)品組合網(wǎng)站上的藍(lán)色聯(lián)系起來。這是一個(gè)簡(jiǎn)單的示例，非常適合提出我的觀點(diǎn)。Underbelly網(wǎng)站上所有可點(diǎn)擊的都是藍(lán)色。使用該網(wǎng)站幾秒鐘后，很快便知道它們的鏈接為藍(lán)色。這就是您通過顏色創(chuàng)建圖案的方式。模式之所以好，是因?yàn)樗鼈兛梢允褂脩艉驮L問者輕松識(shí)別事物。認(rèn)識(shí)越容易，人們的思考就會(huì)越少，到現(xiàn)在，我們都知道讓史蒂夫·克魯格（Steve Krug）感到多么高興。

4.通過顏色創(chuàng)建層次結(jié)構(gòu)

顏色可能會(huì)有益的另一件事是建立層次結(jié)構(gòu)。在Skore的產(chǎn)品頁面上，幾乎每個(gè)部分都有綠色元素。綠色重復(fù)項(xiàng)不僅創(chuàng)建了可識(shí)別的模式，而且還有助于區(qū)分任何給定部分的重要部分。通常，很容易通過字體大小等大小來解釋層次結(jié)構(gòu)。但是，在設(shè)置層次結(jié)構(gòu)時(shí)，顏色的強(qiáng)度以及使用中的顏色設(shè)置也可能很棒。

以Skore為例，綠色與灰色文字和白色背景形成了很好的對(duì)比。脫穎而出。此外，它們的配色方案不依賴其他強(qiáng)調(diào)綠色的主色調(diào)。所有這些都有助于顯示每個(gè)部分的層次結(jié)構(gòu)。因此，綠色有助于引導(dǎo)用戶的眼睛看向重要元素，從而在每個(gè)部分中提供良好的層次結(jié)構(gòu)。綠色元素告訴用戶首先要看的位置。

5.利用顏色的相似性

作為設(shè)計(jì)師，我們對(duì)顏色所做的所有不同處理，我們大多使用并重復(fù)使用，以保持設(shè)計(jì)中的一致性。讓我們看一下InVision的“年終”登錄頁面。在頁面頂部，有一個(gè)粉紅色和紫色漸變用作背景圖像。在頁面的下方，粉紅色和紫色也用于按鈕顏色。此外，登錄頁面在粉紅色和紫色背景上重用白色。它還在白色背景上重復(fù)使用黑色和灰色文本顏色。如果每次的顏色都不相同，那么看起來就不會(huì)那么好了。

讓我們看看另一個(gè)示例，特別是Co-motion。在創(chuàng)意工作室的主頁上，使用了幾種不同的顏色。但是它們的語調(diào)都足夠相似，可以提供凝聚力。在這個(gè)例子中，沒有什么特別突出的，這也是一個(gè)很好的目標(biāo)。在這種情況下，彩色強(qiáng)調(diào)的是頁面的良好和凝聚力，您試圖讓用戶參與并滾動(dòng)。

結(jié)論

顏色可以幫助實(shí)現(xiàn)各種設(shè)計(jì)目標(biāo)。顏色可以幫助定義和建立層次結(jié)構(gòu)并提供焦點(diǎn)。顏色強(qiáng)調(diào)有多種形式。無論哪種方式，使用顏色都可以帶來很多樂趣。借助戰(zhàn)略色彩方案，可以更輕松地影響訪問者或用戶的眼睛去向。