Vue進階（幺柒伍）：前端用戶體驗提升（六）色彩搭配

前端項目開發一段時間后，會思考如何提升用戶體驗，如何布局前端頁面，如何合理搭配頁面色彩。本篇博文主要講解如何通過色彩合理搭配提升用戶體驗。

一、基礎理論

1、色彩搭配原則是什么？

色彩怎么搭配都可以，看你是想要對比效果還是要統一效果。

如果要對比效果，就取兩種色相相差很大，或者明度相差很大，或者飽和度相差很大的顏色。

如果要統一效果，就用相差不遠的色彩進行配色。

一般設計的時候背景用稍淺色，需要突出的東西用深色，比如按鈕。

2、顏色三要素是什么？

色相，以區別各種顏色，如紅綠藍等；

純度，以示色彩深淺；

明度，以示彩色明暗。

3、搭配中的對比效果如何實現？

兩種或者多種淺顏色配在一起不會產生對比效果：同樣多種深顏色合在一起效果也不吸引人、但是，當一種淺顏色和一種深顏色對比在一起時，就會使淺色顯的更淺，深色顯的更深。明度也同樣如此。

4、搭配中的統一效果如何實現？

以色相為基礎的配色是以色相環為基礎進行思考的，用色相環上類似的顏色進行配色，可以得到穩定而統一的感覺。用距離遠的顏色進行配色，可以達到一定的對比效果。

類似色相的配色，能表現共同的配色印象。這種配色在色相上既有共性又有變化，是很容易取得配色平衡的手法。例如：黃色、橙黃色、橙色的組合；群青色、青紫色、紫羅蘭色的組合都是類似色相配色。與同一色相的配色一樣，類似色相的配色容易產生單調的感覺，所以可使用對比色調的配色手法。

中差配色的對比效果既明快又不沖突，是深受人們喜愛的配色。

5、間接色是哪三種？

將任何2種原色混合起來，就可以得到間接色：

橙（紅加黃）紫（紅加藍）綠（藍加黃）

二、色彩搭配原理與技巧

色彩搭配一般為繪畫中的色彩，三原色為紅、黃、藍。下面是色彩搭配以光的三原色為基礎制作的色相環：

原色 色盤上延伸最長的幾段表示出了三種原色----紅黃藍。它們之所以稱為原色。是因為其他的顏色都可以通過這三種顏色的組合而成。

第二色（間色） 將任何倆種原色混合起來，就可以得到間色：

橙（紅加黃）紫（紅加藍）綠（藍加黃）

第三色（混合色）色盤上另外6種顏色稱為混合色。它們是原色和一種臨近的間接色混合而成的：桔黃（黃加橙） 青（黃加綠）深綠（綠加藍）絳（紅加橙）。

顏色三要素配色：

色相，以區別各種顏色，如紅綠藍等；

純度，以示色彩深淺；

明度，以示彩色明暗。

1、色相配色

以色相為基礎的配色是以色相環為基礎進行思考的，用色相環上類似的顏色進行配色，可以得到穩定而統一的感覺。用距離遠的顏色進行配色，可以達到一定的對比效果。

類似色相的配色，能表現共同的配色印象。這種配色在色相上既有共性又有變化，是很容易取得配色平衡的手法。例如：黃色、橙黃色、橙色的組合；群青色、青紫色、紫羅蘭色的組合都是類似色相配色。與同一色相的配色一樣，類似色相的配色容易產生單調的感覺，所以可使用對比色調的配色手法。中差配色的對比效果既明快又不沖突，是深受人們喜愛的配色。

對比色相配色，是指在色相環中，位于色相環圓心直徑兩端的色彩或較遠位置的色彩組合。它包含了中差色相配色、對照色相配色、補色色相配色。對比色相的色彩性質比較青，所以經常在色調上或面積上用以取得色彩的平衡。

色相配色在16色相環中，角度為0°或接近的配色，稱為同一色相配色。

角度為22.5°的兩色間，色相差為1的配色，稱為鄰近色相配色。

角度為45°的兩色間，色相差為2的配色，稱為類似色相配色。

