旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計終極配色指南

UI設(shè)計終極配色指南

時間:2020-11-30來源:mwtacok.cn點擊量:作者:Gella
時間:2020-11-30點擊量:作者:Gella
  很多同學(xué)經(jīng)??鄲烙谂渖娇偸请y以提升,色感把握不準。今天AAA教育周老師給大家分享一些配色的經(jīng)驗方法,輕松配出好看高級的顏色!

  要想搭配出好看的顏色,我們得先來分析一下,什么是高級的色彩?什么是不高級的色彩?好的配色一眼就可以看出其深厚的設(shè)計功底,而差的配色各有千秋,總之就是一個字

  “丑”

  下面來看兩組案例:

  UI設(shè)計終極配色指南
  UI設(shè)計終極配色指南
 
  通過看圖對比我們能夠發(fā)現(xiàn)

  不高級的配色組合,往往顏色種類多,且飽和度較高,比較刺眼,而高級的配色組合,往往顏色簡潔分明,不會混搭太多其它的色彩。
  咱們就來歸納一下,高級的顏色搭配,會有哪些特征。

  1)色相 / 飽和度 / 明度

  色相

  這里的種類指的是色相,泛指色彩的樣貌,比如紅橙黃綠青藍紫,這些都是不同的色相。

  設(shè)計中除了顏色不宜過于飽和,顏色的種類也不宜過多。

 UI設(shè)計終極配色指南
 
  飽和度

  飽和度是色彩的純度。增加飽和度,色彩會變得更強烈、鮮艷生動;降低飽和度,色彩會變得暗淡乏味。

  UI設(shè)計終極配色指南
 
  明度

  除了色相和飽和度,色彩的層次關(guān)系非常重要。這個層次主要體現(xiàn)在兩個方面,一個方面是顏色明度的進階,不同的顏色明度,會讓頁面更具備空間感;

  明度達到100%時,色彩就會變成白色;明度是0%時,就會變成黑色。如下圖:

  UI設(shè)計終極配色指南
 
  通常同類顏色不同明度的設(shè)計,能讓頁面具備空間層次的同時,還能讓頁面很干凈。但明度也不要隨意指定,最好是等比例,如20%、40%、60%、80%、100% 這樣等比例疊加就好。

  UI設(shè)計終極配色指南、

UI設(shè)計終極配色指南
 
  2)主次分明 層級關(guān)系清晰

  對于新人來說,最開始的時候,最好只使用一個主色,其他全是輔助色,如果你的顏色沒有主次,就很容易用亂:
  因此設(shè)計師在做界面設(shè)計時候,應(yīng)減少顏色使用數(shù)量,盡量控制3種以內(nèi),采用黃金比例——6:3:1原則去合理分配顏色。

  UI設(shè)計終極配色指南
 
  60%+30%+10%的原則,是達到色彩平衡的最佳比例。在60%的空間使用主色,30%的空間使用輔助色,最后剩下10%的空間為另外一種色彩。這樣可以使用戶眼睛從一點移動到下一個點時,非常舒服。

  UI設(shè)計終極配色指南
 
  如果一副畫面里面的色彩,沒有主次之分,就好比一部電影里沒有主角,全部都是配角,索然無味。而有了主次,馬上層級關(guān)系就會清晰明了。

  3)融入無彩色

  無彩色系指的是不包含其他任何色相,只有黑、白、灰三種顏色。

  UI設(shè)計終極配色指南
 
  我們會發(fā)現(xiàn),很多作品的顏色搭配,都不僅僅只是用了彩色,還用了一些無彩色,比如黑白灰、肉色等等,這樣可以一定程度上的中和彩色,并且豐富層次。

UI設(shè)計終極配色指南
 
  無彩色具有統(tǒng)一整體設(shè)計的多種功能。例如,將許多純度和明度參差不齊的色彩用于設(shè)計的場合,由于配色沒有一貫性,容易給人沒有整體感的印象,然而,只要背景采用白色或黑色等無彩色,將每種色彩進行區(qū)隔后,色彩看起來是各自獨立的,整體也就自然統(tǒng)一了。
 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

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

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

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

網(wǎng)站地圖