干貨 | UX設(shè)計(jì)中顏色微調(diào)的五個技巧

顏色是所有設(shè)計(jì)系統(tǒng)中的一個關(guān)鍵要素晌姚。在網(wǎng)站或應(yīng)用程序中沪曙,可以通過多種方式使用顏色邑蒋。有時通過對比或?qū)㈩伾拗圃谶x定范圍姓蜂,可以利用顏色創(chuàng)建焦點(diǎn);顏色還有助于建立層次結(jié)構(gòu)寺董,并影響用戶的視角覆糟。

在本文中刻剥,我們將討論如何策略性地使用顏色遮咖。

1. 通過配比創(chuàng)建焦點(diǎn)

顏色配比的一個典范是Viporte的設(shè)計(jì)。向下滾動其主頁時造虏,你會發(fā)現(xiàn)每個部分的中心部位都有一個大字母御吞。在該部分加入動畫前麦箍,該字母就涂滿漂亮的顏色。不同動畫圖像的顏色與字母的顏色有關(guān)陶珠。焦點(diǎn)是各部分的中心最毋庸置疑的內(nèi)容挟裂,這在某種程度上要?dú)w功于顏色的集中使用。配比變化——有時只有幾種顏色揍诽,有時有很多種顏色诀蓉。無論采用哪種方式,配比都是用于吸引注意力并形成焦點(diǎn)暑脆。如果每個部分都充斥著比較明顯的顏色渠啤,焦點(diǎn)就不會那么清晰了。

2. 通過對比引起注意

此外添吗,通過顏色可以巧妙地進(jìn)行對比沥曹。如果整體設(shè)計(jì)的顏色趨于平靜或柔和,添加對比色會讓圖像更引人關(guān)注碟联。

Thinx的設(shè)計(jì)便是如此妓美。在其主頁上,界面的整體配色方案實(shí)際上采用的是黑白色鲤孵。然而壶栋,該設(shè)計(jì)在很大程度上依賴于數(shù)量龐大的照片。尤其是在主頁頂部普监,內(nèi)衣圖片以暗紅色為背景委刘。與頁面上的其它內(nèi)容相比,這相當(dāng)大膽鹰椒。

毫無疑問锡移,這里凸顯的是暗紅色。紅色與黑白配色方案形成高度對比漆际。我喜歡列舉Thinx的例子淆珊,因?yàn)檫@行之有效,這表明明亮的霓虹色不是通過對比而引人注目的唯一顏色奸汇。這的確是協(xié)調(diào)兩種顏色的一種舉措施符,能夠切實(shí)凸顯其中的一種顏色。

3. 使用顏色來創(chuàng)建UX設(shè)計(jì)模式

?

創(chuàng)建視覺模式的最佳方法是通過連貫性擂找。反過來戳吝,模式創(chuàng)建了用戶習(xí)以為常的聯(lián)系。同理贯涎,用戶習(xí)慣于將某些圖標(biāo)與某些行為聯(lián)系起來听哭,比如垃圾桶意味著刪除。顏色更是因人而異,因?yàn)槊總€網(wǎng)站或應(yīng)用程序都可以從其自身角度賦予顏色意義陆盘。

讓我們來探討下Underbelly產(chǎn)品網(wǎng)站上藍(lán)色的運(yùn)用普筹。這個簡單的例子能充分支持我的觀點(diǎn)。Underbelly網(wǎng)站上所有可以點(diǎn)擊打開的地方都是藍(lán)色的隘马。登陸該網(wǎng)址幾秒鐘后太防,你很快會發(fā)現(xiàn)其鏈接都是藍(lán)色的。這便是通過顏色創(chuàng)建模式的方法酸员。模式行之有效蜒车,因?yàn)槟J侥軌蜃層脩艉驮L問者輕易地悟出某些含義。然而幔嗦,越容易悟徹醇王,啟發(fā)人們進(jìn)行的思考就越少;現(xiàn)在我們都知道這讓Steve Krug有多開心崭添。

4. 通過顏色搭建層次結(jié)構(gòu)

?

顏色還擅長搭建層次結(jié)構(gòu)寓娩。在Skore的產(chǎn)品頁面,幾乎所有部分都含有綠色元素呼渣。綠色的重復(fù)使用創(chuàng)建了可以識別的模式棘伴,還有助于區(qū)分給定部分的重要內(nèi)容。通常屁置,很容易通過大泻缚洹(例如字體大小)來說明層次結(jié)構(gòu)蓝角。但利用顏色的強(qiáng)度阱穗,以及添加使用的顏色,都可以很好地搭建出層次結(jié)構(gòu)使鹅。

