移动设计中的模态框与页面跳转

之前在一篇文章中谈论过关于模态框的好处，但在实际的设计中，对于如何执行分支任务还是会纠结使用模态框（Present）还是页面跳转（Push）。于是重新思考了在什么时候用模态框，什么时候用页面跳转。总结来说，模态框用来执行比较复杂的分支任务，页面跳转则执行一些较为简单，不需要用户记忆的操作。模态框在某些时候可以替代页面跳转，而页面跳转则无法替代模态框。比如结算的时候去「新增地址」这个流程与主流程不是在同一个水平内的，用户不一定非要去执行该操作。

「新增地址」并没有取代「选择地址」，而是覆盖在了「选择地址」的上方。这个覆盖可能是用户主动触发的，想要新增地址，也可能是系统默认就出现的，比如新用户第一次购买时没有可选的收货地址，就直接弹出新增地址让用户输入（我觉得直接弹出不是一个很好的设计，但确实有人这样做）。

模态框的特点

模态框有以下特点：

• 复杂的分支任务
• 用户主动触发
• 可撤销操作
• 完成后返回主流层

复杂的分支任务

首先，模态框是一个非主流层的任务，通常来说是一个必要的分支任务，但并不是每次都需要执行。比如上图中的「结算流程」中，可以完全不进行「新增地址」这个任务。但当用户没有地址可选的时候，「新增地址」就变成了一个必要的操作，用户不进行该操作就无法进行下一步。

通常来说模态框中用来执行一些复杂的操作，比如需要用户输入的操作。

用户主动触发

模态框应该是用户主动触发才出现的，而不应该是系统自动触发。

在信息架构中有一条基本原则就是「看不到就等于不存在」。因此当用户进入选择地址页面，系统检测到该用户没有收货地址，而自动弹出新增地址页面的设计，看似帮用户节约了时间，实际上会让用户理解为这一步就是「新增地址」而不是「选择地址」，用户会对整个结算流程的产生错误的心理模型，用户会以为系统没有选择地址这个功能。

所以要让用户看到「选择地址」这个页面，同时也让用户看到「新增地址」的入口。

可撤销操作

用户可以随时放弃当前的修改。因为模态框需要执行复杂的输入操作，这也就增加了用户的记忆负担，当用户不小心进行了误操作之后，需要有一个逃生舱让用户回到安全的地方，这个逃生舱就是取消当前的修改。

如果该信息是必填项，应该在主流层的入口页面告知用户。比如用户可以取消「新增地址」，但是如果用户没有地址，就必须要新增一个地址才能进行，这个必须新增地址的信息应该在「选择地址」页面告知用户。

完成后返回主流层

当用户执行完这个分支任务之后最终是要返回到主流层的。通常来说就是返回到进入模态框的页面，这样能够让用户产生更清晰的心理模型。有些时候也会使用「保存并使用」这样的方式直接进入主流层的下一步。

比如当用户「新增地址」之后是需要返回「选择地址」或者利用「保存并使用」这样的操作直接进入到「选择支付方式」页面。

如何使用

在 iOS 和 Android 的系统设计中，模态框（Present）都是从屏幕底部出现，然后覆盖住整个屏幕，而类似于下一步这样的页面调整是从右侧出现（Push）。因此请遵守这样的习惯，这样的设计能够让用户建立起正确的心理模型，从底部出现的页面是当前页面的上一层，也就是「模态框」，而从右边出现的页面是当前页面的下一步，与当前页面是在同一个层次的。

如果利用 Push 来制作模态框会造成一些问题，比如无法撤销当前操作。在 iOS 和 Android 的设计中，后退操作不等于撤销，而是等于保存。比如在 iOS 的系统设置中，为 Siri 选择语言的时候，后退就等于保存。同时 Push 也会破坏用户的心理模型，当用户完成「新增地址」的操作之后，需要回到「选择地址」，如果一直使用 Push 的话，用户会对页面在整个结算模型中的位置感到困惑。

页面跳转的特点

页面跳转有以下特点：

• 页面跳转是必选项
• 不需要记忆的分支任务

页面跳转是必选项

利用 Push 来让用户执行某项操作时，该操作应该是主流层的一部分，用户不一定必须选择，但是该条目是必选的。比如「结算流程」中，「选择地址」是一个必选项，但是如果用户有设置「默认地址」时，那么「选择地址」这个操作就不一定是必须的，因为系统已经自动帮用户选择了地址。这种情况下的整个结算页面流程是不一样的，这种情况下，选择地址已经不是流程中的一个必经的页面，而是附属于「确认订单信息」这个页面中。

利用 Push 来做选择地址的时候，结算的页面流程。

这种情况下的「选择地址」其实也可以利用模态框，只不过在「新增地址」的时候要再多加一层模态框。

我觉得这种做法虽然减少了页面跳转，但是在「确认订单信息」这一步实际上增加了用户的停留时间，而且这样的设计对新手用户来说不太友好。因为新手用户通常没有地址，因此在这里需要「新增地址」，但是「新增地址」的入口被放在了「选择地址」这个二级页面中，用户无法直观的看到，需要用户去思考。如果用户没有添加地址而进行下一步，系统通常会直接报错，而系统的每一次报错会打击用户的积极性。

不需要记忆的分支任务

与模态框的不同之处在于，利用页面跳转来做分支任务的时候，任务的内容应当是非常简单，简单到不需要用户记忆就可以快速撤销当前操作。因为页面跳转没有撤销功能，因此页面中应当有足够的信息让用户不需要记忆就可以做出选择。

比如当用户选择了地址A之后，发现选错了，可以轻松的修改为地址B，而不需要记住上次选择了什么，地址中的地址详情和电话、联系人这些信息都不需要用户记忆就可以做出选择。

如何使用

页面跳转的使用很简单，页面从屏幕右侧进入，然后覆盖住整个屏幕。在有些设计中，当用户选择了地址之后会自动返回上一步，这样就减少了用户返回的操作。这样一般都用在比较简单的选项中，如果用户选择之后需要进一步操作，比如选择铃声之后需要试听的时候，就不能自动返回了。