在以往的(de)商業(yè)模式當中，常常講究“3C”，分(fēn)别是 ←←(shì)公司(company)、客戶(customers)和(hé)競争對(duì)$•手(competitors)。在如(rú)今的(de)UI∏★₩設計(jì)領域也(yě)同樣有(yǒu)著(β&zhe)類似的(de)三要(yào)素，它們也(yě)是(shì)3C，不±©(bù)過和(hé)商業(yè)模式中的(de)3C不(★§πbù)同，它們分(fēn)别是(shì)色彩(Color)、對(duì)比度(C'↓ontrast)和(hé)內(nèi)容(Con£'tent)。雖然它們的(de)基本概念并不(bù)複雜(zá)，但(dàn)是αγ(shì)在實際的(de)UI設計(jì)項目當中，它們比看(kàn)起來(láiε∞)要(yào)複雜(zá)得(de)多(duō)。今天的(de)文(wén)章(zhāng)，$♣↓我們就(jiù)來(lái)聊一(yī)聊UI設計(jì)中的(de)3C要(yào)素。
色彩是(shì)絕大(dà)多(duō)數(shù)設計(jì)給用(yòng)戶傳遞的(d≈∑☆→e)最顯著的(de)視(shì)覺元素之一(yī)。設計(jì)師(shī)和(♥¥ hé)非設計(jì)師(shī)都(dōu)會¥'≥$(huì)常常聊到(dào)色彩，對(duì)于不(bù)同色彩的(de)大(dà)家(↔$Ωjiā)有(yǒu)著(zhe)不(bù)同的(de)感受和(hé)€γα體(tǐ)驗。
色彩本身(shēn)常常就(jiù)能(néng)夠創造出獨特的(de)情感體(tǐ)驗<™α ，即使沒有(yǒu)其他(tā)的(de)元素。任何可✔≈£(kě)見(jiàn)的(de)色彩，呈 δ£現(xiàn)在任何人(rén)面前，幾乎都(dōu)能(néng)夠獲得(de)反饋。這✔∑$ε(zhè)也(yě)使得(de)色彩在設計(jì)中有(yǒu)著(zhe)獨£α'"特的(de)地(dì)位。
色彩強大(dà)，可(kě)以成就(jiù)設•☆計(jì)，也(yě)能(néng)毀掉設計(j™$©ì)。色彩在界面當中影(yǐng)響著(zhe)許多(duō)不©÷↔(bù)同的(de)功能(néng)和(hé)屬性：
色彩會(huì)影(yǐng)響到(dào)：
設計(jì)師(shī)可(kě)以使用(yòng)色彩創建：
但(dàn)是(shì)這(zhè)并不×÷φ(bù)是(shì)意味著(zhe)将不(bù¥λ₹&)同的(de)色彩簡單的(de)混合到(dào)一(yī)起。
配色方案是(shì)控制(zhì)設計(jì)當中不(b←$εù)同色彩組合的(de)合集。設計(jì)師(shī)通(tōng)過創建配色方案，系統地(dì♠™€)對(duì)品牌和(hé)UI界面的(de)色彩進行(xín☆g)管理(lǐ)，這(zhè)确保了(le)品牌和(hé)UI 在色彩的(de)運用(yòng≠®)上(shàng)保持著(zhe)高(gāo)度的(de)一(yī"δ₹)緻。
配色方案中的(de)具體(tǐ)搭配是(shì)植根于色彩理(lǐ)論的(de♠£Ω)。色彩從(cóng)來(lái)都(dōu)不(bù)是(shì)越多(duō)越好(hǎo)，¶ ✔通(tōng)常配色方案當中，色彩數(shù)✔$ 量要(yào)控制(zhì)在 3 種左右。☆₽✔•Mockplus 推薦在配色中 3 中色彩的(de)占比是(shì)6：•"3：1，而這(zhè)一(yī)點和(hé)室內(nèi∞÷)設計(jì)配色的(de)規則是(shì)一(yī) ✘®∑緻的(de)。這(zhè)種配色的(de)策略和(hé)黃(huáng)金(¥εjīn)比例在內(nèi)核上(shàng)是±φ★₽(shì)一(yī)緻的(de)。
另外(wài)，還(hái)有(yǒu)一(yī)種策略，是(shì)基于黑(hēi)白π§€(bái)兩色來(lái)構建整個(gè)設計(jì)，然後再加入更多™φ(duō)的(de)其他(tā)色彩，将整個(gè)配色方案豐富起來(lái)。黑(λ↕hēi)白(bái)兩色确保了(le)整個(gè)設計(jìδ→ )的(de)輪廓足夠清晰，不(bù)過在後續加入配色的(de)時( ↕≠®shí)候，要(yào)注意色彩的(de)數(shù)量，以及色彩之間(jiā©'n)的(de)對(duì)比度。而這(zhè)也(yě)正好(hǎo)牽涉到(dào)第二¥£個(gè)“C”，也(yě)就(jiù)是(shì) ₽ Contrast，對(duì)比。
元素之間(jiān)的(de)差異往往能(néng)夠借助對(duì)↓♥γφ比來(lái)凸顯。創建富有(yǒu)層次的(de)視(shì)覺結↓±≈構，讓內(nèi)容的(de)可(kě)讀(dú)性更強，讓信息更容易被用(yòng)戶所理(l←÷±♣ǐ)解和(hé)吸收。對(duì)比強烈的(de)α≠₽元素讓用(yòng)戶輕松地(dì)注意到(dàβ₽o)構成對(duì)比的(de)元素，創造自(zì)然的(de)視(shì)覺模式∑☆和(hé)用(yòng)戶流程。
對(duì)比度的(de)重要(yào)性↕γ¥之所以如(rú)此之高(gāo)，很(hěn)大(d↑↑•₽à)程度上(shàng)是(shì)因為(wèi)它廣泛的(de)适用(yòng★$δ)性和(hé)顯著的(de)實用(yòng)性。在控制(zhì)對(duì)比度的(de)時(§ shí)候，你(nǐ)需要(yào)明(míng)确對(→≠duì)比度通(tōng)常所涉及的(de)元素類型和(hé)屬性：
在探討(tǎo)UI的(de)可(kě)訪問(wèn)性的(de)✔時(shí)候，對(duì)比度始終是(shì)關鍵性的(de)因素。在 A11Y 這(zhè©γ )個(gè)力求提升網頁可(kě)訪問(wèφγn)性的(de)項目當中，他(tā)們對(duì)于對(duì)比有(yǒ₩↔σu)下(xià)列一(yī)系列的(de)建議(yì)：在配色的(de)時(shí)候，借助色輪α™®選擇處于相(xiàng)對(duì)位置的(de)對(duì)比色，讓視(shì)覺上(shà×Ω≤ng)的(de)對(duì)比足夠明(míng)晰;在選擇字體(tǐ)的(de)時(shí)候，✔Ω借助不(bù)同類型的(de)字體(tǐ)差異，來(lái)≈>創造視(shì)覺上(shàng)的(de•™₽♦)對(duì)比，也(yě)是(shì)如$×∞✘(rú)今網頁設計(jì)中經常用(yòng)到(dào)的ε♠₹(de)技(jì)巧。
空(kōng)間(jiān)上(shàng)的(de)對(duì)比營造也(yě)很δ£≤(hěn)有(yǒu)技(jì)巧，使用(yòng)>不(bù)同的(de)留白(bái)來(lái)營≠∑©造疏密對(duì)比。如(rú)果你(nǐ)想讓某一(yīφ↑σ)部分(fēn)內(nèi)容更容易吸引© ←♣用(yòng)戶的(de)注意力，不(bù)妨讓它周圍有(yǒu)更多(duō)的(de)留•€×☆白(bái)。
簡而言之，對(duì)比是(shì)通(tōng)過對(duì)立的(de)差≥↕異化(huà)來(lái)創造吸引力。看(kàn)似不(b✘ α♦ù)同的(de)元素實際上(shàng)可(kě)以搭配起來(lái)，達到(dà♣♦λ>o)一(yī)目了(le)然的(de)效果。
要(yào)知(zhī)道(dào)對(duì)比是(shì)否達到(dào)了(le)你(∑↓nǐ)的(de)預期效果，在查看(kàn)屏∞ε∑₩幕上(shàng)元素的(de)時(shí)候，不(b♣←ù)妨考慮下(xià)面的(de)幾個(gè)因素：
這(zhè)是(shì)3C要(yào)素中最後的(de)一(¶π <yī)個(gè)組成部分(fēn)。用(yòng)戶界面中的(de)內(n∑↑Ωèi)容非常豐富，涵蓋了(le)從(cóng><∑≤)圖像、文(wén)字、圖标、品牌等所有(y✘©↓'ǒu)相(xiàng)關的(de)信息。內(nèi)容還(hái)包括視(shì)頻☆εδ(pín)以及各種微(wēi)文(wén)案甚至UI控→件(jiàn)上(shàng)的(de)說(shuō)明(míng)和(hé)标簽Ωσ。
所有(yǒu)的(de)這(zhè)些(xiē)元素彙聚到(dào)了(le)一(yī)起，構≈©成用(yòng)戶界面，甚至讓設計(jì)••變得(de)優秀和(hé)特别。為(wèi)什(shén)麽用(yòng)戶會(huì)停留✔•♥≥在這(zhè)個(gè)界面而不(bù)是(shì)去(λλ₩qù)别的(de)地(dì)方?原因就(jiù)是(shì)內(nèi)容。
隻有(yǒu)內(nèi)容是(shì)不(bù)夠的(π↓$$de)，內(nèi)容本身(shēn)要(yào)足夠"♣¶δ精彩。高(gāo)分(fēn)辨率的(de)圖片，涵蓋有(yǒuε₹)用(yòng)信息的(de)文(wén)本，和(hé)你(nǐ)的(de)競争對(duì)手的(σ∏γde)內(nèi)容相(xiàng)比，你✘∏(nǐ)所創建的(de)內(nèi)容必須更加優秀，更加有(yǒu)料，更加突出。
這(zhè)必然是(shì)一(yī)個(gè)艱巨的(d±'e)任務。你(nǐ)需要(yào)有(yǒu)所堅持，有(yǒu↑₹)所相(xiàng)信，你(nǐ)需要(yào)讓用(yòng)戶看(kàn)到γ♠♠(dào)內(nèi)容的(de)真實，需要(yào)和(hδα±∞é)你(nǐ)的(de)情感産生(shēng)共鳴。
将UI界面中的(de)色彩，對(duì)比和(hé)內(nèi) ♥容放(fàng)在一(yī)起構成3C要(yào)素并不(bù)僅僅是(shì)因為(w•èi)它們的(de)單詞開(kāi)頭都(dōu)是(shì)字母C，而是(shì)它們本身(>∞shēn)在UI設計(jì)中都(dōu)占據這(zhè)足夠突出的(de)地(dì)位，有↑↔©(yǒu)著(zhe)無與倫比的(de)重要(yào)性。≈₩在策略上(shàng)，圍繞著(zhe)這(zhè)3C要(yào)素來(lái)φ✔↑設計(jì)，能(néng)讓你(nǐ)的(de)UI界面更加σ•富有(yǒu)凝聚力。