角度為67.5°~112.5°，色相差為6~7的配色，稱為對照色相配色。

角度為180°左右，色相差為8的配色，稱為補色色相配色。

2、色調配色

a.同一色調配色

同一色調配色是將相同色調的不同顏色搭配在一起形成的一種配色關系。同一色調的顏色、色彩的純度和明度具有共同性、明度按照色相略有所變化。不同色調會產生不同的色彩印象，將純色調全部放在一起，或產生活潑感；而嬰兒服飾和玩具都以淡色調為主。在對比色相和中差色相配色中，一般采用同一色調的配色手法，更容易進行色彩調和。

b、類似色調配色

類似色調配色即將色調圖中相鄰或接近的兩個或兩個以上色調搭配在一起的配色。類似色調配色的特征在于色調與色調之間有微妙的差異，較同一色調有變化，不會產生呆滯感。將深色調和暗色調搭配在一起，能產生一種既深又暗的昏暗之感，鮮艷色調和強烈色調再加明亮色調，便能產生鮮艷活潑的色彩印象。

c、對照色配色

對照色調配色是相隔較遠的兩個或兩個以上的色調搭配在一起的配色。對比色調因色彩的特征差異，能造成鮮明的視覺對比，有一種“相映”或“相拒”的力量使之平衡，因而能產生對比調和感。對比色調配色在配色選擇時，會因橫向或縱向而有明度和純度上的差異。例如：淺色調與深色調配色，即為深與淺的明暗對比；而鮮艷色調與灰濁色調搭配，會形成純度上的差異配色。

采用同一色調的配色手法，更容易進行色彩調和。

3.明度配色

明度是配色的重要因素，明度的變化可以表現事物的立體感和遠近感。如希臘的雕刻藝術就是通過光影的作用產生了許多黑白灰的相互關系，形成了成就感；中國的國畫也經常使用無彩色的明度搭配。有彩色的物體也會收到光影的影響產生明暗效果。像紫色和黃色就有著明顯的明度差。

將明度分為高明度、中明度和低明度三類，這樣明度就有了高明度配高明度、高明度配中明度、高明度配低明度、中明度配中明度、中明度配低明度、低明度配低明度六種搭配方式。 其中高明度配高明度、中明度配中明度、低明度配低明度，屬于相同明度配色。一般使用明度相同、色相和純度變化的配色方式。高明度配中明度、中明度配低明度，屬于略微不同的明度配色。 高明度配低明度屬于對照明度配色。

色調配色：指具有某種相同性質（冷暖調，明度，艷度）的色彩搭配在一起，色相越全越好，最少也要三種色相以上。比如，同等明度的紅，黃，藍搭配在一起。大自然的彩虹就是很好的色調配色。

近似配色：選擇相鄰或相近的色相進行搭配。這種配色因為含有三原色中某一共同的顏色，所以很協調。因為色相接近，所以也比較穩定，如果是單一色相的濃淡搭配則稱為同色系配色。出彩搭配：紫配綠，紫配橙，綠配橙。

漸進配色：按色相、明度、艷度三要素之一的程度高低依次排列顏色。特點是即使色調沉穩，也很醒目，尤其是色相和明度的漸進配色。彩虹既是色調配色，也屬于漸進配色。

對比配色：用色相、明度或艷度的反差進行搭配，有鮮明的強弱。其中，明度的對比給人明快清晰的印象，可以說只要有明度上的對比，配色就不會太失敗。比如，紅配綠，黃配紫，藍配橙。

單重點配色：讓兩種顏色形成面積的大反差。“萬綠叢中一點紅”就是一種單重點配色。其實，單重點配色也是一種對比，相當于一種顏色做底色，另一種顏色做圖形。

分隔式配色：如果兩種顏色比較接近，看上去不分明，可以靠對比色加在這兩種顏色之間，增加強度，整體效果就會很協調了。最簡單的加入色是無色系的顏色和米色等中性色。

夜配色：嚴格來講這不算是真正的配色技巧，但很有用。高明度或鮮亮的冷色與低明度的暖色配在一起，稱為夜配色或影配色。它的特點是神秘、遙遠，充滿異國情調、民族風情。比如：鳧色配勃艮第酒紅，翡翠松石綠配黑棕。

