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

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

例如，盯著上面圖片中的色塊。左列由亮度和飽和度最大的顏色組成，右側(cè)由80%亮度和飽和度的顏色組成。你對盯著左邊欄的時間將低于右邊欄，因為明亮的、飽和的顏色會讓你的眼睛感到難受。

亮度和飽和度

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

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

顏色對注意力的影響

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

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

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

明亮、飽和的背景色會吸引用戶的注意，但不會保持用戶的注意力。使用它們就像在用戶面前尖叫一樣。你會引起他們的注意，但他們很快就會把目光移開，因為你在干擾他們。

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

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

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

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

尋找最佳背景顏色

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

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

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

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

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

如果您對第二層不滿意，可以探索更多顏色。再次降低級別以創(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é)與可用性

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

作者：anthony

翻譯：我的鞋帶