跳到主要内容

设计系统规范 (Design System)

本网站遵循 Apple/Xiaomi 风格的现代极简设计理念，注重内容的呈现与交互的流畅性。

色彩系统 (Color System)​

我们使用语义化的 CSS 变量来管理颜色，以确保在浅色模式（Light Mode）和深色模式（Dark Mode）下的一致性和可访问性。

基础背景 (Backgrounds)​

变量名描述浅色模式深色模式
--color-bg-primary页面主背景#FFFFFF#000000
--color-bg-secondary次级背景（如板块背景）#F5F5F7#1C1C1E
--color-bg-tertiary三级背景（如分割线）#E5E5EA#2C2C2E

文字排版 (Typography)​

变量名描述浅色模式深色模式WCAG 标准
--color-text-primary主要文字（标题、正文）#1D1D1F#F5F5F7AAA
--color-text-secondary次要文字（说明、元数据）#86868B#86868BAA
--color-text-tertiary占位符或禁用态#C7C7CC#48484A-

品牌色 (Brand Colors)​

变量名描述浅色模式深色模式
--color-primary主品牌色#34C759#30D158
--color-primary-hover悬停状态#2DB54E#34C759
--color-primary-active点击状态#228A3A#2DB54E

交互动效 (Interaction & Motion)​

过渡效果​

所有交互元素的颜色变化应包含平滑过渡：

transition: all 0.4s var(--ios-ease);

其中 --ios-ease 定义为 cubic-bezier(0.25, 0.1, 0.25, 1.0)，模拟 iOS 的物理动效曲线。

磁吸滚动 (Snap Scroll)​

首页采用分屏磁吸设计：

  • 触发条件：滚动停止且位于吸附阈值（默认 100px）内，且滚动速度较低。
  • 缓冲区域：在阈值范围内提供吸附引导。
  • 性能优化：使用 requestAnimationFrame 和动态防抖机制，避免快速滚动时的卡顿。

响应式设计 (Responsive Design)​

  • Mobile (< 768px): 单栏布局，文字适当缩小，磁吸阈值降低。
  • Tablet (768px - 1024px): 过渡布局。
  • Desktop (> 1024px): 多栏布局，完整动效体验。