标签栏ICON的设计与应用
@小莫@馒头Icon 是App页面中的重要组成部分,没有Icon的App是不完整的。标签栏是移动应用中最普遍、最常用的导航模式,应用于几类信息之间的跳转,提供页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。因此标签栏Icon的设计至关重要。
底部标签栏Icon我将它分为线性、剪影、微交互(微动画)三类。线性、和j剪影是最为常见的,它们各自又有很多不同的设计类型。
1、默认和选中状态均是线性图标。将选中状态的图标高亮处理来与其他图标进行区分。
值得提的一点是线性Icon的粗细一般是2像素,也有App做成1、3、4像素的,1-2像素的Icon有利于进行细节设计但识别性相对较弱,3-4像素的Icon醒目突出,造型上要简洁大方。
2、默认是线,选中是面。利用线和面的视觉差异和高亮的颜色来显示当前位置。这种方式是现在比较主流的设计方法,因为相比纯线性Icon,面的存在感更强,更加易于用户区分。
3、默认是线,选中是面加线。这种设计一般主色调是黄色的App常用到,因为黄色本身比较高亮,视觉不是很强烈,给Icon加上一个深色的描边就能使标签栏Icon比较“实在”。
4、默认是线,选中后细节丰富。这种设计比较有故事感容易打动用户,就像一张黑白的老照片突然鲜活了一样,令人印象深刻。
剪影Icon相对于线性Icon来说表现方式少了很多,一般默认的时候是浅灰色的面,选中状态只是利用高亮的颜色进行区分。 剪影Icon由于面积比较多更加具有表现力。
默认和选中的过程有一个微交互的动画效果,运用了情感化设计,使人们使用过程中产生乐趣和愉悦感从而增强用户体验。
Icon设计需要根据App不同的属性特点,设计出符合行业风格的标签栏Icon,那么我们就从以下几类常见App种类来分析如何正确把握Icon设计风格。
首先看每个图标都是线性风格,Icon的整体大小都一致,为44*44未选中状态为浅黑,选中后有微交互效果,趣味十足。细节上做了断点处理,避免了呆板的样式,正如App充满活力一般。整体看起来,小而精致,严谨的同时不失趣味与活力。
虽然也都是线性的,但是在细节上做的不错——拐点处都用圆角把握了母婴可爱萌的风格,在图标内部也增 加一些小元素:婴儿含着奶嘴笑;用幼芽表示育儿,亲子的Icon加上了笑的元素,图标风格与整个App很配,选中后则是带主色调的填充的图标,让用户知道当前处于哪个功能板块。
寺库是一款专卖高端商品的App,其产品档次高,价格贵,品质好默认状态下的Icon用的是深黑色的填充图标,选中后为主色调暗金色,从细节上看,每个Icon有尖锐的部分也有圆滑之处,配上深黑色与暗金色总体上看既不失严谨品质之感,又不落时尚潮流,是非常带感的一款App产品。
观其主色调便感受到一股热情激荡之感,而其Icon也是独具特色如:发现音乐,巧妙的弧度与音调符号相结合,朋友与帐号的Icon借鉴大众化的个人Icon,但对Icon的加工做的很好,柔和的弧度给人强烈的亲和感,半透明的白色作为为选中状态,选中为纯白,再配上类似于模糊后的唱片材质背景,给人一种高雅,神秘之感,也许莫扎特就是这种感觉吧!
Boss直聘,每一个Icon专属定制,普通的功能词语,不普通的Icon虽然也是线性Icon,但是从创意上来说很不错,比如职位Icon用卫星轨道配合环形圈,给人一种职位多而且科技感,公司Icon则是用高楼大厦,但却在楼层外的拐角处做了圆角处理,减少了冷冰冰的感觉增加了人情味,我的Icon加入了偏的发型,让这一块功能感觉活了起来,选中后的效果用主色调为青的颜色给人以希望之感。
呆呆酱是一款二次元互动类App。图标卡通风格浓厚,萌萌的Icon很适合二次元的风格 。
中国人喜欢过节,所以在传统节日期间很多APP为迎合节日气氛,将Icon设计成具有节日风俗外貌的样子,以便加深用户印象。
有些APP风格非常强烈,干脆将Logo字母作为Icon,这种设计确实非常个性,而且一定程度上也能加深品牌印象,但这种设计手法也是要看App风格和领导层的勇敢程度的。
电商App有时为了制造购物、促销氛围或者为了追求视觉特殊感,Icon设计经常不按常理出牌儿,而将具有设计感的文字和抽象的图形作为Icon。
在一些在线视频类APP中经常看见影视剧包场Icon的,底部标签栏最常见也最能显示一个剧组的财力,这种设计方式我们一般是很少接触到的大家就当欣赏欣赏就行了。
看完这篇文章,你学到了吗?赶快应用起来吧!