首页 技术 正文
技术 2022年11月15日
0 收藏 490 点赞 2,915 浏览 2647 个字

转自:https://www.zhihu.com/question/50995871?sort=created

《女神异闻录5》是近两年最为火热的JRPG游戏之一,它的出色不仅在于剧情暗讽社会黑暗面的主旨展现,那套酷炫而又极富冲击力的动态UI设计也成为了本作的一大亮点,不仅成为了部分同行游戏“借鉴参考”的对象,其中某些元素甚至被当作Cosplay的对象。

《女神异闻录 5》的 UI 设计

《女神异闻录 5》的 UI 设计

当然,这套UI并非一面倒的好评,也有部分的玩家认为这套UI的效果太过“喧宾夺主”,甚至会在长时间游戏后产生视觉疲劳,比如每次战斗结束后都无法跳过的厄长结算动画,对于一个近百小时才能通关的游戏来说并不太友好。

《女神异闻录 5》的 UI 设计

UI设计是一门学问,对于《女神异闻录5》来说更是如此。在今年10月底的日本CEDEC+KYUSHU 2017开发者大会上,来自Atlus的制作人和田和久先生,以及艺术总监兼首席设计师须藤正喜先生,便向同行们介绍了《女神异闻录5》UI设计背后的一些故事,我们也得以较为完整地了解到本作UI的最初构想、核心特色以及开发流程。

丨 Atlus公司的危机感,是这套独特UI诞生的大背景。

首先,和田和久先生介绍说,提到《女神异闻录5》的用户界面,只要体验过的玩家都会留下深刻的印象。它不仅时尚动感,且独一无二,这在本作第一部宣传视频中就有所展示,玩家也能初探这套独特的UI的端倪。

《女神异闻录 5》的 UI 设计

当然在宣传视频里的惊鸿一瞥里想要全面了解UI并不容易,而UI也是《女神异闻录5》不可忽视的一大特色。因此当PV发布后,很多人都对这套设计感到新奇,他们都向和田和久提出疑问,说为何这套UI会制作成这样?

提起这套独特的UI的诞生,和田和久说,这还要回归到《女神异闻录》系列的发展中,因为第三作是一个重大的转折点。

《女神异闻录 5》的 UI 设计

2000年,《女神异闻录2 罚》发布,但在时隔六年后,我们才迎来了《女神异闻录3》的诞生。第三作被誉为本系列新时代的开启,不仅美术风格大为革新,而且还承担着“拓宽玩家群”的这一设计责任(即使这一作的开发预算很低),这在当时已经不仅是一个目标,而是一个必须要实现的任务。

和田先生说,当时Atlus开发部深陷于一个游戏叫好不叫座的危机,《女神异闻录3》希望能打破这个局面,即使开发预算有限也必须要成功,这就让《女神异闻录3》的开发策略演变成以市场为导向。

《女神异闻录 5》的 UI 设计其中衍生出来的一个方针就是在UI上的“彻底强化”,也可以理解为是全面增强——就好像是从一个默默无闻的无名英雄,变成舞台上的抢眼主角。这也是Atlus陷入危机后所选择的必然方向。《女神异闻录 5》的 UI 设计

丨 如何兼顾作品的形象设计和信息传播?

Atlus艺术总监兼首席设计师须藤正喜对具体的UI设计进行了演讲。他表示自己18年前就已经加入了Atlus工作,而入社的时候和现在的UI设计流程几乎没有发生什么变化,甚至使用的工具都是一样的,包括像Photoshop,Adobe Illustrator,After Effects等等。

《女神异闻录》系列的UI,除了要达到游戏UI本身具备的“传达信息”的目的,还兼顾着“构筑作品主导的美术设计风格”的任务,以及担负着把游戏包装成”有价值的游戏“的重大使命。

想要做出那样的UI,首先是要确定主色调,因为色彩能够给人们留下深刻的印象;一旦主色调确定了,游戏的标识也应运而生,主字体也随之而确定。

