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

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

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

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

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

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

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

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

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

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

具体强化的方面,包括有加强标题栏颜色的醒目程度、包装效果等,以达到以低成本提升用户体验的目标

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

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

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

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

比如在《女神异闻录3》中,主色调是蓝色的;《女神异闻录4》的主色调则为黄色;而《女神异闻录5》的主色调又变成了红色。Atlus将日常生活中极为常见的颜色和形状相组合,从而极大降低了游戏的认知门槛。

Atlus的另一款作品《凯瑟琳》使用了独有的桃红色,由于是专属的油墨调色所以在打印海报的时候,还要花费更高的成本。

接下来要确定的是子色调,在《女神异闻录3》中,游戏中的月相变化系统使用的黄色,便被当做了子色调;《女神异闻录4》中则使用了多色条纹设计,这与本作剧情的起点“深夜电视连续杀人事件”相呼应,菜单文字则使用黑色作为底色,以便在中和华丽色彩的同时不至于让玩家失去关注的重点。

到了《女神异闻录5》中,为了能让激情的红色更加醒目,须藤先生决定尽可能地不加入子色调。那么在不同颜色的部分应该如何保证其“视觉可辨识度”,就成了必须要解决的问题。

除了HP和MP条,《女神异闻录5》中的UI几乎没有引入其它的子色调

《女神异闻录5》游戏主题参考了“流行朋克(Pop Punk)”的文化概念,“流行”意味着它的大众意向,“朋克”则彰显了它反体制的一面

当玩家在读取文本信息的时候,好的设计应尽可能避免视线被阻隔。为了在《女神异闻录5》中的动态UI上实现流畅的阅读,须藤先生引入了带有“视觉引导线”的设计,因为人眼对线条有着天生的敏感。你在《女神异闻录5》菜单画面上会发现,中央便有一条白色的引导辅助线,菜单内容沿着白线整齐排列,从而起到了引导视线不受阻碍地读取信息的作用。

另外还有一些帮助玩家读取信息的小设计,比如当QQ号转让平台选项向下移动的时候,布局和角度也会随之变化;为了让重要的信息更加直观,底层背景还会不断闪烁;优先级较高的区域对比度也会更高,没有那么重要的信息对比度则会比较低。

我们可以从两组动态图中,更直观看到菜单栏的效果

至于伴随菜单一同出现的3D模型效果,则是通过特殊工具实现的。须藤介绍说,首先他会在Photoshop中做一个设计初稿,交给动作设计师为其添加动作,再使用特殊工具进行组合;当3D模型的动作确定后,须藤再在2D插画中匹配相应动作,以便最终效果尽可能不产生偏差。

这是须藤正喜在设计稿阶段未被采用的UI素材,可以看到他也有尝试在主菜单使用子色调的效果(下排中间)

这个主人公的姿势,就好像是好莱坞明星对着狗仔队的摄像头说“不要拍”

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

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

设计师向程序员说明画面效果的时候,通常会用上手势和肢体语言,甚至有时会通过拟声词来表明

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

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

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

