01

什么是模式

▼

今天我们的话题是“模式”以及它的经典应用案例批量操作。首先需要明确一点：和mode虽然都有“模式”二字，但是在界面设计中它们所指代的东西却不一样。前者就是我们一般所说的“带有黑色蒙版的弹窗或页面”，而后者则是指“同样的操作在不同情况下带来的效果不一样”，比如提供的各种工具就是模式切换的隐喻用语。

在 中，点击“套索工具”按住鼠标左键，可以在画布上选中一个范围，点击鼠标右键可以对该范围进行操作。点击“画笔工具”则会用画笔在画布上做出标记，虽然鼠标左键仍按住在画布上。这就是“同操作不同效果”的模式切换。

另外，界面设计中还有一个和“模式”类似的概念——“视图”。一般来说，同一个界面、同一个操作，不同的效果叫模式；同一组数据，不同的展示方式叫视图。这个我们下次再讲。

虽然模式这个概念在图形用户界面的发展中已经被各位交互/界面设计师充分讨论过，但它其实并不是人机交互的原生概念。我个人推测“模式”的出现恰好与非界面产品的设计密不可分。生活中很多产品出于安全、效率或成本的考虑，屏幕设计得非常小甚至没有屏幕，人机交互的方式也非常简单（通常是通过按钮），这就导致这些产品能够展示的信息非常有限。为了区分用户不同的任务/意图，用有限的按钮实现不同的功能，就采用了“模式”的设计方式。

例如很多多功能手表，除了显示当前时间外，还能当闹钟或计时器使用。为了在这么小的屏幕上实现这么多的功能，需要一个“模式”按钮来切换功能。切换模式后，点击调整时间按钮，可以实现选择闹钟时间/调整计时时长/调整当前时间等不同的效果。

除了上面提到的手表例子之外，“模式”在各种简单或复杂的民用/商用产品中也有广泛的应用。比如汽车的速度控制就是通过速度和档位的协调来完成的模式。飞机驾驶舱中也有“模式控制面板”，可以让飞行员在高度保持/垂直导航等模式之间进行切换，调整飞机的飞行高度/速度。总之，“模式”在产品设计的世界里应用的案例繁多而复杂。相较之下，界面交互中的“模式”就非常简洁易懂了。

02

界面设计中模式的兴衰

▼

在图形界面发展之初，“模式”这个概念就被带入了界面设计领域。或许并非出于产品设计的影响，当时的“模式”更倾向于用硬件按钮解决问题，而不是转向界面操作。比如我们上次谈到的 Star 设计了一个奇怪的“移动模式”。如果用户想将文件移动到另一个文件夹，需要做以下步骤：

现在回想起来，这种“模式”设计确实很违反直觉，而且效率低下，所以当时很多设计师也在思考界面设计是否真的需要“模式”。与屏幕有限、交互方式有限的产品设计不同，电脑有鼠标、有大屏幕，一方面可以让用户在同样的场景下做更多的事情，另一方面设计师可以通过拆分界面、增加功能入口让用户专注于当前任务，而不必采用模式。因此苹果在1992年发布的人机界面指南中，开始把“非模式化”作为苹果产品的一大卖点，用户在任何情况下都可以完成任何行为，而不必进入特殊的“模式”。比如上文我们提到的“移动”操作，在Mac中就变成了我们熟悉的长按拖拽，简单快捷。

但是“图案”就完全过时了，完全不适合界面设计吗？也不完全是。首先，在一些和实体产品相关的地方，图案还是会留下痕迹的。比如我们现在的电脑键盘上的Caps Lock键，也是“图案”设计。当用户按下这个键时，电脑就进入大写模式，键盘上打出的字都是大写的；再次按下这个键，就会退出这个模式。

此外，在界面设计领域，也有设计师对模式持有不同的态度。例如，撰写《可用性十项原则》的尼尔森在 1996 年就曾写过一篇文章，阐述了他对“模式”的不同看法。在他看来，“模式”的本义是“将用户的注意力集中起来，减少用户所能进行的操作，以便用户在当前特定场景中更快速地找到所需的操作和信息”，而模式思维其实在人们的日常生活中也是自然存在的。例如，一个人在厨房里做的事情和他在游泳池里做的事情肯定是不一样的。

这篇文章很值得一看：

尽管如此，尼尔森承认当时的“模式”有一个非常恼人的问题：模式之间的切换很麻烦，用户经常会忘记自己处于某个模式，因此可能会犯下对该模式无效的错误。因此为了解决这个问题，尼尔森认为最好使用一个弹簧模式（-）来代替普通模式。这种模式最常见的应用就是键盘上的按键：按下时，启用多选模式，可以点击多个文件。一旦松开，立即退出多选模式，这样用户就不会忘记自己处于某个模式。

