设计模式 | 标签的可用性指南

Posted 2021-04-25 冇化论

标签在UI设计中可能属于比较枯燥的部分。但创建标签时存在许多特定的设计问题，遵循下面12条选项卡控件设计指南可以使标签更易于使用，并增强用户体验。

1. 在交替观看时保持原位是使用标签的重要原因，所以使用选项卡在统一上下文的视图间切换，而不是导航到其他区域；
   

2. 从逻辑上对选项卡内容进行分块，使用户可以预测选择选项卡时会发现什么；

3. 仅在用户不需要查看多个选项卡内容时，才使用选项卡。如果人们确实需要比较标签背后的信息时，来回切换会增加用户的短期记忆负担，增加认知负荷和交互成本，可用性更高的选择是设计一个可展示所有内容的页面；

4. 设计本质是保持标签的平行。如果选项卡描述明显不同，用户可能会将其理解为网站导航；

5. 突出显示当前选中选项卡。确保显示突出，以便用户可以分辨选择哪个选项卡。当只有两个选项卡时，可通过使用对选定的选项卡和面板区域使用相同的颜色来突出显示；

6. 保证未选中的选项卡清晰可见，防止其在显示中过度弱化导致用户没有察觉它们的风险；

7. 将当前选项卡连接到内容区域，强调显示哪个面板，在只有2个选项卡时可以告诉用户选择了哪个选项卡；

8. 使用简单的语言（不是简化的术语）来描述标签，通常1-2个词字。短标签易于扫描，太长的标签描述对于标签控件而言过于复杂；

9. 对于英文标签，不要使用大写标签，因为大写更难阅读；

10. 坚持只有一排标签，多行元素会破坏空间，使用户无法记住已访问的标签。多行属于过度复杂的问题，如选项多于单行的选项卡，则必须简化设计；

11. 标签的范围应在视觉设计中更醒目。将标签放在标签面板的顶部，而不是侧面或底部，以防用户忽略它们；

12. 一致性在GUI控件设计中很重要，因为它以多种方式构建用户对界面的掌控感，所以标签外观与工作方式应保持相同：

    a.可识别性。当某些东西看起来总是一样的时候，你知道要寻找什么，并且当你找到它时，你知道它是什么；

    b.可预测性。当某些东西总是以相同方式运行时，你知道当你采取行动时会发生什么；

    c.授权。在你可以依赖过去的可用性功能的知识时，你可以轻松的组合一些列操作来实现你的目标；

    d.效率。不用担心功能的不一致或学习成本的影响；

总结

标签本身没有任何价值，但是当它们没有引起注意但是便于访问内容时，它们在满足用户体验和业务目标方面就是成功的设计。