在本期中，我们将讨论在APP中使用小图标的规则。产品中需要多少种图标才能满足功能，因此界面不会显得凌乱，如何控制系统图标样式，然后让我们今天说说。

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

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

国内的现状

小图标系统没有明确的指导原则，这导致根据他们自己的视觉语言定义图标的使用规则。产品质量不同。小型产品是指大型制造商生产的产品图标。事实上，他们不明白为什么他们这样做。一个明确的逻辑，最终系统图标设计并不严谨。

　　国外的现状

相对国内而言，这种情况在国外比较少见。原因是大多数外国产品都有一个单一的业务。与具有特色社会主义的国内产品不同，业务丰富，产品复杂，最具代表性的是（淘宝，天猫，京东）。 ，手机QQ）

废话结束后，以下是主题。让我们分析小图标的场景规则的使用

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

要做得更好，您需要了解行业基准产品的完成方式

Facebook系统图标通常使用面部和线性图标，并且在设置界面中使用带背板的图标（以区分不同的服务）。界面图标在底板上具有相同的面部图标，顶部导航没有地板样式图标样式。每个人都关注它。 Facebook使用图标上的整体视觉语言，通过圆角确保面部和形状的均匀性。

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

Airbnb的整个系统图标视觉语言是线性的，图标视觉提示和产品图标风格是一致的，是线性的，从品牌传播到继承启动图标的视觉语言，之所以airbnb图标都是线性的，因为所有图标全部指向明确的含义，是功能性描述性图标

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

天猫APP是中国比较复杂的产品之一。产品越复杂，图标就越难。天猫在这里使用三种类型的图标，在主页的顶部，有几个独立的品牌。图标样式风格不同于其他平面插图样式，其余的顶部和底部导航都是线性图标，在我的页面中，实际上（付费，等待发货，等待收据等）这些图标都是合理的线性，这些功能被认为是更重要的功能，因此这里使用了脸部图标，图标颜色颜色圆角与线性聚焦颜色功能一致。

必要的工具属于单独的列条目，因此图标样式与其他工具不同

KEEP是我经常使用的健身产品。在这里，我不得不呕吐他们的系统图标，不使用任何逻辑。

首先，它与导航图标相同。为什么两个地方的图标样式不一致？不一致的原因是什么？ （蓝框）

在红色框部分中，两个图标使用具有底部表面样式的图标。在这里，请用颜色来区分两个图标的含义。在我的页面中，这是一个功能图标，颜色与底部选项卡相同，找到的页面上的图标属于Column图标，使用蓝色进行区分，有点类似于天猫APP我的页面

Spotify系统图标，每个人都应该非常清楚，基准产品，图标的整体风格是一样的，在心情类型中使用大脸图标来区分各种风格。整体使用2种图标

　　总结

上面列出的是几个产品来说明，每个人都应该清楚地了解如何定义产品的图标使用规则，我们必须理解为什么图标功能被明确区分，实际上，目的是为了以后管理，制定规范，使其更系统，更一致，并降低产品复杂性

« 什么是免费的代购源码网站开源系统？这些型号易于使用且功能强大。 | Axure应用技巧：可重复使用的控制库生产实践 »