搞明白标签栏，再来说用户体验

界面落地后，“标签栏”刚巧是在示意层层面向用户揭示产物框架的最直接控件。作者全发谁人味拆解标签栏的计划和交互，看看怎样给用户更好的体验。

“用户体验”这个词经常被互联网行业的人挂在嘴边，然而用户众口难调，“体验”的尺度难以具象，以是差异的产物团队也许有差异的用户体验验证要领。

但业内较常受人所用的照旧切入“用户体验五要素”的层层自检——计谋层、范畴层、布局层、框架层和示意层。

作为一名无产阶层打工仔，偶然辰我们的职能也许并不应承我们直接地参加到公司的产物计谋、范畴和布局界说。但事实身为战斗在产物前列的一员，岂论你是PM照旧UI，和框架层与示意层打交道，险些是你天天都无法停止的。

在界面落地后，“标签栏”刚巧是在示意层层面向用户揭示产物框架的最直接控件。

固然计划好标签栏，大概仍旧无法让你把控一个产物的体验走向，事实计谋层、范畴层、布局层也是很重要的。但假如框架层和示意层垮了，那用户体验必然是糟糕的，而且和你有最直接的相关。

以是谈及到标签栏，我不得不锱铢必较一下，我会分三期来全方位地拆分详解。

那么第一期我们就先从 iOS 人机交互类型和 Google Material Design 平台类型切入，来梳理一下“标签栏”。

一、标签栏是什么？

iOS 人机交互类型界说：呈此刻应用措施屏幕底部，并架构了多个屏幕之间页面内容切换的容器叫做“标签栏”（Tab Bar）。

标签栏在任何方针页面中的高度是稳固的，iOS 划定它的高度为98px（iOS @2x）。但由于 iPhone X 之后的全面屏手机引入了 Home Bar ，以是在举办界面适配的时辰，请务须要加上 Home Bar 自身的68px高度。

别让Home Bar遮挡标签栏中标签的展示，这会让两个控件产生操纵手势斗嘴。

二、类型里汇报我们该怎么做

从 GUI 层面出发，标签栏的视觉类型可以总结为以下三大点：标签数目、标签排版和标签栏视觉支解。

2.1 标签数目

标签栏险些是全部控件中，独逐一个有拉平顶级信息布局，并提供一次会见多个对等信息种别浸染的控件。以是，想要规避用户在行使你的应用措施时迷路蒙圈的话，请确保标签栏示意清楚、反馈实时。

为了让标签栏示意清楚，两个平台在类型里都对标签数目都给出了沟通的提议：提议标签栏内的标签个数为3个至5个。

由于标签过多，一是会增进产物布局的伟大性；二是会使每一个单位标签的可触空间低落，轻易导致用户产生误触。

假如你由于产物布局很是繁杂，而硬着头皮胡来的话……着实 Material Design 也并不会把你怎么样啦，但在 iOS 在实验类型这一块可就倔强多了。

iOS 人机交互类型汇报产物计划者们：标签栏固然可以包括恣意数目的标签，但可见标签的数目会按照装备的巨细（平板或手机）和偏向（竖屏或横屏）而自顺应变革。

假如因为程度空间有限而无法表现某些标签时，最后的一个可见标签将被会被体系强行转换为“更多”选项，必要用户点击“更多”选项之后，体系才将在单独屏幕上的列表中表现其他被潜匿的标签。

以是，假如你不想让体系强行变动你的产物交互方法，但你的产物框架又确实异常伟大的时辰，提议你可以实行行使分页标签可能导航抽屉等其他揭示情势。

2.2 标签排版

各人见得较量多的标签排版应该是：每个标签在标签栏中均匀分派，且图标与标签笔墨回收上下布局。

着实，类型里还给了我们一些其他的排版样式类型。

2.2.1 Android 上的标签排版

Material Design 提议，在移动装备纵向模式下，标签排版的方法应该由标签数目而定：

• 三个标签：全部标签都应该表现图标和标签笔墨，以上下布局泛起。
• 四个标签：选中的标签表现图标和标签笔墨，以上下布局泛起。未选中的标签提议仅表现图标，是否表现标签笔墨可自界说。
• 五个标签：选中的标签表现图标和标签笔墨，以上下布局泛起。未选中的标签仅表现图标，只有在假如空间应承的环境下，才表现标签笔墨。

但假如应用措施可以在横向模式下展示，或支持平板装备时：

• 回收上下布局：相沿纵向模式标签个数法则，而且保存纵向模式下行使的沟通间距，而不要在标签栏中均匀分派。
• 回收阁下布局：提议将标签均匀分派在标签栏中。

除了标签漫衍上的变革，Material Design 在屏幕纵向模式和横向模式上没有再界说更多的变量值了。

不管是哪一种屏幕模式下，标签栏的高度和标签图标巨细都是牢靠值，这一点和iOS有着很是大的差别。

2.2.2 iOS 上的标签排版

iOS 在标签排版上的类型相对同一。

在移动装备纵向模式下始终回收“图标+标签笔墨”上下布局情势；横向模式下始终回收“图标+标签笔墨”阁下布局情势。不会像Material Design 那样，必要按照差异的标签数目产生标签笔墨显隐变革。

可是，标签栏高度以及元素的巨细城市跟着屏幕模式产生改变。

iOS 将移动装备纵向模式下的标签栏称之为通例型、横向模式下的标签栏称之为紧凑型。

图标巨细类型与示例标注别离见以下图：

2.3 视觉支解

穷乏视觉支解会让用户分不清标签栏与内容界面，它们看起来会更像一个平级，对用户视觉区分内容主次着实是不友爱的。

为了辅佐用户举办标签栏与内容地区的视觉支解，iOS 的标签栏是带有毛玻璃结果的，固然这会耗损一部门运行机能，但海内很多应用措施照旧相沿了这个结果。

安卓原生是不支持毛玻璃的，以是 Material Design 提议行使颜色支解。虽然，海内的浩瀚应用措施，也早已试探出了很多其他的视觉支解情势。

三、总结

标签栏是向用户揭示产物框架的要害控件，毗连着整个产物最重要的顶层信息，而全部的成果分支又都是镶嵌在一个一个的顶层页面中的。

以是，一旦选择了回收标签栏来承载产物框架信息，就必然要确保用户不会由于计划者的失误，而在行使产物的进程中发生挫败感。

标签栏岂论从视觉层面照旧友互层面分解，都有许多可以试探的点。

本期我先从整体入手，由平台类型切入，带各人先相识标签栏。下一期我将借标签栏，总结一下根基图标的建造与动效图标的落地。

作者：Howie_t；公家号：UCD耍家（ID：ucdplayer）

本文素材来自互联网

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!