标签可能看起来很小，但它们实际上赋予了整体导航能力。同时，违反设计模式可能会阻止用户访问这些选项卡下的内容，造成完全的挫败感，并损害整体用户体验。
一方面，标签有助于节省空间并在逻辑上将标签后面的内容分块。用户不会感到不知所措，并且可以轻松预测他们将在选定选项卡中找到的内容。另外，这种导航模式似乎很容易在设计中制作和引入。
另一方面，选中和未选中的选项卡之间不明确的区别、太多的类别、冗长而复杂的标签、不一致的设计可能会使用户感到困惑，并使他们完成任务的路径过于复杂。此外，并非所有界面都适合标签导航。
分隔线
带有水平分隔线的垂直菜单看起来非常笨拙，尤其是当行数过多时。只有当白色间距不足以在视觉上分离元素时，它们的使用才合理。
图标
一起使用时，标签和图标应该是相辅相成的，没有模糊的余地。如果您无法为菜单的每个选项卡找到合适的图标，请完全删除它们以免混淆用户。
标签高度
标签导航高度定义了组件的易读性，并确保触摸目标区域足够大以进行移动交互。最后但并非最不重要的一点是，标签之间的填充和间隙增强了美感。
活动标签
指示用户在菜单中的当前位置被认为是一种很好的形式。 为此，请使用对比色、半透明覆盖或垂直线强调当前标签导航。 同时，确保它在视觉上令人愉悦，并且不会混淆或分散用户的注意力。
标签导航的外观和工作方式应该相同
设计不一致会转移用户的注意力并产生不必要的视觉噪音。标签导航的外观和工作方式都应该相同。保持标签一致有几个可用性原因：
• 它可以帮助用户识别标签导航，因此他们知道在需要时要查找哪些元素。
• 它可以帮助用户预测单击标签导航时会发生什么，并确信他们会找到他们期望的内容。
• 它增加了用户更快、更有效地完成任务的机会，因为他们不需要专注于学习标签导航的工作方式或担心不一致功能的影响。
例如，用户希望标签导航在同一上下文中的视图之间切换，而不是导航到不同的页面。这就是模式行为。
当前标签导航应连接到内容
当涉及到标签导航时，请确保背景颜色与容器的颜色相匹配，而其他按钮看起来不同。这样，您可以指示当前选项卡与其内容之间的连接，以便用户可以判断选择了哪个标签导航。
未选中的标签应该保持可见
未选择的标签应该与活动的标签不同，但与此同时，它们不应看起来被禁用或静音——否则，用户很容易忽略它们。保持未选择的标签清晰可见和可读有助于提醒用户其他选项。
单行标签
确保您的标签导航是适合一行的有意义部分的组合。使用多行标签，您会冒着清晰的风险——用户可能会认为第二行包含子类别或不太重要的标签。
坚持“跟随”原则
在设计中，在建立对象之间的层次结构时使用了“父子”一词。当应用于导航时，这意味着对父对象和子对象使用相同的过渡方向很重要。例如，如果一个标签从左到右改变它的位置，它的内容应该相应地移动，就像你在书中翻页一样。它为用户提供了元素之间的完整性和相互依赖感。
文字标签
换行或截断不适用于导航栏标签 - 应为它们提供与其目的地相匹配的简短、清晰且有意义的名称。
本文内容为转载
网友评论