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

人人都是产品经理 • 9年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

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

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

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

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

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

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

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

就是说：

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

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

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

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

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

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

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

5）二级菜单： 显示二级菜单（一般通过右击对象触发）。

一、实时可见工具（Always-Visible Tools）

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

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

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

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

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

需要注意的地方：

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

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

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

二、悬停即现工具（Hover-Reveal Tools）

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

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

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

需要注意的地方：

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

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

覆盖层中的上下文工具：

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

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

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