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

设计方向

模型不被推一把时，会给出让所有人都能接受的平均答案。“做得独特一点”“随机一点”推不动它，它只会换几处装饰。这里的方法都是在给模型一个具体的推力：先认清品类、看清同类最好的产品怎么做，再定调性、用生成引擎起方向，最后用可检验的规则逼出真正的差异。方向的目标是“这个品类里最好的团队会这样做，而且做出了这个产品自己的样子”；只是“和模型的默认不一样”还不够。高级感来自一套语言的完整和细节，不来自题材少见。

本文件以方法为主，偶尔给的例子只示意要具体到什么程度，不是风格清单。方向里的题材、材质、场景、字体和配色，每次都从当前产品的内容、受众和使用场合里推出；想到的方向如果和常见的“网红风格”撞上，要能说出来自这个产品的理由，否则重选。

认品类，拆标杆

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

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

1. 说出品类和标杆。 这是什么品类的产品，例如“语言学习 App”“组件库官网”“项目管理工具”“作品画廊”。这个品类里风格最鲜明的两三家是谁。选风格最鲜明的，不一定是最有名的。
2. 拆开其中一家。 拆成 6–10 条看得见的要素，每条写两件事：它是什么样，它为什么这样做。按这几层去拆：控件的形状和手感、字体、颜色、图标和插画、状态与反馈、动效、文案语气、首屏放了什么。要拆到能照着做的程度。例如一款学习 App 是“按钮厚实，按下去会陷下去，答对时有夸张的弹跳”，理由是答题是核心动作，要给利用零碎时间的普通人手感上的回报；一款开发工具是“深色、行距紧、每种状态一个统一的图标、快捷键印在菜单上”，理由是工程师一天要在里面待好几个小时。拆出来只有“干净、留白、一种强调色”，说明没拆到位，换一家重拆。
3. 决定留什么、换什么。 拿本产品的受众、内容和使用场合逐条对照：理由同样成立的留下，理由不成立的换掉，换掉的部分由后面的生成引擎给出替代。结果写进方向卡的“标杆与取舍”。

拆的时候分清三样东西：

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

检验方法：把一个按钮、一行列表、一个空状态或一次反馈单独拿出来，放进别的产品里，还能认出它属于这个产品。识别不一定靠形状和颜色，也可以靠密度、字体和动效的节奏；黑白方向同样能做到。

先定调性，再求差异

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

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

例如“地下现场演出社区 → 喧闹、粗粝、密”，“冥想陪伴 → 安静、精致、疏”。两种都完全成立，失败的是没有依据的默认：

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

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

模糊词必须翻译

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

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

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

用生成引擎起方向

每个方向都从一个具体的引擎出发，而不是从形容词出发。不同方向最好用不同的引擎：

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

感受词从这个品牌出发，而不是从行业出发。“美味、温暖、有食欲”会把每个食品应用都推向橙色；“深夜治愈、独处、温柔”才属于某一个品牌。行业惯用色可以用，前提是理由来自这个品牌；如果理由只是“这个行业都这么用”，就换掉。

写方向卡之前，先在心里把方向想厚：用起来是什么感觉，让人联想到什么表面和物件，页面怎样流转，在讨好哪一类人。卡片是从这些思考里提炼出来的。跳过这一步，卡片只剩三十个字的空壳，后面做出的页面也会是平的。

随机种子也是一种引擎：让脚本生成一串随机字符，从中联想配色、布局和字体，种子不进入界面。它适合陷入重复时破局，但不如上面几种引擎可解释。

先定首屏骨架，再写文案

先回答一个问题：用户来首屏是看什么、做什么？

• 来看内容、挑东西或处理对象的页面，例如画廊、商店、信息流、文档、作品集、工具和后台：首屏就是第一排内容本身。导航、标题和筛选合起来不超过一两行，第一排内容要完整出现在首屏。不放首屏口号，也不放解释这个页面是干什么的段落。下面的骨架表不用于这类页面；它们按“产品界面”一节定工作区骨架。
• 来听一句话、看一张画、被说服的页面，例如落地页、品牌页、产品发布页、展览页：才从下面的骨架表里选。
• 两种都有时，例如商店首页顶上有一块活动横幅，以用户最常来做的事为准：横幅可以留，但不能把第一排商品推出首屏。

以下是说服型页面的方法。

模型最顽固的习惯是左右分栏：一边大标题，另一边说明、按钮或一张图。换字体、换配色、换材质都改变不了它，因为它在写文案之前就定下来了：先想好标题、一段说明、一个按钮，把它们摆好，自然就是左右两栏。所以骨架要在写任何文案之前决定。

每个方向先从下表选一个首屏骨架，再用 3–5 个方框画出首屏线框：每块是什么、占首屏多大面积、阅读从哪里开始。

