旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門文章 > UI設(shè)計(jì) > 對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題

時(shí)間:2020-12-08來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-12-08點(diǎn)擊量:作者:Gella
各位優(yōu)秀的UI設(shè)計(jì)師在做設(shè)計(jì)時(shí),令你們最頭痛的是啥?

  不知道有沒(méi)有小伙伴跟我一樣在做頁(yè)面配色時(shí)會(huì)很痛苦呢,很多時(shí)候都是憑感覺(jué)去配色。最近研究了一下配色方法,這里分享給大家,希望能幫助到一部分小伙伴。

  有個(gè)有趣的研究成果 —— “七秒鐘定律”:人們?cè)谔暨x商品和服務(wù)時(shí) ,只需要 7 秒鐘就可以確定是否感興趣,而在這短暫的 7 秒鐘內(nèi),色彩的作用占到了 67%。

  一個(gè)設(shè)計(jì)作品呈現(xiàn)在用戶面前,最先進(jìn)入眼簾的就是產(chǎn)品的視覺(jué)表現(xiàn),而色彩在其中起到了很大的作用。那么具體到實(shí)際項(xiàng)目中該怎樣配色呢 ?

  1.色彩基礎(chǔ)知識(shí)

  相信大家都知道,UI 色彩使用的是 RGB 模式,但是拾色器主要的選色原理遵循的是 HSB 模式,也就是色相(H)、飽和度(S)、明度(B)。

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  一個(gè)正確的選色過(guò)程是先確定出色相(H),然后再在這個(gè)色相維度下選出飽和度(S)和明度(B)。

  選取色相時(shí)就要用到色相環(huán)這個(gè)熟悉的朋友了,每種顏色都有自己的色彩情緒。

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  下圖是主要顏色的色彩情緒圖:

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  2.UI設(shè)計(jì)中的色彩選擇

  在眾多的 UI 設(shè)計(jì)規(guī)范中,色彩一般分為:

  主色:產(chǎn)品的核心色彩,品牌色

  輔色:豐富頁(yè)面視覺(jué)和傳達(dá)效果的次要顏色

  2.1 主色的選擇

  主色是一個(gè)產(chǎn)品的品牌色,比如像淘寶的橙色、美團(tuán)的黃色等。

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  怎么確定一個(gè)產(chǎn)品的主色呢?可以從以下幾點(diǎn)考慮:

       1、產(chǎn)品屬性 2、行業(yè)屬性 3、用戶人群。

  常見(jiàn)的APP主色應(yīng)用:

  1.綠色:主要集中在社交、學(xué)習(xí)教育、效率辦公等領(lǐng)域。

  如:微信、豆瓣、愛(ài)奇藝、QQ 音樂(lè)、網(wǎng)易云課堂、 BOSS 直聘、拉鉤招聘。

  為什么這些產(chǎn)品喜歡使用綠色呢?

  綠色是中性色彩,沒(méi)有明顯的冷暖傾向,相對(duì)柔和,適合覆蓋用戶群體廣泛的應(yīng)用程序,且無(wú)論學(xué)習(xí)辦公還是社交軟件中的界面都需要長(zhǎng)時(shí)間閱讀,相比紅黃等色彩,柔和的綠色更為適合。

  2.藍(lán)色:更多集中在工具類產(chǎn)品。

  如:百度、QQ瀏覽器、酷狗音樂(lè)、知乎、貝殼找房、釘釘、支付寶

  藍(lán)色幾乎成了工具類辦公類產(chǎn)品的品牌色,為什么呢?

  作為工具類產(chǎn)品(含辦公類)產(chǎn)品,效率是他們所看重的,而藍(lán)色是冷色系色彩能夠讓用戶更加冷靜,高效的完成任務(wù)。

  3.紅橙色:基本集中在電商類產(chǎn)品中。

  如:淘寶、拼多多、京東

  為什么電商類產(chǎn)品喜歡用暖色調(diào)呢?

  暖色調(diào)給人溫暖、活躍、歡快的氣氛,符合用戶購(gòu)物時(shí)的狀態(tài),能夠刺激用戶的購(gòu)買欲。

  2.2 輔助色的選擇

  輔助色是豐富產(chǎn)品的次要顏色, 除了品牌傳達(dá)外,具有更強(qiáng)的實(shí)用性。

  選擇輔助色時(shí)可以有以下2個(gè)方法:

  1、依據(jù)色相環(huán)配色:兩個(gè)顏色在色相環(huán)中角度越大,視覺(jué)差異越大,對(duì)比越強(qiáng)。所以在配色時(shí),越需要被突出的顏色,可以在色環(huán)中離主色越遠(yuǎn),越不需要被突出的顏色靠的越近。

如攜程,APP主色是藍(lán)色,去支付按鈕是需要被重點(diǎn)突出的顏色,使用了主色的互補(bǔ)色橙色, 讓我們一眼就能看見(jiàn)并產(chǎn)生強(qiáng)烈的點(diǎn)擊欲望。

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  2、根據(jù)實(shí)際場(chǎng)景選擇

  比如通知、提醒、取消用紅色;確認(rèn)、同意用綠色、藍(lán)色;收藏、打分、評(píng)價(jià)用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型,跟著常規(guī)方法來(lái)做,是沒(méi)有其它思路的情況下最簡(jiǎn)單、最安全的輔助色選擇方式。

  3.UI設(shè)計(jì)頁(yè)面中的色彩應(yīng)用

  3.1 主色占比大,色彩豐富度高

  主色作為頂部標(biāo)題欄或其它重要模塊中的背景色進(jìn)行大面積應(yīng)用,

  適合場(chǎng)景:需要加深用戶對(duì)品牌的認(rèn)知和辨識(shí)度,同時(shí)產(chǎn)品中包含大量功能點(diǎn),需要用豐富的色彩來(lái)吸引用戶關(guān)注,如 hello bike。

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  3.2 主色占比大,色彩豐富度低

  這類配色主色占比大,盡量使用主題色,很少使用其他顏色。

  適合場(chǎng)景:比較適用于圖片內(nèi)容豐富的題材中,或者是相對(duì)正式、品牌感強(qiáng)的產(chǎn)品,如拉勾、酷狗音樂(lè)。

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
 
  3.3 主色占比小,色彩豐富度高

  適用場(chǎng)景:需要突出自身帶有的服務(wù)和功能,留出更多的空間在內(nèi)容模塊的展示上,如大眾點(diǎn)評(píng)。
 
對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  3.4 主色占比小,色彩豐富度低

  適合場(chǎng)景:產(chǎn)品服務(wù)相對(duì)單一,需要用戶更加注重內(nèi)容本身, 會(huì)盡力避免給予用戶過(guò)多的干擾。如新浪微博。

對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)什么是永遠(yuǎn)都解不開(kāi)的難題
 
  每次配色時(shí),我們都需要對(duì)使用哪種配色方案做出規(guī)劃,然后再動(dòng)手執(zhí)行。設(shè)計(jì)時(shí)做到有理有據(jù),這樣后面的工作就會(huì)輕松很多了。

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