深海韵律 (Deep Ocean Rhythms) 设计语言规范

更新: 1/16/2026 字数: 0 字时长: 0 分钟

版本: 1.0 作者: Manus AI 更新日期: 2026-01-14

1. 设计哲学：沉浸、流动、呼吸

深海韵律 (Deep Ocean Rhythms) 是一套致力于在数字界面中复现深海般静谧、通透与生命力的设计语言。它脱胎于“极光律动”的设计理念，将核心视觉从灵动的绿色系转变为更为沉稳、理性的蓝色系，旨在为用户提供一种 沉浸式 (Immersive)、富于流动感 (Fluid) 且 仿佛有生命在呼吸 (Breathing) 的极致交互体验。

我们的核心目标是构建“艺术品”级别的用户界面，而非仅仅是功能性的工具。每一个组件、每一次交互都应传递出深海的静谧与力量，让用户在操作中感受到科技与美学的完美融合。

1.1 设计原则

原则	描述	关键词
通透层次 (Transparent Layers)	借鉴“冰晶毛玻璃 (Ice Glassmorphism)”材质，通过多层级的模糊、饱和度与内发光，构建清晰的视觉信息层级，营造深邃的空间感。	`backdrop-filter`, `saturate`, `inset-shadow`
生命动效 (Living Motion)	摒弃生硬的线性动画，全面采用“物理弹性曲线 (Spring Curves)”，赋予界面元素果冻般的Q弹质感与生命的韵律感。	`cubic-bezier`, `transform`, `will-change`
情感化反馈 (Emotional Feedback)	交互的响应不应只是状态的切换，而应是情感的沟通。通过SVG描边动画、呼吸式光晕等细节，让用户的每一次操作都能得到积极、愉悦的确认。	`stroke-dashoffset`, `radial-gradient`, `micro-interactions`
光感设计 (Luminous Design)	精心运用内外光晕、边缘折射和渐变色，模拟光线在深海中穿透、散射的效果，提升界面的精致度和高级感。	`box-shadow`, `linear-gradient`, `glow`

2. 视觉核心体系

2.1 色彩系统 (Color Palette)

“深海韵律”的色彩系统围绕“科技蓝”构建，辅以深海的静谧与光斑的灵动，营造出富有层次感和生命力的视觉体验。

主要色板

角色	色值 (HEX)	色值 (RGBA)	用途说明
主色/科技蓝 (Primary)	`#0084FF`	`rgb(0, 132, 255)`	核心交互元素、按钮、高亮文本、SVG描边
辅助色/深海蓝 (Secondary)	`#0052D4`	`rgb(0, 82, 212)`	辅助按钮、深层阴影、渐变色过渡
点缀色/青蓝 (Accent)	`#00D4FF`	`rgb(0, 212, 255)`	光斑、提示性元素、动效点缀
神秘紫 (Mystic)	`#6C63FF`	`rgb(108, 99, 255)`	特殊光斑、稀有徽章、高级功能提示

中性色板

角色	色值 (HEX)	用途说明
一级标题/正文 (Text Primary)	`#1F2329`	最重要的文字信息
二级文本 (Text Secondary)	`#5C6166`	辅助性、说明性文字
三级文本/占位符 (Text Tertiary)	`#909499`	占位符、禁用状态文字
边框/分割线 (Border)	`#E4E6E8`	容器的弱化边框或分割线
容器背景 (Container BG)	`#FFFFFF`	卡片、弹窗等容器的纯白背景
页面背景 (Page BG)	`#F0F4F8`	页面的基础底色

背景渐变与光斑

