用 Apple visionOS 风格做玄学 App：Liquid 设计系统实践

如何用毛玻璃卡片、大留白、柔和动效打造东方美学与未来感融合的界面。

一、设计理念

「爻动万象」的设计核心是「空灵即力量」。我们融合了两个看似对立的世界：Apple 的精密工业美学与东方哲学的留白意境。

设计原则很简单：

• 内容即界面 — UI 退后，内容在前
• 克制即高级 — 能用一种方式表达的，绝不用两种
• 留白即呼吸 — 空间不是浪费，是让用户的眼睛休息
• 柔和即力量 — 没有刺眼的颜色，没有突兀的动画

二、Liquid 组件系统

我们自研了一套 Liquid 组件系统，核心是毛玻璃卡片（LiquidCard）：

.liquid-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 24px;
  animation: fade-in-up 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

关键参数：

• 透明度 72% — 足够透出背景光球，又不影响文字阅读
• 模糊 24px — 标准模糊，视觉上像磨砂玻璃
• 内高光 — inset 0 1px 0 rgba(255,255,255,0.9) 模拟玻璃边缘折射
• 圆角 20px — Apple HIG 标准的大圆角

三、爻线的 CSS 绘制

六爻卦象的爻线全部用 CSS div 绘制，不使用 Unicode 符号：

<!-- 阳爻：一条实线 -->
<span class="block h-[2.5px] w-full rounded-full bg-label"></span>

<!-- 阴爻：两段 + 间隔 -->
<span class="flex-1 h-[2.5px] rounded-full bg-label mx-1"></span>
<span class="h-[2.5px] w-[4px]"></span>
<span class="flex-1 h-[2.5px] rounded-full bg-label mx-1"></span>

这样做的好处是：精确控制粗细（2.5px）、颜色（统一用 bg-label）、圆角、以及动爻时变为红色的效果。

四、AI 加载动画

AI 解读的加载动画参考了 visionOS 的空间计算风格 — 3×3 圆点阵列，对角波浪传播：

.loader {
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 7px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(30px) saturate(180%);
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #5e5ce6;
  animation: wave-pulse 1.4s ease-in-out infinite;
}
/* 对角延迟：每个点的 delay 不同 */
.dot:nth-child(1) { animation-delay: 0.00s; }
.dot:nth-child(2) { animation-delay: 0.10s; }
.dot:nth-child(5) { animation-delay: 0.20s; }
.dot:nth-child(9) { animation-delay: 0.40s; }

五、禁止清单

设计规范中有一份明确的「禁止清单」，这是保证视觉一致性的关键：

• ❌ 纯黑 #000、纯白 #fff — 太硬，用 #1d1d1f 和 #f2f2f7
• ❌ 金色、大红 — 国风廉价感
• ❌ 霓虹色 — 任何荧光绿、荧光蓝
• ❌ 粒子效果、旋转 loading、弹跳动画
• ❌ 宋体、楷体等书法字体

「土味国风」是这类 App 最容易掉进的坑。龙纹、祥云、太极图水印、烟雾特效 — 全部禁止。我们要的是未来感，不是复古感。

六、配色系统

整套配色基于 Apple 标准色阶：

• Surface：#f2f2f7（页面背景）
• Accent：#5e5ce6（强调色，Apple Indigo）
• Label：#1d1d1f（主文字）
• Secondary Label：#6e6e73（次要文字）
• Good：#30b06e（吉利）
• Bad：#e83b3b（凶险）
• Moving：#e83b3b（动爻）