<button id="kksmm"></button>
本文為設計師提供全流程指導，深入探討多維度競品分析的方法。文章分享了如何拆解多維度，以及6種實用的分析技巧。
我與ICON的設計好像有什么不結之緣。早在2017年我就寫過一篇如果對抗APP中ICON設計同質話的問題。提出了自己的一些建議。而在之后的工作中也多次改版或設計過成套的APP應用中心的ICON和系統后臺ICON庫。ICON設計的經驗那是不得不豐富的存在。
ICON，中文翻譯為圖標。是對象的圖像表示，指用圖形指代某些名詞，如：打開、警告、愛、學校、山等。ICON，是上世紀九十年代伴隨IT 產業出現的一個技術詞匯，原指計算機軟件編程中為使人機界面更加易于操作和人性化而設計出的標識特定功能的圖形標志。
下面是我總結了這幾年設計icon的經驗結合大廠的后臺規范。給新手設計師的一些建議，都是經驗之談希望能夠幫到你。可以讓你在設計的這條路上走的越來越輕松。
那位美女設計師：啊！搞什么呀，B端設計師icon還有設計，你傻不傻呀。我給你分享幾個現成的icon網站吧下載了就能用。
我：是的我也用現成的icon在很多的需求里。但是我更喜歡自己設計，自己去做。直接用現成的icon不爽嗎。嗯當然爽呀。看是你要要知道做的更好的方法和可能性。不要總把自己當美工吧，我們可以是設計師的。
做為什么師我們大概都應該知道icon作為我們界面的重要構成元素，它會在很大程度上影響我們界面的風格。甚至會影響我們品牌的調性。所以一套符合我們設計風格具有我們品牌調性的icon是很有必要的。總之你想明白一個道理，你一整個屋子都裝修好了，房間里獨獨到處都放了幾把破椅子。不難受嗎。
Ant design設計規范：圖標是 UI 設計中必不可少的組成。通常我們理解圖標設計的含義，是將某個概念轉換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。在我們的企業級應用設計范圍中，圖標在界面設計的諸多元素中往往只占了很小的比重，在調用時也會被縮到比設計稿小很多倍的尺寸，加上在圖形素材極度豐富并且便于獲取的今天，在產品設計體系中實現一套美觀、一致、易用、便于延展的圖標體系往往會被不小心忽略掉。Ant Design 相信一整套優質的圖標對于設計質量的影響是非常巨大的，這考驗著設計師的協作能力，以及對圖形塑造的系統性思維，同時也能反映一個團隊對于細節的追求。
中后臺使用的icon大部分規范平臺也好或者一有系統也好他們的設計原則基本是大同小異的。我的建議是如果你要設計一整套的icon圖標。在設計之前確定自己icon的設計原則。這個設計原則可以依照自己的界面設計風格或期望的界面設計風格以及行業屬性、自己品牌等去制定。
Ant Design 的圖標設計原則源自「確定」和「自然」，落實到圖標設計領域，一共有四個。準確、簡單、節奏、愉悅。
設計造型準確的圖標（保持偶數原則，去小數點）；選擇表意準確的圖標，不對用戶的認知造成困擾。
在表意清晰準確的基礎上，盡量保持圖形的簡潔，不做多余的修飾。
挖掘構圖中的秩序之美。
賦予適度的情感。在部分圖標設計中，會適度的注入擬人化的元素，令圖標具備生命力。
Icon 作為 UI 構成中重要的元素，它一定程度上影響整體 UI 界面呈現出的風格，TDesign 初期提供一套適用于中后臺場景的線性 Icon，以普適、通用的標準進行設計，風格契合默認 TDesign 的風格，線性、圓角。在TDesingv中設計原則為、從簡、精確、適度
制作時保證參數的簡化，盡量消除小數點以及非整數的角度。處理線條以及輪廓時刪除多余的錨點，輸出時應避免出現不必要的裝飾，保持圖標的簡潔。
在設計時避免使用那些含義模糊的圖形，當同個事物存在多個圖形表述時，應選取最為流通的樣式，必要時進行針對性的強化。在圖標輸出時也應遵守命名規范，精確的文字描述便于他人查找。
單個圖標作為一個獨立的視覺個體，在線條的疏密以及圖形的搭配上要呈現適度感。在處理一些必要的高密度圖標時也要考慮線條的節奏感，讓其舒適不壓迫。系列圖標要遵守適度原則，將變化控制在一定范圍內。
發現沒大廠規范為了普世所以他們的圖標設計原則定的基本都是一樣的。只是換了一個詞而已。而且他們的大部分原則和細節都是來自平面設計里的板式設計和標志設計里的形式美法則。
設計一套優秀的圖標設計應該簡潔明了、直觀性強、獨特性好、可識別度高、適應性廣、細節處理精細、可擴展性強，并且能夠根據用戶反饋及時改進和優化。如果要具備這些特征，那我們在設計的時候就要遵循一些特定的規范。
icon設計的柵格在大場的設計規范里面分為兩種。一種ant design設計規范里面的那種柵格。另一種是TDesign設計規范里面的柵格。我之前在做的時候是直接呀的阿里巴巴示例圖庫的上傳模板里面的柵格進行設計的不過。沒有這設計規范里面的柵格好用。
Ant Design 的系統圖標都是按照 1024 x 1024 的畫板進行制作的。
出血位： 在圖標的設計過程中預留出血位的做法，可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險；同時在設計過程中，也為設計師把握圖標間平衡留下了進退的余地。新版的設計規格在圖形的外圍預留了 64px 的出血位，多數的圖標在設計中我們都不建議超過這個區域。
柵格作為圖表繪制的底層結構，是一切屬性設計的基礎。線條的長短粗細、圖標的大小比例等關鍵因素均在其基礎上制定。圖標常見尺寸為16*16；20*20；24*24；32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標繪制的統一柵格尺寸
我記得最早入行的時候畫icon就用的這種柵格。但是我不太喜歡，因為在實際的設計之中會出現好多問題。當時的我是無法解決的。
面對各式各樣的icon我們在上一步有了柵格，接下來就要處理在柵格里如何讓形狀不同的icon在視覺上大小是一致的，在視覺上是平衡的。所以轉對不同形狀的icon在柵格里所占的輪廓規范就產生了。基本這個輪廓都是一樣的。因為他是一個很基礎的東西。
但其實可能是我技術的問題。在過往的很多次設計中如果你完全按照這個輪廓去執行。做出來的icon你會發現其實在視覺上還是會存在問題的，我都會在做一次優化。不過這很大可能是我技術和設計能力的問題吧。
即使有了規范，柵格輪廓等。但是往往我們在設計制作的時候還是會有很多的細節需要去處理的。這樣我們的設計才會更專業。因為我用ant 規范比比較多所以。我們就一起看一下ant的規范里對icon設計細節的一些建議。
在ant的圖標設計規范中，對icon圖標進行了、形式感、韻律、平衡、辨識這幾方面對我們在設計和制作icon可能遇到的問題給了一些建議。
Ant Design圖標設計建議詳情：https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88
以上的內容主要在探討一類icon圖標的設計。那就是中后臺的圖標設計。但其實icon圖標是有很多的分類的。交互性圖標、裝飾性圖標、說明性圖標
這類圖標主要用于應用程序的界面設計，它們可以向用戶傳遞某種信息，引導用戶執行特定操作，同時也允許用戶向程序傳遞控制信息。例如，登陸注冊按鈕、開關按鈕、數量按鈕、點贊、轉發分享等都屬于交互性圖標。
這類圖標主要用于提高頁面設計性，它們可以加深個性化設計風格，提升用戶線上體驗感，迎合受眾群的偏好，提升設計親和度。例如，符合節日需求的線上活動呼應圖標、個性化圖標等都屬于裝飾性圖標。
這類圖標主要用于闡明信息，它們是區分不同功能或內容的視覺標記，簡單地說，就是對功能的解釋說明。例如，象形圖標、隱喻圖標、工具圖標和混合圖標等。
此外，根據圖標的具體功能和用途，還可以將圖標分為表意圖標（又稱解釋性圖標）和標識性圖標。表意圖標是通過原本不存在實物的符號表達某些特定的含義或操作行為，這些符號逐漸繼承了一些象形符號的特性并不斷演化。例如，“箭頭”已經從最初的“弓箭”衍生為一種特定的表意符號。而標識性圖標主要用于標識品牌、產品或服務，它們通常具有獨特的設計風格和視覺效果，以便在市場上脫穎而出。例如，蘋果公司的蘋果圖標就屬于標識性圖標。
為我以往的設計經驗里大部分都是在做B端的設計和交互工作。在我的理解里圖標就分兩類。1、規規矩矩的ICON。2、花里胡哨的ICON。就這么簡單。
再優秀的理論也只能是理論。實踐才是檢驗真理的唯一標準。這不是我說的。這是老馬（卡爾·海因里希·馬克思）說的。所以就請大家進入我的實踐過程吧。
需要還是要從最初開始講。我負責的SAAS平臺要迭代換框架。然后對界面視覺交互、產品功能都迭代一個大的版本。這次設計部分的任務就我來負責。
因為是大的迭代嘛。所以這次icon設計的需求是跟著整個平臺一起走的。你要設計新的視覺還用之前的那套老icon顯示是不合適的。在者說那套icon的質量也是一個難以想象的存在。是開發直接從網上個個平臺找的。所以這次這個平臺的視覺迭代就有了搞一套適合我們界面和行業的icon圖標。
這是我們SaaS平臺的設計價值觀
因為是先有了界面，要做一套配合界面的菜單icon圖標。我想我們的icon要符合整體頁面的風格。不說給界面加分了，也不破壞我辛苦做的界面視覺。
結合我們品牌的logo圖標的特點。讓我們的icon也擁有獨屬于他們自己的絲帶偶。把公司logo的設計特點加入到我們這次icon的設計原則里。
是的優美，是我們這一套icon的特點。也是從我們logo里提取出來的設計要點。然后把他運用到icon設計里。
規范的知道基本是使用的阿里巴巴矢量圖庫早期的那個上傳圖標模板的AI文件。為什么會選擇使用這個呢。因為我們SaaS平臺的所以icon都是從阿里巴巴矢量圖庫引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用，而不是直接切圖給他們用。
在這套圖標設計的時候，其實并沒有完全的按照大廠的設計規范進行。在很多的細節上做了調整。為的是達到更好的效果。當然。也有很多遺憾。在很多的方面并不是很標準。在下次優化設計時，會更好的去執行制定的設計原則和設計規范。
之所以寫這部分內容，是因為我覺得在平面設計里標志設計的知識對我們現在圖標設計是很有用的。可以是圖標設計本身就是適應了顯示屏后的標志設計。如果你搞懂了標志設計的系統知識，那圖標設計不就是手拿把掐的事了。標志設計就是殺雞的牛刀。
一般我們說到標識設計可能大概覽的就是會認為是品牌形象設計，也就是LOGO設計。是的我大學學的標志設計就是在講品牌LOGO的設計。但我現在理解的標志設計可能意義更廣泛。因為在很多的時候我是把標志設計的知識和原理來應用到其他的設計方面。
標志是品牌形象核心部分（英文俗稱為：logo），是表明事物特征的識別符號。它以單純、顯著、易識別的形象、圖形或文字符號為直觀語言，除表示什么，代替什么之外，還具有表達意義、情感和指令行動等作用。
LOGO、標志、徽標、商標是現代經濟的產物，它不同于古代的印記，現代標志承載著企業的無形資產，是企業綜合信息傳遞的媒介。
標志的來歷，可以追溯到上古時代的"圖騰"。最初人們將圖騰刻在居住的洞穴和勞動工具上，后來就作為戰爭和祭祀的標志，成為族旗、族徽。國家產生以后，又演變成國旗、國徽。
古代人們在生產勞動和社會生活中，為方便聯系、標示意義、區別事物的種類特征和歸屬，不斷創造和廣泛使用各種類型的標記，如路標、村標、碑碣、印信紋章等。
到本世紀，公共標志、國際化標志開始在世界普及。隨著社會經濟、政治、科技、文化的飛躍發展，21世紀以來經過精心設計從而具有高度實用性和藝術性的標志，已被廣泛應用于社會一切領域，對人類社會性的發展與進步發揮著巨大作用和影響。
隨著“讀圖”時代的到來，標志以簡潔、 獨特、易識別的圖形符號傳達著特定的含 義和綜合信息，成為人們相互交流和傳遞 信息、溝通情感、表達愿望的視覺語言。 特別是在注重品牌效能與品質的今天，標 志發揮著重要的作用。 標志最主要的功能是以其簡潔、醒目、 美觀的圖形符號傳遞信息。
標志能夠表述某種組織、某項活動或某 企業品牌的性質、服務和宗旨。標志作為一種視覺識別符號，能有效 區別各種品牌給消費者的印象。也就是說， 它能夠表述出個性特點，使其從眾多同類 產品的標志中被區別出來。
市場上的商品花色、品種繁多。在商品的海洋里，消費者只能根據不同的 標志區別同類商品的不同品牌和不同生產廠家，并以此進行比較與選擇。商業企業在經營商品時，有的 也用自己的標志表示各自的經營特色。標志的這種作用是其取得法律保護的主要依據，在國際貿易中， 這種作用也得到了普遍的認可。
標志是現代經濟的產物，它不同于古代的印記。現代標志承載著企業的無形資產，是企業綜合信息 傳遞的媒介。對于企業而言，不僅要表明“我是誰”，還要說明“我怎么樣”。標志通過在不同場合、 不同載體的反復出現，使人們在看到標志的同時，就能自然聯想到產品
可口可樂歐洲太平洋集團公司前總裁喬戈斯曾經說：“可口可樂成功的原因很簡單，許多制造商只 熱衷于為消費者提供產品，而大多數消費者則需要產品的牌子。請記住，一聽可口可樂不只是飲料，它 還是一個朋友。
如今的社會，享用名牌似乎成為身份的象征、地位的體現和個人魅力的表現，這就使標志有了某種 精神的力量，這種精神力量代表著品牌的價值。
名牌價值是無形資產，無形資產的價值遠遠高于企業的有形資產價值和年銷售額。“可口可樂”“百 事可樂”的品牌價值都達到上百億美元。標志在各個國家都受到法律的保護，從這個意義上說，名牌標 志是企業的無價之寶，絲毫也不為過。
美國可口可樂公司的一位經理說，即使可口可樂工廠一夜之間被毀壞殆盡，公司也能憑借“可口可樂” 標志的聲譽從銀行立即貸款重建工廠。可見，對擁有名牌標志的企業來說，標志就是企業發展的一種依 托與保證，是一筆巨大的無形資產。
標志作為企業和產品形象的象征，它用無聲的具有美感的圖形語言宣傳著產品的質量與特色。標志 設計的好壞直接影響企業和產品的信譽度。成功的標志不僅代表了產品本身，也增強了產品的魅力。
著名的香奈兒（CHANEL）的標志以簡約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。 香奈兒于 1913 年由創始人加布里埃·可可·香奈兒（Gabrielle Chanel）在法國巴黎創立，其標志是由兩 個背向的“C”重疊而成，圖形平衡對稱，充滿溫文爾雅、端莊聰慧之氣，
標志的本質是信息傳播，這是現代的 標志設計的核心。標志的設計創意應該從 信息入手，從功能需要出發。需要告訴大家的是什么，而不是把形式作 為設計的唯一出發點。
在標志設計中，有的人喜歡造型簡單的，這得到了大部分人的認可；而有的人則認為在簡單中可適 當復雜，這要取決于實際的用途。不論簡單或復雜，需要把握一點：標志需要具備的特質是獨特。沒有 哪個企業甘愿平凡，大多數企業都在竭盡所能地建立自己獨特的企業文化和市場經營特色，所以在設計 標志時必須深思熟慮。
獨特性是標志設計的最基本要求。標志的形式法則和特殊性就是具備各自獨特的個性，不允許絲毫 的雷同。這就要求標志的設計必須做到獨特、別致，追求創造與眾不同的視覺感受，給人留下深刻的印象。
醒目的設計是所有標志希望達到的視覺效果。優秀的標志能夠吸引人，給人以較強的視覺沖擊力。 因為只有引起人的注意，才能使標志所要傳達的信息對人產生影響。在標志設計中，注重對比、強調視 覺形象的鮮明與生動，這是產生醒目性的重要形式要素。
標志要易于識別、記憶和傳播。這并不是說簡單化，而是指以少勝多、立意深刻、形象明顯、雅俗共賞。 通俗性強的標志具有公眾認同面大、親切感強等特點。對于商標而言，一個易記的商標形象首先要有一個與眾不同的響亮、動聽的商標名稱，以好的商標名稱為基礎，綜合考慮商標的特點，選擇最佳方案， 再進行具體的圖形設計。
標志色彩的配置一般有三種基本方法；
-是原色配合
原色的顏色單純、強烈、鮮艷奪目，藝術效果和傳播效果顯著。
-是同類色配合
只選擇一種顏色，采用依靠色彩明亮度變化的辦法，如用桔紅、桔黃、中黃、淺黃進行搭配，形成由淺入深的過度色視覺，能表達出動態感。
-是補色配合
這種色彩配置，對比鮮明，圖形格外醒目鮮艷，能給人以很強的視覺沖擊效果。
標志設計也是藝術設計的一種。所以他也同樣適用于我們設計里的形式美法則。用這些法則去設計你的標志或ICON讓他們的信息傳遞更準確。視覺表現更優秀。
形式美法則
標志設計是一種視覺藝術，人們在觀看一個標志圖形的同時、也是一種審美的過程。在審美過程中，人們把視覺所感受的圖形，用社會所公認的相對客觀的標準進行評價、分析和比較，引起美感沖動。
任何一個完美的標志圖形必須具有統一性，這種統一性越單純，越有美感。但只有統一而無變化，則不能使人感到有趣味、美感也不能持久，這是因為缺少刺激的緣，變化是刺激的源泉，有喚起興趣的作用，但變化也要有規律，無規律的變化，然起混亂和繁雜。因此變化必須在統一中產生。
均衡是在不對稱中求平穩。均衡可分為調和均衡和對比均衡兩大類，調和均衡是指同形等量，即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外，還有量的均衡、色的均衡，在標志圖形設計時必須相應考慮，以追求標志視覺張力。
節奏是韻律的條件，韻律是節奏的深化，節奏也就是“律”，這種律不僅表現在音樂上，而且反映在其他方面，當物體失去均衡則會引起運動。此種運動如有規律，則稱之為“律”。在標志圖形設計中，如果將線的長短、粗細、曲直、方位等進行不同程度的變化和巧妙組合，便會創造出不同感的“律”的形式，歸納起來分為：循環體、反復體及連續體。
在標志設計中，對比與調和應用極廣，如在大小、方向、虛實、高低、寬窄、長短、凹凸、曲直、多少、厚薄、動靜以及奇數與偶數的對比。對比是標志圖形取得視覺特征的途徑，調和是標志完整統一的保證。
任何一個完美的圖形都必須具備協調的比例尺度。在標志圖形中常用的比率有整數比、相加級數比、相差級數比、等比級數比、黃金比等。標志設計的形式美法則，不能孤立和片面地理解，因為一個美圖形的設計，往往要綜合利用多種法則來表現。這些法則是相互依賴，相互滲透，相互穿插、互相重疊、相互促進的，隨著時代的變化，審美標準、設計手法也在不斷發展。
近年來，標志設計發展越來越成瘦。總的發展趨勢是由復雜到簡約、具象到抽象、色彩更多樣話、標志的發展是一個設計相互交融、設計風格的多樣化過程。設計手段是次要的，目的才是第一位的。更注重的應使其商業性。
以下標志設計趨勢內容引用自標志情報局編譯的作者為Bill Gardner是logolounge.com的創始人的《2023標志設計趨勢報告》。https://www.logonews.cn/logo-design-trends-for-2023.html
我們每年收到的所有標志清晰解讀并整理成這份報告并不是一項容易的工作。總共超過30,000個標志，對我和一群杰出的設計師來說，這就像是世界上最大規模的配對游戲。最初，我們歸納出大約60-70個組別，然后將它們進一步劃分為具有最大影響力的15個類別。
我只是通過對提交的30,000多個標志進行徹底分析（還有國際上每個重要品牌的更新和重塑）后呈現的報告。因此你要了解的是，就像任何氣象學家會告訴你的那樣，他們不能保證天氣預報的準確性。同樣，我們也無法總是預測設計師將向哪個趨勢方向發展，這就是這份報告能讓我們保持警惕并感到有趣的原因所在
01、Wildflowers(野花)；02、Bloblend(流動混合)；03、Fades(逐漸模糊)；04Foreshort(透視)；05、Thrust(推進)；06、Spirals(螺旋)；07、Sonics(聲波)；08、WireForms(線框)；09、BallCaps(球形頂端)；10、NameFills(名字填充圖形)；11、Stretchers(元素拉伸)；12、NeoStencil(噴漆模版藝術)；13、HalfAster(半星號)；14、Double Os(雙圓環)；15、Ritz(餅干)；
重新讀了一遍標志設計的內容。果然受益匪淺的感覺。還是要時常溫故而知新的。學習了大廠的ICON設計規則也是很有收獲的。
本章會從實操出發，結合真實項目為大家帶來配色實踐。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統。
本章會從實操出發，結合真實項目為大家帶來配色實踐。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統。
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的條件下，內外卡片圓角差值越大，內外卡片之間的間距取值范圍越靈活；
下面來說第二個容易被忽略的問題，文字內容到圓角容器的內邊距。如果將容器內的文字粗略看做一個矩形，那么結合前文中提到的內外圓角對應關系，文字到容器的內邊距應隨著容器圓角半徑的增加而增加；
另外一點，在我們增加容器的圓角半徑后，導致容器內部空間被壓縮，圓角半徑越大越明顯，我們也需要去調整內邊距，以保證視覺上的透氣和呼吸感 。
最后，補充一點，在前面一張示例圖中我們可以看到，雖然我們通過調整間距的方式，讓界面的視覺看起來更加的舒適美觀，但是同時，也因間距的增加造成了屏幕橫縱空間利用率的下降，所以在工作中需要根據實際情況綜合考量，去定義圓角及內容間距。
藍藍設計的小編 http://m.gerard.com.cn
<rt id="ewygc"></rt>