详解品牌设计在图标设计中的运用(3)

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淘宝底部标签栏

学生作业

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

案例1流萤浅宿

难忘的旅程从流萤浅宿开始(图1-45)。不论出门在外或在家附近都能找到探险之旅。获取世界各地独特的房源、体验及好去处的信息，预订旅程所需的一切，或者开始当房东赚钱。

(图1-45)流萤浅宿logo

首页的底部标签栏图标(图1-46)选择了logo图形进行了2次设计。整个界面与品牌个轻飘格调个取得了一致。

(图1-46)流萤浅宿首页

案例2蚂蚁家

蚂蚁是一个爱捯饬家的群体动物，用“蚂蚁”旨在象征APP所针对的使用人群。蚂蚁的家即蚁巢，因为蚁巢分木栖巢、地下巢、地上巢等多种类型，所以“蚂蚁家” APP(图1-47)也寓意创造一个丰富多彩、形式多样的家居生活。首页的标签栏图标根据logo图形体现的棱角感，设计了全直角风格的图标(图1-48)。

(图1-47)蚂蚁家logo

(图1-48)蚂蚁家首页