diff --git a/furniture-3d-system/docs/设计规范/苹果风格视觉标准.md b/furniture-3d-system/docs/设计规范/苹果风格视觉标准.md deleted file mode 100644 index 23abd222..00000000 --- a/furniture-3d-system/docs/设计规范/苹果风格视觉标准.md +++ /dev/null @@ -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`). - ---- -*遵循此标准，我们将构建出一个不仅好用，而且令人愉悦的家具展示系统。* - - -