用好的交互设计来管理复杂-“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

相关推荐

  • 在设计功能时,怎样的交互才是合理的?

    或许在本文中,你不会得到所谓的干货。但小编相信,一旦你读完了,你的思想认知会更上一层的。具体想了解关于《从这四个点,正确完善地拆解一款 App》的,可以看下这篇文章,要从多角度去看文章去分析。

    2017-05-07
  • 为增强产品的用户体验,UI设计师会做哪些工作

    近年来,人们越来越多地谈及用户体验,甚至将其视为互联网产品赢得市场的最关键因素。作为UI设计师,我们战斗在用户体验设计的一线,那么在实际工作中我们会通过哪些工作来提升产品的体验呢?下文给出了几点关于实际工作中提升产品用户体验的思考。我们在设计一个程序或者系统的时候,前提是保证产品定位及有目标用户群,保证产品是有用的,能连接不同的节点产生价值。如果一个程序没有用,那么对用户来讲就没有下载、使用的必要了。而当程序有用了之后,如果用户需要付出...

    2018-02-03
  • 常见的App应用界面交互框架

    掌握常见的APP应用界面交互框架,了解他们各自的优缺点,使用时才能游刃有余。你还在等什么呢?赶快去学习吧。标签式、跳板式、列表式和旋转木马等在等着你。 1>标签式 优点: 1、当前位置入口清晰   2、轻松在…

    2014-11-19
  • 交互设计师如何做竞品分析

    竞品分析的目的并不是为了抄袭,而是为了超越竞品。

    2017-05-15
  • JDC丨京东设计中心 - 电商大促攻略页设计指南

    通常我们看到的旅游攻略,游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互。而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营…

    2018-03-27
  • Google 内部资料:提升用户体验的三大设计原则

    想提升用户体验?在你运用自己的创意和设计思路时,请考虑这些由 Android 用户体验团队秉承用户体验至上的理念而制定的 Android 设计原则。一、让人着迷1. 以意想不到的方式让人眼前一亮漂亮的界面、精心布置的动画,或恰到好处的声效,都会带来快乐的体验。精细的效果能产生一种轻松的氛围,让人感觉自己拥有强大的力量。2. 实际对象要比按钮和菜单更有趣让用户可以直接触摸和操作你应用中的对象,这样,可以让执行任务更轻松,让用户更满意。3....

    2018-02-06
  • 交互设计之用户建模

        上次已经论述了交互设计的目标研究,这次呢来说一下建模,建模包括用户建模和使用场景建模。因为使用场景建模常常和需求设计结合在一起,所以放到下次说。    目标建模包括理解…

  • 用户体验与产品价值

    关注一下,更多精彩等着你户体验不等于用户可用性当你局限地将用户体验等同于用户接触UI时的可用性的时候,或者是局限地理解用户体验只是发生在用户使用产品过程中的时候,你就会说:有比它更重要的事情,比如用户价值、产品价值。是的,没错。如果产品没有用,即对用户没有价值,UI的可用性绝对不是最重要且,但是我们仍然得时刻提醒自己,可用性不等同于用户体验,可用性只是用户体验(使用中)的一部分而已。用户体验设计超越产品设计。用户体验设计包括组织开展用户...

    2018-03-03
  • 【设计作品分享】一个让你丢掉负能量的产品——BICH

    作者:梁雅婵,授权载于我是UE网。

    2015-11-27
  • 用户体验对于SEO而言有多重要?

    用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键的位置,也是现在最具潜力的网络营销方式之一。我们先来了解一下:在百度算法中,如何判定一个页面是否有价...

    2018-02-28