大牛哥教育告訴你-色彩搭配就是那麼的簡單!

Google Twitter Facebook YouTube 惹不起的設計師 2017-06-07

色調與色相

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

同色系配色

同色系配色是指主色和輔色都在統一色相上,這種配色方法往往會給人頁面很一致化的感受。

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

twitter的案例

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

顏色差分割頁面層次和模塊,並代表不同功能任務屬性。

02

鄰近色配色

近鄰色配色方法比較常見,搭配比同色系稍微豐富,色相柔和過渡看起來也很和諧。

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

ALIDP的案例

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

基於品牌色的鄰近色運用,靈活運用到各類控件中。

03

類似色配色

類似色配色也是常用的配色方法,對比不強給人色感平靜、調和的感覺。

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

BENMAPT的案例

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

基於品牌色的類似色運用,有主次地用到頁面各類控件和主體內容中。

04

中差色配色

中差色對比相對突出,色彩對比明快,容易呈現飽和度高的色彩。

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

facebook的案例

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

利用色彩對比突出按鈕任務優先級,增加頁面氣氛。

05

對比色配色

主導的對比配色需要精準地控制色彩搭配和麵積,其中主導色會帶動頁面氣氛,產生激烈的心理感受。

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

YouTube的案例

紅藍色反應不同交互和信息的可操作性,針對系統操作和用戶操作的區分。

06

中性色配色

用一些中性的色彩作為基調搭配,常應用在信息量大的網站,突出內容,不會受不必要的色彩干擾。這種過配色比較通用,非常經典。

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

Bechan的案例

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

利用大面積中性色作為主導色,品牌色在這裡起到畫龍點睛的作用,用於一些需要重點突出的場景,強調交互的狀態等。

07

多色搭配下的主導

主色和其他搭配色之間的關係會更豐富,可能有類似色、中差色、對比色等搭配方式,但其中某種色彩會佔主導。

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

Google的案例

大牛哥教育告訴你-色彩搭配就是那麼的簡單!

谷歌設置了四種品牌色,通過主次、合理的比例應用在界面中,並通過組控件不同的交互狀態合理分配功能任務。

相關推薦

推薦中...