UI設(shè)計當(dāng)中的3C要素:色彩,對比和內(nèi)容

1 評論 12043 瀏覽 87 收藏 9 分鐘

將UI界面中的色彩,對比和內(nèi)容放在一起構(gòu)成3C要素并不僅僅是因為它們的單詞開頭都是字母C,而是它們本身在UI設(shè)計中都占據(jù)這足夠突出的地位,有著無與倫比的重要性。

在以往的商業(yè)模式當(dāng)中,常常講究“3C”,分別是公司(company)、客戶(customers)和競爭對手(competitors)。在如今的UI設(shè)計領(lǐng)域也同樣有著類似的三要素,它們也是3C,不過和商業(yè)模式中的3C不同,它們分別是色彩(Color)、對比度(Contrast)和內(nèi)容(Content)。雖然它們的基本概念并不復(fù)雜,但是在實際的UI設(shè)計項目當(dāng)中,它們比看起來要復(fù)雜得多。今天的文章,我們就來聊一聊UI設(shè)計中的3C要素。

色彩(Color)

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

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

色彩強大,可以成就設(shè)計,也能毀掉設(shè)計。色彩在界面當(dāng)中影響著許多不同的功能和屬性:

色彩會影響到:

  • 可用性和可讀性
  • 品牌認(rèn)知度和品牌意識
  • 用戶視覺和交互
  • 信息組織和用戶流程
  • 設(shè)計的整體體驗

設(shè)計師可以使用色彩創(chuàng)建:

  • 清晰易懂的導(dǎo)航
  • 直觀的交互
  • 為整個項目設(shè)定情緒
  • 創(chuàng)建強大的可供調(diào)用的元素
  • 呈現(xiàn)設(shè)計的主題,營造氛圍

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

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

配色方案中的具體搭配是植根于色彩理論的。色彩從來都不是越多越好,通常配色方案當(dāng)中,色彩數(shù)量要控制在3種左右。Mockplus 推薦在配色中3中色彩的占比是6:3:1,而這一點和室內(nèi)設(shè)計配色的規(guī)則是一致的。這種配色的策略和黃金比例在內(nèi)核上是一致的。

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

對比(Contrast)

元素之間的差異往往能夠借助對比來凸顯。創(chuàng)建富有層次的視覺結(jié)構(gòu),讓內(nèi)容的可讀性更強,讓信息更容易被用戶所理解和吸收。對比強烈的元素讓用戶輕松地注意到構(gòu)成對比的元素,創(chuàng)造自然的視覺模式和用戶流程。

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

  • 色彩對比
  • 尺寸對比
  • 方向?qū)Ρ?/li>
  • 空間對比
  • 形狀對比

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

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

簡而言之,對比是通過對立的差異化來創(chuàng)造吸引力??此撇煌脑貙嶋H上可以搭配起來,達(dá)到一目了然的效果。

要知道對比是否達(dá)到了你的預(yù)期效果,在查看屏幕上元素的時候,不妨考慮下面的幾個因素:

  • 可讀性:文本和圖形是否都清晰可識別?
  • 清晰度:一個元素和另外一個元素之間能否輕松分辨?
  • 可訪問性:你的設(shè)計是否能夠服務(wù)更多的用戶?
  • 上下文環(huán)境:用戶是否能在特定的地點特定的場合明白你的設(shè)計?

內(nèi)容(Content)

這是3C要素中最后的一個組成部分。用戶界面中的內(nèi)容非常豐富,涵蓋了從圖像、文字、圖標(biāo)、品牌等所有相關(guān)的信息。內(nèi)容還包括視頻以及各種微文案甚至UI控件上的說明和標(biāo)簽。

所有的這些元素匯聚到了一起,構(gòu)成用戶界面,甚至讓設(shè)計變得優(yōu)秀和特別。為什么用戶會停留在這個界面而不是去別的地方?原因就是內(nèi)容。

只有內(nèi)容是不夠的,內(nèi)容本身要足夠精彩。高分辨率的圖片,涵蓋有用信息的文本,和你的競爭對手的內(nèi)容相比,你所創(chuàng)建的內(nèi)容必須更加優(yōu)秀,更加有料,更加突出。

這必然是一個艱巨的任務(wù)。你需要有所堅持,有所相信,你需要讓用戶看到內(nèi)容的真實,需要和你的情感產(chǎn)生共鳴。

結(jié)語

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

 

原文作者 :?CARRIE COUSINS?

譯者 :?陳子木

譯文地址:http://www.uisdc.com/user-interface-color-contrast-content

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!