我们用的大多数产品都是把功能与内容分开进行处理，例如：wps的工具栏，当我们要对内容进行操作时，需要到顶部选择一个工具。

那有没有一种可能改变这种交互，让操作路线更短。

例如：飞书文档采用了“无顶部工具栏”，内容就是界面，无须划定功能区，每个对象都可以直接操作。

最近使用钉钉时，发现钉钉也支持“无顶部工具栏”这种模式。之前钉钉只有顶部工具栏一种方式。

但我并不是说“无顶部工具栏”比“有顶部工具栏”好用，这个和用户定位有关，这里只是举例说明两种交互模式。

菲茨定律

菲茨定律是一个人机工程学原理，指目标的大小和距离都会影响到手指移动到目标的速度和精度，即目标越大、距离越近，手指移动的速度就越快，精度就越高。

换言之，如果眼前就有一个工具，而且相对目标足够大，那么它就可以方便用户的操作。

我们可以利用这个原理把工具放在上下文中，减少用户的操作步骤。

上下文工具

为了简单，我们可以把功能集中到一起。但是，这样做就违反了费茨定律，因为使用起来会比较麻烦，页面看起来也会感觉拥挤。

下面我们介绍4种可以简化交互的方法：

实时可见工具

把上下文工具直接放在内容中

悬停即现工具

在鼠标悬停时显示上下文工具

开关显示工具

打开/关闭页面中上下文工具的总开关

级联递进工具

基于用户操作渐进显示工具。

1、实时可见工具

如果某个操作非常重要，我们应该将其放在界面中，并保持实时可见，以确保用户可以随时访问该操作，提高用户体验和效率。

例如：知乎在每篇文章的下方都有一个“赞同”按钮，相对其他按钮要明显很多。

注意事项

明确邀请操作

为什么不先把这些工具隐藏起来，等鼠标悬停于文章上时再显示它们呢?

因为“赞同”等工具是知乎运营的核心理念，始终显示相关工具，可以明确邀请操作。

相对重要性

操作的相对重要性，可以作为处理这个问题的依据。 “赞同”和“喜欢”这两个操作的重要性一样吗? 对于知乎而言，答案是不一样。 “赞同”的级别更高，所以在按钮样式，位置上都强烈地反映出此操作的重要程度。

易发现性

易发现性是选择实时可见工具的一个主要性能指标。但从另一个方面来看，这也会导致页面看起来比较混乱。

案例1：

操作项在列表或表格中，应该如何处理呢？

下图是钉钉成员管理界面，操作项采用了“更多”来展现，通过鼠标触发后显示具体操作项。

但是在应用管理中钉钉并没有采用上面这种形式，而且用了“易发现”原则，操作项全部展现出来。

所以我们在使用原则时一定要结合业务特点，不能完全照搬其它产品。

案例2:

QQ邮箱在邮件列表中提供了一个实时可见工具（标记星标）。

单击一下星标就可以将邮件标记为重要。未加星标的状态为浅灰色，从而把对列表的干扰降至最低。

注意：有时候，视觉干扰必须为易发现性让路。

2、 悬停即现工具

当某个操作不是很重要或者使用“实时可见工具”会影响用户的阅读时，我们可以采用悬停即现工具，以便用户更加方便地进行操作。

例如：微信公众号内容操作，鼠标移入列表才会显示更多操作。

注意事项

视觉干扰

基于悬停显示工具可以减少界面上的视觉干扰。特别是页面信息很重要，空间有限，而工具操作又不是很频繁的场景下。

易发现性

设计悬停即现工具时，需要考虑用户怎么发现。

提示：尽量使用熟悉的方式帮助用户发现隐藏的工具。(例如：超链接意味着执行操作，下拉箭头或...表示还有更多功能)。

3、开关显示工具

如果某些操作只需要在特定模式下显示，我们可以通过开关来实现，以便在需要时打开或关闭这些操作。这种方法可以减少用户界面的复杂性，提高用户体验，并使用户更容易找到他们需要的东西。

例如：飞书应用管理中，利用“修改开关”控制应用审核规则项

注意事项

1、尽量保证打开和关闭编辑模式的对称性

2、切换显示与编辑时尽量平滑稳定

案例1：语雀“小记”，用户点击“右侧编辑图标”后，列表中“文本”变成“输入框”，开启编辑功能。

4、级联递进工具

用户可以通过悬停或点击主菜单项来展开子菜单，进一步选择所需的选项或命令。级联递进工具通常用于复杂的应用程序和操作系统界面，以提供更好的组织和导航，同时减少用户界面的复杂性。

例如：语雀知识卡片，就采用了级联递进工具

注意事项

在用户界面设计中，我们应尽可能避免使用级联递进工具。因为用户需要执行多个鼠标操作才能使用下一级菜单，这会让用户感到不舒服和疲惫，从而影响用户体验。

如果必须使用级联递进工具，我们应该尝试尽可能减少级联菜单的数量和级联深度，以使用户能够更轻松地找到所需的选项或命令。