TabsTabs也叫tabs（以下简称tabs）。定位到目标中的内容也是现实世界中大多数用户的体验。在网页中，它的使用场景也比较简单。当页面内容信息较多时，可以使用标签进行分类。信息量可以让用户更加关注当前显示的内容。本文从标签页的“基本原则”和“使用与避免”两个维度总结了10条我们应该注意的规则和方法。如果遵循这些原则，不仅可以帮助用户快速高效地完成任务，还可以让我们设计的体验更好。由于Tabs标签页涉及到很多终端设备和内容，本文只讨论标签页在Web端的使用，不讨论浏览器级标签页和导航标签页的设计。基本原则1、标签文案要短小精悍。标签文案要简短，便于用户快速识别标签文案。应尽可能使用简短和通用的关键字。如果使用更长的文案，那么对于用户阅读和区分这些信息是一个不小的挑战。标签文案需要有明确的区分，避免用户产生歧义；首先在单词方面使用名词而不是动词，因为动词会让用户误认为这是一个可操作的按钮。标签的文本应该有效地显示。标签的信息显示和传达应该是高效的。例如，不要让标签文字单独显示。下图中标签页的状态和数量是相对分开的。用户将简要思考与以下内容相关的状态。或数量。如果设计风格与常规标准大相径庭，用户会感到困惑，因此尽量避免改变用户已经形成的行为习惯。2、选择的tab要够独特、够显眼。所选选项卡应该是唯一的选项卡。这些选项卡是独立且互斥的。一次只会显示一个tab的内容信息，不会有点击tab的情况。显示两个或更多选项卡的详细信息。一般默认选项是第一个选项卡，如果不给用户预选，也会让用户迷惑。同时关联的详细内容区域的宽度要一致，在不同的tab之间切换，不要改变内容宽度的大小。选中的选项卡应该足够突出确保选中的选项卡足够突出，让用户一眼就知道当前选择了哪个选项卡，尤其是当只有两个选项卡时。您可以通过字体大小、颜色、粗体等来增加选定的视觉权重。3.标签页布局延伸到内容区，可以加强标签与内容的联系。如果选中的卡片标签页的背景颜色与内容面板的背景颜色一致，则可以增强标签与内容的联系。4.标签的位置和顺序要根据人们的阅读习惯。位置：为了强调或者吸引用户注意，请放在最上面，因为人们的阅读习惯是从左到右，从上到下浏览。因此，顶部的选项卡比底部或左侧的选项卡更具视觉导向并吸引用户的注意力。相反，如果用户不太在意，甚至很少切换这些标签，可以考虑将它们放在底部。排序：重要的和经常使用的标签应该放在前面。上面说了，人的阅读视线是从左到右的，所以重要的和经常使用的标签应该按照逻辑顺序放在前面，通常默认选项（一般是左边第一个标签）是用户进入页面时看到的第一个标签页，所以它的信息应该是最重要的或者是用户最常使用的。以下是京东商品详情排名。用户看到的第一个标签页是产品介绍，第二个标签页是产品的规格和包装，第三个是产品提供的售后保证等等。避免使用1.避免使用图标作为标签页文案。在某些场景下，图标有时会导致用户误解标签的信息。如果要使用，请全部添加，不要选择只对某些标签使用图标。使用的时候还是需要注意一下，把图标放在tab标签的左边。2.避免截断标签文字，让它们有足够的点击区域，避免截断标签左侧的文案。减少的文字会阻碍用户识别信息和理解完整的标签信息，可以帮助用户快速识别当前位置。图中左侧标签内容的减少会阻碍用户对信息的理解，但会降低标签的可识别性和操作切换的决策成本。标签页应该有足够的区域以避免将它们置于紧凑模式。每个标签页都有分级引导的功能，需要一定的区域来显示标签信息。例如，当浏览器中的选项卡过多时，会给用户带来两个问题。一是可点击区域很小，很难准确点击；当然对于浏览器来说，我们完全可以重新打开一个新窗口来解决这个问题。3.如果数据不为空，则不会显示该选项卡。一般情况下，如果tab是作为数据信息的一类展示的，即使tab下没有数据，也需要展示tab，否则用户永远不知道有tab。此选项卡的存在。4.避免使用标签，在内容较少或作为比较时使用标签。避免使用标签对少数内容进行分类，因为这会降低信息展示的效率。Tabs本来是一种内容信息过多的分类方式，如果一个tabs下只有几段文字或者几组输入数据信息，可以考虑将这些内容显示在一个页面中，这样不仅可以提高画面效率，也降低了操作中的切换成本。如下图，对于简单的三组数据信息，我们可以将它们放在一个页面上，用卡片来区分。避免使用标签来比较不同类别的信息，因为这会增加用户的记忆负荷，因为用户在切换标签来比较这些信息时很难简单地记住这些内容。因此，要比较不同类别的内容，可以考虑将它们显示在一个页面上。下图是苹果官网一页显示的Mac机型对比图。您可以同时比较三个模型的信息。5.避免嵌套标签页。如果你使用它们，请增加它们的层次关系。避免在网页中嵌套tab页，因为嵌套层次比较复杂，容易造成信息混乱，用户记不住访问过哪些。书签页面。如果有嵌套的tab，请在视觉上增加它们的层级关系，尽量减少一级tab的个数。6、避免内容复杂的标签页，用户可以直接在表单中删除，如果删除标签页，会给用户造成工作量，甚至会丢失一些数据。这时候删除操作需要给用户一个反馈提醒，给用户两次是否删除的第二次确认；如果删除标签后对用户几乎没有负担，或者重新进入的成本很小，不建议使用二次确认，因为对用户的操作干扰远大于误操作的成本。例如下图中的MicrosoftExcel，当tab页有内容输入时，需要用户确认两次删除，当页面内容为空时，删除不会给用户任何提示。在具体的业务场景下，我们需要在用户删除的频率、误操作的成本和删除组件的干扰之间找到一个相对的平衡点。综上所述，以上就是我们在标签页设计中要注意的一些事情。如果遵循这些用法，不仅可以解决信息堆积的问题，还可以大大提高页面的清晰度和易用性。而如果我们发现用户很少点击这些选项卡，或者经常出错，我们就需要考虑这些选项卡是否使用得当，或者违反了上面提到的一些基本用法。以上示例涵盖的场景不一定全面，但我们的最终目的是通过标签页组件引导用户关注页面内容。
