您是否為用戶選擇了正確的背景色？

如果你的背景使用的是明亮和飽和的顏色，用戶很難一直盯著你的頁面。明亮、飽和的顏色最能吸引用戶的注意力，但是太大的區(qū)域會(huì)過度刺激視網(wǎng)膜，會(huì)使眼睛疲勞。

例如，盯著上面圖片中的色塊。左列由亮度和飽和度最大的顏色組成，右側(cè)由80%亮度和飽和度的顏色組成。你對(duì)盯著左邊欄的時(shí)間將低于右邊欄，因?yàn)槊髁恋?、飽和的顏色?huì)讓你的眼睛感到難受。

亮度和飽和度

亮度和飽和度是不同的顏色屬性。前者指的是顏色中混合了多少白色或黑色，而后者指的是顏色的灰度。

增加亮度與降低飽和度不同。降低飽和度時(shí)，會(huì)將顏色變?yōu)榛摇．?dāng)您增加亮度時(shí)，您可以將顏色調(diào)淺，但不要將其變?yōu)榛疑?

顏色對(duì)注意力的影響

一項(xiàng)名為“色調(diào)、飽和度和亮度的影響”的研究發(fā)現(xiàn)，飽和度和亮度高的顏色最受關(guān)注。結(jié)論是這些顏色特性在吸引注意力方面比色調(diào)更重要。

另外兩項(xiàng)研究“?顏色飽和度的喚醒效應(yīng)?”和“?顏色和情感?”發(fā)現(xiàn)，明亮，飽和的顏色與高度喚醒有關(guān)。色調(diào)也會(huì)影響喚醒，但飽和度和亮度會(huì)產(chǎn)生更大的影響。

為按鈕保留明亮、飽和的顏色

明亮、飽和的背景色會(huì)吸引用戶的注意，但不會(huì)保持用戶的注意力。使用它們就像在用戶面前尖叫一樣。你會(huì)引起他們的注意，但他們很快就會(huì)把目光移開，因?yàn)槟阍诟蓴_他們。

您應(yīng)該只在需要用戶操作(如按鈕)的界面元素上使用它們。顏色會(huì)吸引人們對(duì)這些元素的注意，使它們?cè)谟脩魷?zhǔn)備行動(dòng)時(shí)很容易被發(fā)現(xiàn)。

使用較暗，飽和度低的顏色作為背景

最好使背景顏色更暗，飽和度更低。顏色變暗會(huì)減少白色，而淡化顏色會(huì)增加灰色。這可以緩和它對(duì)眼睛的刺激。

不僅如此，它也不會(huì)與頁面文本或內(nèi)容爭(zhēng)奪注意力。這讓用戶更容易地閱讀頁面，而不會(huì)造成視覺干擾。

尋找最佳背景顏色

首先創(chuàng)建方形色板，使用顏色選擇器選擇一個(gè)色調(diào)，并將其設(shè)置為最大亮度和飽和度級(jí)別。當(dāng)你調(diào)整它的亮度和飽和度時(shí)，這個(gè)色調(diào)將保持不變。

使用相同的色調(diào)創(chuàng)建四個(gè)具有較低飽和度和亮度的新色板。降低兩個(gè)色板的飽和度，并降低其他兩個(gè)色板的亮度。使用10的倍數(shù)并展開，以便您有廣泛的范圍。使用飽和度/亮度比標(biāo)記每個(gè)色板。

將飽和度樣本放置在色調(diào)樣本的左側(cè)，并從最低飽和度到最高飽和度進(jìn)行排序；然后將亮度樣本放置在色調(diào)樣本的右側(cè)，并從最高亮度到最低亮度進(jìn)行排序。

這些顏色還不是最佳的，因?yàn)樗鼈內(nèi)跃哂?00％的亮度或飽和度。相反，它們將作為尋找更佳色彩的基線。

通過降低第一層中樣本的亮度和飽和度來創(chuàng)建第二層樣本。為每組樣本降低相同數(shù)量的級(jí)別，以使第二層顏色中沒有一個(gè)具有100％飽和度或亮度級(jí)別。

如果您對(duì)第二層不滿意，可以探索更多顏色。再次降低級(jí)別以創(chuàng)建第三層顏色?，F(xiàn)在您有八種最佳顏色的調(diào)色板，可選擇不同的亮度和飽和度。

好的和壞的背景舉例

以下是一些網(wǎng)頁背景的例子，注意你能在好的頁面和壞的頁面上停留多久。

不好的綠色：?Panic?/?Prismic? ?|? ?好的綠色：?FreshDesk?/?Sigstr

不好的紅色： Telepath?/?Meat? ?|? ?好的紅色： AppFigures?/?Jackie

不好的藍(lán)色： Compose?/?DareIt? ? |? ?好的藍(lán)色： Republic?/?MailTag

美學(xué)與可用性

顏色會(huì)影響設(shè)計(jì)的美感，也會(huì)影響設(shè)計(jì)的可用性。設(shè)計(jì)師需要同時(shí)關(guān)注這兩方面，并讓他們一起工作來取悅眼睛。你不必為了美觀而犧牲可用性，因?yàn)槟憧梢酝瑫r(shí)創(chuàng)造一個(gè)好的界面。

作者：anthony

翻譯：我的鞋帶