骨架	首屏长什么样
满版图像压字	一张图占满首屏，标题和动作压在图的安全区里
居中单一物件	一个物件或一句话居中，四周是大面积空白
画面即界面	首屏就是产品界面或一件实物本身，标题、导航和按钮都长在它上面
满版文字	文字本身就是画面，字大到占满首屏、跨过边缘或被裁切
通栏上下堆叠	通栏大标题横跨整个宽度，下面紧接内容
网格拼贴	多块内容同时出现，按网格或拼贴排列，没有单一主角
纵排或斜向	文字竖排、斜切或旋转，打破从左到右的阅读
左右分栏	文字一侧，画面一侧。这是模型的默认，一轮最多一个方向使用，并写出为什么非它不可。另一侧必须是跨越结构的图像、色块或图形装置，不能是装在卡片里的产品界面

规则：

• 同一轮的方向，骨架互不相同。
• 左右分栏最多出现一次。所谓“大标题九栏、说明三栏”同样算左右分栏。
• 骨架定好之后再写文案。文案去适应骨架，不让骨架去适应“标题 + 说明 + 按钮”的组合。

构图的大胆程度和调性无关。安静精致的产品，一样可以把一句话放在空白首屏正中，或让纵排标题贯穿整屏，或让界面本身占满首屏。调性决定音量，骨架决定结构；不要因为调性偏安静，就退回左右分栏。

每一轮至少有一个方向让你自己觉得有点冒险：放在同类产品里会显得格格不入，但仍然好看，功能完整。模型只有被明确要求时才会这样做。如果你心里想的是“这不可能行得通”，通常说明方向是对的，做出来往往比预想好。

最常见的模板核心不是左右分栏本身，而是“左边标题和两个按钮，右边一张装在圆角卡片里的产品界面”。那张卡片几乎总是该删的：要么让产品界面本身占满首屏，要么换成一张跨越版面结构的图、一个色块或一个图形装置。

产品界面：先定对象和工作区骨架

后台、工具、App，以及画廊、商店、信息流、文档站这类让人浏览和挑选内容的页面，都没有首屏海报，决定结构的是用户每天面对的对象、对它最常做的动作，以及多久用一次。模型的默认是“左侧栏 + 顶部四张指标卡 + 一张图表 + 一张表格”，不管产品是什么，因为这样不需要理解业务。跳出它的办法和落地页一样：画界面之前先定骨架。

先写三行：

• 核心对象：用户每天处理的是什么，例如工单、合同、镜头、病床；一眼认出它靠哪两三个属性，例如缩略图、状态、金额、截止时间。再问一句：用户在这个对象上最怕错过什么？通常是一个会随时间变化的量，例如已经等了多久、离截止还剩多少、欠了多少。把它做成对象上最显眼的属性，而不是藏在详情里。
• 主动词：对它最常做的动作是逐条处理、比较、创作、安排、定位、推进还是监控。
• 频率：每天用几小时的专业用户，还是每月来一次的普通人。它决定密度。

再按主动词选工作区骨架：

主动词	骨架	长什么样
逐条处理	队列 / 收件箱	左边队列，右边当前这一条的全部信息和处理动作；处理完自动跳到下一条，键盘可以一路按到底
比较与筛选	表格	行是对象，列是比较依据；筛选、排序和批量操作长在表头与选择状态上，不另开页面
创作与编辑	画布 / 文档	内容占满，工具贴着内容出现，面板按需展开
沿时间安排	时间线 / 日历	横轴是时间，对象是时间上的块，拖动即改期
在空间中定位	地图 / 平面图 / 座位图	对象画在真实位置上，列表只做辅助
推进流程	看板 / 流水线	列是阶段，对象在列之间移动
监控	仪表	只在真的需要持续盯着时使用；每个数字写出正常范围，以及出问题后该做什么
对话后产出	对话 + 产物	对话收窄在一侧，产物占主区域并能直接编辑
浏览与挑选	画廊 / 货架 / 信息流	内容铺满首屏，缩略图的比例就是版式；筛选和排序贴着内容顶部，占一行；点开时在原地展开或用浮层，关上回到原来的位置

首页先回答“我现在该处理什么”，而不是“总共有多少”。大多数产品的主动词不是监控，首页就不该是指标卡仪表盘。

对象的样子就是产品界面的主视觉。 先设计一个对象在列表行、卡片或画布上的样子：最重要的属性放在哪，状态怎样一眼看出，长名字怎么收，空值怎么显示，选中和处理中长什么样。一个设计好的列表行，比十张指标卡更能体现方向。