背景渐变 (Base Gradient): linear-gradient(135deg, #e3f2fd 0%, #f0f4f8 100%)
主光斑 (Ocean Current): #0084FF (35% 透明度)
次光斑 (Accent Current): #00D4FF (25% 透明度)

2.2 字体系统 (Typography)

字体是信息传递的骨架，我们选用现代、清晰且富有韵律感的字体体系，确保在任何场景下都具备出色的可读性。

西文/数字字体: Inter (无衬线字体，字形现代，可读性高)
中文字体: PingFang SC (苹果生态)、Microsoft YaHei (Windows生态)，遵循系统默认，保证最佳渲染效果。

字体层级规范

用途	字号 (Font Size)	字重 (Font Weight)	行高 (Line Height)	颜色
页面大标题 (Display)	48px	700 (Bold)	64px	Text Primary
卡片/模块标题 (Headline)	24px	600 (SemiBold)	32px	Text Primary
正文内容 (Body)	16px	400 (Regular)	28px	Text Primary
辅助说明 (Caption)	14px	400 (Regular)	22px	Text Secondary
功能标签/按钮 (Label)	15px	500 (Medium)	24px	Primary / #FFFFFF

3. 核心组件规范 (Core Components)

本章节将详细定义“深海韵律”设计语言中最基础、最核心的UI组件，为后续更复杂的组件提供统一的构建基石。

3.1 动态背景 (Dynamic Background)

动态背景是营造“深海”氛围的第一层，由 基础渐变层、动态光斑层 和 SVG波纹层 叠加而成。

组件构成:
1. 基础渐变层 (Base Gradient): 页面最底层的颜色，提供柔和的色调过渡。
2. 动态光斑层 (Ocean Currents): 两个巨大的、模糊的、缓慢移动的半透明光斑，模拟深海中的洋流与光影。
3. SVG波纹层 (SVG Waves): 位于页面底部的三层动态波纹，增强流动感。

CSS 实现:

css

body {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f4f8 100%);
  position: relative;
  overflow-x: hidden;
}

body::before, body::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  width: 120vw;
  height: 120vw;
  border-radius: 50%;
  background-color: var(--color-primary);
  opacity: 0.35;
  filter: blur(100px);
  will-change: transform;
  z-index: -2;
}

body::before {
  transform-origin: 20% 80%;
  animation: blobFloat 25s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

body::after {
  background-color: var(--color-accent);
  opacity: 0.25;
  transform-origin: 80% 20%;
  animation: blobFloat 35s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes blobFloat {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); }
}

注：SVG 波纹部分通常使用专门的 SVG 文件和 CSS 动画实现，此处省略具体代码。

3.2 卡片 (Card)

卡片是信息承载的核心容器，采用“冰晶毛玻璃 (Ice Glassmorphism)”材质，体现了设计的精髓。

视觉规范:
- 背景: rgba(255, 255, 255, 0.5)
- 滤镜: backdrop-filter: blur(20px) saturate(180%)
- 圆角: 32px
- 内发光边框: inset 0 0 0 1px rgba(255, 255, 255, 0.8)
- 外部光晕: 两层阴影叠加，营造更真实的悬浮感。
  - 0 20px 60px rgba(0, 132, 255, 0.12)
  - 0 8px 16px rgba(0, 82, 212, 0.08)
交互状态:
- 默认 (Default): 应用基础样式。
- 悬浮 (Hover): 轻微上浮 transform: translateY(-5px)，同时光晕增强 rgba(0, 132, 255, 0.18)。

CSS 示例:

css

.card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 32px;
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 20px 60px rgba(0, 132, 255, 0.12),
    0 8px 16px rgba(0, 82, 212, 0.08);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform, box-shadow;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 25px 70px rgba(0, 132, 255, 0.18),
    0 10px 20px rgba(0, 82, 212, 0.1);
}

3.3 按钮 (Button)

按钮是触发操作的核心，其设计强调清晰的操作指引和令人愉悦的物理反馈。

分类:
1. 主要按钮 (Primary): 用于关键操作，如“确认”、“提交”。
2. 次要按钮 (Secondary): 用于次要操作，如“取消”、“返回”。
3. 文本按钮 (Text): 用于低干扰性操作，如“查看详情”。
动效核心: 所有交互都伴随轻微的弹性形变，使用 cubic-bezier(0.34, 1.56, 0.64, 1) 曲线。

主要按钮 (Primary Button) 规范

