独家!大揭秘!网易《幻书启示录》GUI设计创作思路特辑

上海/UI设计师/4年前/3042浏览
独家!大揭秘!网易《幻书启示录》GUI设计创作思路特辑

网易《幻书启示录》GUI设计创作思路大揭秘!

《幻书启世录》于2020年12月17日上线,开启预下载后登顶IOS免费榜,随后也取得了畅销榜第七的好成绩。《幻书启世录》做为二次元卡牌RPG,在层出不穷的二次元市场另辟蹊径。


在取得这些优秀成绩的同时,我们不由得惊叹网易优秀的美术设定和UI和动效的综合表现。这次咱们有幸邀请到了来自网易NEXT部门的LULU来给大家分享--《幻书启世录》GUI设计创作的思路。


LULU,2018年通过社招加入网易,成为一名游戏视觉设计师,在设计岗位经历八年的探索和锻炼。曾参与的《钢琴块2》获得德国红点奖,这两年以主GUI的身份扎根《幻书启世录》。


“我们以导演视角串联故事,

在满足易用性的同时,

带给玩家愉悦的沉浸式体验。”


Q&A

Q1  《幻书启世录》里最有设计亮点的部分是哪些?

《幻书启世录》以“书”做为主旋律,是多重世界拟人手游,游戏以“书拟人”为蓝本进行创新与突破。


(一)抽卡系统|影视思维+玄学玩法


用“导演视角”来梳理故事,用视频的方式进行串联,同时加入“玄学”概念,从而得出了具体的设计方案。

LULU:我们不希望我们的设计只是简单的装饰和基础的功能。“玄学”是一个很有趣的概念,我们通过简单的界面和玩家建立某种联系


界面上的各种细节设计

1.根据抽卡关键字:钟,时间,书娘,进行头脑风暴,用影视化的思维串联整个故事流程。

2.对重要界面进行设计思考和细节推敲。


四个时间轴:分别以四个不同的运动轨迹,不是常规逻辑下的统一方向,有序又无序的运动方式,造成时间交错的感觉。


时钟时间和年代时间:时间的联动性。


放大镜:运用放大镜来展示吸引到的角色时间,保证了整体包装的流畅性,交代层级的同时增强代入感。


日月星辰装饰:GUI的通用图案,精确的运用在各个界面中。


整体游戏的统一性。我们运用的主元素纸张调性走偏平纸张轻薄路线,我们做了“相对”扁平化处理,让载体更多地方接近纸的轻薄材质。


(二)实际案例·幻书系统

更注重给玩家情景化的体验,所以原画、视频、模型等配合来进行综合表现。


幻书系统关键词:角色、书,以为贯穿始终的seed,用情景化包装去链接角色和界面,正如同人在看书时和书本的交流方式一样



(三)成果展示·情景化设计


1.邮箱系统

也采用了纸张和视频的结合,故事性包装,营造氛围感。猫头鹰叼着纸,做拍脸动效,纸张幻化出猫头鹰的图标,也交代了故事的连贯性。



2.限时奖励界面

高频操作的系统,就像每天都要去翻阅报纸,翻阅报纸给这个功能增加代入感和趣味性。


采用翻阅报纸形式,版画元素的运用,排线、凹凸版用按压的办法把凹版的墨汁带处来,版画的绘画手法也运用到了各个界面,这种最早期的工艺,很贴合我们的游戏时代-中世纪。


3.大地图

结合功能将入口图标也处理成纸的材质,像立体书的形式树立在纸张中间。同时增加了环节氛围:飞鸟、空气中的灰尘伴随自然光忽明忽暗。


undefined


4. 7日签到界面

功能块面多,空间利用最大化,花纹装饰中世纪风格。



(四)活动界面

整体风格偏黑暗系,主元素运用了章鱼触手等元素,色调偏绿色,突出神秘的气氛。

山海经新年活动在保证中世纪花纹的前提下增加了中式剪纸元素。

(五)设计有理·图标

设计自有出处,与世界观高契合度,增强代入感。


undefined


我们开始研究 中世纪的纹章学 ,最早起就是参考 真实的纹章 针对纹章的设计语言进行功能的匹配,制作幻书的拟物图标。