《女神异闻录5》那套酷炫界面的背后,是18年来的始终如一相关推荐

  1. 平台允许同时在线人数 显示_《女神异闻录4G》Steam同时在线人数创新纪录

    据外国媒体VG247报道,于6月14日发售的Steam版<女神异闻录4 黄金版>,刷新了 Steam 平台单机 JRPG 同时在线游玩人数纪录. 该纪录此前一直由 Square Enix ...

  2. MacBook通过XGP玩女神异闻录5皇家版不踩坑指南

    XGP是微软Xbox游戏通行证服务,全称Xbox Game Pass,俗称西瓜皮. 女神异闻录5皇家版(P5R)登录了全平台,XGP会员可以通过云游戏在MacBook中游玩,本篇为MacBook玩P5 ...

  3. 易买网更多新闻代码_《女神异闻录5》新网站源代码内藏玄机 4月25日有更多情报...

    ATLUS(阿特拉斯)突然开了一个<女神异闻录5 S>的网页,网址为p5s.jp,页面的信息是4月25日将公开更多信息,除此以外并没有太多的纸面情报. 而技术宅们则发现,在网页的源代码中, ...

  4. 昭和女神异闻录——中山美穗

    女主闺蜜抢走女主男友,女主调教闺蜜儿子跟自己发生关系.闺蜜差点上了女主爸爸,前男友突然对女主恋恋不舍,女主又给上过的闺蜜儿子找了个小姑娘泄欲.三观奇特的重口味日剧<贤者之爱>的套路真是越来 ...

  5. 女神异闻录5(p5)系统拆解

    目录 前言 系统拆解 生活系统,时间系统 战斗系统,人格面具系统以及数值系统 总结 另外 前言 作为一个对回合制战斗不怎么感冒的人,仍然爱上了p5.总结了一下感觉不光是剧情戳到了我的中二之魂,这个游戏 ...

  6. 闲聊: 女神异闻录4

    最近在玩P4G, 将近一周目. 觉得游戏制作的非常不错. P4G是AVG和回合RPG结合的风格. 比较感兴趣的是到了冬季, 所有场景都变成白雪覆盖. 这个要处理的东西其实还是蛮多的: 出了飘雪以外, ...

  7. java怎么设计好看的界面,javaswing酷炫界面 java swing界面设计

    java swing怎样开发出漂亮的界面 Swing 支持切换界面风格啊 默认的是Metal风格,确实不好看 你可以切换为Windows风格,看起来和Windows上的程序就是一样滴了,还可以切换为苹 ...

  8. java swing 页面布局方式_javaswing酷炫界面

    java swing怎样开发出漂亮的界面 Swing 支持切换界面风格啊... 默认的是Metal风格,确实不好看 你可以切换为Windows风格,看起来和Windows上的程序就是一样滴了,还可以切 ...

  9. 六个酷炫动图背后的数学问题

    今天为大家展现一些有趣的视觉现象及其背后的数学问题: 一.直与弯 咦?一根直杆为什么能从弯曲的洞中穿过? 想想这其实不奇怪.这根杆是斜着的,杆中间的点离旋转轴最近,因此对应的洞上的点离旋转轴也最近:杆 ...

最新文章

  1. (C++)用指针实现两数交换函数swap()的两种方法
  2. 面试官问一个数据表字段怎么表示多种业务含义?我愣了五分钟
  3. MusicXML 3.0 - DTD 速查
  4. CCF真题 201312-2 ISBN号码
  5. django-重写登录认证(可以使用用户名或手机号登录)
  6. Windows驱动程序调用约定
  7. OpenResty(nginx)限流配置实现
  8. mysql5.7存储json_MySQL5.7的json数据格式的问题
  9. textarea 滚动条属性设置
  10. Java白皮书的关键术语
  11. 聚类系数与小世界网络
  12. ISBN(国际标准书号)
  13. LaTeX:多张图片排版
  14. 《正则表达式深入浅出》开放下载,快快收藏!
  15. ElasticSearch之TermQuery和MatchQuery
  16. Linux关于ls的命令有哪些,关于linux中ls意思,LS什么大全
  17. openfass学习及使用
  18. 28.多表查询——跨关联关系的多表查询
  19. 测试必须要知道的四个主要阶段
  20. 短信验证码/邮箱验证码的发送及防刷校验

热门文章

  1. 专业计算机和游戏计算机配置要求,游戏直播电脑配置要求2019|游戏直播电脑配置单推荐(可装win7)...
  2. 基于51单片机直流电机PWM调速设计
  3. matlab [c, lags]=xcorr(y1,y2) 转python
  4. 计算机用户名的数值数据是什么,计算机数据最基本的单位是什么?
  5. 基于asp.net170CRM客户关系管理系统
  6. vscode能写winform窗体吗_vs code 写C#心得
  7. Visual Studio如何在一个解决方案下创建多个独立项目并单独运行
  8. 软件测试工程师面试的时候该怎么样介绍自己?你的简历是不是该优化了
  9. nc65右键生成菜单_NC65管理员层级管控
  10. 2017安防民用市场现状及特点浅析