卷 VI · 交付· CH 23· 三步工作法 深度 23/28

一个人怎么做设计:抄、限、检

前面二十二章给了你一堆规则。这一章讲怎么把它们变成一个每次都能重复的流程——因为一个人做设计,靠的从来不是灵感。

整套抄,别拼限制要靠工具做完再检

三步

抄:整套拿来,连同规则

「抄」这个字用得很直白,因为它就是字面意思。但有一个关键限定:

你抄的不是那几个值,是「值从哪来」这条规则

抄 Material 3,抄的不是 #6750A4,是「颜色从色阶取、色阶从种子生成、角色决定用哪一档」这套机制。

值可以换(你的品牌色不是紫的),规则不能换。

最容易出事的是东拼西凑:从 Material 抄配色、从 iOS 抄间距、从某个 Dribbble 稿抄卡片样式。这是第 4 章那个「花」的最快路径——因为这三套东西各有各的内部一致性,拼在一起就一个都没有了。

对 Android 来说这一步几乎是白送的:Material 3 本身就是一套完整的、有取值规则的系统,而且 Compose 里已经实现好了。你要做的只是别去破坏它。

这一步的交付物一个种子色 + 一条字号阶梯 + 一条间距阶梯
花的时间半天,一次性

限:让「随手写」变麻烦

光有阶梯没用。你半夜赶需求的时候,还是会写 13.sp

所以第二步的目标不是「记住规则」,是让违反规则比遵守规则更费劲

手段拦住了什么值不值
lint 拦裸 .dp / .sp / Color(0x…)90% 的破例最值。半天工作
对比度单元测试全部「脏」的问题最值。二十行代码
触摸目标 UI 测试全部 48dp 问题值。几行
组件只收 token 类型剩下的 10%项目大了再上
截图测试意外的视觉回归看团队规模
这一步是你相对设计师的绝对优势

设计师维持一致,只能靠眼睛和纪律——他们要记住这套值,每次手动去取,靠 review 抓漏网的。

你可以靠编译器和 CI

这个差别在项目第一周不明显。在第五十个界面、第三个新人加入之后,它是决定性的——因为纪律会随时间衰减,而 CI 不会。

这一步的交付物一条 lint 规则 + 两个测试
花的时间一天,一次性

检:做完再看,不是边做边看

第三步是清单。有两个执行细节决定它有没有用:

① 做完了再打开,不要边做边看

边做边看会变成自我审查——你会一边写一边纠结,效率极低,而且看不见整体。

做完再看才是验收。这时候你有一个完整的界面,能一次性发现所有问题。

② 清单要短到你真的会用

一份 50 条的清单等于没有清单。第 24 章那张是全书压出来的版本——15 条,其中 11 条能自动化

把能自动化的搬进 CI 之后,你每次肉眼要看的只剩 4 条。四条是人真的会做的量。

顺序不能换

这三步的顺序是有依赖的:

  • 先「限」再「抄」——你会把自己锁死在一套烂值上,而且改起来比没限制还难。
  • 先「检」再「限」——你每次检出来的都是同一批问题,改完下次又犯,因为没有任何东西拦着。

正确的因果是:抄给你一套值,限让这套值守得住,检告诉你哪儿还是漏了。

一个人做设计的现实建议

最后几条不成体系但很实用的:

找参照,而不是找灵感

做一个界面之前,去看三个做同类事情的成熟 App——不是为了抄它们好看的地方,是为了知道用户的预期是什么

用户在你的订单页找「联系客服」,找的是他在别的 App 里习惯的那个位置。刻意做得不一样,代价是用户要重新学。

先做最难的那一屏

不要从登录页开始。登录页只有三个元素,什么系统都能撑住。

信息最密的那一屏开始——列表、详情、设置。如果你的间距阶梯和字号阶梯能撑住那一屏,剩下的都是白送。

改完之后,把改动的理由写下来

不是写文档,是写注释,就一行。

// 质心补偿:三角形在外框 1/3 处 和一个裸的 2.dp,是两种完全不同的东西——前者是知识,后者是债。

这也是这本书里所有代码示例都带注释的原因:值和它的出处必须待在一起,分开了就等于没有出处。

最后一条,关于期待

「像样」的天花板不是「惊艳」,是顺手到没人提起

你按这本书做完一个界面,最可能的反馈是没有反馈——没人夸,也没人说难看。那就是成了。

用户打开一个 App 不是来欣赏的,是来办事的。办完事之后他不该记得你的界面长什么样。

本章关掉的自由度本章 3 条 · 累计 67 / 78
  • 「从哪开始」——整套抄一个已成体系的系统(连同它的取值规则),不东拼西凑。先做最密的那一屏。
  • 「怎么保证守得住」——上工具,不靠自觉。lint + 对比度测试 + 触摸目标测试,一天搞定。
  • 「什么时候检查」——做完再检,不边做边检。清单要短到能在两分钟内跑完。