UI設計當中的(of)3C要(want)素：色彩，對比和(and)内容

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

色彩(Color)

色彩是(yes)絕大(big)多數設計給用(use)戶傳遞的(of)最顯著的(of)視覺元素之一(one)。設計師和(and)非設計師都會常常聊到(arrive)色彩，對于(At)不(No)同色彩的(of)大(big)家有着不(No)同的(of)感受和(and)體驗。

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

色彩強大(big)，可以(by)成就設計，也能毀掉設計。色彩在(exist)界面當中影響着許多不(No)同的(of)功能和(and)屬性：

色彩會影響到(arrive)：

• 可用(use)性和(and)可讀性

• 品牌認知度和(and)品牌意識

• 用(use)戶視覺和(and)交互

• 信息組織和(and)用(use)戶流程

• 設計的(of)整體體驗

設計師可以(by)使用(use)色彩創建：

• 清晰易懂的(of)導航

• 直觀的(of)交互

• 爲(for)整個(indivual)項目設定情緒

• 創建強大(big)的(of)可供調用(use)的(of)元素

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

但是(yes)這(this)并不(No)是(yes)意味着将不(No)同的(of)色彩簡單的(of)混合到(arrive)一(one)起。

配色方案是(yes)控制設計當中不(No)同色彩組合的(of)合集。設計師通過創建配色方案，系統地(land)對品牌和(and)UI界面的(of)色彩進行管理，這(this)确保了(Got it)品牌和(and)UI 在(exist)色彩的(of)運用(use)上(superior)保持着高度的(of)一(one)緻。

配色方案中的(of)具體搭配是(yes)植根于(At)色彩理論的(of)。色彩從來(Come)都不(No)是(yes)越多越好，通常配色方案當中，色彩數量要(want)控制在(exist) 3 種左右。Mockplus 推薦在(exist)配色中 3 中色彩的(of)占比是(yes)6：3：1，而這(this)一(one)點和(and)室内設計配色的(of)規則是(yes)一(one)緻的(of)。這(this)種配色的(of)策略和(and)黃金比例在(exist)内核上(superior)是(yes)一(one)緻的(of)。

另外，還有一(one)種策略，是(yes)基于(At)黑白兩色來(Come)構建整個(indivual)設計，然後再加入更多的(of)其他(he)色彩，将整個(indivual)配色方案豐富起來(Come)。黑白兩色确保了(Got it)整個(indivual)設計的(of)輪廓足夠清晰，不(No)過在(exist)後續加入配色的(of)時(hour)候，要(want)注意色彩的(of)數量，以(by)及色彩之間的(of)對比度。而這(this)也正好牽涉到(arrive)第二個(indivual)“C”，也就是(yes) Contrast，對比。

對比(Contrast)

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

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

• 色彩對比

• 尺寸對比

• 方向對比

• 空間對比

• 形狀對比

在(exist)探讨UI的(of)可訪問性的(of)時(hour)候，對比度始終是(yes)關鍵性的(of)因素。在(exist) A11Y 這(this)個(indivual)力求提升網頁可訪問性的(of)項目當中，他(he)們(them)對于(At)對比有下列一(one)系列的(of)建議：在(exist)配色的(of)時(hour)候，借助色輪選擇處于(At)相對位置的(of)對比色，讓視覺上(superior)的(of)對比足夠明晰;在(exist)選擇字體的(of)時(hour)候，借助不(No)同類型的(of)字體差異，來(Come)創造視覺上(superior)的(of)對比，也是(yes)如今網頁設計中經常用(use)到(arrive)的(of)技巧。

空間上(superior)的(of)對比營造也很有技巧，使用(use)不(No)同的(of)留白來(Come)營造疏密對比。如果你想讓某一(one)部分内容更容易吸引用(use)戶的(of)注意力，不(No)妨讓它周圍有更多的(of)留白。

簡而言之，對比是(yes)通過對立的(of)差異化來(Come)創造吸引力。看似不(No)同的(of)元素實際上(superior)可以(by)搭配起來(Come)，達到(arrive)一(one)目了(Got it)然的(of)效果。

要(want)知道對比是(yes)否達到(arrive)了(Got it)你的(of)預期效果，在(exist)查看屏幕上(superior)元素的(of)時(hour)候，不(No)妨考慮下面的(of)幾個(indivual)因素：

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

• 清晰度：一(one)個(indivual)元素和(and)另外一(one)個(indivual)元素之間能否輕松分辨?

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

• 上(superior)下文環境：用(use)戶是(yes)否能在(exist)特定的(of)地(land)點特定的(of)場合明白你的(of)設計?

内容(Content)

這(this)是(yes)3C要(want)素中最後的(of)一(one)個(indivual)組成部分。用(use)戶界面中的(of)内容非常豐富，涵蓋了(Got it)從圖像、文字、圖标、品牌等所有相關的(of)信息。内容還包括視頻以(by)及各種微文案甚至UI控件上(superior)的(of)說明和(and)标簽。

所有的(of)這(this)些元素彙聚到(arrive)了(Got it)一(one)起，構成用(use)戶界面，甚至讓設計變得優秀和(and)特别。爲(for)什麽用(use)戶會停留在(exist)這(this)個(indivual)界面而不(No)是(yes)去别的(of)地(land)方?原因就是(yes)内容。

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

這(this)必然是(yes)一(one)個(indivual)艱巨的(of)任務。你需要(want)有所堅持，有所相信，你需要(want)讓用(use)戶看到(arrive)内容的(of)真實，需要(want)和(and)你的(of)情感産生(born)共鳴。

結語

将UI界面中的(of)色彩，對比和(and)内容放在(exist)一(one)起構成3C要(want)素并不(No)僅僅是(yes)因爲(for)它們(them)的(of)單詞開頭都是(yes)字母C，而是(yes)它們(them)本身在(exist)UI設計中都占據這(this)足夠突出(out)的(of)地(land)位，有着無與倫比的(of)重要(want)性。在(exist)策略上(superior)，圍繞着這(this)3C要(want)素來(Come)設計，能讓你的(of)UI界面更加富有凝聚力。