ui一款全新的產品該如何定義色彩體系

1、假如設計師負責一款全新的產品，不受已有規(guī)范的束縛，我們該如何定義產品的色彩體系呢？有些設計師可能會憑自己的主觀想法定義色值，覺得這個顏色在界面里好看就用了，但是我覺得這樣是不夠規(guī)范的，更多應該考慮到全局的通用性和科學性。色彩色彩是設計系統(tǒng)的重要組成部分，可以使用在品牌感、信息層級、操作指引、交互反饋的場景。在細分層面，色彩可以分為主色、輔助色和中性色。設計師調整顏色的時候，建議使用 HSB 模式，調整色彩更直觀，符合心理預期，因為人腦也是通過這個模式來辨別顏色的。其中，H代表色相，S代表飽和度，B代表亮度。色相是區(qū)別各種不同色彩的標準，通過360圓形色環(huán)來取色，每一度代表一個色相。飽和度指色彩

2、的純度，飽和度越低，越往白色過渡。亮度指色彩的明亮程度，亮度越低，越往黑色過渡。這是常用軟件 HSB 模式調整顏色的截圖，幫助大家理解。主色主色一般和產品的品牌色相關聯(lián)，很大程度決定了產品整體的調性和視覺風格，常用于主按鈕、文字高亮、強調操作等界面場景。產品1.0版本以上，Logo一般都會有定義好的品牌色，界面設計中的主色和品牌色保持一致即可，可以傳遞統(tǒng)一的理念。如果從0開始的新產品還沒有定義Logo和品牌色，界面要先設計開發(fā)，這時我們可以結合產品行業(yè)特性、產品理念、產品名稱、用戶特征等進行思考，提取關鍵字和情緒板，從而提取多個色系，最終和多角色溝通確定主色系，避免后續(xù)反復調整的成本。確定主色

3、系后，設計師該如何定義具體色值呢？可能大部分設計師都是直接吸取同色系的大廠產品色值，再微調下參數(shù)做出差異性就確定了。這確實是一個取巧方法，畢竟不容易出錯。但我覺得設計師需要有自己的思考過程，所以進行了國內外大廠產品主色的調研分析，總結了一些共同點和差異點。我發(fā)現(xiàn)Apple系和國內產品的主色傾向于飽和度和明度較高的顏色，基本分布在橫豎向三等分的右上角，我認為主色取值可以參考這個區(qū)域?？聪虏糠之a品字色、按鈕色、深色模式的效果，還可以。而谷歌系、微軟系產品傾向于明度稍低的顏色。從設計層面來看，顏色有點暗、有點臟，不太建議。我有點不太理解國外設計師的視覺審美，研究了WCAG 2.1無障礙標準后，才發(fā)現(xiàn)

4、他們在為障礙（色盲）用戶著想，主色都符合WCAG 2.1的4.5:1最小對比度（AA 級）。這個標準涵蓋了使Web內容更易于訪問的各種建議，遵循這些準則將使更多殘疾人更容易獲取網站內容。從分析的國內產品中，我只發(fā)現(xiàn)知乎的主色符合這個標準。這其實就引發(fā)了我們的思考，視覺效果和無障礙人群體驗，哪個更重要呢？我覺得兩個層面都挺重要的，不過在實際場景中，建議設計師更多是結合品牌調性、視覺效果去定義具體色值，在美感、可讀性、可用性之間得到平衡。注意一點，明度不宜太低，顏色會比較臟，也不太符合年輕用戶的審美。如果我負責一款產品，已經確定藍色系為主色，我會選擇明亮一點的色值，在文字、按鈕、深色模式等常用場景

5、下保證可讀性和可用性。色值定為#247FFF，后面講輔助色的時候會用到。輔助色輔助色，可以用于特定功能、狀態(tài)反饋、應用圖標等場景，反饋的成功、失敗、警告狀態(tài)最常用到了?；谥魃?，我們怎么定義輔助色呢？我總結了點小方法。1. 以主色的色相為基礎，差值為15，圍繞360色環(huán)提取24色。（差值15的顏色屬于同類色臨界點，有利于我們劃分色度層級，又不會失去想要的色系）2. 參考常用配色理論：相似色、鄰近色、三分色、互補色，得出部分色值。3. 結合界面場景和使用效果，對顏色進行刪減和補充，最終確定所需要的輔助色。（建議最多12種，避免色彩太多，不利于設計師理解使用）4、將輔助色和主色對比，進行視覺感官明

6、度校正。（雖然色彩的飽和度和明度一樣，但不同色相的視覺感官明度是不一樣的，綠色、黃色、青色實際看起來特別淺，所以我們要手動調整）校準方式：在顏色上面疊加純黑色圖層，圖層模式選擇色相，就可以直觀地看到無彩色視覺感官明度。相差大的顏色可以以5為差值調整飽和度或明度，最后再根據效果進行微調。（色相的差值能被5整除，飽和度和明度同樣適用）調色板為了滿足界面對色彩的需求，需要對主色和輔助色進行色板延伸，建立不同梯度的調色板。這里有兩種計算方法：1. 淺色調色板，在顏色上依次疊加20%、40%、60%、80%、90%不透明度的白色；深色調色板，在顏色上依次疊加20%、40%、60%、80%不透明度的黑色。

7、2. 淺色調色板，色相（H）往感光明度高的色相依次差值2，飽和度（S）依次減少15，明度（B）依次增加5；深色調色板，色相（H）往感光明度低的色相依次差值2，明度（B）依次減少15，飽和度（S）依次增加5。（Ant Design和Material Design調色板也都加了色相旋轉）。從對比效果來看，比較建議使用第2種方法，使用 HSB 模式的值進行遞減/遞增得到完整漸變色板，顏色更加明亮通透。Ant Design官網也有在線生成調色板功能，和第二種方法邏輯類似，可以快速生成，大家可以去使用。最終生成主色和輔助色的調色板，效果如下。中性色中性色包含黑、白、灰，合理地使用中性色能夠使界面信息層級主次分明，助力于瀏覽體驗，常用于字色、控件色、背景色的場景。由于純灰色顯得比較臟，人眼對偏藍的灰色閱讀體驗更好，在桌面端更建議使用灰色相加點藍。計算方法：1. 選擇和主色視覺感官明度相同的灰色，按調色板方法建立梯度色板。