【翻圈圈】实用技巧——用对标签式界面(Tabs)

译者:第一次做标签页设计,美术交付成品后,总觉得哪里不对。后来看到这篇比较年老的文章,恍然大悟,敲盘译之,发现到今天还是一样实在。

能遇见正确使用对话框的网页用户界面是相当难得的事情。即便是简单如单选框或者复选框也经常用错,更不要说烂大街的下拉菜单和给网页毁容的滚动条。

重新设计后的雅虎财经用对了标签页,如下图所示,分别是网页上的两个部分:

标签页使用指南

以上设计遵循了以下13个选项卡使用指南:

1、使用标签页来转换在同一背景下的不同视图(而非导航到不同的区域 — — 亚马逊引入的常见错误,现在已经被抛弃)。

2、利用标签页来规划逻辑模块,用户可以预期到当他们点击标签页的时候能够看见什么内容。(卡片分类法是研究这种信息结构小问题的好选择。如果你不能明确地将内容归类,那么选项卡似乎不太适合你的设计。)

3、通常情况下,用户无需同时看到多个标签页的内容。如果用户需要对比不同标签页的内容,那么来回切换标签只会给用户的短时记忆带来负担,并减低标签的可用性,倒不如把所有内容都展示在同一个页面上。

4、标签应保持平行,最起码对美国用户来说(对于国际用户,最好是有一个选项如”南美洲“或者”美洲“来更好地和”欧洲“以及”亚洲“平行)。

5、高亮当前选择的标签。例子中,用的是去色的方式来高亮选中的标签,这个在多于3个标签的时候是相当好用的(但只有2个标签的时候,就不好分辨了)。

另外,你也可以通过改变标签的大小,加粗的标签,一个标记或者让标签放置于前端的方式来实现高亮。

6、未选中的标签应是清晰可见并易读的,提醒用户还有其他选项。如果一个未选中标签在界面中淡出得太厉害,可能会导致用户根本不会去点击或者发现不到它的存在。

7、当前的标签必须是与显示内容的区域相关联的,就像我们在给本子贴索引卡一样有标签贴在上面。这能够显示哪个面板正在被展示,当只有2个标签的时候可以告诉用户哪个选项卡被选中了。标签和关联面板使用同样的颜色能够加强两者的关联,这也是推荐使用反向高亮显示的原因之一。

8、标签简短并易懂的语言,而非专业术语。标签通常用1–2个词语,简短的标签更容易一目了然。如果你需要很长的标签,那意味着选项卡承载不了你的选择项。

9、例子中右边的标签用的都是题目式的写法:每个词的首写字母大写。左边的图则是错误地使用了全部大写的标签,其实这给用户阅读增加了困难。然而可读性的问题就单个单词或者词组来说其实并没有那么地有关系,但是就如主页实用性指南上说的,你必须选择并始终坚持一种写法。

在微软Vista的用户体验指南里面推荐句子式大小写(即只有第一个单词的第一个字母大写),而苹果的人机交互指南里则推荐标题式的大小写(即每个单词的首字母都大写),这次我比较支持苹果的做法。但实际上无所谓,只要你坚持一种做法就可以了(但要避免全部使用大写,或者全部使用小写的方式)。

10、这里只有一行标签。多行标签会创建跳转UI的元素,它们会破坏用户的空间记忆,这可能导致用户忘记了浏览过那些页面。而且,多行选项卡必定使得界面变得复杂:如果你需要多于一行的标签,你就需要简化你的设计。

11、标签要放置在面板的上方,而非放在容易被用户忽略的上方或者边上。

12、标签的控制范围必须跟随视觉设计。相似的,用标签就像在装有就是卡片目录的抽屉里面翻阅索引卡一样,用户看一眼之后必须能够说得出索引卡是有什么构成的(例如选项卡的面板)。

13、快速的反应时间保证了点击其他标签它的相关面板便会立即出现在最前面。这个可以通过AJAX来实现,不过实现的过程并不重要,重要的是动作要足够迅速(少于0.1s)到让用户觉得他们点击鼠标和这个面板的弹出是相关联的。

网站主体的标签用对的同时,在主页顶部放置的全局导航栏的标签却并非如此:

标签页应该让用户停留在一样的地方查看不同的视图。而且,那个在标签里示意了一个下拉菜单的倒三角,是与选项卡无法兼容的部件。

一致性

雅虎财经基本上遵循了一个更高的指导方针:保持一致性。页面用标签构成了三个不同的区域,它们看起来基本一样(除了上面展示的令人遗憾的全局导航栏)。

不幸地,第四个标签在页面的更下方;这里,它用的是另外的颜色。可是,这个偏移的标签看起来和另外三个并无太大区别,因此操作起来不会有什么大问题。但通常情况下,选项卡在那么远的下方,一般都难以被用户看见。

一致性在GUI操作设计中相当重要,因为它从以下几个方面让用户感觉到他在操控整个界面:

辨识度。当某些东西看起来总是一样,你知道怎么去找到它并且你在找的时候知道它是什么。

可预期。当某些东西总是同一种方式运转,你能够预期到你与它发生交互时它有什么样的反应。

自主权。当你可以依靠所有可用特性的已有知识,你便可以轻易地通过一系列动作来达到你的目的。

效率。完全不需要花时间学习新的东西或者担心不一致的特性的效果。

过度的AJAX

点击标签立即有效果,切换面板无需整页重新加载都是好事情。但并非所有页面内的刷新都是好的。

雅虎财经里股票股价实时更新,每个股价都根据其升降背景颜色不断闪烁。全屏数字经常闪烁很容易让用户感觉疲劳,特别是像音量那种持续变化的数字。

你可以去做某事但并不意味着你应该去做。是的,不断更新页面是引起用户注意的好办法,但这应该仅用于用户需要被提醒或者警示的时候。在这个例子中,用户其实只需要知道他们看见的数字是实时的并会被持续更新。

对于当天交易用户来说,交易系统却另当别论。在这种情况下,用户需要持续地关注市场趋势来控制多种安全风险,那么闪烁的颜色在他们眼前闪来闪去实际上在提醒他们稍纵即逝的交易机会。

但是,在一个财经为主的主页,用户需要对头条和故事一目了然。如果他们需要交易,他们会去代理公司的网站,所以他们并不需要在那些要求快速触发的动作上占任何好处。很少人会在这个网站上盯着这些数字变化,反而那些闪瞎眼的东西分散了他们的注意力而错过想要关注的东西。

原文地址:https://www.nngroup.com/articles/tabs-used-right/

后续补充:

标签式界面

第一,从数量上说,这组对象对多不超过十几个;

第二,从对象之间的关系上说,这些对象是在一个级别或者等级上,它们之间没有任何的隶属、依赖、层次或者包含关系,是平等和独立的;

第三,不需要同时显示两个或两个以上对象的详细信息,同时有限的屏幕空间也不允许这样做;

第四,用户需要直接、快速地定位到某个对象。

标签式界面一般有两部分组成:导航区、详细信息显示区

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.