1. Home
  2. /
  3. 網頁設計
  4. /
  5. 你的網頁配色看起來總是不舒服?

你的網頁配色看起來總是不舒服?

很多人在網頁設計完成後,總是對配色不滿意,卻又無從下手。如何分析設計中的配色問題?如何通過系統的方法,提升配色能力?配色並沒有所謂的固定方程式,生搬硬套配色理論並不能真正解決問題。本文帶你從配色的策略性角度出發,深入分析配色的正確​​打開方式,讓你從本質上解決不同場景的配色問題,並通過配色提升整體的設計品質。

明確配色目標

1. 色彩規律≠配色規律
我們都學習過非常多的色彩知識,也看過很多的配色書籍或文章。然而當我們嘗試在網頁設計中運用這些理論時,就會發現:配色的理論往往在實際運用中並不好使,使用後的效果也不是特別明顯。為什麼會出現這種現象呢?配色是否就是色彩某種的規律?配色並非單獨存在,而是依附於不同的設計載體中。不同的設計載體,所要達到的目標不一樣,就決定了配色理論也會存在差別。我們會發現,雖然有很多書本、文章都在寫配色的理論,每個人講的配色理論有很多相同的地方,但是最核心的理論往往都不是相同的。因為大家講的相同部分,大多都是色彩的理論部分,這部分僅僅只是色彩本身的規律;而大家所講的不同部分,則通常是作者在自己所在領域總結的一套配色規律。因此,並非每一篇文章的配色理論都適合你,這也是當你學習並使用配色理論後,效果依然不好的原因了。因此在學習配色時,僅僅學習配色理論是不夠的。首先要思考配色的使用場景,以及整個設計所要達到的目標,然後再學習相應領域的配色知識,才能讓配色理論發揮最大的作用。

 2. 不同的行業,不同的配色目標
雖然設計是相通的,但是在不同的設計領域進行配色時,依然會存在巨大的區別。比如網頁設計的配色理論,放在室內設計上,往往是行不通的。因為網頁設計的目標在於傳遞信息,需要吸引你,而室內設計的目標則是要營造舒適理想的生活氛圍。同樣的道理,推廣設計的配色理論,往往在界面設計時也是行不通的。同行業間設計目標的差異,決定了配色目標和理論的差異。

 3. 明確配色目標

對於大部分互聯網行業的視覺設計師來說,平時的工作內容大體會分為產品界面設計和推廣設計兩個大的方向。很多設計師需要同時負責這兩塊內容,於是就可能會出現將同一個配色理論用在不同地方的情況,導致一些配色問題的出現​​。比如:推廣設計的配色太素,無法吸引用戶的注意;而產品頁面的配色又過於雜亂刺眼,影響用戶閱讀和操作體驗等.所以,配色的第一步,首先要明確配色目標。產品界面設計的配色目標:

  • 信息傳遞:產品的首要目的是傳遞用戶所需要的信息,這就需要界面有清晰的層級關係,明確、舒適的閱讀體驗。
  • 引導操作:清晰合理的操作引導,讓用戶能夠準確地根據引導進行下一步操作。
  • 品牌價值:很多同學會忽略這一點,導致產品的界面與品牌關聯性差,整體界面沒有品牌感。

推廣設計的配色目標:

  • 吸引流量:強有力的吸引力,快速抓住眼球,留下深刻印象。
  • 營造氛圍:需要營造氛圍,讓用戶通過氛圍快速理解和融入到推廣內容中,加深印象。
  • 快速傳遞:在短時間內快速傳遞信息。這就需要設計時信息表達明確,使內容能夠精準快速地傳遞給用戶。

我們將這兩種配色目標做一下關鍵詞提煉,產品界面設計的配色關鍵詞:清晰、舒適、引導、品牌感。而推廣設計的配色關鍵詞為:吸引力、氛圍、快速傳遞。我們可以將這些關鍵詞作為衡量目標,以此來尋找正確的配色方向,或者用於檢驗設計作品的配色問題。
所以當我們接到項目需求後,可以先與需求方一同確定好設計的目標,以此來確定正確的配色方向,提升配色與設計方向的準確性。而這樣做的另一個好處是,我們可以在項目之初就與需求方之間取得溝通和信任,達成共識,為後續溝通打好基礎。

