浅谈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

相关推荐

  • 你真的了解交互设计吗?

    回顾2017年,我们发现交互设计受到越来越多学生的青睐,这个新型专业在国内的认知度与外国并不完全同步。为了给更多学生带来交互信息的普及,设想决定带大家预测一下在2018年,信息体验设计会如何发展、还有哪些值得我们关注的趋势。更简单的导航方式导航体验是2017年的热点话题之一。为了设计出顺畅的用户体验,导航扮演的角色至关重要。线性导航Linear Navigation为了简化导航体验,很多app和网站致力于创造线性的导航体验(即分布式),...

    2018-03-19
  • 译文 | iOS 10 人机界面设计指南 (完结)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?本文是系列文章的完结篇,enjoy~Note
    模板图片(template image)会丢弃图片本身的色彩,而采用图片视图使用的色调。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。TIP  对于多行或是多样式的文本输入,请使用文本视图。请参阅Text Views。

    2017-05-02
  • 十二条动效体验原则

    如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

    2017-04-28
  • 用户体验之 iPhone X

    Hello,everybody。今天给大家带来一篇关于iPhone X的用户实际测评。虽然iPhone X已经在国内上市有一段时间了,但是因为其价格也是让许多人叹为观止,今天小编在得到以为苹果手机顾客的同意后将其用户体验整合以后推送给大家,希望大家会满意。好,话不多说,我们马上开始。首先小编先来介绍一下iPhone X的优点吧。iPhone X 首次在手机行业中采用异形全面屏,相对于之前的iPhone,手握尺寸更小,首次采用OLED现实...

    2018-04-13
  • 案例:交互设计七大定律分享

    一费茨定律(Fitts' Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是1954年;该定律被用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(...

    2018-02-28
  • [译]可用性之外:使用劝导式模式设计(下)

    上篇文章为:[译]可用性之外:使用劝导式模式设计(上)用户注册了你的产品之后,是时候给他们一个良好的第一手经验了。你的目标是让用户掌握你产品能提供的所有功能。让我们来看看你能做些什么来使用户体验到产品的真正价值。

    2017-05-27
  • 聊天缩略图背后的故事:你不曾注意的那些细节

    作者:银光   这里我们主要讨论聊天列表中展示的缩略图,缩略图通常是将图片内容进行一定的缩小展现,或裁剪展现,主要有两个目的,一是提供一定的预览功能,二是节省屏幕展示空间、节省流量。 用户发送的图片长短…

    交互专题 2017-08-07
  • iOS和Android规范解析——确认弹框、全屏弹框和模态视图

    今天介绍三个控件,前两个是Material Design(简称MD,下同)规范中的确认弹框(Confirmation Dialog)和全屏弹框(Full-screen Dialog),后一个是iOS规范中的模态视图(Modal View)。下面先说MD中的两个。

    2017-05-01
  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 【交互设计】入门交互设计需要注意什么

    作者:Mufly 最近一直在想,交互设计的核心是什么?因为身边不少设计师对交互设计有也兴趣,常常被问到怎么学呢?交互设计要注意什么?对于入行不久的我,如何回答这类问题成了难点,因为我怕回答得不好,误人子弟…

    交互设计 2015-07-20