状态	背景	文本颜色	阴影	形变	备注
默认 (Default)	`linear-gradient(135deg, #0084FF, #0052D4)`	`#FFFFFF`	`0 10px 20px rgba(0, 132, 255, 0.2)`	`scale(1)`	渐变背景增加立体感
悬浮 (Hover)	`linear-gradient(135deg, #0090FF, #0060F0)`	`#FFFFFF`	`0 12px 25px rgba(0, 132, 255, 0.25)`	`scale(1.05)`	颜色变亮，阴影加深
点击 (Active)	`linear-gradient(135deg, #007AE0, #004AC0)`	`#FFFFFF`	`0 5px 10px rgba(0, 82, 212, 0.2)`	`scale(0.98)`	模拟按下的效果
禁用 (Disabled)	`#A9C2D9` (中性色)	`rgba(255, 255, 255, 0.7)`	`none`	`scale(1)`	移除所有动态效果

CSS 示例 (Primary Button):

css

.button-primary {
  padding: 12px 28px;
  border: none;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 500;
  color: white;
  background: linear-gradient(135deg, #0084FF, #0052D4);
  box-shadow: 0 10px 20px rgba(0, 132, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, box-shadow;
}

.button-primary:hover {
  background: linear-gradient(135deg, #0090FF, #0060F0);
  box-shadow: 0 12px 25px rgba(0, 132, 255, 0.25);
  transform: scale(1.05);
}

.button-primary:active {
  transform: scale(0.98);
  box-shadow: 0 5px 10px rgba(0, 82, 212, 0.2);
}

4. 表单与反馈组件 (Forms & Feedback)

此章节定义了用于用户输入和系统反馈的标准化组件，确保数据交互的一致性和情感化体验。

4.1 输入框 (Input Field)

输入框是数据采集的基础，其设计在保证功能性的同时，融入了“深海韵律”的光感和动效哲学。

视觉规范:
- 背景: rgba(255, 255, 255, 0.7)，比卡片更不透明，以突出输入区域。
- 边框: 1px solid rgba(0, 132, 255, 0.2)。
- 圆角: 12px。
- 内阴影: inset 0 2px 4px rgba(0, 0, 0, 0.04)，营造轻微的凹陷感。
状态变化:

状态	边框颜色	外部光晕 (box-shadow)	备注
默认 (Default)	`rgba(0, 132, 255, 0.2)`	`none`	保持简洁
悬浮 (Hover)	`rgba(0, 132, 255, 0.4)`	`none`	边框颜色加深，吸引注意
聚焦 (Focus)	`var(--color-primary)`	`0 0 0 3px rgba(0, 132, 255, 0.15)`	出现清晰的蓝色光晕，明确交互焦点
错误 (Error)	`#FF4D4F` (危险红色)	`0 0 0 3px rgba(255, 77, 79, 0.15)`	红色光晕提供强烈的警示

CSS 示例:

css

.input-field {
  padding: 14px 16px;
  border: 1px solid rgba(0, 132, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-field:hover {
  border-color: rgba(0, 132, 255, 0.4);
}

.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 
              0 0 0 3px rgba(0, 132, 255, 0.15);
}

4.2 情感化反馈提示 (Toast / Notification)

这是“深海韵律”最具特色的组件之一，专为“复制成功”、“操作完成”等积极反馈场景设计，核心是 SVG 描边动画。

组件结构:
1. 容器: 一个带有深度阴影的白色圆角卡片。
2. 图标: 中央的 SVG 动画图标。
3. 主文案: 粗体的操作成功信息。
4. 副文案: 灰色的补充说明。
动画序列 (以“成功”为例):
1. 进场: 整个 Toast 弹窗以 cubic-bezier(0.34, 1.56, 0.64, 1) 曲线弹性缩放出现。
2. 描边: 科技蓝的空心圆圈沿路径动态绘制完成 (stroke-dashoffset 动画)。
3. 填充: 圆圈内部瞬间填充为 radial-gradient(circle, #0084FF 0%, #0052D4 100%)。
4. 出勾: 从中心动态绘制出白色的对勾标记。
5. 退场: 3秒后，Toast 向上平移并淡出。

CSS 示例 (Toast 容器):

css

.toast {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 132, 255, 0.15),
              0 10px 20px rgba(0, 82, 212, 0.1);
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* SVG 动画部分较为复杂，通常由 JS 控制或使用 SMIL */
.toast-icon-circle {
  stroke: var(--color-primary);
  stroke-width: 3px;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: drawCircle 0.5s ease-out forwards;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

5. 动效系统 (Motion System)

动效是“深海韵律”的灵魂，它赋予界面以生命力，让交互过程充满情感与韵律。

5.1 核心动画曲线 (Core Easing Curves)

我们摒弃了标准的 ease 或 linear 曲线，采用两种定制的 cubic-bezier 曲线来定义所有动态行为。

名称	`cubic-bezier` 值	特点	适用场景
果冻回弹 (Jelly Bounce)	`(0.175, 0.885, 0.32, 1.275)`	带有明显“越界”效果，Q弹、活泼、富有生命力。	页面/组件加载、卡片悬浮、需要营造惊喜感的场景。
科技回弹 (Tech Rebound)	`(0.34, 1.56, 0.64, 1)`	回弹幅度更大，速度更快，更具科技感和精准感。	按钮点击、模态框弹出、需要快速响应和力量感的交互。

5.2 动画原则与时长

弹性进场 (Elastic Entrance): 所有页面和主要组件在加载时，都应使用“果冻回弹”曲线，从 scale(0.95) 和 translateY(20px) 的初始状态恢复到正常状态。建议时长：400ms - 600ms。
状态过渡 (State Transition): 元素状态（如颜色、阴影、大小）的改变应平滑过渡。建议时长：300ms。
微交互响应 (Micro-interaction): 对用户操作（如悬浮、点击）的即时反馈，应使用“科技回弹”曲线，追求快速响应。建议时长：200ms - 300ms。

6. 实施与最佳实践 (Implementation & Best Practices)

6.1 CSS 变量体系 (CSS Variables System)

为了便于维护和潜在的主题切换，强烈建议将所有核心视觉参数定义为 CSS 变量。

css

:root {
  /* Colors */
  --color-primary: #0084FF;
  --color-secondary: #0052D4;
  --color-accent: #00D4FF;
  --text-primary: #1F2329;
  --text-secondary: #5C6166;

  /* Typography */
  --font-family-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-size-body: 16px;
  --font-weight-bold: 700;

  /* Spacing & Radius */
  --radius-card: 32px;
  --radius-button: 16px;

  /* Animation */
  --ease-jelly: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-tech: cubic-bezier(0.34, 1.56, 0.64, 1);
}

6.2 性能优化 (Performance Optimization)

“深海韵律”大量使用了对性能有挑战的 CSS 属性，必须进行优化以保证流畅体验。

核心原则: 尽可能将动画和变换的计算交给 GPU 处理。

开启硬件加速: 对于所有参与动画（animation）或变换（transform）的元素，特别是使用了 backdrop-filter 的卡片，务必添加 will-change 或 transform: translateZ(0) 来创建独立的渲染层。
css
```
.card, .button-primary {
  will-change: transform, box-shadow;
}
.toast {
  will-change: transform, opacity;
}
```
1
2
3
4
5
6
backdrop-filter 的谨慎使用: 这是性能消耗大户。确保应用此滤镜的元素下方没有频繁变动的内容。在低端设备上，可考虑通过媒体查询降低模糊半径或完全禁用。
OLED 屏幕注意事项: 蓝色在 OLED 屏幕上是能耗较高的颜色。如果应用需要考虑深色模式 (Dark Mode)，建议在深色模式下适当降低蓝色的饱和度和亮度，以优化能耗。

美观的设计不应以牺牲可用性为代价。

色彩对比度: 确保所有文本（尤其是二级、三级文本）与其背景之间有足够的对比度，至少满足 WCAG AA 级别 (4.5:1) 的要求。

尊重用户偏好: 使用 @media (prefers-reduced-motion) 媒体查询，为那些希望减少动画的用户提供一个“低动效”版本，禁用或减弱非关键的动画。

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

语义化 HTML: 正确使用 button, nav, main 等 HTML5 标签，并为图标按钮等非文本元素添加 aria-label，确保屏幕阅读器用户也能理解界面内容。

7. 参考文献

[1] MDN Web Docs. "cubic-bezier()". https://developer.mozilla.org/en-US/docs/Web/CSS/cubic-bezier

[2] CSS-Tricks. "A Guide to Hardware Acceleration for CSS". https://css-tricks.com/guide-hardware-acceleration-css/

微信哆开

微信主题

iMessage主题

主题创作者

android

ios

mac

windows

深海韵律 (Deep Ocean Rhythms) 设计语言规范

1. 设计哲学：沉浸、流动、呼吸

1.1 设计原则

2. 视觉核心体系

2.1 色彩系统 (Color Palette)

主要色板

中性色板

背景渐变与光斑

2.2 字体系统 (Typography)

字体层级规范

3. 核心组件规范 (Core Components)

3.1 动态背景 (Dynamic Background)

3.2 卡片 (Card)

3.3 按钮 (Button)

主要按钮 (Primary Button) 规范

4. 表单与反馈组件 (Forms & Feedback)

4.1 输入框 (Input Field)

4.2 情感化反馈提示 (Toast / Notification)

5. 动效系统 (Motion System)

5.1 核心动画曲线 (Core Easing Curves)

5.2 动画原则与时长

6. 实施与最佳实践 (Implementation & Best Practices)

6.1 CSS 变量体系 (CSS Variables System)

6.2 性能优化 (Performance Optimization)

7. 参考文献

iMessage主题

主题创作者

深海韵律 (Deep Ocean Rhythms) 设计语言规范 ​

1. 设计哲学：沉浸、流动、呼吸 ​

1.1 设计原则 ​

2. 视觉核心体系 ​

2.1 色彩系统 (Color Palette) ​

主要色板 ​

中性色板 ​

背景渐变与光斑 ​

2.2 字体系统 (Typography) ​

字体层级规范 ​

3. 核心组件规范 (Core Components) ​

3.1 动态背景 (Dynamic Background) ​

3.2 卡片 (Card) ​

3.3 按钮 (Button) ​

主要按钮 (Primary Button) 规范 ​

4. 表单与反馈组件 (Forms & Feedback) ​

4.1 输入框 (Input Field) ​

4.2 情感化反馈提示 (Toast / Notification) ​

5. 动效系统 (Motion System) ​

5.1 核心动画曲线 (Core Easing Curves) ​

5.2 动画原则与时长 ​

6. 实施与最佳实践 (Implementation & Best Practices) ​

6.1 CSS 变量体系 (CSS Variables System) ​

6.2 性能优化 (Performance Optimization) ​

6.3 无障碍设计 (Accessibility - A11y) ​

7. 参考文献 ​

深海韵律 (Deep Ocean Rhythms) 设计语言规范

1. 设计哲学：沉浸、流动、呼吸

1.1 设计原则

2. 视觉核心体系

2.1 色彩系统 (Color Palette)

主要色板

中性色板

背景渐变与光斑

2.2 字体系统 (Typography)

字体层级规范

3. 核心组件规范 (Core Components)

3.1 动态背景 (Dynamic Background)

3.2 卡片 (Card)

3.3 按钮 (Button)

主要按钮 (Primary Button) 规范

4. 表单与反馈组件 (Forms & Feedback)

4.1 输入框 (Input Field)

4.2 情感化反馈提示 (Toast / Notification)

5. 动效系统 (Motion System)

5.1 核心动画曲线 (Core Easing Curves)

5.2 动画原则与时长

6. 实施与最佳实践 (Implementation & Best Practices)

6.1 CSS 变量体系 (CSS Variables System)

6.2 性能优化 (Performance Optimization)

6.3 无障碍设计 (Accessibility - A11y)

7. 参考文献