確定主色,精簡層級

當我們確定好配色的目標以後,如何開始配色工作呢?通常情況下,我們首先來確定整個設計的主色,然後再開始進行後續的設計。
1. 主色與副色的定義

什麼是主色和副色?
主色是整個色調的核心顏色,通常也是相對占比最多的顏色,它決定了整體的風格和基調。而副色則是畫面中佔比相對較少的顏色,它通常起到輔助主色、豐富畫面的作用。假如把一個畫面看成一部電影,那麼主色就是整個電影的主角,而副色則是除了主角以外的其他配角。

 2. 確定主色,精簡色彩層級
一部好的電影,通常情況下需要有一個明確的主角,它主導了整個電影的走向,對於設計作品來說,也是相同的道理。所以在配色過程中,首要的任務是確定配色的主色,並在整個作品中明確它的地位,讓它來主導整個畫面。在產品界面的設計中,主色是傳達品牌感的重要元素。明確的主色能夠讓整個界面產生強烈的品牌感。反之,整體的配色會顯的十分混亂,影響品牌感的傳達。
我們通過三個維度去分析問題:

  • 信息傳遞的維度:這兩個界面的顏色過於繁雜,導致信息層級混亂,沒有視覺中心,用戶也不知道從何開始閱讀。而兩個界面中的卡片設計上,也都存在同一個問題:底色的明度過高,導致卡片上的文字閱讀性非常差。
  • 引導操作維度:整體核心操作路徑不明確,用戶進入後無明確的操作引導;按鈕的視覺效果也很弱,導致用戶無法識別。

品牌價值維度:品牌主色不明確,導致整體品牌感弱。如何去解決以上的問題?
可以用八個字概括:明確主色,精簡層級。
3. 精簡色彩層級的意義
色彩層級越精簡,就越容易達到整體色彩平衡,從而提升設計的整體品質感。當我們去看很多大廠的頁面設計時,可以感受到很多的相同點:整體而強烈的品牌感,簡約而高級的配色,豐富細膩的細節等。
用戶在閱讀頁面時,配色是我們大腦最先接收到的畫面信息。所以精簡配色對於產品界面的設計來說至關重要。以品牌色為主色,精簡色彩層級,可以讓整個頁面富有品牌感。

4. 品牌升級時的色彩簡化趨勢 在品牌Logo 的升級中,簡化色彩層級同樣是一個大的趨勢。簡化層級,可以讓品牌更加簡約和高級,提升品牌的品質感和包容性,使品牌擁有更大延展性和更多的可能性。

星巴克的品牌升級中,除了去掉Logo 字母和咖啡字母外,更簡化了Logo 的圖形和色彩。從而強化了星巴克標誌性的人魚形象和星巴克綠,讓品牌更加簡潔有力,易於傳播。

而BMW在最近官方宣傳圖中,將藍白色相間的Logo 簡化為黑白單色,而新Logo 專為品牌旗下即將推出的高端豪華車型使用。

選擇正確的色系

明確配色目標,確定主色以及色彩層級後,如何進行下一步的配色?這時候我們可以根據不同的配色目標來選擇合適的色系,豐富整個畫面的配色。需要注意的是,在豐富配色的同時,仍然要嚴格控制色彩層級,以保證整體色彩層級的精簡。

1. 巧用同色系,統一不單調
同色係是指在色環上相距不超過45°的兩種顏色,我們可以選擇主色的同色系範圍內的顏色來豐富整體配色。那麼如何選擇同色系的顏色呢?首先在色環中確定顏色的位置,通過色環兩邊45°延展出我們所需要的同色系。


在主色的同色系範圍內,我們可以選出同色系顏色作為延展色,單獨使用或者組合成漸變色進行使用。下面的案例就是運用同色係原理來進行配色的。可以看到,整個頁面在保持色彩統一的前提下,增強了畫面的層次和豐富性,從而提升了整個頁面的層次感和品質感。

同色系的配色特點是整體頁面統一而富有層次,從而傳遞出一種穩定、專業的形象,適合絕大多數的場景使用,是最為簡單和有效的配色方式。