密度按频率定。 每天用几小时的专业工具，行高 32–40px、正文 13–14px、一屏看到 20 行以上都正常，操作以键盘为先；偶尔来一次的消费产品，点击区域 44px 以上，一屏只要求一个决定。不要给专业工具套消费级的大留白，也不要把一次性的流程塞满控件。密度要在截图上数出来：一屏能看到几个对象，主动作离当前对象有多远。高频工具一屏少于 10 个对象时，先查行高、页面头部和说明文字占了多少高度。

产品界面的大胆放在哪。 放在工作区结构、对象的样子和状态的表达上，例如时间在画面里怎样流动、超时怎样一眼跳出来。页面标题和品牌区保持小：一行，和区域标题同级或略大。在高频工具和内容页里放超大页面标题、通栏口号，或者用一整块深色卡片装“下一步”动作，都是把落地页的手法搬错了地方，占掉的是每天要看几百次的工作区。

多个方向时，工作区骨架、对象的样子、导航方式（侧栏、顶栏、命令面板、在空间里跳转）、密度四项，任意两个方向至多一项相同。这四项是在通用差异检验之外再比，不是替代：产品界面同样需要各自的色彩身份和字体性格，不能三个方向都是系统黑体加一种强调色，只换了布局。方向卡里的“首屏骨架”一栏，产品界面填工作区骨架和对象的样子。

方向卡

每个方向写一张方向卡，每项都填具体选择，不填形容词：

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

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

差异检验

方向卡写完、做小样之前，逐条检验：

• 比线框，不比描述：把各方向的首屏线框并排放在一起比。方向的描述可以各不相同，线框却可能都是“左边大标题，右边小块”。线框相似就是同一骨架，重选骨架。
• 四项至多一项相同：首屏骨架、字体、色彩、主视觉四项里，任意两个方向至多一项相同；否则就是同一方向的变体，换一个生成引擎重写其中一个。
• 不按明暗分方向：头号失败是“一个亮、一个暗、一个暖”。每个方向要有自己的色彩身份：不同的色相家族、不同的材质感，或者干脆是黑白。明暗是色彩身份的结果，不是区分方向的依据。
• 黑白也是一种色彩身份：黑白灰加一种强调色，甚至完全不用彩色，也是完整的色彩身份，这时颜色交给内容：产品截图、用户的照片、一张画。它和多色方案同样算拉开了差异。颜色选常见的还是少见的都可以，理由要来自这个产品。
• 结构也要不同：不同方向可以有不同的页面组织。三个方向页面结构完全相同、只是颜色和质感不同，就还没有拉开差异。候选只需共享核心内容和主要任务。
• 至少一个走到极端：至少一个方向在各项上都取明确的一端，不做折中；折中的取值最多出现在一个方向里。
• 至少一个打破品类套路：在同一调性内，至少一个方向不用这个品类的默认版式。常见套路如下： 打破套路不等于抛弃基线：画廊仍然让作品先行，只是作品的排列、筛选和点开后的样子可以与众不同。
  • 后台：左侧栏、顶栏加卡片网格。
  • 电商：大横幅、商品网格加页脚。
  • 社交：底部标签栏、信息流加悬浮按钮。
  • 落地页：主视觉、特性、用户评价，最后一个行动按钮。
  • 聊天：左侧联系人，右侧消息。
• 不撞脸：把每个方向和它拆过的标杆并排看。字体、配色、主视觉和图标都一样，只换了名字，就是撞脸，重做。沿用基线不算撞脸，例如画廊让作品先行。
• 盲看：遮住名字和说明只看画面，仍能说出每个方向带给人的不同感受。

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

方向贯穿整页

方向不只属于首屏。首屏以下的每个区块，都要用这个方向自己的语言重新设计：同一份内容，在不同方向里应该是不同的东西，形式从各自的生成引擎推出。模型最容易在首屏用尽力气，到了第二屏就回到通用的卡片、分栏和居中结尾，三个方向的下半页变得一模一样。

规则：

• 候选共享内容，不共享实现。 同一份示例数据可以共用；为这个方向写的区块结构、样式和代码不共用。不要为了省事，把某个区块写成共用模块再给各方向换颜色，那等于亲手制造趋同。产品本身的组件不在此列：设计组件库官网或已有产品时，各方向照常使用同一套真实组件，差异体现在它们被怎样编排、呈现和讲述上。
• 同一条修改意见，要翻译成每个方向自己的做法。 评审常常对所有方向提出同一条建议，比如“展示产品真正交付的东西”。这条意见在每个方向里的落地形式都不同，不能用同一种实现套到所有方向上。
• 区块的顺序和取舍也属于方向。 各方向都按“首屏、对象介绍、三步流程、一句结尾”排下来，就算每块都换了样子，仍是同一张页面。由各自的引擎决定先讲什么、合并什么、删什么：有的方向把流程并进对象介绍，有的方向整页只讲一个对象。产品界面也一样，同一段内容、同一道题按同样的顺序出现，就是换了皮的同一个界面。
• 外壳也是区块。 导航、行动按钮、结尾区的句式和页脚最容易被忽略，常常三个方向共用同一套，只换颜色。它们同样要从生成引擎推出自己的形式。
• 逐区块比较，而不是只比首屏。 把各方向的整页截图并排，按区块一一对照：产品实样对产品实样，结尾对结尾。任何一个区块在两个方向里看起来是同一个东西，就回到那个方向的生成引擎重做这个区块。

