evangelion-design

Evangelion 设计

将 Evangelion 风格的界面语言应用于 Web 和移动产品，但不要让成品沦为千篇一律的霓虹赛博朋克，也不要直接照搬作品。原作将 UI 用作叙事压力：严峻的几何形态、克制的色彩信号、密集但清晰易读的遥测信息，以及如同受压机械般运作的动效。

快速开始

1. 先选择屏幕用途：hud、command-center、psychograph、sync-ladder、reactor-diagnostic、breach-monitor 或 title-card。
2. 为屏幕选择一种醒目的强调色系：amber、red 或 signal-green。只有在构图需要区分时，才添加一种冷色辅助色。
3. 先用边框、标尺、圆环、条形、遮罩、重复设备阵列和十字准线几何形态搭建布局，再添加装饰纹理。
4. 通过呈现状态为屏幕添加动效：计数器、扫描、轨迹绘制、同步步骤、面板切换和警报脉冲。
5. 保持原创。借鉴 Evangelion 的视觉语言，但不要复用原样的标志、标题卡或一比一照搬屏幕构图。

工作流

1. 确定戏剧功能

先选择情绪功能，再选择组件。

• hud：叠加在图像上的第一人称覆盖层；使用宽幅遮罩、目标括号、稀疏刻度和范围标记。
• command-center：黑底仪表盘，包含多个独立模块、状态栏、表格和分析视图。
• diagnostic：图表、同步轨迹、矩阵和环形分析器；优先考虑精确度和层级，而非炫目效果。
• psychograph：有界图表区域，带标尺、稀疏十字标记、标签框，以及一条密集的有机曲线或信号轨迹。
• sync-ladder：重复的胶囊、条形或带槽模块，沿行或对角线逐步排列，并配以一到两个重复标签。
• reactor-diagnostic：带边框的三联画或全景板，中央为醒目的径向分析器，两侧区域则刻意保持简洁。
• breach-monitor：超大计时器、进度块、机架阵列、侵入预测条及其他展示迫近威胁的元素。
• warning-state：提高对比度，重复显示状态标签和倒计时，并加快节奏。
• title-card：近乎空旷的黑色构图，配以超大字体和一种醒目的强调色。

2. 构建屏幕构图

• 将主要模块锚定在边缘、对角线、全景遮罩或一个大型外框上。大块留白很有用，因为它们能营造张力。
• 优先使用裁切矩形、缺口边框、圆形、环形图、梯级、标线、线框曲线和外置标注。
• 每个视图只使用一到两个主导的几何元素。不要把所有科幻元素都堆进同一个屏幕。
• 当屏幕主题是同步、层级、纯度或兼容性时，大胆使用重复元素。相同的模块本身就是戏剧的一部分。
• 让一个核心结构主导画面：涂鸦轨迹、线框球体、圆形反应堆、倒计时或胶囊阵列。
• 保持尖角或仅做最小幅度的切角。圆角的消费级应用卡片会削弱整体基调。
• 将纹理作为次要元素。即使还未添加光晕、颗粒感或背景图像，整体框架也应清晰可辨。

3. 设置排版和文案

• 标签和标题使用窄体无衬线字体。
• 计时器、遥测信息和表格使用等宽数字。
• 仅在少数开场画面或章节标题场景中使用戏剧性的展示衬线字体。
• 默认使用大写标签、简短短语、系统动词和明确的状态文案。
• 使用微型标签和定位标记，让大画布显得经过精确校准；但要确保活动标签路径足够明亮，便于快速浏览。
• 仅在双语文案确有意义且准确时使用。

4. 适配产品 UI

