起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識圖標，必不可少的界面元素
筆者今天將和大家分享下：設計師每天都會用到的圖標的運用場景、類型，以及講述：什么時候用什么類型圖標？。
圖標是什么？
圖標廣義上是指有指示作用的標志，也可以說圖標是一種“視覺語言”， 通過圖形表達出所代表對象的意義、特征以及信息。
圖標已經融入了我們的生活，它能夠快速幫助人們定位以及作出相應的決定，比如：商場、洗手間、進出口等指示牌、路上交通提示的標志等等，所以圖標不止是我們界面中才會用到。
圖標的作用
在UI設計中，圖標可以引導指示用戶，圖文并茂、生動形象的幫助用戶快速的到達“目的地”，使得人機交互更容易；另外，還可以節省空間、增強界面美感。
圖標運用場景
1. 應用商店
也就是手機桌面上的系統圖標以及不同應用的圖標，可以看出：從早期的擬物化到如今的扁平化，圖標能夠形象的表達出對應的功能以及代表的應用，幫助以及引導用戶快速進入對應的APP。
2. 功能入口
通常放在APP第一屏的位置，能夠將APP的核心功能、或者用戶常用的入口直觀的展現給用戶。
另外還可豐富界面，比如：3-4個顏色（顏色類型多容易造成界面凌亂花哨）漸變的底色結合實色的面性圖標，讓界面充滿活力。
常見的有APP中導航部分，通常是4-5個，最多10個，這里不宜放太多，從視覺上，會造成界面擁擠，影響美觀。
從產品的角度上講，這里的iCON一般各大功能入口，可以呈現出APP的主要功能，用戶能夠快速找到功能；這里圖標除了引導導航作用，還能在大促時候做營銷氛圍。
核心入口操作，如微博的發微博，閑魚的發布，中間“加號”，意義明晰，傳達給用戶的信息是點擊可添加編輯內容，點擊之后對應彈出界面呈現出核心的“買閑置”等3個功能入口；iCON不僅僅意義明確，同時要能承載對應的交互功能。
3. 情感化
在一些直播軟件里面，圖標能很好的傳遞出氛圍，幫助商業轉化，圖標在這里起到作用非常大，很多時候平臺的收入就和這些圖形設計有關。
Same的頻道名稱前加上不同修飾的iCON，界面更有趣，更加符合年輕用戶喜好，圖標在這里承載不止是功能，也是情感的傳遞。
4. 空白頁面
當APP出現網絡不好、加載狀態、界面異常等等的時候；一定程度上會阻礙用戶影響用戶使用APP。
這時，我們可以運用插圖或者圖標作為配圖配合文案正確的、清晰的、直觀的表達出當前的狀態；結合情感化設計與用戶產生情緒上的共鳴。
5. 彈窗
APP中有不同類型的彈窗，是不可缺少的組成部分；同理iCON作為配圖注入情感化設計，有趣生動的彈窗不僅減少用戶的“厭惡感”還能增強互動、鼓勵用戶完成引導提示功能。
6. 引導頁
通常情況，用戶會迫切的想要進入到應用內部，因此會快速滑動界面，所以想要在幾秒鐘內讓用戶產生印象，好的配圖能夠不僅僅需要準確到位的展示出APP更新內容以及產品特色，還要讓用戶容易抓住關鍵點。
圖標風格類型
圖標的風格可以簡單的分為線形圖標、面形圖標、線面結合的圖標，可根據不同場景以及產品的調性去靈活運用。
線形圖標：由線條來組成的圖形，沒有填充色;界面中比較常用的常見，線的設計整體視覺感受比較輕量化。
面形圖標：形狀是填充色，可用作功能入口，或者一些行業入口，圖標填充為主，配合彩色使用。
線面結合：線條和填充的形狀組合，元素相對豐富。細節比較多，使用場景也比較靈活。
設計Tips
在設計圖標的時候，首先提取產品的調性、面向的用戶群體、與之APP界面相符合的設計風格；根據APP的定位選擇可愛的、 活潑的、有趣味性的、具備親和力的(可以選擇帶圓角的、筆畫柔和的圖標、雙色或者多色的) ；還是穩重的、安全的、可靠的（直角的、筆畫硬朗的、單色的）。
馬蜂窩提取了LOGO下面的弧度運用在了每一個iCON上包括下劃線，品牌基因運用的特別好在iCON上面貫穿了整個APP。
網易蝸牛則是用了面性的iCON，領讀的小書本、 書桌的小桌子都很深刻形象的傳達出這是一個閱讀的APP。
一些趨勢
漸變色運用、雙色彩多色彩疊加或者組合使用，色彩方面不再是單一的色。
微小的交互動效的使用，動畫中融入情感化設計，讓人機交互更有趣，不再是靜止狀態（比如：QQ 、 優酷、愛奇藝、土牛、標簽欄切換時候的icon加入了動效設計）。
3個iCON切換的時候圖標的表情視線跟著變換，(就好像當前是我兄弟表現呢，咱們得看著支持下~是不是很有趣味性呢~) 聊天創空中語音一欄的iCON可特別留意“表情”iCON的點頭， QQ這里的iCON也運用了漸變色。
總結
- 圖標可以簡單理解為一種人們都讀懂的語言，也是界面必不可少的元素之一，因此圖標必須要具備一下幾點：可識別性、唯一性、統一性、吸引力等等。
- iCON的界面很重要的元素，它的表現形式多樣化：不同圖標有自己性格特征，需要根據我們用戶、產品特征，以及設計趨勢結合去定義風格。
- 圖標運用場景多：可運用與APP的系統圖標、APP空狀態、APP彈窗、APP引導頁、APP界面導航、APP加載動畫。正確的運用能夠提升產品統一性，打造產品風格主張。
作者：曼曼，微信公眾號：我們的設計日記（ID：helloskys）
本文由 @我們的設計日記 原創發布于人人都是產品經理。未經許可，禁止轉載。
??