游戏中的卡片模态面板设计【1】

什么是卡片模态面板

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）《跑跑卡丁车》商城购买流程

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

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

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

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

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

Citrix Xendesktop5中创建虚拟机失败的2个案例分析
Xendesktop5中无法创建虚拟机的2个问题分析 1. case1 用户在添加新的桌面的过程中提示: The catalog has the following errors: Fai ...
第二篇：智能电网(Smart Grid)中的数据工程与大数据案例分析
前言上篇文章中讲到,在智能电网的控制与管理侧中,数据的分析和挖掘.可视化等工作属于核心环节.除此之外,二次侧中需要对数据进行采集,数据共享平台的搭建显然也涉及到数据的管理.那么在智能电网领域中,数据 ...
KT中代理属性的实现及使用案例分析
普通的delegate代理属性get/set方法,可以看到类中会声明一个数组保存需要代理的所有KProperty字段信息(包含类名,字段名称,字段签名()) PS:冷知识map也可以用于委托,只要有g ...
游戏中的整容术！《Honey Select》捏人系统剖析
关于游戏中的捏人系统,很少有资料提到怎么做,印象中只有<天涯明月刀>分享过.前段时间关注了个VR资源分享的公众号,经常推送HS的捏人作品,所以才引发了我的好奇心,决定一探究竟. HS之所以 ...
[Mugeda HTML5技术教程之14]案例分析：制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
系统集成项目管理工程师案例问答题（案例分析中常见找错问题）
有兴趣了解或者考软考的小伙伴可以到B站看看这个老师讲的课程. 学计算机的小伙伴有时间可以考一个软考证书,这是中国计算机技术职业资格网官网. 这是广东人事考试网,这里面会公布广东的报考信息,没记错的话是 ...
地理信息系统（ArcGIS）在水文水资源、水环境中的实践技术应用及案例分析
目录专题一 ArcGIS:数据管理专题二 ArcGIS:数据转换专题三 ArcGIS:地图制作专题四水文水环境数据编辑与管理专题五水文水环境数据处理与分析专题六 ArcGIS水文分析及 ...
从游戏中学习产品设计2：消费篇
上一期,我们介绍了游戏中的诱导充值套路,没有看的朋友可点击从游戏中学习产品设计1:充值篇!了解游戏中是如何引诱玩家充值的,今天我们来聊一聊游戏中的消费套路,上文介绍了游戏中的三类货币:金币,钱币和时 ...
计算机01无法纯随机,玄不救非，氪不改命如何分清游戏中的“真随机”和“伪随机”？...
原标题:玄不救非,氪不改命如何分清游戏中的"真随机"和"伪随机"? 一定不是我非,一定是游戏有问题很久以前流传着这样一则笑话:一个身患重病的人决定去动手术. ...

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

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

最新文章

热门文章