03

批量操作模式

▼

虽然在界面设计中模式的存在感越来越弱，但是除了PS的“工具”之外，还是有两种很常见的模式设计：查看/编辑模式、批量操作模式。今天我们主要讲一下批量操作模式。

严格意义上来说，“批量操作”是同时对多个对象进行操作，实现方式可以有很多种，并不局限于“模式”，不过现在市面上比较常见的处理方式，多多少少都采用了模式的思想，所以我就把这两个东西放在一起说吧。

我举个例子：比如你是一家小海鲜店的老板，为了让店铺卖出更多的海鲜，你决定在抖音上为你的海鲜打广告。但做广告需要大量的反复试验，很难说哪个广告语或产品会受欢迎，所以你在抖音的广告系统上创建了 60 个新广告，每个广告的广告视频和标题都略有不同。就这样，你继续投入到最后受欢迎的广告中，而不用花钱去掉不受欢迎的广告。

但管理这么多广告确实很不方便，比如你做了一番调研，发现抖音的受众似乎更喜欢虾类广告，不喜欢螃蟹图片，转化数据也不好，所以你打算把20个螃蟹图片的广告全部关停，怎么办？

1.隐式模式

按照传统的模式思维，我们可以通过某种方式让用户进入多选模式，就像星星一样，在多选模式中用户可以进行一些特定的操作，比如批量删除。然后当批量模式开启后，就会出现多选模式所需的组件：多选框和多选操作栏。此时其他与多选模式无关的操作，比如“新广告”，都是灰色的，除非用户退出多选模式，否则无法点击。

相信很多同学立刻就能看出这个设计的问题：操作效率太低了。打开模式按钮之后，还需要进行多选操作，再选择对应的批量操作。其实，如果用户选择了多个，我们就可以预知到用户想要对这多个进行操作，所以没必要要求用户先打开一个批量模式开关。

因此为了解决这个问题，在保持表单复杂度可容忍的前提下，大部分平台都会把模式进入方式设计得更加隐性：只要用户选中多选框，就会进入多选模式——我把这种设计称为隐性模式。比如近期爆款的产品，就采用了这种模式设计。除了进入模式的方式不同，其他设计点和 60 年前的 Star 没太大区别。

同样是隐式模式，Mail 则更加精简，用户依然可以通过点击多选框进入多选模式，但只有清除所有多选状态的“刷新”操作被禁用，其他大部分操作依然可用，同时不再提供退出该模式的选项。

那是不是说隐式模式更好，模式按钮就不能用了呢？不是的，我们之前提到过，“批量操作模式”之所以可以隐式化，是因为当用户选择多个项目时，他们的意图已经很明确了。但有时候，我们无法明确地捕捉到用户的意图，所以用户必须手动开启该模式。

比如说，如果广告列表有优先级，那么广告在页面上的排名越高，他们能得到的用户预算就越多（我就说这么多，明白我的意思就好）。但是之前的广告表已经很复杂了，再插入一组排序组件会让整个页面变得更加复杂。那么这时候我们该怎么办呢？

此时我们的“排序功能”依然是使用模式来实现的，只不过需要用户先点击排序触发模式，虽然效率不如隐式模式，但却有效降低了页面复杂度，并且让新用户也能感知到这个功能的存在，保证了功能的可见性。

2. 模式

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

3. 不使用模式

尽管我们在本文中一直在讨论模式，但实际上批量操作可以在没有模式的情况下执行。不使用模式通常有两种情况：

首先，通过模式来隔离使用场景、隐藏部分功能的设计方式虽然保证了页面的简洁性，但也带来了另一个问题：可视性低。在进入批量操作模式之前，用户并不清楚自己可以进行哪些多选操作。

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

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

以上两种风格，将多项选择/批量操作直接放在了页面上，不再以模态框的方式呈现，因此当页面上按钮较多时，通常会将所有批量操作集中放到一个下拉菜单中。

第二，注意，我们上面说的批量操作都是比较简单的，比如“删除”、“下线”等都可以一步完成，所以用户主要的心理成本和操作成本都在多选操作上，也就是操作本身难度不大，但是需要操作的对象比较多。但有些批量操作非常复杂，耗时较长，所以通过在管理列表里增加一个模式来解决问题并不合理。

比如，如果我们的“广告”有一项新功能，允许用户创建新图片，然后将创建的图片批量应用到现有的广告中，那么我们要求用户先从广告列表中选择广告显然是不现实的。