(六)创新突破·打造设计影响力

我们从中世纪关键词出发,从圣经手抄本,书籍封面设计中提取排版花纹元素和纸张的烫金材质等元素。


undefined

undefined


同时BANNER整体模版化,在保证美观度和精致度的前提下能保证快速迭代。


Q2  《幻书启世录》最终的美术风格如何确立的?


总结一下,就是我们经历了:寻找-纠结-坚持-突破的过程


最开始我们根据《幻书启世录》的故事以及玩法“寻找”我们需要的素材。我们目标是想做出差异化,所以当时是经历了一个比较“纠结”的过程,反复摸索适合项目的风格,这个过程是痛并快乐着,过程中我们不断明确我们的设计语言,比如配色、构成、花纹、细节等。


最后我们做到了突破,整理出《幻书启世录》的设计语言并延续下去,且辐射到了各个环节。


Q3  游戏UI前期是如何快速出美术风格的?


也是因为前面的长期积累,在保持风格统一的情况下又会不停脑暴,持续打磨设计亮点,我们关注效果不断突破的同时也同样关注效率,结合实际制定工作流程,这使得我们效率稳定高效。


Q4  项目过程中收获到的不错的工作流程?


因为我们的职位游戏视觉设计师是一个非常值得探索且极其开放的大世界,这个职位的有趣之处在于他能串联每一个环节。


例如我们的抽卡系统,我们梳理故事流程脑图与UI、原画、模型、视频、等多环节串联,以最直接的方式连接到玩家,和玩家建立联系让我们有了工作的热情。


Q5  项目中有没有遇到什么困难?你们是怎么克服的?


由于我们团队同学们都比较创新且对自己有高要求,所以我们在打磨品牌识别度时,大家会有很多点子和想法。也是顶着各个方面的压力,抱着对用户负责对自己负责的态度,最终我们还是取得了突破。


看到很多玩家评论我们:“界面华丽,界面效果有种不花钱就能得到氪金的快乐。”收到这样的评论,当初困难也就不算什么了。


Q6  美术团队内部培养的过程中重视提升哪些部分?


我们比较重视团队的创新精神和快乐,创新就是不固执守旧,敢于突破,快乐其实是我经常挂嘴边的词,就是自己要对自己的效果足够热爱且热爱这个岗位,工作是能使人快乐的。


Q7  如果有同学想要加入《幻书启世录》项目组,你觉得他应该拥有怎么样的素质呢?


对于以往对GUI的要求是承载交互功能和美术效果,现在更多需要的是传达世界观,去思考设计理念。我们鼓励大家去了解产品思维,在拥有扎实的基本功的同时拓宽设计思路。


给大家盘点一下今天LULU分享的重点:


1.要想做出好的设计,首先要明确设计目标;

2.抽卡系统运用了影视思维和玄学玩法;

3.幻书系统更注重给玩家情景化的体验;

4.情景化设计还贯穿了邮箱系统/现实奖励/大地图等界面;

5.图标设计有理,与世界观契合,增强代入感;

6.BANNER整体模版化,在保证美观度和精致度的前提下能保证快速迭代。


感谢本次LULU带给大家的分享!

欢迎大家积极转发本篇文章,

以及在留言区参与互动

咱们下期再见~


60
Report
|
71
Share
相关推荐
二次元
二次元
二次元
二次元
作品收藏夹
如果美术当了老板,产品能做成什么样?
Homepage recommendation
文章内容含视频
「新怪谈」如何用美术 营造诡异氛围
Homepage recommendation
文章内容含视频
为什么我们的招牌不好看|艺海旅人
Recommanded by editor
文章内容含视频
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
工作渲染
Homepage recommendation
相关收藏夹
二次元
二次元
二次元
二次元
作品收藏夹
ui设计
ui设计
ui设计
ui设计
作品收藏夹
UI
UI
UI
UI
作品收藏夹
ui懂就对了
ui懂就对了
ui懂就对了
ui懂就对了
作品收藏夹
Ui
Ui
Ui
Ui
作品收藏夹
每天阅读
每天阅读
每天阅读
每天阅读
作品收藏夹
大家都在看
Log in