《女神异闻录 5》UI 是什么风格？
《女神异闻录5》证明了菜单也可以是一次反叛：黑、血红与白色剪纸块，全都歪着，斜斜地劈过屏幕。
《女神异闻录 5》UI 速览
《女神异闻录5》的界面，是 Atlus 在 2016 年推出的这款角色扮演游戏的用户界面语言。游戏讲述一群东京高中生过着双重生活，夜里化身“心之怪盗团”，偷走腐败成年人扭曲的欲望。它被广泛认为是那十年里被引用最多的游戏界面，即便从没玩过这款游戏的设计师，看一张截图也能认出它。
这套外观几乎是用“什么都没有”搭起来的：黑色底面、一种血红，加上白色的剪纸块。菜单文字歪斜、相互叠压，面板边缘是撕纸般的锯齿，标题像勒索信那样，用剪下来的各种字体逐字拼贴。没有任何柔软的东西：色块像印刷油墨一样平涂，阴影是硬边的偏移，转角从不圆润，转场也不淡入淡出，而是沿着对角线一刀劈进来。
核心思想是“把态度做成系统”。屏幕上的每个元素都像是被某个匆忙的人剪下贴上去的，而这个人又清楚地知道自己在做什么。在表面的混乱与严密的控制之间，这种张力，正是令人信服的 Persona 5 风格与单纯的杂乱之间的分界线。
《女神异闻录 5》UI 从何而来？
《女神异闻录5》于 2016 年 9 月在日本发售，2017 年 4 月登陆全球，增强版《女神异闻录5 皇家版》则在 2019 年 10 月推出。它由 Atlus 开发，系列制作人桥野桂（Katsura Hashino）主导。游戏中反抗窒息的权威、隐藏身份、以及改变自己内心的自由，这些主题从第一个菜单起就被映射到了界面里。
视觉概念由系列长期的美术总监兼角色设计副岛成记（Shigenori Soejima）推动，他在更早的《女神异闻录》作品中已经确立了时髦、带波普气息的外观，而本作把这种感觉推得更远。负责用户界面设计的须藤正义（Masayoshi Sutoh）被认为创造了游戏里大量动态菜单语言，赋予它那种坐立不安的能量：每个画面都像带着一个花哨的动作进场，再以一刀剪切退场。目黑将司（Shoji Meguro）的爵士与酸爵士风格配乐完成了最后一环，界面与音乐被设计成同一个动作。
这种风格有三个来源。第一是日式角色扮演游戏本身，这个类型历来菜单繁多，界面要在屏幕上停留数小时，所以一套有辨识度的菜单就成了签名。第二是朋克小报与勒索信式的拼贴，也就是同人志、抗议海报和匿名信里那种剪贴式字体，它提供了不统一、被剪裁的字形，以及“匆忙中手工完成”的感觉。第三是绅士怪盗的流浪汉小说传统，那种优雅亡命徒的浪漫形象，解释了为什么这场反叛如此衣着考究。
由于背景设定是当代东京，设计也借用了城市日常的图形噪音：店招、杂志、电车广告。但它把这一切都过滤进严格的色彩纪律里，这正是成品显得统一而不杂乱的原因。发售以来，这套界面被模仿、被戏仿，也被游戏设计课程当作教学范例，影响延伸到音乐流媒体的宣传和时装画册等领域。
《女神异闻录 5》UI 的视觉特征是什么？
色彩
几乎纯黑的底面、一种饱和的血红，加上白色，这就是全部色板。红色被当作武器使用，劈在面板、选择条和标题上；白色则留给剪纸块和最重要的文字。由于没有第三种色相，对比总是瞬间可读，哪怕在暗室里匆匆一瞥。
字体排印
标题像勒索信一样搭建，每个字母取自不同的被剪裁字体，有时各自贴在白色或红色的小块上，总是略微旋转。正文与菜单文字厚重、紧凑、对比强烈。规则是“在控制之内求多样”：字母之间可以彼此不一致，但绝不能与色板不一致。
形状与角度
没有什么是水平的，也没有什么是圆的。面板边缘锯齿状或撕裂状，长方形被切成倾斜的多边形，文字坐落在歪斜的基线上。零圆角与斜向切割带来速度与攻击性，仿佛每个元素都是被一把刀划出来的。
表面与阴影
色块平涂，像一次印刷就压上去的油墨，没有渐变，也没有光晕。阴影是硬边的偏移，仿佛第一层纸后面还垫着第二层纸。整体效果是一叠剪纸，而不是被打光的三维场景。
动态
转场不溶解，而是劈砍。元素沿对角线扫入，啪地定位，再以同样果断的一刀离开。动态迅速、有节奏，并与音乐相扣，目的是让每一次选择都像一桩事件。
层叠与密度
画面密集但可读。多个歪斜的图层相互叠压，层级却始终清晰，因为最重要的项目总是以白色或红色压在黑底上。密度本身就是反叛的一部分：它拒绝企业界面那种整洁、宽松的面貌。
谁塑造了《女神异闻录 5》UI？
Atlus《女神异闻录》系列的导演兼制作人。他把本作引向反叛与个人自由的主题，并坚持界面应当表达这些想法，而不仅仅充当功能层。
系列美术总监兼角色设计师。他带有波普色彩、对比强烈的插画风格定义了本作的外观，并赋予界面一种时髦的挑衅态度。
用户界面设计师，被认为创造了游戏里大量动态菜单语言：画面以斜切的方式进出，转场快速而有节奏。
配乐作曲家。他带爵士味道的高能量音乐与界面密不可分，菜单是随着节拍编排的，所以这种风格读起来像一场表演，而不只是一种版式。
今天怎么用《女神异闻录 5》UI？
做幻灯片时，先从封面入手。黑色底面、由各不相同的剪纸字母拼成并贴在白红色小块上的标题，再加一道红色斜线，比任何照片都更有力。内容页保持深色底与白色文字，只用红色标记唯一重要的项目。可以让少数元素略微倾斜，但主文字块要尽量接近水平，让观众仍然读得清楚。
做数据页时，把每张图表当成一块剪纸。让带斜边的白色面板压在黑底上，关键数据系列用红色，其余用白色或浅色，标签使用厚重、高对比的字体。在撕边的块里把一个醒目的大数字放大，往往比密密麻麻的表格有效得多。
做网页界面，如仪表盘和定价页，这种风格适合游戏、音乐、娱乐、街头服饰和青年文化类产品。定价页可以把每个档位做成黑底上的歪斜白块，推荐档位用红色突出。导航可以使用斜切的选择条和对角线扫入，但表单和长文要放在平静、水平的表面上，因为阅读正是这种风格最容易伤害的东西。
做编辑与营销内容时，这种风格擅长活动海报、发布预告、音乐节阵容和小报式封面。勒索信式标题、克制的色板和锐利的偏移阴影，能让一场活动立刻拥有个性。每一个张扬的元素都要搭配一块安静、可读的区域，让观众始终知道眼睛该在哪里休息。
最常见的错误，是把这种风格当成混乱的许可证。Persona 5 其实控制得非常严：三种颜色、硬边、一致的角度。多加几种色相、柔和阴影、圆角或渐变，它就会变成泛泛的“颓废风”。第二个错误是把所有东西都歪过来，包括长段落；应当只倾斜标题和装饰块，让正文保持可读。
《女神异闻录 5》UI · 常见问题
Persona 5 的界面风格是什么？
它是 Atlus 2016 年那款角色扮演游戏的界面语言：黑色底面、一种血红和白色剪纸块，配以歪斜的菜单文字、锯齿状面板边缘、勒索信式标题、平涂色块、硬边偏移阴影、直角转角，以及沿对角线劈入的转场。它通过严格而一致的规则来表达反叛。
为什么这种风格只用黑、红、白？
克制正是让张扬成立的原因。只有三种颜色时，每一处对比都立刻可见，即便元素以古怪的角度重叠，界面依然可读。再加更多色相，就会稀释朋克海报式的效果，让版面显得随意，而不是刻意。
它和颓废风或朋克平面设计是一回事吗？
它借用了朋克小报的拼贴，但纪律性强得多。经典的颓废风偏爱质感、噪点和浑浊的叠层，而 Persona 5 使用的是干净的平涂、利落的边缘和三色体系。它看起来叛逆，恰恰因为它如此可控。
能用在严肃的商业产品上吗？
整体搬用的机会不多，但可以借用其中的元素。完整的风格适合娱乐、音乐、时尚和面向年轻人的品牌。对于商业产品，可以小剂量使用，例如活动页或功能亮点，而把核心界面保持得更平静、更水平，方便长时间阅读和数据录入。
所有东西都歪着的时候，如何保证文字可读？
只让标题、小块和装饰块倾斜，段落保持水平。把正文放在纯白或纯黑的面板上，保证强对比，限制行长，红色只用于强调，不用于长段落。让反叛保持可读的，正是控制。
