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

相关推荐

  • 免费电话你用了吗?

    随着微信电话本1.0.0版本登录苹果和安卓应用商店,这款智能通讯增强软件也引起了一场热议。在这小编也亲自体验一下并与大家分享,欢迎拍砖~ 安装并打开微信电话本,如图: “免费”二字相当醒目,但真的是免费吗?其…

    2014-11-13
  • 荔枝FM交互飞机稿

    已经使用了近两年的荔枝FM,身为一个产品经理,一直对荔枝FM的使用逻辑和交互体验感到费解,所以今天就小试牛刀!

    2017-06-03
  • 2016年网页设计领域11个流行趋势预测

    来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势 ,而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势 会在2016年逐一涌现,但是总体上来说,它依然会沿着2015的大趋势来逐步演变。可以预见到的是,2016年会有更多的网站使用视频背景,更多基于Material Design 风格的界面设计,幻灯片式的界面切换也会继续火热下去。

    2017-05-29
  • 是时候聊聊具有直觉性的UI和交互设计了

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。“想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”“当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。”“我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。”“心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。”(如果你仔细观察,会发现这个时候的设计师将纸的纹理运用到窗口上,此处的设计和Material Design 中纸的隐喻不谋而合,这又何尝不是一种潜意识的引导呢?)

    2017-05-16
  • 扛住100亿次请求 如何做一个“有把握”的春晚红包系统?(腾讯官方内部技术PPT下载)

    羊年春晚摇一摇活动已经落下帷幕,现在回过头来看看这一全民参与的有趣的活动背后,有着怎样的后台系统?这个系统又是如何被设计与实现出来的?   作者:张文瑞 iotazhang  腾讯 WXG 技术架构部,本文提供PPT…

    2015-11-10
  • IOS 10人机界面设计指南[中文版]

    随着iPhone7的发布,iOS10普及起来已经不远,所以iOS10的人机交互规范大家也需要学习起来了,分享的是迄今为止翻译得最全面的,iOS10人机界面设计指南[中文版],希望能帮到大家,enjoy!

    2016-10-24
  • iOS和Android设计理念的演变

    IOS和Android是移动操作系统中最大的两个阵营。毫无疑问,这两个系统可以说是手机行业里的一个奇迹,并且也在逐渐变得完善。

    2017-06-05
  • 李斌:用户体验是商业变革的核心 ▏笔记

    混沌大学2017年商业创新第29课与做“车”相关领域的互联网人中,你很难再找到一个经历比李斌更加丰富的人。作为易车网的创办者、蔚来的操盘手和摩拜单车的天使投资人,李斌已经在汽车领域创业18年。对于创新的商业模式,李斌认为核心在于重新定义用户体验。伟大的商业模式变革,都不是从商业模式出发的。李斌老师在混沌大学授课授课老师|李斌易车网、蔚来汽车创始人、董事长,兼任摩拜单车董事长过去20年互联网获得的巨大成功告诉我们,用户只会为好的体验买单。...

    2018-04-06
  • 动态与富态

    一、动态:动画表达的设计应用 ”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形: 1.1. 丰富内涵 先试试为这段产品介绍做设计: Dropbox可让…

    2015-10-08
  • 阿里设计师:如何做好一场设计提案的Presentation

      作者:鸿影(阿里巴巴,设计师)   在过去很长一段时间,怎么清晰透彻地把自己的设计思路与方案讲述出来,一直是一个比较困扰我的问题(刚开始实习时甚至连做设计方案Review都经常结结巴巴),直到最近几次工作中…

    交互专题 2017-08-07