色調與色相
同色系配色
同色系配色是指主色和輔色都在統一色相上,這種配色方法往往會給人頁面很一致化的感受。
twitter的案例
顏色差分割頁面層次和模塊,並代表不同功能任務屬性。
02
鄰近色配色
近鄰色配色方法比較常見,搭配比同色系稍微豐富,色相柔和過渡看起來也很和諧。
ALIDP的案例
基於品牌色的鄰近色運用,靈活運用到各類控件中。
03
類似色配色
類似色配色也是常用的配色方法,對比不強給人色感平靜、調和的感覺。
BENMAPT的案例
基於品牌色的類似色運用,有主次地用到頁面各類控件和主體內容中。
04
中差色配色
中差色對比相對突出,色彩對比明快,容易呈現飽和度高的色彩。
facebook的案例
利用色彩對比突出按鈕任務優先級,增加頁面氣氛。
05
對比色配色
主導的對比配色需要精準地控制色彩搭配和麵積,其中主導色會帶動頁面氣氛,產生激烈的心理感受。
YouTube的案例
紅藍色反應不同交互和信息的可操作性,針對系統操作和用戶操作的區分。
06
中性色配色
用一些中性的色彩作為基調搭配,常應用在信息量大的網站,突出內容,不會受不必要的色彩干擾。這種過配色比較通用,非常經典。
Bechan的案例
利用大面積中性色作為主導色,品牌色在這裡起到畫龍點睛的作用,用於一些需要重點突出的場景,強調交互的狀態等。
07
多色搭配下的主導
主色和其他搭配色之間的關係會更豐富,可能有類似色、中差色、對比色等搭配方式,但其中某種色彩會佔主導。
Google的案例
谷歌設置了四種品牌色,通過主次、合理的比例應用在界面中,並通過組控件不同的交互狀態合理分配功能任務。
相關推薦
推薦中...