• Tab(选项卡)的产品设计原则及应用 [2]


    信息之间不应该存在对比或并行的关系

    Tab元素中,同一时刻,只能显示一层内容区。当用户需要对位于不同内容区上的信息进行对比,或者这几种信息同时显示会更便于用户阅读时,就不应该使用Tab。否则会导致用户为了比对所需的信息,而不停在标签之间进行切换。

    下面这个案例中,BGPatterns (一个在线制作背景图案的网站)tab就用得不是地方。当用户想设计或修改他所制作的背景图案时,必须反复在几个标签之间进行切换。Tab在这里妨碍了用户的操作。如果在页面上同时显示这4个内容区上的信息,可用性和友好度会更高。

    BGPatterns misuse of module tabs.

    另一个反面案例:网站 Best Web Gallery 在它侧边栏上所放置的Tab,标签分别是 ”特别推荐“(包含了一些网站所有者认为值得注意的链接)和 “最新评论”。 这两组信息之间并没有逻辑联系,用户会很疑惑为什么这两者要放在一起呢。所以这个Tab中的两组信息最好分开放置。

    Best Web Gallery not using related content for module tabs.

    每个内容区应该有一个简短明确的标题。

    Tab元素的标签区宽度是有限的,所以标签区的文字应该简洁扼要,具有代表性,长度控制在1~3个英文单词。用精炼的方式展示信息,除了保持设计样式不变形外,还可以让用户更快速地处理文字信息,用以预测隐藏区域上所包含的内容。

    Tab应该用于展现精炼的内容。

    Tab本意用于展现标准化和易于理解的信息。基于此,Tab应该只用于显示信息摘要和内容要点,例如列表,数据图表,或1~2段简短的文字这种形式。

    二、Tab的可用性原则及优化方法

    这一章节 我们将讨论一些关于Tab的可用性设计原则,以及如何使这种交互元素变得更友好和有效。

    选中的标签应该高亮显示。

    选中状态的标签应该设计得显眼,让用户容易区分当前显示的内容区是对应哪个标签。通用做法是 为未选中状态使用统一的背景色,为出于选中状态的标签上使用高亮的背景色。

    保持标签只在一行内显示

    Tab的标签通常是水平方向排列的(当然如果你愿意,也可以设计成垂直方向排列的),标签如果分布在多行上会导致用户在使用中产生疑惑。

    这是由于在水平方向上多行分布标签,隐含一种等级关系,可能让用户误以为第二行是第一行的子级。

    标签需要分布在多行上时,也就意味着标签的数量过多或者标签上文字太长。而这些都是需要被精简的。

    Single row counter example - having two rows implies that tab controls have a hierarcial relationship.

  • 相关阅读:
    985大学的部分课程链接
    SVD学习
    资源三:机器学习源代码
    资源二:计算机视觉,机器学习方面牛人网站链接
    资源一:计算机视觉,机器学习方面的论文和算法代码
    PHPCMS v9 分析(1)
    highcharts 配置选项
    highcharts 基本组成
    Jquery 代码性能改善
    非80端口的网站发布后外网访问的问题
  • 原文地址:https://www.cnblogs.com/c9log/p/1620699.html
Copyright © 2020-2023  润新知