浅谈Web设计中的上下文工具

最近在阅读Bill Scott和Theresa Neil 所著的《Web界面设计》,其中上下文工具一章给我留下深刻的印象,下面我将结合部分实例来回顾一下主要的内容。

最近在阅读Bill Scott和Theresa Neil 所著的《Web界面设计》,其中上下文工具一章给我留下深刻的印象,下面我将结合部分实例来回顾一下主要的内容。

在具体讲上下文工具之前,先来说说上下文交互(Interaction in Context,英文看起来更容易理解一些) 是怎么回事。

百度:除了“提交”按钮和超链接之外,几乎什么都用不着的简单站点。

浅谈Web设计中的上下文工具

雅虎邮箱:带有工具栏和菜单的全功能应用程序。

浅谈Web设计中的上下文工具

这是两个比较极端的例子,大部分的Web站点是介于这两者之间,它们需要在一定程度上混合内容和功能,这就是上下文交互,如何协调处理功能与数据。

在讲上下文工具之前,还有一个不得不提的就是费茨定律:

到达目标的时间是到达目标的距离与目标大小的函数。

就是说:

1)不要让目标过小。目标足够大才容易被注意到,也容易操作。

2)尽可能把操作放在距离激活点最近的位置上。

上下文工具其实就像是桌面右键菜单的Web版,但它又不需要用户单击右键,而是可以通过内容在上下文中显示相关工具。实现这一目标有以下几种方式:

1)实时可见工具:把上下文工具直接放在内容中。

2)悬停即现工具:在鼠标悬停时显示上下文工具。

3)开关显示工具:打开/关闭页面中上下文工具的总开关。

4)级联递进工具:基于用户操作渐进显示工具。

5)二级菜单:显示二级菜单(一般通过右击对象触发)。

一、实时可见工具(Always-Visible Tools)

这是最简单的上下文工具。以知乎来举例:

可见的工具:在每个回答旁边,都有一个统计赞同的数字,数字上方是“赞同”按钮,下方则是“反对”按钮,并且随着文章的下拉它能依然保持可见。

浅谈Web设计中的上下文工具

邀请:鼠标悬停在“赞同”时,上半部分的背景由浅蓝色变成了深蓝色,同时也出现一个提示“赞同”。突出显示是表现交互能力的有效途径。

浅谈Web设计中的上下文工具

完成:单击“赞同”按钮后,赞同马上被记录,原来的赞同数会立即消失,取而代之的是新的赞同数,背景颜色保持了深蓝色。

浅谈Web设计中的上下文工具

“赞同”和“反对”按钮就是始终可见的上下文工具。

需要注意的地方:

明确邀请操作给回答“点赞”是知乎运营的核心理念,始终显示相关工具可以明确邀请操作。当然,还有与回答相关的其他操作(评论、感谢、分享、收藏等等),但这些操作只存在于回答的结尾处,表现得不那么明显。

相对重要性:操作的相对重要性,也可以作为处理这个问题的依据。“赞同”与“分享”这两个操作的重要性一样吗?对于知乎来说,显然是不一样的。“赞同”以显著位置浮动固定在每个回答的左边,而“分享”操作被放到了回答的末端,所处位置的不同,可以反映出这两种操作的重要程度不一样。

易发现性:保持视觉干扰最少化。保持可见项目最少化。

二、悬停即现工具(Hover-Reveal Tools)

当用户鼠标悬停于对象上方时显示相关工具。还是以知乎为例:

正常状态:正常状态下,“关注”工具是隐藏的。

浅谈Web设计中的上下文工具

邀请:鼠标悬停时显示关注工具。

浅谈Web设计中的上下文工具

需要注意的地方:

视觉干扰:基于悬停显示工具可以减少界面上的视觉干扰,可以将非主要操作先隐藏起来,而在需要时再显示。

易发现性:设计悬停即现工具时应该认真考虑的一个问题是易发现性。通过“还剩几天结束”的文字突出内容的稀缺性,借助内容吸引用户将鼠标移至相关区域并发现功能是一个不错的做法。

覆盖层中的上下文工具:

浅谈Web设计中的上下文工具

