标签导航风格的产生，应用和发展

作者： novanewlife        来源: novanewlife    日期：2007-7-29 13:09   上一篇下一篇
标签式界面（Tab）是具有图形用户界面（GUI）的软件中常见的一种界面风格，广泛应用于对话框和软件主界面中（包括网站的界面），甚至一些电子设备也采用了这种风格，比如一些复印机的显示屏。它是一种能够同时接受用户输入并能向用户输出信息的交互性很强的界面风格。通过对它的产生、应用和发展的分析，我们将能够看到一些交互设计方法和原理在其中的应用和体现，从而能够对设计新的用户界面有所启发。

图1：标签式界面的外观及其构成
产生：从带标签的文件夹说起
同命令按钮、复选框等这些很早就出现的界面元素一样，标签式界面的产生应用了界面比拟（Metaphor）的原理。该原理是指，在设计新的交互界面时，要尽可能把它做得和一些人们在现实世界中已经比较熟悉的东西相似，这样就可以使得用户不用过多地学习就能很快掌握界面的操作方法，从而提高产品的可用性。
在现实的物理世界中，为了快速从叠放在一起的很多文件中找到某一个，人们发明了标签的方法，即在每个文件的顶部或旁边贴一个突出的小标记，上面写上对该文件的简要描述。由于这些标记之间不重叠，因此一眼可以看到全部文件的简要描述，从而就可以在不用翻页的情况下快速定位到某一个。根据这个原理，有些笔记本或电话薄也特意设计成让人们可以方便地写标签的式样。


图2：带有标签的文件夹
对比图1和图2不难看出，软件界面中的标签式界面正是采用了类似的视觉外观，通过使用界面比拟，人们在现实世界中形成的关于如何使用标签的操作方法就可以被运用到软件界面中。
应用：迷宫里的全局视图
像很多其他界面风格一样，标签式界面向用户提供的功能可以抽象为一种对信息的组织和导航问题。一个好的组织和导航方式应该达到如下的目的：能够向用户提供一个全局的视图，能够让用户清楚地了解当前自己处在什么位置，能够让用户知道从当前位置可以到达哪些其它地方，以及如何到达。
还记得走迷宫或八卦阵的游戏吗？为什么人们在这种情况下很难走出去呢？这是因为人只能看到自身周围局部的情况，而看不到眼前的每一条路最终能通向哪里，所以就无法做出正确的选择。设想一下，如果手中有一张从空中俯瞰迷宫或八卦阵的总揽图，并且知道当前自己在图中的位置，情况是不是就完全不同了呢？分布在一些大商场和旅游景点中的导游图正是根据这样的思想设计的，图中不仅有全景图，还标出了游客当前在整个图中所在的位置，这样游客就能知道该如何走了。
不同的应用环境需要不同风格的组织和导航方法，例如，树形方式，鱼眼方式以及大型网站上常见的面包屑路径方式等都是一些可能的风格，它们都有着特定的应用场景。总结大量软件中的标签式界面的使用情况可以看出，它的应用环境是在一个有限的屏幕区域上显示一组相关对象的信息：
从数量上说，这组对象最多不超过十几个；
从对象之间的关系上说，这些对象是在一个级别或等级上，它们之间没有任何的隶属、依赖、层次或包含等关系，是平等和独立的；
不需要同时显示两个或两个以上的对象的详细信息，同时有限的屏幕空间也不允许这样做；
用户需要直接、快速地定位到某个对象
为了达到上述目的，标签界面一般由两部分组成（如图1所示），一部分是导航区，一部分是对象详细信息显示区。所有要显示对象的详细信息都共享一个信息显示区，但任何时刻只能有一个被显示，这使得有限的屏幕空间可以被最大限度地利用。导航区上显示所有对象的标签文字，即对每个对象的简要描述，这使得用户有一个全局视图，知道还有哪些其它对象可以浏览，同时突出显示的一个标签项告诉用户当前正在显示的是哪一个对象。这样，标签式界面就很好地达到了我们上面提出的一个好的信息组织和导航方式应达到的目标。
具体来说，标签式界面主要用于两种环境中：
第一种，用于复杂的对话框中，这是到目前为止最主要的应用，此时由于对话框中的内容太多，已经无法显示在一般大小的对话框中。标签式界面对这个问题的处理方法是：把那些逻辑上密切相关的一些内容组织到一起，形成一个大的对象（类别）。这些对象之间相互独立、平等，并且任何时刻都不需要同时显示两个对象中的详细信息，这些都恰好满足了标签式界面的应用条件。

