网易游戏 2020 校招笔试 B - 手游角色创建交互方案

初入游戏,角色创建流程在游戏中较为常见,各类游戏的流程也相似。本次设计测试希望从游戏交互设计和玩家体验的角度出发,发现在流程中值得优化、创新的点:

  • 初始背景故事与角色创建流程的自然衔接

  • 利用交互手法让用户在漫长繁复的捏脸流程中产生情绪起伏,避免心理厌倦。

  • 捏脸UI界面布局分析

最终方案速览

游戏背景设定

未来风格FPS游戏

黑暗势力正在肆虐,人们的生活不再平静… 你加入了一个武装组织,为了保护你的家人和这个城市 ,与其他玩家一同对抗黑暗势力,你的战斗就此开始…

交互流程梳理

从初始背景故事到创建角色的衔接

大多数游戏开始即进入角色创建流程,容易破坏背景铺垫为玩家塑造的沉浸感。本次设计通过一个小故事,自然的从初始背景介绍过渡到创建角色流程,塑造更沉浸的体验。

​简介剧情为玩家在一次小战役中面部受损,医生帮助他通过面部数据修复外形。

Gif

​选择角色/性别动画

再此处为了更贴合游戏背景,用选择性别代替选择角色。选择性别流程利用贴合背景风格的动画加强玩家沉浸体验。

Gif

界面布局探索

如何设计“捏脸”交互界面更清晰

通过调研大量包含创建角色流程的手机游戏发现,大部分手游将复杂UI放在界面左侧,也有部分放在右侧。本次设计过程中分析何种界面布局可以使繁琐,复杂的捏脸流程更清晰。

在设计迭代过程中设计了UI在左侧、右侧、根据层级分布两侧,三种方案,对比分析。(以较为复杂的面部调整-眼睛调整界面为例,最能说明情况。)

方案一:UI主要在左侧

通过调研​推测UI集中左侧的手游方案主要是因为沿袭了端游的界面设计规则,对你用户来说较为熟悉。近几年发布的手游也逐渐开始探索右侧和两侧的形式。

方案二:UI主要在右侧

​UI主要在右侧时方便右手对于UI的操作,但界面布局所受限制较大。

方案三:根据层级分布在两侧

既满足了右手操作细节调整较为方便,页面布局也合理。层级相对清晰。

在经过对比分析后,决定采用方案三的UI布局形式。而对于复杂的捏脸流程来说,界面的一级、二级、三级应当在视觉上有差异化,在UI结构紧密的情况下,让结构清晰,玩家明确。故在设计过程中探索了多种层级视觉方案:

最佳方案

预设形象选择

​基于捏脸流程不过复杂,且对大众玩家友好的设计原则,采取多套预设,且支持随机生成,基于照片生成等功能。

Gif

​体型塑造

​体型的改变是很多玩家希望在捏脸系统中实现的功能,而很多捏脸系统恰恰不具备这一流程。如果加入体型的改变会对玩家体验带来提升。

Gif

声音选择

声音也是构建一个角色性格,设定,使角色丰满的重要的一环。

​参考《仁王2》等游戏,可以在角色塑造流程中加入声音的选项。

确认形象后仅可再修改妆容的提示

改确认弹窗在整个流程过程中起到重要作用,玩家一旦未完全理解该内容,将对之后的体验产生很大的影响。而仅用文字描述“形象不可以在更改,而妆容可以“,对用户来说缺乏形象的认识。设计中采用动态图示的形式来提醒什么是形象,什么是妆容。

Gif

保存与重置 

虽然本次设计的目标是快速的角色创建,但保存于重置按钮无疑在流程中帮助玩家避免很多负面体验。

故本次设计 支持保存 (暂存)和重置功能。重置功能会支持用户选择全部重置/还原到上一次保存。

Gif

导入与分享

自定义形象的分享和导入在你游戏玩家社交分享中起到至关重要的作用,也为游戏营销提供很大帮助。常见的导入分享包含复制口令到剪切板,和保存二维码图片两种方案。本次设计将两种方案结合,既可以使用剪贴板快速导入上一次的口令,也可以保存并在社交平台分享包含形象预览图片的分享码,促进游戏在社交平台的热度 。

Gif

​工具与素材

本次设计测试所使用的软件为:

设计中使用的人物模型,外形素材来自【Black Desert】,其余UI界面,交互动态素材均为自己制作。

Design by Lai Wei © 2020