• 在 Web 端，充分利用宽屏叠层、密集侧边栏和多面板布局。
• 在移动端，减少同时显示的模块。每个屏幕只保留一个主视觉仪表，并将侧边区域折叠为堆叠栏、标签页或可滑动的诊断面板。
• 将超宽画面改为中央仪表加一条辅助信息栏，而不是把所有模块都压缩成难以辨认的缩略图。
• 让密集的遥测信息烘托氛围，但确保主要操作即使脱离这些信息也清晰易读。
• 尽可能通过现有设计系统传达这种风格，而不是从头重建所有基础组件。

阅读 references/style-guide.md，了解配色、字体、布局、动效和实现用设计令牌。 如果想了解这种风格背后的设计依据和分析得出的原作线索，请阅读 references/source-signals.md。

常见问题

应用《新世纪福音战士》设计语言时最常见的失败方式：

过于写实：照搬画面，而不是提炼原则

陷阱： 截取动画画面并直接移植到产品中——复刻 AT 力场边框、完全照搬 LCL 培养舱布局，或逐面板复制指挥室控制台。

为何行不通：

• 使用授权素材和直接照搬会损害原创性
• 动画构图是为 16:9 的叙事节奏设计的，不适用于响应式产品交互
• 生搬硬套会显得像主题乐园式的表面模仿，而非经过严谨设计的视觉语言

可行做法：

• 提炼原则（例如“用分层的透明圆环呈现状态”），而不是照搬形状
• 根据产品实际的数据密度和用户工作流调整规模与节奏
• 先让界面解决实际问题；《新世纪福音战士》的视觉语言是基调，不是模板

示例： NERV 使用嵌套环形分析器呈现多层状态。实际产品可以运用这一原则来展示网络延迟层级、缓存层级或并发请求状态——结构相呼应，但内容仍属于产品本身。

---

缺乏层次的信息过载

陷阱： 因为“《新世纪福音战士》的信息密度很高”，就把每个数据点、每个标签和每条装饰性线迹都塞进同一片黑色区域。

为何行不通：

• 《新世纪福音战士》的信息密度有助于建立层次：关键状态信号会更大、更醒目，次要遥测信息则更小、色调更冷
• 缺少明确的视觉焦点时，用户会漫无目的地浏览，错过可操作的数据
• 对所有元素都叠加高不透明度、发光效果和动画，只会造成视觉噪声，而非清晰度

可行做法：

• 建立清晰的信号层级：用户此刻需要采取什么行动？ 将相关信息设为主视觉尺寸，并使用醒目的颜色
• 将诊断遥测、趋势线和背景指标放在更小、色调更冷、对比度更低的区域
• 大胆运用留白——主信号周围的空旷黑色区域能营造张力并集中注意力

示例： 同步监控屏显示三块 LCD：当前同步率以醒目的琥珀色显示，趋势线以暗淡的绿色置于其下方，历史峰值则以极小字号显示在边缘。视线会首先落在同步率上。常见的错误做法是让三项信息大小一致，反而埋没关键指标。

---

缺少上下文提示：用户会迷失在复杂内容中

**陷阱：**打造精美的指挥中心仪表盘，却省略标签、分区线或状态标记等视觉锚点，导致用户无法在复杂界面中导航。

为何会失败：

• 《新世纪福音战士》的界面既密集又易于导航：AT 力场轮廓告诉你“这是状态区”，标题卡片位于左上角，胶囊梯级从左向右排列
• 缺少这些提示，用户就会失去空间感，无法一眼找到目标内容
• 缺少上下文的密集信息只会让人不知所措，而不会带来安心感

更有效的做法：

• 使用边框线、缺口边缘和分区标签，将屏幕划分为便于浏览的区域
• 设置一致的参考标签和方向标记，让用户知道“我看到的是反应堆诊断信息，而不是人员同步信息”
• 让几何结构教会用户该看哪里，以及如何在界面中移动

**示例：**诊断三联屏以中央分析器为主，两侧各有一个状态面板。将中央标为“CORE THERMAL”，两侧分别标上各自的标题。没有这些标签，用户就不知道自己看到的是反应堆状态还是人员数据。

---

