編者按：設計原則總是看起來簡單抽象不言自明的，但是在細分的設計領域，這些原則其實有著各自不同適用情況，有著「特定的條件」。圖標設計，就是如此。今天的這篇文章，來自專業的圖標設計師 Helena Zhang，她結合自己制作 Phosphor 系列圖標的經驗，來分享她對于圖標設計原則的理解。
這些設計原則就像一份清晰的設計框架，或者設計自查表單一樣，幫你規避設計陷阱，讓你的設計成果更加出色。
創建高質量系列圖標，你得使用一套周到系統的方法，需要有訓練有素的雙眼，大量的迭代學習，以及堅持實踐，才能做到。下面，我將結合7項設計原則，和大量的實際案例，來為你詳細說明，如何創建高質量的圖標。
掌握這些設計原則，就是創造出優質圖標的關鍵。
圖標存在的目的，是快速傳達概念。
下圖是 Prius Prime 儀表板上的圖標。
在這一系列符號當中，你能明白其中哪些的含義？對于這款車的駕駛者而言，可能會隨著使用時間的積累，逐漸明白其中一部分圖標的含義。很大程度上，這是因為這些圖標本身并不直觀。你可能需要對著說明書，才能明白它們各自的含義。
我們可以從下面看到，圖標是怎么一步步變得難以識別的：
當圖標開始使用我們不熟悉的含義和隱喻時候，它就自然變得難以理解。從左往右數第三個圖標，是安全帶的提示燈圖標，當它亮起的時候，意味著你沒有系好安全帶。這個含義相對直觀，你可能能夠很快掌握。而最右邊的這個「電動助力轉向系統警告燈」含義就非常模糊了。
通常，不清晰的圖標設計會讓你感到沮喪，但是對于開車的人而言，含義模糊的圖標意味著誤解，而誤解的結果可能是生命安全。
下面是我們更為熟悉的圖標——喜愛、警告、音樂和向上。
上圖為 Phosphor Carbon 中的圖標
向上的箭頭在很多場景當中，都是非常清晰、實用的符號。
紐約地鐵中的標識
最成功的圖標設計，不僅僅是讓圖標本身易于理解，而且對于不同的文化背景、不同年齡段、不同知識背景的人都能理解，只有做到這樣才行。
如果你想要表達的信息過于抽象，那么單獨使用圖標，可能不是最清晰的解決方案，應當將圖標和文本標簽結合起來使用。
有了易于理解的圖標之后，你需要確保它的可讀性足夠強。
Icons in the Amtrak mobile app
由于細節太過精細，很難讓 Amtrak 的圖標被清晰地感知到。
Transit 應用圖標也有相同的問題。它們的剪貼板這個圖標中的細節很難看清：
Icons in the Transit mobile app
稍加調整之后，好了很多：
Adjusted clipboard icon
當你在處理圖標中多個不同的圖形元素的時候，應該確保其中的空間留足。太細小的筆觸細節、更多的信息量會讓圖標顯得更加難以閱讀。
Google Maps 的公交車圖標就非常的出色——它看起來足夠小，但是可讀性也很強。
Google Map icons
確保每個圖標都感覺平衡，盡量進行視覺對齊
不平衡的播放圖標
Unbalanced play icon
在這個播放圖標當中，盡管三角形被放置在中間位置，但是它并沒有視覺對齊，我們的眼睛看到的時候，會覺得中間的三角形說向左靠的。三角形靠左的這一邊在視覺上更重，因此它應該向右移動一點來確保平衡。
就像字體排版設計師，他們也經常會微調文字的布局來確保視覺平衡。比如字母 i 和 j 頂上的小圓點會偏移，而字母 O 的上下部分則為稍微超出邊界，來確保字體的平衡。
設計的時候，適當的微調就能達到平衡的效果。
Balanced play icon
明顯更好了。
要點：不要單純的相信數據，要用你的雙眼來進行檢查和修正。
用盡可能少的詞匯來進行表達和描述，這樣會更加優雅高效。
「將你所學的知識分享出去，可以增強你對于這門學科的理解。」
Material Design 在他們的導視系統中，使用的圖標大都足夠簡潔，他們善用圖標而是說話：
這是一個復雜的船的圖標：
它還有更為簡約的版本：
Succinct boat icon (Source: Material)
簡潔是圖標設計的精髓之一，因為我們經常需要在很小的屏幕上操作，圖標可以傳達很多信息，而不同文本或者其他復雜的內容。
在用戶界面當中，簡約準確的設計風格能夠凸顯重點，讓內容發揮效用。Telegram 的圖標設計，就非常的簡約有趣：
Telegram icons
有的時候，UI圖標會選用更偏向插畫風的樣式。下面這些關于美食的圖標就設計得非常令人愉悅，代表泰國菜的圖標中，蝦的描繪就非常傳神：
Yelp icons by Scott Tusk
圖標可以適用于各種不同的硬件平臺，手機、 電腦、平板，適當的信息量意意味著設計師可以在色彩、層次縱深上，有更大的操作空間。因為圖標本身會應用于特定的APP 或者網站當中，因此圖標可以適時地凸顯品牌和產品特征。
iOS 平臺上的 Procreate 、火狐和 Netflix 的圖標
為了讓圖標家族顯得更加和諧，始終保證相同的樣式和設計規則
在 iOS 13 之前，蘋果的圖標設計有著各種不同的粗細筆觸，不同的填充樣式，大小也各不相同：
仔細看看這套圖標，是不是有的圖標看起來比其他的更重？
任何圖標都有著相應的視覺重量。而視覺重量取決于圖標筆觸的粗細、填充模式、大小和形狀這幾個屬性。而圖標設計的難點就在于，如何控制所有的這些參數，做到整體的一致性。
蘋果公司最近引入了 SF Symbols 這個功能，將圖標直接制作成為圖標字體，在這套字體當中，圖標有 9 種不同的「字重」和3種不同的的風格（也許有點復雜，但是絕對充分夠用）。從圖標到符號，在填充模式、筆觸輪廓等多個不同的屬性上，確保你能挑出感覺更加和諧的圖標。
Icons from Apple’s SF Symbols
對于一個大型的成套圖標而言，保持一致性并不是一件容易的事情，尤其當這套圖標涉及到多個制作者的時候。遵循清晰的原則和規范在此時上至關重要的。
這套 Phosphor 圖標是由我和另一位朋友共同制作并嚴格測試的，我們使用一套準則確保這 700 個圖標保持一致性。盡管每個形狀都不盡相同，但是它們給人的整體視覺重量是完全相同的，并且很好地相互組合到一起：
Subset of the Phosphor Carbon icon family
每套圖標都應當尤其獨有的風格和氣質。是什么讓它們與眾不同？它們對于品牌是否有所助益？它們會給人什么樣的情緒？
Waze icons
Waze 大受歡迎的用戶界面，很大程度上是它本身所使用的圖標設計所造就的。這些用色跳脫斑斕的圖標，仿佛在說「我們就是特立獨行！」
Twitter 的圖標是柔和、清晰明亮的：
Sketch 的圖標則是精致而通透的：
Freemojis 的圖標是可可愛愛的：
而這些 Android 的圖標則風格各異，抽象風、像素風、霓虹風，不一而足：
完美地繪制了整套圖標之后，你的工作并沒有完成。接下來，你需要繼續做測試和其他的準備工作，比如讓參與圖標制作的志愿者可以更好地參與后續的制作和完善，讓設計師在日常設計工作當中使用和測試，在數字屏幕和印刷品上應用確保效果，讓開發者將它們集成到其他的服務當中，確保能夠應用。
一套高質量的圖標，需要經過良好的組織、記錄，并且在不同的應用場景中進行測試，并且最好能夠得到個性化圖標制作工具的支持。
7.1、組織性
你需要確保圖標集的整齊規范，有合理的命名，便于查找，并且想清楚以什么樣的方式來進行分類。按照字母順序？按照大小，還是類型？
這套 Nucleo Sketch 圖標，是按照也沒類型來進行組織分類的
7.2、有據可查
你需要闡明整套圖標的核心原則：
我以我所制作的 Phosphor 系列圖標為例（和以上原則內容有重復）來進行說明：
下面是技術規則。我還是以 Phosphor 圖標作為返利：
按照這這樣的步驟來進行設計，并根據需求來公開相應的文檔，就像下面這樣：
7.3、進行測試
檢查一致性。確保圖標在不同場合可以使用，并且尺寸合理。確保它們和大型是視覺系統能夠協調存在。
將圖標排列在一起，并且按照以上的 7 個原則來進行檢測。
Phosphor 的品質控制流程中所用到的測試表。
7.4、定制化工具
最后，如果你有足夠的資源，可以開發相應的工具來方便用戶使用圖標。
Material Design 讓用戶可以通過自定義庫來訪問圖標，搜索文件，選擇喜歡的格式、配色、大小和主題。
Font Awesome 的圖標設計并沒有完全遵循上面所提到的全部原則，但是它依然是目前來說最易用的圖標集。它提供的功能甚至超出了以上提到的范疇：它支持前端框架、CDN、圖標字體以及 SVG。
下面是一些額外的圖標素材資源。
7.5、資源
這個圖標合集項目雖然在質量上參差不齊，但卻是非常適合拿來搜集靈感、作為參考好地方。
Icon Managers
這是一款來自 Nucleo 的應用程序，你可以導入圖標集，查看，修改，導出，非常實用。
文章來源：優設網 作者：Helena Zhang
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如何打造視覺平衡：正確的尺寸+視覺對齊+完美的圓角修飾。
我們的眼睛很奇怪，經常誤導我們。但如果你知道人類視覺的特殊性，就可以構建更好的設計。
20 世紀 20 年代，格式塔的視覺感知理論得到了發展。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。你可能已經聽說過諸如親近原則或共同命運規則之類的話題，本文引用了格式塔理論的一些觀點，重點介紹了實踐方面而不是學術研究上的問題。在底部有關于這個主題的相關推薦列表，有興趣的話可以瀏覽。
400 px 的正方形和 400 px 的圓哪一個更大？從幾何角度來說，它們的寬和高是相等的。但看看下面的圖片，我們的眼睛立刻發現正方形大于圓。
下圖是帶有標注的：
讓我們再看一張正方形和圓的圖。就視覺重量而言，它們相同嗎？
至少很難立即指出哪一個比較重，不足為奇，因為我增加了圓的直徑。
我重疊了第一個和第二個示例中的形狀。左圖，400 px 正方形的面積大于 400 px 圓的面積。這就是為什么我們在視覺上看到它更大的原因。右邊，圓和正方形是平衡的，基本上它們的面積也相似，但是寬和高不同。
我們可以看到菱形、三角形具有同樣效果。為了在視覺上與正方形保持平衡，它們應該更寬和更高，以使得它們的面積相似。基于面積的方法非常適合最簡單的形狀。
在 icon 中怎么使用呢？
當你創建一組圖標時，重要的是要使它們保持平衡，以使圖標不會顯得太突出或太小。如果我們直接把圖標放在正方形內，那么越像正方形的圖標看起來就越大。
我建議補償不同形狀圖標的重量，允許視覺上較小的圖標懸掛在正方形外，并在視覺上較重的圖標和正方形之間留出一些距離。
下面是一組修改過的圖標：
現在了解了，為什么一個圖標區域總是比圖標主體大，只是為了讓非正方形圖標適合它并且看起來不小于正方形圖標。
檢查視覺平衡最簡單的測試是模糊設計。如果你的圖標變成相似的斑點，則它們具有形同的視覺權重。
例如，Facebook 和 Instagram 的圖標是方形的，而 Twitter 的圖標則是鳥的輪廓，Pinterest 則是一個環繞的「P」。這就是為什么 Twitter 和 Pinterest 的圖標要大一點，以便于它們與 Facebook 和 Instagram 圖標保持平衡。
視覺平衡的另一個例子是將文本框與圓形按鈕放在一起。如果按鈕的直徑等于文本框的高度，那么按鈕會顯得更小。當你把它放大一點，整個結構就會變得更加平衡。
但如果你改變按鈕的樣式，就不需要放大了。在下圖中，按鈕和文本框的高度是 80 px，但是右邊的按鈕視覺上看起來并沒有很弱，因為它是黑色的。
Tips：
視覺對齊是視覺平衡主題的延續?？聪聢D：它們看起來一樣長嗎？
以 px 為單位，答案是肯定的。但是，第一眼看上去，第一條要比第二條長一些。
現在看下圖，有什么變化嗎？
我對第二條矩形應用了視覺補償。允許尖峰值超過上條矩形長度的 20 px，是補償峰值之間的間隙并使兩個形狀在視覺上相等。
還有一些特殊圖形的例子：
所以，如果你設計一張帶有折疊條紋和文字的海報，或者商品圖角標設計時，請注意使它們達到視覺平衡。銳利的邊緣應該超出形狀的其他部分。
文本和有背景的段落怎么對齊？這取決于背景的視覺密度。如果它很輕，你可以將突出顯示的段落與文本的其余部分對齊。
由于背景較淺，因此不會中斷正常的文本流。
對于深色背景，可以使用不同的方法。在圖片上，黑色背景與文本的其余部分對齊，而其中的白色文本以縮進方式放置。
與淺色背景的情況不同，黑色背景具有較大的視覺重量，如果目標是無縫瀏覽段落，則最好按照以下所示的方式對齊。
相同的原理同樣適用于按鈕和輸入字段。當然這只是基于人類視覺感知的設計。
左側輸入字段的淺色背景可以超出輸入標簽和輸入文本的范圍?！赴l送」按鈕的與輸入背景的右對齊，因為該按鈕較暗且從視覺角度看較重。
在右側，輸入具有實線邊框，當用戶輸入的框內有凹痕時，我將其與標簽對齊?！赴l送」按鈕的側面為三角形。該按鈕向右移動一點，看起來與上面的矩形輸入字段保持平衡。
在這里，我們探討另一個對齊問題：文本和圖標按鈕的對齊。下圖，文字看起來居中嗎？
秘訣在于，右邊是三角形，因此在右邊的按鈕上我將文本向左移動了一點。此外，箭頭按鈕的寬度為 40 像素，看起來與矩形按鈕在視覺上相等。
文本按鈕不僅具有水平對齊，而且具有文本和背景的垂直對齊。我想講的第一種方法是在各種操作系統、站點和 APP 中使用的。它是基于字體的大寫字母的高度（即上限）對齊方式，它等于「 H」或「 I」的高度。
基本上，大寫字母上下的空間和按鈕的邊緣是相等的。這是有道理的，因為操作按鈕通常以大寫字母書寫，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。
另一種方法是使用字體的小寫字母的高度（所謂的x高度）來對齊文本和背景。在 sans 和 sans serif 字體中，它等于字母「 x」的高度。
由于文本的主要視覺重量集中在小寫字母的區域，因此該方法也是可行的。
這些方法之間有什么區別嗎？有區別，但差異不大。
對于「取消」和「確定」（常用按鈕），由左列代表的上限高度方法肯定更好，因為「取消」沒有下垂部分（y，j，g，p ），并且「確定」都是大寫字母。
右欄中顯示的 x 高度方法僅對「同步」按鈕更好，該按鈕的名稱同時具有上下突出的元素；「取消」和「確定」兩個詞似乎位置太高了。
圖標按鈕的情況與文本按鈕略有不同，讓我們在圓形背景上放一個「發送」圖標。哪個看起來視覺更加平衡？
希望你已經注意到左邊的那個有問題。發生這種情況的原因是對齊方法不同。第一個選項將圖標視為矩形，在某種程度上說是正確的，因為當你將 SVG 或 PNG 文件給開發人員時，它是一張矩形圖。右側顯示圖標的位置，使其所有尖銳邊緣與圓形按鈕背景的距離相等。
如果為開發輸出文件，則需要保留一些區域，以便他們可以使圖標在背景上正確居中。
同樣「播放」按鈕也一樣，如果直接對齊這些形狀（圓角矩形和三角形），它們將看起來很奇怪。
如果要使三角形的視覺位置更好，則將其圍繞并使其與按鈕背景對齊會更好。
Tips：
還有什么比圓形更圓的圖形嗎？
我曾認為沒有，但是正如我在本文開頭所說的那樣，我們的眼睛很奇怪，有時會欺騙我們。那么，下面圖片中哪個圓看起來最平滑？
我之前問過的人在 3 號和 4 號之間進行糾結。1 號和 2 號絕對太瘦了，5 號太豐滿了。如果我們將第三個和第四個變體（一個幾何圓和一個修改的圓）重疊在一起，我們會發現，后者比第一個重一些。
為了說明我的意思，我從 Futura，Circe 和 Geometria 這三種著名的幾何字體中選取了字母「 o」。鑒于高質量字體是基于人類的視覺感知構建的，并且使用了復雜的視覺構造系統，因此我認為它們的圓形看起來比幾何形狀更圓。
讓我們將它們與幾何圓重疊。即使是最幾何圖形的 Futura 的「 o」也有四個突出部分。此外，Circe 和 Geometria 的字母比圓圈寬，但即使它們的高度和寬度相等，我們也可以看到這四個「肚子」好像小了。
因此，從視覺角度而言，修改后的圓（右側）看起來比幾何圓（左側）更「圓形」。
我們如何使用這種現象？當然要進行圓角處理。如果你在圖形編輯器中直接修改圓角，效果其實并不好。
人眼立即發現直線突然變成曲線的點，而且這種處理看起來并不自然。
考慮到我們的視覺感知，我修改了這個圓角。
這種嵌入具有超出幾何圓的額外區域，使得直線與曲線相交的點不那么明顯。
只是嘗試感受一下這些嵌入方法之間的差異。
現在，我們可以將這種方法應用于圓形按鈕。
你可能已經注意到，右側的按鈕具有更平滑的圓角倒角，并且你的眼睛更加舒適。
與 APP 圖標相同，人們不只是使用標準的圓角整數來達到理想的效果。在深入探討此問題前，讓我們看一下下面圖形的差異：
第一個是我在 Sketch 中創建的圓角矩形。第二個形狀是超橢圓形，也稱為 Lamé 曲線。它是由法國數學家加布里埃爾·拉梅（GabrielLamé）發現的，根據公式的不同，其范圍可能從四點星形到實際上看起來像是圓角正方形。
馬克·愛德華茲（Marc Edwards）提出了 Lamé 曲線的公式，該公式產生了平滑且視覺上完美的形狀。從 iOS 7 開始的圖標均基于此設計的。
后來，通過添加黃金比例和用于指導新圖標設計者的網格來修改此形狀。
使用超橢圓等形狀的主要好處是其光滑的外觀。另一方面，這些非標準形狀很難到真實項目中。應該將多個 SVG 組合在一起，在代碼中包含特殊的公式或腳本，或者像 Apple 為其應用程序圖標那樣使用 PNG 掩碼。
至于設計過程本身，有一個簡單的圓角修復方法。您需要調整合適的圓角度數。
銳角倒圓的差異更加明顯，這對于繪制道路或交通設計非常重要。
Tips：
有時，非幾何正方形看起來更像方形。你可能會想，「這是什么廢話？」 那么，你看下面的正方形？哪種形狀看起來更方形？
如果你選擇了左側的形狀，你就能感受到視覺差異的點。
文章來源：優設網 作者：UX Talk
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文從圖標的起源、定義到基礎的設計方法總結無一不包，還有大量的案例幫你理解布爾運算，是新人設計師學習圖標設計的必備干貨！
一說到圖標，我想您一定會覺得非常熟悉。圖標，也稱為 icon 或 picto，是指有明確含義的圖形視覺語言。那么當我們一提起圖標設計，您的腦中會想起哪個圖標來呢？有可能您想起的是微信APP ，由兩個白色氣泡組成的啟動圖標，或者是我們每天使用的 APP 中的那些返回、關閉等系統圖標，也可能是商場導視里的衛生間圖標等。沒錯，圖標的形式有很多種，它可以應用在很多場景中，并且表現方式非常豐富：有線的、有面的、也有擬物的等等。圖標的歷史可以追溯到象形文字（Pictogram），我們的祖先在發明文字之前就使用圖標記錄一天的生活了。聽著是不是不可思議呢？從亙古時代的象形文字開始，我們的祖先就偏愛使用這種抽象的圖形來表達意思了。在平面設計領域的商標其實也是一種圖標，平面設計里的視覺導視（例如衛生間的圖標）也有圖標的應用，所以圖標在我們的生活中應用非常廣泛。
△ 生活中隨處可見的圖標
在計算機時代，從80年代的施樂公司界面中的單色圖標開始，圖標就開始出現在屏幕之中了，圖標較編程語言更容易被大眾理解。到了后來從 iMac 到 iPhone 引領的擬物圖標更是開啟了一個絢麗的圖標設計時代。擬物時代盛行也帶來了一些麻煩：擬物圖標的質感、光影會吸引走用戶的注意力，我們稱之為「視覺噪音」。于是 UI設計師開始探索更新的表現形式來設計界面中的圖標。扁平圖標發展史上有過很多次嘗試，比如微軟引領的 Metro風格中的圖標設計和 Google 引領的扁平設計風格中的長投影風格圖標，但由于它們表現形式太過于抽象、缺乏情感的傳遞，并沒有獲得用戶的垂青。而我們現在界面設計中的圖標設計是一種「輕擬物」或「微扁平」的風格：在面積比較小的區域我們使用扁平圖標或線形圖標；在面積比較大的區域我們會使用加入漸變甚至輕質感的圖標。（關于圖標風格的變化，可以參考這個網站：https://historyoficons.com）。
△ 不同的圖標設計風格
如今我們界面中的圖標可謂非常豐富了，如果根據 Material Design 對圖標的分類，UI設計中的圖標可以分為帶有品牌屬性和特性的產品圖標、有功能指示作用的系統圖標兩種圖標，下面我們將針對于這兩種圖標進行研究。
產品圖標是我們在設計界面的時候體現品牌調性和特性的圖標。通過產品圖標，用戶就可以大概感知這個產品主要是做什么的。比如微信的產品圖標是兩個對話氣泡，暗示了這是一款社交APP；再比如 ofo 的產品圖標是字母ofo 的組合，同時也是一輛自行車，這暗示了這款產品是共享單車的APP；再比如 KEEP 的字母「K」的圖標，像極了一個在抬腿做運動的人，暗示了這是一個運動APP。
同時有些產品也依靠自身已經在用戶心中產生的品牌來直接設計產品圖標，比如淘寶APP 的產品圖標就是一個「淘」字；支付寶的產品圖標就是一個「支」字。優秀的產品圖標都會在我們心中打上一個烙印，當我們看到這些圖形、配色時，腦中會立即想起來它們的功能和特點。產品圖標除了在手機屏幕中作為啟動圖標，也會出現在閃屏、情感化設計、「關于我們」界面等場景中，所以也要有一定的靈活性，在設計上要以簡單、大膽、友好的方式傳達產品的核心理念和意圖。產品圖標很類似在企業識別系統（VI）里的 logo，需要讓用戶一眼看到它就能夠與腦中的產品相關聯。所以設計一個優秀的產品圖標對于任何產品來說都是非常重要的。
產品圖標有不同的風格，這些風格有可能很擬物，也有可能很扁平；有可能很抽象，也可能很具象。通過不同的設計風格可以更加標新立異，從而被用戶記住。讓用戶記住我們的圖標真是一件非常重要的事兒，要知道，每個手機都像是一把瑞士軍刀，它有無數個功能，而我們的產品只是萬種功能中的一個。用戶不可能記住手機里所有的 APP 都是什么，所以能在第一時間取得好感和記憶非常重要，產品圖標設計得好看并且容易被人記住就成了非常重要的任務。產品圖標的主要風格有以下幾種。
文字風格
文字是最直白的信息，而且不容易被曲解。所以很多國內的產品都會使用文字來作為自己的產品圖標。比如：支付寶、淘寶、今日頭條、OFO、愛奇藝、知乎、網易新聞、毛豆新車等。這么做也有它的問題，比如文字給人美的感受不如圖形，因為文字需要閱讀而不是觀察。并且移動端設備都會在啟動圖標之下加上一行輔助文字，如果圖標上的文字和下面的輔助文字完全重合，會顯得像介紹了自己兩遍一樣。如果您決意要使用文字作為產品圖標，且是中文的話，那么一定要記得文字最好為1-2個，并且不應該是產品的全稱。如果是英文的話，最好是首字母而不是產品全稱。當然不管是中文還是英文都需要選擇合適氣質的字體并做一定的變化。
單讀：單讀是一個偏文藝的閱讀產品，所以產品圖標使用了黑白配色和兩個非常有文藝氣息的宋體繁體字，這樣的設計符合產品調性，傳遞給用戶一種產品的文藝氣息。
今日頭條：今日頭條是一款優秀的新聞APP。它的圖標非常直白，一張報紙上有紅色的頭條標題，頭條使用了非常粗的黑體字，非常顯眼。
淘寶：淘寶采用了一個俏皮的「淘」字作為 icon 的主要元素，并且背景顏色是令人興奮和刺激的橘黃色，凸顯了電商屬性。并且這個字使用了很久，用戶對此有一定的品牌認知。
愛奇藝：愛奇藝的 icon 采用了英文字母iQIYI 和上下邊框相組合的形式。整體看來像是一個電視機，強調了品牌屬性和功能，并且使用了在視頻領域非常有識別性的綠色，讓人一看便知這是愛奇藝了。
△ 單讀、今日頭條、淘寶、愛奇藝的產品圖標
如果您的品牌使用英文作為產品圖標，我們在設計的時候要格外注意英文字母之間的正負空間關系以及不同西文字體的不同氣質。
ONE：雖然是中文產品，但是 ONE 的icon 顯得非常的高端和小眾。ONE 三個字母的正負空間關系做了微調，并且選擇了無襯線字體來體現時尚感。下面的小字是一個 slogan，并且和 ONE 的寬度一致。
Pinterest：Pinterest 的產品圖標是一個手寫體的P，并且用紅色圓形作為陪襯。這樣一個字母作為 ICON 的好處就是方便用戶記憶。
HULU：HULU 是一個國外視頻產品，它的產品圖標顏色很鮮艷，字母本身有韻律感，所以沒有做過多的設計。
Facebook：作為一個社交產品，Facebook 的產品圖標同樣采用了一個字母代表較長的單詞。
△ ONE、Pinterest、HULU、Facebook的產品圖標
正負形與隱喻風格
圖標的設計可以使用正負形和隱喻，來讓圖標更加有耐人尋味的看點。
抖音：抖音的產品圖標是一個音符，但是不知道大家是否發現，下面圓形的負空間也是一個音符，所以顯得非常巧妙。為了增加動感還加了紅和藍綠色的類似3D的動感效果。
Keep：Keep 產品圖標是一個K，但是同時也是一個人抬著腿正在鍛煉。
Skillshare：Skillshare 是一個技能交換平臺，第一眼看是兩個手像太極一樣交換著技能，同時也是該產品的首字母：S。
△ 抖音、Keep、Skillshare、OFO的產品圖標
折紙風格
折紙的效果會讓人感覺很立體，所以很多產品也選擇了折紙效果（比較扁平的手法）來設計產品圖標。
Calendar：這個產品的產品圖標是一個正在翻頁的日歷，非常簡潔明了。
Snapseed：除了扁平的設計之外，使用了長投影的設計風格。這個長投影也是扁平化的設計。
Netflix：Netflix 的產品圖標是該產品的首字母N，這個 N 用了一些陰影來表示立體感。
繪聲繪影：同樣是用了長投影和折紙效果，顯得非常清新。
△ Calendar、Snapseed、Netflix、繪聲繪影的產品圖標
填充圖標風格
產品圖標使用填充圖標風格是非常合適的。填充圖標風格具有簡潔和識別性強的特點。這種 ICON 的可擴展性更高，比如在一些特殊節日時可以用手繪、拼貼等形式來做輔助圖形。所以很多公司都鐘愛填充圖標風格。
Lucking：這是一個線上咖啡外賣的產品。它的 APP圖標使用了一個鹿回頭的造型。這個鹿造型簡潔，非常有識別性。
Tinder：這是一個國外社交APP，通過一個火的填充圖標讓人第一時間記住這個產品。
youtube：這是國外著名視頻APP，它的產品圖標同樣使用了填充圖標風格，是一個有電視機隱喻的圓角矩形，并且中心是一個播放鍵，簡明扼要地說明了這個產品的功能。
Twitter：國外著名社交APP，它的 icon 同樣使用了填充圖標風格，非常簡潔好記。
△ Lucking、Tinder、Youtube、Twitter的產品圖標
線性風格
由于目前設計流行趨勢，很多產品圖標都會采用扁平的設計風格。扁平除了填充的圖標之外，還有一種非常流行的形式——線性風格。線性風格一定要注意不要太細，因為手機和電腦設計環境顯示尺寸不同，如果我們做得太細，那么在手機上看會非常尖銳，顯得不太好點擊。
Airbnb：Airbnb 的背景是一個微漸變，線性風格是一個曲線組成的 A，同時也是一個小蜜蜂。
LOFTCam：為了凸顯文藝產品調性，使用了偏細的線條，同時使用了兩種主題色。
NextDay：同樣非常文藝的產品，使用了比較抽象的手法。這個 ICON 是一個牛奶，突出了這個產品必須今天看，否則就如牛奶一樣會過期。
VUE：這是一個攝影產品，同樣應用了黑色的微漸變，前面是非常前衛的45度長短不同的線。
△ Airbnb、LOFTCam、NextDay、VUE的產品圖標
LOWPOLY風格
我曾介紹過 LOWPOLY 這種設計風格，這種風格如果應用在產品圖標上同樣非常搶眼，因為用戶的手機上可能安裝了很多 APP，那么第一眼掃過去一定會注意到最亮眼的圖標。而 LOWPOLY 因為本身造型的獨特性非常吸引眼球。當然 LOWPOLY 也有它的問題，比如容易讓圖標失去細節等，所以很多產品圖標都是使用 LOWPOLY 作為圖形的背景。
潮自拍：潮自拍使用了暖色鄰近色漸變的 LOWPOLY 作為背景，前景使用了一個很潮的S。
潘通色：潘通色本身的最大特征就是色卡，所以使用了 LOWPOLY 的形式。
美妝相機：通常 LOWPOLY 的形式是方塊，而美妝相機使用了三角作為基礎元素，很特別。
人人：人人的產品圖標使用了不同的矩形斜度45°，增加了設計的速度感。
△ 潮自拍、潘通色、美妝相機、人人的產品圖標
微漸變風格
微漸變也是非常常見的表現手法。在擬物被扁平替代以后，我們會發現無法表達空間上的 Z軸。所以用輕微的漸變表現圖片的深度非常流行。我認為微漸變可能是眾多圖標設計風格中最有競爭力的一種。
每日優鮮：每日優鮮在背景上用了很多炫彩的圓球，由于促銷時段在原有圖標上增加了一個雙十一的小標識，在手機中非常搶眼。
陌陌：陌陌圖標如果設計成扁平你還會注意到它嗎？使用線性圖標會使得圖標厚度感不夠，而微漸變可以非常好地解決這個問題。
全民K歌：使用了紫紅色的漸變來塑造一只鸚鵡，如果遇到其他使用場景可以使用扁平版本，這樣會讓產品圖標的使用更加靈活。
Mindnode：這款腦圖軟件的產品圖標使用了三組鄰近色的漸變，同時使用了非常微妙的陰影。
△ 每日優鮮、陌陌、全民K歌、Mindnode的產品圖標
卡通風格
卡通風格的產品圖標會讓用戶更有好感，所以我們可以為產品設計一個可愛的卡通角色。好多決策者會認為卡通是一種低齡的審美，其實是錯誤的?？ㄍ梢哉f是一種通吃的風格，比如騰訊就是以一個企鵝作為品牌形象開始拓展自己的版圖。而卡通本身有不同的風格，比如擬物類的卡通、扁平類的卡通等，也會給人不同的感受。所以如果我們的產品要使用卡通作為產品圖標，最好以目標用戶群的喜好作為標尺。
開心消消樂：開心消消樂是一個休閑游戲，游戲類APP 的產品圖標通常是使用擬物風格，這樣可以最大地吸引玩家的注意力和興趣。
映客：映客是直播APP，通常用戶年齡不是很大，所以使用了一個很可愛的貓頭鷹作為產品圖標。
Waze：Waze 的產品圖標不僅可愛而且突出了 Waze 的地圖查找功能。
BOO!：BOO! 是一個兒童社交產品，用戶比較低齡，所以更適合使用可愛的卡通作為圖標。
△ 開心消消樂、映客、Waze、BOO!的產品圖標
如果我們想設計一個小圖標，那么我們可以把畫布放大到400％來設計。同時可以使用網格和參考線來作為我們設計的輔助。網格在很多軟件里都有，比如在 Illustrator 中點擊視圖 > 網格，即可開啟網格了。參考線模板則需要下載第三方設計的模板，比如 Material Design 的參考線模板就有正方形、圓形、圓形和長方形結合等不同形式。如果對齊模板中的形狀，即可得到面積相等的長方形、正方形、圓形。這對我們構建視覺上面積相等的圖標很有益處。
△ 網格和參考線
△ 不同形狀的網格布局
△ 在網格的輔助下可以設計出大小均衡的圖標
蘋果啟動圖標尺寸
蘋果需要很多尺寸的圖標用在不同的場景上，比如說在網頁端打開iTunes會使用512px的大圖標，而在手機、iPad桌面上的圖標大小也不同。除了尺寸不同，這些圖標的圓角也有不同的數值。為了簡化這部分的難度，蘋果為開發者提供了模板，有了模板就不用記那么多東西啦。蘋果官方HIG 下載的這套資源中，有 Template-AppIcons-iOS 這個文件，這個文件提供了 PS、Sketch、XD等不同格式。我比較推薦使用 PS 的格式。
打開這個文件，用我們自己設計的啟動圖標替換掉任意智能對象里的內容。那么打開智能對象就是一個1024x1024px的矩形畫布，把我們的產品圖標放在這里，保存這個智能對象再關閉它就可以了。這時，你會發現所有尺寸的圖標都變成了我們的圖標。然后我們把背景隱藏，切出這些圖標即可。如果是 AI 完成的產品圖標可以直接 Ctrl+C 然后在 PS智能對象中 Ctrl+V復制過來就行。
△ Template-AppIcons-iOS
安卓啟動圖標尺寸
安卓啟動圖標同樣需要很多尺寸，主流是需要：1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px這六種。我們提供給程序員的是直角的矩形，然后程序員通過代碼進行切割變成圓角圖標。在這里我也做了一個智能對象的模板送給您，只要替換其中的智能對象圖像，換成您的1024x1024px圖標保存即可。
△ 安卓圖標模板
設計產品圖標前，首先我們需要找一些和產品氣質相符的圖片制作情緒板。通過情緒板我們可以感受到產品的調性，然后我們從中提取一些形狀和色彩作為我們產品圖標的主要造型。這里我舉我的產品每日名畫的例子，每日名畫是一個美術方面的APP，所以我找了一些和美術相關的圖片。
△ 關于美術的情緒板
下面我開始在 AI 設計產品圖標了。我建立了一個1024x1024px的畫布，然后根據盧浮宮前的金字塔建筑設計了一枚抽象的產品圖標，它內在的符號是：帶領大家走進藝術的殿堂。同時我也增加了一些自己對美術的含義，如藝術來源于生活高于生活等。這些都寫在了設計說明中。
△ 在Illustrator中設計產品圖標
然后我給這枚圖標加入了蒙德里安的配色，增加產品的藝術感，并最終完成產品圖標的設計。這個圖標也可以作為該產品的企業形象（VIS），將來產品周邊都可以使用這個圖形。
△ 最終定稿的圖標
由于產品會首先上線到蘋果設備上，所以我下面把 AI 繪制的產品圖標全選復制，然后打開圖標模板中的智能對象（雙擊圖標模板中智能對象圖層的縮略圖），粘貼過來。粘貼的時候系統會提示選擇粘貼過來的方式，這里我們選擇：智能對象。然后保存并關閉智能對象，這時回到模板PSD 中，就看到了這個效果。
△ 替換了模板中智能對象的效果
接下來隱藏背景圖層，然后按下鍵盤上的 ctrl+Shift+Alt+S，調出存儲為Web所用模式，選擇保存到桌面上，格式選擇僅圖片。關閉 PS，打開桌面上的文件夾，就看到圖標被我們工整地切好了。
△ 產品圖標的切圖文件
第二種圖標被稱為系統圖標。系統圖標指的是擔負著一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復雜。比如微信底部四個系統圖標：「微信」、「通訊錄」、「發現」、「我」就使用了比較簡潔的線性風格。
當然系統圖標也不一定要做的非常無趣，比如我們常用的58同城APP 中就有大量的系統圖標，在保證識別性的前提下使用了多彩的顏色和不同的造型，顯得非?；顫姟Ｋ韵到y圖標同樣可以做得有趣和多樣，前提是保證圖標的可識別性。
填充圖標（Filled icon）
填充圖標是以面為主要表現形式的圖標。在微信APP 底部的 tab欄中，未選中的圖標是線性圖標，而選中態則是填充圖標，并且會變成較為鮮亮的顏色暗示用戶該功能被選中了。填充態圖標占用的面積要比線性圖標多，所以更加顯眼。實際上，在最新的蘋果設計規范中，蘋果也建議開發者在 APP底部 Tab欄中全部使用填充圖標，點擊態通過改變填充圖標的顏色進行區別。這是因為填充圖標看上去像可點擊的。
△ 圖為填充圖標
線性圖標（Outlined icon）
線性圖標的表現形式是線條，在系統圖標里通常是由統一粗細的線條組成。這里可能很多新朋友不明白為什么要使用統一的粗細，這是因為通常系統圖標并非單一出現，而是成組使用。比如微信底部的四個 tab圖標、網易云音樂頂部導航欄的圖標等。在一個場景下的幾個同等重要的圖標，如果線條粗細不一致，很容易造成它們存在權重上差異的感覺。所以我們在繪制線性圖標時，線條通常都會使用統一的粗細。
△ 圖為線性圖標
圓角圖標（Rounded icon）
無論是線性還是填充的圖標，在圖標的邊角處使用圓角都是圓角圖標風格。圓角圖標的好處就是讓人覺得很溫柔，可以非常舒適地點擊它。所以很多產品的圖標都會使用圓角圖標。
△ 圖為圓角圖標
尖角圖標（Sharp icon）
無論是線性還是填充的圖標，在圖標的邊角處使用尖角都是尖角圖標風格。尖角圖標的好處是讓人感覺到有棱角，視覺上會多凝視幾秒。并且給人以正式的感覺，所以像銀行、辦公等APP 中都較多地使用尖角圖標風格。
△ 圖為尖角圖標
斷線圖標（Breaking Lines）
如果我們的線性圖標顯得太死板，我們可以使用斷線這種方式來讓它變得俏皮。斷線圖標就是線性圖標的一種風格變化，它的特點就是在線條中出現斷口。但是這個斷口并不是看起來那么簡單，它得遵循幾個規則：第一，斷線開口只有一個，否則圖標會無法識別；第二，斷線開口位置不應該在中心線上；第三，斷線開口盡量在轉折處；第四，斷線不應該太過于瑣碎。
△ 土豆APP的標簽欄使用了斷線的風格
雙調圖標（Two-Tone icon）
如果我們把圖標簡單地分為線性圖標和填充圖標，是不是太無聊了？比如我們要設計一個 iOS平臺的 APP，它的底部Tab欄就一定是未選中態是線性的，選中就是填充的嗎（或者全部是填充態，僅僅改變顏色）？這也太無聊了吧！所以又出現了雙調圖標的設計風格。即：雙調圖標的外形還是線性圖標，但是用透明度很高的同類色填充到線性圖標內部空間里。這樣的圖標顯得俏皮可愛，并且感覺非常透氣。
△ 圖為雙調圖標
動態圖標（Motion）
動態圖標是非常有趣的，如果靜態圖標不足以讓用戶感受到新鮮，那我們不妨給圖標增加動效。比如 QQ應用中底部 Tab欄的圖標點擊其中一個的時候，其他圖標會「偷看」選中態圖標的方向。除了底部標簽欄之外，很多 APP 點擊能觸發導航的「漢堡包圖標」，點擊時也會有一個從導航圖標變成返回圖標的動畫。這都是非常能夠調動用戶好奇心的。
△ Material Design中的動態圖標
我們在使用 Photoshop 工具的時候會感嘆，畫筆比鋼筆好用，橡皮比布爾運算好用。那么我們在畫圖標的時候能不能使用畫筆這樣的工具來繪制圖標呢？在 Photoshop 里使用畫筆工具和橡皮工具、涂抹工具、選區工具的填充、油漆桶工具制作的圖形，以及從網絡上復制過來的jpg圖片文件，這些都是像素圖形。它們是計算機記錄每一個點的顏色來呈現圖像的。這也是為什么我們把一張照片放得特別大它就虛了的原因。而我們通過 Photoshop 中的鋼筆工具、布爾運算、貝塞爾曲線、形狀圖層制作的圖形，以及 Illustrator 復制過來的圖形、Sktech繪制的圖形等，都是矢量圖形。它們是計算機記錄一個錨點到另一個錨點的方向、位置、色彩來呈現圖像的。所以像素圖形變化多端、顏色變換豐富、細節更多；矢量圖形則文件較小，并且具有隨意放大縮小都不虛的能力。因為每個錨點之間的方向、位置都是相對的，放大和縮小不受影響，而像素圖形記錄每個點的色彩，比如一張2000px x 2000px的圖片，縮小到1000px x 1000px就會損失一千個像素信息。我們繪制圖標比較適合用矢量圖形來設計，因為我們可能需要隨時調整圖標的大小，并且在不同分辨率的適配中也更加方便。
布爾運算聽著很可怕，其實非常簡單，布爾運算是數字邏輯推演法，主要有數字邏輯的聯合、相交、相減。在我們使用的平面軟件中引用了這種邏輯運算方法來使基本圖形通過聯合、相交、相減等數學計算變成新的造型。比如兩個圓形相減可以得到一個月亮的造型，這就是布爾運算了。那么為什么叫布爾運算呢？布爾指的是喬治·布爾（George Boole），一位19世紀最重要的數學家，為了紀念布爾在符號邏輯運算中的杰出貢獻，所以我們將這種運算稱為布爾運算。布爾運算在 Photoshop、Illustrator、Sketch、Adobe XD、After Effects等我們熟悉的軟件中都有，并且操作基本一致。
布爾運算的核心就是兩個形狀的關系：即Union（并集）、Intersection（交集）和Subtraction（差集，包括A-B和B-A兩種）。這些關系有點像我們初中學過的數學，應該比較好理解。但是很多軟件中對于布爾運算的關系翻譯不同，所以可能大家會有些不適應。比如在 Photoshop 中布爾運算被翻譯成：合并形狀、減去頂層形狀、與形狀區域相交、排除重疊形狀。而在 Adobe XD 中則翻譯成：添加、減去、交叉、排除重疊。雖然名字不同，但是功能是相同的，所以大家在學習新的軟件時不妨先找一下布爾運算。
△ 圖為布爾運算不同運算模式
貝塞爾曲線是用于二維圖形繪制的數學曲線。1962年法國工程師皮埃爾·貝塞爾發表了貝塞爾曲線，它的誕生主要是為了汽車的主體設計繪制圖形的。貝塞爾曲線是繪制矢量圖形時的重要工具，我們使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。貝塞爾曲線由錨點和線段組成，點擊錨點就會出現兩個手柄，一邊是控制前面的線條走向，另一邊是控制后端的線條走向。同時我們也可以通過增加錨點工具和刪除錨點工具進行調整。要想學好平面電腦繪圖軟件，貝塞爾曲線是必須修煉的一課（練習貝塞爾曲線的在線游戲：https://bezier.method.ac/）。一般來說，二維平面軟件都有貝塞爾曲線的痕跡，鋼筆工具、增加錨點、刪除錨點、轉換點工具，這些都是平面軟件的標配。并且，貝塞爾曲線和布爾運算可謂是一對好朋友，在繪制矢量圖形時可以使用它們輕松地繪制出準確的造型。
△ 圖為貝塞爾曲線繪制方法
那么我們使用什么軟件來繪制圖標呢？這里我建議使用 Illustrator。首先，UI設計師使用不同的軟件來設計頁面，目前主流是 Photoshop和 Sketch，也有很多設計師選擇 Adobe XD。而這些軟件都是兼容 Illustrator 的，所以使用它來繪制圖標非常有靈活性?？赡苣鷮?Illustrator 并不熟悉，不過沒關系，我們在這里只需要了解它與圖標繪制功能相關的功能即可，比如鋼筆、布爾運算、屬性面板、描邊、填充、混合工具等，并不需要學習非常深入。所以大家不必緊張。
笑臉圖標
笑臉圖標的設計步驟：畫出一個正圓；接著畫一個小圓，然后 ctrl+F復制平行移動到旁邊，然后右鍵編組。接著，同時選中大圓和編組的小圓進行水平居中對齊。我們繪制一個圓形，然后通過布爾運算減去一個矩形得到半圓形組成嘴，完成。
△ 笑臉圖標
對號圖標
對號圖標的設計步驟：使用矩形工具畫出一個長方形，然后復制，將復制后的長方形向右上移動相同的距離，使用布爾運算剪切，旋轉45°后變成一個對號。繪制一個正方形，使用路徑選擇工具選中，拖動圓角的圓點拉出圓角得到圓角矩形。對號和圓角矩形進行布爾運算，完成。
△ 對號圖標
WIFI圖標
WIFI圖標的設計步驟：繪制多個圓形并且通過布爾運算相加減得出三個圓圈嵌套的靶子造型。通過旋轉過的45°矩形和之前圖形布爾運算得到 Wifi圖標，完成。
△ WIFI圖標
地理位置圖標
地理位置圖標的設計步驟：選擇矩形工具單擊畫面輸入數值，建立一個100px的圓形。然后選擇這個圓形復制它，然后等比例縮小它，和之前的大圓進行布爾運算相減，得到環形。繪制50px的矩形，用對齊工具放在環形的左下方。旋轉45°得到地理圖標，完成。
△ 地理位置圖標
云彩圖標
云彩圖標的設計步驟：繪制兩個大小不同的圓形，使用對齊工具進行底部對齊。繪制一個矩形，同樣底部對齊。合并形狀，完成。
△ 云彩圖標
眼睛圖標
眼睛圖標的設計步驟：繪制出一個正圓。復制這個正圓形，然后按著 Shift+方向鍵下鍵，并通過布爾運算得到眼睛外輪廓。繪制兩個圓形，通過對齊工具和布爾運算工具得到最終眼睛造型，完成。
△ 眼睛圖標
鈴鐺圖標
鈴鐺圖標的設計步驟：首先用圓形和矩形合并組成主體；使用矩形和圓形進行布爾運算繪制鈴鐺底部和鈴鐺頂部的零件，然后進行合并形狀；鈴鐺底部的半圓使用圓形和矩形布爾運算，完成。
△ 鈴鐺圖標
簡易齒輪圖標
簡易齒輪圖標的設計步驟：通過兩個圓形進行布爾運算得到環形。繪制一個矩形，上下復制在圓形上，然后把它們倆編組和環形使用對齊工具進行水平垂直對齊。復制矩形編組并旋轉90°，得到一個十字形。復制這個十字形并最終全部合并形狀，完成。
△ 簡易圖標
齒輪圖標
齒輪圖標的設計步驟：用 AI 的爆炸圖形和圓形進行布爾運算畫出齒輪；用兩個圓形進行布爾運算做出里面的零件，完成。
△ 齒輪圖標
螺絲刀圖標
螺絲刀圖標的畫法：用圓形和矩形做出螺絲刀主體；用矩形旋轉并復制再布爾運算做出凹槽；使用矩形做出前面的造型，完成。
△ 螺絲刀圖標
蘋果圖標
蘋果圖標的畫法：繪制一個六邊形。將水平中間兩個點向上移動。在中心線上下建立兩個錨點，并且向下移動。將下面兩個點向內分別移動。使用圓角工具將每兩個相同的點一組一組拉成圓角。繪制一個矩形并且旋轉45°，然后將左右兩個點向內拉得到菱形。用圓角工具使菱形變成葉子造型并且旋轉45°。使用一個圓形和蘋果造型相切，完成。
△ 蘋果圖標設計過程
放大鏡線性圖標
放大鏡線性圖標的畫法：繪制正圓。繪制一條直線。用屬性面板里的對齊工具把它們倆對齊。用描邊面板里的屬性將描邊改成圓頭，然后旋轉45°即可。
△ 放大鏡線性圖標
時鐘線性圖標
時鐘線性圖標的畫法：繪制正圓。繪制一個矩形，對齊圓形中心。用增加錨點工具在矩形左和下邊上增加兩個錨點。用直接選擇工具框選沒用的線條，刪除即可。
△ 時鐘線性圖標
點贊線性圖標
點贊線性圖標的畫法：繪制兩個矩形，并用直接選擇工具選擇重合的四個錨點，在屬性面板里使用對齊工具讓它們完全對齊。將大的矩形底部錨點向左移動。繪制一個矩形并和大的矩形左對齊。用直接選擇工具選中直角，拖動圓角小圓點讓它們變成圓角，完成。
△ 點贊線性圖標
如果您掌握了以上填充態圖標的設計方法，相信其他圖標的設計只要以此及彼的思考，就可以完成。比如線性圖標，在繪制線性圖標時，我們首先會建立一個半透明的矩形來固定圖標應該繪制的范圍，比如「40px」。然后我們把填充關閉，只使用描邊來繪制線性圖標即可。繪制完以后我們無需保存文件，僅通過 Ctrl+C的復制快捷鍵，然后打開 Sketch 或者 Adobe XD 就可以使用 Ctrl+V 將圖標粘貼過去了。但是，如果您使用 Photoshop 做界面設計，可能會多兩道手續，首先就是線性圖標需要擴展才可以復制到 Photoshop 中。將圖標復制一份（擴展之后的圖標不方便修改，所以要留著可修改版本），然后點擊對象菜單 > 擴展，點確定，就可以把原本是沒有閉合的路徑改為完整的形狀。
△ 在Illustrator中的擴展
然后復制，打開 Photoshop 粘貼會打開提示框，我們可以選擇把圖標粘貼成為像素、智能對象、路徑、形狀。如果粘貼成像素的話，那無疑對修改是非常不利的。如果粘貼成智能對象，雙擊智能對象會回到 Illustrator 中修改，但是也有一定缺點，那就是智能對象不能直接在 Photoshop 中進行調整。如果粘貼成路徑也不是很方便，所以最好是我們將 Illustrator 中繪制的小圖標粘貼成形狀。選擇后，圖標就粘貼成了形狀圖層，我們可以在 Photoshop 中對它進行布爾運算、錨點調整等操作了。
△ 粘貼到Photoshop中的選項
然而，我們會發現圖標粘貼到 Photoshop 中，橫豎的路徑會出現虛邊的情況（圓角和斜線是允許一定的虛邊出現的，但是直線不可以）。這種虛邊有可能會影響用戶的體驗，我們必須把它消滅掉。第一種方法：在 Photoshop 中我們可以用直接選擇工具后界面上方的對齊路徑功能，給它打鉤來嘗試修復這個問題。第二種方法：我們可以使用直接選擇工具選中虛掉的某兩個錨點，然后按 Ctrl+T（自由變換），再按鍵盤的上下或左右「搖一搖」，路徑就會清晰了。第三種方法：也可以使用幾像素的矩形進行布爾運算強行對齊。三種方法一定能夠讓圖標的橫豎路徑沒有虛邊，達到完美的效果。當然 Sketch 和 Adobe XD 都是矢量工具所以復制后沒有這個問題。
在 Photoshop 中使用「搖一搖」的方法對齊路徑
在 Adobe XD 中，圖標無需進行擴展，并可以實時調整描邊粗細等屬性。
標簽欄圖標
在蘋果和安卓APP 的底部，一般都會有一個放置重要功能的常駐欄，在 iOS中被稱為標簽欄（也叫做Tab欄）。一般，Tab欄的圖標是2-5個。每個圖標的區域平分整個 Tab欄寬度，底部會有一個22px（11pt）的文字注釋。當然如果圖標釋義較為清晰，也可以為了保持設計感去掉文字注釋。如果我們是以 iPhone6/7/8尺寸設計界面，那么我們的標簽欄圖標尺寸應該是60px（30pt）左右，可以基于這個范圍來設計我們的圖標。
△ 互聯網產品中優秀的標簽欄圖標設計
每個 Tab欄的圖標都應該設計一個選中狀態，可以做樣式的變換也可以做顏色的改變，總之要讓人知道當前所在的頁面是哪個。如果您的 Tab欄由五個 icon 組成，那么可以在中間放置比較重要的功能，并做出突顯的樣式，比如使用一個圓球當作背景。還要額外注意，圖標的選中態樣式要和中間突出狀態的圖標保持區別，以免發生誤會。
導航欄圖標
在蘋果APP 的頂部區域，我們稱之為 Navigation Bar，就是導航欄。導航欄左右一般都會有圖標，如果是二級頁面，左側一般是返回圖標。安卓也有類似的設計。那么我們在設計這種圖標的時候一定要保證所有導航欄上的圖標大小和風格都是一致的。如果以 iPhone6/7/8尺寸設計界面，那么導航欄圖標的尺寸大概是44px（22pt）左右。
△ 互聯網產品中優秀的導航欄圖標
金剛區圖標
在我們逛淘寶和美團的時候您會發現，在它們頁面首頁都會有一個區域放置很多分類，一般是6-8個大小一樣的圖標，有可能是圓形，也可能是不規則形狀。這個區域其實在蘋果和安卓規范里并沒有，屬于設計師自創的規范。這個區域經常有八個圖標組成，被稱為「八大金剛圖標」，后來很多產品在這個區域并不使用8個圖標，我們就稱它們為金剛區了。金剛區圖標的設計風格應該盡量是微扁平、輕擬物的感覺，這樣會有更好的點擊感。尺寸方面，金剛區并沒有規范，所以大家可以以設計稿最終效果為準。
△ 互聯網產品中優秀的金剛區圖標設計
圖標設計是 UI設計中非常重要的一環，因為除了文字和圖片的排版之外，在扁平時代我們能夠傳遞給用戶情緒和設計感的通道就是頁面中的各種圖形和圖標了，如果做不好圖標，用戶就將在使用界面時失去樂趣。所以，我建議每位 UI設計師都需要在平時做大量的圖標練習。在不同的圖標風格中，學會使用各式各樣的武器。
文章來源：優設網 作者：郗鑒
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
借著疫情期間在家休假的時間，將平時用到的一些零零散散的圖標繪制方法與思路進行了一次全面的匯總與沉淀。從實習期間畫一組圖標的無從下手，每一個圖標看起來都像是散裝的一樣，到后來慢慢學習與練習，到現在變得了解了圖標的繪制流程，過程也是比較麻煩，因為很少有全面的圖標講解文章，都是看一篇懂一點，然后在揉到練習當中。所以本篇文章盡量將圖標進行細致一些的流程說明，有不足之處還望指教。
圖標可用性，顧名思義就是圖標繪制出來是否能被用戶所看懂并快速識別，是否可以為業務賦能。為此我總結出了四條圖標繪制的評判標準。
用戶是否能在某頁面上迅速找到該圖標，凸顯性的目的是可以快速查找，幫助用戶做選擇。圖標在識別的速度上遠遠大于文字，所以在一些頁面中的重要功能使用圖標的目的是為了吸引用戶的注意力，讓重要功能得到凸顯，提高重要功能的點擊率。
圖標的目的是要讓用戶猜出他看到的圖標所表達的意義，有什么作用，以及點擊后會出現什么樣的場景，發生什么樣的事情。所以一個圖標的好與壞最重要的因素就體現在這里：圖標的可識別性與可預知性。
影響圖標可識別性的三點因素
3. 美觀度
圖標是否美觀，對用戶是否有足夠的吸引力。在《設計通用法則》一書中有一條設計法則是：美即適用效應。不管任何事物，美麗的外表都會給人帶來好感，讓人覺得這種事物在任何方面都非常美好。作為設計師，把一件事物美觀化是一件終生的必修課，用戶對圖標或者界面的第一印象就是始于顏值。
4. 業務屬性
圖標是否符合業務屬性，是否可以喚起用戶的使用情緒，提高點擊率，起到為業務賦能的作用。在界面中，我們設計的圖標最終目的不只是讓用戶覺得它美觀，而是要為我們的產品賦能，什么是為產品賦能呢？通俗來說就是使圖標能夠提升點擊率從而給公司創造收益。
圖標如何為產品賦能呢？
1. 線性圖標
線性圖標，顧名思義，即圖標是由直線、曲線、點在內等元素組合而成的圖標樣式。線性圖標具有辨識度高，清晰唯美，簡約易看等優點，線性圖標不會對頁面造成太多的視覺干擾。缺點是：線性圖標的創作空間較少，太復雜的線性圖標看起來會讓人感覺到累。
2. 面性圖標
面性圖標，即使用對圖形內容進行色彩填充的圖標樣式。面性圖標是現實生活中物體的縮影，優點非常多，比如表意能力強，細節豐富，色彩豐富，情緒感強，視覺突出，創作空間大等。面性圖標可以讓用戶迅速定位圖標位置，快速預知點擊后的狀態。但是面性圖標在頁面中不可過多出現，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。
3. 混合型圖標
在設計圖標類型的時候，不一定局限于單純的線性與面性，也可以兩者結合，讓圖標即有線性描邊的輪廓，還有色彩填充的區域，混合型圖標可以讓頁面變得更加有活力，同時還可以吸引用戶的注意力，美觀與創意性強。但是混合型圖標在商業產品中要謹慎使用，因為使用不當會讓頁面變得雜亂不堪，用戶無法識別圖標表達的語義。
色彩情緒即顏色心理，指不同波長色彩的光信息作用于人的視覺器官，通過視覺神經傳入大腦后，經過思維，與以往的記憶及經驗產生聯想，從而形成一系列的色彩心理反應。在任何場景下合理使用色彩心理可以調起用戶情緒，還可以讓用戶產生聯想進而快速識別。
在設計圖標的時候，合理的運用色彩情緒，會使圖標更具有科學性，可以讓用戶在使用的過程中更加自然、舒服，同時也會增加用戶的識別速度喚起用戶的使用情緒。
色彩情緒表
在配色時，我們采用更具備科學性、更符合人類感官的 HSB 系統進行配置。在根據主色配置漸變色時，我們經常是在主色的基礎上加白或者加黑。但是只加入大量的白或者黑就會改變原本色彩的明度與飽和度，從而使畫面顯得霧蒙蒙的，不夠清晰通透。正確的做法是在給主色變亮減暗的同時，改變主色的飽和度。在 hsb 色相條中，最亮的三個顏色分別是，藍紫色，青綠色與黃色，如果需要加亮主色就在混白的同時將藍色向青色改變色相，如果需要減暗則是相反，這樣在調制漸變色變化的過程中不會出現太臟的顏色。
常見的色彩搭配
中性色（黑白）+主色、主色+點綴色、主色+透明度、單漸變、雙漸變錯層、撞色疊加穿透等效果。一般常用的就是中性色+主色、主色+點綴色。
點綴色配色
我們在繪制圖標的時候，應該將圖標的每個像素盡量對齊于像素點，這樣導出圖標時像素的邊緣不會出現鋸齒，不會出現過于模糊的情況。通常在繪制時我們應該去除繪制軟件中 x 與 y 軸，寬（w）與高（h）的小數點，這樣就可以避免無法對齊像素的情況。
在繪制兩個或者以上的圖標時，為了避免多個圖標出現大小不一的情況，我們應該使用由谷歌材料設計語言提供的圖標參考線進行繪制，使用圖標盒子可以讓一整套圖標在視覺效果上更加統一和諧，不會出現一大一小一長一短的情況。
使用方法
先繪制一個 152*152px 的正方形，一個 176*176px 的正圓形，一個寬 176*128px 的水平矩形和一個 128*176px 的垂直矩形，圓角為 4px，然后將這個四個形狀進行水平居中對齊，之后得出一個圖標的參考線。
在寬度相等的情況下，正方形的面積要大于正圓的面積，所以在繪制圓形圖標時應該將圓形的上下左右四個頂點頂齊與圖標盒子正方形區域的四條邊；在繪制方形圖標時應該將方形的四個角點頂齊與圓形參考線的外圍邊；在繪制橫向矩形與縱向矩形圖標時，應該將圖標的左右邊或者是上下邊控制在正方形的參考線之內，這樣矩形圖標繪制出來會更加的圓潤，相對于其他的形狀圖標更加匹配。
我們繪制的圖標必須要保證清晰度，可辨別性。不管是在強光下還是正常光下都需要良好的可讀性。這就需要圖標不論是自身元素之間的對比度還是和頁面底板背景之間的對比度都需要很好的可讀性。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節，還需要確保圖標中的每一種顏色都是可見的。第二就是將圖標拿到強光下進行觀察，在強光下是否可以看清圖標的主題結構，圖標是否有足夠的辨識度。
在繪制圖標時，我們可以參考 WCAG 2.1：圖形和用戶界面組件的對比度至少為 3 : 1 的標準進行相應配色，以達到良好的可視狀態。
可訪問性測試：https://webaim.org/resources/contrastchecker/
在繪制多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統一性。在一整套產品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內容也不同。這時，圖標一致性的意義就體現出來了，根據格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上保持統一匹配。我們傾向于將彼此相似的元素視為同一個分組，相似性可以幫助我們組織和分類頁面里的元素對象，并將它們與特定的含義或功能相關聯。有不同的方法可以使元素被認為是相似的，這些方法包括顏色、大小、形狀、紋理、尺寸和方向的相似性。
圖標內容的統一會讓用戶明白相似的圖標所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重，邊角的大小，配色方案，細節層次和設計元素在整個合集中是否是不變且一致的。
呼吸感的意思就是適當留白。在設計中，適當的留白可以突出主體內容，讓內容具備易看性。不管是圖標還是界面，元素與元素之間都應該存在一定的間距。在圖標的繪制過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多。圖標是一個物體的簡略縮影，目的是為了表達內容，讓用戶快速理解，但是在有限的空間中，太過復雜的細節會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過復雜難以識別。
布爾運算在設計行業中被得到廣泛的運用，比如工業設計，影視后期，logo 設計等，布爾運算具有一致性與規范性的優點。我們在設計面性圖標的時候可以合理使用布爾運算進行繪制，這樣繪制的圖標具有吸引力和說服力。
在頁面中，有需要吸引用戶點擊的圖標，也有起到輔助作用的指示圖標，還有引導用戶操作的圖標，這些圖標在頁面中占據著不同的地位.在所有圖標中，有色圖標強于無色圖標，多色圖標強于單色圖標，面性圖標強于線性圖標，帶背景圖標強于無背景圖標，在設計圖標的時候應該根據業務需要進行視覺強弱不同的設計。
如文上所說，圖標采用與業務相符合的色彩搭配會讓用戶在使用的過程中更加自然、舒服，同時也會增加用戶的識別速度，喚起用戶的使用情緒。一個圖標的繪制是否具備商業價值也恰恰體現在這里。
如下圖所示，左圖是斗魚直播 APP 的截圖，右圖是京東金融的圖標截圖。這兩款產品的業務以及所對應的用戶群體完全不一樣，斗魚是一款直播的產品，直播面向的用戶群體是青少年，所以整體的產品調性是：萌、活潑、多彩、絢麗、時尚等，斗魚直播的圖標繪制需要面向年輕人，色彩的高飽和與有趣的元素來抓住用戶的眼球。但是京東金融是一款理財的產品，面向的用戶則是中老年，大多數都是有一些存款的人，這些人不需要斗魚那樣花里胡哨的元素，他們只在乎這個產品是否安全，利息是否高，所以京東金融這個產品的整體風格就需要偏向于：安全、高端、大氣，這樣才能給用戶從視覺上營造信任感。我們設計圖標時通常使用產品的調性作為主風格，但是像美團淘寶這些業務眾多的產品中，我們就需要根據產品下的細分業務進行風格定位，然后設計中相應融入產品的品牌元素，使用合理的色彩情緒等讓圖標變得更符合業務的風格。
當我們的圖標繪制完成后需要測試這一組圖標的重心是否統一，常用的方法是使用標準的正圓形和正方形來和所有繪制的圖標進行對比，保證所有的圖標重心相近，視覺統一。也可以采用不同角度的觀察法，可以從上下左右四個角度去觀察圖標，看看圖標在不同的角度下重心是否統一。
情緒板是在執行一項設計操作之前非常重要的一個步驟，情緒板并不是像設計平臺展示作品集里那樣放幾張圖片，幾個關鍵詞，而是一套對接下來設計的一個風格走向定位。根據不同的用戶人群，不同顏色的色彩情緒，不同產品的業務，將用戶調研的結果，產品的背景進行總結與思考，定位接下來的設計風格。
選取照片
觀察生活，對想畫的圖標進行照片實物造型的提取。圖標是對生活中事物的精簡概括。利用現實照片作為設計參考可以讓繪制出的圖標更真實，辨識度更高，還可以做到差異化設計。
造型勾勒
使用矢量軟件的基本圖形與鋼筆工具描著照片進行輪廓的繪制。
簡化優化
簡化草稿輪廓的結構，只保留一個物體的主要特點元素，刪除多余元素。優化圖標細節，需要時將圖標線性轉面性。
業務屬性
根據業務需要，調整圖標風格，添加質感。
無規矩不成方圓，規矩的出現可以讓一切雜亂的東西變得合理，統一起來。在設計上也是如此，規范具有統一輸出，指引細節、便于查看的好處，規范就是一組圖標中的規矩，所有圖標的繪制都按照規矩來，最終的成品就會顯得井然有序。
在制定規范時，我們通常先繪制出一個符合業務風格的圖標，然后根據這一個圖標定制后續的圖標規范，最基本的規范便是描邊寬度，斷點位置、圓角大小，主色輔色，漸變角度，點綴元素，光影角度等，在一組中的圖標需要在這些圖形屬性中進行統一，這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一合集的。
制定規范一般分為三個過程：
文章來源：優設網 作者：簫灬西人生
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一套 UI 界面當中，核心的 APP 圖標是用戶每天都要接觸、經常使用的視覺組件和交互對象。設計圖標的時候，要用到大家最熟悉的元素才能貼合用戶認知，要醒目、統一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來自著名的 Tubik Studio 團隊，他們為華為旗下的 EMUI 10 系統設計了核心的圖標系統，來看看他們的設計過程吧。
我們總不會低估一個操作系統基礎圖標，對于產品的可用性和合意性的影響。基礎圖標雖然小巧，但是對于整個操作系統而言，總是極具影響力的，因為他們是用戶界面的核心元素，幫助用戶快速直觀地在系統中定位、瀏覽、導航。但是，對于設計師而言，圖標的設計始終是挑戰，它看起來最為簡單，但實則為最為艱難的工作。
圖標需要高效，讓人一目了然，但是也要具備良好的可識別性，在傳統和創新之間達到平衡。這一次，Tubik Studio 設計團隊將要給華為的 EMUI 10 來設計圖標，而這篇文章將會為你揭示背后的設計過程。
這次的項目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來負責。這次的設計項目從最初的探索構思入手，逐漸開始繪制草圖，探索樣式，一直到最后打磨，完成設計。
為華為 EMUI 10 系統的用戶界面設計基礎的圖標
我們在 2019 年夏季，收到了來自華為的邀約，這次的項目要重新設計 EMUI 這套基于 Android 系統的用戶界面基礎圖標，這套圖標會用來適配華為旗下的旗艦手機，這些圖標將會隨著新版的系統部署到這些手機產品當中。我們的任務，是創建總計 54 款符合當下潮流趨勢的圖標，這些圖標要能夠貼合品牌和已有用戶的偏好，并且能夠吸引新的用戶。
這個圖標設計項目如今已經在當下的華為旗下手機產品中應用且部署好了，最早使用這套圖標的智能手機型號為 Mate 30 ，緊接其后的是 P40。
在整個操作系統中，這些圖標是始終位于用戶視野以內、最基礎的最核心的交互元素，通常用戶每天都會同這些核心的基礎 APP 進行交互，有時候一天多達幾十次，因此它們應當具備良好的功能性，還應該足夠美觀，給用戶帶來滿足感。同時，這套圖標的設計，也應當足夠統一，以協調的體驗切入到整個 EMUI 的設計系統當中，貼合整體的樣式特征。
所以，我們使用了一整套圖標網格系統，應對不同需求，在設計的過程中，這套網格有助于確保所有圖標外部尺寸的一致性，也保證了內部元素的統一性。
為了發掘全新的視角，我們決定從傳統的手繪圖標開始，尋找重新塑造圖標設計的方法。這些圖標所涉及到的元素，早已為全球數百萬用戶所熟知，要重新設計圖標外觀，并且還要成套且統一，這本身就是一個巨大的挑戰。
比如「電話」圖標所對應的聽筒元素、「信息」圖標所對應的氣泡對話框這樣的元素，是不可能完全拋棄重新創造的，所以我們的真正的切入點是在形態和色彩上尋求解決方案。
越是簡單的東西，重塑起來就越難。
在實際的設計過程中，我們嘗試了數以百計的造型變體，從完全放飛、非常規的的外部造型，到極其常規，大家熟知的造型解決方案，我們都逐一試過。而在色彩上的嘗試相對會顯得更加具有實驗性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來進行混搭。
當然，我們很清楚，這樣的實驗性的工作是探索過程中的一小步，但是它是必須的，是創造新設計的種子，是尋求正確答案的必經之路。
在設計過程在，有一件有趣的事情發生在設計「相機」圖標的過程中。我們嘗試過很多不同的圖標造型，不同的元素，不同的樣式，但是其中始終有一個細節是不變的，那就是右上角的小紅點。這是為了暗示用戶，華為的攝像頭模組來自徠卡，這個紅色的小點就是向其致敬的標識。
而下面的概念設計，則是強化了圖標之間的幾何輪廓的差異，從而提升圖標在智能手機屏幕上的對比度和識別度。
下一步，我們基于幾何圖形外觀差異性，設計了多種造型不同但同樣優雅的圖標。在基于這種風格概念進行延伸的過程中，我們會優先考慮圓形的元素。而「天氣」圖標明顯既不適合圓形也不適合方形來呈現，所以我們使用的是云和太陽兩種元素的組合。「錢包」圖標使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對自由的，但是所有的圖標都是遵循圖標網格，并且在視覺權重上盡可能統一。
在色彩和樣式上，我們則更加傾向于漸變。沒有色彩漸變，純扁平的圖標顯得過于幼稚和「古早」，沒有足夠的品質感，所以，我們在新的圖標設計上，開始加入漸變色彩，提升質感。
不過，在最終版本當中，我們還是保留了圖標外部的圓角矩形的外輪廓，然后將圖標元素的內徑進行了適當地縮減，漸變和核心的簡約幾何特征依然是整套設計的最高優先級。
這套設計方案展現了在整套 UI 界面中，圖標這個小元素的設計上所需要投入的精力和潛在的難度。想要圖標足夠協調、美觀、易用還要貼合品牌特征、還要區別于以往，是一件相當不容易的事情。
細節里藏著魔鬼，任何細小的元素、線條輪廓、色彩的變化都可能會在屏幕上放大、被感知到。
文章來源：優設網 作者：Tubik Studio
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如期而至，這是標簽欄控件總結的第二期。這一期真是掏空職業經驗，希望對你的工作有所幫助。
這一期我們來聊一聊標簽欄中的關鍵元素——圖標。
圖標其實存在于界面中的許多地方，但因為這一期主要分析標簽欄，所以我會借標簽欄中較主流的圖標樣式，總結一套圖標制作與落地方法。這些方法在圖標制作過程中都是相通的，大家可以舉一反三。
1. 圖標樣式
圖標具體樣式風格的定義是非常主觀的，網絡上也流傳著許多的教程教大家如何設計五花八門的圖標，所以在這里我就不再贅述了。我主要來總結一下基礎的標簽欄圖標一般有哪些樣式變化。
我調研了諸多的應用程序，發現主流的 APP 標簽欄樣式變化，大致分為以下五種。其中占比最多的是「由線型轉面型」。
調研的應用程序中，所有使用到線性圖標的應用程序，都將描邊粗細限制在 1pt-2pt 之間。
2. 圖標視覺大小
上一期我們講到，iOS 定義了一套標簽欄圖標的尺寸規范。
iOS 在這里所定義的尺寸并不是圖標文件最后輸出的尺寸，而是給設計師作圖時，針對不同圖標形狀的參考尺寸，目的是為了讓圖標的視覺大小看上去一致。
那么為什么 iOS 會根據不同的圖標形狀給出不同的圖標尺寸呢？因為 50px×50px 的正方形比 50px×50px 的圓形面積更大，所以正方形的視覺大小也會大于圓形。為了統一圖標的視覺大小，正方形要做適當的面積收縮處理。（矩形同理）
于是我們看到許多平臺都推出了圖標輔助網格規范 1。其實如果遵從「面積相等」原理，理論上所有的圖標網格都應該由下面這一套推理公式得出（以Material Design 標準圖標網格為例）：
但實際情況是，不同平臺的圖標輔助網格規范建議尺寸都有一定的差異。原因就在于，雖然有時候我們參考「面積相等」原則對圖標視覺尺寸進行了規范，但項目落地后發現視覺上可能還是有一些不協調，所以最終設計師還是會憑借自己的主觀判斷再進行微調。
記住：好的設計作品是理性的設計理論與設計師本身感性的碰撞結果，二者缺一不可。
3. 圖標輸出尺寸
iOS 規定標簽欄圖標的輸出尺寸統一為 31pt×28pt；Material Design 規定標簽欄圖標的輸出尺寸統一為 24dp×24dp。
但我們發現，在借助了圖標網格解決了圖標視覺大小的問題之后，每一個不同形狀的圖標，尺寸其實是不同的。為了方便前端落地，我們在輸出切圖文件時，要保持每一個圖標文件的輸出尺寸是相同的。該怎么辦呢？
于是我們將一組圖標都放置在一個比圖標本身略大的相同尺寸容器中。而圖標與這個容器之間的空白像素，正好也幫助我們規避了圖標落地后，切圖邊緣像素可能被截斷的現象發生，所以我們稱這個區域為「安全邊距」。
對于安全邊距的規定：Material Design 全平臺規定圖標的安全間距統一 2dp；iOS 則根據不同的圖標使用場景給出的不同的圖標網格和圖標安全間距 2。
標簽欄的圖標一般分為靜態圖標和動態圖標兩種。
靜態圖標的實現方法相對容易，可以與前端溝通確定本次項目交付的標簽欄圖標文件是采用位圖還是矢量圖。如果是位圖建議交付 .png 格式文件；如果是矢量圖建議交付 .svg 格式文件。
使用位圖時請注意以下兩點：
不同項目環境輸出的切圖套數不同
請注意：這里我所提到的倍率全都是「絕對倍率」，這個概念非常關鍵。
「絕對倍率」指的是：以上所有的倍率都是針對 @1x 設計稿下的輸出倍率尺寸。而當你使用 @2x 作圖時，為了保證「絕對倍率」不變，你的切圖輸出倍率就應該設置為 @0.5x/@1x/@1.5x 。
如果你在 @2x下作圖，卻依然保持輸出 @1x/@2x/@3x 的切圖，那你輸出的文件尺寸最終其實是 @2x/@4x/@6x。
有一點繞的話，我們以 Sketch 導出位圖切圖為例：
所以如果你日常使用的是 Sketch，也是用 Sketch 原生導出工具，那你的切圖預設應該根據你的作圖尺寸而定，見下表：
如果你日常使用的是 PS，用 Cutterman 切圖，那么 Cutterman 會自動識別你當前的畫板，然后根據它的寬（橫屏情況下是高）來設定它的基準分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖，其實都是「絕對倍率」，不用像 Sketch 當中一樣換算。前提是「設置當前畫布為：Auto（自動識別）」。
假設你在 @2x 下作圖，執意不管不顧「絕對倍率」，又忘了交代前端人員手動處理切圖尺寸的話，那你所有的切圖尺寸實際都是設計稿所需圖標尺寸的2倍。就算前端小哥幫你手動處理了切圖尺寸，每一張切圖所包含的像素信息，都比項目真實所需的要多很多，完全就是在徒增所需切圖文件的大小。
注意切圖文件大小
切記，公司的線上項目中，用戶從服務器下載的每一單位的流量都是要公司花錢的，所以許多項目管理者都是很在意控制線上文件大小的。于是壓縮切圖是 UI 必備的技能之一。
雖然圖標的文件大小一般只有幾 KB，但是項目大了難免積少成多，所以在真實項目中，不管任何切圖我都會手動壓縮一次。
這里推薦一個壓縮 .png 文件大小，但幾乎不會產生失真的免費網站 tinypng3（是我曾經深愛的一位前端小哥推薦給我的，在此表示感謝）。
位圖切圖會面臨交付的倍率圖過多、容易失真、文件大小難控制等問題，但對于矢量圖，這些問題都得到了解決。目前.svg矢量圖落地也在項目中越來越流行了。UI 可以在 Sketch 或 Ai 中制作。
一般與前端人員對接有在線圖標庫對接與本地文件對接兩種。
在線矢量圖標庫有很多，國內比較流行的是阿里巴巴矢量圖標庫-iconfont?；本地對接就是直接將文件發送給前端人員，他們會自行進行項目文件的管理與調用。
如果 .svg 切圖輸出后，與設計稿中樣式不符，請注意排查以下三點：
svg 不支持漸變顏色填充；
為了提升用戶體驗和產品趣味性，動效微交互的標簽欄圖標也越來越流行了。
動效在前端落地的方法其實有很多：
所以綜上所述，落地標簽欄動態圖標，目前最高效可行的還是 Lottie 動畫。
Lottie 是 Airbnb 開源的一個跨平臺動畫庫。表現層面它是一張圖片，但實現的方式是通過代碼，所以它是矢量的。很花式的動畫也可以把文件大小做到非常小。
UI 與前端對接是通過交付一個 json 代碼文件。
如果這是你第一次接觸 Lottie，再好不過的體驗方法就是玩一玩阿里提供的一站式動畫平臺：犸良動畫 5。它最底層采用的技術就是 Lottie，只是被阿里二次封裝了許多預設的動畫效果，你可以自定義其中的元素與參數，然后試著導出你的第一個 json 文件。
接下來是簡單粗暴的 UI 與前端對接實現 Lottie 動畫落地的全步驟參考。在此之前，想要全方位了解 Lottie 的相關信息，請參閱 Lottie 官方說明文檔 6。
步驟一：安裝 Ae 和 bodymovin
制作 Lottie 動畫，首先你必需兩個工具：Ae 和 bodymovin 插件。
Ae 最低版本要求為 Ae CC2014。又因為據很多設計師反饋，目前 bodymovin 在漢化后的 Ae 中使用會出現諸多問題，所以后面的教程都是基于 Ae 英文版。如果你漢化了Ae，最好在需要制作 Lottie 動畫時取消漢化。
然后獲取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就適用于你當前的項目，因為前端使用的 bodymovin 解析包可能無法解析你用最新版 bodymovin 插件輸出的 json 文件。
一旦確定使用 Lottie，前端人員會在 GitHub 查詢 Lottie 相關文檔的，所以 UI 只需要配合前端確定一下合適的 bodymovin 插件版本就可以了。最終走查時，一定要確保當前 bodymovin 輸出的動畫在項目所需要運行的所有環境中可運行，才說明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。
獲取了 bodymovin 后，將 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 會自動識別插件安裝到 Ae。
安裝完成后，就可以在 AE 的「窗口-擴展」中看到 bodymovin 啦。
步驟二：將 Sketch 或 Ai 中的文件導入 Ae
如果你技術嫻熟，當然也可以直接在 Ae 中繪制圖案動畫。但如果你還是習慣先在其他軟件中繪制好基礎圖案，再到 Ae 中制作動畫，那你需要了解如何將圖案導入 Ae。
Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作圖，可直接存儲為 .ai 文件，再在 Ae 中打開。
如果你使用的是 Sketch，可以先導出為 .svg，再用 Ai 打開該 .svg 文件，轉換存儲格式為 .ai，最后到 Ae 中打開。
當然，Sketch 還有直接和 Ae 對接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同時安裝 AEUX 插件，Sketch 負責傳送，Ae 負責接收。具體的使用方法可以在官網教程中查看，我就不再贅述了。
步驟三：制作動效并輸出
和靜態圖標同理，為了保證落地時圖標視覺大小一致，一組動效圖標輸出的文件尺寸應該是相同的。所以在你制作動畫之前需要確定合成文件的尺寸。Lottie 官方建議：因為 Lottie 輸出的是矢量動畫，所以建議以 @1x 輸出動效，前端人員在任何屏幕上放大并不會失真。
在制作之前請務必詳細閱讀 Lottie 所支持的 Ae 參數文檔10，以免辛苦做出的動效，前端無法解析。特別提醒：原生環境中 bodymovin 是不支持解析 Ae 表達式的。
完成制作動效后，就可以通過 bodymovin 導出動效了。
步驟四：預覽與交付
導出完成后在你的目的地文件夾中將存在一個 .json 文檔，如果你的動效中還使用了位圖，系統還會自動生成一個 images 文件夾。這些都是你需要交付給與你對接的前端開發人員的文件。
.json 文件中記錄的動效代碼 UI 不需要過多關心，但是其中兩個信息你是一定要了解的。它們是你與前端對接溝通和獲悉文件信息的一些關鍵參數。
UI 自檢動效或其他相關人員需要預覽動效的時候，可以用 LottieFiles11，拖入 .json 文件即可預覽。iOS 和 Android 還可以下載 LottieFiles APP，掃描預覽頁中的二維碼即可在移動端預覽。
整個制作圖標的流程我已經全部整理出來了。首先要注意圖標的規范，然后制作位圖、矢量、動效圖標時的注意點，我幾乎把我在真實項目中踩過的坑都告訴大家了。剩下的創造性的環節就交給你了。
標簽欄圖標規范
靜態圖標
1. 位圖圖標
2. 矢量圖
動態圖標
1. Lottie的背景
2. Lottie如何上手
總結
文章來源：優設網 作者：UCD耍家
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖標在設計中是一個最為基礎的設計元素之一，對這部分知識花再多時間研究練習都是值得的，哪怕是工作多年的設計老手，也很難說自己把圖標設計，做到出類拔萃了。所以不論是溫故知新又或是學習精進，花上幾分鐘看看這篇超干的文章，定有收獲。
本文會著重介紹圖標基礎規則，深入探討圖標的視覺重量和對齊問題。
一個界面中的圖標通常可以近似地看成是一些基本形的組合：橫向矩形、縱向矩形、傾斜矩形、圓形、三角形、正方形。模糊地看它們有相同的視覺重量，因為它們或多或少的變成了相同的斑點。
△ 圖標的基本輪廓
根據圖標的形狀，將其嵌入到對應柵格中。例如，方形圖標比三角形或細長的圖標更緊湊些。
△ 圖標在柵格中
△ 柵格中的基本圖形
圖標越緊湊，需要的空間就越少。圖標銳利的邊緣或小細節越多，它在畫板上占據的空間就越大。
△ 圖標示例，柵格中可以放不同異形的圖標
△ 柵格中放更多細節的基本圖形：方形，圓形，三角形
當心成為柵格的奴隸，柵格是用來輔助你而不是去限制你的。如果一個圖標因為一些突出的元素而在視覺上有更好的效果，那就讓它們突出。
為了使圖標在非視網膜屏幕上清晰可見，請堅持使用像素網格并在線性圖標上優先使用2px粗細的描邊。2px居中對齊的描邊通常會提供足夠的粗細和清晰的輪廓
△ 2像素線型圖標示例
△ 2像素線型圖標示例
如果圖標選擇了1px的描邊，則應該使用內描邊或外描邊而不是居中的。
△ 1像素外描邊圖標示例
△ 1像素外描邊圖標示例
1px的居中描邊會使圖標在放大到100%的情況下變的模糊，但如果放的更大會顯的清晰。
△ 1像素居中描邊線型圖標示例
△ 1像素居中描邊線型圖標示例
根據像素網格去設置斜線的起點和終點。當斜線的角度為45°，30°和60°時會比不規則角度（像13.7°或81°）更清晰。如今仍有數百萬人在使用低分辨率的屏幕設備，這就是為什么圖標的清晰度仍然很重要的原因。
△ 矢量和位圖圖標示例
最好從復雜的圖標開始去創建一個圖標集。它將定義詳細程度，并且對設計具有相同視覺重量的圖標們有幫助。
△ 不同細節程度的圖標示例
當圖標的細節程度不一樣時，細節越多的圖標越能吸引用戶的注意力，并且看起來視覺重量越大。
△ 細節不一致
在整個圖標集中，圖標內部相鄰元素的間距不應太小或不一致。定義最小間距并在各處以同樣的方式使用，以避免輪廓「粘連」。
△ 不一致的間隙
△ 間隙統一
對于線型圖標，最好使最小間距和線條的粗細相等。線條要么清晰地分開，要么精確地連在一起，永遠不要含糊不清。
△ 不一致的間隙
△ 間隙統一
在圖標集中，可能會有些重復的細節。刪掉它們，讓用戶的注意力集中在它們不同的地方，就像是數學里分數要約分（化簡分數）一樣。你看到的視覺干擾越少，你對它的理解就越清晰。
如果目標用戶已經明白他或她使用的是什么，那就沒必要一遍遍的重復。例如：避免使用基于信封的圖標不會讓人覺得這不是一個郵箱類app。（有點繞口，意思是：不用添加相關系列類的輔助圖標也會讓人知道這是一個郵箱類app）
這條規則也適用于圖標周圍的裝飾（框架，背景）。如果這些對圖標的識別性沒幫助，則它們就會對圖標識別產生阻礙。
不要將不同樣式，不同角度地元素混合在同一個圖標集中。一致的風格會對用戶識別圖標有所幫助并讓用戶明白這些圖標有同等的重要性和狀態。
△ 同一緯度的圖標
△ 不同維度的圖標
同樣的原理也適用于線型圖標和面型圖標。如果你把它們混在一起，人們可能會認為它們有不同的重要性或狀態。當然，除非你是故意的。例如，面型圖標用于關鍵的指令，線型圖標用于其他的指令。
△ 一組一致性圖標
△ 一組不一致的圖標
在界面中擁有兩種不同的圖標是很好的。線型圖標用作不可點擊或正常狀態，面型圖標用于點擊狀態。
8px網格和12列布局常用于許多界面，與基于十進制的尺寸相比更加靈活。12可以被2、3、4、6整除。因此24或48px的圖標已成為了標準。如果需要更大的尺寸，可以對他們進行縮放。
完美主義不是我們的目標：沒有人需要為了像素完美而去追求完美的線條。但是，這對于產品中最終呈現正確而不失真的圖標是很重要的。記住圖形中錨點數量達到最少并且相鄰元素之間不要有間隙。
△ 矢量圖標的調整與優化
還有那些煩人的「8.999px」或「100.001px」呢？如果錨點的位置很準確，圖標的邊緣看起來就會很清晰。此外，在合并形狀時，也不會有出現多余錨點和間隙的風險。
△ 矢量圖標的調整與優化
許多設計軟件（例如sketch）生成的svg文件都帶有不必要的文件——多余的編組，顏色圖層和剪切蒙版。讓我們看看，在sketch中，一切看起來似乎都不錯。
△ sketch中的圖標示例
在其它軟件中打開這個SVG文件（例如Ai中），你會看到很多空圖層，不必要的編組，有時還會有剪切蒙版。當前端開發人員將圖標轉換成圖標字體或在網頁上使用SVG文件的時候，這些都可能導致出現問題。
△ Ai中的圖標示例
你可以刪除這些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator編輯后生成的SVG文件（picture_new.svg）在文件查看器中預覽的效果不一樣。順便說下，也可以在代碼編輯器中刪除這些垃圾圖層。如果你知道SVG代碼的樣子，可以嘗試下直接刪除不必要的數據字符串。
當然，這些建議并不是不可打破的規則。如果你知道自己在做什么，請隨時跳過它們。在我看來至少在兩種情況下嚴肅的幾何圖標不是最好的選擇。
空狀態。如果你正在設計一個頁面的空狀態（缺省頁）如「沒有任務了」或「所有郵件已讀」，那么最好是用情感化的圖標來表現或者只用文字去說明。情感化圖標會使用戶感到快樂，而沒有情感的幾何圖標不會增加任何交互價值。
吉祥物和插圖。如果屏幕上你的界面中有吉祥物或者插圖，這種圖案應該是感性的。我不知道設計師是如何通過有限的形狀選擇和堅持使用網格去刻畫一個角色的。
還有一件事。在一些特殊情況下最好問問自己是否真的需要圖標。這是解決問題的最好方式嗎？寫點有意義的文字呢？要注意使用時的平衡，否則，可愛、時髦的圖標將會讓人感到沮喪，所有的努力都將是徒勞的。
文章來源：優設網 作者：彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近發現一些能提高圖標細節和高級感的小技巧，今天與大家分享下這幾種風格的設計思路，以及需要注意的點。
分享大綱：
顧名思義圖標之間有縱深前后關系，通過這樣去處理，可以讓圖標層次豐富，增加設計細節，打破枯燥無味的單色扁平圖標。
通常大部分人設計一個圖標就直接將圖形畫出來后，這樣就完事了，沒有繼續深入下去。這樣圖標看著枯燥乏味，普通了一些。
如上圖，將圖標在接口處進行細節弱透明度處理，那么效果就完全不一樣了。
這里需要注意，一般都是在圖標的接口處進行層疊處理，從A到B的一個線性漸變。
下面來看看案例：
△ Atlassian的品牌圖標系統
使用建議：運用在面形圖標效果會更好些，或者線條粗一些的圖標，一般運用在TabBar上面居多。
這種比較好用，將圖標進行抽象放大化處理，變成一種圖形方式。一般運用在卡片設計上面居多。
左側卡片上面，圖標直接使用描邊效果。卡片里面雖然加了一些底紋圖形，但是整體效果略顯平庸了一些 。
重新將圖標進行圖形化處理，既能夠表達當前含義，同時設計上細節和品質感有所提升。
其他思路延展示例：
當然還有一種類似的思路，可以將圖標進行放大化，并進行色彩分割處理為背景，前景放圖標和文案等。
如圖，我將前面兩個思路綜合運用，圖形化背景和層疊圖標。這里的圖形希望大家不要亂用，盡量使用圖標的圖形來演變。
圖標通過弱漸變透明處理，其思路有點類似第一個。但是這個方法圖標整體帶透明度的范圍更大。
先來直接看個案例：
這種圖標給人比較新穎的時尚感，層次也豐富。
如何處理這種圖標？
非常重要的一點，需要注意不識別度問題。如左側圖，圖標和背景之間幾乎融為一體，看不清主體元素。右側處理剛好，能夠識別出圖標含義。
處理時候一定要注意透明度的關系，當然也與卡片背景色有關系。
關于圖標設計三個小技巧，可多看幾遍，思路比較簡單直接。當然最重要的是靈活運用，也可以將三個思路都融合起來去設計圖標。
本文只是拋磚引玉，這些圖標處理的技法，并不是能適用所有場景。大家還是需要根據自己產品特征，找到合適的突破點去設計。
文章來源：優設網 作者：功夫UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖標是 UI 設計中最基礎也是很重要的部分，輔助人們更好的理解功能內容。隨著扁平化設計風格的普及，圖標的風格越來越簡約，看似簡單的圖形，實際要準確的表達含義，也是需要注意一些方法的。以下是圖標設計技巧的分享內容：
設計圖標是一個藝術創作的過程，里面也有很多需要被關注而不可忽視技巧。要知道如何設計好圖標，是對于 UI 設計師來說是不可或缺的重要技能。
在我設計圖標的時候，我個人認為有以下7個規則：
一個圖標一個非寫實的表現。不需要擔心圖標不夠真實，消除不必要的細節，用基本的形狀只保留最基礎的部分，讓這個圖標更容易被理解。
有時候圖標會因為有更多細節而傳達了更復雜的意思，這反而是樣式問題！
在整個圖標系統中，你的圖標要保持同一種樣式來確保圖標完美協調。比如同樣的形狀，填充，描邊粗細，尺寸等。要制定好可以被復用的柵格，規范和樣式。
如果可以的話，盡可能重新設計這些圖標，而不要混入其他不同風格的圖標來使用。
設計「完美像素」的圖標，特別是在圖標非常小的時候。這樣圖標的描邊就可以保持銳利，不會有模糊。注意半像素的情況出現，盡量避免小數點參數。
這也可以幫你保持圖標的辨識度，在你等比縮放他們的時候保持清晰。
確保你的圖標的所有形狀有足夠的空間。筆畫和空間過于狹小會使圖標更難被理解。
最少給2px的負空間
確保你的圖標看起來是正確的，適當的調整元素的對齊來達到視覺上的平衡。
不要只關注參數，如果有需要就用上你的眼睛來衡量，輕微移動這些元素。
所有圖標保持同樣的尺寸，在圖標周圍定義一個可調整的內邊距范圍，盡量讓元素設計在這個范圍內。不要擠滿所有元素。
當圖標需要額外控件時可以超出這個內邊距范圍。
在設計階段，你的圖標可能看起來是完美的，但還是需要將圖標放到實際的界面環境中，測試他們是不是完美，有沒有可以調整的細節問題。
確保每個新增的圖標和其他圖標顯示一致。
你在設計圖標過程中，有用到以上的這些技巧嗎？可以在評論區告訴我，你是怎么怎么設計圖標的。
文章來源：優設網 作者：布萊恩臣
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天還是一篇非常干貨的原創文章。
內容分為兩點：
圖標的基礎特征
動手設計之前，咱們先對完整的圖標集進行分析。
弄明白在畫整體的系統圖標集合時，各個圖標得具備哪些特征，有哪些切入點，可以作為我們在實際繪制時候的依據。
先來看幾組 iconfont 的案例，看不太清的同學可以戳圖片放大。
圍繞上面這些案例，咱們可以歸納出圖標的幾點設計原則。比如：
1. 設計圖標需要考慮延續性，圖標之間互相牽連影響
圖標幾乎不會以單個的形式出現，大多數都是以組歸類。符號整體性與統一性，都是依靠單個 icon 的共性特征建立起來的。
比如 iconfont 中的這組icon，圖標圓形的外輪廓，就保持了一致。其次用戶頭像的代表符號，也很好保持了延續性。
正是這種小特征，共同組成了圖標庫的整體特征。
2. 設計手法趨同、圖形內容差異
第二點好理解，設計風格、手法要素需要統一，但是內容傳達的差異必須要拉開，避免圖形趨同導致功能混淆。
比如下面兩個案例，由于過于相近，導致用戶很難理解圖標含義，是天氣，還是設置按鈕，這種情況我們在設計時需要極力避免。
總結來說，就是圖標的共性往往體現在設計手法上，比如顏色、形狀粗細、細節的一致性，這些都是設計風格的統一。
而圖標的特性，往往體現在形狀內容差異，形狀會決定圖標的信息傳遞含義。所以共性要趨同，特性要拉開，這個是設計圖標集的基本原則。
3. 功能大于形式，圖形能理解的情況下樣式越簡潔越好
不知道大家是否關注，曾經在設計圈風靡一時的MEB圖標風格，產品圈卻非常冷門，幾乎沒有產品在繼續用這種風格作為功能性質圖標。
△ 該作品來自于網絡圖片，僅作交流使用
因為雖然圖標增加了小裝飾后，顯得有趣精致，但其實也增加了圖標的識別難度以及識別效率，反而背離了圖標的設計初衷。
所以對于系統功能圖標而言，必要的簡潔性，高效的識別率，才是關鍵。
圖標的設計約束性
聊完了設計主張及基本的特征。接下來咱們開始剖析圖標的設計細節，包括分析制定圖標的系統設計規范，應該從哪些方面入手。
規范的第一點，就是圖標的基礎形狀比例。這個比例，主要是約束長與寬，共包含了四個關系，分別為「正方形 : 橫矩形 ：豎矩形 ：圓形」
這四個關系的約束，會讓圖標集里的所有圖標大小，看起來是一致的、統一的。橫矩形、豎矩形這兩個比例，會決定整套圖標的飽滿程度，橫豎比例越一致，圖標整體越飽滿。
這點大家可以自己斟酌，如果是泛娛樂型的產品，icon可以更飽滿一些。如果是偏工具化產品，那么還是可以優先保障圖標的識別度，飽滿程度倒是其次。
圓潤飽滿型：
剛正工具型：
定了比例后，接下里就是對圖標的細節刻畫。對于線性圖標而言，最重要的細節就是線條粗細；對于面性圖標而言，最重要的就是正負形之間的間距。
所以這些核心元素，在圖標的核心線條、核心區域部分，間距樣式都應當保持統一。
通常在移動端@2x內，主流icon的粗細為3px，而4px大多數都是為功能性導航icon，細一點的圖標通?？雌饋頃乱恍?
當然也有部分產品使用的是2px，比如新版的YouTube，其次還有些較為復雜的icon，單根粗細的線段不一定能滿足其需求，所以還需要制定一條副線的粗細。
細節可以根據產品的調性來定，統一即可。
大比例跟基本元素確定后，也可以制定一些圖標的個性化元素規范，比如圖標的圓角大小、角度位置，等一些特殊的樣式。
像這些個性化的規范，顆粒度可以Case By Case來定義，圓潤還是方正，可以根據產品的視覺風格來定義就好。
這些規范樣式定好，就可以充分的讓圖標集內的圖標，從設計上是保持一致的，且具有特色感。
上面講了關于圖標的分析及規范。為了方便大家掌握，接下來咱們就來講講，具體動手做，流程是什么樣的。這里我給個我的步驟作為參考：
第一步：繪制好圖標基本網格
第一步，當然是確定好圖標icon的大小，以及上面我提到的基本尺寸比例，四個關系「正方形 : 橫矩形 ：豎矩形 ：圓形」的約束，構建好基本骨骼。
我這里以圖標容器大小為 56×56，預留8px安全間距，圖標最大大小為 48×48。
由于視差關系，圓形在圖標里面的尺寸是最大的，所以圓形的大小為48×48。因為我想圖標飽滿一些，所以正方形的大小我兩邊各減去2，為42×42。
然后再繪制出橫矩形（48×36）與豎矩形（36×48），各線段之間的間距保持一致。
然后各個形狀居中對齊，這樣四個關系「正方形 : 橫矩形 ：豎矩形 ：圓形」定好后，基本的容器就制定好啦。
第二步：設定圖標基本規范
接著制定好圖標的基本規范，為了方便大家看得清，我這里設定圖標的線條粗細為3px，圓角為6px，干凈簡潔一些，讓它看起來更飽滿。
角度、斷點啥的，我這里就不定義了，因為只是示例給大家看，講一下流程，所以盡可能簡單一些。大家在做練習的時候，也可以嘗試自己去定義一下。
第三步：繪制圖標
好了后就可以開始繪制圖標啦。我這里分別繪制十五個，作為示例
然后就是使用路徑工具，根據創意去繪制完善圖標了。繪制的過程中，也可以不斷調整，讓圖標看起來更協調，更飽滿，更容易識別。
花了十五分鐘左右，簡單的十五個圖標草稿就畫好了，接下來咱們開始調整細節。
第四步：整體性調整
所有的圖標繪制好了后，咱們就可以整體性的開始打磨細節，把圖標形狀的一些折角處、大小樣式調整一致，讓圖標的節奏更清晰，整體樣式更統一。
這樣一組精致的系統icon就繪制好啦。
接著咱們也可以加點特色風格進行嘗試，比如填充一個顏色。
當然細看的話，圖標部分細節還是有點糙，其實還可以再調調，但這個主要做示例用，大家自己在做練習的時候，可別像我一樣偷懶嗷
上面講了很多方法經驗，文末給大家來點實際的。
我珍藏了很多較為不錯的大廠圖標集合庫，日常在畫圖標沒靈感的時候，就會打開看看這些，參考一下。
文件都是矢量格式的，編輯方便，還很全面。今天拿出來送大家白嫖了
文章來源：優設網 作者：UX小學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn