本章會從實操出發，結合真實項目為大家帶來配色實踐。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統。
本章會從實操出發，結合真實項目為大家帶來配色實踐。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統。
21年我司進行業務調整，原保險業務從當前產品中獨立出去，作為一家全新平臺為印尼用戶提供保險選購及理賠服務，為此我們提供了新的產品設計和配色。
根據上一章提到的選色邏輯，我們依次從產品情緒、行業屬性和目標用戶幾個緯度去思考。作為一家全新的保險平臺，我們希望產品給到用戶專業、安全、信任之感，那么藍色、綠色可以作為備選，藍色代表專業、權威，綠色代表安全、健康。后續我們做了相關行業調研，發現大部分本地產品也使用了這兩個顏色，可以確保備選顏色是符合行業喜好的，屬于安全的用色范圍。最后考慮到用戶的地域屬性，印尼大部分用戶都信奉伊斯蘭教，對綠色有著非同一般的熱愛。結合本次項目訴求，便選擇了綠色成為我們產品主色。
明確了主色色相，但同一色相會有冷暖、深淺之別，給到用戶的心里感受也略有差異。具體到本次項目中，暖綠有溫暖、活潑、歡快的感覺，冷綠則帶給用戶冷靜、平和的情緒。對于本次項目，冷綠更加符合產品定位。
飽和度控制色彩的艷麗程度，明度控制色彩的明暗變化，這兩項參數直接影響色彩的最終效果，所以需要同步交替調整，直到選出最合適的。考慮到主色常用于按鈕或重要文本，所以需要注意色彩的對比度，確保文本在界面中的可讀性。在本次項目中，“綠色”本身屬于對比度較小的顏色，為了獲得合適的對比度，需要調整更大的飽和度和更低的明度。經調整之后，我們測試了色彩的對比度為3:1，滿足W3C中給到的色彩對比度建議。
根據輔助色定義，我們匹配到了不同色相的輔助色，但并不是所有顏色都是我們需要的，需要根據經驗做出一定刪減。如同類色中的兩個綠色，色相上與主色過于接近，使用過程中會造成視覺混淆，所以我們剔除這組顏色。再如中差色與對比色中都有黃色，為了與橙色區分更加明顯，我們刪除對比色中的黃色。經過一系列刪減后，留下來的便是我們需要的色彩。此時也可以對色相進一步調整，如類似色中的藍色偏向湖藍，為了盡量和主色拉開差別，我們選擇色相向右偏移。
以上色彩只確定了色相，沒有進行飽和度、明度調整，視覺上并不屬于同一層級。為了獲取更加統一的配色，需要對其進行調整，這一過程被稱為視覺感官校準。如何校準？有人通過給色彩疊加黑色，對比色彩亮度進行校準。但不同顏色本身亮度不同，強行調整一致會導致部分顏色失衡。所以此種方法可作為參考，但不具備太大可靠性，實際工作中還需依靠自身經驗進行調整，確保視覺上和諧統一。以下為完成校準后的配色。
第二章提到中性色可通過調整明度或透明度得到，本項目使用場景比較固定，所以決定調整明度來得到中性色。考慮到主色為“冷綠”，與偏藍的中性色搭配可保證色彩調性一致，于是我們取藍色色相值，調整飽合度獲得最終色彩。需要注意的是隨中性色明度依次降低，飽和度需要逐級增加。最后確保主要用色符合無障礙設計指南，我們對一級、二級、三級文字用色進行了對比度測試，符合無障礙設計要求。
梯度色板可以提供更多配色，覆蓋更多使用場景，避免后續新增顏色的煩惱。早期為了獲得梯度色板需要設計師利用公式計算，現在可以直接使用在線工具生成。如Ant design的色板生成工具（https://ant.design/docs/spec/colors），Material design的色板生成工具（https://materialpalettes.com/），Eva Design System的色版生成工具（https://colors.eva.design/）。由于不同平臺算法不同，生成的色版效果也存在差異，這里首推Ant design，對比其他平臺色相變化更豐富、顏色更均勻、色階也更明確。
色彩系統隸屬設計系統的一部分，是對色彩進行科學管理的體系。不同于色彩規范主要針對設計側，而是需要打通開發聚焦產品代碼中。
簡單來說色彩系統由design token、色彩庫和說明文檔構成。design token是設計與開發約定一致的色彩名稱，作為色彩調用的唯一憑證。色彩庫是包含design token和顏色參數的樣式集合，供我們在設計和開發中調用。說明文檔類似于設計規范，定義了色彩的使用方式，為我們的使用提供指導。
如何命名需要考慮token層級和token構成。
關于token層級，設計師Lukas Oppermann在文章《Naming design tokens》(https://medium.com/user-experience-design-1/naming-design-tokens-9454818ed7cb)中有提到一般設計系統會將token分為三個層級，核心token（core token）、語義token（semantic tokens）和組件 token（component tokens）。核心token存儲的是原始值作為構建設計系統的基礎，語義token引用核心token，它的名稱描述了token的預期用途。組件token引用語義token，并將token綁定到對應的組件。較多的層級可以使token命名更加清晰，但層層嵌套的邏輯也增加了管理的難度，Lukas Oppermann在文中提到也可以使用一層或兩層。
關于token構成，體驗設計師Nathan Curtis在《Naming Tokens in Design Systems》(https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)一文中指出為了更加充分的描述token，token可以由名稱空間（namespace）、目標對象（object）、基礎樣式（ base）、修飾符（Modifier）構成。名稱空間對應系統、主題名稱，目標對象對應組件、組件元素和復合組件，基礎樣式是token的主干部份，包含樣式、屬性、語義，修飾符表明狀態、尺度、模式等。由于篇幅原因，此處只是簡單介紹，感興趣的同學可以點擊原文查看。
按照兩位作者的觀點，筆者對本次色彩系統進行了design token命名，如下所示：
樣式庫是設計與開發調用的基礎，需要在設計工具中實現token的層級邏輯，同時方便開發同學查看。筆者主要使用的工具是figma，Figma為我們提供了豐富的功能和插件建立樣式庫，以下會介紹些主流方式及優缺點，大家按照項目實際情況選擇使用即可。
local style：figma支持將色彩定義為全局樣式，并對樣式進行命名。設計在調用樣式后，開發便可以在查看面板看到對應token，基本實現了樣式庫的作用。但local style不支持token的層級嵌套，只能實現單層級token。如果你的項目剛好使用了單層級token，那么建議你使用此功能。
local variables：在今年6月份的config大會中，figma發布了變量功能，雖然CEO Dylan Field先生說不會推出design tokens，但變量功能卻完美實現了token的作用。它支持將色彩定義為變量，且可以實現層級嵌套，開發在查看面板也可以方便的看到變量名稱，算是解決了figma在design token方面的缺陷。
Figma token：一款定義design token的插件，且支持token的層級嵌套。開發查看token名稱目前有兩種方式：1.可在 Figma token的inspect面板進行查看，但插件需要在編輯模式下使用，意味著你需要給到開發編輯權限，這無疑會增加團隊成本。2.插件支持將token轉化為figma樣式和變量，并保持當前的token名稱，此時開發可以在figma的inspect面板查看token，建議使用此種方式，經濟實惠。
一般文檔內容包含使用規則、注意事項、場景描述、token名稱、色值參數等等，也可根據實際情況作以增減。輸出說明文檔后，整個色彩系統搭建完成，接下來需要推進團隊使用。為確保整個系統在項目中順利落地，最好組織相關人員進行一次宣講，介紹清楚使用規范及注意事項，明確要求嚴格按照系統執行。
本篇是關于圓角的UI設計知識分享，主要分為兩個部分，第一部分介紹圓角在UI設計中的作用，第二部分是關于在界面中容易被忽略的圓角設計細節。
視網膜中有塊區域叫做中央凹，是視覺最敏銳的區域。中央凹在處理圓形時速度最快，而在處理棱角邊緣時則需要調用大腦中更多的“神經影像工具”。所以，圓角越大、越趨近于圓形，人眼在處理時速度越快。
多數情況，用戶使用App時在每個頁面的停留時間都比較有限，我們需要確保用戶在盡量短的時間內高效獲取有效信息并完成相關操作，尤其對于工具類App來說更是如此。
另外，巴羅神經學研究所對“角”的科學研究發現，角的突顯性感知與角的度數呈線性變化關系，銳角比圓角產生更強的虛幻突顯性（The perceived salience of the corner varied linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles）。簡單的說就是，角越銳利，看起來就越突顯。而角出現的越凸顯，就越多地影響視覺的識別過程，導致識別變慢。
圓角具有其特殊的內在指向性，在界面的容器（如卡片、頭像等）上使用圓角，會引導人們的目光聚焦在圓角矩形或圓形內部的內容上面。
而尖角的外擴性會導致視覺發散，不能使用戶的注意力在第一時間集中到容器中的內容本身。因此，作為內容載體，帶有圓角的容器具備較強的內容引導性，能夠讓用戶更加快速的獲取內容信息。
在我們長久以來形成的心智認知中，認為尖銳的物品具有危險性，而圓潤的物品更加安全。帶有弧度，造型相對圓潤的物品更有助于制造正面情緒，工業設計中常用圓潤平滑的造型來增加產品傳遞給用戶的安全和舒適性。
對于互聯網產品，我們也存在相同的認知，所以在界面設計中使用圓角圖形，也同樣可以帶給用戶正面情緒。
考慮到握持舒適度、安全性和生產工藝等原因，目前市面上多數的手機外觀和屏幕都是采用較大圓角的設計。隨著全面屏手機的興起，我們愈發能注意到從手機外型到內部屏幕，圓角都是以一種嵌套的關系層層對應的。
同樣的，為了遵循這種規律，同時延續從硬件到界面的設計語言，屏幕內部界面中的圓角也是呈現出同樣的嵌套和對應關系。
接下來，說說在UI設計中容易被忽略的兩點問題。
首先，我們來看一個對比示例，你能發現左側彈窗的設計細節問題嗎？左右兩個彈窗的不同之處僅在于按鈕的圓角半徑上，左側彈窗的設計問題就是出現在這里。
前文中我們提到過界面中容器與其內部元素的圓角是存在的對應關系的，但這個細節有時在設計過程中會被我們忽略，導致的結果就是界面的細節經不起推敲，影響視覺的美觀舒適。
我們需要考慮如何去解決這個問題，如果僅僅是做一些個人練習或者單一獨立頁面，那么我們只須要在設計中注意這一點，通過觀察讓圓角在視覺上看起來對應和諧即可。
但是如果你要去制定一套設計規范或在一個已經成熟的產品中去進行設計，我們就須要在保證視覺效果的前提下讓界面中的圓角參數更加嚴謹一些，以便于規范的使用人員了解參數為什么是這個，如何得到的？以及，后續遵從何種規則去進行設計，來保證不同設計師產出標準的一致。
我們在網上可以看到好多教程告訴你：外部容器圓角半徑 = 內部元素的圓角半徑 + 二者間距
△圖片來源于網絡
但我認為這種計算方式是有問題的，首先，多數情況下我們是根據外部容器來推導計算內部元素圓角，而不是從內向外，比如：iOS從手機屏幕→Dock欄→Dock欄中的圖標都是存在圓角的對應關系，我相信應該不是先確定內部圖標的圓角再向外推導容器和屏幕圓角的。然后，如果我們向內推導，這個計算公式就僅在一定條件下成立，因為在二者間距大于外部容器圓角半徑的時候，內部元素的圓角半徑就成了負數。
那么如何計算是相對嚴謹的呢？
我們從外向內推導，在外部容器圓角固定的情況下，內部元素的圓角半徑與它到外部容器的距離相關，在理想情況下：
內部元素的圓角半徑 = 外部容器圓角半徑 - 二者間距
但是，和前面提到過的問題一樣，以上的計算公式有一定的局限，比如在外部圓角很小的情況下，就無法去根據間距計算內部的圓角參數。
對此，我推導出了一套當存在圓角嵌套情況下，用于輔助定義圓角參數的規則：內外卡片 (元素) 圓角差值必須要小于或等于卡片 (元素) 間距。并且，內外卡片 (元素) 圓角差值越大，內外卡片 (元素) 之間的間距取值范圍越靈活。
具體的推導過程如下：
1. 當內外卡片圓角差值等于卡片間距時，內外圓角“完美”對應。當內外卡片圓角差值大于卡片間距時，圓角部分出現明顯視覺問題；
2. 內外圓角“完美”對應卡片的圓角部分的間距看起來比直線位置要顯得略小，所以當卡片間距不變，內部圓角在一定范圍內變大時，在視覺上內外圓角仍然是可對應的，但是當內部圓角過大時，則會出現問題。結合這兩步可得出結論a：內外卡片圓角差值必須小于或等于卡片間距；
3. 根據步驟2，內部卡片圓角略大于“完美”對應圓角時，內外卡片圓角也是能夠形成呼應的；
4. 此時，在步驟3的基礎上，當內外卡片間距變大時 (18px→34px)，左側示例圖的內外圓角依然可以對應，但是右側示例圖的內部圓角看起來會過大，由此可得出結論b：在滿足規則a的條件下，內外卡片圓角差值越大，內外卡片之間的間距取值范圍越靈活；
下面來說第二個容易被忽略的問題，文字內容到圓角容器的內邊距。如果將容器內的文字粗略看做一個矩形，那么結合前文中提到的內外圓角對應關系，文字到容器的內邊距應隨著容器圓角半徑的增加而增加；
另外一點，在我們增加容器的圓角半徑后，導致容器內部空間被壓縮，圓角半徑越大越明顯，我們也需要去調整內邊距，以保證視覺上的透氣和呼吸感 。
最后，補充一點，在前面一張示例圖中我們可以看到，雖然我們通過調整間距的方式，讓界面的視覺看起來更加的舒適美觀，但是同時，也因間距的增加造成了屏幕橫縱空間利用率的下降，所以在工作中需要根據實際情況綜合考量，去定義圓角及內容間距。
對于 UI 設計師來說，圖標設計的能力至關重要，也是提升感官體驗的重要方向。對于一些初入行業的設計師，習慣下載圖標素材應付項目需求，失去了動手能力培養的機會。甚至一些多年工作經驗的老司機，依然還擺脫不了使用素材的習慣，稍微復雜一點的技法就會難以駕馭。
1. 切勿過度素材化
對于初入職場的設計師來說，偶爾運用素材可以理解，但是一定要學會拆解和分析，掌握還原設計的技巧和能力。
過度依賴素材容易導致思維固化，不愿意去創造，失去創新設計的能力；也容易導致眼高手低，有想法卻實現不出來，極容易萌生放棄的念頭；素材拼貼形式完成的設計，在規范性和細節性上面也是大打折扣的，導致設計作品不夠精細化和規范性。
2. 刻意練習強化
我們需要通過刻意練習來提升圖標設計的能力，根據一萬小時定律，技法層面的提升都是通過反復磨練達到的。
3. 擺脫素材才能規范化
圖標設計從素材習慣過度到設計動手其實很容易，但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規范化的關鍵，然后再統一風格和細節規范，掌握數字化關系也是需要我們反復研究的課題。
比如以這個天氣圖標來舉例，相信很多同學都能畫出來，但是有沒有把控里面的數字關系就難說了。通過以下示意圖我們可以看出來，大圓和小圓之間的比例關系是 4:3，而間距的關系也與圓形的大小有著數字關系。這些數字關系可以使得圖標設計更加精細化，也能引導我們去探索設計背后量化的標準和關系。
4. 質感的層層強化
當我們繪制完圖標的造型之后，運用合適的風格進行質感強化也是尤為重要的。這里我先運用其中的一個風格來完成，選擇了磨砂玻璃質感的效果。為了質感和層級關系更加明顯，這里單獨對局部進行了光影強化和邊界處理，看看以下步驟拆解圖感受一下。
備注：運用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實現。
5. 延展界面場景
為了進一步強化圖標練習，延展了一個簡單的界面場景，一個由宮格布局組合成的界面設計。為了填充所需的內容，先把之前的一些圖標作品放進去占個位置。雖然都是質感一類的圖標，但是由于透視、配色、風格和細節規范等不一致，整體還是存在一定的排斥感。
6. 根據界面環境重新調整
由于界面設計屬于深色主題，之前練習的天氣圖標放入場景中顯得過于突出，而且玻璃質感的通透性沒有得到很好的發揮。于是根據界面環境對天氣圖標進行了重新調整，以深色關系調整了云朵部分，針對太陽的配色和尺寸比例也進行了調整，如以下效果圖。
7. 延續風格補全設計
以調整后的天氣圖標作為風格規范，延續了其它業務場景的圖標設計，在透視關系、細節規范、配色比例和光影效果等方面進行了直接延續。在光影方向上面選擇了縱向區分，左邊三個選擇左上角打光，右邊三個選擇右上角打光。（當然也可以統一一個方向設置光影）
8. 統一性還是差異化
完成的整體設計視覺風格雖然比較統一，但是也有一些問題存在。圖標之間缺少差異化，過度統一容易視覺疲勞，于是在統一性和差異化上面開始糾結了。
為了既保障圖標設計表達的統一性，又能形成視覺感的差異化，做出了調整配色關系的決定。根據天氣圖標的配色關系延續出了其它色系，看看最終的效果如何。
你喜歡哪一版？
關于統一性和差異化因人而異，在朋友圈征集意見也是各有差異，那么你會喜歡哪一版呢？歡迎留言區一起互動交流。
藍藍設計的小編 http://m.gerard.com.cn
