7

Tabs标签页如何设计？我总结了这十个方法

 3 years ago
source link: https://www.51cto.com/article/705322.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Tabs 标签页又称选项卡(以下简称标签页)，它是一种高效的屏幕空间利用手段，映射非常接近卡片的目录索引，用户可以基于索引标签，快速定位到目标中内容中去，这也是大多数用户来自现实世界的经验。

在 Web 页面中，它的使用场景也较为简单，当页面的内容信息量较多，用标签页可以对其分类，一方面可以提升查找信息的效率，另一方面可以精简用户单次获取到的信息量，用户更能够专注于当前已显示的内容。

925a10693c8c4d72dad89084918f8c0f78187f.jpg

本文从标签页的「基本原则」和「使用避免」两个维度，总结 10 个我们所要注意的一些规则和方法，如果遵循这些原则，它不仅能够快速、高效帮助用户完成任务，也会让我们设计的体验更好。

由于 Tabs 标签页涉及到的端设备及内容较多，本文只讨论 Web 端内标签页的使用情况，不讨论浏览器级别的标签和导航标签设计等。

1. 标签的文案应当是简短且高效的

标签的文案应当简短，做到让用户快速识别

标签的文案需要尽可能使用简短的、概括性强的关键词，如果使用较长的文案，那么对于用户阅读和区分这些信息都是一个不小的挑战。标签文案需要有明显的区分，避免用户产生歧义;在词语上优先使用名词而不是动词，因为动词让用户误以为这是可以行动的按钮。

35e9b048122e3b20eac63392b300b22888be7c.jpeg

标签的文案应当做到高效展示

标签的信息展示传达应当高效，比如不要让标签文案分开展示，如下图的标签页的状态和数量两组信息较为割裂，用户会做短暂思考关联下方内容的是状态还是数量。如果设计的样式与常规标准差异较大，用户就会产生疑惑，所以对于用户已形成的行为习惯，尽可能避免改变。

47997763962299c3960518383c20d8f923dbb0.jpeg

2. 已选中的标签应当是唯一的且足够突出

已选中的标签应当是唯一的

标签页之间是相互独立且互斥的，一次只显示一个标签的内容信息，不会出现点击一个标签页，出现两个甚至更多标签的详细信息。一般默认选项为第一个标签页，而如果没有给到用户预选择的情况，也会让用户感觉困惑。同时关联的详细内容区域宽度应该是等同的，切换不同的标签，不要改变其内容宽度的大小。

176b53b8710639231f8918d58b43601ebf4bc2.jpeg

已选中的标签应当是足够突出

确保已选中的标签页足够突出，让用户一眼就知道了当前选中了哪个选项卡，特别是当只有两个标签页的时候。可以通过字体大小、颜色、粗体等在增加已选中的视觉权重。

c5817f377c6a471e9ac092ddc92aea052604d1.jpeg

3. 标签页版面延伸到内容区域，可加强标签与内容的关联性

如果将选中卡片式标签页背景颜色和内容面板背景保持一致，就能够做到增强选项卡与内容之间的联系感。

94c81ac9104e5619e947804b5251bfd72e6a94.jpeg

4. 标签页的位置和排序，应当基于人的阅读习惯

位置：强调或需要引起用户的注意，请把它放至顶部

因为人的阅读习惯是从左至右、从上到下的顺序浏览，所以相较于底部或左侧的标签页，顶部的标签页具有更强的视觉引导并引起用户的注意。相反如果用户不太关心，甚至很少切换这些标签页，可以考虑将它们放至底部。

26ef1ae69a79c7b0031027dd03f67cc456eafe.jpeg

排序：重要的、使用频率高的标签应当放至前面

如上所说，人的阅读视线从左到右，所以应当将重要的、使用频率高的或者按照逻辑顺序往前排，通常默认选项(一般为左侧第一个)是用户进入页面看到的第一个标签页，因此它的信息应当是最重要的、或者应当是用户使用频率最高的。以下是以京东关于商品详情的一个排序，用户看到的第一个标签页是关于商品的介绍，第二个标签页是商品的规格包装，第三个是该商品提供了哪些售后保障等等。

71c989043cd5aca12c61936d7182784a48dc9e.jpeg

