一套 UI 界面當(dāng)中，核心的 APP 圖標(biāo)是用戶每天都要接觸、經(jīng)常使用的視覺組件和交互對(duì)象。設(shè)計(jì)圖標(biāo)的時(shí)候，要用到大家最熟悉的元素才能貼合用戶認(rèn)知，要醒目、統(tǒng)一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來自著名的 Tubik Studio 團(tuán)隊(duì)，他們?yōu)槿A為旗下的 EMUI 10 系統(tǒng)設(shè)計(jì)了核心的圖標(biāo)系統(tǒng)，來看看他們的設(shè)計(jì)過程吧。
我們總不會(huì)低估一個(gè)操作系統(tǒng)基礎(chǔ)圖標(biāo)，對(duì)于產(chǎn)品的可用性和合意性的影響?；A(chǔ)圖標(biāo)雖然小巧，但是對(duì)于整個(gè)操作系統(tǒng)而言，總是極具影響力的，因?yàn)樗麄兪怯脩艚缑娴暮诵脑?，幫助用戶快速直觀地在系統(tǒng)中定位、瀏覽、導(dǎo)航。但是，對(duì)于設(shè)計(jì)師而言，圖標(biāo)的設(shè)計(jì)始終是挑戰(zhàn)，它看起來最為簡(jiǎn)單，但實(shí)則為最為艱難的工作。
圖標(biāo)需要高效，讓人一目了然，但是也要具備良好的可識(shí)別性，在傳統(tǒng)和創(chuàng)新之間達(dá)到平衡。這一次，Tubik Studio 設(shè)計(jì)團(tuán)隊(duì)將要給華為的 EMUI 10 來設(shè)計(jì)圖標(biāo)，而這篇文章將會(huì)為你揭示背后的設(shè)計(jì)過程。
這次的項(xiàng)目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來負(fù)責(zé)。這次的設(shè)計(jì)項(xiàng)目從最初的探索構(gòu)思入手，逐漸開始繪制草圖，探索樣式，一直到最后打磨，完成設(shè)計(jì)。
為華為 EMUI 10 系統(tǒng)的用戶界面設(shè)計(jì)基礎(chǔ)的圖標(biāo)
我們?cè)?2019 年夏季，收到了來自華為的邀約，這次的項(xiàng)目要重新設(shè)計(jì) EMUI 這套基于 Android 系統(tǒng)的用戶界面基礎(chǔ)圖標(biāo)，這套圖標(biāo)會(huì)用來適配華為旗下的旗艦手機(jī)，這些圖標(biāo)將會(huì)隨著新版的系統(tǒng)部署到這些手機(jī)產(chǎn)品當(dāng)中。我們的任務(wù)，是創(chuàng)建總計(jì) 54 款符合當(dāng)下潮流趨勢(shì)的圖標(biāo)，這些圖標(biāo)要能夠貼合品牌和已有用戶的偏好，并且能夠吸引新的用戶。
這個(gè)圖標(biāo)設(shè)計(jì)項(xiàng)目如今已經(jīng)在當(dāng)下的華為旗下手機(jī)產(chǎn)品中應(yīng)用且部署好了，最早使用這套圖標(biāo)的智能手機(jī)型號(hào)為 Mate 30 ，緊接其后的是 P40。
在整個(gè)操作系統(tǒng)中，這些圖標(biāo)是始終位于用戶視野以內(nèi)、最基礎(chǔ)的最核心的交互元素，通常用戶每天都會(huì)同這些核心的基礎(chǔ) APP 進(jìn)行交互，有時(shí)候一天多達(dá)幾十次，因此它們應(yīng)當(dāng)具備良好的功能性，還應(yīng)該足夠美觀，給用戶帶來滿足感。同時(shí)，這套圖標(biāo)的設(shè)計(jì)，也應(yīng)當(dāng)足夠統(tǒng)一，以協(xié)調(diào)的體驗(yàn)切入到整個(gè) EMUI 的設(shè)計(jì)系統(tǒng)當(dāng)中，貼合整體的樣式特征。
所以，我們使用了一整套圖標(biāo)網(wǎng)格系統(tǒng)，應(yīng)對(duì)不同需求，在設(shè)計(jì)的過程中，這套網(wǎng)格有助于確保所有圖標(biāo)外部尺寸的一致性，也保證了內(nèi)部元素的統(tǒng)一性。
為了發(fā)掘全新的視角，我們決定從傳統(tǒng)的手繪圖標(biāo)開始，尋找重新塑造圖標(biāo)設(shè)計(jì)的方法。這些圖標(biāo)所涉及到的元素，早已為全球數(shù)百萬用戶所熟知，要重新設(shè)計(jì)圖標(biāo)外觀，并且還要成套且統(tǒng)一，這本身就是一個(gè)巨大的挑戰(zhàn)。
比如「電話」圖標(biāo)所對(duì)應(yīng)的聽筒元素、「信息」圖標(biāo)所對(duì)應(yīng)的氣泡對(duì)話框這樣的元素，是不可能完全拋棄重新創(chuàng)造的，所以我們的真正的切入點(diǎn)是在形態(tài)和色彩上尋求解決方案。
越是簡(jiǎn)單的東西，重塑起來就越難。
在實(shí)際的設(shè)計(jì)過程中，我們嘗試了數(shù)以百計(jì)的造型變體，從完全放飛、非常規(guī)的的外部造型，到極其常規(guī)，大家熟知的造型解決方案，我們都逐一試過。而在色彩上的嘗試相對(duì)會(huì)顯得更加具有實(shí)驗(yàn)性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來進(jìn)行混搭。
當(dāng)然，我們很清楚，這樣的實(shí)驗(yàn)性的工作是探索過程中的一小步，但是它是必須的，是創(chuàng)造新設(shè)計(jì)的種子，是尋求正確答案的必經(jīng)之路。
在設(shè)計(jì)過程在，有一件有趣的事情發(fā)生在設(shè)計(jì)「相機(jī)」圖標(biāo)的過程中。我們嘗試過很多不同的圖標(biāo)造型，不同的元素，不同的樣式，但是其中始終有一個(gè)細(xì)節(jié)是不變的，那就是右上角的小紅點(diǎn)。這是為了暗示用戶，華為的攝像頭模組來自徠卡，這個(gè)紅色的小點(diǎn)就是向其致敬的標(biāo)識(shí)。
而下面的概念設(shè)計(jì)，則是強(qiáng)化了圖標(biāo)之間的幾何輪廓的差異，從而提升圖標(biāo)在智能手機(jī)屏幕上的對(duì)比度和識(shí)別度。
下一步，我們基于幾何圖形外觀差異性，設(shè)計(jì)了多種造型不同但同樣優(yōu)雅的圖標(biāo)。在基于這種風(fēng)格概念進(jìn)行延伸的過程中，我們會(huì)優(yōu)先考慮圓形的元素。而「天氣」圖標(biāo)明顯既不適合圓形也不適合方形來呈現(xiàn)，所以我們使用的是云和太陽兩種元素的組合。「錢包」圖標(biāo)使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對(duì)自由的，但是所有的圖標(biāo)都是遵循圖標(biāo)網(wǎng)格，并且在視覺權(quán)重上盡可能統(tǒng)一。
在色彩和樣式上，我們則更加傾向于漸變。沒有色彩漸變，純扁平的圖標(biāo)顯得過于幼稚和「古早」，沒有足夠的品質(zhì)感，所以，我們?cè)谛碌膱D標(biāo)設(shè)計(jì)上，開始加入漸變色彩，提升質(zhì)感。
不過，在最終版本當(dāng)中，我們還是保留了圖標(biāo)外部的圓角矩形的外輪廓，然后將圖標(biāo)元素的內(nèi)徑進(jìn)行了適當(dāng)?shù)乜s減，漸變和核心的簡(jiǎn)約幾何特征依然是整套設(shè)計(jì)的最高優(yōu)先級(jí)。
這套設(shè)計(jì)方案展現(xiàn)了在整套 UI 界面中，圖標(biāo)這個(gè)小元素的設(shè)計(jì)上所需要投入的精力和潛在的難度。想要圖標(biāo)足夠協(xié)調(diào)、美觀、易用還要貼合品牌特征、還要區(qū)別于以往，是一件相當(dāng)不容易的事情。
細(xì)節(jié)里藏著魔鬼，任何細(xì)小的元素、線條輪廓、色彩的變化都可能會(huì)在屏幕上放大、被感知到。
文章來源：優(yōu)設(shè)網(wǎng) 作者：Tubik Studio
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如期而至，這是標(biāo)簽欄控件總結(jié)的第二期。這一期真是掏空職業(yè)經(jīng)驗(yàn)，希望對(duì)你的工作有所幫助。
這一期我們來聊一聊標(biāo)簽欄中的關(guān)鍵元素——圖標(biāo)。
圖標(biāo)其實(shí)存在于界面中的許多地方，但因?yàn)檫@一期主要分析標(biāo)簽欄，所以我會(huì)借標(biāo)簽欄中較主流的圖標(biāo)樣式，總結(jié)一套圖標(biāo)制作與落地方法。這些方法在圖標(biāo)制作過程中都是相通的，大家可以舉一反三。
1. 圖標(biāo)樣式
圖標(biāo)具體樣式風(fēng)格的定義是非常主觀的，網(wǎng)絡(luò)上也流傳著許多的教程教大家如何設(shè)計(jì)五花八門的圖標(biāo)，所以在這里我就不再贅述了。我主要來總結(jié)一下基礎(chǔ)的標(biāo)簽欄圖標(biāo)一般有哪些樣式變化。
我調(diào)研了諸多的應(yīng)用程序，發(fā)現(xiàn)主流的 APP 標(biāo)簽欄樣式變化，大致分為以下五種。其中占比最多的是「由線型轉(zhuǎn)面型」。
調(diào)研的應(yīng)用程序中，所有使用到線性圖標(biāo)的應(yīng)用程序，都將描邊粗細(xì)限制在 1pt-2pt 之間。
2. 圖標(biāo)視覺大小
上一期我們講到，iOS 定義了一套標(biāo)簽欄圖標(biāo)的尺寸規(guī)范。
iOS 在這里所定義的尺寸并不是圖標(biāo)文件最后輸出的尺寸，而是給設(shè)計(jì)師作圖時(shí)，針對(duì)不同圖標(biāo)形狀的參考尺寸，目的是為了讓圖標(biāo)的視覺大小看上去一致。
那么為什么 iOS 會(huì)根據(jù)不同的圖標(biāo)形狀給出不同的圖標(biāo)尺寸呢？因?yàn)?50px×50px 的正方形比 50px×50px 的圓形面積更大，所以正方形的視覺大小也會(huì)大于圓形。為了統(tǒng)一圖標(biāo)的視覺大小，正方形要做適當(dāng)?shù)拿娣e收縮處理。（矩形同理）
于是我們看到許多平臺(tái)都推出了圖標(biāo)輔助網(wǎng)格規(guī)范 1。其實(shí)如果遵從「面積相等」原理，理論上所有的圖標(biāo)網(wǎng)格都應(yīng)該由下面這一套推理公式得出（以Material Design 標(biāo)準(zhǔn)圖標(biāo)網(wǎng)格為例）：
但實(shí)際情況是，不同平臺(tái)的圖標(biāo)輔助網(wǎng)格規(guī)范建議尺寸都有一定的差異。原因就在于，雖然有時(shí)候我們參考「面積相等」原則對(duì)圖標(biāo)視覺尺寸進(jìn)行了規(guī)范，但項(xiàng)目落地后發(fā)現(xiàn)視覺上可能還是有一些不協(xié)調(diào)，所以最終設(shè)計(jì)師還是會(huì)憑借自己的主觀判斷再進(jìn)行微調(diào)。
記?。汉玫脑O(shè)計(jì)作品是理性的設(shè)計(jì)理論與設(shè)計(jì)師本身感性的碰撞結(jié)果，二者缺一不可。
3. 圖標(biāo)輸出尺寸
iOS 規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為 31pt×28pt；Material Design 規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為 24dp×24dp。
但我們發(fā)現(xiàn)，在借助了圖標(biāo)網(wǎng)格解決了圖標(biāo)視覺大小的問題之后，每一個(gè)不同形狀的圖標(biāo)，尺寸其實(shí)是不同的。為了方便前端落地，我們?cè)谳敵銮袌D文件時(shí)，要保持每一個(gè)圖標(biāo)文件的輸出尺寸是相同的。該怎么辦呢？
于是我們將一組圖標(biāo)都放置在一個(gè)比圖標(biāo)本身略大的相同尺寸容器中。而圖標(biāo)與這個(gè)容器之間的空白像素，正好也幫助我們規(guī)避了圖標(biāo)落地后，切圖邊緣像素可能被截?cái)嗟默F(xiàn)象發(fā)生，所以我們稱這個(gè)區(qū)域?yàn)椤赴踩吘唷埂?
對(duì)于安全邊距的規(guī)定：Material Design 全平臺(tái)規(guī)定圖標(biāo)的安全間距統(tǒng)一 2dp；iOS 則根據(jù)不同的圖標(biāo)使用場(chǎng)景給出的不同的圖標(biāo)網(wǎng)格和圖標(biāo)安全間距 2。
標(biāo)簽欄的圖標(biāo)一般分為靜態(tài)圖標(biāo)和動(dòng)態(tài)圖標(biāo)兩種。
靜態(tài)圖標(biāo)的實(shí)現(xiàn)方法相對(duì)容易，可以與前端溝通確定本次項(xiàng)目交付的標(biāo)簽欄圖標(biāo)文件是采用位圖還是矢量圖。如果是位圖建議交付 .png 格式文件；如果是矢量圖建議交付 .svg 格式文件。
使用位圖時(shí)請(qǐng)注意以下兩點(diǎn)：
不同項(xiàng)目環(huán)境輸出的切圖套數(shù)不同
請(qǐng)注意：這里我所提到的倍率全都是「絕對(duì)倍率」，這個(gè)概念非常關(guān)鍵。
「絕對(duì)倍率」指的是：以上所有的倍率都是針對(duì) @1x 設(shè)計(jì)稿下的輸出倍率尺寸。而當(dāng)你使用 @2x 作圖時(shí)，為了保證「絕對(duì)倍率」不變，你的切圖輸出倍率就應(yīng)該設(shè)置為 @0.5x/@1x/@1.5x 。
如果你在 @2x下作圖，卻依然保持輸出 @1x/@2x/@3x 的切圖，那你輸出的文件尺寸最終其實(shí)是 @2x/@4x/@6x。
有一點(diǎn)繞的話，我們以 Sketch 導(dǎo)出位圖切圖為例：
所以如果你日常使用的是 Sketch，也是用 Sketch 原生導(dǎo)出工具，那你的切圖預(yù)設(shè)應(yīng)該根據(jù)你的作圖尺寸而定，見下表：
如果你日常使用的是 PS，用 Cutterman 切圖，那么 Cutterman 會(huì)自動(dòng)識(shí)別你當(dāng)前的畫板，然后根據(jù)它的寬（橫屏情況下是高）來設(shè)定它的基準(zhǔn)分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖，其實(shí)都是「絕對(duì)倍率」，不用像 Sketch 當(dāng)中一樣換算。前提是「設(shè)置當(dāng)前畫布為：Auto（自動(dòng)識(shí)別）」。
假設(shè)你在 @2x 下作圖，執(zhí)意不管不顧「絕對(duì)倍率」，又忘了交代前端人員手動(dòng)處理切圖尺寸的話，那你所有的切圖尺寸實(shí)際都是設(shè)計(jì)稿所需圖標(biāo)尺寸的2倍。就算前端小哥幫你手動(dòng)處理了切圖尺寸，每一張切圖所包含的像素信息，都比項(xiàng)目真實(shí)所需的要多很多，完全就是在徒增所需切圖文件的大小。
注意切圖文件大小
切記，公司的線上項(xiàng)目中，用戶從服務(wù)器下載的每一單位的流量都是要公司花錢的，所以許多項(xiàng)目管理者都是很在意控制線上文件大小的。于是壓縮切圖是 UI 必備的技能之一。
雖然圖標(biāo)的文件大小一般只有幾 KB，但是項(xiàng)目大了難免積少成多，所以在真實(shí)項(xiàng)目中，不管任何切圖我都會(huì)手動(dòng)壓縮一次。
這里推薦一個(gè)壓縮 .png 文件大小，但幾乎不會(huì)產(chǎn)生失真的免費(fèi)網(wǎng)站 tinypng3（是我曾經(jīng)深愛的一位前端小哥推薦給我的，在此表示感謝）。
位圖切圖會(huì)面臨交付的倍率圖過多、容易失真、文件大小難控制等問題，但對(duì)于矢量圖，這些問題都得到了解決。目前.svg矢量圖落地也在項(xiàng)目中越來越流行了。UI 可以在 Sketch 或 Ai 中制作。
一般與前端人員對(duì)接有在線圖標(biāo)庫對(duì)接與本地文件對(duì)接兩種。
在線矢量圖標(biāo)庫有很多，國(guó)內(nèi)比較流行的是阿里巴巴矢量圖標(biāo)庫-iconfont?；本地對(duì)接就是直接將文件發(fā)送給前端人員，他們會(huì)自行進(jìn)行項(xiàng)目文件的管理與調(diào)用。
如果 .svg 切圖輸出后，與設(shè)計(jì)稿中樣式不符，請(qǐng)注意排查以下三點(diǎn)：
svg 不支持漸變顏色填充；
為了提升用戶體驗(yàn)和產(chǎn)品趣味性，動(dòng)效微交互的標(biāo)簽欄圖標(biāo)也越來越流行了。
動(dòng)效在前端落地的方法其實(shí)有很多：
所以綜上所述，落地標(biāo)簽欄動(dòng)態(tài)圖標(biāo)，目前最高效可行的還是 Lottie 動(dòng)畫。
Lottie 是 Airbnb 開源的一個(gè)跨平臺(tái)動(dòng)畫庫。表現(xiàn)層面它是一張圖片，但實(shí)現(xiàn)的方式是通過代碼，所以它是矢量的。很花式的動(dòng)畫也可以把文件大小做到非常小。
UI 與前端對(duì)接是通過交付一個(gè) json 代碼文件。
如果這是你第一次接觸 Lottie，再好不過的體驗(yàn)方法就是玩一玩阿里提供的一站式動(dòng)畫平臺(tái)：犸良動(dòng)畫 5。它最底層采用的技術(shù)就是 Lottie，只是被阿里二次封裝了許多預(yù)設(shè)的動(dòng)畫效果，你可以自定義其中的元素與參數(shù)，然后試著導(dǎo)出你的第一個(gè) json 文件。
接下來是簡(jiǎn)單粗暴的 UI 與前端對(duì)接實(shí)現(xiàn) Lottie 動(dòng)畫落地的全步驟參考。在此之前，想要全方位了解 Lottie 的相關(guān)信息，請(qǐng)參閱 Lottie 官方說明文檔 6。
步驟一：安裝 Ae 和 bodymovin
制作 Lottie 動(dòng)畫，首先你必需兩個(gè)工具：Ae 和 bodymovin 插件。
Ae 最低版本要求為 Ae CC2014。又因?yàn)閾?jù)很多設(shè)計(jì)師反饋，目前 bodymovin 在漢化后的 Ae 中使用會(huì)出現(xiàn)諸多問題，所以后面的教程都是基于 Ae 英文版。如果你漢化了Ae，最好在需要制作 Lottie 動(dòng)畫時(shí)取消漢化。
然后獲取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就適用于你當(dāng)前的項(xiàng)目，因?yàn)榍岸耸褂玫?bodymovin 解析包可能無法解析你用最新版 bodymovin 插件輸出的 json 文件。
一旦確定使用 Lottie，前端人員會(huì)在 GitHub 查詢 Lottie 相關(guān)文檔的，所以 UI 只需要配合前端確定一下合適的 bodymovin 插件版本就可以了。最終走查時(shí)，一定要確保當(dāng)前 bodymovin 輸出的動(dòng)畫在項(xiàng)目所需要運(yùn)行的所有環(huán)境中可運(yùn)行，才說明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。
獲取了 bodymovin 后，將 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 會(huì)自動(dòng)識(shí)別插件安裝到 Ae。
安裝完成后，就可以在 AE 的「窗口-擴(kuò)展」中看到 bodymovin 啦。
步驟二：將 Sketch 或 Ai 中的文件導(dǎo)入 Ae
如果你技術(shù)嫻熟，當(dāng)然也可以直接在 Ae 中繪制圖案動(dòng)畫。但如果你還是習(xí)慣先在其他軟件中繪制好基礎(chǔ)圖案，再到 Ae 中制作動(dòng)畫，那你需要了解如何將圖案導(dǎo)入 Ae。
Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作圖，可直接存儲(chǔ)為 .ai 文件，再在 Ae 中打開。
如果你使用的是 Sketch，可以先導(dǎo)出為 .svg，再用 Ai 打開該 .svg 文件，轉(zhuǎn)換存儲(chǔ)格式為 .ai，最后到 Ae 中打開。
當(dāng)然，Sketch 還有直接和 Ae 對(duì)接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同時(shí)安裝 AEUX 插件，Sketch 負(fù)責(zé)傳送，Ae 負(fù)責(zé)接收。具體的使用方法可以在官網(wǎng)教程中查看，我就不再贅述了。
步驟三：制作動(dòng)效并輸出
和靜態(tài)圖標(biāo)同理，為了保證落地時(shí)圖標(biāo)視覺大小一致，一組動(dòng)效圖標(biāo)輸出的文件尺寸應(yīng)該是相同的。所以在你制作動(dòng)畫之前需要確定合成文件的尺寸。Lottie 官方建議：因?yàn)?Lottie 輸出的是矢量動(dòng)畫，所以建議以 @1x 輸出動(dòng)效，前端人員在任何屏幕上放大并不會(huì)失真。
在制作之前請(qǐng)務(wù)必詳細(xì)閱讀 Lottie 所支持的 Ae 參數(shù)文檔10，以免辛苦做出的動(dòng)效，前端無法解析。特別提醒：原生環(huán)境中 bodymovin 是不支持解析 Ae 表達(dá)式的。
完成制作動(dòng)效后，就可以通過 bodymovin 導(dǎo)出動(dòng)效了。
步驟四：預(yù)覽與交付
導(dǎo)出完成后在你的目的地文件夾中將存在一個(gè) .json 文檔，如果你的動(dòng)效中還使用了位圖，系統(tǒng)還會(huì)自動(dòng)生成一個(gè) images 文件夾。這些都是你需要交付給與你對(duì)接的前端開發(fā)人員的文件。
.json 文件中記錄的動(dòng)效代碼 UI 不需要過多關(guān)心，但是其中兩個(gè)信息你是一定要了解的。它們是你與前端對(duì)接溝通和獲悉文件信息的一些關(guān)鍵參數(shù)。
UI 自檢動(dòng)效或其他相關(guān)人員需要預(yù)覽動(dòng)效的時(shí)候，可以用 LottieFiles11，拖入 .json 文件即可預(yù)覽。iOS 和 Android 還可以下載 LottieFiles APP，掃描預(yù)覽頁中的二維碼即可在移動(dòng)端預(yù)覽。
整個(gè)制作圖標(biāo)的流程我已經(jīng)全部整理出來了。首先要注意圖標(biāo)的規(guī)范，然后制作位圖、矢量、動(dòng)效圖標(biāo)時(shí)的注意點(diǎn)，我?guī)缀醢盐以谡鎸?shí)項(xiàng)目中踩過的坑都告訴大家了。剩下的創(chuàng)造性的環(huán)節(jié)就交給你了。
標(biāo)簽欄圖標(biāo)規(guī)范
靜態(tài)圖標(biāo)
1. 位圖圖標(biāo)
2. 矢量圖
動(dòng)態(tài)圖標(biāo)
1. Lottie的背景
2. Lottie如何上手
總結(jié)
文章來源：優(yōu)設(shè)網(wǎng) 作者：UCD耍家
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
圖標(biāo)在設(shè)計(jì)中是一個(gè)最為基礎(chǔ)的設(shè)計(jì)元素之一，對(duì)這部分知識(shí)花再多時(shí)間研究練習(xí)都是值得的，哪怕是工作多年的設(shè)計(jì)老手，也很難說自己把圖標(biāo)設(shè)計(jì)，做到出類拔萃了。所以不論是溫故知新又或是學(xué)習(xí)精進(jìn)，花上幾分鐘看看這篇超干的文章，定有收獲。
本文會(huì)著重介紹圖標(biāo)基礎(chǔ)規(guī)則，深入探討圖標(biāo)的視覺重量和對(duì)齊問題。
一個(gè)界面中的圖標(biāo)通?？梢越频乜闯墒且恍┗拘蔚慕M合：橫向矩形、縱向矩形、傾斜矩形、圓形、三角形、正方形。模糊地看它們有相同的視覺重量，因?yàn)樗鼈兓蚨嗷蛏俚淖兂闪讼嗤陌唿c(diǎn)。
△ 圖標(biāo)的基本輪廓
根據(jù)圖標(biāo)的形狀，將其嵌入到對(duì)應(yīng)柵格中。例如，方形圖標(biāo)比三角形或細(xì)長(zhǎng)的圖標(biāo)更緊湊些。
△ 圖標(biāo)在柵格中
△ 柵格中的基本圖形
圖標(biāo)越緊湊，需要的空間就越少。圖標(biāo)銳利的邊緣或小細(xì)節(jié)越多，它在畫板上占據(jù)的空間就越大。
△ 圖標(biāo)示例，柵格中可以放不同異形的圖標(biāo)
△ 柵格中放更多細(xì)節(jié)的基本圖形：方形，圓形，三角形
當(dāng)心成為柵格的奴隸，柵格是用來輔助你而不是去限制你的。如果一個(gè)圖標(biāo)因?yàn)橐恍┩怀龅脑囟谝曈X上有更好的效果，那就讓它們突出。
為了使圖標(biāo)在非視網(wǎng)膜屏幕上清晰可見，請(qǐng)堅(jiān)持使用像素網(wǎng)格并在線性圖標(biāo)上優(yōu)先使用2px粗細(xì)的描邊。2px居中對(duì)齊的描邊通常會(huì)提供足夠的粗細(xì)和清晰的輪廓
△ 2像素線型圖標(biāo)示例
△ 2像素線型圖標(biāo)示例
如果圖標(biāo)選擇了1px的描邊，則應(yīng)該使用內(nèi)描邊或外描邊而不是居中的。
△ 1像素外描邊圖標(biāo)示例
△ 1像素外描邊圖標(biāo)示例
1px的居中描邊會(huì)使圖標(biāo)在放大到100%的情況下變的模糊，但如果放的更大會(huì)顯的清晰。
△ 1像素居中描邊線型圖標(biāo)示例
△ 1像素居中描邊線型圖標(biāo)示例
根據(jù)像素網(wǎng)格去設(shè)置斜線的起點(diǎn)和終點(diǎn)。當(dāng)斜線的角度為45°，30°和60°時(shí)會(huì)比不規(guī)則角度（像13.7°或81°）更清晰。如今仍有數(shù)百萬人在使用低分辨率的屏幕設(shè)備，這就是為什么圖標(biāo)的清晰度仍然很重要的原因。
△ 矢量和位圖圖標(biāo)示例
最好從復(fù)雜的圖標(biāo)開始去創(chuàng)建一個(gè)圖標(biāo)集。它將定義詳細(xì)程度，并且對(duì)設(shè)計(jì)具有相同視覺重量的圖標(biāo)們有幫助。
△ 不同細(xì)節(jié)程度的圖標(biāo)示例
當(dāng)圖標(biāo)的細(xì)節(jié)程度不一樣時(shí)，細(xì)節(jié)越多的圖標(biāo)越能吸引用戶的注意力，并且看起來視覺重量越大。
△ 細(xì)節(jié)不一致
在整個(gè)圖標(biāo)集中，圖標(biāo)內(nèi)部相鄰元素的間距不應(yīng)太小或不一致。定義最小間距并在各處以同樣的方式使用，以避免輪廓「粘連」。
△ 不一致的間隙
△ 間隙統(tǒng)一
對(duì)于線型圖標(biāo)，最好使最小間距和線條的粗細(xì)相等。線條要么清晰地分開，要么精確地連在一起，永遠(yuǎn)不要含糊不清。
△ 不一致的間隙
△ 間隙統(tǒng)一
在圖標(biāo)集中，可能會(huì)有些重復(fù)的細(xì)節(jié)。刪掉它們，讓用戶的注意力集中在它們不同的地方，就像是數(shù)學(xué)里分?jǐn)?shù)要約分（化簡(jiǎn)分?jǐn)?shù)）一樣。你看到的視覺干擾越少，你對(duì)它的理解就越清晰。
如果目標(biāo)用戶已經(jīng)明白他或她使用的是什么，那就沒必要一遍遍的重復(fù)。例如：避免使用基于信封的圖標(biāo)不會(huì)讓人覺得這不是一個(gè)郵箱類app。（有點(diǎn)繞口，意思是：不用添加相關(guān)系列類的輔助圖標(biāo)也會(huì)讓人知道這是一個(gè)郵箱類app）
這條規(guī)則也適用于圖標(biāo)周圍的裝飾（框架，背景）。如果這些對(duì)圖標(biāo)的識(shí)別性沒幫助，則它們就會(huì)對(duì)圖標(biāo)識(shí)別產(chǎn)生阻礙。
不要將不同樣式，不同角度地元素混合在同一個(gè)圖標(biāo)集中。一致的風(fēng)格會(huì)對(duì)用戶識(shí)別圖標(biāo)有所幫助并讓用戶明白這些圖標(biāo)有同等的重要性和狀態(tài)。
△ 同一緯度的圖標(biāo)
△ 不同維度的圖標(biāo)
同樣的原理也適用于線型圖標(biāo)和面型圖標(biāo)。如果你把它們混在一起，人們可能會(huì)認(rèn)為它們有不同的重要性或狀態(tài)。當(dāng)然，除非你是故意的。例如，面型圖標(biāo)用于關(guān)鍵的指令，線型圖標(biāo)用于其他的指令。
△ 一組一致性圖標(biāo)
△ 一組不一致的圖標(biāo)
在界面中擁有兩種不同的圖標(biāo)是很好的。線型圖標(biāo)用作不可點(diǎn)擊或正常狀態(tài)，面型圖標(biāo)用于點(diǎn)擊狀態(tài)。
8px網(wǎng)格和12列布局常用于許多界面，與基于十進(jìn)制的尺寸相比更加靈活。12可以被2、3、4、6整除。因此24或48px的圖標(biāo)已成為了標(biāo)準(zhǔn)。如果需要更大的尺寸，可以對(duì)他們進(jìn)行縮放。
完美主義不是我們的目標(biāo)：沒有人需要為了像素完美而去追求完美的線條。但是，這對(duì)于產(chǎn)品中最終呈現(xiàn)正確而不失真的圖標(biāo)是很重要的。記住圖形中錨點(diǎn)數(shù)量達(dá)到最少并且相鄰元素之間不要有間隙。
△ 矢量圖標(biāo)的調(diào)整與優(yōu)化
還有那些煩人的「8.999px」或「100.001px」呢？如果錨點(diǎn)的位置很準(zhǔn)確，圖標(biāo)的邊緣看起來就會(huì)很清晰。此外，在合并形狀時(shí)，也不會(huì)有出現(xiàn)多余錨點(diǎn)和間隙的風(fēng)險(xiǎn)。
△ 矢量圖標(biāo)的調(diào)整與優(yōu)化
許多設(shè)計(jì)軟件（例如sketch）生成的svg文件都帶有不必要的文件——多余的編組，顏色圖層和剪切蒙版。讓我們看看，在sketch中，一切看起來似乎都不錯(cuò)。
△ sketch中的圖標(biāo)示例
在其它軟件中打開這個(gè)SVG文件（例如Ai中），你會(huì)看到很多空?qǐng)D層，不必要的編組，有時(shí)還會(huì)有剪切蒙版。當(dāng)前端開發(fā)人員將圖標(biāo)轉(zhuǎn)換成圖標(biāo)字體或在網(wǎng)頁上使用SVG文件的時(shí)候，這些都可能導(dǎo)致出現(xiàn)問題。
△ Ai中的圖標(biāo)示例
你可以刪除這些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator編輯后生成的SVG文件（picture_new.svg）在文件查看器中預(yù)覽的效果不一樣。順便說下，也可以在代碼編輯器中刪除這些垃圾圖層。如果你知道SVG代碼的樣子，可以嘗試下直接刪除不必要的數(shù)據(jù)字符串。
當(dāng)然，這些建議并不是不可打破的規(guī)則。如果你知道自己在做什么，請(qǐng)隨時(shí)跳過它們。在我看來至少在兩種情況下嚴(yán)肅的幾何圖標(biāo)不是最好的選擇。
空狀態(tài)。如果你正在設(shè)計(jì)一個(gè)頁面的空狀態(tài)（缺省頁）如「沒有任務(wù)了」或「所有郵件已讀」，那么最好是用情感化的圖標(biāo)來表現(xiàn)或者只用文字去說明。情感化圖標(biāo)會(huì)使用戶感到快樂，而沒有情感的幾何圖標(biāo)不會(huì)增加任何交互價(jià)值。
吉祥物和插圖。如果屏幕上你的界面中有吉祥物或者插圖，這種圖案應(yīng)該是感性的。我不知道設(shè)計(jì)師是如何通過有限的形狀選擇和堅(jiān)持使用網(wǎng)格去刻畫一個(gè)角色的。
還有一件事。在一些特殊情況下最好問問自己是否真的需要圖標(biāo)。這是解決問題的最好方式嗎？寫點(diǎn)有意義的文字呢？要注意使用時(shí)的平衡，否則，可愛、時(shí)髦的圖標(biāo)將會(huì)讓人感到沮喪，所有的努力都將是徒勞的。
文章來源：優(yōu)設(shè)網(wǎng) 作者：彩云譯設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
最近發(fā)現(xiàn)一些能提高圖標(biāo)細(xì)節(jié)和高級(jí)感的小技巧，今天與大家分享下這幾種風(fēng)格的設(shè)計(jì)思路，以及需要注意的點(diǎn)。
分享大綱：
顧名思義圖標(biāo)之間有縱深前后關(guān)系，通過這樣去處理，可以讓圖標(biāo)層次豐富，增加設(shè)計(jì)細(xì)節(jié)，打破枯燥無味的單色扁平圖標(biāo)。
通常大部分人設(shè)計(jì)一個(gè)圖標(biāo)就直接將圖形畫出來后，這樣就完事了，沒有繼續(xù)深入下去。這樣圖標(biāo)看著枯燥乏味，普通了一些。
如上圖，將圖標(biāo)在接口處進(jìn)行細(xì)節(jié)弱透明度處理，那么效果就完全不一樣了。
這里需要注意，一般都是在圖標(biāo)的接口處進(jìn)行層疊處理，從A到B的一個(gè)線性漸變。
下面來看看案例：
△ Atlassian的品牌圖標(biāo)系統(tǒng)
使用建議：運(yùn)用在面形圖標(biāo)效果會(huì)更好些，或者線條粗一些的圖標(biāo)，一般運(yùn)用在TabBar上面居多。
這種比較好用，將圖標(biāo)進(jìn)行抽象放大化處理，變成一種圖形方式。一般運(yùn)用在卡片設(shè)計(jì)上面居多。
左側(cè)卡片上面，圖標(biāo)直接使用描邊效果?？ㄆ锩骐m然加了一些底紋圖形，但是整體效果略顯平庸了一些 。
重新將圖標(biāo)進(jìn)行圖形化處理，既能夠表達(dá)當(dāng)前含義，同時(shí)設(shè)計(jì)上細(xì)節(jié)和品質(zhì)感有所提升。
其他思路延展示例：
當(dāng)然還有一種類似的思路，可以將圖標(biāo)進(jìn)行放大化，并進(jìn)行色彩分割處理為背景，前景放圖標(biāo)和文案等。
如圖，我將前面兩個(gè)思路綜合運(yùn)用，圖形化背景和層疊圖標(biāo)。這里的圖形希望大家不要亂用，盡量使用圖標(biāo)的圖形來演變。
圖標(biāo)通過弱漸變透明處理，其思路有點(diǎn)類似第一個(gè)。但是這個(gè)方法圖標(biāo)整體帶透明度的范圍更大。
先來直接看個(gè)案例：
這種圖標(biāo)給人比較新穎的時(shí)尚感，層次也豐富。
如何處理這種圖標(biāo)？
非常重要的一點(diǎn)，需要注意不識(shí)別度問題。如左側(cè)圖，圖標(biāo)和背景之間幾乎融為一體，看不清主體元素。右側(cè)處理剛好，能夠識(shí)別出圖標(biāo)含義。
處理時(shí)候一定要注意透明度的關(guān)系，當(dāng)然也與卡片背景色有關(guān)系。
關(guān)于圖標(biāo)設(shè)計(jì)三個(gè)小技巧，可多看幾遍，思路比較簡(jiǎn)單直接。當(dāng)然最重要的是靈活運(yùn)用，也可以將三個(gè)思路都融合起來去設(shè)計(jì)圖標(biāo)。
本文只是拋磚引玉，這些圖標(biāo)處理的技法，并不是能適用所有場(chǎng)景。大家還是需要根據(jù)自己產(chǎn)品特征，找到合適的突破點(diǎn)去設(shè)計(jì)。
文章來源：優(yōu)設(shè)網(wǎng) 作者：功夫UX
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
圖標(biāo)是 UI 設(shè)計(jì)中最基礎(chǔ)也是很重要的部分，輔助人們更好的理解功能內(nèi)容。隨著扁平化設(shè)計(jì)風(fēng)格的普及，圖標(biāo)的風(fēng)格越來越簡(jiǎn)約，看似簡(jiǎn)單的圖形，實(shí)際要準(zhǔn)確的表達(dá)含義，也是需要注意一些方法的。以下是圖標(biāo)設(shè)計(jì)技巧的分享內(nèi)容：
設(shè)計(jì)圖標(biāo)是一個(gè)藝術(shù)創(chuàng)作的過程，里面也有很多需要被關(guān)注而不可忽視技巧。要知道如何設(shè)計(jì)好圖標(biāo)，是對(duì)于 UI 設(shè)計(jì)師來說是不可或缺的重要技能。
在我設(shè)計(jì)圖標(biāo)的時(shí)候，我個(gè)人認(rèn)為有以下7個(gè)規(guī)則：
一個(gè)圖標(biāo)一個(gè)非寫實(shí)的表現(xiàn)。不需要擔(dān)心圖標(biāo)不夠真實(shí)，消除不必要的細(xì)節(jié)，用基本的形狀只保留最基礎(chǔ)的部分，讓這個(gè)圖標(biāo)更容易被理解。
有時(shí)候圖標(biāo)會(huì)因?yàn)橛懈嗉?xì)節(jié)而傳達(dá)了更復(fù)雜的意思，這反而是樣式問題！
在整個(gè)圖標(biāo)系統(tǒng)中，你的圖標(biāo)要保持同一種樣式來確保圖標(biāo)完美協(xié)調(diào)。比如同樣的形狀，填充，描邊粗細(xì)，尺寸等。要制定好可以被復(fù)用的柵格，規(guī)范和樣式。
如果可以的話，盡可能重新設(shè)計(jì)這些圖標(biāo)，而不要混入其他不同風(fēng)格的圖標(biāo)來使用。
設(shè)計(jì)「完美像素」的圖標(biāo)，特別是在圖標(biāo)非常小的時(shí)候。這樣圖標(biāo)的描邊就可以保持銳利，不會(huì)有模糊。注意半像素的情況出現(xiàn)，盡量避免小數(shù)點(diǎn)參數(shù)。
這也可以幫你保持圖標(biāo)的辨識(shí)度，在你等比縮放他們的時(shí)候保持清晰。
確保你的圖標(biāo)的所有形狀有足夠的空間。筆畫和空間過于狹小會(huì)使圖標(biāo)更難被理解。
最少給2px的負(fù)空間
確保你的圖標(biāo)看起來是正確的，適當(dāng)?shù)恼{(diào)整元素的對(duì)齊來達(dá)到視覺上的平衡。
不要只關(guān)注參數(shù)，如果有需要就用上你的眼睛來衡量，輕微移動(dòng)這些元素。
所有圖標(biāo)保持同樣的尺寸，在圖標(biāo)周圍定義一個(gè)可調(diào)整的內(nèi)邊距范圍，盡量讓元素設(shè)計(jì)在這個(gè)范圍內(nèi)。不要擠滿所有元素。
當(dāng)圖標(biāo)需要額外控件時(shí)可以超出這個(gè)內(nèi)邊距范圍。
在設(shè)計(jì)階段，你的圖標(biāo)可能看起來是完美的，但還是需要將圖標(biāo)放到實(shí)際的界面環(huán)境中，測(cè)試他們是不是完美，有沒有可以調(diào)整的細(xì)節(jié)問題。
確保每個(gè)新增的圖標(biāo)和其他圖標(biāo)顯示一致。
你在設(shè)計(jì)圖標(biāo)過程中，有用到以上的這些技巧嗎？可以在評(píng)論區(qū)告訴我，你是怎么怎么設(shè)計(jì)圖標(biāo)的。
文章來源：優(yōu)設(shè)網(wǎng) 作者：布萊恩臣
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
今天還是一篇非常干貨的原創(chuàng)文章。
內(nèi)容分為兩點(diǎn)：
圖標(biāo)的基礎(chǔ)特征
動(dòng)手設(shè)計(jì)之前，咱們先對(duì)完整的圖標(biāo)集進(jìn)行分析。
弄明白在畫整體的系統(tǒng)圖標(biāo)集合時(shí)，各個(gè)圖標(biāo)得具備哪些特征，有哪些切入點(diǎn)，可以作為我們?cè)趯?shí)際繪制時(shí)候的依據(jù)。
先來看幾組 iconfont 的案例，看不太清的同學(xué)可以戳圖片放大。
圍繞上面這些案例，咱們可以歸納出圖標(biāo)的幾點(diǎn)設(shè)計(jì)原則。比如：
1. 設(shè)計(jì)圖標(biāo)需要考慮延續(xù)性，圖標(biāo)之間互相牽連影響
圖標(biāo)幾乎不會(huì)以單個(gè)的形式出現(xiàn)，大多數(shù)都是以組歸類。符號(hào)整體性與統(tǒng)一性，都是依靠單個(gè) icon 的共性特征建立起來的。
比如 iconfont 中的這組icon，圖標(biāo)圓形的外輪廓，就保持了一致。其次用戶頭像的代表符號(hào)，也很好保持了延續(xù)性。
正是這種小特征，共同組成了圖標(biāo)庫的整體特征。
2. 設(shè)計(jì)手法趨同、圖形內(nèi)容差異
第二點(diǎn)好理解，設(shè)計(jì)風(fēng)格、手法要素需要統(tǒng)一，但是內(nèi)容傳達(dá)的差異必須要拉開，避免圖形趨同導(dǎo)致功能混淆。
比如下面兩個(gè)案例，由于過于相近，導(dǎo)致用戶很難理解圖標(biāo)含義，是天氣，還是設(shè)置按鈕，這種情況我們?cè)谠O(shè)計(jì)時(shí)需要極力避免。
總結(jié)來說，就是圖標(biāo)的共性往往體現(xiàn)在設(shè)計(jì)手法上，比如顏色、形狀粗細(xì)、細(xì)節(jié)的一致性，這些都是設(shè)計(jì)風(fēng)格的統(tǒng)一。
而圖標(biāo)的特性，往往體現(xiàn)在形狀內(nèi)容差異，形狀會(huì)決定圖標(biāo)的信息傳遞含義。所以共性要趨同，特性要拉開，這個(gè)是設(shè)計(jì)圖標(biāo)集的基本原則。
3. 功能大于形式，圖形能理解的情況下樣式越簡(jiǎn)潔越好
不知道大家是否關(guān)注，曾經(jīng)在設(shè)計(jì)圈風(fēng)靡一時(shí)的MEB圖標(biāo)風(fēng)格，產(chǎn)品圈卻非常冷門，幾乎沒有產(chǎn)品在繼續(xù)用這種風(fēng)格作為功能性質(zhì)圖標(biāo)。
△ 該作品來自于網(wǎng)絡(luò)圖片，僅作交流使用
因?yàn)殡m然圖標(biāo)增加了小裝飾后，顯得有趣精致，但其實(shí)也增加了圖標(biāo)的識(shí)別難度以及識(shí)別效率，反而背離了圖標(biāo)的設(shè)計(jì)初衷。
所以對(duì)于系統(tǒng)功能圖標(biāo)而言，必要的簡(jiǎn)潔性，高效的識(shí)別率，才是關(guān)鍵。
圖標(biāo)的設(shè)計(jì)約束性
聊完了設(shè)計(jì)主張及基本的特征。接下來咱們開始剖析圖標(biāo)的設(shè)計(jì)細(xì)節(jié)，包括分析制定圖標(biāo)的系統(tǒng)設(shè)計(jì)規(guī)范，應(yīng)該從哪些方面入手。
規(guī)范的第一點(diǎn)，就是圖標(biāo)的基礎(chǔ)形狀比例。這個(gè)比例，主要是約束長(zhǎng)與寬，共包含了四個(gè)關(guān)系，分別為「正方形 : 橫矩形 ：豎矩形 ：圓形」
這四個(gè)關(guān)系的約束，會(huì)讓圖標(biāo)集里的所有圖標(biāo)大小，看起來是一致的、統(tǒng)一的。橫矩形、豎矩形這兩個(gè)比例，會(huì)決定整套圖標(biāo)的飽滿程度，橫豎比例越一致，圖標(biāo)整體越飽滿。
這點(diǎn)大家可以自己斟酌，如果是泛娛樂型的產(chǎn)品，icon可以更飽滿一些。如果是偏工具化產(chǎn)品，那么還是可以優(yōu)先保障圖標(biāo)的識(shí)別度，飽滿程度倒是其次。
圓潤(rùn)飽滿型：
剛正工具型：
定了比例后，接下里就是對(duì)圖標(biāo)的細(xì)節(jié)刻畫。對(duì)于線性圖標(biāo)而言，最重要的細(xì)節(jié)就是線條粗細(xì)；對(duì)于面性圖標(biāo)而言，最重要的就是正負(fù)形之間的間距。
所以這些核心元素，在圖標(biāo)的核心線條、核心區(qū)域部分，間距樣式都應(yīng)當(dāng)保持統(tǒng)一。
通常在移動(dòng)端@2x內(nèi)，主流icon的粗細(xì)為3px，而4px大多數(shù)都是為功能性導(dǎo)航icon，細(xì)一點(diǎn)的圖標(biāo)通?？雌饋頃?huì)更精致一些。
當(dāng)然也有部分產(chǎn)品使用的是2px，比如新版的YouTube，其次還有些較為復(fù)雜的icon，單根粗細(xì)的線段不一定能滿足其需求，所以還需要制定一條副線的粗細(xì)。
細(xì)節(jié)可以根據(jù)產(chǎn)品的調(diào)性來定，統(tǒng)一即可。
大比例跟基本元素確定后，也可以制定一些圖標(biāo)的個(gè)性化元素規(guī)范，比如圖標(biāo)的圓角大小、角度位置，等一些特殊的樣式。
像這些個(gè)性化的規(guī)范，顆粒度可以Case By Case來定義，圓潤(rùn)還是方正，可以根據(jù)產(chǎn)品的視覺風(fēng)格來定義就好。
這些規(guī)范樣式定好，就可以充分的讓圖標(biāo)集內(nèi)的圖標(biāo)，從設(shè)計(jì)上是保持一致的，且具有特色感。
上面講了關(guān)于圖標(biāo)的分析及規(guī)范。為了方便大家掌握，接下來咱們就來講講，具體動(dòng)手做，流程是什么樣的。這里我給個(gè)我的步驟作為參考：
第一步：繪制好圖標(biāo)基本網(wǎng)格
第一步，當(dāng)然是確定好圖標(biāo)icon的大小，以及上面我提到的基本尺寸比例，四個(gè)關(guān)系「正方形 : 橫矩形 ：豎矩形 ：圓形」的約束，構(gòu)建好基本骨骼。
我這里以圖標(biāo)容器大小為 56×56，預(yù)留8px安全間距，圖標(biāo)最大大小為 48×48。
由于視差關(guān)系，圓形在圖標(biāo)里面的尺寸是最大的，所以圓形的大小為48×48。因?yàn)槲蚁雸D標(biāo)飽滿一些，所以正方形的大小我兩邊各減去2，為42×42。
然后再繪制出橫矩形（48×36）與豎矩形（36×48），各線段之間的間距保持一致。
然后各個(gè)形狀居中對(duì)齊，這樣四個(gè)關(guān)系「正方形 : 橫矩形 ：豎矩形 ：圓形」定好后，基本的容器就制定好啦。
第二步：設(shè)定圖標(biāo)基本規(guī)范
接著制定好圖標(biāo)的基本規(guī)范，為了方便大家看得清，我這里設(shè)定圖標(biāo)的線條粗細(xì)為3px，圓角為6px，干凈簡(jiǎn)潔一些，讓它看起來更飽滿。
角度、斷點(diǎn)啥的，我這里就不定義了，因?yàn)橹皇鞘纠o大家看，講一下流程，所以盡可能簡(jiǎn)單一些。大家在做練習(xí)的時(shí)候，也可以嘗試自己去定義一下。
第三步：繪制圖標(biāo)
好了后就可以開始繪制圖標(biāo)啦。我這里分別繪制十五個(gè)，作為示例
然后就是使用路徑工具，根據(jù)創(chuàng)意去繪制完善圖標(biāo)了。繪制的過程中，也可以不斷調(diào)整，讓圖標(biāo)看起來更協(xié)調(diào)，更飽滿，更容易識(shí)別。
花了十五分鐘左右，簡(jiǎn)單的十五個(gè)圖標(biāo)草稿就畫好了，接下來咱們開始調(diào)整細(xì)節(jié)。
第四步：整體性調(diào)整
所有的圖標(biāo)繪制好了后，咱們就可以整體性的開始打磨細(xì)節(jié)，把圖標(biāo)形狀的一些折角處、大小樣式調(diào)整一致，讓圖標(biāo)的節(jié)奏更清晰，整體樣式更統(tǒng)一。
這樣一組精致的系統(tǒng)icon就繪制好啦。
接著咱們也可以加點(diǎn)特色風(fēng)格進(jìn)行嘗試，比如填充一個(gè)顏色。
當(dāng)然細(xì)看的話，圖標(biāo)部分細(xì)節(jié)還是有點(diǎn)糙，其實(shí)還可以再調(diào)調(diào)，但這個(gè)主要做示例用，大家自己在做練習(xí)的時(shí)候，可別像我一樣偷懶嗷
上面講了很多方法經(jīng)驗(yàn)，文末給大家來點(diǎn)實(shí)際的。
我珍藏了很多較為不錯(cuò)的大廠圖標(biāo)集合庫，日常在畫圖標(biāo)沒靈感的時(shí)候，就會(huì)打開看看這些，參考一下。
文件都是矢量格式的，編輯方便，還很全面。今天拿出來送大家白嫖了
文章來源：優(yōu)設(shè)網(wǎng) 作者：UX小學(xué)
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
最近遇到一個(gè)同學(xué)，說做了很多稿圖標(biāo)的方案最終還是沒有確定下來，但眼看著產(chǎn)品馬上就要上線了，該怎么辦。經(jīng)過一輪溝通，發(fā)現(xiàn)他陷入幾個(gè)新手設(shè)計(jì)師在畫圖標(biāo)比較容易犯的問題：
從以上這幾個(gè)問題，我們進(jìn)行深入思考，會(huì)發(fā)現(xiàn)其實(shí)這些只是表面上的問題，實(shí)際上是在說什么呢？
基于以上這個(gè)案例，分享下我在日常設(shè)計(jì)中常用的一些方法，希望可以幫助遇到相同問題的小伙伴們進(jìn)行一些答疑，從而幫助你們打破壁壘，高效成長(zhǎng)。
下面發(fā)改分成 3 個(gè)部分來進(jìn)行闡述：思考維度的鍛煉；圖形的設(shè)計(jì)方法；系統(tǒng)化方案呈現(xiàn)
當(dāng)我們要設(shè)計(jì)一個(gè)圖標(biāo)的時(shí)候最容易入手的就是圖標(biāo)的表意，從表意延伸到圖形的設(shè)計(jì)，然后再加以不同的設(shè)計(jì)手法（線、面、線面等等）。
1. 圖標(biāo)的表意
圖標(biāo)的表意方式，大概可以拆分為以下幾種：具有普識(shí)性的圖標(biāo)、可進(jìn)行表意延伸的圖標(biāo)、通過組合的圖標(biāo)、抽象的需要關(guān)聯(lián)的圖標(biāo)。
2. 普識(shí)型圖標(biāo)
即我們?cè)诂F(xiàn)實(shí)生活中常見且具有常識(shí)性性的圖標(biāo)，例如：刪除、添加、放大、搜索、筆記本、手機(jī)、眼睛、禮物等等。這類的圖標(biāo)重點(diǎn)在于形體的打磨上需要多花一些時(shí)間，從不同的角度進(jìn)行嘗試，比如以刪除為例子，同樣的造型但可以有不同的設(shè)計(jì)表現(xiàn)。
3. 表意延伸的圖標(biāo)
即一個(gè)事物可以被延伸為一個(gè)或者多個(gè)圖形表現(xiàn)的圖標(biāo)，例如：點(diǎn)贊、瀏覽、設(shè)置、收藏、評(píng)論、事件等等。例如點(diǎn)贊-延伸為你很棒用大拇指來表達(dá)，游戲延伸為游戲手柄、設(shè)置-延伸為機(jī)械操作用齒輪來表達(dá)，評(píng)論延伸為對(duì)話使用對(duì)話框來表達(dá)，瀏覽-延伸為用眼睛的圖標(biāo)表達(dá)。
除此之外延伸表意的圖標(biāo)可以有多種設(shè)計(jì)方式，例如以事件為案例。
4. 組合型圖標(biāo)
主要是指該類圖標(biāo)的表意需要通過 2 個(gè)以上的圖形進(jìn)行組合才能更加準(zhǔn)確進(jìn)行表現(xiàn)，例如：群、群聊、好友、添加聯(lián)系人、情侶、轉(zhuǎn)賬、紅包。
5. 創(chuàng)造類圖標(biāo)
特指認(rèn)識(shí)中沒有，因?yàn)楫a(chǎn)品需要被二次創(chuàng)造出來的圖標(biāo)，一般在一些新生業(yè)務(wù)中會(huì)常出現(xiàn)，這類圖標(biāo)初期往往需要伴隨文字一同出現(xiàn)。例如：微信的朋友圈、視頻號(hào)、小程序、手機(jī)系統(tǒng)的 Wi-Fi、藍(lán)牙等類型等圖標(biāo)。
常規(guī)的圖標(biāo)表現(xiàn)方法（線形、線面、面形、插圖、疊色等等）我們基本都了解，但作為設(shè)計(jì)師更應(yīng)該知道潮流趨勢(shì)，清楚現(xiàn)在流行什么類型的設(shè)計(jì)，這樣才能讓你作出更加出彩的設(shè)計(jì)。
這里分享幾種目前最流行的圖標(biāo)設(shè)計(jì)類型：
1. 磨砂質(zhì)感圖標(biāo)
磨砂質(zhì)感圖標(biāo)作為 2020 年底最流行的圖標(biāo)，已經(jīng)在不少 APP 中看得了相關(guān)的設(shè)計(jì)，從設(shè)計(jì)方法上并不難，重點(diǎn)還是在于是否有需要和應(yīng)用場(chǎng)景。
2. 插圖+磨砂質(zhì)感
圖標(biāo)使用小插圖的方式進(jìn)行繪制，然后再結(jié)合高斯模糊的視覺表現(xiàn)手法，整體讓圖標(biāo)更具有層次感和通透感。
3. 3D 質(zhì)感圖標(biāo)
3D 作為這 2 年最流行的設(shè)計(jì)趨勢(shì)，自然也牽動(dòng)著設(shè)計(jì)師的心。但 3D 的打磨相對(duì)會(huì)比較耗費(fèi)時(shí)間，不過仍然是值得一試的設(shè)計(jì)方式之一，目前在 APP 的設(shè)計(jì)中比較少見到應(yīng)用，或許會(huì)成為 2021 的趨勢(shì)之一。
4. 3D 磨砂質(zhì)感圖標(biāo)
基于 3D 與毛玻璃圖標(biāo)的結(jié)合，整體的表現(xiàn)結(jié)合了這 2 種風(fēng)格的特點(diǎn)，既保留了毛玻璃圖標(biāo)的通透，同時(shí)也具有 3D 的空間感。
5. 流光溢彩的圖標(biāo)
算是屬于漸變類型的一種，但顏色和細(xì)節(jié)的跨度相比常規(guī)的漸變圖標(biāo)更加豐富，整體讓人感覺具有流光的效果，更加具有未來感。不過從目前來說，更適合作為獨(dú)立的應(yīng)用 APP 設(shè)計(jì)，作為常規(guī)的圖標(biāo)設(shè)計(jì)需要一定的接受度。
想要了解設(shè)計(jì)的方法之前，我們得了解有哪些類型的圖標(biāo)，具體大家可以查看我之前撰寫過的文章，里面有詳細(xì)的分析了圖標(biāo)的設(shè)計(jì)類型。除此之外，這里還可以分享下我日常中設(shè)計(jì)圖標(biāo)使用的方法。
這個(gè)專題也有超詳細(xì)的分類和教程 → https://www.uisdc.com/zt/icon-drawing-guide
1. 表意+基礎(chǔ)形
基礎(chǔ)形體使用普適性較高的圖標(biāo)造型，在圖標(biāo)的亮點(diǎn)或者點(diǎn)綴處通過表意關(guān)聯(lián)進(jìn)行創(chuàng)意設(shè)計(jì)，從而讓圖標(biāo)獲得新的感受，但又具有較高的識(shí)別性。案例：例如我們以日歷圖標(biāo)為案例，可以比較直觀的使用日歷的普識(shí)圖形，然后通過日期的方式來進(jìn)行強(qiáng)調(diào)賦予圖標(biāo)生命力，然后再疊加上顏色和質(zhì)感，并且增加一點(diǎn)小趣味的折角設(shè)計(jì)。
2. 關(guān)聯(lián)延展
基于實(shí)際場(chǎng)景的認(rèn)識(shí)來進(jìn)行圖形關(guān)聯(lián)延展，并且進(jìn)行一定的美感升級(jí)及圖形的優(yōu)化，延展出最終的圖標(biāo)設(shè)計(jì)，這種方法可以大大提高大家對(duì)于圖標(biāo)的識(shí)別度。案例：設(shè)計(jì)一個(gè)快速聊天表意的圖標(biāo)，聊天我們常規(guī)使用氣泡，快速我們可以關(guān)聯(lián)為閃電，然后把氣泡和閃電進(jìn)行結(jié)合。
3. 組合升級(jí)創(chuàng)意
利用一些正負(fù)形的創(chuàng)意方法，使用 A、B 圖形的進(jìn)行有機(jī)融合或剪切，使其獲得新的圖標(biāo)造型，讓整體的圖標(biāo)感受更具有創(chuàng)意點(diǎn)。案例：例如我們嘗試畫一個(gè)具有宇宙感受的游戲圖標(biāo)，可以通過手柄和星球的有機(jī)結(jié)合讓整體的圖標(biāo)帶有游戲和星球的意思，整體提升了表達(dá)的創(chuàng)意。
方案的呈現(xiàn)屬于設(shè)計(jì)的一部分，雖然不能起到?jīng)Q定性的作用，但好的呈現(xiàn)效果往往可以幫助我們得到更好的印象分，這里分享一下我在設(shè)計(jì)過程中嘗試的一些方法。方案的大小或者輸出的類型也決定著我們呈現(xiàn)方案的類型，下面根據(jù)不同的類型分享不同的呈現(xiàn)案例。
1. 縱橫對(duì)比法
適用于需要大量嘗試的時(shí)候，以窮舉輸出為典型案例，我們可以用最基礎(chǔ)的圖形為中心點(diǎn)，結(jié)合圖形的表意和圖形風(fēng)格進(jìn)行縱橫的發(fā)散性擴(kuò)展，例如橫向?yàn)楸硪?、縱向?yàn)閳D形風(fēng)格，中間部分屬于交叉部分。
案例模版
2. 單個(gè)圖標(biāo)創(chuàng)意思考
對(duì)于一些標(biāo)志類或重要的圖標(biāo)，我們需要闡述我們的設(shè)計(jì)想法或者來源，這種呈現(xiàn)的方式就可以很直觀且簡(jiǎn)潔的表現(xiàn)我們的思考。
案例模版
3. 整套輸出
對(duì)于一整套的圖標(biāo)，我們需要在案例上呈現(xiàn)圖形的設(shè)計(jì)規(guī)則，包括但不限于有：圓角、角度、組合規(guī)范、斜度等等。除了呈現(xiàn)圖形之外，請(qǐng)補(bǔ)充上顏色的應(yīng)用規(guī)則、顏色的表意等等。
案例模版
圖標(biāo)設(shè)計(jì)雖然是一個(gè)小內(nèi)容但卻很重要，反映著著整個(gè)頁面的精致度，在 UI 界面來說是除界面排版之外最重要的一環(huán)，因此是很值得我們?nèi)パ芯康脑O(shè)計(jì)之一，建議在日常工作中多練習(xí)多看。
文章來源：優(yōu)設(shè)網(wǎng) 作者：ID設(shè)計(jì)站
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
圖標(biāo)風(fēng)格匯總
圖標(biāo)設(shè)計(jì)流程
案例講解
圖標(biāo)資源輸出
線性
面型
線面
單色
雙色
漸變
不透明度
一筆成形
斷點(diǎn)
該風(fēng)格設(shè)計(jì)感和個(gè)性都極強(qiáng)，很考驗(yàn)設(shè)計(jì)師對(duì)造型繪制的把控，功底不夠就很容易導(dǎo)致設(shè)計(jì)后出現(xiàn)識(shí)別問題。所以設(shè)計(jì)難度較大，且延展性較弱，難以表達(dá)復(fù)雜語義，使用需謹(jǐn)慎。
單色
雙色
不透明度
晶白
磨砂玻璃
等軸側(cè)（2.5d）
漸變
新擬態(tài)
輕質(zhì)感
明暗質(zhì)感
寫實(shí)
抽象
卡通插畫
像素風(fēng)格
面型不透明度風(fēng)格，通過調(diào)節(jié)前后不透明度可以帶來較強(qiáng)的空間感，使用場(chǎng)景較廣泛。
晶白嚴(yán)格來說也算質(zhì)感圖標(biāo)（白色質(zhì)感）的一種，常見于品類圖標(biāo)設(shè)計(jì)，通過透明度、投影、漸變等參數(shù)調(diào)節(jié)，使整體立體感和空間感都很強(qiáng)。
又叫毛玻璃風(fēng)格，是通過背景模糊，或剪切模糊圖層的技法來表達(dá)通透、有層次、精致的視覺感受，但由于容易與淺色背景相融，造成對(duì)比度不足難以識(shí)別的問題，所以在使用中需要注意無障設(shè)計(jì)。
也叫2.5d，有很強(qiáng)的趣味性，及識(shí)別度，適合重要入口或運(yùn)營(yíng)設(shè)計(jì)。但這類風(fēng)格較為卡通，且表現(xiàn)花哨。使用需要注意應(yīng)用場(chǎng)景及目標(biāo)人群年齡段，避免干擾信息閱讀和不符和產(chǎn)品風(fēng)格。
這類風(fēng)格可以很好的吸引用戶注意力，在電商、美食類產(chǎn)品中較常見，主要注意配色干凈協(xié)調(diào)。
新擬態(tài)圖標(biāo)色彩相對(duì)單一，與背景融合度較高，通過高光、投影表現(xiàn)一定的立體感。通常是整個(gè)產(chǎn)品就是新擬態(tài)風(fēng)格時(shí)才使用。所以該風(fēng)格局限性較大，再有這類風(fēng)格與背景對(duì)比較弱，無障設(shè)計(jì)問題較大。
通過大量漸變、投影來表現(xiàn)立體感，整體風(fēng)格偏年輕化，常見在教育類產(chǎn)品中，使用注意配色干凈和諧。
通過調(diào)節(jié)同一色相不同明度、飽和度來營(yíng)造前后空間感，整體風(fēng)格統(tǒng)一。
這類圖標(biāo)特點(diǎn)很明顯，有極高的識(shí)別度，目前美團(tuán)外賣品類區(qū)入口就是該風(fēng)格，整體偏年輕化。主要考驗(yàn)設(shè)計(jì)師造型繪制、技法表現(xiàn)能力。
通過幾何圖形組合、色彩使用來表達(dá)美的視覺感受。這類圖標(biāo)藝術(shù)（裝飾）價(jià)值更大，不追求識(shí)別度，美觀即可。
這類風(fēng)格既可以做圖標(biāo)又可以做空狀態(tài)插圖，設(shè)計(jì)美觀有特色即可。
這類移動(dòng)端界面較少見，目前只在一個(gè)海外電商產(chǎn)品（Jollychic）中看過，還有就是一些像素游戲中，比如「泰拉瑞亞」、「我的世界」。
線面
描邊插畫
粗線
細(xì)線
圓角
直角
力量感、穩(wěn)重、男性等感受
安全、親和、年輕
由于圖標(biāo)風(fēng)格繁多，所以以上列舉并不包含所有圖標(biāo)風(fēng)格。
明確語義
關(guān)鍵詞詳解發(fā)散
確定風(fēng)格
提取造型
創(chuàng)意輸出
圖標(biāo)存在的目的是起引導(dǎo)作用，在豐富頁面視覺的同時(shí)，幫助用戶更快的獲取信息（當(dāng)然圖標(biāo)的使用意義還有很多）。設(shè)計(jì)師在將文字翻譯成圖標(biāo)前，必須先理解其文字含義。因?yàn)樽罱K呈現(xiàn)的圖標(biāo)，需要用戶一眼能準(zhǔn)確反翻譯其中含義（藝術(shù)抽象、裝飾類圖標(biāo)除外）。
在C端設(shè)計(jì)中，以Tab為例，一些常見文案：首頁、分類、發(fā)現(xiàn)、我的，這類語義還算比較清晰的。但在B端設(shè)計(jì)或工具類APP中就會(huì)遇到一些復(fù)雜語義。以我的工作來說，目前在做一款網(wǎng)站搭建工具，后臺(tái)常會(huì)需要設(shè)計(jì)組件及對(duì)應(yīng)的圖標(biāo)，比如：滑動(dòng)商品、多圖列表、上拉圖文列表這些語義比較復(fù)雜的圖標(biāo)，在一定程度上會(huì)比較難精準(zhǔn)傳達(dá)文案。
這一步有點(diǎn)類似情緒版使用，但不同的是：我們需要將確定的詞（A)進(jìn)行詳細(xì)解釋，再將解釋文案中關(guān)鍵的詞語進(jìn)行發(fā)散，得出一系列相關(guān)聯(lián)的詞（A1、A2、A3…）。有時(shí)間還可以根據(jù)這些詞找到對(duì)應(yīng)的圖片，再看在這些相關(guān)聯(lián)的圖片中，有哪些細(xì)節(jié)可以傳遞最開始我們確定的那個(gè)詞（A）的意思。
我們可以借助情緒版，根據(jù)產(chǎn)品定位和目標(biāo)用戶描述，再結(jié)合應(yīng)用場(chǎng)景，在目前已有的風(fēng)格中找到符合產(chǎn)品氣質(zhì)，符合當(dāng)前模塊視覺層級(jí)的圖標(biāo)風(fēng)格。
前面我們已經(jīng)了解了目前常見的圖標(biāo)風(fēng)格有三大類：線性、面型、線面，其中還有很多細(xì)分，比如在線性中又分粗線（沉穩(wěn)、力量）、細(xì)線（品質(zhì)）、曲線（女性化），還有圓角、直角，每種類型所傳遞的感受都不同。在創(chuàng)意前期，我們將每個(gè)點(diǎn)合理進(jìn)行隨機(jī)組合（如下圖）即可創(chuàng)造一種更新穎的風(fēng)格。
經(jīng)過關(guān)鍵詞詳解發(fā)散，其實(shí)我們已經(jīng)獲得了很細(xì)節(jié)點(diǎn)，接下來將這些細(xì)節(jié)點(diǎn)進(jìn)行合理融合后，就可以得到代表同一語義但形式各異的基礎(chǔ)圖標(biāo)樣式（此時(shí)還只是想法階段，可以通過手繪方式記錄組合形式，不用特別精細(xì)化）。
圖標(biāo)設(shè)計(jì)規(guī)范
圖標(biāo)設(shè)計(jì)注意點(diǎn)
常見圖標(biāo)尺寸
圖標(biāo)盒子使用
在界面圖標(biāo)設(shè)計(jì)中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
圖標(biāo)盒子即圖標(biāo)約束網(wǎng)格，來源于Material design。使用圖標(biāo)盒子有利于使我們創(chuàng)造的系列圖標(biāo)保持規(guī)范與統(tǒng)一。
簡(jiǎn)潔美觀
易于識(shí)別
細(xì)節(jié)統(tǒng)一
像素對(duì)齊
視覺大小一致
飽滿透氣
融入品牌基因
圖標(biāo)是否美觀，會(huì)受設(shè)計(jì)師對(duì)圖標(biāo)造型把控、圖標(biāo)構(gòu)成元素比例、配色等設(shè)計(jì)能力影響。在UI界面功能圖標(biāo)設(shè)計(jì)中，通常會(huì)盡量減少不必要的細(xì)節(jié)，降低圖標(biāo)復(fù)雜度，來幫助用戶快速識(shí)別。當(dāng)然圖標(biāo)也有豐富細(xì)節(jié)的做法，常見在一些重要運(yùn)營(yíng)入口上。
識(shí)別度的問題，在最前面明確語義中就有提到過，這里就不贅述。
在細(xì)節(jié)中包含：表現(xiàn)風(fēng)格、描邊粗細(xì)、端點(diǎn)類型、圓角大小、斜角角度、配色、投影參數(shù)等（不同風(fēng)格圖標(biāo)的細(xì)節(jié)不同，這里只是列舉部分），上述細(xì)節(jié)在系列圖標(biāo)中都應(yīng)保持一致。
在圖標(biāo)繪制中，需盡量避免坐標(biāo)位置xy或?qū)捀邊?shù)出現(xiàn)小數(shù)點(diǎn)，以此保證最終導(dǎo)出的圖標(biāo)是清晰的。
由于不同圖標(biāo)外輪廓不同，就會(huì)導(dǎo)致哪怕在物理大小上相同的圖標(biāo)（假設(shè)都是24x24），但視覺上可能還是會(huì)給人大小不一致的感受，因此我們需要借助前面提到的圖標(biāo)盒子進(jìn)行約束調(diào)整。
圖標(biāo)的飽滿透氣，不一定需要加入很多筆畫（描邊、裝飾等）細(xì)節(jié)。而是盡可能在形成風(fēng)格的同時(shí)，簡(jiǎn)化能影響識(shí)別度的關(guān)鍵筆畫，通過調(diào)節(jié)筆畫大小、長(zhǎng)短、位置使圖標(biāo)達(dá)到一個(gè)最平衡狀態(tài)。
以如下途牛_我的頁面_功能區(qū)圖標(biāo)為例：
圖中標(biāo)紅圖標(biāo)就存在飽滿度不足，及內(nèi)部較擁擠的情況，第一感受是看起來不舒適，品質(zhì)感比較低。除此外，還存在如下問題：
圖標(biāo)大小很明顯不一致
設(shè)計(jì)語言不統(tǒng)一，有圓角有直角
圖標(biāo)風(fēng)格不一致，有透明度+分割形式（我的保單）、有純透明度形式（專屬顧問、我的收藏）、還有其余單色實(shí)心形式
在圖標(biāo)中融入品牌基因可以有效的提升產(chǎn)品品牌感，作為高階設(shè)計(jì)師必備技能之一，常見提取維度：
顏色
設(shè)計(jì)語言
以我之前的豆果美食項(xiàng)目為例，提取到如下細(xì)節(jié)：
根據(jù)提取到的基因，最終得到如下兩套風(fēng)格不同，但語言相同且都具備品牌感的圖標(biāo)。
Logo輪廓：在圖標(biāo)中融入品牌logo外輪廓（Google Play），或根據(jù)logo輪廓結(jié)合應(yīng)用特性進(jìn)行延展（Microsoft）。
根據(jù)文案進(jìn)行詳細(xì)翻譯，幫助我們充分理解文案。
釋義：有專門的知識(shí)或經(jīng)驗(yàn)，受聘為機(jī)關(guān)團(tuán)體或單獨(dú)個(gè)人提供專門咨詢的人。
提取釋義中關(guān)鍵信息，生成關(guān)鍵詞：專業(yè)、專人，再根據(jù)關(guān)鍵形容詞發(fā)散一系列具象名詞。
根據(jù)產(chǎn)品調(diào)性和模塊視覺層級(jí)以及考慮延展性，初步確定如下風(fēng)格組合起來是比較適合：
在實(shí)際查看中，發(fā)現(xiàn)Tab的風(fēng)格為單色+不透明度+斷點(diǎn)風(fēng)格。
為了和Tab拉開差異，最終確定以如下風(fēng)格進(jìn)行組合表現(xiàn)比較符合產(chǎn)品調(diào)性：
線性：雙色
面性：?jiǎn)紊?、雙色、不透明度、輕質(zhì)感、明暗質(zhì)感
線面：線面
通過手繪或大腦想象進(jìn)行造型構(gòu)思，這里我就不展示手繪過程（行吧，我承認(rèn)就是畫的太丑了不敢放）。
由于不同風(fēng)格對(duì)圖標(biāo)造型構(gòu)思有所影響，且圖標(biāo)類型很多，不同特點(diǎn)組合起來樣式更多。案例精力有限，所以只以線性雙色風(fēng)格做演示，希望大家靈活使用。
這一步就是將手繪圖形矢量化，在矢量化創(chuàng)意過程中，我們可能會(huì)對(duì)手繪的圖形進(jìn)一步簡(jiǎn)化細(xì)節(jié)或新增造型，這都很正常。只需注意在整個(gè)繪制過程中遵循圖標(biāo)設(shè)計(jì)規(guī)范，以及注意圖標(biāo)設(shè)計(jì)注意事項(xiàng)即可。
圖標(biāo)盒子使用
創(chuàng)意輸出
Tips：
1or2？
最后對(duì)專屬客服進(jìn)行多風(fēng)格嘗試，最終效果如下：
附上部分繪制過程中的淘汰稿：
SVG：縮放無損、體積小、支持前端樣式修改參數(shù)、單色情況下方便前端修改顏色來表達(dá)圖標(biāo)狀態(tài)，減少重復(fù)上傳。
PNG：支持透明格式
JPG：兼容性強(qiáng)，適合大尺寸高飽和度圖像
GIF：動(dòng)態(tài)圖標(biāo)使用，缺點(diǎn)是透明情況下邊緣容易出現(xiàn)鋸齒。
這里主要介紹靜態(tài)圖標(biāo)中，svg格式在工作中如何輸出給前端同學(xué)使用（借助iconfont）。
1、圖標(biāo)資源優(yōu)化
在iconfont官方繪制指南中有描述，在導(dǎo)出前需要按如下規(guī)則優(yōu)化圖標(biāo)資源：
2、選中圖標(biāo)導(dǎo)出svg格式
以Figma為例，優(yōu)化圖標(biāo)資源后，選中圖標(biāo)將輸出格式選擇為導(dǎo)出svg。
3、上傳iconfont
在資源管理下，選擇需要上傳的位置。
去除顏色并提交：適合單色圖標(biāo)，去除顏色提交可以方便前端使用代碼修改參數(shù)，減少不同狀態(tài)圖標(biāo)重復(fù)上傳。
保存顏色并提交：適合多色圖標(biāo)（注意：在單色情況下，選擇保留顏色提交，前端則無法通過代碼修改圖標(biāo)顏色）。
最后當(dāng)我們把圖標(biāo)都上傳好后，就可以將前端同學(xué)拉入團(tuán)隊(duì)項(xiàng)目中開心進(jìn)行玩耍。
文章來源：站酷 作者：幺零三
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每天努力的用心的去做設(shè)計(jì)，挺開心的，其中最開心的細(xì)節(jié)就是“思考自己的設(shè)計(jì)如何與別人的不一樣”，讓你的差異化產(chǎn)出得到認(rèn)可后，這將是一件非常非常幸福的事情。
今天和大家分享一個(gè)前一陣子做的小案例，做的一個(gè)直播貨幣，名字叫星幣。
思考過程如下：
其實(shí)“星幣”可發(fā)散的空間很小，因?yàn)橐呀?jīng)非常具象了，無非就是星星、和錢幣。
我們可以看下大概的感覺：
但是如果按照上面的感覺做，那最后出來的效果一定很常規(guī)，這也就有了我接下來的思考。
我們仔細(xì)觀察，一般參考中的星星都是非常規(guī)矩的，無非就是尖角圓角的區(qū)別：
要么就是胖瘦的區(qū)別：
所以這次我打算做一個(gè)不那么規(guī)矩的，有點(diǎn)跳遠(yuǎn)的感覺、又有點(diǎn)星火的感覺，所以我把星星的一個(gè)腳拉長(zhǎng)：
然后再把兩個(gè)胳膊往上抬一抬：
這樣就好像是一個(gè)跳躍的小人一樣，會(huì)相對(duì)來說活潑一些。
接下來為了讓整體更加和諧，我在錢幣周邊挖了一個(gè)小口：
目的就是配合那只伸出來的腳，讓整體感覺更加巧妙一點(diǎn)。
其實(shí)星幣很容易聯(lián)想到金黃色，如果按照這個(gè)設(shè)想來做，那就會(huì)比較普通，所以我選擇讓他和直播、社區(qū)的配色一致：
這樣在顏色方面也就有點(diǎn)自己的調(diào)性了。
剛才不是說讓這個(gè)星星看起來像個(gè)跳躍的小人嘛，那一般人都有表情的，所以我們完全可以再加上一個(gè)可愛的表情：
讓整體更加生動(dòng)形象。
當(dāng)然，如果星幣在面積小的場(chǎng)景下是看不清表情的，所以需要做成兩種，一種是有表情的， 一種是沒有表情的。最后，還可以再做個(gè)有質(zhì)感的：
后來發(fā)現(xiàn)質(zhì)感做的有點(diǎn)臟，于是又優(yōu)化了一下質(zhì)感，效果如下：
整個(gè)構(gòu)思和執(zhí)行的過程還是可以的的，也得到了大家的認(rèn)可，不過很可惜的是，后來名字改了，改成了能量幣，哈哈哈哈，通過能量，我又聯(lián)想到了太陽，太陽能嘛，執(zhí)行原理都是一樣的，大概效果如下：
文章來源：優(yōu)設(shè)網(wǎng) 作者：菜心設(shè)計(jì)鋪
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
今天這個(gè)需求是直播間 pk 后，主播勝利與失敗的兩個(gè)狀態(tài)設(shè)計(jì)，過程經(jīng)歷了很多次修改，現(xiàn)在來分享一下自己的感受。
其實(shí)最開始我有點(diǎn)天真了，以為這種狀態(tài)直接畫個(gè)圈圈，寫個(gè)勝、敗兩個(gè)字，然后做下顏色區(qū)分就完事了：
但這根本行不通，看起來像是未完成的交互稿，一點(diǎn)設(shè)計(jì)感都沒有。
于是我開始思考如何增加設(shè)計(jì)感了。
如何增加設(shè)計(jì)感？
其實(shí)無非就是給這個(gè)狀態(tài)增加細(xì)節(jié)唄，尤其是這個(gè)勝利的狀態(tài)，我想到麥穗、翅膀等元素，最后選用了翅膀的元素，繪制了一個(gè)樣例如下：
但被說到這個(gè)結(jié)構(gòu)是亂畫的，哈哈，一下戳到了我的痛點(diǎn)，確實(shí)是胡亂畫的，各種圓圈沒什么邏輯。
于是后來仔細(xì)思考了一下，把圓圈分為三層：
效果如下：
然后最中間放主形象，兩邊放翅膀，頂部放皇冠，最終效果如下：
這樣整體看起來結(jié)構(gòu)就是清晰的。
我們可以看下結(jié)構(gòu)清晰和不清晰的對(duì)比：
后面因?yàn)檎w調(diào)性需要可愛一點(diǎn)，所以把翅膀改成了比較圓潤(rùn)的造型：
效果還算不錯(cuò)。
其實(shí)這個(gè)點(diǎn)是我經(jīng)常和大家強(qiáng)調(diào)的，但有時(shí)候確實(shí)是當(dāng)局者迷，自己也容易犯這樣的錯(cuò)，比如最開始的那個(gè)效果，很明顯中間暗部和周邊亮部沒有拉開層次：
所以在后面的取色上，會(huì)把中間暗部做的很深，形成鮮明對(duì)比：
這樣層次才會(huì)更加明顯，不然就會(huì)糊在一起。
最開始本來想用圓形來做失敗的狀態(tài)，但是后來發(fā)現(xiàn)有點(diǎn)太慘淡了，于是想著還是加點(diǎn)細(xì)節(jié)吧，怎么加呢？
這時(shí)候是需求方那邊給的一點(diǎn)靈感，說失敗不就是很頹的樣子，就拿把翅膀下沉和勝利形成反差不就可以了，我感覺說的挺有道理，于是就嘗試做了下：
確實(shí)還可以。
本來想著勝利用紫色、失敗用藍(lán)綠色：
但是發(fā)現(xiàn)藍(lán)綠色多少還是會(huì)有點(diǎn)分散“勝利”的注意力，于是就在思考，失敗是表達(dá)一種負(fù)向的情緒，那是不是可以用灰一點(diǎn)的顏色？
于是嘗試了幾個(gè)不一樣的灰度：
最后選擇最后最后那個(gè)幾乎接近灰色的版本，干脆一點(diǎn)，對(duì)比強(qiáng)烈一點(diǎn)。
我們看下最終效果：
再看下過程稿吧：
調(diào)整了很對(duì)次，過程還是挺值得記錄的，回頭一看，很有成就感！
以上就是這個(gè)小需求過程中總結(jié)的一些知識(shí)點(diǎn)，后面還會(huì)加入一些微動(dòng)效，增加氛圍感。
希望可以給大家一點(diǎn)靈感和啟發(fā)。
文章來源：優(yōu)設(shè)網(wǎng) 作者：菜心設(shè)計(jì)鋪
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com