4000字干货！聊聊交互设计模式与批量操作

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

什么是模式

好了闲话少说，今天咱们的主题是“模式”modes 与模式的经典应用案例批量操作。

往期回顾：

这 3 个连资深设计师都容易分不清的组件，一篇文章帮你彻底掌握！

问题起源这篇文章讨论的话题来自于我自己工作中一个长久存在的疑惑。

首先要说明一点：模态 modals 和模式 modes 尽管都有个“模”字，但在界面设计上指的是不一样的东西。前者是我们一般说的“带黑色遮罩的弹窗或者页面”，后者则指“同一个操作在不同的情况下，带来不同的效果”，比如 Photoshop 提供的各种工具就是模式切换的隐喻式说法。

在 photoshop 中，用户点击一下“套索工具”然后按住鼠标左键，就可以在画布上勾选一个范围，点击鼠标右键则可以对这个范围进行操作。而点击一下“画笔工具”，尽管同样是在画布上按住鼠标左键，效果则变成了使用笔刷在画布上画出痕迹，这就是“共用同一个操作但效果不同”的模式切换。

此外，界面设计中还有一个和“模式”有点像的概念“视图”view。通常来说，同一个界面与操作产生不同效果的称为模式；同一套数据展示方式有差异的称为视图。这个就下次再聊了。

尽管在图形化用户界面的发展中，模式这个概念曾经被各路交互/界面设计师充分讨论过，但实际上它并不是一个人机交互原生的概念，我个人推测“模式”的产生恰巧与非界面的产品设计有脱不开的关系。许多生活中的产品出于安全性、效率或者成本的考量会把屏幕设计的很小或者干脆没有屏幕，人和机器进行交互的方式也很简单（一般是通过按钮），这就导致这些产品能够展示的信息很有限。那么为了能够区隔用户的不同任务/意图，用有限的按钮实现不同功能，就采用了“模式”这种设计方式。

比如很多多功能的手表既可以展示当前时间也可以拿来当闹钟或者计时器，那么为了能在这么小一点的屏幕上实现这么多的功能，就需要一个“模式”按钮来进行功能切换。切换模式后点击调整时间按钮，则可以达到选择闹钟时间/调整计时时长/调整当前时间等不同的效果。

除了上述手表的例子以外，“模式”还广泛存在在各种简单或复杂的民用/商用产品中，比如汽车的速度控制，就是一种速度与档位协同完成的模式；而飞机的驾驶舱里也有一个“模式操纵面板”，能让飞机驾驶员在高度保持/垂直导航等模式中切换，对飞机的飞行高度/速度等作出调整。总之在产品设计的世界中“模式”的应用案例又多又复杂，相比之下界面交互中的“模式”就非常精简好理解了。

模式在界面设计的兴衰

在图形化界面发展之初“模式”这个概念就被带入了界面设计领域。也许是没有跳脱产品设计的影响，此时的“模式”倾向于用硬件按钮来解决问题，而没有完全转向界面操作。比如我们上次讲过的 Xerox Star 就设计了一个奇怪的“移动模式”，假如用户想要移动一个文件到另一个文件夹，那么他需要做以下几步：

• 先通过鼠标选中这个文件
• 然后按一下键盘上的“移动”按钮，让计算机进入“移动模式”，此时屏幕上会出现“移动模式”的字样，用户不可以做任何与移动无关的操作，除非退出该模式
• 此时他再用鼠标点击一下目标文件夹，移动命令就会被执行

现在来看这个“模式”设计真是既反直觉效率又低下，因当时此很多设计师也在思考界面设计是否真的需要“模式”这个东西。和屏幕有限、交互方式有限的产品设计不同，电脑有鼠标有大屏幕，一方面用户在同一个场景下可做的事情大大增多，另一方面设计师也可以通过拆分界面、增加功能入口的方式来让用户聚焦当前任务而没必要采用模式。因此苹果在 1992 年发布的 Macintosh 人机界面指南中开始将“无模式”modelessness 作为苹果产品的一大卖点。用户能在任何情况下完成任何行为，而不必要进入某个特殊的“模式”。比如我们上面提到的“移动”操作，在 Mac 中就变成了我们熟悉的按下拖动，简单快捷。

然而“模式”是不是完全过时了、完全不适合界面设计？也不尽然。首先，在一些和实物产品相关的地方，模式还是留下了它的痕迹。比如我们现在电脑键盘上的大小写锁定按钮也是个“模式”设计。当用户按下这个键的时候，电脑进入大写模式，键盘打出来的字都是大写的；再次按下这个按钮则退出此模式。

另外在界面设计领域也有设计师对模式持不同态度，比如写可用性十原则的那个尼尔森，就在 1996 年写了一篇文章谈到他对“模式”这个东西不一样的观点。在他看来，“模式”这个东西的本意是“聚焦用户的注意力、减少用户可以做的操作，以便于用户能更快捷地找到在当下具体场景中所需的操作与信息”，并且模式思维其实天然存在在人的日常生活中，比如一个人在厨房里做的事肯定和在游泳池里做的事不一样。

这篇文章有兴趣可见： https://www.nngroup.com/articles/anti-mac-interface/

尽管如此，尼尔森也承认当时的“模式”具有一个很讨人厌的问题：模式的切换很麻烦，用户也总是忘记自己身处某个模式下，因此可能会做出此模式无效的错误操作。所以为了解决这个问题，尼尔森觉得采用弹簧模式（ spring-loaded modes ）作为普通模式的替代品更好。这种模式最广泛的应用就是键盘上的 shift 键：按下 shift 时多选模式生效，此时可以点选多个文件，一旦松开 shift 则马上退出多选模式，这样一来用户就不会忘记自己身处某个模式下了。