第二种，用做软件整体界面的交互方式，并逐渐在很多场合替代了以前的多文档界面风格（Multiple Document Interface, 缩写是MDI）。


图3：VC＋＋ 6 中的多文档界面（MDI）
图3显示的是VC++ 6 中的MDI界面，不难看出，MDI界面存在如下的困境：当有多个文档打开时，如果互相不重叠地铺开来显示，则每个文档只能占据很小的一点空间，难于进行编辑或其它操作；如果将其中的一个展开成较大的面积或占据全部的可用空间，则其它的文档就被挡到了后面，用户很难直观地看到当前还有哪些文档已打开。标签式界面通过把可用区域分成导航区和详细信息显示区，很好地解决了这个矛盾。下面是一些采用标签式界面为软件主界面的例子：
在文本编辑器软件和软件开发工具中，例如Visual Studio 2005， Eclipse，同时打开的多个文本文件或源代码文件是按照标签式界面组织的；
在互联网浏览器软件Opera中，所有打开的网页是以标签式界面组织的；
在MSNMessenger中，它的多种功能也是以标签方式组织在左边的。


图4： Visual Studio 2005 的界面

图5：Opera的界面


图6：MSN Messenger 的界面
从适合使用标签式界面的应用环境的描述中，不难看出以下情况是不适合采用它的：
如果要显示的对象数量很多的话，标签式界面的导航区就不能再很好地将它们全部显示出来，此时其它界面也许更为合适和自然，例如列表框；
如果对象之间的关系不是独立的，例如如果是层次关系的话，就需要采用树型结构的界面，如果是网状关系，就需要采用网络结构的界面，等等；
如果需要同时对比显示两个或多个对象的信息，则需要使用MDI或其它界面。
发展：导航风格的发展史
标签式界面的发展主要体现在它的导航区的发展，可以从以下三方面来分析：
1 导航区位置的变化
早期导航区位于整个区域的顶部，后来发展出了左边和底部的风格。这三种风格各有其应用范围。根据人们的阅读习惯，在一个屏幕中，人们倾向于按照从上到下，从左到右的顺序浏览，这就使得放在顶部和左边的信息更容易引起人们的注意。因此重要的信息一般都放在顶部和左边。根据这个原理，在标签式界面中，如果要求频繁地在各个标签项之间切换，一般把导航区放在顶部或左边；相反，如果用户很少切换或不太关心这些标签项，则应放在底部。
例如，在对话框中使用的标签控件，导航区一般都位于顶部和左侧。在多文本编辑软件和软件开发工具的界面中，同时打开的多个文件的文件名也都显示在顶部，这是因为在这些应用中，用户需要经常切换到不同的文件中进行各种编辑操作。
当标签项的个数固定时（比如用于对话框中的标签控件），对于导航区是应该放在顶部还是放在左侧的选择，需要根据导航区的宽度和高度、标签项的个数以及每个标签项上的文字长度来综合考虑。一个基本的判断准则是要使得导航区中的标签项尽可能在一行中（如果导航区在顶部显示）或一列中（如果导航区在左侧）能够全部显示出来。如果标签项很多，而导航区比较窄，就会导致导航区必需用多行才能显示全部的标签项文字，这是一种应当尽量避免的情况，这是因为：为了不遮挡导航区中其它的行，当前正在显示的标签项一定要放在最下面一行，此时如果用户点击了上面一行的某个标签项，该行就会突然跳到最下一行，从而使得原先这些行的排列顺序被打乱，导致用户很难找到某个标签项，相信这是很多用户都曾经历过的问题。图7-1和7-2是这样的一个例子：

图7－1：Word 2000中的选项对话框的初始状态


