《暗喻幻想》都在用的控件设计 — 觉醒吧，会制作喷溅效果的Persona！| 设计技巧

是什么设计能得到Altus的青睐，出现在《暗喻幻想》的控件设计中？这种方法又该如何运用在自己的设计上？本期设计技巧将带你揭秘雨宫莲用了都说好的喷溅效果控件设计，据说认真学完的同学都觉醒了能让笔自己画画的Persona啦！

（本文共2000个字，阅读需6分钟）

2024年10月11日，由Atlus倾情打造的暗喻幻想全平台发售。Atlus想必大家都不陌生，真女神转生、女神异闻录Persona系列都是Atlus开发的作品。

不知道大家在玩《暗喻幻想》的感受是什么，作为一名UI设计师，我认为《暗喻幻想》是一款非常垂直的作品。

要玩法，

要剧情，

要设定，

 

感觉Atlus不是为了再续《P5》，而是花了8年时间给散播在世界各地孤独又风骚的UI设计师们写了一首情诗：

设计似水，艺术如梦，

。

所以今天，我们就来聊聊《暗喻幻想》的UI是如何实现的，以及如何通过PS实现类似的效果呢？

提到游戏UI，最直观的例子就是游戏的菜单栏。

在阿特拉斯的前作《P5》中，游戏UI使用了现代时尚的波普朋克风，黑红配色加上漫画风格的波点和线条排布让整个界面极具视觉冲击力。

选中框多以棱角分明，且不停闪烁的几何图形为主。目的是为了契合朋克夸张又尖锐的个性。

而到了以中世纪为主题的《暗喻幻想》，自然不需要那么强烈的现代风格，而是采用了类似手绘和喷溅效果的线条，勾画出了中世纪背景下魔法与科技并存的联合王国乌克罗尼亚。

当我们把界面动效慢速播放，我们会发现《暗喻幻想》的选择框本质上就是不同笔触的喷溅效果图层，通过叠加后，循环播放实现的。

大量斜角对称和喷溅颜料风格，也出现在战斗UI中。这种风格给人的第一观感是强烈的不规则感，但同时又牢牢拿捏玩家的视觉心理，让玩家的视觉重心指向在操作的人物身上。

下面，孙老师就带你上手实操，一步一步揭秘控件设计的千层套路。

首先，我们先在PS里拉一个box，把想写的文字打在上面，确保字体简洁，和背景的对比清晰。

接着上素材，搜索的时候注意关键词，我们可以搜墨迹、丙烯肌理、油画泼溅等，优先使用实拍素材。

我这里选择了干的、湿的和抽象的油墨三种素材。

第一步我们用干的油墨素材做喷溅层，创造出按键边缘的随机感。注意这一层放在黑色box的下面，通过缩放、旋转素材，匹配按钮轮廓，避免直接拉伸导致变形。

之后创建蒙版，使用干燥肌理画笔在蒙版上对衔接部分进行修整，让喷溅效果更自然，多一些肌理感的变化。

第二步用湿的油墨素材做晕染层，把晕染层放在喷溅层的下面，可以多叠几层。用变形与旋转，调整素材形状，同样用肌理笔刷在蒙版上对衔接处进行调整，注意虚实结合。

第三步用抽象的油墨素材做纹理层。

将之前的调整图层进行打组，把抽象油墨素材放在最上面，创建剪贴蒙版。

我们主要用这张素材的纹理，所以我们去掉饱和度，降低透明度，只保留去色后的纹理。

有了黑白的纹理基础之后，上颜色就非常的简单了。我们在最上方新建图层，填充颜色，创建剪贴蒙版，调整图层模式，我这里选择填充绿色，比较养眼对吧，图层模式选择变暗。

 当然你也可以根据效果多尝试几种不同的图层模式和颜色。

我们观察游戏界面可以看到，除了作为主体的按键，背景上直线、圆环等⼏何元素也是丰富UI构成的关键，

。

这种效果其实也非常的简单啊，我们用形状工具绘制出线段和圆形，用笔刷制造一些不规则的断点。

我们加一个反相图层啊，这个界面看上去是不是一下子就有那味儿了。

我们把这些控件放到游戏的背景界面看一下。把按键放在左下角，把线段和圆圈叠上去，旋转一下角度。不能说一摸一样，只能说毫无违和感，到这里呢一个暗喻幻想的原装控件组合就做好了。

暗喻幻想的UI设计，以及游戏中的PV和场景，都可以看出对达芬奇的维特鲁威人手稿的借鉴。

这说明了什么，说明看了这篇设计小妙招，

！

其实啊，随着生活节奏越来越快，JRPG式的王道剧情在今天的视角来看比较套路化。

身为勇者的主角离开家乡，经历一场场冒险，邂逅一个个伙伴，打败魔王，营救公主，最后解甲归田。

但在这个世界中，不论遇到怎样的困难，总有站在背后共患难的伙伴，迷宫之中必有宝箱，宝箱之中必有财宝，会有NPC给你披荆斩棘的武器，魔王也会在伙伴们的联合技下被打败。历尽千辛归来时，妈妈早已给你做好热腾腾的饭菜。努力会有回报，期待会有回应，RPG的世界就是遵循着这样一种，合理又真实的运行逻辑。也许是因为现实有太多的懊糟和挫败，这片精神乌托邦中描绘的冒险、探索和羁绊才会经久不衰，令人心向往之吧。

那么，今天的分享就到这里啦，如果你喜欢我们的分享内容，别忘记点赞，转发和收藏。同学们对操作步骤有疑问，或是有其他想了解的设计技巧，欢迎在评论区留言，期待与同学们的互动！