圖標風格匯總
圖標設計流程
案例講解
圖標資源輸出
線性
面型
線面
單色
雙色
漸變
不透明度
一筆成形
斷點
該風格設計感和個性都極強，很考驗設計師對造型繪制的把控，功底不夠就很容易導致設計后出現識別問題。所以設計難度較大，且延展性較弱，難以表達復雜語義，使用需謹慎。
單色
雙色
不透明度
晶白
磨砂玻璃
等軸側（2.5d）
漸變
新擬態
輕質感
明暗質感
寫實
抽象
卡通插畫
像素風格
面型不透明度風格，通過調節前后不透明度可以帶來較強的空間感，使用場景較廣泛。
晶白嚴格來說也算質感圖標（白色質感）的一種，常見于品類圖標設計，通過透明度、投影、漸變等參數調節，使整體立體感和空間感都很強。
又叫毛玻璃風格，是通過背景模糊，或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受，但由于容易與淺色背景相融，造成對比度不足難以識別的問題，所以在使用中需要注意無障設計。
也叫2.5d，有很強的趣味性，及識別度，適合重要入口或運營設計。但這類風格較為卡通，且表現花哨。使用需要注意應用場景及目標人群年齡段，避免干擾信息閱讀和不符和產品風格。
這類風格可以很好的吸引用戶注意力，在電商、美食類產品中較常見，主要注意配色干凈協調。
新擬態圖標色彩相對單一，與背景融合度較高，通過高光、投影表現一定的立體感。通常是整個產品就是新擬態風格時才使用。所以該風格局限性較大，再有這類風格與背景對比較弱，無障設計問題較大。
通過大量漸變、投影來表現立體感，整體風格偏年輕化，常見在教育類產品中，使用注意配色干凈和諧。
通過調節同一色相不同明度、飽和度來營造前后空間感，整體風格統一。
這類圖標特點很明顯，有極高的識別度，目前美團外賣品類區入口就是該風格，整體偏年輕化。主要考驗設計師造型繪制、技法表現能力。
通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術（裝飾）價值更大，不追求識別度，美觀即可。
這類風格既可以做圖標又可以做空狀態插圖，設計美觀有特色即可。
這類移動端界面較少見，目前只在一個海外電商產品（Jollychic）中看過，還有就是一些像素游戲中，比如「泰拉瑞亞」、「我的世界」。
線面
描邊插畫
粗線
細線
圓角
直角
力量感、穩重、男性等感受
安全、親和、年輕
由于圖標風格繁多，所以以上列舉并不包含所有圖標風格。
明確語義
關鍵詞詳解發散
確定風格
提取造型
創意輸出
圖標存在的目的是起引導作用，在豐富頁面視覺的同時，幫助用戶更快的獲取信息（當然圖標的使用意義還有很多）。設計師在將文字翻譯成圖標前，必須先理解其文字含義。因為最終呈現的圖標，需要用戶一眼能準確反翻譯其中含義（藝術抽象、裝飾類圖標除外）。
在C端設計中，以Tab為例，一些常見文案：首頁、分類、發現、我的，這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說，目前在做一款網站搭建工具，后臺常會需要設計組件及對應的圖標，比如：滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標，在一定程度上會比較難精準傳達文案。
這一步有點類似情緒版使用，但不同的是：我們需要將確定的詞（A)進行詳細解釋，再將解釋文案中關鍵的詞語進行發散，得出一系列相關聯的詞（A1、A2、A3…）。有時間還可以根據這些詞找到對應的圖片，再看在這些相關聯的圖片中，有哪些細節可以傳遞最開始我們確定的那個詞（A）的意思。
我們可以借助情緒版，根據產品定位和目標用戶描述，再結合應用場景，在目前已有的風格中找到符合產品氣質，符合當前模塊視覺層級的圖標風格。
前面我們已經了解了目前常見的圖標風格有三大類：線性、面型、線面，其中還有很多細分，比如在線性中又分粗線（沉穩、力量）、細線（品質）、曲線（女性化），還有圓角、直角，每種類型所傳遞的感受都不同。在創意前期，我們將每個點合理進行隨機組合（如下圖）即可創造一種更新穎的風格。
經過關鍵詞詳解發散，其實我們已經獲得了很細節點，接下來將這些細節點進行合理融合后，就可以得到代表同一語義但形式各異的基礎圖標樣式（此時還只是想法階段，可以通過手繪方式記錄組合形式，不用特別精細化）。
圖標設計規范
圖標設計注意點
常見圖標尺寸
圖標盒子使用
在界面圖標設計中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
圖標盒子即圖標約束網格，來源于Material design。使用圖標盒子有利于使我們創造的系列圖標保持規范與統一。
簡潔美觀
易于識別
細節統一
像素對齊
視覺大小一致
飽滿透氣
融入品牌基因
圖標是否美觀，會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中，通常會盡量減少不必要的細節，降低圖標復雜度，來幫助用戶快速識別。當然圖標也有豐富細節的做法，常見在一些重要運營入口上。
識別度的問題，在最前面明確語義中就有提到過，這里就不贅述。
在細節中包含：表現風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數等（不同風格圖標的細節不同，這里只是列舉部分），上述細節在系列圖標中都應保持一致。
在圖標繪制中，需盡量避免坐標位置xy或寬高參數出現小數點，以此保證最終導出的圖標是清晰的。
由于不同圖標外輪廓不同，就會導致哪怕在物理大小上相同的圖標（假設都是24x24），但視覺上可能還是會給人大小不一致的感受，因此我們需要借助前面提到的圖標盒子進行約束調整。
圖標的飽滿透氣，不一定需要加入很多筆畫（描邊、裝飾等）細節。而是盡可能在形成風格的同時，簡化能影響識別度的關鍵筆畫，通過調節筆畫大小、長短、位置使圖標達到一個最平衡狀態。
以如下途牛_我的頁面_功能區圖標為例：
圖中標紅圖標就存在飽滿度不足，及內部較擁擠的情況，第一感受是看起來不舒適，品質感比較低。除此外，還存在如下問題：
圖標大小很明顯不一致
設計語言不統一，有圓角有直角
圖標風格不一致，有透明度+分割形式（我的保單）、有純透明度形式（專屬顧問、我的收藏）、還有其余單色實心形式
在圖標中融入品牌基因可以有效的提升產品品牌感，作為高階設計師必備技能之一，常見提取維度：
顏色
設計語言
以我之前的豆果美食項目為例，提取到如下細節：
根據提取到的基因，最終得到如下兩套風格不同，但語言相同且都具備品牌感的圖標。
Logo輪廓：在圖標中融入品牌logo外輪廓（Google Play），或根據logo輪廓結合應用特性進行延展（Microsoft）。
根據文案進行詳細翻譯，幫助我們充分理解文案。
釋義：有專門的知識或經驗，受聘為機關團體或單獨個人提供專門咨詢的人。
提取釋義中關鍵信息，生成關鍵詞：專業、專人，再根據關鍵形容詞發散一系列具象名詞。
根據產品調性和模塊視覺層級以及考慮延展性，初步確定如下風格組合起來是比較適合：
在實際查看中，發現Tab的風格為單色+不透明度+斷點風格。
為了和Tab拉開差異，最終確定以如下風格進行組合表現比較符合產品調性：
線性：雙色
面性：單色、雙色、不透明度、輕質感、明暗質感
線面：線面
通過手繪或大腦想象進行造型構思，這里我就不展示手繪過程（行吧，我承認就是畫的太丑了不敢放）。
由于不同風格對圖標造型構思有所影響，且圖標類型很多，不同特點組合起來樣式更多。案例精力有限，所以只以線性雙色風格做演示，希望大家靈活使用。
這一步就是將手繪圖形矢量化，在矢量化創意過程中，我們可能會對手繪的圖形進一步簡化細節或新增造型，這都很正常。只需注意在整個繪制過程中遵循圖標設計規范，以及注意圖標設計注意事項即可。
圖標盒子使用
創意輸出
Tips：
1or2？
最后對專屬客服進行多風格嘗試，最終效果如下：
附上部分繪制過程中的淘汰稿：
SVG：縮放無損、體積小、支持前端樣式修改參數、單色情況下方便前端修改顏色來表達圖標狀態，減少重復上傳。
PNG：支持透明格式
JPG：兼容性強，適合大尺寸高飽和度圖像
GIF：動態圖標使用，缺點是透明情況下邊緣容易出現鋸齒。
這里主要介紹靜態圖標中，svg格式在工作中如何輸出給前端同學使用（借助iconfont）。
1、圖標資源優化
在iconfont官方繪制指南中有描述，在導出前需要按如下規則優化圖標資源：
2、選中圖標導出svg格式
以Figma為例，優化圖標資源后，選中圖標將輸出格式選擇為導出svg。
3、上傳iconfont
在資源管理下，選擇需要上傳的位置。
去除顏色并提交：適合單色圖標，去除顏色提交可以方便前端使用代碼修改參數，減少不同狀態圖標重復上傳。
保存顏色并提交：適合多色圖標（注意：在單色情況下，選擇保留顏色提交，前端則無法通過代碼修改圖標顏色）。
最后當我們把圖標都上傳好后，就可以將前端同學拉入團隊項目中開心進行玩耍。
文章來源：站酷 作者：幺零三
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每天努力的用心的去做設計，挺開心的，其中最開心的細節就是“思考自己的設計如何與別人的不一樣”，讓你的差異化產出得到認可后，這將是一件非常非常幸福的事情。
今天和大家分享一個前一陣子做的小案例，做的一個直播貨幣，名字叫星幣。
思考過程如下：
其實“星幣”可發散的空間很小，因為已經非常具象了，無非就是星星、和錢幣。
我們可以看下大概的感覺：
但是如果按照上面的感覺做，那最后出來的效果一定很常規，這也就有了我接下來的思考。
我們仔細觀察，一般參考中的星星都是非常規矩的，無非就是尖角圓角的區別：
要么就是胖瘦的區別：
所以這次我打算做一個不那么規矩的，有點跳遠的感覺、又有點星火的感覺，所以我把星星的一個腳拉長：
然后再把兩個胳膊往上抬一抬：
這樣就好像是一個跳躍的小人一樣，會相對來說活潑一些。
接下來為了讓整體更加和諧，我在錢幣周邊挖了一個小口：
目的就是配合那只伸出來的腳，讓整體感覺更加巧妙一點。
其實星幣很容易聯想到金黃色，如果按照這個設想來做，那就會比較普通，所以我選擇讓他和直播、社區的配色一致：
這樣在顏色方面也就有點自己的調性了。
剛才不是說讓這個星星看起來像個跳躍的小人嘛，那一般人都有表情的，所以我們完全可以再加上一個可愛的表情：
讓整體更加生動形象。
當然，如果星幣在面積小的場景下是看不清表情的，所以需要做成兩種，一種是有表情的， 一種是沒有表情的。最后，還可以再做個有質感的：
后來發現質感做的有點臟，于是又優化了一下質感，效果如下：
整個構思和執行的過程還是可以的的，也得到了大家的認可，不過很可惜的是，后來名字改了，改成了能量幣，哈哈哈哈，通過能量，我又聯想到了太陽，太陽能嘛，執行原理都是一樣的，大概效果如下：
文章來源：優設網 作者：菜心設計鋪
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天這個需求是直播間 pk 后，主播勝利與失敗的兩個狀態設計，過程經歷了很多次修改，現在來分享一下自己的感受。
其實最開始我有點天真了，以為這種狀態直接畫個圈圈，寫個勝、敗兩個字，然后做下顏色區分就完事了：
但這根本行不通，看起來像是未完成的交互稿，一點設計感都沒有。
于是我開始思考如何增加設計感了。
如何增加設計感？
其實無非就是給這個狀態增加細節唄，尤其是這個勝利的狀態，我想到麥穗、翅膀等元素，最后選用了翅膀的元素，繪制了一個樣例如下：
但被說到這個結構是亂畫的，哈哈，一下戳到了我的痛點，確實是胡亂畫的，各種圓圈沒什么邏輯。
于是后來仔細思考了一下，把圓圈分為三層：
效果如下：
然后最中間放主形象，兩邊放翅膀，頂部放皇冠，最終效果如下：
這樣整體看起來結構就是清晰的。
我們可以看下結構清晰和不清晰的對比：
后面因為整體調性需要可愛一點，所以把翅膀改成了比較圓潤的造型：
效果還算不錯。
其實這個點是我經常和大家強調的，但有時候確實是當局者迷，自己也容易犯這樣的錯，比如最開始的那個效果，很明顯中間暗部和周邊亮部沒有拉開層次：
所以在后面的取色上，會把中間暗部做的很深，形成鮮明對比：
這樣層次才會更加明顯，不然就會糊在一起。
最開始本來想用圓形來做失敗的狀態，但是后來發現有點太慘淡了，于是想著還是加點細節吧，怎么加呢？
這時候是需求方那邊給的一點靈感，說失敗不就是很頹的樣子，就拿把翅膀下沉和勝利形成反差不就可以了，我感覺說的挺有道理，于是就嘗試做了下：
確實還可以。
本來想著勝利用紫色、失敗用藍綠色：
但是發現藍綠色多少還是會有點分散“勝利”的注意力，于是就在思考，失敗是表達一種負向的情緒，那是不是可以用灰一點的顏色？
于是嘗試了幾個不一樣的灰度：
最后選擇最后最后那個幾乎接近灰色的版本，干脆一點，對比強烈一點。
我們看下最終效果：
再看下過程稿吧：
調整了很對次，過程還是挺值得記錄的，回頭一看，很有成就感！
以上就是這個小需求過程中總結的一些知識點，后面還會加入一些微動效，增加氛圍感。
希望可以給大家一點靈感和啟發。
文章來源：優設網 作者：菜心設計鋪
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天和大家聊一聊設計細節，每個提到的細節你們都能直接拿走，并且在項目中使用。
這個頁面相信大家平時工作中都會做到，有很多圖標放在一起，里面可能是一些常用菜單，這個設計有什么問題呢？相信看在這里的小伙伴，腦海里有無數答案？不統一，還是什么？我們來分析下。
首先從大家關心的統一性來說，沒有任何問題，圖形都是在規范的圖標柵格里面，也非常的統一，那么問題出在哪里？
仔細觀察，我們會發現「聯系人」和「歷史消息」的圖標過于飽滿，雖然他們尺寸一樣，但是比「最近使用」這個圖標要大很多，原因是什么呢？因為后面這兩個圖標從視覺來說他們的重量太重了，所以看起來會比較大。
所以今天我們在做設計時候，如遇圖標瘦長或者圓形等不夠飽滿的情況，請酌情將圖標撐滿像素，來保證整體一致的視覺體量感。
如果圖標較飽滿的情況下，可使用微縮，來保證整體一致的視覺體量感。我們文中案例之所以出現這種情況，是因為沒有定義出圖形體量大小具體的繪制規則，所以導致圖形過于飽滿，看起來會顯得視覺重量不一致。
所以我們第一步，對圖形繪制規則進行優化，保證圖形在頁面中體感一致，我提供了 4 個基礎圖形繪制技巧和對應的輔助線參考圖。
所以在實際應用時，可略微在可變范圍內微調，對于過于飽滿的圖形，高度變低時，需要增加寬度來保證視覺重量相等。
這樣調整后，整體的圖標視覺重量就會更加均衡，也會更加規則。所以，今天如果你發現你們產品頁面中圖標大小體量不一樣，或許是因為你忘記對圖標體量進行規范。
圖標我們在界面中使用場景很多，很多時候用大圖標，有時候用小圖標，我們該如何去定義小圖標大小，大圖標大小，這是很多同學非常糾結的。有時候就亂定，導致頁面沒有秩序感。
第一步，我們要先去梳理頁面場景，看看哪些地方會用到圖標，把全部場景列出來。
列出來后，我們根據你 APP 設計的最小單元的倍數來定義圖標風格，比如支付寶最小單元是 4，所有間距都是 4 的倍數，那么在圖標這里，也是同樣的原則，全部的圖標尺寸，我們根據 4 的倍數去定義幾種大小，比如 24X24，32X32，44X44，56X56，72X72 等等，如果頁面中不夠用，同樣的在 4 的倍數基礎上進行新增。
我相信大家都有這種情況，一組圖標在使用時候，會出現在各個場景，這個時候需要放大，甚至縮小，但是不知道放大后圖標粗細該如何確定，直接放大，直接縮小會出現圖標的細節粗細有問題，那么這種時候該如何處理？
直接放大縮小，圖標粗細沒有任何說法，而且會顯得比例非常奇怪，如何去解決這個問題？
第一步：我們需要確定圖標大小和線條比例，以支付寶為例，首先要確定圖標大小和線條粗細比例為 14：1。當然每個比例是不一樣的，你可以根據你們產品的調性去決定，如果你圖標比較細，你可以設定為 10：1，這些都沒有固定標準。
這樣的話，假如你圖標需要設計一個 140X140 的大小，那么你的圖標粗細就應該是 10px。
如果你圖標是 112 尺寸大小，那么按照 14：1 的比例，那么你圖標線條粗細就應該是 8px，以此推動，通過這樣的方式來保證圖形的一致性和穩定性。
以上三個小點，是絕大多設計師忽略掉的，也是設計中不太注意的細節，但是設計的專業程度往往就是由這些細節組成，今天這 3 個技巧，看會了之后，你就可以直接在項目中去運用。
文章來源：優設網 作者：我們的設計日記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
不知道大家有沒有被說過，設計做的不精致？拿圖標舉例，其實不精致的原因就是統一性沒做好。我們總說做圖標要統一，但是到底要統一哪些要素？有沒有一個完整的自檢表呢？以前我總結了 5 到 6 個要統一的要素，最近觀察大家的練習之后，直接擴增到 9 個了，今天就以線形圖標為例，看看我們需要統一哪 9 個要素。
大綱如下：
這個很容易理解，就是一組圖標看起來大小是一致的。但是最近發現了一個比較重要的點，就是很多同學做一組練習，相鄰的圖標都差不太多，但是隔的比較遠的圖標放在一起就差很多了，比如下面這幾個圖標，就是逐漸變大的：
所以對于大小統一，我們必須要做到，一組圖標里，任意兩個圖標拿出來都是大小統一的，否則就是不及格。
保持大小統一的方法見這篇 – 圖標設計規范。
圓角統一也是比較好理解的點，無非就是圓角大小，像下面這兩個圖標：
如果圓角差很多，你很容易發現，因為都是差不多大小的矩形，但是我們很容易忽略一些細節，比如下面第一個圖標的三角形，和旁邊的日歷相比，就過于尖銳：
這是圖標里面很細的細節，所以容易被忽視，大家一定要重視。
語言統一你可以理解為設計風格統一，如果一組圖標里面出現了多種風格，那會顯得非常不專業。
比如下面這組練習：
大體看好像是一種語言，但仔細觀察其實還是有很多細節不統一的，比如外輪廓上面有的有白色，有的沒有，白色還分帶描邊和不帶描邊：
這就是在語言上不統一的案例，大家在做練習的時候，一定要想清楚你的語言是什么。
粗細統一就不用說了吧，基本就是用在線性圖標線條粗的，比如像這種比較明顯的粗細不一致，就不應該出現了：
這都是最最基礎的問題。
疏密統一其實是很多新人朋友容易犯的錯，比如下面這一組圖標：
大部分地方是比較透氣疏松的，但是只有第二個比較密集，這樣就會讓人感覺比較突兀，整體不夠和諧。這就是疏密程度的統一性，一定要把握住節奏感，否則就會不舒服。
這個點一般用在斷線圖標上，也就是你開口大小的統一性，比如一個開很大，一個開很小：
那就證明細節沒有做到位。
比例可以分很多種，比如顏色比例，像下面這個原作的顏色比例就沒有太統一：
在小 y 優化臨摹之后，達到了顏色比例的平衡：
再比如之前說的一個案例，粗細線條的比例：
在這樣不統一的情況下，圖標是一定不會精致的。這些都是比例統一問題出現的實際場景。
正負形也是沒那么容易看出來的，舉個例子，下面這組周楠做的圖標，乍一看沒什么問題，但是仔細一觀察，其實我們會發現，白色面積的重量其實是不統一的，那個消息上面的“#”會偏重一點：
當優化之后，我們再看：
整體就會比之前統一精致很多。
角度，也是增加圖標統一感的因素之一，最常見的角度統一方式就是按照一定的倍數來制定規范，比如 30 度的倍數：
再舉一個角度其他方面的例子，在做下面這組圖標的時候，最初沒有考慮斷線的規律：
所以看久了會覺得有些凌亂，于是我將斷線處定為右下角 45 度，如遇到圓角拐角處，可挪動靠近拐角處進行斷線：
這樣我們就會看到所有的圖標斷線位置都大致出現在右下角的地方，最終效果如下：
很大程度上提高了圖標的統一性，并且在延展執行的時候節省了大量的思考時間（思考在哪里斷）。
但是對于斷線的位置是否一定要規定其出現的角度，我覺得不一定，也可以從其他角度考慮，但最終的目的還是讓整體統一和諧，且延展性高。
以上就是目前總結的 9 個需要統一的點，只要能把所有的統一性做好，精致一定是沒問題的。
文章來源：優設網 作者：菜心設計鋪
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這篇文章主要分享怎么做一套毛玻璃擬態圖標，以及在這基礎上如何發散創意。帶著這個想法，我開始逛“避寒寺”和“追波”，找可以參考的作品。這套作品我挺喜歡的，作者還做出了 3D 視角的。
先分析一下圖標的結構。圖標有三層：底部幾何色塊、毛玻璃主造型，帶有含義的白色圖形。
再分析俯視角度時圖標的表現，方便用工具表現。
最后是顏色的歸納。作者用了飽和度非常高的顏色，基本都在右上角最尖尖的位置。
分析完以后可以開始臨摹了…因為造型比較簡單，我沒有臨摹，直接創意發散做了另一套。選主題的時候我隨便開了個 APP（當時打開的是微博），覺得個人中心的快捷入口圖標主題可以拿來試試。我選了深色作為背景，所以這套圖標用到界面會比較難適配，和原 APP 風格也不符合。在這里單純利用主題來做練習。
做底部的幾何色塊時，形狀可以盡量跟主圖形相關性大一些，加強它們之間的關聯性，如果實在沒法關聯的也不必勉強。
我降低了幾何色塊的面積，增加了多一層毛玻璃形狀層，并且讓白色的圖形更靈活，而不是雕刻在毛玻璃層上。這是我理解了原作者圖標的結構之后，自己進行的改變，效果還行。
做的過程中，發現草稿箱如果里面放一張白色的卡紙，視覺效果還不錯，所以我又做了另一種效果。最終呈現出來的效果只有草稿箱比較出彩，其它很牽強。
拿「照片」這個圖標來進行拆分，參數分別如下：
這是最后呈現的效果：
封面圖參考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做會更逼真吧。
臨摹一套圖標的時候，要帶著目的去臨摹，分析原作者每一步的處理。然后把圖標拆分成不同的變量，修改這些變量的時候或許會得到不錯的想法。
文章來源：優設網 作者：牙線y2x
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章主路徑如下：
這組圖標非常有活力和創意，色彩很活潑，原作者是菜心。我也常用微漸變來做圖標，但是沒有嘗試過加上描邊，并且這種強烈的對比色也在我習慣用色外。臨摹這組圖標可以突破我的用色習慣。
我們先逐步拆分，再進行總結。
第一步，分析原作品的結構。
圖標可以拆分為線、面和小元素。我在 sketch 做的，形狀的線面轉換比較簡單。線跟面的圖層要分開，因為面圖層帶有反光，而線圖層沒有。
第二步，確定光源的方向。
從作者的表現來看，光源在左上角，因此所有的圖標應該遵循同一光源方向的原則。光源的表現會因為材質的不同而不同。比如「LIKE 燈牌」帶有自發光、「鈴鐺」帶有高光。所有物體的反光比受光面要亮一點，讓人感覺很通透。
第三步，分析原作的顏色。
不要吸色，先自己調色。剛開始會有點難，但是這種練習會幫助我們提高眼睛辨色的能力，提高色感。對比自己和原作的顏色，發現我調色不夠準確，沒有做到不同顏色飽和度一致，漸變色跳躍比較大。這表示我還沒有理解原作的用色，后續臨摹的時候需要修正。
第四步，總結作者的設計語言。
分析完以后開始臨摹。
先說一下體量感的問題，因為有很多設計師在做圖標的時候會忽略這一點。常見的方法是拿圖標框來限定，但是問題又來了，有的人限定得太死板，不會根據實際情況來微調。針對這種情況，可以拿別人的整套圖標作品做反推，在臨摹的時候，留意別人對體量感的把握。
定義了大概的體量之后，我會觀察圖標大致的形狀和角度，憑印象先把造型做出來。過程中沒有把原作品放在旁邊，最多在忘記的時候去看一眼。這樣做的好處是，可以發現自己觀察的時候漏了什么（這個方法是跟菜心學的）。下圖就是第一次臨摹的草稿，orz…鈴鐺最不好畫了。
拿著草稿來對比原圖，把自己錯漏的地方找出來。
統計錯漏的地方，重新調整圖標，達到 90%以上的相似度后，給圖標上色。
做完這一步后，大概理解了作者做這套圖標時的邏輯以及方法。我們可以開始做半原創的設計，在原作的基礎上延展幾個圖標。我選擇電商主題的「充值、簽到 、賺錢、砍價」這四個圖標來做。
我們先找參考素材。不管畫圖標、做界面，還是畫插畫，學會找參考非常重要。參考不是照抄，而是給我們提供靈感來源，切記不要憑空想象。有一天，團隊的設計師跟我說她不會畫衣服的褶皺，畫起來總是怪怪的。我叫她上網找相似衣服的圖片，看一下別人的褶皺和光影，她就茅塞頓開了。因為她總是用“原創”局限自己，沒有找實物參考。
原創絕不是憑空想象，而是有源設計的融合。
結合作者的設計語言做延展圖標，放在原作里面也不違和的話，就成功一大半啦。
接下來是原創時間～我們將作者的設計語言其中一些變量改變，會得出不同的結果。
文章來源：優設網 作者：牙線y2x
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在 UI 的設計體系中，圖標是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。
網上現存不少關于圖標繪制的文章和教學，但不是太籠統，就是太片面。即使看了很多這種碎片化的知識，也很難在我們的認知中對它有比較全面、系統的認識，所以大多數初級的 UI設計師，始終畫不好圖標。
針對這個問題，我希望用一篇長文來講清楚圖標設計的所有要點和具體的設計方法，讓所有設計新人更快地上手圖標設計。
本文共分為5個部分：
圖標，是一種圖形化的標識，它有廣義和狹義兩種概念，廣義指的是所有現實中有明確指向含義的圖形符號，狹義主要指在計算機設備界面中的圖形符號，有非常大的覆蓋范圍。
對于 UI設計師而言，我們主要針對的就是狹義的概念，它是 UI 界面視覺組成的關鍵元素之一。
在當下最常見的扁平化設計風格中，界面的實際視覺組成只有4種元素，圖片、文字、幾何圖形、圖標。
△ 由圖片、文字、幾何、圖標組成的界面
可以說，圖片、文字、幾何圖形的運用，都只用到排版的技巧，而圖標，是 UI設計中除了插畫元素以外唯一需要我們「繪制」、「創作」的元素，一涉及到這兩件事，難度就直線上升了。
本來往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來了，比如 Clear APP，不僅工作量少，而且還符合極簡原則，為什么還要吃力不討好的設計圖標？
△ Clear APP 的截圖
這就涉及圖標作用的探討了，為了節約篇幅，更快進入大家最想看的重點干貨，我就不長篇大論從上古時期人類與圖形符號的糾葛開始寫了，就談對于圖形界面本身，為什么圖標有這么重要的地位，沒它不行？
有兩個原因，第一文字雖然也是一種圖形符號，但相對于圖標而言，文字實在太復雜了，在識別效率上有先天的劣勢。再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標可以以一種更高效的方式，將我們想要傳遞的信息進行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。
△ 應用文字替換了圖標的對比
第二點，就是關于視覺的觀賞性。有些頁面中，如果把圖標去掉了，也絲毫不會影響我們的操作效率，以及對內容的理解。但沒有圖標，缺少這些點綴，我們就會覺得這個頁面看起來太枯燥了，不得勁，最好的例子就是應用的設置頁了，見下方案例。
△ 設置頁有圖標和沒有圖標的對比
既然知道了圖標的作用和重要性，那么接下來，就要進一步了解在工作中我們要設計哪些圖標。
可以先劃分成三種大類：
下面，我們將對它們分別進行介紹，以及展示相關的設計類型，方便讀者在開始學習具體設計前，對 UI設計會創作的圖標有更全面的認識。
首先，我們要說的是工具圖標。這是我們在日常討論中提及最頻繁的圖標類型，即應用內有明確功能、提示含義的標識。作為最常見的圖標類型，我們就不需要做太多的說明了。
△ 常見的工具圖標
雖然理解起來容易，但是它所包含的設計樣式卻并不少，可以把它們歸納成線性、面性兩個大類，再分別進行細分。
1. 風格1：線性風格
線性圖標，即圖形是通過線條的描邊輪廓勾勒出來的。多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓，比如上圖案例，線性圖標的創作空間看似不多，但實際上有非常多的調整空間。
下面我們把它們羅列出來。
△ 線性風格的工具圖標
2. 風格2：面性風格
面性圖標，即使用對內容區域進行色彩填充的圖標樣式。同樣，在這類圖標中，也不是只能應用純色的方式進行填充，還有非常多的視覺表現類型。
△ 面性風格的工具圖標
3. 風格3：混合風格
當然，在設計圖標類型的時候，也不一定非線性和面性不可，有一些熱衷創造和嘗試的設計師，還創作出了混合型的圖標，既有線性描邊的輪廓，又有色彩填充的區域。常見的樣式類型如下：
△ 混合風格的工具圖標
和工具圖標比起來，裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說，過分的簡約并不能彌補信息過多的信噪問題，我們要通過豐富視覺體驗的方法來增加內容的觀賞性，減少一屏內顯示內容的數量。
比如在分類列表里，是可以只使用線框和文字把大量內容濃縮到一屏以內，但實際瀏覽效率并不會增加，而且并不美觀。
△ 裝飾圖標在識別性上的作用
還有就是國內的界面設計環境，會根據運營需求設計進行特殊化處理，尤其在電商領域，首屏的圖標都會改成首頁風格的樣式，增加活動氛圍。
△ 節日活動中的裝飾圖標
裝飾性的圖標設計，雖然沒有明確的規范該怎么做，效果怎么好怎么來，但最常見的類型有四種，下面分別進行介紹。
1. 扁平風格
扁平風格的裝飾圖標，通常可以理解成是用扁平插畫的方式畫出來的圖標，除了繼承扁平的純色填充特性以外，也比普通圖標有更豐富的細節與趣味性。
△ 扁平風格的裝飾圖標
2. 擬物風格
擬物風格的圖標現在出現的頻率越來越高，集中在大型的運營活動中，通常這些活動會通過擬物的方式將頭部設計成有故事性的場景，所以自然頂部的相關圖標使用擬物的設計形式會更貼合。
△ 擬物風格的裝飾圖標
3. 2.5D風格
2.5D是一種偏卡通、像素畫風格的扁平設計類型，在一些非必要的設計環境中，使用2.5D會比較容易搭配主流的界面設計風格，有更強的趣味性和層次感。
△ 2.5D風格的裝飾圖標
4. 炫彩漸變
這是一個拗口的原創名詞，找不到更合適的形容，還是覺得浮夸點符合它的氣質。這種圖標，就是通過一系列非常激進的漸變和撞色實現，通常還會使用彩色的陰影。
使用這樣圖標的區域，通常都會呈現出一副五彩斑斕的景象，只有在內容非常豐富且用戶偏向年輕化的產品中可以使用，是一種非常難駕馭的設計風格。
△ 炫彩漸變風格的裝飾圖標
5. 實物貼圖
最后一種，就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創作和繪制出來的，但想想還是放進來合適。因為這種圖標的出現頻率非常高，有必要在后面掌握它的做法。
△ 應用攝影實物的裝飾圖標
最后，就要說說啟動圖標了。啟動圖標的設計比前面兩種類型的圖標說起來更難，因為它實際上就是把「LOGO嵌套進系統圖標模版」的圖標。
除了掌握必要的規范以外，啟動圖標的主體物設計就是 LOGO 的設計，已經超出了圖標繪制本身的知識點。所以，在后面我會針對這個問題講解一些比較套路易懂的設計方案供新手學習，這里我們先來了解一下它有哪幾種設計形式。
1. 文字形式
使用了文字作為圖標主體物的類型，通常是這類應用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來。
△ 文字類的啟動圖標
2. 圖標形式
對于一些偏工具，適合用簡單圖形傳達應用功能的啟動圖標，就會采取使用工具圖標的方式設計。
△ 圖標類的啟動圖標
3. 圖形圖標
圖形形式看起來和圖標形式很接近，但實際上完全不屬于同一類型，之所以它不是圖標，是因為這類圖標的主體圖形是一種經過高度抽象化的標識，傳達的是品牌性，而不是圖形的含義。
△ 圖形類的啟動圖標
4. 插畫形式
對于一些比較純粹的應用，如讀本、漫畫、幼兒類應用，就熱衷于采用卡通形象作為圖標的主體進行設計。
△ 插畫類的啟動圖標
5. 擬物形式
雖然現在扁平化的設計占據主導地位，但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說，擬物設計所傳遞的信息往往更直觀和準確。
△ 擬物類的啟動圖標
當然，還有其它的數之不盡的啟動圖標設計方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了。
前面介紹的三種圖標，就是今后在進入 UI 行業設計的內容。雖然圖標看起來簡單，但可以玩出的花樣不少。除了正確設計出圖標以外，高低階的 UI設計師之間的區別也包含圖標設計類型掌握的多寡。
所以，在開始學習前，不要將設計圖標的目標局限在最簡單的圖形繪制上，還有很多有趣的設計形式等待你們去嘗試。
了解了圖標的類型，就要開始了解做出這些圖標應該使用哪些軟件了。通常，UI 主要使用的設計軟件包含 PS、AI、Sketch、XD四款，理論上，它們都包含了圖標繪制的功能，如果我直接告訴大家去精通這4款軟件那么畫圖標就一點難度都沒有了，這是非常不負責任的，所以為了對新人更友好一點（如果已經全部精通了，就直接略過），我會分析一遍這四款軟件對于圖標設計的優劣，以及需要掌握的部分。
1. Sketch / XD
這兩款軟件是我們設計 UI 界面的主力。但大家一定要記得，它們主要的功能是用來完成 UI 界面元素的排版，而不是創作和繪圖。
雖然它們都包含路徑、鋼筆、布爾運算等功能（Sketch 相對 XD 更完善一點），想要繪制一些非常基礎的線性或面性圖標時沒有問題，但只要涉及到比較復雜的圖形，往往就束手無策。
所以，我建議所有學習 UI 的新人，都不要從這兩個軟件中入手，而是先掌握 PS 和 AI，后面想要快速實現一些簡單的圖標時，自然懂得如何使用 Sketch 和 XD。
可以說，PS 和 AI 的應用決定了我們圖標設計的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款無論什么東西都設計得出來的設計軟件，但是，它本質上是一款「位圖軟件」。后續的文章中會提及，在界面中采用矢量格式的圖標是最理想的，而 PS 針對矢量的操作并不便捷，比如將矢量圖層復制到其它軟件中。
實際項目中，我們會用 PS 設計一些視覺表現相對復雜的圖標，例如啟動圖標、擬物圖標、實物圖標等等。
繪制圖標需要用到的 PS 功能并不太多，需要在前期學習這個軟件的過程中加以篩選，重點是以下知識點：
雖然 PS 在實際項目中是用來畫復雜的圖標，但并不妨礙我們使用 PS 從最基礎的圖標開始畫起，因為想要熟練掌握上方的知識點，簡易的工具圖標是最好的磨刀石，之后再學習 AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 設計必學的一款軟件，它的功能異常豐富，主要用來設計矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細節的調整上，是最全面最細膩的軟件，并且 AI 中的圖形還可以直接復制粘貼到其它應用的畫布中。
如果掌握了上方提及的 PS 基礎，那么學習 AI 也就輕松了不少，其中，AI 設計圖標中有三個特殊的功能是需要重點掌握和學習的：
花幾個晚上，掌握了 PS 和 AI 的相關知識點以后，就為我們后續的學習提供了技術支持，可以進入下一階段了。
這是圖標系列文章的第一篇，信息量不算少。所以我們在結尾再總結一次，方便大家記憶。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
常見的分類是簡單的線性分類，缺少立體化的圖標分類思維。文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。
大家好，我是Clippp。看到好的圖標我們會習慣性地截圖保存，但隨著收集的圖標越來越多，會發現對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題！
對圖標進行分類時，普遍會遇到的問題是一個圖標有多種風格。例如下面這個水滴圖標，樣式很簡單，但可以劃分到多個類別中。
首先將圖標按尺寸大小分為兩類；
繼續細分對應的面性、線性、線面結合、扁平、擬物化等類型；
最后選擇標準、容器、漸變、3D、手繪、陰影等風格。
利用這種結構層級，可以明確定義圖標類別。
圖標的大小取決于具體功能。例如帶有漸變和陰影的圖標看起來很酷，但把它縮小到16px，這些酷炫的效果都無法呈現出來。
小尺寸圖標用作UI控件，起到引導功能或裝飾目的。
利用這種簡單的分類方式就能避免圖標發生重疊。另外擬物化這種細膩的風格不適用于小尺寸圖標中，所以在小圖標分類中沒有展示。
大圖標利用尺寸上的優勢能展示更多內容，分為多種組成形式。
1.2帶有背景色的面性圖標
1.2漸變線性圖標
1.3等距線性圖標
1.4手繪線性圖標
1.5斷線圖標
1.6雙色線性圖標
2.2帶有背景色的線面結合圖標
2.3錯位線面結合圖標
2.4色塊圖標
2.4單色線面結合圖標
3.2帶有容器的扁平化圖標
3.3等距圖標
3.4半陰影扁平圖標
3.5長陰影扁平圖標
希望大家能對圖標的分類及設計有更全面深入的認識，從而構建一套完整的圖標思維體系。
文章來源：站酷 作者：Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
