品牌基因在图标设计中的运用
方法一、品牌图形整体应用
首页最常见使用的图标是一个房子的图形,这个图形来源于PC时代的面包屑结构,Home的图形代表家,代表不管你在网站哪个层级,点击Home图标像回家一样可以回到起始的位置。很多应用的图标上的logo,都是一个让人印象深刻的主图形,那么我们可以直接把这个logo图形做为应用的首页模块图标使用。这样的好处很明显,每次用户打开应用后,都会看到这个图形,反复加强了用户对App的logo的印象。例如大众点评、饿了么、花瓣、猫途鹰、网易云音乐提取各自品牌图形(图1-27),应用在了App底部导航栏首页模块上
(图1-27)品牌图形
方法二、提取品牌图形的局部元素
毒物App的logo是一个经过设计的文字+三角形组成(图1-28),这个三角形做为logo典型元素抽象出来,在毒物的界面中使用贯穿。App底部标签栏(图1-29)的首页模块图标用了这个三角图形来表达。当用户向上滑动页面,这个三角形的图形会有一个翻转动画,点击可以快速回顶部。因为第一个图标采用了这样的极简风格的图标,后面3个也采用了极简风格的几何线条图标
(图1-28)毒物App图标
(图1-29)毒物App标签栏图标
Logo局部的图形不仅可以运用在底部标签栏,也可以运用在界面设计中,做为界面独特的设计语言。例如LIFE的logo由西文字母和指纹图形构成(图1-30)。
(图1-30)LIFE App图标
在列表页的BANNER右上角抽象使用了这个指纹的元素(图1-31),代表阅读量。而不是经常看到的眼睛图形。这个独特的品牌图形融入到界面设计中,使界面有了自己独特的设计语言。
(图1-31)LIFE列表页
方法三、品牌名称的使用
一些应用的名称是字母构成,为了强化用户对于应用名称的认知,直接把名称做为标签栏的图标。例如MONO(图1-32)应用的标签栏图标,设计的非常大胆,提取logo上面的4个字母M、O、N、O后,直接将其作为图标。但是这种设计策略的缺陷也很大,每个字母和功能模块本身的含义并没有直接联系,对用户帮助理解模块有一定的困难。
(图1-32)MONO的品牌图标和底部标签栏
站酷也采用了提取字母的手法(图1-33),ZCOL四个字母做为子模块的图标设计。中间的发布与圆形的字母O正好吻合,设计的非常巧妙。
(图1-33)站酷的底部标签栏
方法四、品牌颜色的使用
每个应用都应该有自己独特的品牌色,直接提取品牌色作为图标设计视觉元素,闲鱼图标图的品牌色是黄色(图1-34),个人中心的图标提取了品牌的黄色,进行了图标设计(图1-35)。
(图1-34)闲鱼 App图标
(图1-35)闲鱼的个人中心图标设计