“色彩影響人類心情與思考，當眼睛看到某種顏色時，會將此訊息傳回大腦的下視丘，經由一系列的神經傳達，刺激甲狀腺分泌賀爾蒙，進而造成情緒、情感或是實際反應。”——網頁設計中的色彩心理學

設計師日常設計中最核心的部分就是配色，這也是每個設計師的基本功。為網頁選擇一種基礎色并不難，但是想要一套可用的色彩組合，卻不是那么容易的事情。所以，很多時候，設計師會借助配色工具來尋求配色方案。

配色方法和配色工具有很多，有的工具需要配合特定的方法，而有的工具則只能應對特定的需求。

用戶對顏色的認知往往是類似的，無論是哪一類的網頁，如果頁面太過花哨，不僅不會帶給用戶視覺的享受，還會干擾視覺。無論選擇深色系還是淺色系，都要經過明確的用戶體驗和合理的決策共同完成。網頁在明亮的顏色方面配色最好不要超過三種，以免造成頁面視覺體驗的混亂。

在深色網頁設計中最常見也是最必要的元素就是留白，留白越多，留給字體和設計作品的空間就越多越多，能夠保持很好地層次感。留白區域能夠很好的指引用戶，如果元素過多，那么用戶的注意力會分散。留白能夠讓用戶盡快的尋找到所需要的信息，提高用戶體驗。

在深色系網頁設計中我們會發現很多設計師都采用動畫效果來增強頁面的交互效果，打破深色系的沉悶感。簡單的動畫效果營造的視覺體驗是非常吸引人的，可以引導用戶不斷探索網頁呈現的神秘感。切記不要使用復雜的動效，不但不會給予用戶非常驚艷的效果，反而會干擾用戶。

以上為UI色彩搭配理論知識，在實際應用中，一般來說，網頁的背景色應該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢。而為了追求醒目的視覺效果，可以為標題使用較深的顏色。下面是我做網頁和瀏覽別人的網頁時，對網頁背景色和文字色彩搭配積累的經驗，這些顏色可以做正文的底色，也可以做標題的底色，再搭配不同的字體，一定會有不錯的效果，希望對大家在制作網頁時有用。

Bgcolor:″＃F1FAFA″——做正文的背景色好，淡雅

Bgcolor:″＃E8FFE8″——做標題的背景色較好，與上面的顏色搭配很協調

Bgcolor:″＃E8E8FF″——做正文的背景色較好，文字顏色配黑色

Bgcolor:″＃8080C0″——上配黃色白色文字較好

Bgcolor:″＃E8D098″——上配淺藍色或藍色文字較好

Bgcolor:″＃EFEFDA″——上配淺藍色或紅色文字較好

Bgcolor:″＃F2F1D7″——配黑色文字素雅，如果是紅色則顯得醒目

Bgcolor:″＃336699″——配白色文字好看些

Bgcolor:″＃6699CC″——配白色文字好看些，可以做標題

Bgcolor:″＃66CCCC″——配白色文字好看些，可以做標題

Bgcolor:″＃B45B3E″——配白色文字好看些，可以做標題

Bgcolor:″＃479AC7″——配白色文字好看些，可以做標題

Bgcolor:″＃00B271″——配白色文字好看些，可以做標題

Bgcolor:″＃FBFBEA″——配黑色文字比較好看，一般作為正文

Bgcolor:″＃D5F3F4″——配黑色文字比較好看，一般作為正文

Bgcolor:″＃D7FFF0″——配黑色文字比較好看，一般作為正文

Bgcolor:″＃F0DAD2″——配黑色文字比較好看，一般作為正文

Bgcolor:″＃DDF3FF″——配黑色文字比較好看，一般作為正文

淺綠色底配黑色文字，或白色底配藍色文字都很醒目，但前者突出背景，后者突出文字。紅色底配白色文字，比較深的底色配黃色文字顯得非常有效果。

拓展閱讀

《websitebuilderexpert》

Vue web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。