2021-5-31 seo達人
每當我看到一個漂亮，優(yōu)雅并且簡潔美觀的界面，就會忍不住保存下來。現(xiàn)在，我已經(jīng)收集了100多個美不勝收的UI 界面。在一次次觀摩，欣賞和學習后，我發(fā)現(xiàn)這些界面有很多共同點。可究竟是什么讓我對它們一見鐘情呢？現(xiàn)在我找到了答案，是色彩。
本文中，結(jié)合自身經(jīng)歷，我總結(jié)了一些UI 設(shè)計配色技巧。雖然它們不能像魔術(shù)一樣讓你搖身一變成為最優(yōu)秀的UI設(shè)計師，但是我保證，這些為你量身打造的UI 設(shè)計配色技巧，定會讓你受益匪淺。
1. 色彩的魔力
色彩是會說話的，甚至可以像語言一樣強大。回想以下，每當你初見一個網(wǎng)站或產(chǎn)品，給你留下第一印象的是什么呢？是視覺外觀，而視覺外觀很大程度上是取決于色彩運用。
那么，在UI設(shè)計中，色彩究竟可以做些什么？
1）反映品牌的內(nèi)涵和品質(zhì)
顏色可以為品牌設(shè)定基調(diào)。 CCICOLOR的一項研究表明，用戶在評估一款在線商品時，只需花費短短90秒，而判斷的依據(jù)高達62％至90％將取決于配色方案。
2）實現(xiàn)更佳的用戶體驗
色彩的有效運用能提升整體美感，提供更優(yōu)的閱讀體驗，創(chuàng)造清晰和諧的風格。
3）影響購買決策
根據(jù)Kissmetrics的說法，產(chǎn)品的視覺外觀是影響消費者購買決策的首要因素。此外，QuickSprout的研究也表明，90％的產(chǎn)品評估都與顏色有關(guān)。Neil Patel曾寫到，“顏色在你購買特定產(chǎn)品的原因中占據(jù)85％的分量”。正因如此，顏色已成為當今重要的營銷手段之一。
2. 色彩的基本概念
色彩被長久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨特的語言和象征。解讀色彩的語言，請看下表：
3. UI 設(shè)計配色技巧
1） 色彩使用也講究“天時地利人和”
存在即合理，沒有哪一個色彩本身就是丑陋和不具備美感的，只能說，如果我們錯誤的使用了色彩，那么它的美一旦被破壞，就只剩下丑陋和別扭了。
想象一下，如果麥當勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色，你還對他們的炸雞充滿饑腸轆轆的感覺嗎？女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對，為什么？因為這樣會讓她們看起來性感迷人。
不同的顏色傳達不同的含義和感覺。如何明智地進行選取和搭配呢？這里請注意5點：選取合適的顏色，運用于合適的設(shè)計場景，注意時間變化，關(guān)注目標用戶，明確想要達到的目的。
這里請認真查看上圖，明確顏色的意義。但如果你非要冒險追求獨一無二的設(shè)計，那么祝您好運。
2）留心藍色
為什么專門談藍色？藍色不是海洋天空的專屬色，藍色也是UI 設(shè)計的青睞色。
看看你常用的一些比較有名的APP或者網(wǎng)站，比如Facebook，Safari以及辦公軟件等等。有什么發(fā)現(xiàn)呢？是的，它們的界面都是藍色，各種層次的藍色。
有研究表明，藍色是唯一一種讓女性和男性都鐘愛的顏色。藍色幾乎無處不在，大自然中，各網(wǎng)站的UI界面，服飾衣物等，藍色隨處可見。包括我此刻寫入文章的Microsoft Word，界面也是藍色的。
藍色無疑是一種安全的顏色，它能最大程度上獲得用戶的信任并被廣泛接受，藍色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇，請用藍色。
3）背景色和元素之間的色彩變化技巧
看看以下的界面：
（來源）
這里暫且不談這又是關(guān)于藍色的UI界面，讓我們專注于它的色彩變化。主題顏色是藍色，其他元素是較暗的藍色和更明亮的藍色。整體看上去，各層次的顏色平衡和諧且又脈絡清晰。
怎么做到自然而又極具美感的色彩變化？
只是一個簡單的黃金法則：通過降低亮度和增加飽和度可以使色彩變得更深；通過增加亮度和降低飽和度來使色彩變得更淺。
4）色彩組合的黃金比例——（6：3：1）規(guī)則
在設(shè)計時，色彩組合必不可免。組合顏色很容易，但組合后如何避免色彩混亂和累贅？如何既能夠不顯得單調(diào)又展示設(shè)計感？
記住二個原則：
第一個：6：3：1規(guī)則
60％+ 30％+ 10％的比例是為了平衡顏色。這個公式能創(chuàng)造出一種平衡的感覺，并能提供更佳的用戶體驗，可以讓用戶的實現(xiàn)從一個點舒緩的移動到另一個點。
第二個：最多3個原色
這個規(guī)則與黃金（6：3：1）規(guī)則相匹配。這是避免混亂并保持平衡的最佳辦法。
5）顏色組合和互補
提供和諧的配色方案時，需要注意些什么？在這個過程中需要考慮以下方面：
第一， 色調(diào)
您可以在色環(huán)上生成單個“色度”的許多變體。通過添加白色，黑色和灰色來生成不同的色調(diào)。
實現(xiàn)平衡色調(diào)，最簡單的方案是單色（單色）方案。
第二， 對比
顏色的不同對比可以喚起不同的情感反應。色輪上相對的兩種顏色可以提供最高的對比度，比如黑色和白色。強烈的對比度可以讓人集中精力，并且產(chǎn)生緊張的心情; 柔和的對比度則適用于輕松、休閑的UI設(shè)計。
注意：對比的使用不要過火，這樣容易使用戶產(chǎn)生困擾。
6）黑白色搭配不過時
黑色是所有中性色中最強的，而白色是最常用的背景顏色。黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優(yōu)雅的氛圍。黑白色的搭配主要用于網(wǎng)站UI界面。
7）從自然和藝術(shù)中獲得靈感
自然與藝術(shù)是靈感的主要源泉。抬頭看看天空，你會發(fā)現(xiàn)藍色發(fā)揮到淋淋盡致的經(jīng)典模樣。從大自然中獲得的配色靈感可以使您的設(shè)計更加切合用戶的審美，非常自然，不帶刻意的痕跡。而藝術(shù)是對自然的直接反映，是非常寶貴的資源，值得好好利用。
8）顏色心理學 – 避免性別誤區(qū)
或許天生如此，女人不喜歡灰色，橙色和棕色。她們鐘愛藍色，紫色和綠色。而男人不喜歡紫色，橙色和棕色。男人喜歡藍色，綠色和黑色。只要記住，當你的產(chǎn)品目標用戶群是男性時，選擇能傳達男性氣概的色彩。如果你把運動類App的界面使用了女性色彩，結(jié)果可想而知。
還有一個誤區(qū)，人們以為粉色是女性的喜愛，但結(jié)果也許會讓你大跌眼鏡。
4. 工具和模板
這里我總結(jié)了一些有助于UI配色的工具和模板，希望對您有所幫助：
1）Coolors.co
Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調(diào)色板，還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。
2）Mockplus
Mockplus是一款非常方便的UI / UX設(shè)計工具，其啟動頁面加入了配色精美的示例項目和模板，可直接導入桌面客戶端。其編輯器中，可對組件進行多樣的色彩設(shè)置和編輯，內(nèi)部也包含完整的顏色選擇器，支持導入圖片和GIF，如果您是要在原型設(shè)計過程中產(chǎn)出精美的UI 界面，Mockplus能滿足您的需求。
3）Paletton
Paletton有點類似于Kuler，但又不僅限于5個色調(diào)。當您已經(jīng)擁有原色并想要使用其他色調(diào)時，Paletton將會是您很好的選擇，它可以創(chuàng)建協(xié)同色彩組合工作，是強大的UI調(diào)色板。
4）Check my Color
Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具，也是一款能夠檢查不同網(wǎng)頁自己的顏色亮度和對比度差異的工具。
5）Chinaz
該網(wǎng)站提供了豐富的配色資源，包括在線調(diào)色板，網(wǎng)頁常用色彩，web安全色以及網(wǎng)頁顏色選擇器，會使您UI 配色的一個很好的幫助。建議對色彩運用比較初級的設(shè)計師可以做一個參考。
注意：可用性是關(guān)鍵
創(chuàng)建華麗的UI界面永遠不是最終的目標。提供卓越的用戶體驗，為用戶的生活增添快樂和幸福才是我們設(shè)計的目的。因此，在UI 設(shè)計配色上，每位UI設(shè)計師應該記住，界面應該是符合高度實用和并且清晰明了的。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務
藍藍設(shè)計的小編 http://m.sdgs6788.com
