这是给开发者的审美急救包 把艺术放一边只要不搞砸你就赢了

现在回想起来，2024 年 3 月 11 日那晚例会上，空气里多少带着点尴尬的张力。

Yucheng 找到我说：“辰丰，要不你给大家做个设计分享？”我当时第一反应是心里发怵。因为围坐在屏幕那头的是一群能徒手写出高并发后端、精通各种架构的独立开发者。

在屠夫面前讲绣花，这事儿风险很大。

我们这群人有个通病：代码写得固若金汤，逻辑跑得比流星还快，但只要一碰界面，事情就开始变得诡异。我们愿意花 88 美元去买一套顶级的 UI 组件库，或者去 Github 扒一套 5k star 的开源前端，觉得自己稳了。

结果你觉得那个按钮颜色太淡，改深了一点；觉得字太小，改大了一号。就在按下 Ctrl+S 的那一瞬间，某种神秘的平衡崩塌了。整个页面瞬间从“硅谷极客风”跌落到了“城乡结合部打印店”。

那天晚上我站在麦克风前，决定不说那些虚头巴脑的色彩理论。我只想聊聊作为一个写代码的，怎么才能“不搞砸”。

别被蝴蝶翅膀扇晕了头

在准备 PPT 的时候，我自己先掉坑里了。

我想着既然是讲设计，那幻灯片得炫啊。打开 Figma，满脑子想着怎么搞动效，让文字像烟花一样炸开，甚至那个 标题我都想让它动起来。

做到一半，我停手了。我发现页面之间的耦合性太高，改一张图要动五张，我把自己困在了工具里。这像极了我们做产品的过程——看到别人用 Figma，我也学 Figma；看到别人有动效，我也要加。

为了那个飞舞的蝴蝶，我浪费了整整两天，而那个核心的用户流程可能还是烂的。

我把那些花里胡哨的动效全删了。我想告诉大家设计金字塔的底座是UUB，也就是 Useful（有用），中间是 Usable（好用），塔尖才是 Beautiful（好看）。

想想报税系统，无论是美国的 IRS 还是国内的个税 APP，丑吗？丑。难用吗？难用。但你为什么还得用？因为它解决了最底层的问题。很多开发者连底座都没打好，就在琢磨塔尖的装饰，这就是本末倒置。

记住 HAS，你就不再是流浪汉

既然要把设计从“玄学”拉回到“工程学”，我把那些厚重的书扔到一边，提炼了三个字母：HAS。

那天晚上我跟大家说，只要记住这三个词，你的界面至少能及格，不会让人觉得是流浪汉写出来的。

H 是 Hierarchy（层级）。

这是最难的。你们的页面为什么看起来像一堵墙？因为所有字都是黑的，一样大。

敢不敢把标题加粗？敢不敢把次要信息变成灰色？敢不敢把那个该死的注释缩小两号？

我在屏幕上演示了一遍：把一段乱七八糟的 SORA 介绍文案，通过字号大小、颜色深浅的调整，瞬间让用户知道眼睛该往哪看。这就是层级，这不需要艺术细胞，只需要你懂逻辑。

A 是 Alignment（对齐）。

这是人类视觉的本能。不需要什么网格系统，你就瞇着眼看，元素之间是不是存在一条看不见的线？

我看过太多独立开发者的作品，左边差两个像素，右边差三个像素。这就像列队报数，只要有一个人站歪了，整个队伍的精气神就散了。

S 是 Spacing（间距）。

为什么 Apple 的页面看起来“透气”？因为他们舍得留白。

我给了一个死规则：所有间距，请用 4 或 8 的倍数。 8px、16px、24px。

不要随手写个 margin: 13px，那会显得你很业余。间距不仅仅是空隙，它是分组的逻辑。标题和正文近一点（比如 8px），正文和按钮远一点（比如 24px），用户脑子里自然就知道谁跟谁是一伙的。

颜色是开发者的禁区

聊完骨架，还得有点血肉。这时候我不得不提 CCC：Color（颜色）、Contrast（对比）、Consistency（一致性）。

关于颜色，我那天几乎是求着大家：别自己调。

除非你是天赋异禀，否则不要相信你的“直男”色感。你去 Tailwind CSS 的色板里挑，去用那些生成好的配色方案。那些颜色是设计师盯着屏幕一个个像素调出来的，包含了明度、饱和度极其微妙的平衡。

你自己随手在取色器里点一下，弄出来的红配绿，可能会导致用户的视网膜灼伤。

还有 Consistency（一致性）。

