- 设计理论 -

底部标签栏,你还不知道的小细节!

作者:风筝KK 原文出处:海盐社
2018-07-25

3.jpeg

640.png

底部标签栏看似永远都是几个按钮一层不变,但是随着极简风格的流行,底部标签栏图标风格很大一部分决定了界面的风格。因此看似简单的标签栏设计,其实也有可琢磨的地方。今天我们主要对底部标签栏选中效果展开分析,不同的选中效果给人的感受也不相同。其达到的效果也不相同。看了本篇文章之后,你将会知道什么样的选中效果更有趣,什么样的选中效果利用用户操作。

在此之前,我们先了解下底部标签栏默认状态的常见样式,这样便于我们接下来的分析,默认样式主要有:线、面、面+线这三类。

640-1.png

底部标签栏的选中效果主要也是基于以上三种样式的,但是相较于默认方式选中效果更加丰富,其对应的选中效果主要有4大效果:

640-2.png

01 线性高亮

线性高亮即在默认灰色线性图标上增加品牌色。由于线和线差异性不高,同时线越细其表现力和识别力越弱,即使加了品牌色识别度也不及面型高亮。

640-4.png

以爱彼迎为例,他采用了2px的描边,从展示效果就可以看出其视觉表现力和识别度就不高。

如果一定要用线性表现,我们可以将图标描边设置为3-4px,随着图标描边越粗其表现力和识别度也越高。 同时粗直角线条也会给人稳重的感觉,而粗圆线条也会给人活泼的感觉。

640-5.png

以得到为例,其采用4px的粗直角线条,整体给人的感觉稳重,同时在选中效果在识别性上也高于爱彼迎的线性选中效果。

通过爱彼迎、得到可以看出来,1px或者2px的线性高亮图标,其识别性和表现力都较低,当图标为3-4px识别度和表现力相应会增加,因此在使用时我们尽可能避免使用1-2px的图标。

02 面型高亮

面型高亮,由于面和面或者线和面差异较大,相较于线性高亮来说识别度更高,表现力更强。用户在使用时更能够快速的清楚自己所在位置。

其默认形式可以是线性图标也可以是面型图标。同时其展示效果可以是纯色,也可以是渐变色等。下面分别来举例说明:

640-7.png

以NOTHING为例,其默认效果为3px的描边,其产品定位是致力于连接一切有品位的人,属于时尚类的APP,因此其按钮采用黑色。对比爱彼迎的线性高亮,面型高亮的选中效果由于线和面的差异较大,因此更加明显。

640-8.png

以Keep为例,其默认效果为灰色的面型图标,其产品定位是基于健身教学视频的运动健康类APP,因此其按钮色采用其品牌紫色。从展示效果我们尽管默认图标是面型其识别度一样很强。

640-9.png

以橘子娱乐为例,其默认效果采用4px的描边,选中效果采用渐变的面型高亮,不管是从默认图标还是选中状态都给人以活泼、青春的感觉和橘子娱乐的品牌相符合。

因此通过NOTHING、Keep、橘子娱乐可以看出,面型图标的表现更加多样,同时识别性和表现力均比线性高亮效果好,同时在使用上还可以根据产品定位和品牌基因选择适合的设计风格。目前市面上的APP大多都是采用面型高亮。

03 线性+面型高亮

线性+面型高亮的图标,往往是APP的设计风格是黄黑搭配,由于黄色比较高亮,单独使用视觉不突出,加上描边之后比较反而给人活泼的感觉。

640.jpeg

以YY为例,其默认效果同样采用描边,选中效果填充黄色,在留有部分留白,同时每个小图标里面都加了小短线,相比于普通图标,该设计方式更具风格。

640-11.png

除了上面的黑黄风格,其实其他颜色的也是可以的,只是填充颜色较浅,然后加品牌色的描边均可。

综上可以看到这种线性+面型高亮的方式多使用在品牌调性较为活泼的APP,该样式可推荐使用。

04 微交互效果

标签栏的微交互效果,顾名思义就是加入了人机互动效果,让标签栏更有趣,给用户眼前一亮的感觉,同时品牌感更强。

640-13.png

以QQ为例,最新版的QQ图标选中效果由默认的侧脸图标变化为愉快的正脸,一点小小的变化就让整个聊天界面生动起来了。

640-14.png

以土豆短视频为例,标签栏的选中效果采用黑黄搭配的线性+面型高亮,同时在点击标签时小按钮有个跳动的效果,看上去特别活泼,和土豆的产品定位个性化的搞笑视频匹配。

640-15.png

另外一个亮点是在下滑到第二屏时,推荐的笑脸按钮变为刷新按钮,这样用户在滑到下面不想在继续的时候,点击刷新按钮即可查看新内容,为用户节约了操作路径,这个真是个贴心的设计。

以上都是微交互效果的一些设计要点,看上去一些不经意的点却能够给界面带来很大的效果。因此我们在做界面时不应该拘泥于常规方案,也应该多尝试新方法。

总结

如何让界面变得更“有趣”,提升用户的操作体验,首先需要我们从一些小的组件入手,下面来总结下标签栏的4大选中效果。

1、线性高亮,即默认状态是线性的灰色图标,选中时变为品牌色的线性图标即可。其制作成本低,但是表现力和识别性都较弱。

2、面型高亮,其默认状态可以是线性也可以是面型,同时选中效果样式多样可为纯色高亮、渐变高亮、多色高亮等。其制作成本也不高,但是其表现力丰富。

3、线性+面型高亮,其多为黑黄搭配风格的APP,给人以活泼年轻的感觉,其品牌感强,因此目前看到很多视频类的APP都采用该风格。

4、微交互效果,微交互效果是基于以上三个效果基础上,加入一些有趣的小动效,以及类似刷新的贴心小设计,这样可以提升用户的操作体验,不过该效果制作成本较高,但是表现和识别性都比较好,因此大家在设计的时候可以研究下该方式。

4.jpeg

海盐社.jpeg

喜欢就分享
精选评论