方法四、品牌颜色的使用

每个应用都应该有自己独特的品牌色，直接提取品牌色作为图标设计视觉元素，闲鱼图标图的品牌色是黄色（图1-34），个人中心的图标提取了品牌的黄色，进行了图标设计（图1-35）。

（图1-34）闲鱼 App图标

（图1-35）闲鱼的个人中心图标设计

APP底部标签栏图标设计

App底部标签栏起到一个全局导航的作用，用一个图标代表当前模块。图标一般会设计两种状态。点击激活当前模块的状态图标，未点击激活状态的图标。

方法一、 颜色的变换

图标选择剪影或者线性的设计形式，图标激活状态为一种颜色，这个颜色一般选择使用这个App的品牌色，其它的图标为灰色。图标的设计形式不做任何变化，例如网易严选（图1-36）的激活和非激活都是线性图标，只有颜色的变化。设计的形式没有任何变化。有一些格调App喜欢使用黑白色做为激活色。例如良仓App（图1-37）,使用了白色为激活色。

（图1-37）良仓底部标签栏

方法二、设计形式+颜色的变换

激活的图标设计为剪影的形式，未激活的图标设计为线性的形式。这样点击和未点击的图标除了有颜色的变化，还有设计形式的变化。例如京东（图1-38）使用了红色剪影图标为激活状态。未激活的图标是线性灰色设计形式。

（图1-38）京东底部标签栏

常见的线性变换为剪影的方法是，例如京东的APP底部标签栏，线性图形外轮廓填充为面，在面中运用正负形的设计手法，构成细节丰富的面。

有一些应用的线性图形本身比较简单，所以这种方法不适用。而是在线的基础上，填充面构成细节丰富的剪影图标。例如每日开眼App的标签栏图标（图1-39），线性图标是极简的几何图形设计。在基本的三角、圆形、方块添加了更多的小的块面构成剪影图标。

（图1-39）每日开眼底部标签栏

方法三、剪影图标颜色的变换

第三种做法，从iOS11开始，苹果系统的内置App的底部标签栏图标，开始倾向于全部设计为剪影图标，激活与未激活的图标只有颜色的变化。例如iOS11的AppStore（图1-40）使用了蓝色剪影图标代表激活状态，灰色剪影图标代表未激活状态。

（图1-40）iOS11的AppStore底部标签栏

方法四、动画切换

一些应用的标签栏图标会带上一些动效，使设计更加具有趣味性。例如飞猪App（图1-41）采用的就是最常见的动效，点击图标，图标会有一个小放大的抖动效果。

（图1-41）飞猪底部标签栏

另外一些App采用更加复杂的设计效果，例如优酷的App（图1-42）底部标签栏的图标，除了基本的大小抖动之外，每个图标的内部填充元素会有一个动效。例如发现图标除了填充外，会有一个旋转效果。而星球图标，内部的填充线会有一个由左到右填充效果。

（图1-42）优酷底部标签栏

方法五、超出标签栏

App的图标的变化范围不只在标签栏区域，也可以延伸出标签栏的背景外。例如毒蛇电影App（图1-43）的底部标签栏图标的点击激活效果是一个圆形背景图，这个背景图超出了底部标签栏的高度。

（图1-43）毒蛇电影底部标签栏

方法六、 节日图标

在一些节日的时候，图标会做一些特别的设计，这时候的激活形式可能运用独特的品牌设计图形。例如淘宝的双12界面（图1-44）

（图1-44）双12淘宝底部标签栏

学生作业

这是我指导的近期竹笋班的一些学生作业，希望通过学生作业中实际的界面设计案例，给大家一些启发。