侧导航的图标设计分析方法

版权申明：本文出自“SKY_Karry”原创，感谢“SKY_Karry”的原创文章分享！

图标是用户在应用中接触最多的视觉符号，它既承载了引导用户操作的功能，也是构成产品视觉风格的重要元素。特别是后台类的界面设计，除了表单和数据，其次设计感较重的就是图标了。所以本文主要分享在接到新项目时，如何确定、把控图标风格，我这边列举一个后台界面中对于左侧导航的图标设计分析方法。

前言：图标的概念

_________________________________________________________________________________

产品图标：产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标，用户就可以大概感知这个产品主要是做什么的。

系统图标：第二种图标被称为系统图标。系统图标指的是担负着一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂。比如QQ底部四个系统图标："消息"、"联系人"、"看点"、"动态"就使用了比较简洁的线性风格。
我们要研究的左侧导航图标属于系统图标族群。

一、用户访谈：了解你用户的需求是关键

_________________________________________________________________________________

在做问卷的时候需要辩证地判断，人们不会告诉你他们需要什么。如果你真的去问用户，他们想要什么。得到的回答，无非是希望现有产品更好、更快、更便宜。就像亨利·福特那句著名的话说的：人们只会说自己想要一架更快的马车，而不是说要一辆汽车。所以我们需要通过问卷去了解用户，并从用户的言语中去挖掘真正的需求和改善点。

问卷调研——

受访人员：一般to B的产品能实际接触到用户的机会比较少，先可以从产品经理和业务经理等调研入手，有时间和资源可以再去专门进行用户上门访谈等形式。

目标用户：我们的群体主要是哪些（年龄层、学历、职业等）？

使用场景&行为特征&特征&偏好

1、目标用户对于页面视觉的要求？

2、用户对于图标的要求主要关注点在哪些方面：形状、颜色……？

3、用户平常喜欢逛的网站或者APP？

使用经历&感受
1、用户对于图标最主要的关注页面或位置？

2、用户对于左侧导航图标的关注？

3、找不到想要的类目时会不会去靠图标找到需要的位置？

4、左侧导航折叠的时候，会不会仅靠图标就能辨别需要的类目？

5、在使用后台界面的时候有没有出现什么问题？（浏览器显示不了icon、图片等）

问题&期望
1、你了解到的用户比较喜欢的竞品哪些部分？

2、是否有图标在内？

3、与其他竞品相比有哪些吸引的点？

4、你们对于现有产品的整体定位是？

5、是打破整个界面较素的设计风格，提升图形化的情感体验？还是结合左侧菜单文字，达到相互阅读理解与互相影响？

……

总结：
在图标为主的界面里，用户对其关注度比较高；如果是在其他业务为主的界面里，用户对其关注度不那么高，并且在左侧导航里用户一般是文字为主图标为辅结合着来看。

二、设计目标分析：行业特性、不同应用场景下区分性等方面带来的情感体验

_________________________________________________________________________________

● 同行业：暂无优秀的案例 效果好的案例分析：

● 其他行业（后台管理类的界面）——阿里云、华为云、gitlab、高德开放平台

● 反面的案例分析：Ant Design、创造狮

◈ 效果好的案例分析

1、阿里云后台：左侧导航有些采用面性，有些是线面结合，在同属于左侧导航的情况下采用两种图标的表现方式，形成更为"强烈"和"肯定"的风格，整体层级感和图标形象比较突出。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

2、高德开放平台：全部采用面性为主的图标表现，hover和选中采用变色处理，层级和状态区分明显。

3、Gitlab：同一个导航的位置有多种风格的表现，线形加粗图标、线面结合、面性图标三种方式结合的表现，整体简洁看上去并不突兀，而且有趣味性和记忆性 ，品牌风格比较突出。