深度设计 (Deepen Design) 是做什么的?
创造更具辨识度的设计,而非仅仅更华丽的设计。
开始工作前请阅读 references/recursive-tree.md。 如果用户对之前的结果不满意,也请阅读 references/failure-patterns.md。
核心区别
设计粒度分为不同层级:
- 产品真相与期望信念;
- 品牌定理与叙事隐喻;
- 页面架构与节奏;
- 章节构成与交互;
- 组件语言;
- 字体、颜色、间距、边框、阴影和动效打磨。
始终按此顺序逐层深入。当层级 1-4 未改变时,更多的元素集、阴影或微交互动效并非更深度的设计。
从渲染的证据开始
对于现有界面:
- 保留当前实现和用户所做的更改。
- 捕获当前桌面端和移动端的首屏视图。
- 检查至少两个后续章节和一次有意义的交互。
- 说明客观上运行良好的部分。
- 说明为什么页面在五秒钟内令人遗忘。
- 区分功能门控与品味判断。
将“仍然平庸”视为设计测试失败。不要为之前的评分辩护,也不要默认延续相同的方向。
构建有界的二叉树
在每个需要改变方向的节点上,精确创建两个实质不同的分支。有效分支会改变视觉论点、信息结构或标志性交互。调色盘调换不算分支。
使用束搜索 (beam search):
- 展开两个分支;
- 以最经济保真的方式使两者可见;
- 进行成对比较;
- 保留最强的分支和一个可信的挑战者;
- 下降到下一层级;
- 当两个子分支都继承了相同弱点时进行回溯。
不要构建所有可能的叶子节点。将深度投入在关键决策上,而非组合数量。
必需的深度门控
深度 0:产品不变量
写下:
- 访客;
- 紧张关头;
- 他们应理解、感受和做的事情;
- 竞品无法以相同方式诚实声称的产品真相。
在这一点明确之前,不要实施任何设计。
深度 1:两个品牌定理
创建两个具有不同含义的单句定位。每个必须产生:
- 一个叙事隐喻;
- 一种空间语法;
- 一个内容优先级;
- 一个标志性机制;
- 一个明确的反例参考:此方向不能与什么相似。
在可行时,搜索三到五个当前相关的参考。提取机制,而非风格拼贴。任何候选者都不得复制任何一个参考的完整视觉特征。
深度 2:两种架构
对于领先的定理,将页面分支成两种不同的浏览旅程。为每个章节定义任务、布局家族、节奏、对比事件、证明和退出动作。
当出现以下情况时,拒绝该架构:
- 大多数章节重复“大标题 + 段落 + 图片/卡片”;
- 产品证明与通用的 SaaS 截图可以互换;
- 去掉 Logo 后,类别或品牌变得无法识别;
- 唯一的可见区别是调色盘或字体。
深度 3:视觉原型
在完全实施前,渲染两个幸存的方向。优先考虑:
- 两个首屏原型;
- 每个方向的一个代表性中间页面部分;
- 先做桌面端,然后进行移动端折叠检查。
并排比较截图。不要仅凭文字描述来选择。
如果用户有空且两个方向编码了真正不同的品味,提出一个简洁的分岔问题。如果用户要求自主权,则根据证据做出选择并保留挑战者分支。
深度 4:系统和实现
仅在此阶段定义:
- 字体角色与字号;
- 调色盘与对比度;
- 素材语言;
- 网格、间距与形状规则;
- 动效语义;
- 组件原语。
当相关设计系统数据可用时,使用 ui-ux-pro-max。在方向选定后,使用 design-taste-frontend 作为预检检查器。其规则可能会拒绝陈词滥调,但不能选择概念方向。
深度 5:微观细节
仅在方向与架构门控通过后,调整边框、阴影、材质、悬停效果、光学间距和性能。
每个微观变化必须指明其强化的父级决策。如果它不改变层次结构、含义、反馈或材质一致性,则将其移除。
评估正确的东西
保持两个独立的账本。
功能门控
- 产品真相;
- 响应式行为;
- 无障碍性;
- 性能;
- 代码和测试健康度。
这些是通过/不通过的限制条件。它们不能证明品味。
设计判断
- 五秒内理解度;
- 去掉 Logo 后的可拥有性;
- 经过一段延迟后的视觉记忆度;
- 与类别模板的距离;
- 产品机制的可见性;
- 整个页面的对比度与节奏;
- 用户偏好。
使用参考工作流中的成对证据。不要根据自定的评分标准给出绝对的 95/100 或 98/100。如果用户说结果是通用的,那么无论 Lighthouse 分数如何,独特性声明都已失败。
以证据收尾
返回:
- 探索过的树结构及回溯点;
- 获胜方向及幸存的挑战者分支;
- 之前/分支A/分支B 截图或等效的视觉证据;
- 按深度排序的三个最大可见变化;
- 功能门控结果;
- 未解决的品味或产品决策。
不要将微观细节的数量描述为主要成果。成果是一个可被识别的设计论点,即使去掉 Logo 也能存在。