重样式轻功能：看起来很酷，却难以使用

**陷阱：**优先追求视觉效果（发光扫描线、横扫动画、雾效），却忽视易读性和交互反馈。

为何会失败：

• 如果精美的界面无法清楚地展示当前状态或交互方式，只会让人感到沮丧，而非惊艳
• 《新世纪福音战士》的动态效果服务于功能：横扫动画展示状态转换，脉冲警报标示危险，轨迹绘制展示时间序列数据。它始终在传递信息
• 为了视觉效果而牺牲交互目标、可操作性提示或状态反馈，会破坏可用性

更有效的做法：

• 每个动画都应传达状态变化或引导用户注意力
• 如果某个元素可点击、滑动或展开，就应明确提示其交互方式
• 视觉风格（辉光、颗粒感、色彩）应突出而非遮挡主要操作和关键数据

**示例：**倒计时器通过平滑补间动画从 10 递减到 0，看起来很漂亮，却无法传达紧迫感。同一个计时器如果配上脉冲红色背景、粗体衬线数字，并在剩余时间不足 2 分钟时突然跳变，就能传达危险并促使用户采取行动。

---

忽视无障碍设计：色彩与对比度问题

**陷阱：**将暗底红色或红绿配色作为主要信号，认为《新世纪福音战士》的风格“黑暗忧郁”，低对比度也无妨。

为何会失败：

• 对约 8% 的观众来说，红色和绿色难以区分（色盲）
• 低对比度不符合 WCAG 标准，在移动设备上或强光下也难以辨读
• 《新世纪福音战士》确实使用红色和绿色，但总会同时使用形状、位置或标签提示来区分含义
• 无障碍设计不足会排斥用户，还会带来合规风险

更有效的做法：

• 将颜色作为辅助信号，而非主要识别方式。务必添加标签文本、图标或形状差异
• 发布前，使用色盲模拟器（Coblis、Contrast Ratio）检查配色
• 确保文本和交互元素达到 WCAG AA 对比度要求（正文文本为 4.5:1，大号文本为 3:1）
• 运用《新世纪福音战士》的几何语言：如果红色表示“警报”，就添加感叹号图标或边框样式，让红绿色盲用户也能识别信号

**示例：**仅用红色圆圈表示状态，色盲用户就无法识别。同一指标如果用红色圆圈加上警告符号再加上“ALERT”标签，所有用户都能看懂，也更符合《新世纪福音战士》标签密集的风格。

---

NERV UI 有效；泛泛的科幻风则不然

正宗的《EVA》风格语言与泛泛的霓虹赛博朋克风，区别往往在于克制与明确：

NERV UI（有效）	泛泛的科幻风（无效）
平面黑、琥珀色和信号绿	彩虹渐变、紫／青霓虹
高而窄的无衬线标签，并使用明确的状态动词	含糊的悬浮文字和装饰性符号
模块化的重复阵列（同步阶梯、舱体架）	每个元素都独特而繁复
动效揭示状态：扫描曲线、面板切换、警报脉冲	为动而动：光晕持续漂移
留白营造张力与焦点	每个像素都填满纹理和光效
易于辨识的层级与几何辅助线	密集混乱，看似惊艳却难以操作
字体排印和形状承担主要表现；光效有所克制	依赖光效和模糊来掩盖基础设计的不足

关键在于：《EVA》的设计选择严峻且明确。它不是“让它看起来有科幻感”，而是“让每个元素都物有所值”。

注意事项

• 不要默认使用紫色渐变、玻璃拟态、柔和模糊或活泼的弹簧动效。
• 不要让每个表面都发光。屏幕大部分区域应呈现哑光、暗色且克制的感觉。
• 不要将日文或系列标志用作装饰。
• 不要为了增加信息密度而牺牲易用性；即使关闭动效，层级仍应清晰。
• 不要照搬《EVA》的素材或布局。应以相同的张力和严谨性创作原创演绎。