详细内容

游戏中的卡片模态面板设计【2】—运用及未来思考

本次有请Wensy同学接着上次对于卡片模态面板在游戏中的分析,继续阐述在游戏中的运用和未来扩展。


 


01

内容预览



1.卡片模态面板游戏如何正确运用

2.卡片模态面板游戏未来扩展思考

  

 

02

卡片模态面板游戏如何正确使用




1)使用时机:

玩家对主任务流的补充操作


玩家在一个游戏中的主任务流通常是全局导航的操作,完成全局导航里功能和玩法系统的目标,达到升级变强的游戏目标。在市场上大部分手游中,任务系统让玩家清晰了解到要做什么,商城系统是开发者盈利促进产品升级迭代必需系统,社交系统增加玩家粘性维持产品生命周期必需,三者都是非常重要必不可少的,所以拿这三个系统举例说明。任务/商城/社交是玩家的主任务流,而查看任务详情操作/购买商城的道具操作/发表新的社交动态操作都是玩家主任务流的补充操作,并且满足都满足“可逆操作”的特点,在游戏整体交互规范允许情况下可以考虑使用卡片模态面板进行信息架构设计。

 

玩家在体验一个游戏时,经常不会按照设计者设想的线性方式去玩它,并且经常操作不是闭环的。比如玩家在做任务系统或者商城买道具时想体验社交系统,因为两个是平行的主任务流,但不是从全局导航进行相互切换的,也可考虑使用卡片模态面板来实现复杂的任务流程进行信息架构设计。

 



2)弹出时间:

不可逆操作在主窗口前弹出;可逆操作操作后及时反馈


这里想到日常生活中经常遇到的一种情况——接到推销电话,推销员说明是做什么之后赶紧问我们是否需要,毫无疑问99%的人都会说“不需要,谢谢”。或许在我们需要的时候对方真的政策优惠划算,但是我们还是多少心理把他们归为“骗我的钱”一类,因为“信任心理”还没有构成。很多游戏第一件事就是让玩家注册账号,输入账号密码甚至实名认证等信息,玩家还不知道好不好玩时,对这个游戏的第一印象以及游戏体验肯定会不太好。虽然这个情况属于不可逆操作的使用场景,但是不建议大家这样设计。类似情况需要先引起玩家兴趣,通过大量数据掌握玩家心理在适当的时间给玩家不可逆操作的提示,才能获得玩家信任。因为是不可逆操作,所以设计时弹出时间更需要慎重反复斟酌。

 

当使用卡片模态面板为玩家设计不可逆操作时,要在玩家想要操作的主窗口功能前弹出,因为此时这个功能点已经引起玩家的好奇,或者这个功能点与其他功能点比如任务系统、装备升级息息相关,玩家需要通过这个操作更强。

 

image.png


可逆操作主要是反馈要及时流畅,实现上如果遇到网络不佳等问题,需要给玩家及时的反馈。

 

3)弹出方式:

层级明确、逐个弹出


在使用卡片模态面板设计多层级交互框架需求时,千万不要一次性弹出。无论是弹窗、全屏模态、半屏模态一次性弹出多个,玩家会看都不看先一个个关闭会非常非常厌烦,给玩家设计非常不专业、杂乱无章、病毒网站的心理感受。所以无论是卡片模态面板还是多种模态面板相互交互时,都请不要一次弹出多个,强加给玩家不需要的信息。

 

用《跑跑卡丁车商城设计》举例信息架构最复杂情况有四个层级——主窗口、购买、二次确认、充值提示,面板一定是玩家在一个层级操作后出现下一层级覆盖原本的信息内容。玩家可以通过滑动的方式取消本次操作或者退出此功能。

 

image.png

4)收回方式:

“从哪来到哪去”


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

 

image.png



5)弹出收回动效:

流畅无阻碍


提到流畅的动效,Material design非常值得学习和借鉴。游戏设计的动效效果主要目标是提升玩家战斗中、操作升级等情况下的成就感体验。卡片模态面板是交互框架之一,主要提升玩家的功能性需求体验,在动效效果上可以考虑参考Material design卡片设计的动效路径和时间设计,在玩家瞬时心理的基础上根据自己的设计需求和目标进行细节设计和扩展。

 

某个元素移动或者改变状态的时候,运动速度应该足够快,使用户不用等待。出现频率高的转场动画应该短一点,而有些转场动画要慢一点,来保证用户能理解它。

 

71.gif

(图片和对应介绍来自于Material Design 官网)


应该调整每个持续时间,来适应不同的移动距离、每个元素的速度、和表面的变化。而不是所有动画都用同样的持续时间。物体离开屏幕应该是一个很短的持续时间,这样用户就会减少对他的注意力。

 

72.gif


(图片和对应介绍来自于Material Design 官网)


 





03

卡片模态面板游戏未来扩展思考



