站长广告网

 找回密码
 我要注册

QQ登录

只需一步,快速开始

站长广告网 首页 设计学院 网页设计 查看内容

Tab设计的一些思考:让用户更轻易的接触更多信息

2016-11-9 10:40|浏览:1135 人次| 0人参与

摘要: Tabs 可用于将有关的内容分组,重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。Tab属于扁平 ...

什么是Tab

  Tabs 可用于将有关的内容分组,重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。

  用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。

  Tab属于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处的位置。

Tab的优势

  Tab将大量关联的数据或者选项划分成更易理解的分组,提供简单的页面展示形式,即在不需要切换出上下文,页面跳转的情况下,有效的进行内容组织的扁平化导航设计。

  如PC端的标签页导航、模块选项卡等设计形式。

  可以将产品包含的所有内容进行清晰分类,一目了然地呈现应用的内容范围,方便概览与跳转。

Tab的组成部分

  

  Tab Menu(标签区)

  用户导航和控制切换内容区的操作区域。

  Tab Box(内容区)  

  • Tab内容中重叠的区块,用于显示信息内容。
  • Tab Menu(标签区)有选中、未选中两种状态,且只有一个Tab为选中状态。
  • 页面载入时,一般默认第一个Tab为选中态。

  Tab标签与Tab内容是一一对应的,标签与当前显示的内容区对应选中状态的标签,当前隐藏的内容区对应未选中状态的标签。

Tab的使用场景页面空间有限

  当希望节省页面空间,布局紧凑,且需要组合的几种信息之间具有关联性时,可以选择Tab。

  Tab的使用,令页面结构紧凑,可以缩短页面屏长,降低信息的显示密度,但同时又不牺牲可视的信息量。

  把有效的信息以最少的布局显示,能有效减少页面的占用空间。

  信息之间具有某种关联特征,且是并列关系,内容不交叉

  构成一个整体的每个元素之间都应该具有逻辑上的关联性。所以同一组Tab中的每个Tab项,应该具有关联特征,内容也不相重叠,这样用户才能将整个Tab区域视为一个整体。例如:

  PS颜色与色板是一组Tab组合。

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

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

  Tab应该用于展示精炼的内容

  Tab用于展现标准化和易于理解的信息。基于此,Tab应该只用于显示信息摘要和内容要点,例如列表、数据图表。

  Tab不能滥用于内容切换与内容分页,如单个产品中页面之间的切换

  Tab强调的是信息的分类属性(同类并列),即它一般用于最小单元的组合,而非最小单元的拆分。

  右图不可取,Tab不应该应用于一个产品内部不同的功能之间导航切换。

Tab的设计原则

  标签上使用简短和有逻辑的文字

  Tab元素的标签区宽度是有限的,所有标签区的文字应该简洁扼要,具有代表性,长度控制在6个文字以内。以便可以在一行内,容纳尽可能多的标签。

  用精炼的方式展示信息,除了保持设计样式一致外,还可以让用户更快速地处理文字信息,用以预测隐藏区域上所包含的内容。

       本文发布于站长广告网,本文链接:
文章还不错,分享到:
12下一页

   站长广告网(www.zhanad.com)版权及免责声明」
    ① 本站文章来源注明为“站长广告网”的所有文字及图片均为本站原创,版权属于本站所有。其他网络媒体或个人转载使用文字及图片的,应在授权范围内使用,转载请注明“作者、出处链接”
    ② 本站转载自其他媒体的文字及图片,仅出于传递信息之目的,不代表本站官方声音或证实其内容的真实性。如其他网络媒体媒体或个人转载,必须保留本网注明的版权标注,并自负版权等法律责任。
    ③ 欢迎通过官方QQ:10382819、邮件ceo#zhanad.com(#改为@)、微博@站长广告网 与我们就文章内容交流、声明或侵删。[本文编辑/信息员 

相关分类

联系我们 素材下载
返回顶部