青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113115166683288 
知识普及 » Tab(选项卡)的产品设计原则及应用

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

网站工程师 2019-07-04 12:42发表
阅读次数 2700
  ModuleTabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法)是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。

  (译注:本文中指的是狭义的Tab,指在界面的某一版块区域内所应用的Tab设计。实际上,绝大多数网站导航也是Tab的一种应用。)

  web界面的设计趋势是缩短页面屏长,降低信息的显示密度,但同时又不能牺牲可视的信息量。在这种趋势下,Tab这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中,人们在侧边栏使用Tab模式来显示”最新更新|最热更新“的文章列表以引导用户快速跳转到文章内容页,这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。

  本文将讨论基于web页面或其它web应用中如何设计Tab,同时分享一些产品设计原则、真实的应用案例、教程以及一些能帮助你直接实现Tab应用的免费脚本。

  分析Tab元素的构成

  为了统一叫法以便于进行讨论,我们先花时间来认识一下Tab元素的每个构成部分。

  标签:用户控制切换内容区的操作区域。标签和内容区在视觉上看起来应该是一个整体。标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。标签有选中和未选中两种状态,每次只能有一个标签是选中状态,在页面刚载入时,默认第一个标签是选中状态。内容区:Tab元素中重叠的区块。用于显示信息内容。内容区和标签一一对应,当前显示的内容区对应选中状态的标签,当前隐藏的内容区对应未选中状态的标签。用户应当能很轻易地通过控制标签来切换对应的内容区。默认被选中的内容区应该在页面载入后立即显示。

  一。什么情况下应用Tab设计

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

  信息之间具有某种关联特征

  构成一个整体的每个元素之间都应该具有逻辑上的关联性。所以出现在同一个tab元素中的几种信息自己应该具有关联特征,这样用户才能将整个Tab区域视为一个整体。例如在Blog中很常见的信息组合:“最新更新|最热文章|评论最多”。

  下图是网站WebdesignerDepot的侧边栏上的Tab元素:“全部文章|最受欢迎|最新更新”

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

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

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

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

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

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

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

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

Tab(选项卡)的产品设计原则及应用相关标签:网站优化制作网页制作网站企业做网站
相关热点推荐
Web设计的成就感
网站设计的方块元素该如
如何提高做网站外链的效
与用户体验的这两年
青岛网站建设报价与费用
2016年中国互联网的
网站推广不可或缺的七个
SEO之自然搜索引擎排
中小企业网站建设中点滴
网站设计中的面包屑
网站界面设计:网页的均
分享建站、优化全过程
网站建设之企业的产品和
青岛网站设计容易犯的几
企业网站建设的目的是什
建设网站的十大误区
Tab(选项卡)的产品
大数据或将迎来掘金良机
我们还需要“面包屑”吗
在线评论对购物影响仅次
网站策划的具体内容
从网页到网络平台网站开
如何建立个人网站?
网站品牌的辨识度是怎样
网站被搜索引擎快速收录
网站重建如何保护已有排
搜索引擎为何找不到网上
我国建成全球最大5G技
企业网站分类
如何让网站排名靠前?
青岛网站建设之网页如何
网站内容质量分析与应用
影响网站排名的一些不必
青岛网站建设品牌哪家好
平度网站建设哪家好
企业建站优势
如何设计网页小广告(b
网页设计中的功能与美
网页制作之“事不过三”
企业为什么要做网站?企
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
建站咨询热线0532-88781131 15166683288 18562723728
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
211个月 8