二、確定主色,精簡層級
當我們確定好配色的目標以后,如何開始配色工作呢?通常情況下,我們會首先來確定整個設計的主色,然后再開始進行后續(xù)的設計。
1.主色與副色的定義
什么是主色和副色?
主色是整個色調的核心顏色,通常也是相對占比最多的顏色,它決定了整體的風格和基調。而副色則是畫面中占比相對較小的顏色,它通常起到輔助主色、豐富畫面的作用。
假如把一個畫面看成一部電影,那么主色就是整個電影的主角,而副色則是除了主角以外的其他配角。
網站建設中如何通過配色提升設計品質
2.確定主色,精簡色彩層級
一部好的電影,通常情況下需要有一個明確的主角,它主導了整個電影的走向,對于設計作品來說,也是相同的道理。所以在配色過程中,首要的任務是確定配色的主色,并在整個作品中明確它的地位,讓它來主導整個畫面。
在產品界面的設計中,主色是傳達品牌感的重要元素。明確的主色能夠讓整個界面產生強烈的品牌感。反之,整體的配色會顯的十分混亂,影響品牌感的傳達。
我們可以來看兩個案例:
網站建設中如何通過配色提升設計品質
這兩個案例在配色上有什么問題嗎?為什么?
如何更準確地分析配色的問題? 我們可以使用前面講的目標分析法,從產品界面的配色目標入手,逐一尋找和發(fā)現(xiàn)問題。
我們通過三個維度去分析問題:
信息傳遞的維度:這兩個界面的顏色過于繁雜,導致信息層級混亂,沒有視覺中心,用戶也不知道從何開始閱讀。而兩個界面中的卡片設計上,也都存在同一個問題: 底色的明度過高,導致卡片上的文字閱讀性非常差。
引導操作維度:整體核心操作路徑不明確,用戶進入后無明確的操作引導;按鈕的視覺效果也很弱,導致用戶無法識別。
品牌價值維度:品牌主色不明確,導致整體品牌感弱。
如何去解決以上的問題?可以用八個字概括:明確主色,精簡層級。
我們可以來看一下Keep的產品界面設計。同樣是健身App,Keep的配色方式則完全符合了產品界面的配色目標。相比前面案例的兩個界面,Keep的產品界面呈現(xiàn)出優(yōu)秀的整體品牌感和品質感。
網站建設中如何通過配色提升設計品質
在Keep的整體配色中,最核心的思想就是簡化色彩層級——明確主色,減少不必要的顏色。從配色的角度來分析,作為品牌的主色
做網站需要多少錢,“Keep綠”貫穿了所有的產品界面,使整個產品顯得非常統(tǒng)一和整體,凸顯了整體的品牌感和品質感。
其次,Keep的整體界面將除了主色以外的其他顏色精簡到了極致,并將主要的輔助灰以外的所有中性色都控制在了三個層級內;首頁的插畫運用了同色系來精簡色彩層級;視頻的封面圖風格也經過處理,使色調與整體界面統(tǒng)一。
整個界面的閱讀體驗非常舒適,字體顏色層級清晰,重點明確。而在操作引導上,Keep將大量的品牌色用于核心操作路徑和按鈕上,這使得整個產品的引導邏輯清晰明確。
3.精簡色彩層級的意義
色彩層級越精簡,就越容易達到整體色彩平衡,從而提升設計的整體品質感。當我們去看很多大廠的頁面設計時,可以感受到很多的相同點:整體而強烈的品牌感,簡約而高級的配色,豐富細膩的細節(jié)等。
用戶在閱讀頁面時,配色是我們大腦最先接收到的畫面信息。所以精簡配色對于產品界面的設計來說至關重要。以品牌色為主色
域名技巧,精簡色彩層級,可以讓整個頁面富有品牌感。
4.品牌升級時的色彩簡化趨勢
在品牌Logo的升級中,簡化色彩層級同樣是一個大的趨勢。簡化層級,可以讓品牌更加簡約和高級,提升品牌的品質感和包容性,使品牌擁有更大延展性和更多的可能性。
星巴克的品牌升級中
工程機械,除了去掉Logo字母和咖啡字母外,更簡化了Logo的圖形和色彩。從而強化了星巴克標志性的人魚形象和星巴克綠,讓品牌更加簡潔有力,易于傳播。
大麥網在去年也經歷了戰(zhàn)略性的品牌升級。全新的品牌形象包括新LOGO以及新的Slogan,配色上則重新定義了更具年輕活力的紅色作為主色,同時精簡了整體的色彩層級。
而寶馬在最近官方宣傳圖中,將的BMW標志將藍白色相間的Logo簡化為黑白單色,而新Logo專為品牌旗下的即將推出的高端豪華車型使用。
(鄭重聲明:本文版權歸原作者徐劍杰所有,轉載文章僅為傳播更多信息之目的,如有侵權,請聯(lián)系我們刪除;如作者信息標記有誤,請聯(lián)系我們修改。)
,