吸取Dribbble優秀作品的配色技巧！

Sponsor

大家在工作中或練習中，對配色有沒有疑惑?比如顏色怎么挑？色彩怎么配？因為我最近在做的Dribbble，所以總結了一些配色的小技巧，希望能幫助到大家。

目錄

• ui界面配色組成
• 主色如何選擇？
• 輔助色如何選擇？
• 高級灰的提取與使用
• 案例演示

01、?Ui界面配色組成

• 主色
• 輔助色
• 消色

02、主色如何選擇？

1【明確色彩情緒】

不同的色相可以傳遞不同感受，有積極的有負面的，通常會有如下感受，但根據國家、種族信仰，不同的顏色所代表的含義也會有所區別:

根據不同色相匹配了如下對應案例，并描述了我的個人感受：

黑白灰

紅色

橙色

黃色

綠色

藍色

紫色

粉色

咖啡色

看完案例后可以發現，界面的配色確確可以影響到我們對這個作品的視覺感受，所以在界面設計后可以更具你定義的這個產品特質：比如咖啡類產品基本主色固定使用咖啡色、或行業特性：金融產品基本使用藍色、又或是你希望傳遞出一些不一樣的感受還可大膽創新。

2【確定飽和度與明度】

在這里需要簡單介紹一些，在ui設計中最常使用的色彩調節模式：HSB。

H（色相）：即我們上面內容講的紅、橙、黃、綠….

S（飽和度）：色彩的純度

B（明度）：色彩的明亮度

接下來主要講下HSB在拾色器上的選擇范圍，提前了解了一下目前網上介紹的一些方法，可以看出不管是哪種方法，靠下面靠右邊的區域都是不推薦使用的。

根據自己的使用頻率和分析一些優秀的作品后，總結了如下規律：

03、 輔助色如何選擇？

色相環中每個顏色都可以是主色，每個主色都能形成它們自己的同類、類似、鄰近、中差、對比、互補色。色相環上兩色之間的夾角可表示顏色之間的區分強弱，不能顏色搭配起來視覺效果感受不同。

• 同類色：15°角內的顏色
• 鄰近色：60°角左右的顏色
• 類似色：90°以內的三個互相連接的顏色
• 中差色：90°左右的顏色
• 對比色：120°左右的顏色
• 互補色：180°左右的顏色

1【同類色】

15°以內，屬于單色調搭配。12 色相環中，同類色相當于單色。

同類色配色極易調和，但對比微弱，色彩容易同化而顯得含糊不清，有點平淡乏味。所以在配色時需要拉大明度色階比如大紅與淺粉或點綴少量對比色，以獲得理想效果。

2【鄰近色】

60°左右，或者相隔三個位置以內的兩色，為鄰近色關系。屬于色相中的中對比，可以保持畫面的統一感，可以使畫面顯得更豐富、活潑，在色彩上有主次的配色可以增強吸引力。

3【類似色】

在色環上任意90°角度以內的顏色，各色之間含有共同色素，故稱”類似色”。，類似色的搭配比同類色的效果要好，能保持色彩的畫面統一和協調，能呈現比較柔和的質感，在色彩搭配上調節明度和純度的比例對比，達到高級質感配色。

4【中差色】

90°左右 ，中差色構成的色調富于變化又不失調和，具有明快感，配色時要注意呼應統一。

5【對比色】

120°左右，次于互補色，色相差十分明顯，具有視覺沖擊力。色彩之間效果鮮明，飽滿，容易給帶來興奮，激動的快感，在作品中常用于表達隨意，跳躍，強烈的主題，來達到吸引人的目光。但也很容易產生不協調感，配色時要注意變化明度和純度，或強化主體改變面積比例來協調對比關系。

6【互補色】

180°左右，對比最強烈，畫面最豐富，最具感官刺激的色彩組合，常用表達極大反差的事情，以及用此來突出目的的表達。如果搭配不好則容易產生粗俗生硬，動蕩不安的消極效果。配色時要注意明度純度及面積比例的變化，或借用無彩色或中間色緩沖調和的方法來達到色調的和諧統一，此配色新手慎用。

如下還列舉了一些更復雜的配色方式，雖然復雜但相信假以時日的練習，大家對配色的理解也會越來越深刻，越來越得心應手。

04 高級灰的提取與使用

在界面文字用色和背景用色中，盡量避免使用純黑、灰色，因為容易顯臟?？梢試L試給黑、灰色加入一些色相，常見的加入藍色，或其他品牌色相。

提取方式：同樣借助Hsb調色模式，保持H和你的品牌色一直（或選擇一個藍色），通過調節S、B的參數，得出不同視覺層級的高級灰，用作文字層級區分。

05 案例演示

以如下原型為例：

1【確定主色】

由于不同色彩可以搭配出多樣的風格感受，單單主色不同帶來的視覺感受就完全不同，再加上輔助色就更多，所以這里只挑三個不同主色進行演示：

• 藍色：科技、智能、穩重的感覺
• 紫色：高貴、奢華的感受
• 綠色：安全、清新的感受

2【效果展示】

藍色方案1

藍色方案2

綠色方案1

綠色方案2

紫色方案1

紫色方案2

以上就是這期要分享的主要內容，感謝各位耐心看完。

作者：幺零三記
來源：幺零三記（ID：Lisian103）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。