游戏中的卡片模态面板设计【1】—运用案例分析

作者：WensyGameTube2021-04-16

什么是卡片模态面板

1）什么是模态面板

模态面板是从属于应用程序主窗口的图形控制元素。它创建了一个模式——禁用主窗口但保持主窗口可见（主窗口作为背景，菜单、弹窗、二次确认等覆盖在上一层），通常可见的是必要信息内容，用户与窗口进行交互才能返回主窗口。所以，是否强制用户对模态面板进行交互操作，是区分模态面板与非模态面板直接且有效方法之一。

常用的模态面板大概分为以下几类：

全屏模态面板
半屏模态面板（专注屏幕下半部分的分层内容，多应用于竖屏互联网产品中）
弹出面板
二次确认、警告提醒面板
浮层面板
对话框面板
...

2）什么是卡片模态面板

模态面板拉起时，原有的界面会配合微动效有空间纵深效果，变为背景，显示dis态防止用户与原有界面发生交互行为。此时上层模态面板可以通过滑动操作开关，更加适用于单手操作。原有和现有的界面可理解为两个“卡片”，也就是两个卡片层级的相互关系，即为“卡片模态面板”。

iOS13采用了大量的卡片模态面板设计，尤其广泛应用于系统邮件、日历、通讯录、Apple Music、信息Animoji等自带应用中，优化iOS13用户体验。

卡片模态面板特点

卡片模态面板特点——

“阻止玩家做其他事情同时减轻玩家阻断感知”

1）界面层级上：

在主窗口操作后出现窗口覆盖到主窗口上层，主窗口不可操作，玩家集中操作在模态面板。

模态面板要素：卡片模态面板和所有弹窗在操作要素上一致，都需要包含关闭弹窗方式、承载体、Button、Title几个要素，有从主窗口展开卡片模态面板的方式，也必然需要有关闭模态面板的方式。

模态面板出现和关闭：出现分为按钮操作和卡片展开两种情况。无论按钮操作还是卡片展开出现时，模态面板从下自上滑动出现同时主窗口配合微动效有空间纵深效果后退到下一层级，关闭时手势向下滑动，自上而下滑动消失。在卡片展开时，模态面板配合卡片位置、大小有展开放大动效主窗口有空间纵深效果后退到下一层级，关闭时手势向下缩小回到主窗口卡片，更符合“从哪来到哪去”的认知。

这里让我想到看过的一篇文章《打造直觉设计》，主要一个观点是“用户过去的经验分为物理环境经验和文化环境经验，所有直觉都与这两种经验息息相关”，我非常赞同这个观点，因为好的设计是不需要任何引导用户就可以凭借直觉上手实操，容错率非常低，交互设计也是如此。卡片模态面板这个交互方式，让我想到几乎每个人小时候都玩过的一个折纸游戏——东南西北，问对方想要哪个，是横是竖多少次按照对方说的做最后对方选的什么就是什么。这个游戏横竖展开收起的过程类比模态面板与主窗口的关系，他们是相关联反复的，并且玩家明确知道怎么展开就怎么收起，卡片模态面板层级关系用户符合玩家的直觉设计，展开收起的方式也不需要引导，虽然没有关闭按钮玩家凭直觉也可以快速知道如何展开收起。

2）玩家操作行为上：

暂停主窗口的操作，集中到模态面板上；同时降低玩家容错成本和心理。

当玩家操作卡片模态窗口时，通常有不可逆操作和可逆操作有两种情况。不可逆操作情况有进入主窗口前的必要交互行为，不可跳过不可取消，这种情况下把玩家注意力都集中到模态面板上，不可操作主窗口信息内容。

可逆操作情况有查看详情，展开卡片，编辑内容等，出现模态面板时与不可逆操作一致，中断主窗口的操作，把玩家注意力都集中到模态面板上。不同的是可逆操作玩家是可能犯错的，如果出现完全阻断弹窗和全屏跳转，给玩家犯了比较严重错误的感受，怀疑自己是不是笨。因为模态面板减轻阻断感，所以同时也降低玩家犯错成本和心理感知。《设计心理学九：人会犯错》一章中有提到“人都会犯错，创建一个防止人们犯错的系统是不可能的。应该假设人们总会出错，并且犯错后最好的错误提示就是没有提示”。

3）视觉表现上：

通过遮挡覆盖吸引玩家视觉聚焦，主窗口视觉推后明确不可操作。

视觉表现主要分为界面美术设计和动效表现。游戏交互设计师主要负责视觉的跟进审核，想让视觉设计师达到想要的效果，交互设计效果图需要明确表现二者的层级关系并在美术需求文档中标注说明关系（理论了好一会偶尔实操下，不要走开，更有实操在后面哦~）。主要目标就是明确卡片模态面板与主窗口的关系，在展开模态面板时，一定要明确让玩家知道此过程不可操作，同时玩家回到主窗口时，也要通过美术表达和微动效融合明确表达现在视觉焦点和操作已回归主界面。

