APP开发设计中，小图标的使用场景分析

2017/10/18 　来源:APP公司

今天我们来聊一个APP开发设计内的小图标使用规则，在一个产品里面需要多少种图标才满足功能，才不会让界面看起来乱，如何把控系统图标样式，那么今天就来聊聊。

这里我把图标分为：基本的功能图标（比如Tab bar/顶部导航/设置界面一些图标），栏目图标（点击入口进入一个独立的栏目页面,一般在页面内），品牌图标（点击进去就是一个独立品牌）下面开始。

目前小图标的使用场景现状分析国内的现状

小图标系统没有一个明确的指导规范，导致各家根据自己视觉语言去定义图标使用规则，质量参差不齐，小的产品就参考大厂所做的产品图标，其实不明白他们为何这样做，没有一个清晰的逻辑，最后导致系统图标设计不严谨。

国外的现状

国外相对国内来说，比较少出现这种情况，原因是国外大多产品业务单一，不像国内，特色社会主义下的产物，业务丰富，产品复杂,最具代表性就是（淘宝，天猫，京东，手机QQ）

废话说完，下面进入正题。我们来分析下小图标使用场景规则

行业标杆产品小图标使用规则分析

要想做得更好，就要先了解行业标杆产品是如何做的

Facebook系统图标大体上使用了面型和线性图标，在设置界面使用了带底板的图标（是为了区分不同业务），设置界面带底板上面的面型图标和顶部导航未带底板图标风格样式一致，且大家注意观察没有，Facebook 在图标上使用整体视觉语言是通过圆角大小来保证面型和线性的一致性。

总结分析：Facebook整体关键页面使用图标风格就面型和线性两种。这样保证视觉风格不花哨，也能达到满足产品需求，在主页面，直播、照片、签到其实属于三个功能图标，按道理需使用线性图标，但这里Facebook 需要强调这个功能，所以使用了面型图标

Airbnb的整个系统图标视觉语言都是以线性为主，图标视觉线索和产品图标风格一致，都是线性，从品牌传达上得以继承启动图标的视觉语言，airbnb之所以图标全部是线性是因为所有图标都指向意思都明确，都是功能描述性图标

总结分析：Airbnb其实是业务相对来说算是单一的一个产品，所以整体设计轻量化，图标继承LOGO 的视觉基因（线性）

天猫APP在国内来说，业务算是比较复杂的一个产品之一，业务越复杂的产品，图标其实就不好控制，天猫这里使用了三种类型图标，在首页顶部几个独立的品牌的图标样式风格和其他有所区别，扁平插画风格，其余顶部和底部导航都采用线性图标，在我的页面，其实（代付款，待发货，待收货等）这几个图标按道理需要使用线性的，这几个功能算是比较常用的重要功能，所以这里使用了面型图标，图标颜色颜色圆角都和线性的焦点色功能上的一致。

必备工具属于一个单独的栏目入口，所以图标样式有所区别与其他