UI設計當中(zhōng)的3C要素：色彩，對比和内容

在以往的商(shāng)業模式當中(zhōng)，常常講究“3C”，分(fēn)别是公司(company)、客戶(customers)和競争對手(competitors)。在如今的UI設計領域也同樣有着類似的三要素，它們也是3C，不過和商(shāng)業模式中(zhōng)的3C不同，它們分(fēn)别是色彩(Color)、對比度(Contrast)和内容(Content)。雖然它們的基本概念并不複雜，但是在實際的UI設計項目當中(zhōng)，它們比看起來要複雜得多。今天的文章，我(wǒ)們就來聊一(yī)聊UI設計中(zhōng)的3C要素。

色彩(Color)

色彩是絕大(dà)多數設計給用戶傳遞的最顯著的視覺元素之一(yī)。設計師和非設計師都會常常聊到色彩，對于不同色彩的大(dà)家有着不同的感受和體(tǐ)驗。

色彩本身常常就能夠創造出獨特的情感體(tǐ)驗，即使沒有其他的元素。任何可見的色彩，呈現在任何人面前，幾乎都能夠獲得反饋。這也使得色彩在設計中(zhōng)有着獨特的地位。

色彩強大(dà)，可以成就設計，也能毀掉設計。色彩在界面當中(zhōng)影響着許多不同的功能和屬性：

色彩會影響到：

• 可用性和可讀性

• 品牌認知(zhī)度和品牌意識

• 用戶視覺和交互

• 信息組織和用戶流程

• 設計的整體(tǐ)體(tǐ)驗

設計師可以使用色彩創建：

• 清晰易懂的導航

• 直觀的交互

• 爲整個項目設定情緒

• 創建強大(dà)的可供調用的元素

• 呈現設計的主題，營造氛圍

但是這并不是意味着将不同的色彩簡單的混合到一(yī)起。

配色方案是控制設計當中(zhōng)不同色彩組合的合集。設計師通過創建配色方案，系統地對品牌和UI界面的色彩進行管理，這确保了品牌和UI 在色彩的運用上保持着高度的一(yī)緻。

配色方案中(zhōng)的具體(tǐ)搭配是植根于色彩理論的。色彩從來都不是越多越好，通常配色方案當中(zhōng)，色彩數量要控制在 3 種左右。Mockplus 推薦在配色中(zhōng) 3 中(zhōng)色彩的占比是6：3：1，而這一(yī)點和室内設計配色的規則是一(yī)緻的。這種配色的策略和黃金比例在内核上是一(yī)緻的。

另外(wài)，還有一(yī)種策略，是基于黑白(bái)兩色來構建整個設計，然後再加入更多的其他色彩，将整個配色方案豐富起來。黑白(bái)兩色确保了整個設計的輪廓足夠清晰，不過在後續加入配色的時候，要注意色彩的數量，以及色彩之間的對比度。而這也正好牽涉到第二個“C”，也就是 Contrast，對比。

對比(Contrast)

元素之間的差異往往能夠借助對比來凸顯。創建富有層次的視覺結構，讓内容的可讀性更強，讓信息更容易被用戶所理解和吸收。對比強烈的元素讓用戶輕松地注意到構成對比的元素，創造自然的視覺模式和用戶流程。

對比度的重要性之所以如此之高，很大(dà)程度上是因爲它廣泛的适用性和顯著的實用性。在控制對比度的時候，你需要明确對比度通常所涉及的元素類型和屬性：

• 色彩對比

• 尺寸對比

• 方向對比

• 空間對比

• 形狀對比

在探讨UI的可訪問性的時候，對比度始終是關鍵性的因素。在 A11Y 這個力求提升網頁可訪問性的項目當中(zhōng)，他們對于對比有下(xià)列一(yī)系列的建議：在配色的時候，借助色輪選擇處于相對位置的對比色，讓視覺上的對比足夠明晰;在選擇字體(tǐ)的時候，借助不同類型的字體(tǐ)差異，來創造視覺上的對比，也是如今網頁設計中(zhōng)經常用到的技巧。

空間上的對比營造也很有技巧，使用不同的留白(bái)來營造疏密對比。如果你想讓某一(yī)部分(fēn)内容更容易吸引用戶的注意力，不妨讓它周圍有更多的留白(bái)。

簡而言之，對比是通過對立的差異化來創造吸引力。看似不同的元素實際上可以搭配起來，達到一(yī)目了然的效果。

要知(zhī)道對比是否達到了你的預期效果，在查看屏幕上元素的時候，不妨考慮下(xià)面的幾個因素：

• 可讀性：文本和圖形是否都清晰可識别?

• 清晰度：一(yī)個元素和另外(wài)一(yī)個元素之間能否輕松分(fēn)辨?

• 可訪問性：你的設計是否能夠服務更多的用戶?

• 上下(xià)文環境：用戶是否能在特定的地點特定的場合明白(bái)你的設計?

内容(Content)

這是3C要素中(zhōng)最後的一(yī)個組成部分(fēn)。用戶界面中(zhōng)的内容非常豐富，涵蓋了從圖像、文字、圖标、品牌等所有相關的信息。内容還包括視頻以及各種微文案甚至UI控件上的說明和标簽。

所有的這些元素彙聚到了一(yī)起，構成用戶界面，甚至讓設計變得優秀和特别。爲什麽用戶會停留在這個界面而不是去(qù)别的地方?原因就是内容。

隻有内容是不夠的，内容本身要足夠精彩。高分(fēn)辨率的圖片，涵蓋有用信息的文本，和你的競争對手的内容相比，你所創建的内容必須更加優秀，更加有料，更加突出。

這必然是一(yī)個艱巨的任務。你需要有所堅持，有所相信，你需要讓用戶看到内容的真實，需要和你的情感産生(shēng)共鳴。

結語

将UI界面中(zhōng)的色彩，對比和内容放(fàng)在一(yī)起構成3C要素并不僅僅是因爲它們的單詞開(kāi)頭都是字母C，而是它們本身在UI設計中(zhōng)都占據這足夠突出的地位，有着無與倫比的重要性。在策略上，圍繞着這3C要素來設計，能讓你的UI界面更加富有凝聚力。