我们都知道图标在APP的UI设计中的重要性,但是打开许多APP你会发现他们的图标UI设计都非常普通,似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言,但是仍逃脱不了与其他APP设计雷同、毫无个性的通病,使得UI设计看上去普通、不精致,缺少产品气质。
那么,该如何打造属于自己APP的独特风格呢?品牌基因为我们提供了一些线索。它是由平面设计中的VIS(视觉识别系统)引入的一种设计策略,通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象,代表了与众不同的气质。接下来,我们就来学习如何利用品牌基因进行图标设计。
1.提取品牌图形
通常一个App的第一个tab是首页,是用户进入App后看到的第一个页面,最常见的图标设计是一个小房子的图形。首页是App中最重要的页面,承载了整个产品的核心功能,是用户浏览最多的地方,因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的,不但使App内外形成了视觉联系,同时也二次传递了品牌形象,加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形,其优点不言而喻。
但是请注意,这种UI设计策略并不适合于所有的App,当第一个tab被赋予特定功能,就不可使用品牌图形,否则用户会难以理解。例如微信第一个tab是聊天列表,此时使用气泡就比品牌图形更加合适。
还有另外一种情况。通常一个App的最后一个tab是个人中心,即“我的”。如果App的品牌图形是动物图形,也可以使用其整体或局部图形来作为「个人中心」的入口图标。
2.提取品牌色彩
色彩也是图标UI设计中重要的构成元素之一,合理协调的色彩搭配让用户在浏览页面时感觉舒服。从品牌形象中提取色彩作为图标设计的依据,可以给用户带来由内而外一致的视觉体验。在设计时提取品牌色彩可适当调整色彩的饱和度,明度,既可以将图形整体填充色彩(例如微信),也可以局部填充色彩,还可以填充为图标背景色,使图标之间形成色彩上的关联。直播应用BigoLive的品牌色是青蓝色,在标签栏的图标设计上(选中态)将图形局部元素填充青蓝渐变色,活泼清爽的搭配带给用户轻快的感觉,与整体品牌调性高度一致。
3.提取设计语言
在VI设计中通常提取辅助图形作为设计元素,这在图标设计中同样适用,当所有的图标都具备了相同的UI设计元素,他们就构成了一套完整的视觉符号。例如飞猪的品牌图形就很特别,猪的头部轮廓是由大写字母F演变成的翅膀造型,因此可以看到“我的”小人图标的也使用了类似的轮廓,这样他们就形成了某种视觉联系。
4.提取产品气质
品牌形象决定了产品的气质,而产品的气质决定了吸引什么样的用户。就如当我们第一次看到一个人的时候,往往会根据他的外貌形象特征,产生一个大致的印象,这就是一个人的气质。APP也同样,例如传递传统手工艺人社交的「东家」,其产品流淌着古朴、温润、精致的人文气息,它将宋体汉字的笔画进行拆解组合,创造出具有东方韵味且极具形式感的图标设计。
5.拆分品牌名称
App标签栏图标的UI设计最常见的形式是图形加文字的组合,由于文字本身就能传达最直接的含义,因此图形的识别性并不那么重要了,我们就可以在其视觉表现形式上赋予更多创意和个性。MONO是一款阅读类App,它的标签栏图标直接将品牌名称中的4个字母拆分成4个图形。虽然每个字母与其对应的功能模块本身并没有直接联系,但加上标签文字的辅助也不会造成阅读困难,而且产品本身的用户人群就是比较能接受新鲜事物的年轻人,因此这样的创意反而给App设计加分了。
6.展开形象联想
我们日常使用的众多App大多数都有着相同的功能模块:首页、发现、动态、我的等,因此也就出现了很多雷同的图标设计。比如“首页”是尖顶房子,“发现”是眼睛,“动态”是气泡,如果有差别也只是设计风格的差异,有的直角有的圆角,有的线性有的面形。这样的设计没有品牌归属感,试一下将这些图标单独拿出来就无法判断它是谁,它从哪儿来?
优秀的UI设计师不仅要具备将图标绘制精美的能力,还要具备丰富的设计想象力,不拘泥于设计规范的条条框框,有时候打破规则才能设计出优秀的图标。“首页”除了小房子我们还可以想到什么?马蜂窝的做法就很巧妙,“首页”图标是“蜂巢”,而蜂巢是马蜂的房子,这样的设计与品牌形象紧密相连,简直完美!不过最新的改版好像已经改没了。
总之,要想在绘制整套UI图标时建立统一风格,就要从外观和颜色上确立主风格,在局部寻求个性特征,将两者结合,并融合产品属性和符合用户定位,先在脑海中构思出清晰的概念,然后在稿纸上绘制草图,最后确立一个最佳方案上机完成,只有不断地思考和打磨才能创作出最佳的设计方案。