急性蜂窝质炎

注册

 

发新话题 回复该主题

关于线上产品标签栏TabBar的解构 [复制链接]

1#
怎么才能控治白癜风 http://pf.39.net/bdfyy/qsnbdf/140505/4383451.html

编辑导语:我们在使用产品时,经常会用到标签或者标题进行查找,这样可以更快的让用户找到预期目标;清晰有效的标签也能一定程度上提高用户体验,用细节提升好感;本文作者分享了关于线上产品标题栏的解构与分析,我们一起来了解一下。

标签栏(TabBar)是界面设计绕不开的一个课题,绝大多数产品都必需一个视觉美观、反馈清晰的标签栏来传达品牌形象。

本篇文章将讨论与标签栏相关的设计细节,并尝试分析设计背后的思考;所有案例均来源于各大线上产品,观点仅来源于个人粗浅的分析,如果有哪里说得不对的地方,希望大家多多指点。

一、理解标签栏作用

根据iOS人机交互指南,标签栏(TabBar)是用于组织APP结构,以扁平层级,只用于导航的基础控件。

标签栏不应承载任何操作,如果需要执行操作,应选用工具栏(ToolBar);标签数量一般在3-5个(针对手机,pad端可以适当多一些),如果标签太多,最后一个标签可以是“更多”,将更多的标签收纳其中。

标签栏的主要作用有以下2点:

1.定位导航凸显品牌

1)定位导航

一般情况下,标签栏常驻于各一级页面底部。选中标签明确提示用户当前所处位置,当用户想要前往其他一级页面时,只需切换底部标签即可。

2)凸显品牌

首页是产品给用户留下第一印象的关键一步,标签栏中的视觉元素,包括选中标签的颜色、图标形式、组合样式等等无不体现了产品气质。

二、整理标签栏分类

不同维度下,标签栏可以被分为多种类型;我们不妨从以下5个维度依次对标签栏进行分类,以便观察研究不同的分类方式下标签栏的不同特点。

1.位置维度

常见的标签栏一般是吸附于屏幕底部,不随用户手势滑动而发生位置变化;然而也有一些产品为了切合用户的使用场景,做了一些位置上的调整,可能呈现悬浮状态或者会随着用户手势改变而发生位移。

常规吸底的标签栏:

优势:更加符合用户心智,用户的认知和操作成本最低。可以随时方便地切换页面。劣势:页面底部约90pt(刘海机型)高度的部分被遮挡,内容层展示效率进行了一定程度的让渡。悬浮类的标签栏:

优势:屏幕遮挡区域小,为用户争取了更多的视觉空间浏览信息。劣势:用户第一时间会感到陌生,同时操作成本有所上升。尤其是唯品会案例,左侧三个标签比较拥挤,且在单手握持的情况下,很容易误操作。有道词典和马蜂窝给出了一个折中两全的解决方案:根据用户的操作手势推测用户意图,决定是否展示/隐藏标签栏。

当用户向上滑动屏幕时,我们认为,用户的意图是浏览下方更多信息,此时就将标签栏隐藏,直到用户出现向下滑动屏幕的手势时,显示标签栏,给用户提供便利的跳转操作。

2.功能维度

标签栏是由多个标签组成,通常情况下,标签的展示形式相同,没有侧重;然而在一些产品中,为了突出某一核心功能,通常会将该功能对应的标签进行视觉上的强调。

3.标签组合方式维度

组成标签栏的元素有:文字、图标、底板等…将不同元素排列组合,可以形成许多不同的组合结果,不同的组合对应不同的标签栏样式。

纯文字:

两大短视频产品(抖音快手)以及重工具性的高德地图,都选用了纯文字的样式;纯文字的样式在视觉上对用户注意力影响最小(众所周知,图像比文字天然更具视觉吸引力),用户可以更加集中地将注意力放在内容视图,专注于信息本身。

视频流产品需要打造沉浸感,以便用户能连贯自然地看尽可能多的内容。因此收敛标签栏视觉占比十分合理科学。

同理,对于强工具性的高德地图来说,用户的使用场景多集中在户外,物理环境混乱复杂,界面需要最大程度帮助用户快速聚焦;地图视图无疑是用户视觉的最重要落点,减弱标签栏的视觉表现是一个不错的设计思路。

纯图标:

相较于国内产品,海外产品更常用纯图标类型的标签栏。个人理解是,采样的3款产品(FB、IG、Twitter)都是已经高度普及的产品,用户对产品结构的心智模型已经建立完善。

用户不需要通过阅读文字才能理解标签的含义,更有可能是通过位置记忆来定位,图标很有可能只是起辅助识别的效果。

继承上文思路,同样是普及性很高的产品,为什么国内的国民产品如

分享 转发
TOP
发新话题 回复该主题