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

相关推荐

  • 如何运用“交互式电子白板”,凸显英语课堂教学的“交互性”?

    今天小编带大家认识什么是交互式电子白板?以及它在教学中的应用。让我们一起来了解一下吧。 交互式电子白板整合了普通黑板这和现代多媒体教学的优势。随着社会科技的发展,多媒体技术早已进入了课堂,但传统教学中…

    2015-04-15
  • Web产品的交互说明文档应该怎么写?

    本文是作者的一篇随笔,适合交互设计师阅读,希望能给正在学习交互的朋友一些帮助。也希望朋友们,可以提出更多很好的建议。

    2017-05-23
  • 一名交互设计师的日常思考方式

    如果有一天,当你发现自己“较真又矫情,苛求又世故,倔强还言辞凿凿”,别否定自己,也许你已经开始有点交互设计师的意思了。

    2017-05-05
  • 提高移动端表单可用性的7个设计原则

    用户在填写表格的时候可能会犹豫不决,所以你应该让这个过程变得尽可能容易,这篇文章中的7个设计原则可以显著提高表格的可用性。

    2017-05-18
  • 面试时,如何阐释设计思路?

    这几天有一些同学问我关于面试的问题,其实我对于整个面试的过程还没怎么总结过,但是对于如何阐述自己的设计思路倒是有一套方法,今天分享给大家。由于信息安全问题,我将底部的信息主架构进行了隐藏和改变,大家主要看整个设计思路的阐述,不要纠结细节。

    2017-05-07
  • 不可思议!VR虚拟现实的第一个盈利领域竟是A 片

    [alert_info] 据预测,虚拟现实色情产业到 2025 年将达到 10 亿美元。去买个虚拟现实头盔来看黄片吧。 网友评论: 太污了 我没法看下去了…… [/alert_info] 现在的虚拟现实产业就像打了鸡血一样。当你带上虚拟现实头…

    2016-01-24
  • 《交互设计专题二》——华南理工大学设计学院本科教学汇报展 • 第二回

    《交互设计专题二》《交互设计专题二》课程针对智能化产品设计领域,鼓励设计背景的学生学习基本的软硬件技术,发掘产品需求,提出设计概念,开展设计研究,并亲自动手完成功能样机。经过5周的课程,7组共27名学生,完成了7个不同主题的设计和初步的功能样机实现。《交互设计专题二》只是信息与交互设计实验班的初步尝试,在国内也鲜有既有模式可供借鉴,课程内容、教学方式、设计展开过程、样机实现以及最后的课程设计汇报,都有不成熟的地方。因此,诚邀大家前来参观...

    2018-02-21
  • 超实用!聊聊标签式导航的设计思路(附设计师做笔记方法)

    现在文章基本上都不深入,只是点到某个知识,跟大家说个理论的东西,然后罗列出所有导航的形式。读者看了之后跟没看是一样的,遇到问题还是没法解决,只知道有这类导航存在而已。今天这篇详细地讲了关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。

    2017-05-21
  • 蘑菇街App改版设计总结

    新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

    2017-05-12
  • HOW TO—撰写可用性测试报告

    在报告可用性测试结果时,首要关注的应当是本次测试的发现与改进建议,并且将测试的发现与建议按照严重等级划分优先级。其次,还应当包括测试计划和测试执行过程,当然不用面面俱到,但是加入部分细节内容可以帮助读者了解此次测试所使用的方法,方便其评判该报告的可信度。在报告中,尽量保持段落简短,多使用图表、短视频等方式来描述。

    2017-05-28