筆者今天将和大家分享下：設計師每天都會用到的圖标的運用場景、類型，以及講述：什麼時候用什麼類型圖标？。

圖标是什麼？

圖标廣義上是指有指示作用的标志，也可以說圖标是一種“視覺語言”， 通過圖形表達出所代表對象的意義、特征以及信息。

圖标已經融入了我們的生活，它能夠快速幫助人們定位以及作出相應的決定，比如：商場、洗手間、進出口等指示牌、路上交通提示的标志等等，所以圖标不止是我們界面中才會用到。

圖标的作用

在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也運用了漸變色。

總結

1. 圖标可以簡單理解為一種人們都讀懂的語言，也是界面必不可少的元素之一，因此圖标必須要具備一下幾點：可識别性、唯一性、統一性、吸引力等等。
2. iCON的界面很重要的元素，它的表現形式多樣化：不同圖标有自己性格特征，需要根據我們用戶、産品特征，以及設計趨勢結合去定義風格。
3. 圖标運用場景多：可運用與APP的系統圖标、APP空狀态、APP彈窗、APP引導頁、APP界面導航、APP加載動畫。正确的運用能夠提升産品統一性，打造産品風格主張。

作者：曼曼，我們的設計日記（ID：helloskys）

本文由 @我們的設計日記 原創發布于人人都是産品經理。未經許可，禁止轉載。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部