UI設計配色流程

一:配色流程

我們在做設計時,一般都是先確定版式,然後再調整配色。(可以先做成黑白稿,再配色)

剛開始的時候我也嘗試過一邊做版式一邊做配色,很累,而且效率不高,最後可能全部推翻(血的教訓)。所以說設計和繪畫一樣,不要一開始就摳細節。

流程:

UI設計配色流程

二:配色步驟拆分

1:調性分析

這個相當於項目分析,是非常重要的一步,如果這一步錯了,那後面做的再怎麼好都沒用。比如說原始需求是要表現出強有力的感覺,而你表現出了小清新的感覺,那這個設計就不準確,因為沒有達到設計的目的。


我們要先做正確的設計。

在開始設計一個東西時,我們的思維方式應該是:這個活動(或產品)應該用什麼風格。而不是:這次設計我想用什麼風格。因為你用什麼設計風格別人並不關心,別人只關心這個設計達成的效果。所以說設計不要以自我為中心。

在做調性分析時,可以看一些競品,或與本次設計調性相似的產品,從這些設計中得到靈感。


為什麼配色也要找參考?

看了很多色彩教程之後,我以為我可以不看參考單靠分析去配色,結果發現參考還是很重要的…為什麼呢?比如說要做促銷廣告,我們都知道暖色是促銷的,橙色或紅色都可以。但事實上大家去看網上的促銷設計,不止橙色和紅色,還有紫色黃色,很多種搭配。也就是說一個調性不止一個搭配。如果我們只是腦子裡想想的話,不容易得出結論,所以還是找相關參考,相互比較再確定。


2:確定主色

其實很多時候我都是主色輔助色一起確定的。主色的作用是烘托氛圍,輔助色是為了平衡主色。

TIPS:我們經常會有一種錯覺,以為主色是我們需要突出的顏色,其實不是的,主色是面積最大的,用來烘托氣氛。很多時候突出的顏色是輔助色。

就像下面這張圖:主色是紅色,但強調的卻是黃色

UI設計配色流程

3:確定輔助色

確定輔助色的方法有很多種,可以看參考,也可以自己通過色彩理論來確定。但是用這個色彩一定要說得出理由才行。比如說是用補色呢,還是用相似色?為什用這種顏色?如果是比較活潑的作品,那可以用補色,看是否能突出主題。(當然,這個階段即使確定了輔助色,也不一定是最終的,這個後面的“調整階段”是很重要的)


4:調整

確定主色和輔助色後,就進入到了調整階段,這個階段非常重要。

因為即使確定了主色和輔助色,你的畫面也不一定好看(設計的使命就是,不僅要準確的設計,還需要設計的好看)

有句話相信大家都聽說過:只有難看的搭配,沒有難看的顏色。

舉個栗子:

UI設計配色流程

所以說如果你的配色不好看,千萬不要怪主色選的不好,也不要怪輔助色,是你的搭配有問題…


再舉個栗子:

UI設計配色流程

那麼如果覺得兩個顏色在一起不好看,怎麼去調整呢?


方法:

1:調整明度和飽和度

建議先調整其中一個的明度飽和度,因為一個畫面不可能有兩個主角,總得有一個人讓一讓 >_<

當然也可以兩者同時調整。但兩者同時調整時,要注意整個畫面的調性是否會改變。就像上面的例子中,一不小心整個畫面的調性就變了,雙方同時變暗調時,就變得有質感了;雙方同時變明調時,就變成小清新了。

UI設計配色流程

2:救場王:黑白灰

當你覺得兩種或三種顏色配合的很好,但是總覺得畫面有些彆扭時,可以嘗試使用黑白灰這些無色相的顏色,會給你帶來意外的驚喜。

白色:很有透氣感,簡直屢試不爽。

UI設計配色流程

UI設計配色流程

灰色:灰色也是一種很好用的顏色。當白色顯得有些廉價時,那這個時候就可以加點灰度進去;當黑色顯得沉重閉塞時,可以用灰色代替。

建議:如果調整顏色的時候覺得畫面好像有點滿了,或者需要一點客觀的顏色,可以嘗試黑白灰。


總結:

1:知識積累:配色的時候要多思考,這樣配色才有方向,有效率,而不是瞎調,需要積累理論知識。

2:審美積累:只有多看作品,才知道什麼叫好的配色,這是前提。

UI設計配色流程


分享到:


相關文章: