人气 2547

[其他] 如何评价《女神异闻录5》的UI设计? [复制链接]

9uhk 2018-1-16 19:29:57

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x
感觉这个界面很炫酷,以前也看过类似的设计。这种设计应该叫什么名字?如何评价这种设计?
回复

使用道具 举报

Dopsscala 2018-1-16 18:51:58
实测证明,哪怕把人物头像换成中国土豪,模样也依旧时髦:
Fwe883OlCkXxdo8c.jpg
回复 支持 反对

使用道具 举报

萍。 2018-1-16 18:56:25
在对的方向上一路坚持,终可成就伟大。
作者丨慕斯


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


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


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

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


当然在宣传视频里的惊鸿一瞥里想要全面了解UI并不容易,而UI也是《女神异闻录5》不可忽视的一大特色。因此当PV发布后,很多人都对这套设计感到新奇,他们都向和田和久提出疑问,说为何这套UI会制作成这样?
提起这套独特的UI的诞生,和田和久说,这还要回归到《女神异闻录》系列的发展中,因为第三作是一个重大的转折点。
s5eLib5sQ2lrX5Li.jpg


2000年,《女神异闻录2 罚》发布,但在时隔六年后,我们才迎来了《女神异闻录3》的诞生。第三作被誉为本系列新时代的开启,不仅美术风格大为革新,而且还承担着“拓宽玩家群”的这一设计责任(即使这一作的开发预算很低),这在当时已经不仅是一个目标,而是一个必须要实现的任务。
和田先生说,当时Atlus开发部深陷于一个游戏叫好不叫座的危机,《女神异闻录3》希望能打破这个局面,即使开发预算有限也必须要成功,这就让《女神异闻录3》的开发策略演变成以市场为导向。
Jt1uXL2iRATm1xX2.jpg


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




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

Atlus艺术总监兼首席设计师须藤正喜对具体的UI设计进行了演讲。他表示自己18年前就已经加入了Atlus工作,而入社的时候和现在的UI设计流程几乎没有发生什么变化,甚至使用的工具都是一样的,包括像Photoshop,Adobe Illustrator,After Effects等等。
《女神异闻录》系列的UI,除了要达到游戏UI本身具备的“传达信息”的目的,还兼顾着“构筑作品主导的美术设计风格”的任务,以及担负着把游戏包装成”有价值的游戏“的重大使命。
想要做出那样的UI,首先是要确定主色调,因为色彩能够给人们留下深刻的印象;一旦主色调确定了,游戏的标识也应运而生,主字体也随之而确定。
Ri4102DQuU8qUzDm.jpg


oboWuXmnNNiwWlW3.jpg


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


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


oBXbnUZ3ALexGuEn.jpg


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


QxvZTZckLvs1qK1k.jpg


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


uY7iQiqsR51sQe1Q.jpg


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


uSqGKxkuQ99sMyGY.jpg


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


JxRqrX6xDIC38Rg7.jpg


B8918n8GTq91QaZa.jpg


设计和构图一旦被确定,接下来就是数据的处理工作。在《女神异闻录5》中,战斗和菜单等不同UI的部分,都是由专属程序员负责的。设计师把坐标指定书交给程序员,并在程序员旁边进行一对一的检查确认,随时进行框架上的调整。
这些提前设计好的、像俄罗斯方块一样的贴图纹理数据,一方面可以让《女神异闻录5》的游戏容量更轻量化,另一方面也是为了可以基于PS3/PS4两个平台的不同分辨率下,都尽可能实现相同的画面质量。这部分程序员应该是做了巨大的工作,也确实很耗费人力。
hV2MQq66MqJMd6JD.jpg


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


《女神异闻录5》的UI设计证明,风格化和可用性并非是一场零和博弈的游戏,相反,这更像是一个决定优先级的过程。事实上,《女神异闻录5》的开发团队所思考的是让UI如何融入到游戏主题之中,甚至是进一步去强化剧情的渲染力,这也是Atlus在这三代《女神异闻录》系列作品中所一直强调、学习并改进的要素。
须藤先生最后谈到自己的抱负的时候说道,今后也想继续做凭直觉、能够随心所欲引导玩家的UI设计工作。这种随心所欲包含着有趣,也包含着惊喜,而UI设计也应该是一个更生动形象、更有娱乐价值的事情吧。
本文参考来源:
原文标题:《『ペルソナ5』のカッコよすぎるUIの制作工程を紹介!アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC+KYUSHU 2017】》
作者:ロマンシング★嵯峨
原文链接:
触乐邀请到了三名热爱游戏的玩家带来了一个知乎Live专题——。通过他们的分享,希望能拓展你对游戏的认知。详细介绍:
H775wLcDEJlIBPcd.jpg
回复 支持 反对

使用道具 举报

liujiajia796 2018-1-16 19:01:35
pop和涂鸦风格的结合,大胆的运用红与黑两个主色调进行ui设计是P5最大的特色。

红色在P5的主色调中承担的是底色的职务,象征着热情、都市的喧哗、突出的是游戏内容丰富的一面。黑色则构成人物群的底色,契合他们被排挤的边缘人身份,也点出他们是暗夜下反抗者的另一面。战斗中典型的构图如下:
GyPpWwp2Z6v6PPRe.jpg




大量运用斜角对称是P5设计的另一个特色,玩家第一直觉是强烈的不规则感,但又巧妙的统合成协调的风格。
vbH4t127RbaJrHTf.jpg


比如这张图中的战斗ui,几乎找不到一处中规中矩的平衡性设计,但同时又突出地统一的指向玩家操作的人物上,巧妙地将玩家注意力引导到当前应该操作的角色上,功力非常老辣。

这些都是为了突出反逆和躁动的青年特性而特化的设计细节,很好的达成了设计师想要的效果,可以说是近年来最有艺术感的ui设计了。
回复 支持 反对

使用道具 举报

583261986 2018-1-16 19:06:23
o0p0iwJA6N7drdP1.jpg



设计的不错,我天美就不客气了
回复 支持 反对

使用道具 举报

沙地民谣网 2018-1-16 19:11:35
很多游戏在“抄”P5的UI,就足以证明这个UI有多成功了。
然而恕我直言,大部分抄的都没抄出感觉来。
首先整个界面的元素都是扁平而且不带渐变的,于是不扁平或者带渐变的抄袭,卒。
然后,界面的色调非常单一,总体是红黑白,只有极少量必须要区分开来的元素(例如HP、SP条,以及属性图标)才用了明显不同的颜色。于是,界面上一般元素也用了其他颜色的抄袭,卒。
然后,界面的对比度非常的高,色彩分明,一般不会红底黑字这种奇怪的搭配,从而让P5一定程度上能抵抗视频压缩(虽然说Atlus原本也没打算让你录像就是了),因此配色对比度低的抄袭,卒。
最后,主要元素和次要元素的区别非常明显。P5里次要元素常常是普通文本,而主要元素会用很花哨的拼凑文字而且并不重复,尺寸明显加大,有时候还附带动画效果来利用人眼的动态视觉,因此主要元素做得很随便的抄袭,以及拼凑文字重复程度爆表的抄袭,卒。


(顺带,P5有可能给UI上了胶粒滤镜,但是因为我没玩过实机,貌似视频里没看出来。)
回复 支持 反对

使用道具 举报

陶勾 2018-1-16 19:16:56
这个UI的毛病大家都看得到,获取信息效率低,晃眼。
但是P5作为一个PS3游戏,在PS4生命中后期推出,不靠风格化撑腰画面根本不堪入目。你看主画面上,突出显示、去色、加速模糊、晃动,所有动画效果能上的都上了。相对来说UI就不显得那么突兀了。
“画面很烂但是很酷炫”就是大家要的效果(话说P6的主题色还能用什么颜色,绿?紫?)


已经被日本人当作了万能UI,我TM还能说什么?
光荣新无双
HSyLRl9AL14AXzw0.jpg
回复 支持 反对

使用道具 举报

9uhk 2018-1-16 19:22:18
UI艺术风格贴切题材,剪纸涂鸦很拉风,但不甚友好。P5的UI怪诞张扬,P4的UI时尚风骚,个人更喜欢前作UI。
回复 支持 反对

使用道具 举报

eqwov 2018-1-16 19:26:58
这个游戏的UI,只看静态图片只能感受到40%吧。
充分展示了UI动效的作用。说动效我觉得有点太简单了,应该是融入动画的UI。
                              【电玩巴士】《女神异闻录5》演示预告—在线播放—优酷网,视频高清在线观看                http://v.youku.com/v_show/id_XMTYwOTE2MTQ2NA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0#paction
回复 支持 反对

使用道具 举报

Alys-Poit 2018-1-16 19:31:28
女神异闻录的UI设计一向都是这么有个性~虽然违背了很多UI设计的原则。
但是同时也说明了我们中国很多UI设计师总是被原则框的太死了,A社从来不想这么多,设计我自己想要的就OK了。
另外说明一下  P系列从3开始每一代都有一个主题色。我玩过的P3P是蓝色的,P4G是黄色的,P5是红色的。让我想到了另一个游戏,就是零系列,第一代是灰色,第二代是红色(对应红蝶),第三代是蓝色(对应刺青之生),第四代是黄色(对应月食的假面),
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-3-29 05:32 , Processed in 0.114594 second(s), 28 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.