最近發現一些能提高圖標細節和高級感的小技巧，今天與大家分享下這幾種風格的設計思路，以及需要注意的點。
分享大綱：
顧名思義圖標之間有縱深前后關系，通過這樣去處理，可以讓圖標層次豐富，增加設計細節，打破枯燥無味的單色扁平圖標。
通常大部分人設計一個圖標就直接將圖形畫出來后，這樣就完事了，沒有繼續深入下去。這樣圖標看著枯燥乏味，普通了一些。
如上圖，將圖標在接口處進行細節弱透明度處理，那么效果就完全不一樣了。
這里需要注意，一般都是在圖標的接口處進行層疊處理，從A到B的一個線性漸變。
下面來看看案例：
△ Atlassian的品牌圖標系統
使用建議：運用在面形圖標效果會更好些，或者線條粗一些的圖標，一般運用在TabBar上面居多。
這種比較好用，將圖標進行抽象放大化處理，變成一種圖形方式。一般運用在卡片設計上面居多。
左側卡片上面，圖標直接使用描邊效果?？ㄆ锩骐m然加了一些底紋圖形，但是整體效果略顯平庸了一些 。
重新將圖標進行圖形化處理，既能夠表達當前含義，同時設計上細節和品質感有所提升。
其他思路延展示例：
當然還有一種類似的思路，可以將圖標進行放大化，并進行色彩分割處理為背景，前景放圖標和文案等。
如圖，我將前面兩個思路綜合運用，圖形化背景和層疊圖標。這里的圖形希望大家不要亂用，盡量使用圖標的圖形來演變。
圖標通過弱漸變透明處理，其思路有點類似第一個。但是這個方法圖標整體帶透明度的范圍更大。
先來直接看個案例：
這種圖標給人比較新穎的時尚感，層次也豐富。
如何處理這種圖標？
非常重要的一點，需要注意不識別度問題。如左側圖，圖標和背景之間幾乎融為一體，看不清主體元素。右側處理剛好，能夠識別出圖標含義。
處理時候一定要注意透明度的關系，當然也與卡片背景色有關系。
關于圖標設計三個小技巧，可多看幾遍，思路比較簡單直接。當然最重要的是靈活運用，也可以將三個思路都融合起來去設計圖標。
本文只是拋磚引玉，這些圖標處理的技法，并不是能適用所有場景。大家還是需要根據自己產品特征，找到合適的突破點去設計。
文章來源：優設網 作者：功夫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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近遇到一個同學，說做了很多稿圖標的方案最終還是沒有確定下來，但眼看著產品馬上就要上線了，該怎么辦。經過一輪溝通，發現他陷入幾個新手設計師在畫圖標比較容易犯的問題：
從以上這幾個問題，我們進行深入思考，會發現其實這些只是表面上的問題，實際上是在說什么呢？
基于以上這個案例，分享下我在日常設計中常用的一些方法，希望可以幫助遇到相同問題的小伙伴們進行一些答疑，從而幫助你們打破壁壘，高效成長。
下面發改分成 3 個部分來進行闡述：思考維度的鍛煉；圖形的設計方法；系統化方案呈現
當我們要設計一個圖標的時候最容易入手的就是圖標的表意，從表意延伸到圖形的設計，然后再加以不同的設計手法（線、面、線面等等）。
1. 圖標的表意
圖標的表意方式，大概可以拆分為以下幾種：具有普識性的圖標、可進行表意延伸的圖標、通過組合的圖標、抽象的需要關聯的圖標。
2. 普識型圖標
即我們在現實生活中常見且具有常識性性的圖標，例如：刪除、添加、放大、搜索、筆記本、手機、眼睛、禮物等等。這類的圖標重點在于形體的打磨上需要多花一些時間，從不同的角度進行嘗試，比如以刪除為例子，同樣的造型但可以有不同的設計表現。
3. 表意延伸的圖標
即一個事物可以被延伸為一個或者多個圖形表現的圖標，例如：點贊、瀏覽、設置、收藏、評論、事件等等。例如點贊-延伸為你很棒用大拇指來表達，游戲延伸為游戲手柄、設置-延伸為機械操作用齒輪來表達，評論延伸為對話使用對話框來表達，瀏覽-延伸為用眼睛的圖標表達。
除此之外延伸表意的圖標可以有多種設計方式，例如以事件為案例。
4. 組合型圖標
主要是指該類圖標的表意需要通過 2 個以上的圖形進行組合才能更加準確進行表現，例如：群、群聊、好友、添加聯系人、情侶、轉賬、紅包。
5. 創造類圖標
特指認識中沒有，因為產品需要被二次創造出來的圖標，一般在一些新生業務中會常出現，這類圖標初期往往需要伴隨文字一同出現。例如：微信的朋友圈、視頻號、小程序、手機系統的 Wi-Fi、藍牙等類型等圖標。
常規的圖標表現方法（線形、線面、面形、插圖、疊色等等）我們基本都了解，但作為設計師更應該知道潮流趨勢，清楚現在流行什么類型的設計，這樣才能讓你作出更加出彩的設計。
這里分享幾種目前最流行的圖標設計類型：
1. 磨砂質感圖標
磨砂質感圖標作為 2020 年底最流行的圖標，已經在不少 APP 中看得了相關的設計，從設計方法上并不難，重點還是在于是否有需要和應用場景。
2. 插圖+磨砂質感
圖標使用小插圖的方式進行繪制，然后再結合高斯模糊的視覺表現手法，整體讓圖標更具有層次感和通透感。
3. 3D 質感圖標
3D 作為這 2 年最流行的設計趨勢，自然也牽動著設計師的心。但 3D 的打磨相對會比較耗費時間，不過仍然是值得一試的設計方式之一，目前在 APP 的設計中比較少見到應用，或許會成為 2021 的趨勢之一。
4. 3D 磨砂質感圖標
基于 3D 與毛玻璃圖標的結合，整體的表現結合了這 2 種風格的特點，既保留了毛玻璃圖標的通透，同時也具有 3D 的空間感。
5. 流光溢彩的圖標
算是屬于漸變類型的一種，但顏色和細節的跨度相比常規的漸變圖標更加豐富，整體讓人感覺具有流光的效果，更加具有未來感。不過從目前來說，更適合作為獨立的應用 APP 設計，作為常規的圖標設計需要一定的接受度。
想要了解設計的方法之前，我們得了解有哪些類型的圖標，具體大家可以查看我之前撰寫過的文章，里面有詳細的分析了圖標的設計類型。除此之外，這里還可以分享下我日常中設計圖標使用的方法。
這個專題也有超詳細的分類和教程 → https://www.uisdc.com/zt/icon-drawing-guide
1. 表意+基礎形
基礎形體使用普適性較高的圖標造型，在圖標的亮點或者點綴處通過表意關聯進行創意設計，從而讓圖標獲得新的感受，但又具有較高的識別性。案例：例如我們以日歷圖標為案例，可以比較直觀的使用日歷的普識圖形，然后通過日期的方式來進行強調賦予圖標生命力，然后再疊加上顏色和質感，并且增加一點小趣味的折角設計。
2. 關聯延展
基于實際場景的認識來進行圖形關聯延展，并且進行一定的美感升級及圖形的優化，延展出最終的圖標設計，這種方法可以大大提高大家對于圖標的識別度。案例：設計一個快速聊天表意的圖標，聊天我們常規使用氣泡，快速我們可以關聯為閃電，然后把氣泡和閃電進行結合。
3. 組合升級創意
利用一些正負形的創意方法，使用 A、B 圖形的進行有機融合或剪切，使其獲得新的圖標造型，讓整體的圖標感受更具有創意點。案例：例如我們嘗試畫一個具有宇宙感受的游戲圖標，可以通過手柄和星球的有機結合讓整體的圖標帶有游戲和星球的意思，整體提升了表達的創意。
方案的呈現屬于設計的一部分，雖然不能起到決定性的作用，但好的呈現效果往往可以幫助我們得到更好的印象分，這里分享一下我在設計過程中嘗試的一些方法。方案的大小或者輸出的類型也決定著我們呈現方案的類型，下面根據不同的類型分享不同的呈現案例。
1. 縱橫對比法
適用于需要大量嘗試的時候，以窮舉輸出為典型案例，我們可以用最基礎的圖形為中心點，結合圖形的表意和圖形風格進行縱橫的發散性擴展，例如橫向為表意、縱向為圖形風格，中間部分屬于交叉部分。
案例模版
2. 單個圖標創意思考
對于一些標志類或重要的圖標，我們需要闡述我們的設計想法或者來源，這種呈現的方式就可以很直觀且簡潔的表現我們的思考。
案例模版
3. 整套輸出
對于一整套的圖標，我們需要在案例上呈現圖形的設計規則，包括但不限于有：圓角、角度、組合規范、斜度等等。除了呈現圖形之外，請補充上顏色的應用規則、顏色的表意等等。
案例模版
圖標設計雖然是一個小內容但卻很重要，反映著著整個頁面的精致度，在 UI 界面來說是除界面排版之外最重要的一環，因此是很值得我們去研究的設計之一，建議在日常工作中多練習多看。
文章來源：優設網 作者：ID設計站
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖標風格匯總
圖標設計流程
案例講解
圖標資源輸出
線性
面型
線面
單色
雙色
漸變
不透明度
一筆成形
斷點
該風格設計感和個性都極強，很考驗設計師對造型繪制的把控，功底不夠就很容易導致設計后出現識別問題。所以設計難度較大，且延展性較弱，難以表達復雜語義，使用需謹慎。
單色
雙色
不透明度
晶白
磨砂玻璃
等軸側（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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn