11.模态

整个产品的模态

PC电脑版的Photoshop，正常的状态时，“文件-打开…”，会打开一个浏览选择文件的窗口：
此时，可操作的只是这个对话窗口，原本整个Photoshop打开了多张图片，都不能操作了，左侧工具栏里也不能点选了，其它所有的全都不能用了，只有这窗口里的东西可以操作。
此时，称这个软件进入了一种模态。
特定的一个状态，只能做对应的一部分操作，这种状态被称为：模态（Modal）。
对应模态，我们称平常正常的状态为：常态。
这个窗口被称为：模态窗口。
整个软件出现模态，通常都是以这种模态窗口的形式出现。
抽象一下：模态窗口里，可能是显示一些信息，也可能是提供一些操作。
模态窗口势必要能退出。有时，用“关闭”按钮。有时，模态窗口里是表单（Form），需要用户操作后“提交”表单，比如，上面的这个，选中某个文件，然后提交。这时，用“取消”按钮，不提交表单且退出。
与模态窗口对应的，是非模态窗口，比如：右侧这个窗口，并没把整个软件锁死，此时，左侧的工具栏、顶部的那项设置项、中间的图片，都可以操作。这种窗口叫：非模态窗口。

再来看手机上的产品：刚进门就弹出的广告，是模态窗口，和Photoshop中打开的对话窗口类似，此时只能操作这个广告，点击进入，或关闭，之后才能正常使用这个App。
对于手机操作系统这个软件：低电量提示窗口是模态的。此时整个系统其它地方都不能操作了，只能先处理这个窗口。
这顶部收到的新消息提示，是非模态的，此时仍旧可以左右滚动屏幕，可以点击桌面上的App图标。

整个产品的模态不受欢迎

锁死整个产品的模态窗口，对用户不友好，用户必须先处理这个窗口，然后才能回到正常状态。所以总说“要尽量避免模态”。
假设，我走进路边的一家水果店，刚进门，服务员就举着一个“新品特惠”的介绍单迎上来，抓住我，要我必须做判断：对这个特惠有兴趣？还是没兴趣？不做出判断，不可以在店里逛。这显然是无法接受的。
数字产品里，却经常这么做，比如前面看到的“刚进门的广告”。
现实中的一家商店，有什么事儿是值得把顾客就地按住不许动？商店火警？或是突然停电？还有什么事儿？很少吧。
数字产品里有什么事儿是值得这样的？应该也很少才对。以手机操作系统这个产品来说，手机电量低的提示可能算是一个。不管用户现在是在沉浸的看电影，还是在激烈的玩游戏，电量低，要关机了，这个模态窗口的优先级高于一切，甚至是按home键也没用，必须先处理这个窗口。这还是值得打断用户的。这有点儿类似真实商店中突发火警警报。
在手机操作系统里，还有哪些应该是整个系统级？似乎不多，我一下子也没想到什么。
初次打开App时，请求通知的授权，请求使用地理位置授权，这些模态的弹出窗口，其实应该只是App内的模态，并不是整个iOS系统的模态。
操作系统的模态不该太多，一个App作为一个产品，其中的模态也应该很少才对，可实际上却是挺多的，除了态度上的不尊重用户，轻率的就弹窗广告不谈，模态的出现还有个技术性的原因：
对象的模态被升级为了整个产品的模态。

对象的模态

Mac电脑上的软件Pages（相当于WIN里的Word），和Word一样，可以同时打开多个文档。这一个个文档就是这个产品中一个个内容对象。要打印当前这份文档，打开了打印窗口，这是个模态窗口，此时不能再修改文档内容了。请注意，是这份文档进入了打印模态，而不是整个Pages软件都模态了。
此时，进入Pages浏览文档的界面：这个视图展示出了目前所有打开了的文档，还有最近关闭的文档，供用户选取。
左上角的那个就是当前要打印的“文档A”，这份文档上贴着打印对话窗口，而其它文档上并没有。我们试一下，点击它右边的“文档B”：与缩略图上看到的一样，“文档B”并没有打印对话窗口。
再切换回之前的“文档A”，仍旧是刚才那样，还贴着打印对话窗口。
Pages呈现出了单个内容对象的模态。
抽象一下：产品内有多个内容对象，其中某一个进入特定模态，但并不影响其它对象，整个产品并不模态，屏幕框框并没被锁定，用户仍旧可以在产品中游走，访问其它内容对象。

OS备忘录App。
中图，备忘录的列表中，删除某条消息，左滑，只是这条消息进入了这种模态。这是模态，用户此时并不能点击这篇备忘录进入详情，只能选择这三个操作，或点击这项本身，让它恢复常态。此时是对象的模态，整个产品并没有进入模态。试验一下：点左上角的“返回”按钮，回到文件夹列表（左图），再进入中图，三个彩色按钮仍旧在。主导航也仍旧可以点击，列表仍旧可以滚动，点击其它行仍旧可以进入…
且慢~ 点其它行应该是可以进入详情，再回来，三个彩色按钮还在。不过，实际情况是：此时点击其它行，第一行恢复到了常态。要进入第二项，还得再点击一次。这里还稍差了一点点，产品中的其它对象还是受到了第一项模态的影响。
这备忘录还是试图要做到单个对象的模态，不要做成整个App的模态，只是没完全做到位。我们来看一个做到位的。微信里，滑动其中一个对话消息，这一项进入模态。此时，点击“Tower”那行，动画效果是：有删除按钮的那行恢复常态，然后进入“Tower”那行的详情。动画过程是稍有点儿长，但实现的功能更对了。有删除按钮那行特殊的模态，并没阻止点击进入其它项。
只是那一个对象进入到模态，这种模态里只是提供了三个操作按钮，并且没有提供退出模态的按钮。进入这个模态是从右向左滑动，那么，怎么退出呢？相信用户能猜得到，从左向右滑动就行了，实际上，点击这个对象也可以。

对象的模态->整个软件的模态

与Pages对比，再来试试Mac上的Word，也同样做上面的操作：
先在“文档A”中打开打印窗口。
进入浏览文档的界面：此时两个文档上都看不到打印的对话窗口。
点击展开“文档B”：“文档B”前面有打印窗口挡着，可是打印窗口中显示的是要打印“文档A”。当然是要打印“文档A”，原本就是要这样，可是，现在在看“文档B”，这打印窗口，只会增加误会。
Word把打印模态窗口处理为整个Word软件的模态，而不是“文档A”的模态。

再来看手机上的App。
要避免误删，常见的方式是“二次确认”，“二次确认”又经常使用整个产品的模态窗口，比如这样：微博里，要删除我自己的某一篇博文，该篇右上角的箭头按钮里有“删除”按钮，弹出二次确认模态窗口，整个App进入模态。
这列表中有多条博文，现在只是要删除其中一条，对比上面微信的方式，这里只需要让这一条博文进入模态就可以了，使用整个软件模态，并不必要。
iOS备忘录、微信的方式，向左滑出删除按钮，用这种方式避免误删除操作。这是对象的模态，避免了弹出窗口这种整个产品的模态。

这是iOS中的“备忘录App”，某一篇的详情。
点击右上角的“分享”按钮可以看到，对这篇的“分享”操作其实有很多种。这么多操作没法在正常状态都展示出来，于是合并，收起来，需要时，以模态一起召唤出来。
这也做成了整个软件的模态，连左上角的“<”按钮都不能用了。这其实和前面一个案例是一回事儿，这个App里有多篇备忘录，这只是其中一篇，是这篇要分享，它可以进入模态，但不必要整个软件都模态。只不过当前这篇备忘录充满了整个屏幕，做成整个App的模态似乎也不太违和。
手机上，对象的模态不必要的升级为系统的模态，有个借口：手机屏幕小，用户反复切换不同的对象并不方便，非要当前对象保持此模态时，去访问其它对象，然后再回来，这样的情况较少发生，不如索性锁死屏幕，用系统的模态，让用户先处理完当前这个对象。
我觉得，这说法可能有一点点道理吧，一点点。

一个产品像是众多内容对象贴在墙上，用户拿着屏幕框框去浏览。某个对象进入了模态，如同把那个对象翻了面，看看背面的设置，用户仍旧可以拿着框框继续浏览别的，但如果是整个产品进入了模态，就是旁边窜出一位大汉，按住屏幕框框，不许移动了。
用户在产品中可以对内容对象做各种操作，帮用户实现这些操作的时候，如果可以只用对象的模态，尽量不要升级为整个产品的模态。当然，如果连对象的模态也能避免，多数时候是更好的。

这里对模态的分析出发点是以产品设计的角度，用户对模态是怎样的理解，怎样的感受，并不是技术实现的角度。
模态原本就是一种技术实现手段，在产品中出现的多了，又各有花样儿，对产品设计影响较大，所以，单独拿出来分析下，看看从“面向用户友好”的角度，模态应该以怎样的方式示人。
如果从技术实现的角度来看，上面的这些案例，又会另有解释，比如，Word是因为没有使用Mac OS提供的技术手段；iOS备忘录的删除没能一步到位，是因为iOS提供的标准方案使然…
我相信，这些局限会越来越不成问题，上面提到的那些更好的方式，即使以现在的技术局限，也都能做到，只是更麻烦一些。
对于产品的设计者，我想，我们更应该关心的是，把模态理解的更透彻，知道怎样是好的设计。

详情是不是模态？

左图，微博一篇博文的详情，此时也是只能操作这篇博文的几个按钮，如果把左上角的“<”等同于“X”，看上去就和右图这个“分享模态”很接近了吧？这博文详情这是不是模态？
当然不是。
博文详情是在众多博文中，把这一篇拿近了仔细看，整个微博App并没有被锁死。只是手机屏幕小，详情充满了整个屏幕，要去看其它内容，只能是点左上角的“<”。这是因为屏幕小而使得产品内的导航不那么方便了。如同是屏幕太贴近墙上的这篇博文了，如果离的稍远一点儿，就能更方便的跳转去看其它的了。 如果设计者愿意，完全可以增加更多的导航方式，让用户更方便的在整个产品里遨游。比如，Twitter的设计者就愿意：Twitter的详情仍旧保留了主导航，用户可以随时通过主导航去其它地方，不必点左上角的“<”。如果是模态，就做不到这样了。