我們可以總結一下同色系的配色方法。首先確定主色,主色兩邊45°以內的同色系色彩範圍,在範圍中選取合適的單色作為輔助色,或者選取一段漸變色單獨使用。

 2. 不同場景的對比色用法
對比色是指在色環上相距120°~180°之間的兩種顏色(180°時則互為互補色)。處於對比色關係的兩種顏色,通常色相差異較大,能夠相互產生強烈的對比效果,我們可以利用這種原理來增強​​畫面的吸引力。

嘗試更多的創新配色

除了掌握以上的幾種基本色系的配色方法外,大家可以在此基礎上嘗試更多的配色風格。比如在同色系、對比色系的基礎上,有目的地加入色彩元素豐富色調,在保持整體色彩層級的同時,加入更豐富的變化,從而達到配色目標。

△ 更清新的「同色系」配色


△ 更豐富的「同色系」配色

△ 更多彩的「對比色」配色

△ 復古的平面風配色

而對於很多初學者來說,我建議大家能夠首先明確配色的目標,在配色時保持色彩層級的精簡明確。在此基礎上,循序漸進,逐步去嘗試更多地配色風格。只有這樣,才能養成良好的配色習慣。

提升品質感

我們按照之前的方法,正確的確定了配色的目標,選擇了合適的配色方向,並逐步完成了整體的設計排版。很多同學到這一步之後,就覺得作品已經完成,便停止不繼續深入了,而這也是初級設計師經常容易出現的問題。這個時候的作品,從整體上看並沒有太多問題。但是當用戶被頁面吸引,開始仔細欣賞作品時,往往會發現作品沒什麼看點。出現這種問題的原因,就是作品缺乏足夠的細節和品質,導致作品不夠耐看。就像一本書有著精美的封面,但是打開以後卻平淡無奇,最終對整本書都非常失望。想要讓作品更優秀,除了基本的版式和配色之外,往往還需要更深入地去雕刻作品,讓作品帶有一種更高級的「氣質」,而這種「氣質」就是我們所說的品質感。

 1. 什麼是品質感?

品質感對於設計作品來說,是一個綜合性的評價。我們可以將這個詞分為「品」和「質」,「品」代表物體本身的品相和細節,而「質」則代表質感。怎樣的設計才算是有品質感的?如何提升設計的品質感?我們可以先來研究一些優秀的設計案例,尋找其中的共同點。蘋果的產品和頁面設計,是公認的具有較高品質感的,我們可以來看一下蘋果的部分官網頁面。

蘋果的所有產品和頁面,從產品圖到頁面的設計都非常有質感。為什麼這種質感會如此吸引我們,令我們覺得非常舒適?如何才能讓設計產生質感?要了解如何產生質感,首先要了解一下物體產生質感的原理。

當光線照射在富有質感的物體表面時,會產生不同程度的漫反射,最終反射進入我們的眼球後,就會顯現出一層富有質感的漸變色。所以想讓物體獲得質感,漸變是一個關鍵要素。

 2. 獲得品質感的關鍵要素
漸變只是獲得品質感的關鍵因素之一,蘋果官網將漸變這種原理加入到頁面和元素中,配合精美的產品圖片,讓頁面保持了非常高的品質感。那麼是否還有其他要素的存在,能夠提升質感呢?

仔細觀察蘋果的所有元素設計,在漸變的同時,還加入了微量的投影和豐富的細節,使所有的元素在簡潔中充滿了細膩的質感。我們可以總結一下,讓設計獲得品質感的幾個要點:細膩的漸變+輕微的光影+細節/紋理。發現這些原理以後,我們可以嘗試將這些原理運用到設計中,從而提升設計的品質感。下面的幾個案例,就是我在研究時所做的一些練習,在不同的頁面細節中都可以看到以上原理的運用效果。

總結

看完前面的內容,大家會發現,其實配色並沒有想像中那麼複雜。只要掌握正確的配色策略,並逐漸適應這種方法,就可以應付各種不同的設計類型。最後,我們將前面講的配色法則做一個簡要的總結:明確目標– 確定主色– 精簡層級– 選擇色系豐富配色– 提升品質感。希望大家讀完這篇文章以後,能夠真正理解和掌握策略性配色法則,在不同的項目中靈活運用,並最終形成自己的優秀配色習慣。