你知道UI設計的3C要素是什麼嗎？

1 人贊了文章

在以往的商業模式當中，常常講究「3C」，分別是公司（company）、客戶（customers）和競爭對手（competitors）。

在如今的UI設計領域也同樣有著類似的三要素，它們也是3C，不過和商業模式中的3C不同，它們分別是色彩（Color）、對比度（Contrast）和內容（Content）。雖然它們的基本概念並不複雜，但是在實際的UI設計項目當中，它們比看起來要複雜得多。今天的文章，我們就來聊一聊UI設計中的3C要素。

色彩（Color）

?

色彩是絕大多數設計給用戶傳遞的最顯著的視覺元素之一。設計師和非設計師都會常常聊到色彩，對於不同色彩的大家有著不同的感受和體驗。

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

色彩強大，可以成就設計，也能毀掉設計。色彩在界面當中影響著許多不同的功能和屬性。

色彩會影響到：

可用性和可讀性

品牌認知度和品牌意識

用戶視覺和交互

信息組織和用戶流程

設計的整體體驗

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

清晰易懂的導航

直觀的交互

為整個項目設定情緒

創建強大的可供調用的元素

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

但是這並不是意味著將不同的色彩簡單的混合到一起。

配色方案是控制設計當中不同色彩組合的合集。設計師通過創建配色方案，系統地對品牌和UI界面的色彩進行管理，這確保了品牌和UI 在色彩的運用上保持著高度的一致。

配色方案中的具體搭配是植根於色彩理論的。色彩從來都不是越多越好，通常配色方案當中，色彩數量要控制在3種左右。在配色中3中色彩的佔比是6:3:1，而這一點和室內設計配色的規則是一致的。這種配色的策略和黃金比例在內核上是一致的。

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

?

對比（Contrast）

?

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

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

色彩對比

尺寸對比

方向對比

空間對比

形狀對比

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

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

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

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

可讀性：文本和圖形是否都清晰可識別？

清晰度：一個元素和另外一個元素之間能否輕鬆分辨？

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

上下文環境：用戶是否能在特定的地點特定的場合明白你的設計？

內容（Content）

?

?這是3C要素中最後的一個組成部分。用戶界面中的內容非常豐富，涵蓋了從圖像、文字、圖標、品牌等所有相關的信息。內容還包括視頻以及各種微文案甚至UI控制項上的說明和標籤。

所有的這些元素匯聚到了一起，構成用戶界面，甚至讓設計變得優秀和特別。為什麼用戶會停留在這個界面而不是去別的地方？原因就是內容。

只有內容是不夠的，內容本身要足夠精彩。高解析度的圖片，涵蓋有用信息的文本，和你的競爭對手的內容相比，你所創建的內容必須更加優秀，更加有料，更加突出。

這必然是一個艱巨的任務。你需要有所堅持，有所相信，你需要讓用戶看到內容的真實，需要和你的情感產生共鳴。

?

結 語

將UI界面中的色彩，對比和內容放在一起構成3C要素，並不僅僅是因為它們的單詞開頭都是字母C，而是它們本身在UI設計中都佔據這足夠突出的地位，有著無與倫比的重要性。在策略上，圍繞著這3C要素來設計，能讓你的UI界面更加富有凝聚力。

來源：designshack

作者： CARRIE COUSINS

譯者：陳子木

圖片來源於網路

微信公眾號：jingdesign91

個人微信號：hixulei

《靜電的UI設計教室 第十二期》精品超小班 正在招生ing 歡迎加微信hixulei諮詢

也歡迎各位小夥伴關注和交流~

推薦閱讀：