docs: 删除已废弃的苹果风格视觉标准（验收只按白曜石工坊口径）
This commit is contained in:
WuYongJie
parent
b45b584871
commit
ecd11db3af
@ -1,207 +0,0 @@
|
||||
# 苹果风格视觉设计标准 (Apple-Style Visual Design Standards)
|
||||
|
||||
> **版本**: 2.0 (2026-01-29)
|
||||
> **状态**: 补充参考标准；当前新平台第一视觉标准以 `白曜石工坊统一视觉标准.md` 为准
|
||||
> **优先级**: 如本文件与白曜石工坊标准冲突，优先执行白曜石工坊标准
|
||||
> **目标**: 打造优雅、统一、沉浸式的用户体验，完全去除"模板化"和"AI味"，接近苹果官网的视觉水准。
|
||||
|
||||
---
|
||||
|
||||
## 目录
|
||||
|
||||
1. [核心设计哲学](#1-核心设计哲学)
|
||||
2. [详细视觉规范](#2-详细视觉规范)
|
||||
* [色彩系统](#21-色彩系统)
|
||||
* [排版系统](#22-排版系统)
|
||||
* [布局与间距](#23-布局与间距)
|
||||
* [材质与光影](#24-材质与光影)
|
||||
3. [交互与动画](#3-交互与动画)
|
||||
4. [去AI味专项指南](#4-去ai味专项指南)
|
||||
5. [技术架构与文件结构](#5-技术架构与文件结构)
|
||||
6. [组件开发规范](#6-组件开发规范)
|
||||
|
||||
---
|
||||
|
||||
## 1. 核心设计哲学
|
||||
|
||||
### 1.1 内容至上 (Content is King)
|
||||
* **原则**：界面不仅是容器，更是内容的舞台。UI 应该"退后"，让 3D 模型、产品图片和关键数据"向前"。
|
||||
* **执行**：
|
||||
* 背景色主要使用白色或极淡的灰色；当前产品不再提供深浅色主题切换。
|
||||
* **拒绝**无意义的装饰性边框、分割线和阴影。只有在区分层级必要时才使用。
|
||||
* **拒绝**均等分割的网格布局（"AI味"典型特征）。使用非对称布局（如：左侧 2/3 展示 3D 模型，右侧 1/3 展示控制面板）。
|
||||
|
||||
### 1.2 物理感与材质 (Materiality & Physics)
|
||||
* **原则**：数字界面应模拟真实世界的物理属性。
|
||||
* **执行**：
|
||||
* **Liquid Glass (毛玻璃)**：仅在覆盖内容时使用（如导航栏、侧边栏、浮动面板）。标准：`backdrop-filter: blur(20px) saturate(180%)`。
|
||||
* **Spring Animation (弹簧动画)**：交互元素（按钮按压、弹窗出现）必须使用弹簧物理模拟，而不是简单的线性过渡。
|
||||
* **光影**：光源应统一来自正上方。阴影应柔和、弥散，模拟环境光遮蔽 (Ambient Occlusion)。
|
||||
|
||||
### 1.3 优雅的排版 (Elegant Typography)
|
||||
* **原则**：排版是信息层级的核心。
|
||||
* **执行**：
|
||||
* **动态字间距 (Dynamic Tracking)**：大标题收紧 (-0.4px)，正文标准，小字加宽 (+0.06px)。
|
||||
* **层次分明**：使用字重 (Weight) 和颜色 (Color) 区分层级，而不是单纯靠字号。
|
||||
|
||||
---
|
||||
|
||||
## 2. 详细视觉规范
|
||||
|
||||
### 2.1 色彩系统
|
||||
|
||||
**设计令牌位置**: `src/lib/design-tokens/colors.ts`
|
||||
|
||||
不要使用纯灰 (`#808080`)，总是混入微量的蓝色或暖色调。
|
||||
|
||||
| 用途 | Light Mode | Dark Mode | 说明 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **背景** | `#FFFFFF` | `#000000` | 纯净背景，最大化对比度 |
|
||||
| **次级背景** | `#F5F5F7` | `#1C1C1E` | 用于分组区块，**比系统灰(#F2F2F7)更淡、更优雅** |
|
||||
| **主文本** | `#1D1D1F` | `#F5F5F7` | 接近纯黑但不是纯黑 (Off-black) |
|
||||
| **次文本** | `#86868b` | `#86868b` | 经典的苹果灰，用于说明文字 |
|
||||
| **强调色** | `#008D74` | `#00B896` | 品牌绿，仅用于链接和主按钮 |
|
||||
| **分割线** | `rgba(0,0,0,0.1)` | `rgba(255,255,255,0.1)` | 极细，极淡 |
|
||||
|
||||
### 2.2 排版系统
|
||||
|
||||
**设计令牌位置**: `src/lib/design-tokens/typography.ts`
|
||||
|
||||
我们使用**合法的开源/系统字体栈**，严格避免版权风险：
|
||||
* **西文**: `-apple-system`, `BlinkMacSystemFont`, `Inter`, `Segoe UI`
|
||||
* **中文**: `-apple-system`, `Noto Sans CJK SC`, `Source Han Sans SC` (思源黑体), `Microsoft YaHei`
|
||||
* **代码**: `JetBrains Mono`, `Fira Code`
|
||||
|
||||
| 样式 | 字号 (px) | 行高 (px) | 字间距 (px) | 用途 |
|
||||
| :--- | :--- | :--- | :--- | :--- |
|
||||
| **Large Title** | 34 | 41 | -0.4 | 页面主标题 |
|
||||
| **Title 1** | 28 | 34 | -0.36 | 章节标题 |
|
||||
| **Title 2** | 22 | 28 | -0.26 | 子章节标题 |
|
||||
| **Headline** | 17 | 22 | -0.41 | 强调文本 (Semibold) |
|
||||
| **Body** | 17 | 25 | -0.41 | 正文内容 |
|
||||
| **Caption 1** | 12 | 16 | 0 | 说明文字 |
|
||||
|
||||
### 2.3 布局与间距
|
||||
|
||||
**设计令牌位置**: `src/lib/design-tokens/spacing.ts`
|
||||
|
||||
* **基础网格**: 4px
|
||||
* **大留白原则**:
|
||||
* 模块间距至少 `48px` 或 `64px`。
|
||||
* 卡片内部 Padding 至少 `24px`。
|
||||
* **流体布局**:
|
||||
* 容器宽度随视口变化，最大宽度限制 (Max-width: 1440px)。
|
||||
* **全宽突破**: Hero Banner 等关键元素应占据全宽。
|
||||
|
||||
### 2.4 材质与光影
|
||||
|
||||
* **Liquid Glass**:
|
||||
* Light: `rgba(255, 255, 255, 0.72)` + Blur 20px
|
||||
* Dark: `rgba(22, 22, 23, 0.72)` + Blur 20px
|
||||
* **阴影 (Shadows)**:
|
||||
* Subtle: `0 2px 8px rgba(0, 0, 0, 0.04)` (静态元素)
|
||||
* Standard: `0 4px 12px rgba(0, 0, 0, 0.08)` (悬浮/交互)
|
||||
* Elevated: `0 8px 24px rgba(0, 0, 0, 0.12)` (模态框)
|
||||
|
||||
---
|
||||
|
||||
## 3. 交互与动画
|
||||
|
||||
**设计令牌位置**: `src/lib/design-tokens/animations.ts`
|
||||
|
||||
所有交互必须有物理反馈。
|
||||
|
||||
* **按钮按压**: Scale 0.98, Duration 100ms
|
||||
* **微交互 (Hover)**: Scale 1.02, Duration 200ms
|
||||
* **页面过渡**: Duration 500ms, Curve `cubic-bezier(0.16, 1, 0.3, 1)`
|
||||
* **Spring 参数**: 使用 `spring(mass: 1, stiffness: 100, damping: 15)` 模拟真实回弹。
|
||||
|
||||
---
|
||||
|
||||
## 4. 去AI味专项指南
|
||||
|
||||
"AI味" = 死板、重复、缺乏人情味、过度依赖默认组件。
|
||||
|
||||
### 4.1 拒绝"Lorem Ipsum"
|
||||
* ❌ "Product Name 1", "This is a description."
|
||||
* ✅ "Eames Lounge Chair", "由模压胶合板和皮革制成，经典的设计符号。"
|
||||
* **要求**：所有占位文本必须是**真实场景数据**。
|
||||
|
||||
### 4.2 拒绝"均等分布"
|
||||
* ❌ 4个功能点，每个占 25% 宽度，图标+标题+描述，完全一样。
|
||||
* ✅ 1个核心功能占 60% 宽度配大图，其余 3 个功能以列表形式在侧边展示。打破对称。
|
||||
|
||||
### 4.3 拒绝"默认图标"
|
||||
* ❌ 使用实心块状图标。
|
||||
* ✅ 优先使用文字。如果必须用图标，使用细线条风格 (Stroke width 1.5px-2px)。
|
||||
|
||||
### 4.4 拒绝"彩虹渐变"
|
||||
* ❌ 高饱和度彩虹渐变背景。
|
||||
* ✅ 纯色、微渐变或高质量实拍图/3D渲染图。
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术架构与文件结构
|
||||
|
||||
本项目基于 **Next.js 16 + Tailwind CSS + React 19** 构建。
|
||||
|
||||
### 5.1 目录结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── lib/
|
||||
│ └── design-tokens/ # 核心视觉配置
|
||||
│ ├── typography.ts # 字体定义
|
||||
│ ├── colors.ts # 颜色定义
|
||||
│ ├── spacing.ts # 间距定义
|
||||
│ └── animations.ts # 动画定义
|
||||
├── components/
|
||||
│ └── ui/ # 基础原子组件
|
||||
│ ├── Button.tsx # 遵循规范的按钮
|
||||
│ ├── Card.tsx # 遵循规范的卡片
|
||||
│ ├── Typography.tsx # 文本组件封装
|
||||
│ └── ...
|
||||
└── app/
|
||||
└── globals.css # CSS 变量映射 (自动从 tokens 生成)
|
||||
```
|
||||
|
||||
### 5.2 迁移指南
|
||||
|
||||
如果你在代码中看到旧的 CSS 类（如 `text-gray-500`），请替换为语义化的设计令牌类：
|
||||
* ❌ `text-gray-500` -> ✅ `text-(--color-label-secondary)` (或封装好的 Tailwind 类)
|
||||
* ❌ `bg-white` -> ✅ `bg-(--color-background-primary)`
|
||||
* ❌ `shadow-lg` -> ✅ `shadow-apple-lg`
|
||||
|
||||
---
|
||||
|
||||
## 6. 组件开发规范
|
||||
|
||||
### 6.1 Button
|
||||
* **形状**: 高度 36px/44px，Pill shape (999px) 或 Rounded (8px)。
|
||||
* **质感**: Primary (纯色无边框), Secondary (浅灰背景)。禁止复杂渐变。
|
||||
|
||||
### 6.2 Card
|
||||
* **圆角**: 统一 `20px` 或 `24px`。
|
||||
* **边框**: Light Mode 下通常无边框或极淡 `1px` 边框。
|
||||
* **内容**: 内部 Padding 至少 `24px`。
|
||||
|
||||
### 6.3 Input
|
||||
* **样式**: 移除默认边框，使用浅灰背景 (`#F5F5F7`)，聚焦时出现 Focus Ring。
|
||||
* **高度**: 至少 `44px`。
|
||||
|
||||
### 6.4 Slider
|
||||
* **组件来源**: 统一使用 `src/components/ui/Slider.tsx`，禁止直接使用原生 `input[type="range"]`。
|
||||
* **轨道样式**: 高度 `6px`，圆角 `999px`，未填充色 `#D4DCE6`，填充色使用品牌色 `#008D74`（深色场景可切换 `#00B896`）。
|
||||
* **滑块样式**: 尺寸 `16px`，白色描边 `2px`，投影 `0 1px 3px rgba(0, 0, 0, 0.25)`。
|
||||
* **状态规范**: 禁用态降低不透明度并禁用交互光效；拖动态允许轻微放大（建议 `scale(1.08)`）。
|
||||
* **可访问性**: 必须提供 `aria-label`，并保持键盘可调节。
|
||||
|
||||
### 6.5 响应式
|
||||
* 使用 `useBreakpoint` 或 Tailwind 的响应式前缀 (`md:`, `lg:`)。
|
||||
* 支持 iPhone 刘海屏安全区域 (`safe-area-inset`).
|
||||
|
||||
---
|
||||
*遵循此标准，我们将构建出一个不仅好用，而且令人愉悦的家具展示系统。*
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user