《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计比如在《女神异闻录3》中,主色调是蓝色的;《女神异闻录4》的主色调则为黄色;而《女神异闻录5》的主色调又变成了红色。Atlus将日常生活中极为常见的颜色和形状相组合,从而极大降低了游戏的认知门槛。《女神异闻录 5》的 UI 设计接下来要确定的是子色调,在《女神异闻录3》中,游戏中的月相变化系统使用的黄色,便被当做了子色调;《女神异闻录4》中则使用了多色条纹设计,这与本作剧情的起点“深夜电视连续杀人事件”相呼应,菜单文字则使用黑色作为底色,以便在中和华丽色彩的同时不至于让玩家失去关注的重点。《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计到了《女神异闻录5》中,为了能让激情的红色更加醒目,须藤先生决定尽可能地不加入子色调。那么在不同颜色的部分应该如何保证其“视觉可辨识度”,就成了必须要解决的问题。《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计当玩家在读取文本信息的时候,好的设计应尽可能避免视线被阻隔。为了在《女神异闻录5》中的动态UI上实现流畅的阅读,须藤先生引入了带有“视觉引导线”的设计,因为人眼对线条有着天生的敏感。你在《女神异闻录5》菜单画面上会发现,中央便有一条白色的引导辅助线,菜单内容沿着白线整齐排列,从而起到了引导视线不受阻碍地读取信息的作用。

《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计另外还有一些帮助玩家读取信息的小设计,比如当选项向下移动的时候,布局和角度也会随之变化;为了让重要的信息更加直观,底层背景还会不断闪烁;优先级较高的区域对比度也会更高,没有那么重要的信息对比度则会比较低。《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计至于伴随菜单一同出现的3D模型效果,则是通过特殊工具实现的。须藤介绍说,首先他会在Photoshop中做一个设计初稿,交给动作设计师为其添加动作,再使用特殊工具进行组合;当3D模型的动作确定后,须藤再在2D插画中匹配相应动作,以便最终效果尽可能不产生偏差。

《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计

设计和构图一旦被确定,接下来就是数据的处理工作。在《女神异闻录5》中,战斗和菜单等不同UI的部分,都是由专属程序员负责的。设计师把坐标指定书交给程序员,并在程序员旁边进行一对一的检查确认,随时进行框架上的调整。

这些提前设计好的、像俄罗斯方块一样的贴图纹理数据,一方面可以让《女神异闻录5》的游戏容量更轻量化,另一方面也是为了可以基于PS3/PS4两个平台的不同分辨率下,都尽可能实现相同的画面质量。这部分程序员应该是做了巨大的工作,也确实很耗费人力。

《女神异闻录 5》的 UI 设计最终,《女神异闻录5》付诸于纸面的坐标指定书可能有上千张,须藤先生也表示这真的是一种非常古老的游戏开发方式。但是,如果只需要设计师来决定UI,那只要他一个人的想法就足够了。但当这些想法经过程序员之手,也吸纳了程序员自己的想法,便让UI的品质获得进一步提升。

《女神异闻录 5》的 UI 设计

《女神异闻录5》的UI设计证明,风格化和可用性并非是一场零和博弈的游戏,相反,这更像是一个决定优先级的过程。事实上,《女神异闻录5》的开发团队所思考的是让UI如何融入到游戏主题之中,甚至是进一步去强化剧情的渲染力,这也是Atlus在这三代《女神异闻录》系列作品中所一直强调、学习并改进的要素。

须藤先生最后谈到自己的抱负的时候说道,今后也想继续做凭直觉、能够随心所欲引导玩家的UI设计工作。这种随心所欲包含着有趣,也包含着惊喜,而UI设计也应该是一个更生动形象、更有娱乐价值的事情吧。

截图欣赏

 《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计 《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计《女神异闻录 5》的 UI 设计    

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,082
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,557
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,406
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,179
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,815
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898