悬停与遮挡(反模式):如上图所示,基于悬停显示的覆盖层会遮住下面的信息,但知乎同时提供了两种悬停显示关注的工具。如果用户不需要了解圆桌的介绍和相关信息可以直接点击右边的关注;如果用户对于圆桌的内容感兴趣,那么基于悬停显示的内容不会对用户造成干扰,他们本身就想把注意力转移到覆盖层上面。

神秘的肉(反模式)用户必须通过鼠标悬停才能得知如何使用某个项。

激活:工具覆盖层应该即刻激活。工具是界面的扩展,任何延迟都会导致激活与操作之间的时间浪费。

三、开关显示工具(Toggle-Reveal Tools)

只在页面处于特定模式时显示上下文工具,适用于操作并不主要,同时又想减少视觉干扰的情形,在类别编辑上非常适合。

当然,应该尽量避免把界面置于特殊模式下。

四、级联递进工具(Multi-Level Tools)

可以利用级联递进工具逐步显示上下文工具。

级联递进工具的一个变体是Mutton:Menu + Button(菜单 + 按钮) = Mutton,如果需要在一个菜单中提供多项操作,而又需要将其中一项作为默认操作时,就可以使用Mutton。

简书可以自动保存用户上一次使用的字体大小,并将其作为默认项。

浅谈Web设计中的上下文工具

五、二级菜单(Secondary Menu)

在桌面应用程序中很早就开始以二级菜单的形式支持上下文工具了,但在Web上并不常见,因为这样做容易与浏览器菜单造成冲突,除非用户能够十分清楚界面中的对象,以及菜单的样式是否足以与浏览器菜单区分开。

二级菜单的一个优势是可以与某种选择模型结合使用,从而能够操作选择的一组项。其他的上下文工具比如实时可见工具、悬停即现工具、开关显示工具、级联递进工具都只能同时操作一项。

感谢阅读~

作者:符芳涛Ford

来源:简书

 

 

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

(0)
CatherineCatherine
上一篇 2017-06-04 12:13
下一篇 2017-06-04 14:24

相关推荐

  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20
  • 干货分享 | 交互领域不可不知的设计法则

    本文转载自“熊猫设计院(ID:MUXDesign)”,已获得作者授权,未经许可禁止转载。前言:交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用。01希克定律(Hick’s Law )简介希克定律指的是:一个人面临的选择...

    2018-04-08
  • 人鸡交互 VS 人机交互

    交互就是一名翻译官,一个机器和人类的翻译官。

    2017-05-06
  • iOS 10 交互设计指南

    几乎所有的iOS应用都由UIKit framework中定义的组件构成,了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中提供更好的帮助。UIKit提供的UI组件分为以下4种类型:栏包含了上下文信息来指引用户…

    2017-08-01
  • 如何从细节上真正节省用户的时间,从而带给用户更好的体验

    来源:优设网 作者:阿布编译 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,什么是…

    2014-09-21
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类 智能推荐大都基于海量数据的计算和处理,然而我们发现在海量数据上高效的运行协同过滤算法以及其他推荐策略这样高复杂的…

    2015-12-22
  • 设计思考:中西医结合,开出交互良方

    我们大都倾向于对观点进行主观表述,而不是对事实进行客观陈述,为了减少主客观的分歧,设计师应该利用好研究分析对交互工作的“润滑”作用。

    2017-04-30
  • 帮UX新人摸清用户体验设计各岗位的典型特征【UXRen译#172】

      作者:Christian Beck  |  翻译:小蟹,校审:Duke   当我面试刚从学校毕业的准设计师时,我总是问他们:“当你被指派到一个新的项目时,你希望做哪一部分的工作,哪一部分的工作又是你心里祈祷别人会做的?” 众所…

    交互专题 2017-08-07
  • 从谢尔丹认识交互设计

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。如同武侠世界里的隐居剑客,高手榜上虽没它的名字,但江湖中处处是它的传说。交互设计了解一下交互设计(英文Interaction Design, 缩写IXD),是设计系统动态、人机互动方式的领域,通俗来说就是“用户...

    2018-04-17
  • 浅析麦当劳玩具的微交互

    从系列感的玩具,到活动感的玩具,到具有交互感的玩具,麦当劳的每个玩具都带给很多小朋友不同的期待与欢乐。因此,本文作者希望设计也是如此,不断进步,不断创新,不断给人欢乐。

    2017-04-27