1)丰富形式,增强层级对比度:

与世界观符合的情感化设计形式(光感、材质、创意插画、动效、视频等)


形式丰富的UI设计,第一个想到的是《明日方舟》(之后简称方舟)。方舟最有特色的主界面使用Diegetic Interface的设计风格,全息投影、虚拟指示窗、观描设备的高科技效果展示,结合开场剧情——博士第一次控制岛上事务时是通过PRTS设备的系统进行的,通过一个观描投影界面很好的和世界观及剧情相结合起来,给玩家营造非常棒的沉浸感体验。


image.png

Fluent Design的设计思想几乎贯穿方舟的UI界面,Fluent Design是微软2017年发布的设计系统,这套设计系统是互联网产品视觉提供贯穿于多平台的设计支撑,并对除了Material Design之外杂乱无章的各个设计风格提供规范支撑,它最显著的特点就是多元质感。在微软发布的视频中了解到多元质感体现在五个方面:Light 光线,Depth 深度,Motion动作,Material 材质,Scale 比例。我自己的理解是“轻拟物”与背景模糊的结合。方舟大量使用了背景模糊的表现方式,背景模糊的主要好处是它的覆盖特性:对一个主窗口进行背景模糊处理,覆盖主窗口的界面之上加入新的页面组件,抓住用户操作行为时的核心元素,这点与卡片模态面板有着非常相似的特性。


image.png

image.png

(图片来自网络)

 

以多形式多层级的情感化设计代表《明日方舟》为例,卡片模态面板的未来设计运用方向会在iOS13为代表游戏化的基础上丰富表现形式,光感材质动效等方面相互结合运用,以世界观为核心的代入式沉浸感是游戏体验设计必须上升到的高度。高速模糊、轻拟物的表现方式是现阶段与卡片模态面板结合在实现和设计上都比较好融合的,可以考虑作为现阶段设计的“小目标”进行尝试。

 

 


2)交互方式多样性:

卡片模态面板与新拟态UI、轻提示、模态窗口相结合运用


交互方式的根本都是为了提高玩家达到游戏内目标的体验,用最高的效率让玩家在多任务的情况下达到目前想要的操作行为。相比于互联网产品,游戏的层级框架结构要复杂很多,所以在框架层的梳理就尤为重要。并且目前没有行业的相关规范,所以达到提高玩家体验的核心目标是交互设计师首先要考虑的。为了达到这个目标,多种交互方式的结合也就是多样式是必然的,也是现在很多游戏设计者正在尝试且运用到游戏中的,与扩展性极强的卡片模态面板相结合,也许会擦出令人惊艳的火花。

 

image.png

3)三维结合:

与拟物场景化及3DUI、AR结合尝试


最近通关的一款NS游戏《路易吉鬼屋3》,全局导航是路易吉救出喂博士后把工作室建在B1层的隐蔽车库,工作室的每个电脑屏幕表示一个功能,每切换一个功能时,对应电脑亮起,是典型的拟物化场景设计。玩家在游戏体验时,读取信息和操作是UI交互的主要功能,用完美的视觉体验、逼真的渲染效果、场景化的设计、富有故事的NPC需要游戏设计师贯穿起来给玩家一个代入感沉浸感的体验。而在此趋势下的游戏交互设计则越发需要融入场景中,交互设计后实现到游戏中的效果也需要给玩家UI是这个游戏世界的一部分的心理感受,而不是独立于世界之外。在PC和主机游戏中,UI和游戏场景融合可学习借鉴的优秀例子很多,例如《Metro 归来》《地球末日-生存》《全境封锁 1》等。

 

以《路易吉鬼屋3》为例,在全局导航中选择一个功能交互后伴随场景角度转换、镜头拉近的动画出现电视机界面,如果卡片模态面板的交互框架与拟物场景的UI,例如场景角度转换到下层不可操作,但是依然可以看到部分,界面的主要区域显示功能信息,返回或者切换全局导航功能的方式也随之改变,会不会出现更炫酷的展现方式和视觉效果、给玩家更加沉浸感的游戏体验呢?

 

image.png

image.png


不仅是类似《路易吉鬼屋3》等游戏的拟物化场景UI、还有3DUI、AR技术的使用,与扩展性极强的卡片模态面板结合是未来游戏交互设计的趋势之一。

 


 

04

总结




卡片模态面板的交互方式特点易辨、扩展性极强,与游戏相结合可以让玩家集中视觉焦点阻断做其他事情同时减轻玩家阻断感知,在功能、层级架构复杂的游戏交互设计中合理运用,可以让玩家更高效率的达到当前操作目标。未来扩展方向可以考虑向丰富形式、交互方式的多样性、结合拟物化场景/3DUI/AR的方向去设计和思考。


Copyright @ 2021 GameTube All rights reserved. 
技术支持: 聚成网络科技 | 管理登录