UI設(shè)計(jì)當(dāng)中的3C要素

色彩(Color)

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

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

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

色彩會影響到:

可用性和可讀性

品牌認(rèn)知度和品牌意識

用戶視覺和交互

信息組織和用戶流程

設(shè)計(jì)的整體體驗(yàn)

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

清晰易懂的導(dǎo)航

直觀的交互

為整個(gè)項(xiàng)目設(shè)定情緒

創(chuàng)建強(qiáng)大的可供調(diào)用的元素

呈現(xiàn)設(shè)計(jì)的主題,營造氛圍

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

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

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

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

對比(Contrast)

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

對比度的重要性之所以如此之高憎茂,很大程度上是因?yàn)樗鼜V泛的適用性和顯著的實(shí)用性找都。在控制對比度的時(shí)候,你需要明確對比度通常所涉及的元素類型和屬性:

色彩對比

尺寸對比

方向?qū)Ρ?/p>

空間對比

形狀對比

在探討UI的可訪問性的時(shí)候能耻,對比度始終是關(guān)鍵性的因素亡驰。在 A11Y

這個(gè)力求提升網(wǎng)頁可訪問性的項(xiàng)目當(dāng)中,他們對于對比有下列一系列的建議:在配色的時(shí)候凡辱,借助色輪選擇處于相對位置的對比色,讓視覺上的對比足夠明晰透乾;在選擇字體的時(shí)候,借助不同類型的字體差異乳乌,來創(chuàng)造視覺上的對比捧韵,也是如今網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技巧汉操。

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

簡而言之针炉,對比是通過對立的差異化來創(chuàng)造吸引力〈叟粒看似不同的元素實(shí)際上可以搭配起來,達(dá)到一目了然的效果赂苗。

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

可讀性:文本和圖形是否都清晰可識別朴沿?

清晰度:一個(gè)元素和另外一個(gè)元素之間能否輕松分辨败砂?

可訪問性:你的設(shè)計(jì)是否能夠服務(wù)更多的用戶?

上下文環(huán)境:用戶是否能在特定的地點(diǎn)特定的場合明白你的設(shè)計(jì)昌犹?

內(nèi)容(Content)

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

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

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蜻势,隨后出現(xiàn)的幾起案子撑刺,更是在濱河造成了極大的恐慌握玛,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挠铲,死亡現(xiàn)場離奇詭異,居然都是意外死亡市殷,警方通過查閱死者的電腦和手機(jī)刹衫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來带迟,“玉大人,你說我怎么就攤上這事仓犬。” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵窘面,是天一觀的道長。 經(jīng)常有香客問我财边,道長,這世上最難降的妖魔是什么酣难? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮憨募,結(jié)果婚禮上紧索,老公的妹妹穿的比我還像新娘菜谣。我一直安慰自己,他們只是感情好葛菇,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著眯停,像睡著了一般济舆。 火紅的嫁衣襯著肌膚如雪莺债。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天齐邦,我揣著相機(jī)與錄音,去河邊找鬼措拇。 笑死,一個(gè)胖子當(dāng)著我的面吹牛丐吓,可吹牛的內(nèi)容都是我干的浅悉。 我是一名探鬼主播券犁,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼粘衬!你這毒婦竟也來了咳促?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤跪腹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后娇昙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡冒掌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了股毫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,795評論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡铃诬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出趣席,到底是詐尸還是另有隱情兵志,我是刑警寧澤宣肚,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站霉涨,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏笙瑟。R本人自食惡果不足惜楼镐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一框产、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧错洁,春花似錦、人聲如沸墓臭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酌摇。三九已至嗡载,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間洼滚,已是汗流浹背埂息。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工遥巴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人铲掐。 一個(gè)月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像摆霉,于是被迫代替她去往敵國和親豪椿。 傳聞我的和親對象是個(gè)殘疾皇子携栋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容