作为模式的批量操作

尽管模式在界面设计中存在感越来越弱，但除了 PS“工具”之外，仍然有两个非常广泛存在的模式设计：查看/编辑模式、批量操作模式。今天咱们会主要聊批量操作模式。

严格来讲“批量操作”即同时对多个对象进行操作，它可用多种方式实现而并不局限于“模式”，但是现在市面上比较通行的处理办法或多或少还是采用了模式的思路，因此我把这两个东西放在一起说。

我这里举个例子：比如说你是一个卖海鲜的小店主，为了让自己店里的海鲜卖的好点，你决定上抖音给你的海鲜打广告。但打广告这个东西得多试，哪条广告语、哪个产品能火很难说，所以你在抖音的广告系统上新建了 60 条广告，每条用的广告视频和标题都有些差异，这样最后哪条广告火你就继续投哪条，不火的就下掉不烧钱了。

但是这么多的广告管理起来很不方便。比如经过你的一番研究，发现抖音的受众好像都比较喜欢大虾的广告，对螃蟹图片不怎么感冒，转化数据很难看。所以你打算把所有带了螃蟹图片的 20 条广告都关闭投放。那我们能怎么做呢？

1. 隐式模式

按照传统的模式思维，我们可以像 Xerox Star 一样，通过某种办法让用户进入多选模式，在这个模式下用户可以进行一些特定的操作，比如批量删除。然后在批量模式打开的状态下，出现多选模式需要用到的组件：多选框与多选操作栏。此时其他和多选模式无关的操作，比如“新建广告”则被置灰，除非用户退出模式，否则不可点击。

这样设计相信很多同学能马上看出问题：操作效率太低了。打开模式按钮以后，还需要进行多选操作，然后选择对应批量操作。其实假如用户选择了多个项，我们就可以预判这个用户是想要对这多个项进行操作，没必要要求用户先打开一个批量模式开关

因此，为了解决这个问题，在保持表格复杂性可以容忍的条件下，大多数平台会将模式的进入方式设计得比较含蓄：只要用户选中了多选框，就进入多选模式——我把这种设计叫做隐式模式。比如最近比较火的产品cubox，就采用了这样的模式设计。除去进入模式的方式不同，其他的设计点和60年前的Xerox Star差异不大。

同样的隐式模式，google mail 就做得更加精简一些。用户仍然通过点击多选框进入多选模式，但是只禁用了“刷新”这个会清除所有多选状态的操作，其他的大部分操作仍然可用。同时也不再提供退出模式的选择。

那是不是隐式模式相比起来就更好，模式按钮就不能再用了呢？也不是。咱们之前提过，“批量操作模式”之所以可以做成隐式的，是因为当用户选择多个项时，其意图就已经很明确了。但某些时候，我们无法清晰捕捉到用户的意图，所以还得用户自己手动把模式打开。

比如假如这个广告投放的列表是有优先级排序的，在页面中排序越高的广告就能得到越多的用户预算（这句话我瞎说的，知道什么意思就行）。但之前的广告表格已经非常复杂了，再插入一套排序组件会让整个页面的复杂程度再上一个台阶，那此时应该怎么办？

此时我们的“排序功能”仍然是用模式实现的，但要求用户先点击一下排序触发模式。这样做虽然操作效率上不如隐式模式，但有效降低了页面复杂度，并且也能让新用户意识到这个功能的存在，保证功能的可见性。

2. 弹簧模式

我们上面介绍过了，电脑的设计本身自带了一个弹簧模式设计：shift 键。按下 shift 键之后用户可以选中列表中的一个范围，而不需要一个个地去点选。因此我们在做表格批量操作的时候也可以考虑支持这个键控，方便有批量操作诉求的用户批量进行选中。

3. 不使用模式

虽然我们全篇都在讲模式，但实际上批量操作不用模式也能做。不用模式的时候一般有两种情况：

第一，尽管使用模式区隔使用场景、隐藏一部分功能的设计方式保证了页面的简洁，但也带来了另一个问题：可见性低。在没有进入批量操作模式之前，用户不清楚自己能做什么多选操作。

在咱们抖音投广告的案例中只有“删除”、“下线”两个操作，所以这个问题体现的不太明显。但有些场景下，列表中的项有非常多的属性，所以可能可做的批量操作很多。比如用户可能会需要批量改广告标题、改出价、改投放时段等等。因此用户思考的顺序是：我需要做某批量操作->我观察到系统提供了这个操作功能->我开始进行这个操作。

因此，对于一些注重操作效率、用户专业程度高的系统来说，为了能够让用户能够在进入本页面时就能进行所有操作，愿意牺牲一部分页面简洁性去换取更高的操作效率。这样的系统往往选择直接将批量相关的操作直接暴露在页面中，因此对于设计师的排版技能有更高的要求。

在上面两种样式中，多选/批量操作都直接放在页面中，不再使用模式呈现。因此当页面上按钮比较多的时候，一般会将所有批量操作收起来做成下拉菜单。

第二，注意到我们上面所有说的批量操作都比较简单，比如“删除”、“下线”一步即可完成，因此用户主要的心理成本和操作成本都压在多选操作上，也就是操作本身不难，只是操作的对象很多。但有些批量操作本身非常复杂、需要花费很多时间，那么再通过为一个管理列表添加模式来解决问题，就不太合理。

比如假如我们的“抖音广告”新出了一个功能，允许用户自己创作新的图片，然后把创作出来的图片批量应用在已经有的广告上。此时显然我们再要求用户先从广告列表中选择广告，就不现实了。

欢迎关注作者微信公众号：「白话说交互」