4）扩展性极强：

收起卡片模态面板回到主窗口后，依然保留快捷展开模态面板方式；分层界面变为模态弹窗等。

iOS13的邮件app用户进入后新建邮件，但是在写邮件同时想进行查看收件箱等操作，此时下滑回到主窗口，新建邮件的展开模态面板快捷方式现在在主窗口的界面底部，方便玩家多任务同时进行。iOS13的很多app用户分享主窗口操作时，点击分享按钮操作后出现半屏分模态面板，手势向上滑动会变为卡片模态面板。

可见卡片模态面板的扩展性、多交互形式融合性都非常强，可结合第五部分“卡片模态面板游戏未来扩展思考”思考来看。

游戏使用场景案例

选择了两个比较喜欢的游戏，思考了一下卡片模态面板可以应用的场景：

1）《一起来捉妖》我的阵容

《一起来捉妖》是腾讯的一款AR探索游戏，以“捉妖”为核心玩法。在游戏中，玩家可以通过AR功能抓捕身边的妖灵，对它们进行培养，完成游戏中PVE/PVP对战、展示、交易等诸多功能。阵容是对于PVE/PVP玩家非常重要的功能，在这里组建/调整自己的阵容，交互设计目标必然是在让玩家可以在最短时间内不停调整/查看/组建阵容。

目前游戏中的方案主要操作的是采用全屏界面，需要查看阵容详情和返回到阵容界面都是全屏跳转，阻断感略强，但显而易见的好处是更多手机屏幕区域可以用来专注目前操作。因为返回在界面左上角，玩家最多可组建50个阵容，在阵容主窗口和阵容详情操作两个界面反复查看调整返回，这是竖屏游戏对于单手操作玩家不够友好，在切换之间花费了过多的操作和阻断成本，游戏沉浸感和功能性的目标都有待优化和提升。

使用卡片模态面板交互框架提升的体验：

层级明确，主任务流和补充操作的层级关系玩家易理解；
不用再操作阵容时的界面下半部分区域和离手指最远的左上角返回按钮单手繁杂操作了，手指下滑即回到主任务流，此功能的操作区域仅集中在界面下半部分，大大降低操作成本和提高任务效率；
之前玩家返回时提示是否保存，使用卡片模态面板如果有改动又没有保存配置下滑时出现动作浮窗提示是否保存，此时操作和视觉都集中于界面下方。
以上三点提升的体验，在玩家编辑的阵容非常多，集中调整众多卡组时会有明显提升体验的感受。

2）《跑跑卡丁车》商城购买流程

《跑跑卡丁车》是一款休闲类赛车竞速游戏。商城是休闲类游戏开发者主要盈利途径之一，所以跑跑的商城设计尤为重要。设计目标主要是最大限度展示架车和车手等道具，视觉冲击力极强，并且贯穿购买流程的始终，最大程度刺激玩家的购买欲望。

目前游戏中的方案从主界面进入商城，以及商城的展示视觉效果、交互体验都设计的非常棒，也达到了刺激玩家购买欲望的目标。但是在商品详情界面开始购买流程后，购买弹窗、二次确认弹窗、充值提示弹窗三层直接叠加，虽然用了背景模糊的效果，但是依然可以感受到层级的厚重和复杂。设计目标有个是商品的展示贯穿购买流程的始终，这里三层弹窗把展示界面完全遮挡，在关键刺激玩家消费欲望的瞬时操作时，仍有优化空间。购买流程前都设计的非常好，玩家从欣赏展示商品到购买流程，刺激玩家的消费心理曲线是逐渐上升——迅速下降的过程。

使用卡片模态面板交互框架提升的体验：

在购买流程时依然保持刺激玩家消费，让玩家消费的心理曲线是逐渐上升的过程。在商品详情界面点击购买操作后，商品展示场景由中间区域左移部分隐藏详细信息仅展示商品视觉效果但不可操作，出现半屏模态面板为购买操作。这样设计的目的是玩家在购买流程、下定决心氪金时依然感受到这个商品对他的冲击力。
通过手势操作简化复杂堆叠层级，给单一选项减少玩家思考。从下面交互设计图可以看出，从商城界面、商品详情界面到购买界面、二次确认界面、充值提示界面所有的操作按钮都只有一个并且同一位置，让玩家在购买时更加流畅操作，最高效完成目标，获得心爱物品。
明确层级关系。在这个复杂的操作提示中，下图设计并没有简化流程，但是明确了层级关系。玩家最终会到达充值提示弹窗，此时明确看到有三层弹窗需要操作，通过右滑的方式关闭弹窗，此时玩家的手指操作范围依然是界面的右下角区域。
以上三点提升的体验，在玩家对多个商品反复纠结是否购买的时候尤其体现出来。