我们用的大多数产品都是把功能与内容分开进行处理。

例如：WPS，当我们要对内容进行操作时，需要到顶部选择一个工具。

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

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

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

之前钉钉只有“顶部工具栏”一种方式。

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

菲茨定律

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

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

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

上下文工具

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

我们可以利用以下4种模式来优化：

实时可见工具

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

悬停即现工具

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

开关显示工具

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

级联递进工具

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

1、实时可见工具

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

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

注意事项

明确邀请操作

为什么不先把这些工具隐藏起来，等鼠标悬停于文章上时再显示它们呢? 因为“赞同”等工具是知乎运营的核心理念，始终显示相关工具，可以明确邀请操作。

相对重要性

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

易发现性

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

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

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

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

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

案例2:

QQ邮箱在每条邮件最后面提供了一个实时可见工具（收藏功能）。

单击一下星标就可以将邮件标记为重要。未加星标的状态被处理成浅颜色和低对比度从而把对列表的干扰降至最低。

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

2、 悬停即现工具

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

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

注意事项

视觉干扰

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

易发现性

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

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

3、开关显示工具

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

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

注意事项

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

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

案例1：

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

4、级联递进工具

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

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

注意事项

在用户界面设计中，我们应尽可能避免使用级联递进工具。因为用户需要执行多个鼠标操作才能使用下一级菜单，这会让用户感到不舒服和疲惫，从而影响用户体验。 如果必须使用级联递进工具，我们应该尝试尽可能减少级联菜单的数量和级联深度，以使用户能够更轻松地找到所需的选项或命令。

谢谢大家观看！