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

相关推荐

  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01
  • Principle:交互动画实例

    Principle是一款交互原型设计软件,轻松让你的想法变成现实,支持将交互动画转换成视频或者GIF,分享给别人。 你的动画交互想法,比如设计更好的移动APP交互效果成为现实,用Principle轻松帮你实现。Principle的原…

    2016-01-28
  • UI设计师工作必备的七个设计神器

    今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐 ,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧。

    2017-05-31
  • 【交互设计方案】记分对比法运用

    交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场…

    2015-10-09
  • 新手入门做交互设计的那些事儿

    数十万互联网从业者的共同关注! 作者:panda,交互设计师个人微信号:D1173740249作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质…

    2017-08-04
  • Think in ID 前言

    前言   交互设计师们总觉得,可以用的工具特别少。我们国内目前流行的交互设计工具也非常多,各有各自用着顺手的工具,这些年我见过不少各种各样的工具,例如说:Axure、手绘(姑且也算是工具)、Pencil、Visi…

    交互设计 2014-09-17
  • 译文|在设计项目中,如何合理地使用色彩叠加效果

    色彩几乎是所有设计中都至关重要的组成部分,无论是明亮大胆的配色方案,还是简约的黑白色调,你的用色将会直接影响整个设计的实际效果。

    2017-05-17
  • ✪ 新书 |《交互设计那些事儿》——关于交互设计,你需要知道都在这里!

    一部窥探交互设计师成长之路的实用指南!传授高效、靠谱的交互设计学习方法!IAMUE网站创始人倾力之作!

    2016-06-06
  • 关注IAMUE官方微信送《Material design中文指导手册》

    Google 的Material design 设计规范在安卓新一代系统版本大放异彩,对于新手学习这个设计规范而言不是母语对我们不太有利。所以很多童鞋凑到一起组织翻译了一份中文指导手册,需求的同学可以免费获取   获取方…

    2015-07-27
  • 雪糕游戏(南京上海)聘:运营/商务/主策/主美/原画/程序等

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)公司简介:南京雪糕网络科技有限公司(简称雪糕游戏)是一家集研发、运营、发行为一体的新锐游戏公司。自2015年成立至今,自主研发了《全民神仙》、《行侠仗义五千年》、《童话大乱斗》、《西游记口袋版》等产品;IOS联运了涵盖三国、武侠、魔幻、神话等题材产品,游戏多次在App Store上榜,凭借精准的IOS流量整合能力、优秀的产品运营能力,雪糕游戏IOS联运产品月收入稳定在千万级水平,也为...

    2018-04-08