北极星与呼应

北极星选定后，转成少量相互支持的关系：摄影的空旷与标题的留白呼应；窄字形与纵向画面呼应；低饱和环境色与唯一的行动色形成反差。每个方向明确主角、陪衬、重复的节奏和一处结构性突破。

突破要改变结构，例如首屏的骨架、比例或阅读顺序，而不是多加一个装饰；它应增强主题或引导关键动作。精修时不要把有辨识度的选择修平。新增元素不能强化同一意图时，优先省略。大胆的方案也必须可读、可用。

让人记住的一刻

模型做的页面常常处处及格，却没有一处让人记住。惊艳很少来自整页都用力，而是来自一处做到极致：通常是一个组件的一次动作，结果、材质、光影、手感和节奏都做到位。每个方向选一两处集中发力，其余保持安静。

去哪里找：

• 用户会做的动作。 点按、拖动、切换、提交，比滚动更容易成为记忆点。
• 关键时刻。 付款成功、第一次完成任务、升级、删除、上传、等结果。这些时刻情绪最强，一个小动画的回报最高。
• 边角页面。 404、空状态、加载、页脚。没人期待，风险又低，最容易出彩。
• AI 在工作的时候。 把过程按顺序展开：步骤一个个亮起，日志一行行流进来，做完的一步收起，正在做的一步展开。白底黑字照样成立，不需要材质和发光。

怎么想：

• 让结果当场发生。 状态切换不只换一个图标，而是让被影响的东西当场变化：打开深色模式，整页像拉下遮光帘一样暗下去；拖动时间，画面的天色跟着走。用户看到的是结果，不是控件在表演。
• 把数字画成看得见的量。 百分比、时长、余额，先问能不能画成一个量：点亮的格子、填满的长度、一格代表一天的网格。数字只是标签，量才是画面。
• 给抽象的状态一种材质。 先问“这个状态如果是一个实物，会是什么”，答案从产品所在的领域里找。
• 借物件的动作交付结果，物件从用户手上找。 选这个领域的用户本来就拿在手上的东西：旅行产品用登机牌成立，作品集用登机牌只是借梗。票据、打印机、卡带、老游戏机这类复古实物在灵感站上已经泛滥，用之前先问：这个产品自己的实物是什么。
• 给控件物理和性格。 拖动有弹性和重量，按下有光影变化，拉过头会不情愿地弹回来。
• 画法要说得出来源。 点阵、字符画、像素、粒子、写实材质这类画法，只有能说出它来自产品做的事时才选：把数据渲染成点阵的研究工具用点阵，长在终端里的工具用字符画。说不出来源就不选；选了就从主视觉一路用到加载、图标和空状态。做法见 点缀与特效。
• 一张画面垫底时，界面要退后。 有情绪的摄影或绘画铺满，界面缩到只剩一行导航和一句话，排版严格；底图虚化或压暗，保证文字可读。

参考怎样转为设计决定

先说明参考用途：借鉴视觉关系、建立质量基线，还是精准还原。实际看过图片再描述它的视觉。借鉴时提取关系，例如“标题占主要视觉重量，图像提供情绪，辅助信息压低对比”，再用当前内容重新组织；不要照搬参考的业务模块、标识和文案。隐喻要转译成界面决策，不做成妨碍操作的仿真外壳。

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

小样、选择与品味

先用几句话比较设计意向，再给有希望的方向做代表性小样，不一开始就做多套完整产品。单个页面的小样通常是首屏加最能体现方向的一两个区块；用户明确要完整页面时照做，评审深度仍按探索阶段。方案数量按任务定，窄小的任务不强求多方案。

挑能暴露方向优缺点的代表性页面：含复杂表单的产品不能只做封面，长页面的小样要包含关键内容结构。

介绍产品的页面，必须让用户看到产品真正交付的东西：一张生成好的报表、一份导出的合同、一段处理后的真实数据，而不是只用文字承诺“能做什么”。这个实样往往比功能列表更有说服力，也最容易成为页面的第二个主角。需要实际比较多个小样，或由 Agent 自行选定方向时，先使用 风格对比页 生成对比页留档，再选定方向。

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

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