所有分类
  • 所有分类
  • 未分类
标签栏图标的常见样式与反馈形式

标签栏图标的常见样式与反馈形式

这里我们来分析一下3种图标的样式:线性、面性、线+面性。

底部标签栏看似永远都是几个图标一成不变,但是随着极简风格的流行,底部标签栏图标风格很大一部分决定了界面的风格,在产品设计中,不同样式的图标给人的感受是不一样的。想让标签栏准确高效的传递信息,选择合适样式的图标尤其重要。这里我们来分析一下3种图标的样式:线性、面性、线+面性。

 

一、线性

简单地说是由包括直线、曲线、点在内等元素组合而成的图标样式。其优势是轻巧简练,具有一定的想象空间,且不会对界面产生太大的视觉干扰。我们常见的线性图标有2px、3px、4px的描边。

展示效果:线性高亮、面性高亮

高亮即在默认灰色线性图标上增加品牌色、加深颜色或渐变色。由于线和线差异性不高,同时线越细其表现力和识别力越弱,即使加了品牌色识别度也不是很高。

Image title

以爱彼迎和豆瓣为例:它采用了2px的描边,从展示效果就可以看出其视觉表现力和识别度就不高,但容易给人以精致、时尚的感觉。在一些时尚类App会考虑使用2px的icon,同时,它可以表现更多的细节,由于其线条较细因此不会对界面内容造成干扰,多用于电商类、精细类的产品中,其选中效果可以是线性高亮,也可以面性高亮。

Image title

以网易考拉和优酷为例:采用3px的描边,图标不管是从识别性和表现性来说都比较好,适合用户跨度较大的产品或工具类的产品中,其选中状态有线性也有面性,但以目前调查研究来看,面性居多。

Image title

以即刻和橘子娱乐为例:采用4px的图标,相较于2px、3px的图标,会更加厚重,识别性比价高,同时粗线条给人稳重的感觉,粗圆线条也比较符合这个app的定位,活泼年轻化,但由于线条过于厚重,因此在设计时图标不易过于复杂,选中效果可以是纯色、渐变色等。

总结:从上面的例子可以看出,无论是2px还是3px,默认采用线性,选中采用面型的图标识别性更高,主要是因为这样对比差异较大,表现力更强,更利于用于明确当前操作位置。同时默认状态下又不会对界面产生过多的视觉干扰。所以建议在使用此方式。

 

二、面性

面性图标可以简单理解为描绘的是物体大致轮廓,相较于线性更加稳重和扎实,对色彩的传达也清晰明显,因此多用于选中效果中,在默认状态做多以浅灰展示。

展示效果:面性高亮

同时其展示效果可以是纯色、渐变色等。

Image title

以keep和得到为例:它们分别是运动健康类和阅读类产品,默认效果为灰色的面型图标,其按钮色采用其品牌色,采用面性图标比较符合产品稳重的气质。展示效果我们尽管默认图标是面型其识别度一样很强。

 

三、线性+面性

线性+面性的图标,多用于主色为黄色或者其他亮度较高的颜色中,避免单独使用视觉不突出,加上描边之后反而给人活泼的感觉。

Image title

以站酷和闲鱼为例:默认状态下为线性图标,同时加入一些小元素或者断线处理,在选中状态下线性描边+颜色填充,让图标更具风格。可以看到这种线性+面型高亮的方式多使用在品牌调性较为活泼的APP,该样式可推荐使用。

 

四、微交互效果

随着动效的发展,标签栏传统的静态反馈形式,让人觉得过于呆板,没有意思,所以现在很多的app中都加入了微交互效果, 标签栏的微交互效果,顾名思义就是加入了人机互动效果,让标签栏更有趣,给用户眼前一亮的感觉,同时品牌感更强。微交互常常运用于选中效果,运用情感化设计让人们使用过程中产生乐趣从而增强用户体验。其动画效果往往都比较简单,主要有:小变大、旋转、跳动、小元素变化、背景板+小元素动画+放大、异形等,大家在做的时候可以研究自行组合。

Image title

以QQ和爱奇艺为例:QQ中消息图标选中后变成一个正面的笑脸,微笑变成大笑,并且联系人和动态的图标都向左侧看向消息,而当联系人图标选中时变成正面,消息和动态的图标都转向联系人,一点小小的变化就让整个聊天界面生动起来了。爱奇艺中图标选中后,图标里的小星星会有画五角星出来放大再缩小的效果,同理其他几个按钮也是,显得非常活波,能够清晰的给用户传达当前界面,同时默认状态下也不会对界面造成干扰。

 

总结

如何让界面变得更“有趣”,提升用户的操作体验,下面来总结下图标的四种样式和反馈形式:

线性,即默认状态是线性的灰色图标,选中时变为高亮的线性或面性图标,选中效果样式多样可为纯色高亮、渐变高亮、多色高亮等。其制作成本低,默认状态和选中状态都是线性的图标,表现力和识别性较弱,但看起来比较精致,推荐使用默认状态为线性,选中状态为面性的图标。

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

线性+面型,默认状态为线性,选中状态为线性描边+颜色填充,其多为黑黄搭配风格的APP,给人以活泼年轻的感觉,其品牌感强。

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

 

原文地址:UI中国

作者:星云Design

 

 

0
分享海报

评论0

没有账号? 注册  忘记密码?