设计风格指南
什么是 miHoYo Game UI？
米哈游把抽卡背包界面变成了一场仪式——靛蓝星海、金箔边框、宝石色元素徽章，让每一次拉取都像开启圣物匣。
miHoYo Game UI 速览
米哈游游戏 UI 是上海米哈游工作室在《原神》（2020）、《崩坏：星穹铁道》（2023）与《绝区零》三部旗舰作品中发展出的视觉语言。它是当代游戏行业影响力最大的中国原创界面美学，也是第一套被全球设计媒体作为完整、自觉风格体系而非类型惯例加以认可的抽卡游戏设计系统。
这套系统建立在暗夜靛紫画布之上，令人联想到星空或深海档案馆。在这片底色之上，带角隅花饰的华丽卡片边框——呼应中式古典纹样与新艺术主义卷草纹——容纳着角色立绘、技能描述与装备属性。七色元素调色板（火、水、冰、雷、草、风、岩）提供了主要强调词汇，每种色相对应游戏内的一种元素属性，并在固定角色中重复出现：图标芯片、进度环、激活态发光。
这套排版系统以带幻想气质的衬线展示字体——用于角色名、章节标题与祈愿横幅标题——搭配温暖的几何体正文，承担菜单、属性数值与教程文字的任务。这种搭配刻意拒绝了统治西方游戏 UI 的企业极简主义，转而提出一种卷轴典籍式的宏大感：信息密度与装饰丰富性共存，却不产生视觉混乱。
miHoYo Game UI 从何而来？
米哈游由蔡浩宇、刘伟和罗宇皓三位上海交通大学毕业生于2012年在上海创立，最初以制作受日本动漫美学启发的手机游戏起家。工作室的早期作品——包括2016年开始的《崩坏》系列——建立起以高对比度角色立绘、戏剧性光照效果和信息密集面板为核心的内部视觉语法。这些早期作品在东亚和东南亚取得了商业成功，但在西方设计圈几乎不为人知。
这套设计语言随《原神》的开发而趋于成熟。《原神》于2020年9月全球上线，其 UI 团队参考的资料来源比此前任何米哈游项目都更广泛、更兼收并蓄：中国传统装饰艺术贡献了角隅括号纹样与金箔边框词汇；日式 RPG 界面惯例提供了属性面板与技能排布的模型；天文与炼金手稿的美学——无论欧洲还是东亚——则赋予了星域背景与装饰花饰以灵感。将 UI 做得像档案典籍般珍重，而非光滑现代，是一个刻意的反向定位——对抗当时西方手机游戏中流行的平面、中性界面。
2020年至2023年间，这套系统随《原神》的版本节奏——大约每六周一次大版本更新——在数百个新角色、活动界面和季节性祈愿组合中被不断延伸与复用，同时保持视觉连贯性。这种生产纪律催生了严格的内部一致性：装饰边框词汇、元素配色体系和排版层级成为承重结构，而非装饰点缀——因为在海量内容的庞大表面上，它们是唯一不变的常量。
2023年4月上线的《崩坏：星穹铁道》证明了这套核心视觉词汇可以被移植到科幻奇幻背景中——以太空歌剧的调性替代开放世界的卷轴感——同时保持鲜明的米哈游标识。UI 团队将主导框架纹样从植物卷草纹转向机械几何与电路板纹理，以更冷、更偏紫的靛蓝替代《原神》偏暖的蓝靛，并引入来自列车时刻表与交通地图的新界面隐喻。这次适配证明这套体系是真正具有建筑性的——一套灵活的语法——而非固定的视觉公式。
miHoYo Game UI 的视觉特征是什么？
深靛底色
基底底色是一种深邃的靛蓝，同时令人联想到夜空、深海与神秘典籍封面。这并非中性的深色模式：它在蓝紫交界处带有可感知的温度，使其不显得冷漠或企业化。其他所有元素——边框、文字、元素芯片——都层叠其上，营造出界面置身于某种立体深度而非平铺屏幕的感受。靛蓝不会与强调色竞争，因为它处于截然不同的亮度层级，深度足以使中等亮度的色相也显现出发光效果。
华丽边框语言
卡片与面板的边框从不是简单的矩形。角隅带有花饰——小括号形、花卉末梢或几何玫瑰花纹——既呼应中式古典装饰边框，也借鉴欧洲新艺术主义框架词汇。这些角隅处理具有结构功能：使人一眼即能确定面板边界，并在容器与内容之间建立视觉层级。边框以金色或镀金色调呈现，与靛蓝底色形成温暖对比；其复杂程度随稀有度变化——普通道具边框较为简洁，五星角色则获得最繁复的处理。
七元素配色体系
七种元素属性——火、水、冰、雷、草、风、岩——各自对应一种独特的强调色：火对应温暖的琥珀红，水对应深青蓝，冰对应冷白带蓝的浅冰色，雷对应鲜艳的紫色，草对应清新的叶绿，风对应柔和的灰绿，岩对应温暖的赭金。这些色相在图标芯片、技能高亮和元素反应指示器中保持一致。这套系统如同语义调色板：一经学习，色彩本身即可在瞬间传达元素类型，降低快节奏游戏中解读图标形状的认知负担。
宇宙渐变与发光
与平面设计系统不同，米哈游 UI 将发光渐变作为传达稀有度与重要性的主要手段。背景面板从边缘较深的靛蓝向中心稍浅或更偏紫的色调微妙过渡，创造出不依赖硬边几何的深度感。五星角色揭示动画与祈愿拉取界面则将这一效果强化为放射状星域效果——画布本身仿佛在呼吸。元素芯片色与激活态边框周围的发光足够柔和，令人联想到内部光源而非屏幕背光，强化了每件高稀有度道具是在发光而非反光的印象。
幻想衬线展示字体
展示字体——用于角色名、横幅标题、章节标题与系统界面标头——采用具有可感知书法感或历史衬线品质的字体，令人联想到手抄本文化而非当代数字界面。这些字体自带分量感与仪式感：以《原神》标头风格排列的角色名读起来是一个称号，而非一个标签。正文与数值则转向可读性更高的几何体或人文主义字体，清晰划分了仪式性文字与功能性文字之间的排版边界。
以密度为丰富感
2015年后，西方手机游戏 UI 趋向稀疏的卡片式排版，以充裕留白和单焦点界面为主流。米哈游的系统明确拒绝了这一惯例，将密度视为正面品质而非待解决的问题。一个典型的角色详情界面同时呈现立绘、命之座星图、六个可展开说明的技能图标、装备槽与属性明细——无需滚动即可全部看到。视觉系统通过边框语言与色彩层级对相关元素进行分组、创建清晰的视觉重量区域，防止这种密度演变为杂乱。
稀有度即视觉语法
这套系统在结构上最为重要的方面，或许是将稀有度正式化为设计变量。三星、四星、五星道具不仅以星数区分：它们存在于完全不同的视觉层级之中。三星背景色调低沉，边框简洁；四星增加了次级边框细节并提升发光强度；五星边框则完全装饰化，带有金箔、复杂角隅处理与最高饱和度的元素色表达。这种渐进关系意味着稀有度在任何文字被阅读之前便已可辨——视觉层级独立于语言之外承载着语义意义。
谁塑造了 miHoYo Game UI？
蔡浩宇是米哈游联合创始人和长期担任总裁。尽管其公开角色主要是管理层面，但行业报道将他认定为工作室美学雄心背后的重要创意驱动力——尤其是坚持将高制作价值角色立绘与密集的世界观叙事相结合。他在《原神》多年开发周期中的领导使工作室确立了在 UI 打磨上投入远超手游惯例、更接近主机级别的实践标准。
米哈游在国际业务中采用 HoYoverse 品牌，旗下 UI 设计团队负责在多款同时运营的活体服务游戏中开发与延伸视觉体系，每款游戏有着不同的类型背景和调性。该团队最重要的成就是在《原神》持续产出的海量内容中维持视觉连贯性，同时为《崩坏：星穹铁道》和《绝区零》设计出与母体相关但各具特色的独立系统。业界观察人士指出，该团队的工作为活体服务游戏的界面工艺树立了新基准。
角色美术总监——其个人姓名在面向公众的传播中并不总是署名——通过概念艺术与最终模型方向界定每位可操控角色的视觉身份。他们的工作与 UI 系统密不可分，因为角色不仅是游戏资产，更是整个界面的核心组织隐喻：横幅界面、档案页面、装备菜单与祈愿结果均以角色立绘为中心设计元素。在角色层面做出的美术方向决策——姿态、色温、元素表达——直接传导至 UI 配色与构图选择。
构建《原神》七国世界的编剧与叙事设计师——每个国家对应一种元素并借鉴一种真实的文化传统——创建了使元素配色体系具有意义而非随意的概念框架。将元素身份与国家身份相绑定、并通过一致的视觉语言同时表达两者的决策，将原本可能只是机械分类学的东西转化为充满世界观内涵的色彩系统。叙事与视觉设计的深度整合，是这套界面在没有设计背景的玩家中也能产生强烈共鸣的原因之一。
今天怎么用 miHoYo Game UI？
米哈游游戏 UI 最适合应用于能从仪式感、稀有度层级与沉浸式暗色中受益的场景——那些界面应当像通往精心策划世界的窗口，而非完成任务的工具的设定。这种风格在演示场景中表现良好，包括游戏项目提案、幻想类产品发布和娱乐品牌视觉识别系统。应用于幻灯片时，最佳做法是将深靛画布确立为所有页面的一致底色，用装饰边框词汇划定内容区块而非每个单独元素，并将元素配色体系重新用作数据或内容类型的分类编码工具。
对于封面与主视觉页面，这种风格支持以人物立绘为中心的大胆构图：角色插画或产品主图占据上方三分之二，由角隅花饰加以框定，标题则以展示字体置于下方稍浅的面板上。章节分隔页面可充分发挥档案美学——在纯靛蓝底面上以大尺度展示章节标题字体，唤起游戏章节开幕卷轴的意象。数据页面需要克制——装饰边框应围绕整个数据区域而非单个数据点，元素调色板应限制为两到三种色相用于分类区分，避免在图表场景中使用会造成视觉过载的完整七色。
对于网页 UI 应用——尤其是仪表板、游戏平台界面、会员等级页面与娱乐订阅产品——当以暗色画布作为主背景、卡片组件采用简化的装饰边框处理、交互状态通过元素发光惯例表达时，这套系统移植效果良好。会员或定价等级页面尤其受益于稀有度渐进逻辑：通过边框复杂度与背景亮度视觉区分等级，而非仅靠颜色或图标数量，使高级等级真正感觉提升，而非仅仅标签不同。导航应遵循排版层级惯例——一级分类使用较大展示字重，二级分类使用较小的几何体正文。
对于编辑与营销应用——活动海报、游戏公告、品牌推广物料与社交媒体卡片——当构图非对称、靛蓝底色延伸至所有边缘、单一元素色强调主要行动号召或主打产品亮点时，这种风格最具表现力。幻想类出版物、带有异世界主题的音乐发行，以及神秘感本身即是卖点的高端产品发布（香水、收藏版、限量发售）均是自然的应用场景。这套系统应被适配而非字面照搬：使用边框语言与配色逻辑，同时将游戏专属元素图标替换为语境适配的符号。
应用这种风格时最常见的错误，是将装饰元素视为在版面完成后再叠加的点缀。在真正的米哈游 UI 中，边框语言是结构性的——它界定空间区域与内容层级。若将装饰边框作为表面处理叠加在既有中性版面上，结果会显得像换了套装而非融为一体。应从暗色画布与边框架构出发，再将内容置于这些区域之内。第二个常见错误是不加区分地使用全套元素调色板：七色系统的设计是在游戏场景中被逐渐习得，而非一次性全部呈现。在非游戏应用中，从中选择两到三种和谐兼容的元素色相，在引入任何其他强调色之前为每种色相分配固定的语义角色。
miHoYo Game UI · 常见问题
这种风格适合非游戏产品吗？
可以，但需要适配。核心视觉语法——暗色画布、装饰边框、发光强调、稀有度层级——能够很好地移植至娱乐、奢侈品与收藏文化场景，这些领域以仪式感和稀缺感作为核心品牌价值。它不适合生产力工具、企业软件、医疗产品，或任何界面应感觉高效中立而非沉浸珍稀的场景。关键的判断标准是：你的产品是否能从让用户感到自己在接触某种稀有而精心策划之物中获益，而非仅仅完成一项任务。如果这种情感基调是对的，这套风格在游戏之外同样可行。
这种风格如何处理浅色背景？
处理起来相当困难。整套视觉系统是为深色底面而设计的：装饰性金框依赖靛蓝对比才能呈现珍贵感而非俗气感，元素色的发光效果需要黑暗背景才能显现，档案式的深度感从根本上是暗色画布的属性。浅色背景版本在原则上是可行的——《原神》的加载界面与部分宣传物料使用了较亮的底面——但这往往会使系统趋于平坦，使装饰边框显得厚重，元素色显得高饱和而非发光。若浅色背景是硬性要求，装饰词汇应大幅简化，元素色应降低饱和度以适应环境光条件。
米哈游 UI 与其他黑暗幻想类游戏界面有何区别？
大多数黑暗幻想类游戏 UI——包括同一时代的西方 RPG 作品——以黑暗营造氛围，却未将其系统化为设计语法。它们使用粗糙纹理、去饱和的土色调和激进的做旧效果，以唤起粗犷感或威胁感。米哈游的做法截然相反：这里的黑暗是优雅而令人向往的，更接近珠宝盒或天文图册，而非地牢。金框词汇、宝石色元素芯片与流畅的星域渐变，将黑暗定位为珍贵事物的背景而非威胁的氛围。这从根本上是将奢侈品美学应用于游戏 UI，正是这一区分使它真正具有创新性，而非仅仅遵循类型惯例。
元素配色体系能脱离其余米哈游视觉词汇单独使用吗？
部分可以。为每个类别或类型分配一种独特、持续应用的色相——并在图标、高亮与激活态表达中统一使用该色相——的语义逻辑是可移植原则，适用于任何足够复杂的分类系统：技能分类、资产类别、内容类型、用户群体。但元素调色板的具体色相是为深靛蓝底面、搭配金框词汇而设计的。在缺乏这些支撑元素的中性或浅色背景系统中，这些颜色可能显得随意或过度饱和。应借鉴其逻辑而非其具体色彩——除非同时承诺采用完整的暗色画布语境。
在移动端卡片等小尺寸组件中，如何缩减装饰边框词汇？
米哈游自己在各界面中已经给出了答案：角隅花饰是边框词汇的最小可行单元。带有中段装饰、复杂角隅玫瑰花纹与多层处理的完整边框，保留给英雄时刻——五星角色揭示、主菜单面板、活动落地界面。较小的组件——背包缩略图、队伍选择卡片、增益图标——仅在缩小尺寸下保留角隅处理，有时简化为单一几何括号而非完整花饰。在最小尺寸下，甚至角隅处理也消失，仅剩色彩层级（金色或元素色调的边框描边）来标示其属于这套系统的成员身份。在任何适配场景中应用同样的渐进简化逻辑：英雄组件用完整装饰，中等尺寸卡片仅用括号，小元素仅用色彩描边。
