workbuddy_skills/oil-ui-pro/references/design-direction.md

# 设计方向

## 目录导航

- [认品类，拆标杆](#认品类拆标杆)
- [先定调性，再求差异](#先定调性再求差异)（含 [模糊词翻译](#模糊词必须翻译)）
- [用生成引擎起方向](#用生成引擎起方向)
- [定色彩](#定色彩)
- [定首屏骨架](#定首屏与工作区骨架)（[说服型骨架](direction-persuasion.md)）
- [方向卡](#方向卡)
- [差异检验](#差异检验)
- [北极星与呼应](#北极星与呼应)
- [让人记住的一刻](#让人记住的一刻)
- [参考怎样转为设计决定](#参考怎样转为设计决定)
- [小样、选择与品味](#小样选择与品味)

方向的目标是“这个品类里最好的团队会这样做，而且做出了这个产品自己的样子”；只是“和模型的默认不一样”还不够。高级感来自一套语言的完整和细节，不来自题材少见。

方向里的题材、材质、场景、字体和配色，每次都从当前产品的内容、受众和使用场合里推出；想到的方向和常见的“网红风格”撞上时，要能说出来自这个产品的理由，否则重选。

## 认品类，拆标杆

动手前先认清这是什么品类的产品，再看这个品类里做得最好的产品是怎么做的。这一步给出地板：用户已经习惯的结构，以及一线产品的完成度。后面的调性和生成引擎，是在这块地板之上找这个产品自己的东西。

按三步做，每一步都写下来：

1. **说出品类和标杆。** 这是什么品类的产品，例如“语言学习 App”“组件库官网”“项目管理工具”“作品画廊”。这个品类里风格最鲜明的两三家是谁。选风格最鲜明的，不一定是最有名的。
2. **拿到真实画面，再拆其中一家。** 用宿主的浏览器或搜索，取到这两三家标杆的首屏和一个关键控件的真实画面，存进任务目录，对着图拆，不凭记忆写：记忆里的产品常常是它几年前的样子。某一家的页面打不开或者是 404，换一个地址再试一次，还不行就换一家；拿到两家的真实画面就够，打不开的页面不算参考。拆成 6–10 条看得见的要素，每条写两件事：它是什么样，它为什么这样做。按这几层去拆：控件的形状和手感、字体、颜色、图标和插画、状态与反馈、动效、文案语气、首屏放了什么。要拆到能照着做的程度：写出形状、尺寸关系、状态怎样变化，以及它服务的使用场合。拆出来只有“干净、留白、一种强调色”，说明没拆到位，换一家重拆。确实拿不到画面时，在方向卡“标杆与取舍”开头写明“未看图，凭记忆”，并把字体、色彩、主视觉三栏标为待验证：这三栏最容易凭记忆写成模型默认。
3. **决定留什么、换什么。** 拿本产品的受众、内容和使用场合逐条对照：理由同样成立的留下，理由不成立的换掉，换掉的部分由后面的生成引擎给出替代。结果写进方向卡的“标杆与取舍”。

拆的时候分清三样东西：

- **基线**：用户已经期待的结构，例如画廊里作品先行、筛选在顶部，商店里购物车在右上角。沿用它，用户不用重新学。
- **套路**：这个品类人人都在用的默认版式。一轮方向里至少一个要打破它，见“差异检验”。
- **撞脸**：字体、配色、主视觉和图标都和某个标杆一样，只换了名字。任何方向都不允许。

## 先定调性，再求差异

从产品的题材、受众、品牌语气和使用场合推出调性。用五个刻度描述，每个刻度都写出依据：

| 刻度 | 两端 | 在画面上看什么 |
| --- | --- | --- |
| 能量 | 安静 ↔ 喧闹 | 饱和度、对比、元素是否碰撞 |
| 完成度 | 粗粝 ↔ 精致 | 边缘处理、颗粒与噪点、对齐是否严格 |
| 密度 | 疏 ↔ 密 | 留白尺度、叠层、网格纪律 |
| 分量 | 轻 ↔ 重 | 字重、色块面积、阴影硬度 |
| 严肃度 | 活泼 ↔ 庄重 | 圆角、插画语言、动效幅度 |

取值写成“这个产品是什么 → 五个刻度各取哪一端”，依据来自它的受众、内容和使用场合。刻度两端的任何组合都可以完全成立，失败的是没有依据的默认：

- 证据指向喧闹粗粝，交付的却是米色卡片、柔和阴影和大留白。这是最常见的失败，设计被磨回了模型默认的“安静高级”。
- 反过来，为了显得有趣，给一个本该安静的产品硬加颗粒、撕纸边和粗边框。

证据已经锁定调性时，所有候选都留在这个调性里，在构图、色彩身份和主视觉上拉开差异。不要为了“平衡”放进一个安静极简的保底方案。只有证据确实模糊时，才让候选分布在不同调性上。

### 模糊词必须翻译

“高级、精致、克制、史诗、有文学感、简洁”不能当作设计理由。用户或你自己说出这类词时，先翻译成可观察的决定：

| 模糊词 | 翻译成什么 |
| --- | --- |
| 高级 | 先说清是哪一种高级，再决定字体的对比、分隔的方式、间距的尺度和色相的数量。只说高级什么也没决定 |
| 精致 | 公差：字距怎么调、对齐到几像素的网格、阴影最多几级、色相最多几种 |
| 克制 | 饱和度预算，例如强调色不超过画面 10%；动效幅度上限；色相数量上限 |
| 史诗 | 尺度：展示字多大、主图占多少面积、明暗对比多强 |
| 文学感 | 字族的性格、行长、行高和配色，各取什么值 |
| 粗糙 | 用哪些手段，各用到什么程度，例如错位多少像素、旋转多少度 |
| 简洁 | 密度档位，以及删掉什么、为什么删。简洁是结果，不是指令 |

翻译不出可观察决定的词，从理由里删掉。

动效与交互上的模糊词同样必须翻译为具体模式：

| 动效模糊词 | 翻译成什么 |
| --- | --- |
| 滚的时候动起来 | 先分清是滑动触发还是滑动驱动，见 [滚动叙事](scroll-narrative.md) 的“滚动交互的两种模式”；未明确时按单向一次性处理 |
| 切页面丝滑一点 | 选定转场模式：遮罩式、交叠式还是共享元素，取舍和时长见 [动效](motion.md) 的“整页转场的稳定性取舍” |
| 背景有立体感 | **分层视差**：前后景的速度差和哪些层不做视差，按 [滚动叙事](scroll-narrative.md) 的“视差与一镜到底” |
| 首屏要有冲击力 | 明确首屏单一主角（大字排版、一件实物、核心 3D 或视频），不堆砌次要修饰；进场时长见 [动效](motion.md) 的“时长和幅度” |

## 用生成引擎起方向

每个方向都从一个具体的引擎出发，而不是从形容词出发，不同方向最好用不同的引擎。引擎的内容来自这个产品的证据：受众、内容、使用场合和品牌已有的资产。

- **材质 × 环境**：一种材质放在一个具体的环境里。由它推出光照、深度、边缘的处理和动效的阻尼。
- **一个具体场景**：一个有时间、地点和光线的场景。由场景里的光线、声音、材料和节奏推出质感和动效速度。适合情绪型工具。
- **角色原型**：给产品一个具体的性格，让性格决定字体和动作。
- **一场设计运动或文化语法**：选一个和产品的题材、受众或地域有真实联系的设计运动或视觉传统，借用它的语法，而不是贴它的图案。
- **其他领域的整套表现形式**：把另一个领域的媒介或器物的表达方式借过来。只借它最有辨识度的一两个手法，页面本身仍是原来的体裁；不把那个媒介的部件一件件搬来，那会变成道具堆砌。
- **有意打破常规**：激进的非对称版式、不和谐的配色与字体、让人不安的留白，但整体仍然好看、功能完整。

引擎决定结构、手感、质感和动效；颜色按下一节单独定。

## 定色彩

颜色不直接取生成引擎里那种材质或场景的固有色：隐喻一落到材质，颜色就跟着材质走，不同的产品最后会落在同一组颜色上。产品自己的实物、内容和品牌资产是颜色的正当来源，主视觉就是产品实物时，主色可以从实物里取。其余按四步定：

1. 先写两行，几个方向共用：不看这个产品、只凭品类会顺手给出的那套配色，写出底色和强调色；拆过的标杆各占了哪个色相和明暗。
2. 每个方向从这两者之外选一个色相家族和明暗，或明确的黑白，用一句写它来自这个产品的什么：内容、受众或品牌资产。行业惯用色可以用，前提是理由来自这个品牌。
3. 写出至少三层：底色、主强调，以及由它们派生的选中底、描边和禁用态。
4. 自检：去掉所有发光和模糊后，配色是否还成立；它是从这个产品推出来的，还是一组放在哪个产品上都不出错的安全色。是后者，回到第 2 步。

黑白灰加一种强调色，甚至完全不用彩色，也是完整的色彩身份，这时颜色交给内容：产品截图、用户的照片、一张画。几个方向之间不按明暗分：头号失败是“一个亮、一个暗、一个暖”，每个方向要有自己的色相家族或材质感，明暗只是结果。

## 定首屏与工作区骨架

写文案之前先定骨架，文案去适应骨架。先回答一个问题：**用户来首屏是看什么、做什么？**

- **来听一句话、看一张画、被说服的页面**（落地页、品牌页、产品发布页、展览页）：
  从 8 种首屏骨架里选，跳出左右分栏默认模板。详见 [说服型页面首屏骨架](direction-persuasion.md)。
- **来看内容、挑东西或处理对象的页面**（画廊、商店、信息流、文档、作品集、工具和后台）：
  首屏就是第一排内容本身或工作区。导航、标题和筛选合起来不超过一两行，第一排内容要完整出现在首屏。不放首屏口号，也不放解释这个页面是干什么的段落。按用户最常做的动作安排内容，例如浏览就让内容铺满，处理就让当前对象和动作挨在一起。
- **两种都有时**（例如商店首页顶上有活动横幅）：以用户最常来做的事为准，横幅可以留，但不能把第一排内容推出首屏。

## 方向卡

每个方向写一张方向卡，每项都填具体选择，不填形容词。出三个首屏的那一轮，调性和标杆与取舍几个方向共用一份（候选分布在不同调性上时，调性各填各的），每个方向只填北极星、生成引擎、首屏骨架、字体、色彩、主视觉、图标和控件语法；其余各栏在方向选定后、做完整页面之前补齐。派生版式时，每个版式变体只重写首屏骨架、页面结构和主视觉三栏：

| 字段 | 要写到的程度 |
| --- | --- |
| 北极星 | 一句能指导取舍的体验意图：用起来像在什么地方、做什么事 |
| 调性 | 五个刻度的取值及依据 |
| 标杆与取舍 | 品类是什么，拆的是哪一家，对着哪几张真实画面拆的（写存放路径；没看图就写“未看图，凭记忆”）；沿用了哪几条、换掉了哪几条，各自为什么 |
| 生成引擎 | 用了哪一种，具体是什么，来自这个产品的什么证据 |
| 首屏骨架 | 先写用户来首屏看什么。内容页写首屏能看到几个对象、页头占几行；说服型页面写从骨架表里选的哪一种，附 3–5 个方框的首屏线框：每块是什么、占多大面积、阅读从哪里开始 |
| 页面结构 | 首屏以下怎么组织，例如单列沉浸滚动，或导航、内容、详情三栏 |
| 各区块的形式 | 首屏以下每个主要区块（产品实样、功能、价格、隐私、结尾等）在这个方向里长成什么东西。形式从生成引擎推出，不是同一个模块换颜色 |
| 字体 | 具体字族、字重和尺度关系：展示、正文、数字各用什么，相差多大 |
| 色彩 | 按“定色彩”写：十六进制色值及用途，至少三层，再加一句它来自这个产品的什么 |
| 主视觉 | 哪张图或哪个图形承担情绪与识别，来自复用、生成还是排版本身 |
| 图标 | 用哪一套、什么描边粗细和端点，或者不用图标、改用字符和编号 |
| 控件语法 | 按钮、输入、选中、标签、状态和动效共用的一套形状和手感，用一句话写清，例如圆角多大、描边多粗、按下时怎样变化 |
| 动效 | 手感用“一个拟声词 + 一个实物的动作”来写，实物从这个产品的领域里找；三处基本动效各怎么动、怎样彼此呼应；落地页类页面再写滚动分镜（区块出场、选了哪种滑动驱动的叙事），见 [滚动叙事](scroll-narrative.md)；有没有一处从产品里找到的巧思。见 [动效](motion.md) |
| 结构性突破 | 改变首屏结构的那一处偏离常规，以及它怎样放大北极星。手写批注、质感按钮、划线这类局部细节不算 |
| 记忆点 | 集中发力的一两处：在哪个时刻或位置，用什么材质、动作或画法，见“让人记住的一刻” |
| 放弃什么 | 这个方向主动不要的常见做法 |

北极星、字体、色板和特征直接写进对比页 manifest，与画面一同展示。

## 差异检验

方向卡写完、做首屏之前，逐条检验。基于选定方向派生版式，或用户已经给了品牌规范时，字体和配色是共用的，下面关于字体和色彩的几条不适用，骨架、主视觉和页面结构仍要各不相同：

- **比线框，不比描述**：把各方向的首屏线框并排放在一起比。方向的描述可以各不相同，线框却可能都是“左边大标题，右边小块”。线框相似就是同一骨架，重选骨架。
- **四项至多一项相同**：首屏骨架、字体、色彩、主视觉四项里，任意两个方向至多一项相同；否则就是同一方向的变体，换一个生成引擎重写其中一个。
- **不按明暗分方向**：每个方向有自己的色相家族或黑白，见“定色彩”。
- **结构也要不同**：填了“页面结构”的几个候选（版式变体，或都要做成整页的方向），页面组织不能完全相同、只换颜色和质感。候选只需共享核心内容和主要任务。
- **至少一个走到极端**：在证据允许的调性范围内，至少一个方向在构图、色彩和主视觉上都取明确的选择，不做折中；折中的方向最多一个。
- **至少一个打破品类套路**：在同一调性内，至少一个方向不用这个品类的默认版式。打破套路不等于抛弃基线。常见套路如下：
  - 后台：左侧栏、顶栏加卡片网格。
  - 电商：大横幅、商品网格加页脚。
  - 社交：底部标签栏、信息流加悬浮按钮。
  - 落地页：主视觉、特性、用户评价，最后一个行动按钮。
  - 聊天：左侧联系人，右侧消息。
  - AI 与开发者工具：黑色背景、紫蓝发光弥散圆晕、浮空粒子与千篇一律的胶囊按钮。
- **不撞脸**：把每个方向和它拆过的标杆并排看，撞脸就重做，定义见“认品类，拆标杆”。沿用基线不算撞脸。
- **盲看**：遮住名字和说明只看画面，仍能说出每个方向带给人的不同感受。

首屏做出来后再比一次实际画面：在对比页并排看首屏，眯起眼睛只看明暗块面。块面的分布如果相似，比如都是左边一大块、右边一小块，即使字体和颜色都不同，也回到骨架表重做，不靠换装饰补救。

## 北极星与呼应

北极星选定后，转成少量相互支持的关系：图像的尺度和标题的留白怎样呼应，字形的比例和画面的比例怎样呼应，哪一处用反差。每个方向明确主角、陪衬、重复的节奏和一处结构性突破。

结构性突破要动的是结构，例如首屏的骨架、比例或阅读顺序，而不是多加一个装饰；它要么让主题更强，要么把人引向关键动作。精修的时候，别把有辨识度的选择磨平。新加的元素如果不能加强同一个意图，就不加。

## 让人记住的一刻

每个方向选一两处集中发力，其余保持安静。记忆点通常是一个组件的一次动作：结果、材质、光影、手感和节奏都做到位。

去哪里找：

- **用户会做的动作。** 点按、拖动、切换、提交，比滚动更容易成为记忆点。
- **关键时刻。** 付款成功、第一次完成任务、升级、删除、上传、等结果。这些时刻情绪最强，一个小动画的回报最高。
- **边角页面。** 404、空状态、加载、页脚。没人期待，风险又低，最容易出彩。
- **AI 在工作的时候。** 让过程看得见，进行中和做完的区别落在画面上。白底黑字照样成立，不需要材质和发光。

怎么想：

- **让结果当场发生。** 状态切换不只换一个图标，而是让被影响的东西当场变化。用户看到的是结果，不是控件在表演。
- **把数字画成看得见的量。** 百分比、时长、余额，先问能不能画成面积、长度或个数。数字只是标签，量才是画面。
- **给抽象的状态一种材质。** 先问“这个状态如果是一个实物，会是什么”，答案从产品所在的领域里找。
- **借物件的动作交付结果，物件从用户手上找。** 选这个领域的用户本来就拿在手上的东西。票据、打印机、卡带、老游戏机这类复古实物在灵感站上已经泛滥，用之前先问：这个产品自己的实物是什么。
- **给控件物理和性格。** 拖动有弹性和重量，按下有光影变化，拉过头会不情愿地弹回来。
- **画法要说得出来源。** 点阵、字符画、像素、粒子、写实材质这类画法，只有能说出它来自产品做的事时才选。说不出来源就不选；选了就从主视觉一路用到加载、图标和空状态。

## 参考怎样转为设计决定

先说清这份参考拿来做什么：借它的视觉关系，把它当质量的底线，还是照着它精准还原。看过图再描述它长什么样。借鉴时取的是关系，例如“标题最重，图负责情绪，辅助信息压得很淡”，再拿当前的内容重新组织；不照搬参考里的业务模块、标识和文案。借来的隐喻要落成具体的界面决定，不做成一层妨碍操作的仿真外壳。

参考里没有的东西也是决定。参考的首屏没有标题区和说明段，就不要替它补上；参考没有用的装饰，也不要加回去。

## 小样、选择与品味

方向只做首屏，不一开始就做多套完整产品；轮次和数量见 SKILL.md 步骤 1。

首屏选能暴露方向优缺点的那一页：含复杂表单的产品不能只做封面。

介绍产品的页面，必须让用户看到产品真正交付的东西：一张生成好的报表、一份导出的合同、一段处理后的真实数据，而不是只用文字承诺“能做什么”。这个实样往往比功能列表更有说服力，也最容易成为首屏以下某一段的主角。

推荐理由从任务适配、辨识度、内容承载、可读性和实现代价里比出来。请用户补充品味时，问想要什么感受、不要什么和为什么、哪些地方要保留。用户只说“再高级一点”时，用上面的翻译表追问，或拿两张小样让用户比较。

把选定方向和品味写进设计说明，作为后续判断基线。评审提出新风格时，先判断它是否解决原目标；只有当前方向确实不适配，或用户改变目标时，才重新探索。