转载 / 二次创作：本片整理自 X 用户龙海（@longhaiqwe123）2026-10-03 发的长文《人人都是 UI 设计师》，推文：https://x.com/longhaiqwe123/status/2106216781174251724
20 条设计规则出自《Refactoring UI》（Adam Wathan、Steve Schoger，官网 https://refactoringui.com/ ）；20 张前后对比图是书里的插图，经原文转载，版权归原作者所有，本片仅作介绍和评论引用。
AI 几分钟就能做出一个产品，界面却可能丑得让人想走。这期把原文的 20 条设计规则一条条过一遍：每条一张“错误做法 / 正确做法”的对比图，讲清楚差在哪、为什么，数字都取自图里的标注。
本期内容
00:00 开场：AI 做的界面为什么丑
00:18 规则从哪来：《Refactoring UI》
00:55 第 1 条 为设计选一种个性
01:14 第 2 条 别着急上色
01:32 第 3 条 字号并非万能
01:50 第 4 条 弱化来凸显重点
02:06 第 5 条 非必要不用标签
02:27 第 6 条 按钮看主次不看含义
02:50 第 7 条 从过度留白开始
03:08 第 8 条 不必填满屏幕
03:29 第 9 条 间距有亲疏
03:49 第 10 条 缩放不总是等比
04:12 第 11 条 行长与行高联动
04:34 第 12 条 基线对齐，不居中
04:53 第 13 条 颜色比想象的多
05:21 第 14 条 无障碍也能好看
05:46 第 15 条 别只靠颜色
06:05 第 16 条 强调色边框
06:26 第 17 条 图上文字先处理背景
06:47 第 18 条 每样东西有适用尺寸
07:11 第 19 条 慎用边框
07:32 第 20 条 别忽视空状态
07:53 回顾：20 条规则 + 两个练习
08:16 全书 50 章，这期只讲了不到一半
几处要说明
· 文中的判断（用户耐心只有三秒、灰色要 8–10 档、每行 45–75 个字符等）是原文作者摘自书里的说法，视频里都挂了“作者说 / 书里说”，不是我的实测；
· 图 10 左边的标题在手机上折成四行（原文文字写“两行”），图 19 右边的行间细线其实还在（变化在卡片外框和输入框描边），台词按图改了；图 14、图 18 左边角标是“？”不是“×”，因为那两张图左边并不算错，只是不够好；
· 全书 50 章，这 20 条对应其中 21 章（第 11 条对应两章），不到一半；想看全书可以去官网，有两章免费样章；
· 官网页面、点赞浏览量都会变，以原页面为准。
资料来源（2026 年 10 月 5 日读的页面）
· 龙海 @longhaiqwe123 的推文（带文章链接）：https://x.com/longhaiqwe123/status/2106216781174251724
· 原文：人人都是 UI 设计师（X 长文）：https://x.com/i/article/2106193433576570880
· 《Refactoring UI》官网（含两章免费样章和完整目录）：https://refactoringui.com/
· 墨问笔记：把一本书做成随叫随到的 Skill：https://note.mowen.cn/detail/4LZPmLxZzVh6ffGRzhlyi
补充说明
· 画面里的推文、官网和笔记页面截图来自 X、refactoringui.com 和墨问，文章封面和对比图来自龙海的文章，均仅作介绍和评论引用，版权归原作者；
· 中英双语字幕；配音：温柔男生声线（AI 生成）；剪辑：Claude Code（Sonnet 5.5）。
