按鈕最佳實踐——色彩的用戶體驗

簡評：作者從用戶體驗角度提出了按鈕最佳實踐的幾點建議，尤其是色彩方面，提出「色彩心理學」的概念。

如果我們看一下 Gmail 的用戶體驗，界面非常簡單，而且看起來好像線框模型的第一階段。

Gmail 設計簡潔，顏色單一（單色調），但是很棒！

這裡的用戶體驗和上下文密切相關。

它的顏色和位置，在這個案例中，比起文字 「Send」 更重要。他們可以使用一個普通的圖標而不是文字，對用戶的行為沒有影響。

事實上，在移動應用中，他們沒有在按鈕中使用文字，而是一個簡單的藍色飛機箭頭與頁面上的其他東西形成鮮明的對比——看起來足夠像按鈕了——除了將它作為首要的文字動作按鈕沒有別的選擇了。

如何用按鈕抓住用戶的注意力？

設計 Web 界面的動作按鈕需要謹慎和熟慮；為了讓按鈕出彩，它必須是你工作的一部分。

你可以為你的網站創造一個很好的動作按鈕，結合一些科學的色彩研究和設計原則，大幅提升轉化率。在我的項目中，我總是結合 6 個重要的工具來達到這個目標：

• 位置：給你的行動召喚（call-to-action) 按鈕一個顯眼的位置是非常重要的。按鈕的位置對於吸引訪客的眼球是至關重要的。在一個顯眼的位置（突出的區域，布局的頂部或者中部，表單按鈕的角度）可以導致更高的轉化率，因為用戶很可能注意到這些動作按鈕而且發送動作。
• 清晰的信息（或者為移動設備設計的圖標）：使用正確的詞，原創及使用動次來鼓勵行動（購買，下載，觀看，測試等等）。經驗表明，用戶的感覺存在一個很大的信任問題。為了提升點擊轉化率和構建信任，遇見他們的懷疑，並通過你採取的行動來告訴他們將能獲得什麼。
• 形狀：矩形的按鈕比圓形的好。
• 大小：一個元素與其周圍相對應的元素的大小表明其重要性。記住：元素越大，越重要。決定你網站中特定動作的重要性，並相應地調整你按鈕的大小。
• 著色：我相信最重要的部分是決定行動召喚按鈕使用什麼顏色，因為他們和用戶心理交互。我建議相對於周圍的元素和背景，使用高對比度的顏色。
• 提供可選的行動：一個網頁可以有多個動作調用。有時提供次要的選項是必要的，為了讓用戶信服，稍後採用你設計的首要的行動調用。

色彩心理學

現在我有個問題：顏色對於轉變來講真的很重要嗎？

顏色可以調起情感這是一個眾所周知的事實，每種顏色都會讓人產生不同的感覺或心情，因此，看到顏色時會有不同的反應（當然，不同的文化對顏色的感知也是不同的）。所以，選擇行動召喚按鈕的顏色取決於你想要啟發什麼樣的情感。

例如：

• 紅色： 力量，激情，愛，消極的；
• 綠色：成長，金錢，環境，積極的；
• 藍色：信任，和平，忠誠，安全，積極的；
• 黑色：正式，奢侈，成熟，中性的；
• 灰色：禁用的；
• 棕色：戶外，食物，地球；
• 橙色：信息，興高采烈，友好；
• 紫色：尊貴，神秘，靈性；

還有一個提示：對比是關鍵！

如果你想突出設計元素，你可以在背景中使用互補色。

我建議大按鈕的顏色不要太突出（相比於周圍的元素和背景），小按鈕的顏色應該要鮮艷一點。但無論你選擇什麼顏色，確保你設計的按鈕是顯而易見的並且不會和整體的設計衝突。

記住，對比度不僅僅是色輪傷的互補色，而且和值相關。

一個明亮的按鈕不會像暗淡的按鈕在明亮的背景中突出。最重要的是，文本也需要在按鈕中突出。

一個不好的案例：

一個好的案例：

按鈕的最佳實踐

好，我現在展示一些按鈕的簡單指導，在我的顧客的行動召喚按鈕，表單，彈窗中已經使用了（所以用這個來作為例子）。

像我之前說的，我用幾種顏色來代表四種重要的感覺：

• 積極的（CTA：保存，發送，下載）：藍色，綠色；
• 消極的（CTA：刪除，阻塞，重置）：紅色；
• 中性的（CTA：查看更多，可選的，發現）：黑色；
• 不可用的：灰色；

所以，如果我們在白色背景中使用這些例子，在使用關於著色和對比技巧之前你會感覺更好一點。

原文地址：https://uxplanet.org/best-practices-for-buttons-b7048479d440

日報延伸閱讀：

• UI 設計中顏色使用法則 https://zhuanlan.zhihu.com/p/25207522?refer=jiguang-daily
• 拇指區域：為移動用戶設計

歡迎關註：

• 知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。

• 網易雲電台「極光日報」，上下班路上為你讀報。
• 微信公眾號「極光開發者」，每周兩篇技術類乾貨。

推薦閱讀：