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

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

网站工程师 2019-07-04 12:42发表
阅读次数 1426
  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网页Form
企业网站如何提高用户体
推广研究报告—真实的视
搜索引擎优化
网站更换如何保护好我们
标签水平右对齐更适合中
如何从营销的角度策划建
搜索引擎优化分析
企业网站建设时应注意的
在青岛,企业网站建设对
web方向用户体验之让
为什么说设计是网站的肢
设计中的色彩:灰色
如何做网页设计的10个
如何让百度快速的收录网
如何使蜘蛛逆向爬行索引
宽屏网页设计趋势与分析
个人网站的一些基础小知
青岛营销型网站建设
网站banner的设计
教你如何解除“该网站可
如何提高内容视觉效果的
网页设计的审美需求
网站内容决定网站的前途
如何通过网站优化提升客
网络广告与网站推广的步
网站推广的方法?
向细节挖掘灵感:网站设
Web内容不是一写就好
手机建站时容易进入哪些
网页模板
进一步优化网站,减少百
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

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