用好的交互设计来管理复杂-“Tab”

标签可能看起来像一个微小、乏味的图形用户界面设计,但我们合理的运用Tab的特点,易用易理解,就能为你的用户体验加分。


标签可能看起来像一个微小、乏味的图形用户界面设计,但我们合理的运用Tab的特点,易用易理解,就能为你的用户体验加分。

用好的交互设计来管理复杂-“Tab”

最简单的界面小部件会是大模块功能的基石,是否用好用得合适对产品的体验起着重要的作用。本文谈论的就是一个经常被误用的设计元素:Tab。

上下文替换

在相同的上下文中使用Tab来替换视图,设计的标签是平行的性质,而不是导航到不同的区域。这种Tab切换,可以直观的看到逻辑块后面的Tab内容,这样当用户选择一个给定的标签时,可以很容易地预测前后Tab的内容及关系。如果人们需要比较不同的标签后面的信息,使用这类Tab作为信息切换就比较合适。

如下图:蓝色圈出部分。

用好的交互设计来管理复杂-“Tab”

功能类导航

同理,只有当用户不需要同时从多个选项卡中查看内容时才使用Tab导航。因为使用Tab导航会增加用户短期记忆的负担,增加了认知负荷和互动成本,并降低可用性。在产品设计时,导航设计应该突出当前选定的标签。确保突出显示,这样用户就可以分辨出哪个选项被选中了。

当然,除了强调被选中的内容,你还可以标记当前页的大小,通过一个粗体标签,图标,或者通过排序来突出优先级。同时,未选中的标签应清晰易读,成为提醒用户的附加选项。如上图:绿色圈出部分。

内容类标签

将当前标签连接到内容区域,就像你正在用标签的几个物理索引卡进行移动一样。这强调了显示面板,也告诉用户选项卡被选中时,只有几个标签。将标签放在标签面板的顶部,而不是在两侧或底部,用户经常会忽略它们。

标签控制的范围从视觉设计应该是显而易见的。打个比方,使用标签就像翻阅抽屉里有一个老式的卡片目录索引卡,所以用户必须能够一眼分辨什么是“卡片”(即标签面板)。如下图案例:

用好的交互设计来管理复杂-“Tab”

总结一下:

Tab的使用应该将外观与功能功能设计的相同。“一致性”在图形用户界面控制设计是非常重要的,因为它建立了用户在界面上的感知:用户知道如何使用你的Tab,而无需进一步探索或容易出错的猜测。

这就意味着,他们可以把自己的全部时间和脑力去理解的内容和功能。大部分人会认为Tab本身没有价值,但它们的光芒会在不禁意间感染到你的用户。在我们设计功能的时候,可以通过做一个快速的A / B测试,让Tab的设计符合用户习惯。

 

作者:Mandy权,微信公众号:Q产品,一名快乐的产品经理!~

本文由 @Mandy权 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27752/

(0)
CatherineCatherine
上一篇 2017-05-18 22:52
下一篇 2017-05-19 00:48

相关推荐

  • 网页设计中常见的五种交互设计错误

    交互设计 从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析,然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现,事情就变得不是那么容易了。

    2017-06-05
  • Axure官方教程中文版第6课:条件、值及变量-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(6).MP4 新建文件 1、添加一张图片和按钮 2、添加条件保证文本框不为空 3、文本框的变量值 4、添加打开“Page1”的动作 5、添加文本字段为空的第二个…

    2015-01-26
  • 手机系统苹果、安卓交互设计的通用原则总结!

    :请点上面免费订阅系统的设计从用户角度来说,交互设计是一种如何让产品更容易用,让用户更愉悦地使用产品。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点,并用通用的交互能满足用户操作的预期。下面介绍一下在交互设计中一些比较通用的设计原则,大家可以参考一下。交互1、就近原则:将同一类的功能都组织放在页面相同模块中。2、容错原则:必须允许用户有犯错的操作,给予用户后悔的操作机会。3、帮助原则:为用户提...

    2018-02-16
  • 电视交互设计的一些事 | 设计基础15

    两年前,我总结过《Apple Watch交互的一些事》,简单的分享了下手表小屏幕的交互设计。而在过去一年多的时间里,我有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。✨硬件+远距离操控——基本交互基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一、 遥控...

    2018-01-30
  • 如何入手书写产品体验报告

    体验产品是PM工作中经常做的事情,企业也常留一些这样的实习作业给面试者,是因为产品体验报告一定程度上直观的反映了面试者的专业水平。求职过程中,如果能提交一份专业的体验报告,将大大提升简历通过率,获得面…

    2015-03-05
  • 交互设计要点&配色趋势

    色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能渲染出截然不同的情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的网页设计更特别。 1Metro和柔和鲜嫩的色彩 Odam Luiran的网站是Metro风格,…

    2015-12-08
  • 像用户体验设计师那样思考

    [国外设计第158期][图片]插画来自Crafticons培养探索未知的心态(持续)学习用户体验是最需要技巧的事情。因为这不是标准教育中的某个正式课题。它总是以某种神秘不可预测面貌示人,直到你在设计、研发、市场推广(或者其他创意领域)中遭遇到用户体验的具体概念。虽然在用户体验方面

    微信热点 2018-04-18
  • APP特有的交互设计模式解析

      1、触屏滑动操作,移动APP端最基本的操作方式。 (1)屏幕之间或者页面直接的自由滑动切换 比如手机移动端的界面切换效果,可以滑动使用快速友好的切换 (2)滑动条目经行删除 横向滑动条目的操作犹如一汪清…

    交互设计 2015-08-19
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04
  • 用户体验与结婚教练

    我的朋友文敏,在做一个工作——结婚教练。具体就是指导30岁以上,下定决心要结婚的女生,如何在一年半之内搞定结婚。而且她的这套方法,已经帮助30多个30多岁的女生结婚了。我就很好奇,想了解她的核心方法,然后发现,几乎她是严格按照产品方法论,来培训想结婚的熟女,如何做判断、做交互、做优化。而判断、交互和优化三者,判断肯定是第一位的。古人云“男怕入错行,女怕嫁错郎”。第一步的判断和选择,决定了一个人在一个点线面体上的位置。而她做判断的方法,基...

    2018-02-02