明日方舟 UI 设计系统深度解析

明日方舟的 UI 设计在手游领域独树一帜。本文将系统性地分析其设计语言。

色彩系统

方舟的配色以低饱和度暗色为主基调，辅以琥珀橙与青蓝两种强调色：

• 背景层：#1a1a1e 系列的深灰，而非纯黑
• 面板层：半透明深色面板，带有微弱边框
• 强调橙：用于重要按钮、通知、警告 — 温暖但不过分鲜艳
• 功能蓝：用于链接、选中态、信息提示 — 冷静专业

排版系统

方舟使用了定制的几何无衬线字体，特点是：

• 宽字距（letter-spacing: 0.1em ~ 0.3em）
• 硬朗的笔画终端
• 标题与正文形成明确的层级对比

布局特征

斜角切割

方舟面板大量使用斜角（chamfer）替代圆角，这是其最具辨识度的特征：

.panel-angled {
  clip-path: polygon(
    0 8px, 8px 0, 100% 0,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    0 100%
  );
}

六边形网格

作为背景装饰的六边形图案是方舟的标志性视觉元素，承载了"源石"的世界观符号。

细线框

面板使用 1px 的细边框，颜色通常在 rgba(255,255,255,0.1) 级别，非常克制。

动效语言

• 过渡：以 ease-out 为主，强调"确定感"
• 入场：面板从下方向上浮入
• 加载：六边形旋转动画
• 反馈：微小的缩放 + 发光

可复用的设计模式

1. 玻璃面板 + 几何切角 = 方舟基础面板
2. 暗底 + 金/蓝双色系统 = 方舟色彩
3. 宽字距几何字体 = 方舟气质
4. 六边形/菱形背景图案 = 方舟视觉锚点

这些模式已经在 ARKNEXUS 的设计中得到了实际应用。

ARKNEXUS 博客设计系统实现

色彩系统

博客采用终末地（Endfield）风格的金/蓝双色体系，底色为深灰而非纯黑以提升长时间阅读舒适度：

面板系统

玻璃面板 (Glass Panel)

.glass-panel {
  background: rgba(16, 16, 22, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(180, 140, 50, 0.12);
}
.glass-panel-interactive {
  /* 同上 + hover 时边框高亮、上浮 -2px、金色辉光 */
}

几何切角面板 (Chamfer Panel)

四角均切角 8px，是方舟 UI 最具辨识度的特征：

.glass-panel-chamfer {
  clip-path: polygon(
    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px)
  );
}

排版系统

• 标题字体: Orbitron（几何无衬线），宽字距 tracking: 0.05em ~ 0.2em
• 正文字体: System UI + Noto Sans SC（中文优化）
• 层级: 通过字号、字距、金色/灰色对比建立清晰层级
• 文本辉光: .text-glow-yellow / .text-glow-blue — text-shadow 多层叠加

六边形背景系统

作为方舟世界观「源石」符号的延伸，提供两种背景模式：

/* 完整六边形网格 — 用于大面积装饰 */
.bg-hex-grid {
  background-image: 三层 linear-gradient（60deg / -60deg / 0deg）叠加;
  background-size: 40px 69px;
}

/* 六边形点阵 — 用于全局背景（更克制） */
.bg-hex-dots {
  background-image: radial-gradient 双层点阵;
  background-size: 32px, 48px;
}

动效系统

采用终末地自有运动曲线，表达「确定感」与「科技感」：

入场动画: 页面切换时几何图形（六边形/菱形/三角形）从屏幕四角聚集到中心，伴随中心六边形闪光。

悬停反馈: 卡片 hover 时 scale(1.02) + box-shadow 金色辉光 — 符合方舟「微缩放 + 发光」设计语言。

滚动驱动: 段落差分入场（animation-timeline: view()）、全局进度条、背景视差文字。

卡片设计

文章卡片继承终末地面板系统，关键尺寸：

后台管理系统

单管理员认证系统：

• 认证: HMAC-SHA256 令牌，httpOnly cookie，8 小时有效期
• 默认密码: 通过 ADMIN_PASSWORD 环境变量配置
• 功能: Markdown 编辑器，支持标题/摘要/封面图/标签/分类/精选，文章 CRUD
• 安全: 所有 API 路由验证 cookie，timingSafeEqual 防时序攻击

响应式适配

• 移动端卡片为单列堆叠
• 桌面侧边栏 TOC（目录）在移动端移至内容底部
• 导航栏移动端折叠为右侧滑出面板
• 粒子系统根据屏幕宽度自动调整数量（< 768px 减少 60%，< 1024px 减少 30%）
• prefers-reduced-motion 全局禁用动画

技术栈