1. 避免使用图标作为标签页文案

在一些场景下，图标有时反而会让用户误解标签的信息，如果要用请全部添加，不要只针对部分标签选择使用图标。使用时仍需注意，将图标放至 tab 标签的左侧。

89eeac809062fb31e6353372f2af11f52a7ff1.jpeg

2. 避免截断标签文案，并且让它们有足够的点击面积

避免截断标签左侧的文案，减少的文本会阻碍用户对于信息的识别和理解

完整的标签信息，可以帮助用户快速识别当前的位置。如图左侧标签内容的减少，会妨碍用户对于信息的理解，反而会降低标签的可识别度和操作切换的决策成本。

c87434f39a913eb8cec68270662b50daa002f9.jpeg

标签页应当有足够的面积，避免让它们进入紧凑模式

每个标签页都有层级引导的作用，需有一定面积来展示标签信息。比如像浏览器的标签页特别多时，会给用户使用带来两个问题，一是可点击区域非常小，精准点击较为困难;二是标签获取到的可用信息非常少，甚至有时只是一个图标，当然对于浏览器，我们完全可以重新打开一个新窗口，来解决这个问题。

b2bee9d91d291c9e5ca3015a9cac40f3767ce0.jpeg

3. 避免数据为空，就不显示这个标签页

一般情况下，如果将标签页作为数据信息分类展示时，即使该标签下没有数据，该标签也是需要显示的，否则用户就永远不会知道有这个标签页的存在。

b77b2cf4334ecc6b19f798636f74b9bf2f7e07.jpg

4. 避免标签页，在内容较少或者作为比较时使用

避免将标签页用于很少的内容分类，因为会降低信息的展示效率

标签页本就是为过多内容信息而采用的一种分类方式，如果一个 tab 下只有几段文字或者几组录入数据信息，可以考虑在一个页面内展示这些内容，不仅可以提高屏效，还可以减少操作上的切换成本。如下图，简单的三组数据信息，我们就可以将它们放在一个页面中，通过卡片来区分它们。

04f1ecc524eccb31627919f20f52904ccf5569.jpeg

避免将标签页用于比较不同类别的信息，因为它会增加用户的记忆负担

因为用户通过切换标签页去比较这些信息时，短暂记住这些内容是一件非常困难的事情。所以对比不同类别之间的内容，可以考虑在一个页面展示，如下图就是苹果官网在一个页面显示的 Mac 机型比较，可以同时对比三款机型的信息。

33e3a3e41112abedec6385d2fa898050a23ec5.jpg

5. 避免嵌套标签页，如果使用请加大他们的层级关系

避免在 web 页面中嵌套标签页，因为嵌套后层级较为复杂，可能会造成信息的混乱，用户记不住已访问过哪些标签页。如果有嵌套 tab，请在视觉上加大他们的层级关系，并且尽可能减少一级 tab 的数量。

c2144c21708ce17cebd291c99fc9fdb865aa65.jpeg

6. 避免复杂内容标签页，用户直接删除

在表单中，如果删除该标签页后，会给用户造成工作负担，甚至会丢失一些数据，这时的删除操作需要给用户反馈提醒，给到用户二次确认是否删除;如果删除该页签后，对于用户几乎没有任何负担，或者再次输入的成本较小时，不建议使用二次确认，因为这时给用户带来的操作干扰远大于误操作成本。比如下图 Microsoft Excel，当标签页签有内容输入时，删除会需要用户二次确认，而当页面内容为空时删除不会给用户任何提醒。

在具体的业务场景中，我们需要结合用户的删除频率、误操作成本以及删除组件的干扰三者之间找到一个相对平衡点。

73cba8348e6269aa826514c177f4b1efa07254.jpeg

以上就是标签页在设计中我们所注意的一些事项，如果遵循这些用法，不但解决信息的堆积问题，也能够大幅提升页面的清晰和可用性。而如果我们发现用户很少去点击这些标签页、或者使用经常出错，就需要考虑这些标签页是否使用得当，或者违反了上述所说的一些基本用法。

以上举例覆盖的场景不一定全面，不过我们最终的目的还是通过标签页这个组件，去引导用户将视觉聚焦于页面内容。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK