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

产品

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

正常的一个购物流程

正常的一个购物流程

有新增地址的购物流程

有新增地址的购物流程

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

模态框的特点

模态框有以下特点:

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

复杂的分支任务

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

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

用户主动触发

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

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

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

自动弹出新增地址会让用户以为整个结算流程是这样的

自动弹出新增地址会让用户以为整个结算流程是这样的

可撤销操作

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

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

完成后返回主流层

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

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

如何使用

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

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

页面跳转的特点

页面跳转有以下特点:

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

页面跳转是必选项

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

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

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

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

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

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

不需要记忆的分支任务

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

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

如何使用

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