你打开星巴克的 APP，那个墨绿色一出来，你就知道是它。而我们的产品，往往是首页一个风格，设置页又是另一个风格。底部导航栏五个图标，中间那个画风突变。这种割裂感，就像一个人上半身穿西装，下半身穿沙滩裤，你很难信任他能办成什么大事。

AI 时代的残酷筛选

那是 2024 年初，GPT-4 已经很火了，Text-to-UI 的生成器（像 Galileo）刚开始内测。

有人在会上问我：“辰丰，以后 AI 帮我画不就行了？”

我说，这恰恰是最危险的时候。我展示了一张 AI 生成的界面，质量相当高，Alignment 严丝合缝。但问题来了：如果它生成坏了，你看得出来吗？

如果你不懂 HAS，不懂 CCC，AI 给你一坨垃圾，你会觉得“哇，AI 真厉害”，然后把它直接推到用户面前。

以前，写代码是门槛；现在，审美判断力才是门槛。因为代码 AI 也能写，界面 AI 也能画。唯独那个“这东西对不对味”的判断，AI 目前还做不到百分之百准确。

AutoLayout 就是 Flexbox

那天的高潮时刻，是我打开 Figma 演示 AutoLayout 的时候。

很多开发者抗拒学设计软件。但我告诉他们，Figma 的 AutoLayout 根本不是画图工具，它就是可视化的 CSS Flexbox。

你设置的 Gap 就是 gap，你选的 Space Between 就是 justify-content: space-between。

当你用 AutoLayout 的思维去画图时，你其实是在写代码。那一刻，我看到公屏上弹幕炸了。原来设计和开发之间，从来就没有那道不可逾越的墙。我们只是换了一种语言在描述同一个逻辑。

别做艺术家，做个有洁癖的包工头

分享快结束的时候，已经是深夜了。我嗓子有点哑，但还是提了一个近乎强迫症的请求。

“求求你们了，中英文之间加个空格。”

这听起来很琐碎。Word 会自动加，但在 Web 上，当时这还得靠手动（2025 年的今天 CSS 有相关属性了）。还有那些大小写。OpenAI 不是 Openai，ChatGPT 不是 Chatgpt，iOS 不是 Ios。

这些细节真的影响功能吗？不影响。你的代码依然能跑，钱依然能收。但正是这些该死的空格、这些准确的大小写、这些对齐的像素，构成了产品的“体面”。在这个急躁的、由代码堆砌的世界里，这一点点体面，或许就是你和那些赚快钱的草台班子之间最大的差异。

那一晚聊到最后，我们其实只确认了一件事：别逼自己去做那个虚无缥缈的艺术家，没必要。你得退回来，做一个“防呆工程师”。也就是别做艺术家，做个有洁癖的包工头。

你要把设计看作是另一种形式的代码规范。在写代码的时候，如果发现一行 if 语句没有缩进，或者括号没对齐，你会难受得抓耳挠腮，甚至睡不着觉，对吧？这种生理性的反感，才是你应该有的本能。你得把这种本能平移到像素上。只要界面没对齐，就像代码没缩进一样，是不可饶恕的低级错误。

如果你在这个过程中卡住了，不知道该留多少白，别去猜，也别去搞什么艺术灵感。死磕 4 像素。

这就是设计的黄金分割，也是程序员的救命稻草。在这个混乱的屏幕上，当你犹豫这个按钮该离标题多远时，闭着眼睛选 4 的倍数——4、8、16、32。这不需要天赋，这是数学，是像万有引力一样可靠的规矩。甚至当你让 AI 给你出图时，也请带着那个 HAS 原则去审视它，像做 Code Review 一样去挑刺，别把 AI 生成的垃圾当宝贝直接贴上去。

那些我们假装看不见的错位

文章读到这儿，如果你只是点了点头，那其实一点用都没有。

我现在就想让你做一件事：把那个你正在开发的、让你隐隐作痛的项目打开。

别盯着细节看，试着做一个“眯眼测试”。真的，现在就眯起眼睛，让视线模糊掉，去看你的 Landing Page。这时候你依然觉得乱成一团、刺眼突兀的地方，就是逻辑混乱的罪证。别找借口，把它对齐。

然后，去做一个全局搜索。把每一个中文和英文的连接处，都敲上一个空格。这听起来很琐碎，但就像代码里的注释一样，这点微小的呼吸感，就是专业和业余的分水岭。

最后，把你觉得次要的那些文字，颜色调浅 20%，做个灰度处理。只要还能看清，就留着。你会惊讶地发现，你根本不需要加粗或者放大，层级感自己就浮现出来了。

别再假装看不见那些错位的像素了，那是我们作为工程师，在这个混乱世界里最后的倔强。