图7－2：用户点击“修订”标签后的状态，原先导航区中上面一行跳到下面
更尽一步分析，这种界面上元素的位置经常变化会阻碍用户通过长期使用而产生熟练感或习惯行为。这种熟练感或习惯行为是一种下意识的思维活动，不需要大脑有意识地控制，因此能减轻大脑的负担。我们日常生活中的很多行为都是在下意识中完成的，比如熟练司机开车时手脚的动作，熟练的打字员敲击键盘的动作等。你能想像汽车的油门和刹车时常更换位置，或者不同键盘上同样的字母被安排在不同位置的后果吗？软件界面也是如此，在形成习惯后，用户能很快地找到一个常用的功能在界面上的位置。任何没有经过用户有目的地去调整，而由软件自身“武断”地做出的界面元素位置的变化，都将破坏习惯行为的产生。
2．如何突出显示当前标签项
显然，一个好的设计要达到的目标是让当前正在显示的标签项在导航区中表现得尽可能明显，使用户能很容易地分辨出来。令人遗憾的是，在标签控件发展的相当长的时间内，这一点一直做得很不好，其中一个主要原因是操作系统提供的标准标签控件自身做得不好，显得很“简陋”。不过可喜的是，以Visual Studio 2005 和Eclipse 为代表的软件中使用的标签导航界面在这一点上做得很好，他们都充分利用了颜色信息：当前标签项在导航区中以明显区别于其它项的颜色为背景，同时详细信息显示区的边框颜色和当前标签项的背景颜色相同，这种视觉效果能很好地引导用户形成这样的理解，即详细信息区中显示的是导航区中的突出显示项的内容。



图8：Eclipse 中的标签式界面，当前标签项用蓝色背景突出显示
3．导航区显示的信息及支持的操作
尽管标签式界面的产生过程运用了界面比拟的原理，但软件界面毕竟不是真正的物理世界，所以又不必过于拘泥于一定要和其比拟的对象在行为上一模一样，完全可以利用计算机软件的特点给它增加更多的在物理世界中不存在的功能。
很久以来，标签界面的导航区只支持鼠标单击操作，以便让用户选择一个标签项。不过从近些年的一些软件中，可以看出有以下一些新的发展：
在导航区，除了文字之外，显示一些小图标或图形。例如在图4的Visual Studio 2005的界面中，显示一把锁的图标表示一个文件只读，显示 * 号表示该文件正在被编辑，尚未保存。在MSN Messenger 的导航区中，每个标签项上显示的是图形而不是文字。
在每个标签项文字的右侧增加关闭按钮，使得用户可以方便地关闭一个，例如在图5和图8的例子中都可以看到这样的设计。这是很好的可视原理的应用实例：由于可以使用的操作已经被显示在界面上，用户可以很容易地发现并使用该操作，这使得界面具有自解释的特性，即用户不用看任何帮助或用户手册就能看到可能的使用方法。大量实验表明，除非万不得以，用户一般没有耐心去看帮助，他们更愿意在界面上尝试和摸索以便发现软件的功能。这就会产生如下的结果：即使软件有一个很好的功能，但在界面上根本无法看出怎样才能使用，那很可能用户在使用很长时间后都不知道。一个典型的例子是拖拽操作（Drag and Drop），在很多情况下，拖拽操作是完成一些任务的最好用的操作方式，但是它的可视性最差：用户从界面本身是无法看出哪些界面元素是可以被拖拽的。“酒香不巷子深”在这里是行不通的。
导航区响应鼠标右键单击操作，弹出上下文菜单。例如在Visual studio 2005 中，上下文菜单上的功能有关闭当前标签项，关闭所有标签项，打开文件所在目录等。
支持鼠标拖拽操作，改变每个对象在导航区中的相对位置。由于此时改变位置的操作是由用户明确地要求软件这样做的，因此不会引起前文提到的阻碍习惯行为产生的问题。
为了更方便地支持用户用键盘来选择一个标签项，把标签项上文字中的某个字母作为键盘快捷方式，如图9所示：如果用户按下 Alt + r 键，就可以切换到 Character Spacing 标签项，而不必用鼠标。

图9：Word 2003的对话框界面，导航区支持键盘快捷方式
总结：界面设计也要对症下药
内容决定形式，软件界面设计也是如此。为了设计出一个好的界面，设计师首先需要对该界面所处的应用环境、数据特点以及用户使用该界面要达到的目的有较好的了解，然后，在具体的设计过程中，采用有关的设计方法和一些启发性原理对界面进行评估和改进。从标签式界面的设计过程中可以看到以下的几个方法和原理的应用：
界面比拟方法：将界面设计得同人们熟悉的事物相似可以缩短用户的学习过程；
可视原理：所要支持的功能和操作是否放在了界面上容易看到的地方；
全局视图：用户是否可以从界面上看出自己当前的位置以及所有的其它位置；
对习惯行为的支持：界面构成元素的位置是否保持稳定，是否有助于用户通过长期使用形成习惯行为。
原文链接