在Skore的例子中揪阶,綠色與灰色文本和白色背景形成了很好的對比,因而引人注目患朱。此外鲁僚,其配色方案并不是依賴其它重點(diǎn)色將綠色凸顯出來。所有這些都有助于各部分顯示層次結(jié)構(gòu)裁厅。因此冰沙,綠色有助于引導(dǎo)用戶關(guān)注重要內(nèi)容,前提是各部分都有很好的層次結(jié)構(gòu)执虹。綠色元素告知用戶首先要看向哪里拓挥。

5. 利用顏色的相似性

設(shè)計(jì)人員利用顏色實(shí)現(xiàn)不同的目標(biāo),但大多是利用和重復(fù)利用顏色保持設(shè)計(jì)內(nèi)容的連貫性袋励。我們來看看InVision年底的登錄頁面侥啤。頁面頂部是粉色和紫色漸變背景圖像当叭。頁面下方,按鈕的顏色也采用了紅色和紫色愿棋。

此外,登錄頁面再次使用了粉色和紫色作為背景均牢,背景之上使用了白色糠雨。頁面還再次使用了黑色和灰色文本,背景為白色徘跪。如果每次都使用不同的顏色甘邀,頁面看上去就不會那么棒了。

我們來看看Co-motion垮庐。在其主頁上松邪,創(chuàng)意團(tuán)隊(duì)使用了幾種不同的顏色。這幾種顏色在色調(diào)上非常相似哨查,看上去協(xié)調(diào)而流暢逗抑,但并不凸顯任何內(nèi)容,這也是個不錯的設(shè)計(jì)寒亥。在這種情況下邮府,對顏色的強(qiáng)調(diào)是通過頁面良好的協(xié)調(diào)性和流暢性實(shí)現(xiàn)的,你想讓用戶對頁面感興趣并滾動頁面讀取內(nèi)容溉奕。

結(jié)論

顏色是非常棒的工具褂傀,它能幫助你實(shí)現(xiàn)各種設(shè)計(jì)目標(biāo)。顏色有助于明確和搭建層次結(jié)構(gòu)并明晰焦點(diǎn)加勤。顏色強(qiáng)調(diào)形式多種多樣仙辟。無論哪種方式,設(shè)計(jì)時使用顏色將其樂無窮鳄梅。在策略性配色方案的幫助下叠国,將可輕松影響訪問者或用戶的視角。

------------------------------------------------------------

非特殊說明戴尸,本文版權(quán)歸原作者所有煎饼,轉(zhuǎn)載請注明出處

本文圖片未注明來源均來自網(wǎng)絡(luò),版權(quán)歸作者所有

微信公眾號:qduckcn 校赤,趣達(dá)愛設(shè)計(jì)

原文出處:www.webdesignerdepot.com

原文作者:?Paula Borowska

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吆玖,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子马篮,更是在濱河造成了極大的恐慌沾乘,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浑测,死亡現(xiàn)場離奇詭異翅阵,居然都是意外死亡歪玲,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門掷匠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來滥崩,“玉大人,你說我怎么就攤上這事讹语「破ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵顽决,是天一觀的道長短条。 經(jīng)常有香客問我,道長才菠,這世上最難降的妖魔是什么茸时? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮赋访,結(jié)果婚禮上可都,老公的妹妹穿的比我還像新娘。我一直安慰自己蚓耽,他們只是感情好汹粤,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著田晚,像睡著了一般嘱兼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上贤徒,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天芹壕,我揣著相機(jī)與錄音,去河邊找鬼接奈。 笑死踢涌,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的序宦。 我是一名探鬼主播睁壁,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼互捌!你這毒婦竟也來了潘明?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤秕噪,失蹤者是張志新(化名)和其女友劉穎钳降,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腌巾,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡遂填,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年誊爹,在試婚紗的時候發(fā)現(xiàn)自己被綠了皂岔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡壁榕,死狀恐怖而克,靈堂內(nèi)的尸體忽然破棺而出列肢,到底是詐尸還是另有隱情庄萎,我是刑警寧澤妖泄,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站客税,受9級特大地震影響况褪,放射性物質(zhì)發(fā)生泄漏撕贞。R本人自食惡果不足惜更耻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望捏膨。 院中可真熱鬧秧均,春花似錦、人聲如沸号涯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽链快。三九已至誉己,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間域蜗,已是汗流浹背巨双。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留霉祸,地道東北人筑累。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像丝蹭,于是被迫代替她去往敵國和親慢宗。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評論 2 354

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