非模态

要向用户提供内容、操作，很容易就使用了模态的方式，要避免，除了上面这种“不升级模态”，减少模态还有一个办法：以“非模态”替代“模态”。
左图这种非模态的消息，在前面见到过了。
用户拿着屏幕框框在浏览墙上贴着的各种内容对象，这时候，旁边走过来一位助理，把一个小纸条递到用户眼前，递到屏幕框框里，只占据屏幕一点点面积，还会随着屏幕移动，如果用户无视，过一会儿就自己知趣儿的离开。
除非是非常严重的事儿，比如：这面墙要塌了，助理才会冲到用户面前，挡住所有的内容，按住用户不许动，要用户先应对这个严重的事儿。
这个悬浮的提示，向上滑，可以把它丢出屏幕。在PC电脑上，触屏滑动操作并不普及，就会给这条消息加个“X”按钮，那就和前面看到的Photoshop中打开的“图层”窗口一样了，非模态窗口。
“非模态窗口”像是挂在屏幕框框上的一小块卡片，而不是贴在墙上的一个内容对象，会一直伴随着框框。

小聪明

在一些产品中，这样的“进门广告”，不仅点“X”按钮可以关闭，点击周围的空白区域，也可以关闭。这似乎是一种缓解方式，缓解模态给用户带来的不适。确实比只能点关闭按钮要好些，不过，仔细想，这也行没道理。
针对整个软件的模态窗口原本就是要锁定整个产品，只能操纵对话窗口，因为要处理的问题重要，紧急。真正重要的对话窗显然不能这样做，比如：软件要更新，只能选择：马上更新or暂不更新。暂不更新也是要用户慎重的操作，看了窗口里的信息，点击“暂不”按钮。以行为来引导用户认真看，认真做。如果可以随便挥挥手就可以抛开不看的信息，就是不是重要的，不重要的，就不应该用这种表达方式了。
那么，这种方式是为什么情况而生的呢？不重要的，又很希望引起用户关注的。这说法是不是有点儿矛盾？

“模态有助于集中注意力”

有一种说法：“模态窗口让用户集中注意力完成当前任务”。我认同。
当用户要打印当前文档时，应该让用户集中精力，设置要打印几页，要横版还是竖版，缩小还是放大… 这个时候，用户不要再去改文档的内容了。设置只打印第3页，然后去编辑文档，删除到只剩两页，那要打印什么？全乱套了。
所以，必要的时候应该使用模态，但这并不等于赦免了模态的滥用。
“是否真的是必要？”
“是否可以只使用对象的模态，而不需要整个软件的模态？”
模态必定限制了屏幕的自由，它是一味猛药，能治病，也有毒。小病别大治疗。

主动打开与被动打开

未登录状态下，浏览微博。这时，点右上角的“登录”，弹出这个模态登录窗，通常不会让用户反感。
如果是看这篇博文，觉得好，想收藏，点击“收藏”按钮，然后弹出了这个登录窗，感受就差些了。感受差是因为出乎意料，“哎呦，还要登录啊，麻烦，算了，不收藏了。哦，还非得先X掉这个窗口。”会感受到自由受限。前面那种情况则几乎不会，因为就是要登录嘛，符合预期。
意料之外的，不愿接受的可能性比较大；意料之中的，自然比较容易接受。去完成操作，而不是要逃离，这就没有感受到自由受限，没感受到模态的这个缺点。
模态并不是一种错误，模态只是一种特别的软件状态。应用的不当，才让人反感。

让人喜欢的模态

在Twitter中，点击图片看大图：这也是模态，除了这个视图中的几个操作，别的都不能操作了，除非点左上角的X，退出大图模态。这个模态不仅不让人反感，反倒让人喜欢。我就是要看大图嘛，能显示多大就给我显示多大，网页中其它的信息遮住些，不要干扰我。
反倒是微博中的看大图，不那么让人喜欢：原本是九宫格的小缩略图，点击其中一张，显示成这样。大图，也还是不很大。我猜，设计者在这里是有意识的避免了使用模态。
前面说，用户主动的意愿，用模态也不坏。
这里用户主动的意愿，使用模态，不仅不坏，反而更好。更好的满足了用户的意愿。
模态并不是一种错误，模态只是一种特别的软件状态。应用的不当，才让人反感。

篇后语

“模态”是个古老的话题，但又是个一直说不清的话题。有人把模态等同于弹出窗口，也有人说“文章的编辑态与浏览态”。
我自以为找到了线索，完整的定义、解释了模态，于是，啰啰嗦嗦的写了这么多，试图辨析各种疑似模态的设计，但显然想要穷举是不太可能的。所以，即使你有耐心全都看完，恐怕也还是会有不少疑问“这种情况是模态吗？那种模态是好的吗？”
这大概是最不容易理解，最古怪的一篇吧。