04 ins風格動漫圖片高清(插畫類圖標-圖標類型和風格總結)

1、拆解關鍵詞及關鍵詞聯想

將需求信息中的關鍵詞進行拆解及發散，轉化為生活中常見的事物，釋放它所代表的內在含義。關鍵詞的同義詞、近義詞、形狀相關或相關聯想的物體

例如說到榮譽，馬上就能想到獎杯、獎狀、金牌、皇冠等。然后通過這些詞聯想，去找一些氣質相符的圖片制作情緒版，通過情緒版可以感受到產品的調性，然后從中提取一些形狀和色彩做為產品圖標的主要造型

2、根據關鍵詞聯想輸出圖形

根據上一步拆解的詞語或物體，通過簡單基本形狀轉為生活中常見圖形。常用的2中方法是用AI鋼筆工具（sketch貝塞爾工具）或者布爾運算進行繪制

3、根據場景輸出

我們常見各個圖標文章分析應該注意十幾點，而這些沒有規律和邏輯難以記憶，一時記住了也容易忘記。這些總結其實是從Material Design或者iOS規范中得來的。認真研究這些細節，圖標制作就不難了

圖標端點分為直角和圓角，我們在設計過程中要統一圖標端點，保持一致的設計語言

拐角

圓角自身的圓形屬性會給人圓潤、可愛 ， 更加安全、親密的感覺。因此社交、娛樂、直播、美食等圖標多會使用圓角圖標

傾斜角度統一

內部空間比例的不一致易導致圖標視覺重點不統一。如下圖左第二個圖標重偏下，第四個圖標重心偏上，右邊是早期PP助手的標簽欄圖標，圖標內部挖空面積占比率相同，整體視覺和諧統一。

在繪制描邊圖標時，要時刻注意圖標的描邊粗細是否統一。在 @1x 一倍圖設計模式下，以 24px 為網格基準的話，常使用的圖標粗細有： 1px 、 1.5px、2px、3px ，1.5的粗細對顯示屏要求比較高（半個單位的路徑會導致圖標在最終顯示時邊緣模糊，不清晰）

細描邊給人視覺感更加精致，粗描邊相對更加粗獷，由于目前流行趨勢的發展，常常也有粗描邊和細描邊結合的設計風格

除了保持相同的視覺權重，圖標的描線寬度也應該保持一致，達到像素級統一。元素之間的最小間距，應該大于或等于描邊的寬度。

蘋果、谷歌、IBM，國內的阿里Ant Design都出過相關的圖標網格規范，這里以谷歌的Material System 圖標網格來進行說明。在24*24px圖標尺寸，上下左右安全邊距是2px，關鍵形狀的四個基本形狀為圓形20*20px、正方形18*18px、縱向矩形和橫向矩形20*16px。通過關鍵形狀的規則統一圖標大小及位置，達到視覺的平衡

對齊像素點

清晰度（像素完美對齊）為了避免使圖標失真，可以通過將X軸和Y軸坐標設置為整數來將圖標定位在像素上。在使用軟件AI或者sketch的時候繪制基礎圖形不要出現小數點和奇數，多用偶數

我們了解了 i買粉絲n 的基本知識，怎樣評判我們的 i買粉絲n 是否合適，是否貼合整個產品呢？我們需要了解什么才是一個好的 i買粉絲n 。檢驗標準也是基于我們繪制的標準，分別是： 識別性，規范性、整體風格與品牌感。

判斷事物的價值在于它的用途是什么，圖標的用途是幫助用戶理解信息，所以表意準確（清晰準確的傳達信息）就是圖標最重要、最底層的價值，如果你設計的圖標用戶看不懂，即使視覺再美觀也沒有任何價值可言。

含義識別：是視覺語言是否替換文字語言，簡言之就是讓你的圖標可以被用戶理解，不會讓用戶產生歧義。常見的就標簽欄指南針表示發現，房子表示首頁等

視覺識別：是圖標的大小，顏色，線條的粗細，這些影響影響視覺識別的因素，在具體樣式中提高視覺識別性。

我們要保證圖標在視覺大小的一致性，圖標飽滿度（正負形）、遵循同一種規律，細節統一性。這里的4點在前面繪制過程中已經寫的非常詳細了。

整體風格是要注意圖標傳達的性格與 app 的基調是否一致，每個產品因為定位，針對人群不同，整個 app 的基調也不一樣，例如騰訊動漫，它的性格就是偏卡通可愛的類型，那么的圖標設計上也要體現這個性格特點，盡量使用卡通圓潤的方法去設計。一個廣告語：復雜世界里，一個就夠了，整個APP從啟動圖標到整體調性都是簡潔干凈，克制的色彩運用傳達產品調性。

品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產品獨特的品牌氣質，挑選合適的技法。然后把這些元素具象化，融入在界面設計中。下面幾款產品從產品名到啟動圖標設計高度融合。

圖標可用性測試是基本規則是根據圖標驗證推導的

識別度：

1、用戶是否能夠理解圖標的含義？

2、是否是用戶熟悉的圖標？

3、是否與其他圖標含義沖突？

4、是否能通過5秒原則？

5、圖標的可擴展性怎么樣？

6、是否需要增加文字標簽？

設計是否統一

1、視覺語言是否統一？

2、圖標的設計復雜程度是否統一？

3、整體設計是否協調、統一、視覺體系高度集中？

4、圖標整體配色是否統一？

品牌信息：

圖標是否獨特性、能否傳遞品牌信息？

一般情況下有 JPG、PNG、GIF、SVG 四種交付格式。其中JPG、PNG、GIF為位圖，受圖片本身的分辨率大小限制，無法靈活的修改尺寸。而SVG為矢量格式，支撐無損縮放。

在沒有SVG前因為要考慮到適配高清設備，需要切各種倍數的圖標進行適配。不過現在的開發軟件及插件都自帶切多倍圖的功能，比如藍湖。

JPG：兼容性強，自帶背景，不支持縮放。

PNG：支撐透明格式，不支持縮放，需要注意圖標四周透明區域大小。

GIF：簡單的動態圖標使用，透明背景時邊緣會有鋸齒，沒有辦法支持豐富的顏色。

SVG：無損縮放矢量圖形、體積小，單色模式下支持開發自行修改顏色，可修改樣式參數。

另外一種交付方式是將SVG格式的圖標上傳至類似i買粉絲nfont的網站后，完成圖標的交付。需要注意的是：

1、SVG不支持漸變顏色填充

2、SVG不支持描邊，需要將描邊轉化為閉合圖像

3、圖標的大小相同時，需要在圖標下方增加一個相同尺寸的透明方形，同圖標一起導出上傳

而i買粉絲nfont對于圖標制作要求嚴格，上傳時需要注意查看自己的圖標是否符合要求。 鏈接

資料來源

UI設計師想做好圖標設計？請問圖標歷史了解過嗎？

圖像學的簡要歷史

《I買粉絲n Design Guide》

《I買粉絲n Utopia》

《the Ultimate Guide to an Interface I買粉絲n Set》

《svg圖標庫以及與i買粉絲n font對比》

很赞哦!（3199）