别人的资料 · 分类精讲
这里装的都是别人的东西：十二本书的方法、你下载的官方免费章节、还有二十一篇网友读书笔记。我把它们读了一遍，分门别类整理好，方便你查。
两种查法，按你当下的需要选：
· 想学一套方法 → 往下翻到「按书查」，一本一张卡：它讲什么、最该知道的几条（带原文）、跟我们有什么关系、去哪儿读。
· 想解决一个具体问题 → 翻到「按标签查」：十个标签，每个标签下面是所有讲这件事的书，原文和总结都归在一起。
· 只想看看网友怎么说 → 最后一节，二十一篇笔记的索引，都下了本地文件，直接打开读。
不知道从哪查？照这个找：
- 不知道给谁做、做成什么样 → #目标与人
- 不知道怎么排先后、先做哪一段 → #流程与切片
- 东西太多、用户找不到 → #信息怎么摆
- “这块界面该怎么做” → #界面零件
- 零件越做越乱、谁来改都改散 → #设计体系
- 用户填表填一半跑了 → #表单
- 不知道好不好用 → #可用性测试
- 拿不准某个判断对不对 → #假设与验证
- 觉得产品串不起来 → #对象与数据
- 觉得界面丑 → #视觉打磨
一、官方原文精读（我逐页读过的四份）
这四份是你下载到本地的官方原文——不是网友总结，是出版社/作者自己放出来的正文。我逐页读了，把目录结构和重点摘了出来，原文都附在后面。
About Face 4 · 官方第 1 章 + 全书目录
目标与人出处：免费下载/2-官方样章与画布PDF/AboutFace4-官方第1章.pdf（78,619 字符）+ AboutFace4-官方目录.pdf
这份原文的目录（我按它读的）
- 第一部分 第 1 章 —— 给数字产品的一套设计流程
- 第一部分 第 2 章 —— 理解问题：设计研究
- 第一部分 第 3 章 —— 建模用户：人物模型与目标
- 第一部分 第 4 章 —— 设立愿景：场景与设计需求
- 第一部分 第 5 章 —— 设计产品：框架与提炼
- 第一部分 第 6 章 —— 创造性团队合作
- 第二部分 第 7 章 —— 良好产品行为的基础：设计价值观、原则、模式
- 第二部分 第 8 章起 —— 数字礼仪等（做“有礼貌的产品”）
读出来的重点
它开门见山先问：数字产品为什么会做成“科幻怪物”——技术上先进，但难用、难控制。然后给了四条原因。
原文：「There are four main reasons why this is the case: Misplaced priorities on the part of both product management and development teams; Ignorance about real users of the product and what their baseline needs are for success; Conflicts of interest when development teams are charged with both designing and building the user experience; Lack of a design process」
它有一句话我建议你记住：用户的目标，常常和我们猜的不一样。 它举了个例子，特别准。
原文：「we might think that an accounting clerk's goal is to process invoices efficiently. This is probably not true. Efficient invoice processing is more likely the goal of the clerk's employer. The clerk probably concentrates on goals like appearing competent at his job and keeping himself engaged with his work」
所以它要求把“商业目标”和“用户目标”分开写——这两件事经常被混成一件。
它的做法是六个阶段：研究 → 建模 → 定义需求 → 定义框架 → 提炼 → 支持。第 1 章只讲流程，第 2 到 5 章一章一个阶段。
对我们意味着什么那两个例子直接打到我们身上。我们写的九条目标，其实混了两类：像“买家能发现好项目”“项目方能发出去”是商业目标；而“买家怕买到空气币”才是用户目标。按这本书，得拆成两栏写。另外它那四条失败原因里第二条——“不了解真实用户”，正是我们的状态：我们从来没找用户聊过，也从来没找人试过。
Design Systems · 官方第 2 章：怎么写出设计原则
设计体系出处：免费下载/2-官方样章与画布PDF/DesignSystems-官方第2章.pdf（24,940 字符，整章就是讲这件事）
这份原文的目录（我按它读的）
- Design Principles —— 什么是设计原则
- Qualities Of Effective Design Principles —— 有效的原则有什么共同点
- Defining Your Principles —— 动手写：四个步骤
- START WITH THE PURPOSE —— 第一步：从产品的目的出发
- FIND SHARED THEMES —— 第二步：找团队里的共同主题
- WRITE FOR PEOPLE, NOT BRAND MANUALS —— 第三步：写给同事看，不是写品牌手册
- TEST AND EVOLVE YOUR PRINCIPLES —— 第四步：放进日常评审里不断修正
- From Principles To Patterns —— 从原则走向模式
读出来的重点
它先否定了一类原则：“简单、有用、愉悦”这种话到处都是，等于没说。
原文：「I'm sure you're familiar with these principles: “Simple. Useful. Enjoyable.” … I've yet to see a consumer digital product which has “Complex,” “Useless,” and “Painful to work with” among its principles.」
第一步：原则必须服务于产品的大目的。它举了 TED 网站的例子：TED 的目的是一句话——“把演讲传播得越远越广越好”。所以他们的原则里有“永恒感”，意思是宁可要性能和可访问性，也不要炫技。
原文：「The main purpose of TED's website can be captured in one sentence: “Spread the talks as far and as wide as possible.” … It means prioritizing performance and accessibility over flashy features, clarity of message over bold experimental design.」
第二步：让团队几个人各自独立地写——“对你来说，我们这个产品的好设计是什么意思？用五句话跟新同事说清楚”，而且每条都要配一个产品里的真实例子。然后把大家的答案放一起比，看有没有共同主题。
原文：「ask a few team members … to write them down individually … Ask them to find a practical example in your product's interface and include it alongside each principle. Comparing your team's answers can reveal how much unity you have in your design approach.」
第三步：写给自己和同事看，不是写给品牌手册看。这是出现“空泛原则”的最常见原因——不知道读者是谁。
原文：「A surefire way to end up with vague design principles is to have no idea who they're for. … Try writing your principles for yourself and for your colleagues, first and foremost.」
第四步：原则会随产品变化，所以要不断测试和修正。它的具体做法是：把原则放进设计评审里，每次评审都拿它对照，看它到底有没有帮上忙。
原文：「they need to be constantly tested, evaluated and refined … By making your principles part of design critiques, for example, you can continuously test if they help in your design process」
对我们意味着什么我们正好缺这个东西：有 tokens（颜色、字号、间距），但没有一句“为什么”。而且这份样章把方法给全了，可以直接照着做。我用它的四步，给我们写了一份草案，放在同目录的《用别人的方法补我们的窟窿》里。
出处：免费下载/2-官方样章与画布PDF/LeanUX-官方画布.pdf
这份原文的目录（我按它读的）
- ① Business Problem —— 业务上遇到什么问题
- ② Solution ideas —— 有哪些产品/功能的想法能帮用户拿到他想要的好处
- ③ Business Outcomes —— 业务结果：客户行为会发生什么变化（用行为变化来判断问题是否真被解决）
- ④ Users & Customers —— 先关注哪类用户和客户
- ⑤ User Benefits —— 用户想达成什么目标、什么在驱动他
- ⑥ Hypotheses —— 假设：把 2–5 的猜测合成一句话
- ⑦ What's the most important thing we need to learn first? —— 每个假设里最risky的那条——错了整个想法就完了
- ⑧ What's the least amount of work to learn it? —— 为验证它，最少要做多少活
读出来的重点
整张画布只有八个格子，一页纸。它逼你把“我们打算做什么”写成“我们猜什么、怎么验证”。
最重要的一句是它的假设句式，填空就行：
原文：「We believe that [business outcome] will be achieved if [user] attains [benefit] with [feature].」
第⑦格是精华：每个假设里挑出最危险的那一条——就是“如果它是错的，整个想法就完蛋”的那条。先验证它，别的都往后放。
原文：「For each hypothesis, identify the riskiest assumption. This is the assumption that will cause the entire idea to fail if it's wrong.」
第⑧格更狠：验证它最少要做多少活。这一格是防止你一上来就做大版本。
原文：「What's the least amount of work we need to do to learn the next most important thing?」
对我们意味着什么我之前给你列的两条猜测（用户看不看得懂 zkTLS、愿不愿意等两三天），按这张画布应该改写成假设句，并补上第⑦⑧格。我已经拿它把我们的产品填了一遍，放在同目录的《用别人的方法补我们的窟窿》里。
The Elements of User Experience · 官方五层模型图
流程与切片出处：免费下载/2-官方样章与画布PDF/用户体验要素-五层模型图-官方.pdf（Jesse James Garrett, 2000）
这份原文的目录（我按它读的）
- 战略层 —— Site Objectives（商业方的目标）+ User Needs（用户的目标）
- 范围层 —— Functional Specifications（功能规格）+ Content Requirements（内容需求）
- 结构层 —— Interaction Design（交互设计）+ Information Architecture（信息架构）
- 框架层 —— Interface Design（界面设计）+ Navigation Design（导航设计）+ Information Design（信息设计）
- 表现层 —— Visual Design（视觉设计：文字、图形元素、导航组件的外观处理）
读出来的重点
这张 2000 年的图有一个别人常忽略的点：它说网页有两副面孔——既是“软件界面”，又是“超文本信息空间”。两副面孔在同一层上的侧重点不一样。
原文：「The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface.」
纵向还有两条轴：一条从抽象（Abstract）到具体（Concrete），一条从概念（Conception）到完成（Completion）。越往下越抽象、越往上越具体。
每层都有它自己的产出物，而且下面一层决定了上面一层——这就是为什么它说“上一层没定论之前不要急着往下做”。
它自己也声明这张图不是开发流程、也不定义团队角色，它只是把“要考虑哪些事”摊开——所以它适合当检查表，不适合当时间表。
原文：「this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations」
对我们意味着什么我拿它给我们做了体检：五个格子里，战略层缺人物画像、范围层没分必须有与有了更好、结构层没做信息架构（命名和手机导航未定）、框架层五十三块里三十四块只有简版、表现层没做视觉打磨也没写设计原则。 表在《怎么把这个产品做出来》第十节；把这些方法用在我们身上的结果，在《用别人的方法补我们的窟窿》。
Atomic Design · 官方全书（前言 + 5 章，你下载了完整版）
设计体系出处：免费下载/1-AtomicDesign免费全书/（foreword + chapter-1~5，HTML 和纯文本两种格式）
这份原文的目录（我按它读的）
- 前言 —— 两位设计师写为什么要有这本书
- 第 1 章 设计系统，不是设计页面 —— Create design systems, not pages；为什么“页面”这个隐喻已经过时
- 第 2 章 原子设计方法 —— 五个层级：原子 → 分子 → 有机体 → 模板 → 页面，每级都给了定义
- 第 3 章 工具 —— Pattern Lab，以及一份好的样式指南该有什么品质
- 第 4 章 原子工作流 —— 最实用的一章：怎么在团队里真的推行起来，含“界面盘点”三步法
- 第 5 章 维护设计系统 —— 怎么让它活得久：做个东西 → 证明它有用 → 正式化
读出来的重点
五个层级的原文定义，我一条条抄下来（后面要用）：
原子：最基本的组成块，不能再拆，拆了就失去意义。
原文：「Atoms are the basic building blocks of all matter. … they can't be broken down further without losing their meaning.」
有机体：由分子、原子或其它有机体组成的较复杂组件，它们构成界面上一个个独立的区块。
原文：「Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.」
模板：页面级的对象，把组件放进布局里，表达底层的内容结构。
原文：「Templates are page-level objects that place components into a layout and articulate the design's underlying content structure.」
页面：模板的具体实例，放进了真实的代表性内容。这一句解释了我们那个演示站是什么。
原文：「Pages are specific instances of templates that show what a UI looks like with real representative content in place.」
第 4 章那句“Show, don't tell”很实在：光靠嘴说推不动人，得让他们亲身体会界面有多不一致。
原文：「Sometimes you need more. Sometimes you need to make them feel the pain.」
它把“界面盘点”和“内容盘点”类比：内容盘点是清点站内所有内容，界面盘点是清点组成界面的所有零件。
原文：「An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you're taking stock of and categorizing all the components that make up your user interface.」
对我们意味着什么第 4 章的“界面盘点三步法”是现成能用的，而且我们正好没做：
第一步“把人凑齐”——它要求把所有角色拉进一个房间（UX、视觉、前后端、文案、项目经理、老板、QA），因为最重要的产出是建立大家共同的词汇。第二步“准备截图”——所有人用同一个工具。第三步“截图并分类”——按全局元素、导航、图片、图标、表单、按钮、标题这些类别，把现有界面上每一种样式截下来，然后合并、命名。
我们做过元素登记（501 条），但那是为了查定义，不是为了让团队看到“同一个按钮我们做了五种样子”。而且我们第一步就没做——从来没有人一起坐下来看过。
另外第 2 章那句“页面是模板的具体实例”我反复看了两遍：我们现在那个演示站，装的全是假数据，所以它只是模板，不是页面。这解释了为什么你看完演示站仍然不知道“做完了没有”。
二、按书查（十二本，含网友笔记）
交互设计精髓 · Alan Cooper 等
一句话先搞清楚“谁、想达成什么目标”，再去画界面。别一上来就纠结按钮长什么样。
最该知道的几条
设计的目标取决于情境——用户是谁、在做什么、目标是什么。同一个功能，换个目标就换个做法。
原文：「设计的目标依赖于具体的情境——用户是谁、在做什么、目标是什么」
交互设计其实是“行为设计”：你设计的是用户会做出什么动作，不是画面上的颜色。
原文：「交互设计是对行为进行设计」
产品要同时满足三件事：技术上做得到、商业上划得来、用户真的想要。缺一件都撑不久。
原文：「功用性、可行性、称许性——技术可能性、商业可行性、用户期望性」
它给了一整套六个阶段的做法：研究 → 建模 → 定义需求 → 定义框架 → 提炼 → 支持。
原文：「目标导向设计大致分为六个阶段：研究、建模、定义需求、定义框架、提炼和支持」
最后它列了一张十三条的问题清单，可以当产品体检表（用户是谁？他想达成什么？如何帮助生手？如何给老手深度？…）。
原文：「这13个问题是目标导向设计所解决的问题，但是这些问题是所有产品面临的核心问题」
跟我们有什么关系我们做了“九个目标”，对应它的战略层。但我们只有四种“角色”，没有“人物画像”。About Face 要求把角色写成具体的人——这决定了我们界面上到底要不要写解释性文案。它那张十三条清单我建议直接拿来当项目页的体检表。
去哪儿读
- 官方第 1 章 PDF（已下载：免费下载/2-官方样章与画布PDF/AboutFace4-官方第1章.pdf）
- 官方目录 PDF（同目录）
- 中文版《About Face 4（纪念版）》微信读书有正版
- 网友笔记：知乎《一文读懂目标导向设计》（本地：4-网友读书笔记21篇/AboutFace4-一文读懂目标导向设计-知乎.md）
Designing Interfaces 3e
界面零件界面设计模式 · Jenifer Tidwell
一句话界面上的问题是反复出现的，别人已经把做法总结好了——遇到具体问题，按图索骥，别自己发明。
最该知道的几条
书分三大部分：用户的行为模式 → 框架层设计（组织内容、放导航、页面布局）→ 其他模式（移动端、搜索、视觉风格）。
原文：「全书分为三大部分：用户研究、框架层的设计、其他设计模式」
开篇先讲“用户出于什么目的、会做出什么行为”，再从行为反推页面该提供什么。比如“快速浏览”对应信息流和卡片流：标题和缩略图必须够抓人。
原文：「快速浏览（快速划过，寻找感兴趣的内容）：信息流、卡片流，标题和缩略图要足够有吸引力」
组织内容有几种基本方式：按类别、按任务、按字母/时间/地理，或者混合。选哪种取决于用户是“找东西”还是“办事”。
原文：「按任务组织（用户要完成什么事）」
它的定位是一本字典，不是一本要读完的书——所以它最适合我们这种“几十块界面要一块块定”的场景。
原文：「这本书作为一本“字典式”工具书的价值——遇到具体的界面问题时按图索骥」
跟我们有什么关系我们五十三块界面里，很多其实是“标准问题”：长列表怎么翻页、空状态怎么写、多步骤向导怎么显示进度、搜索没结果怎么办。这些这本书都有现成答案，我们不用自己拍脑袋。它就是查的时候用的那本。
去哪儿读
- O'Reilly 订阅（很多图书馆用借书证可免费用，查 WorldCat）
- 中文版《界面设计模式（第 3 版）》
- 免费替代：GOV.UK 设计模式库、NN/g 文章库
- 网友笔记：知乎《界面设计模式》读书笔记（本地：4-网友读书笔记21篇/界面设计模式-读书笔记-知乎.md）
Don't Make Me Think
可用性测试信息怎么摆点石成金 · Steve Krug
一句话用户不读，只扫；不做最佳选择，能凑合就凑合。所以界面必须一眼就懂。
最该知道的几条
全书的地基是三个观察：人是在扫描、不是阅读；人做的是“满意”的选择，不是最优的；人是勉强应付，不是追根究底。
原文：「人们不是阅读，而是扫描。人们不做最佳选择，而是满意即可。人们不是追根究底，而是勉强应付」
导航有五个用途：让人找到东西、让人知道自己在哪、把结构画出来、告诉人怎么用、给人信心。
原文：「帮用户找到想要的任何东西 / 标识用户所处位置 / 让层次结构可视化 / 作为指示说明」
有一条“去掉一半文字”的规矩：每个页面的文字砍掉一半，剩下的再砍一半，你会发现更好用。
原文：「减少视觉噪声，所有东西都突出等于什么也没突出」
可用性测试的做法：找几个人来用，你在旁边看，记下他们在哪卡住。3–5 个人就够，早做、常做。
原文：「如果你想知道某个东西是否容易使用，那么在一些人试图使用的时候观察他们，记下他们在哪里遇到问题」
它还专门警告：不要用焦点小组代替可用性测试。焦点小组人会客气、会猜；测试是看他做不出来。
原文：「有些人员会混淆焦点小组和可用性测试，并妄图用焦点小组来代替可用性测试」
跟我们有什么关系我们最大的缺口就在这：五次线稿评审、四轮文档审计，全是我们自己看自己，从来没找人试过。另外它说“去字”，我们正好相反——为满足参考稿的意见，我在连接状态每行都加了一句“这个数据源供什么指标”，用户八成不会读。
去哪儿读
- 中文版《点石成金（原书第 3 版）》微信读书有正版
- Peachpit 官方页（英文版）
- 免费的 NN/g《可用性测试 101》（已下载：免费下载/3-作者官方免费文章/NNg-可用性测试101.html）
- 网友笔记：知乎《Don't Make Me Think 读书笔记》（本地：4-网友读书笔记21篇/点石成金-读书笔记-知乎.md）
把界面做好看 · Adam Wathan & Steve Schoger
一句话不用天生的审美，用规则也能把界面做干净：层级、间距、颜色、少用边框。
最该知道的几条
“应删除而不是添加空白”——先给太多空间，再一点点删到你满意；而不是一点点往上加。
原文：「更好的方法是首先给一些东西太多的空间，然后将其删除，直到你对结果感到满意为止」
给元素呼吸的空间，是让设计变清楚最简单的办法。
原文：「使设计变清晰的最简单方法之一就是给每个元素多一点呼吸的空间」
“标签是最后的手段”：一个东西要靠贴标签才看得懂，说明它的位置和分组没做好。
原文：「标签是最后的手段 Labels are a last resort」
颜色比你想象的多：光有五个主色不够，还需要一整套灰阶，因为界面里绝大部分东西（文字、背景、面板、输入框）都是灰的。
原文：「只有五个十六进制代码是无法构建任何东西的。要建造真正的东西，你需要一套更全面的颜色供你选择」
字体同理：字重多的字体通常做得更细，选字体时可以按“样式数量”来筛。
原文：「拥有很多不同字重的字体往往比那些只有较少字重的字体制作得更加细致和用心」
跟我们有什么关系你说徽章“丑”，对着这本书看我明白了：徽章本身问题不大，问题是它周围的界面没有层级——到处是边框和浅色分割线、间距都一样，所以再好的徽章也显不出来。这本书的两章官方免费，看完能立刻改。
去哪儿读
- 官方免费 2 章（refactoringui.com 留邮箱领取）
- 官方 Medium 文章合集 + 作者 YouTube（需代理）
- 网友笔记：Nolebase《Refactoring UI 读书笔记》（本地：4-网友读书笔记21篇/RefactoringUI-读书笔记-Nolebase.txt）
原子设计 · Brad Frost
一句话界面不是一个页面一个页面做的，是用“零件”拼的，零件分五级。
最该知道的几条
五级零件：原子（按钮、输入框）、分子（几个原子凑成一小撮）、有机体（一块完整功能区）、模板（骨架，还没有真内容）、页面（模板 + 真实内容）。
原文：「原子，分子，有机体，模板，界面。这5个阶段并不是一个线性的过程，而是一种心智模型」
“页面 = 模板 + 真实内容”这一句最有用：模板做得再漂亮，也不等于页面做完了。
原文：「静态的设计稿无法展示响应式设计以及交互，不能完全反映其在浏览器中的最终效果」
它解释了为什么“按页面想”会出问题：页面是平面设计时代的叫法，那套方法在一开始有用，后来就落伍了。
原文：「造成这些问题的根本原因是“界面隐喻”。我们通常说“网页”，其实就是将它看做是一个页面」
重设计旧项目时，先做一次“界面清单”工作坊：全员把现有样式截图、分类、讨论保留哪些、删掉哪些、合并哪些，最后给每个样式命名。
原文：「组织一次工作坊，团队中所有角色都尽量参加，来体验UI的不一致……最后，讨论如何对每个样式进行命名」
跟我们有什么关系我们现在那个演示站，严格说只是“模板”，因为全是假数据。这句话能解释你之前那个疑问：“看了演示站为什么还是不知道做完没有”——你看的是模板，不是页面。另外我们做过元素登记，但没做过“界面清单”那种把样式摊开看的工作坊。
去哪儿读
- ★ 官方全书免费在线读：atomicdesign.bradfrost.com（本地已下全 5 章 + 前言：免费下载/1-AtomicDesign免费全书/）
- 网友笔记：站酷《关于原子设计你想要的都在这里》（本地）、人人都是产品经理《原子设计理念五级拆解》（本地）
- 社区中文翻译项目：知乎《原子设计全书翻译简介》（本地）
设计体系 · Alla Kholmatova
一句话光有组件库不够，还得说清“为什么这么设计”，否则下一个人会按自己的理解改散。
最该知道的几条
设计体系包含五样东西：设计目的、设计原则、组件库、样式指南，以及设计开发协作的流程。
原文：「设计体系则包含以下内容：设计目的、设计原则、组件库、样式指南，以及设计与开发的工作流程的实用工具」
它点出的关键缺口：组件库和设计语言说了“是什么、怎么做”，但没说“为什么”。
原文：「组件库和设计语言定义了产品该是怎样的（what&how），却没有说明为什么是这样构建和定义的(why)」
建立体系的实际步骤：规划任务 → 编写界面清单 → 建立模式库 → 创建、记录、发展、维护设计模式。
原文：「规划任务，编写界面清单，建立模式库，以及创建、记录、发展和维护设计模式等」
体系不是一夜建成的，是日常实践里慢慢长出来的——所以关键是让它能在团队里运行起来。
原文：「设计体系不是一夜之间就构建出来的，而是通过日常的实践逐渐形成的」
跟我们有什么关系我们的 tokens 文档写了颜色、字号、间距、组件规格——那正是它说的“是什么样”。我们缺的是写在最前面的“设计原则”：为什么选暗色、为什么只用五条渐变、为什么发光只给一个按钮。没有这几句，以后谁来改都会按自己的喜好改。
去哪儿读
- 官方第 2 章免费 PDF（已下载：免费下载/2-官方样章与画布PDF/DesignSystems-官方第2章.pdf）
- Smashing 官方商店有整本
- 网友笔记：优设《设计体系》读书笔记（本地：4-网友读书笔记21篇/DesignSystems设计体系-读书笔记-优设.txt）
精益 UX · Jeff Gothelf & Josh Seiden
一句话产品是一堆“待验证的假设”，不是一堆功能。做出来之前先想清楚怎么验证。
最该知道的几条
整本书的立场：产品由一组有待验证的假设组成。做用户访谈和调研，是为了拟定假设，再用各种方式验证它。
原文：「精益用户体验设计认为产品是由一组有待验证的假设所组成的」
它教你把功能分成“必须有的”和“有了更好的”——这样要砍的时候才有依据。
原文：「区分必须的功能和有则更好的功能」
方法是小步快跑：设计简单产品 → A/B 测试 → 周期性迭代改进，配合持续部署和最小化可行产品。
原文：「你应该了解如何设计简单产品，A/B测试，然后周期迭代改进」
官方那张画布（免费）是它的骨架：把假设、用户、目标、风险都写在一页上。
原文：「Lean UX 画布（官方免费 PDF）」
跟我们有什么关系我之前给你列了两条猜测（用户看不看得懂 zkTLS、愿不愿意为验证多等两三天）。按这本书的要求，猜测必须配一句“怎么验证”：谁、什么时候、什么办法、看到什么算通过。我们只有前半句。另外四十七条需求是平铺的，没分“必须有 / 有了更好”，所以真要砍时只能拍脑袋。
去哪儿读
- 官方画布免费 PDF（已下载：免费下载/2-官方样章与画布PDF/LeanUX-官方画布.pdf）
- 作者站 leanuxbook.com（第 3 版购买入口）
- 作者博客 jeffgothelf.com 有大量免费方法文章
- 网友笔记：个人博客《精益创业UX篇》全书笔记（本地：4-网友读书笔记21篇/精益UX-全书笔记-中文版第1版.txt）
用户故事地图 · Jeff Patton
一句话把功能排成一张地图，横着切一刀，那一刀就是你的第一个版本。
最该知道的几条
卡片要用动词短语，不用名词——因为写的是“用户做了什么”，不是“系统里有个什么东西”。
原文：「一边讲用户故事 一边贴要点卡片（使用动词短语 嵌套分层排布）」
排法是两条轴：从左到右讲一个完整的故事（故事流），从上到下拆细节（细节层）。
原文：「从左到右讲述故事（故事流） 由上至下拆分细节（细节层）」
顺序是“先整体、后细节，先大故事、后小故事”，目的是让大家对整体有共识，而不是一开始就陷进某个功能。
原文：「先整体 后细节 先大故事 后小故事」
它能解决的问题：让所有人对“我们到底在建什么”有同一张图，避免设计在开发过程中走样。
原文：「讲它如何防止设计在开发中走样」
跟我们有什么关系我们的四十七条需求现在是按模块排的（R-01 基本对应 M1、C1、C2 这个顺序）。按这个顺序开发，会出现“前面十几个模块做完了，产品还是不能发币也不能买”。应该改成横着排：第一行是用户走的路，每一列下面再挂细节。这样“先做哪一段”一眼就能看出来。
去哪儿读
- 作者官方原文（已下载：免费下载/3-作者官方免费文章/UserStoryMapping-作者原文-故事地图.md）
- 作者官网的速查表 jpattonassociates.com
- 中文版《用户故事地图》
- 网友笔记：豆瓣《用户故事地图读书笔记》（本地：4-网友读书笔记21篇/用户故事地图-读书笔记-豆瓣.txt）
Object-Oriented UX（OOUX / ORCA）
对象与数据面向对象的体验设计 · Sophia V. Prater
一句话按“东西”设计界面，而不是按页面。
最该知道的几条
ORCA 是四个词：Objects（对象）、Relationships（对象之间的关系）、Calls-to-action（能对它做什么动作）、Attributes（它有哪些属性）。
原文：「对象的集合、对象上的动作以及对象之间的关系」
它的价值是让界面能随业务长大而不散——因为你维护的是“东西”，不是一堆页面。
原文：「这种思路帮助我建立了更连贯的用户体验，可以随着业务需求的增长而增长」
它反对“一事一议”的做法：如果每次都单独处理一个需求，你就在不停地补丁，最后没人说得清全貌。
原文：「逐例处理的方法将迫使你不断整合需求」
跟我们有什么关系我们做的“十样东西”就是它的前两个字母。动作也做了（四十七条需求）。但“关系”我们没画：里程碑属于哪个项目、放款批次属于哪个里程碑、押金挂在项目上还是发售上。关系没画，就会出现“删一个东西不知道会影响什么”的问题——我们押金归属模糊就是这个原因。
去哪儿读
- 官方方法说明 ooux.com（已下载：免费下载/3-作者官方免费文章/OOUX-官方方法说明.html）
- 注意：没核实到正式出版的书
- 网友笔记：人人都是产品经理《OOUX：一个面向对象的体验设计思维》（本地）
The Elements of User Experience
流程与切片目标与人用户体验要素 · Jesse James Garrett
一句话做产品分五层，从下往上；下面那层没定，别急着做上面那层。
最该知道的几条
五层：战略层（产品目标 + 用户需求）→ 范围层（功能与内容）→ 结构层（交互设计 + 信息架构）→ 框架层（界面、导航、信息设计）→ 表现层（视觉）。
原文：「1. 战略层 2. 范围层 3. 结构层 4. 框架层 5. 表现层」
核心规矩：上一层没定论之前，不要急着往下做。
原文：「每一个层面都是根据它下面的那个层面来决定的。上一层没有定论之前，不要急着往下做」
每一层都该有产出物：战略层是文档、范围层是需求清单、结构层是流程图/架构图、框架层是线框图、表现层是视觉稿。
原文：「每一层的工作都要有产出物」
它点出大多数产品失败的真实原因：在错误的层面争论问题——还没定战略，就开始争按钮颜色。
原文：「大多数产品失败的原因，就是在错误的层面争论问题」
战略层里专门有一项叫“创建人物角色”，也就是把用户写成具体的人。
原文：「创建人物角色（persona）」
跟我们有什么关系这是一张现成的体检表，我拿它把我们现有的东西对了一遍：战略层有目标、没人物画像；范围层有需求、没分必须与可选；结构层有流程图、没做信息架构（命名和手机导航都没定）；框架层有五版线稿、五十三块里三十四块只有简版；表现层有 token、没做视觉打磨也没写设计原则。五个格子里三个是空的。
去哪儿读
- 官方五层模型图 PDF（已下载：免费下载/2-官方样章与画布PDF/用户体验要素-五层模型图-官方.pdf）
- 中文版《用户体验要素》第 2 版
- 网友笔记：知乎笔记（本地）、人人都是产品经理笔记（本地）、优设《五要素保姆级教程》（本地）
网页表单设计 · Luke Wroblewski
一句话表单是用户“必须做完才能继续”的地方，每个细节都影响他做不做得完。
最该知道的几条
标签位置有实测数据：放顶部，视线从标签移到输入框只要 50 毫秒；放右边 240 毫秒；放左边 500 毫秒——差了十倍。
原文：「标签如果采用顶对齐方式，用户的视线从标签移动到输入框只需要50毫秒，右对齐方式需要240毫秒，左对齐方式需要500毫秒」
标签对齐怎么选要看场景：想省垂直空间用右对齐；用户对内容不熟、需要慢慢理解时用左对齐。
原文：「在涉及到专业性过强，用户不熟悉的表单，需要更长时间理解的标签项时，则可以考虑左对齐方式」
必填项的标法：必填多就只标“选填”，选填多就只标“必填”——标少的那一边，效率最高。
原文：「如果必填字段比较多，把选填项标记出来则足够；如果选填字段比较多，则标记必填字段」
校验要在用户填的时候做，不要等他点提交再让服务器判断——省的是用户的思考时间和返工。
原文：「而不是让用户填写完再点击「提交」按钮交给服务器去做一次判断」
错误消息要说明“怎么改”，而不只是说“错了”。
原文：「表单中的错误提示信息…也是表单设计中影响比较大的元素」
跟我们有什么关系发币向导是七步、几十个输入框的巨型表单，是用户投入最多的地方。上面这几条可以一条条对着改。第⑦步那个“押金显示的是预估还是锁定”的问题，书里也正好有对应的讲法。
去哪儿读
- 作者资源页（已下载：免费下载/3-作者官方免费文章/WebFormDesign-作者资源页.html）
- 中文版《Web 表单设计：点石成金的艺术》
- 网友笔记：优设《打造优质 Web 表单的 9 个方法》（本地：4-网友读书笔记21篇/Web表单设计-优质表单9个方法-优设.txt）
- 搭档书：Forms that Work（Jarrett & Gaffney）
三、按标签查
同一个标签下面，是几本讲同一件事的书。原文摘录和总结都归在一起，方便你对着看。
#目标与人先想清楚给谁做、他想要什么，再动手画。
About Face 4
先搞清楚“谁、想达成什么目标”，再去画界面。别一上来就纠结按钮长什么样。
设计的目标取决于情境——用户是谁、在做什么、目标是什么。同一个功能，换个目标就换个做法。
我们做了“九个目标”，对应它的战略层。但我们只有四种“角色”，没有“人物画像”。About Face 要求把角色写成具体的人——这决定了我们界面上到底要不要写解释性文案。它那张十三条清单我建议直接拿来当项目页的体检表。…
The Elements of User Experience
做产品分五层，从下往上；下面那层没定，别急着做上面那层。
五层：战略层（产品目标 + 用户需求）→ 范围层（功能与内容）→ 结构层（交互设计 + 信息架构）→ 框架层（界面、导航、信息设计）→ 表现层（视觉）。
这是一张现成的体检表，我拿它把我们现有的东西对了一遍：战略层有目标、没人物画像；范围层有需求、没分必须与可选；结构层有流程图、没做信息架构（命名和手机导航都没定）；框架层有五版线稿、五十三块里三十四块只有简版；表现层有 token、没做视觉打磨也没写设计原则。五个格子里三个是空的。…
#流程与切片把人走的路排出来，再决定先做哪一段。
Lean UX
产品是一堆“待验证的假设”，不是一堆功能。做出来之前先想清楚怎么验证。
整本书的立场：产品由一组有待验证的假设组成。做用户访谈和调研，是为了拟定假设，再用各种方式验证它。
我之前给你列了两条猜测（用户看不看得懂 zkTLS、愿不愿意为验证多等两三天）。按这本书的要求，猜测必须配一句“怎么验证”：谁、什么时候、什么办法、看到什么算通过。我们只有前半句。另外四十七条需求是平铺的，没分“必须有 / 有了更好”，所以真要砍时只能拍脑袋。…
User Story Mapping
把功能排成一张地图，横着切一刀，那一刀就是你的第一个版本。
卡片要用动词短语，不用名词——因为写的是“用户做了什么”，不是“系统里有个什么东西”。
我们的四十七条需求现在是按模块排的（R-01 基本对应 M1、C1、C2 这个顺序）。按这个顺序开发，会出现“前面十几个模块做完了，产品还是不能发币也不能买”。应该改成横着排：第一行是用户走的路，每一列下面再挂细节。这样“先做哪一段”一眼就能看出来。…
The Elements of User Experience
做产品分五层，从下往上；下面那层没定，别急着做上面那层。
五层：战略层（产品目标 + 用户需求）→ 范围层（功能与内容）→ 结构层（交互设计 + 信息架构）→ 框架层（界面、导航、信息设计）→ 表现层（视觉）。
这是一张现成的体检表，我拿它把我们现有的东西对了一遍：战略层有目标、没人物画像；范围层有需求、没分必须与可选；结构层有流程图、没做信息架构（命名和手机导航都没定）；框架层有五版线稿、五十三块里三十四块只有简版；表现层有 token、没做视觉打磨也没写设计原则。五个格子里三个是空的。…
#信息怎么摆东西多了以后，怎么分类、怎么命名、怎么导航、怎么搜。
Information Architecture 4e
东西多了以后，用户能不能找到，取决于四件事：怎么分类、怎么命名、导航怎么做、搜索怎么做。
信息架构拆成四套系统：组织系统、标签系统、导航系统、搜索系统。四套要一起想，不能只做导航。
两处明显没想过。一是命名：我们界面上的词（持仓、连接状态、里程碑放款）是不是用户自己的话，没人验证过。二是手机：我们那个“左侧锚点导航”在手机上怎么变，线稿只写了一句“窄屏收起为顶部下拉”，这背后其实是一个没做的决定。…
Don't Make Me Think
用户不读，只扫；不做最佳选择，能凑合就凑合。所以界面必须一眼就懂。
全书的地基是三个观察：人是在扫描、不是阅读；人做的是“满意”的选择，不是最优的；人是勉强应付，不是追根究底。
我们最大的缺口就在这：五次线稿评审、四轮文档审计，全是我们自己看自己，从来没找人试过。另外它说“去字”，我们正好相反——为满足参考稿的意见，我在连接状态每行都加了一句“这个数据源供什么指标”，用户八成不会读。…
#界面零件界面上的问题反复出现，别人有现成做法。
Designing Interfaces 3e
界面上的问题是反复出现的，别人已经把做法总结好了——遇到具体问题，按图索骥，别自己发明。
书分三大部分：用户的行为模式 → 框架层设计（组织内容、放导航、页面布局）→ 其他模式（移动端、搜索、视觉风格）。
我们五十三块界面里，很多其实是“标准问题”：长列表怎么翻页、空状态怎么写、多步骤向导怎么显示进度、搜索没结果怎么办。这些这本书都有现成答案，我们不用自己拍脑袋。它就是查的时候用的那本。…
Atomic Design
界面不是一个页面一个页面做的，是用“零件”拼的，零件分五级。
五级零件：原子（按钮、输入框）、分子（几个原子凑成一小撮）、有机体（一块完整功能区）、模板（骨架，还没有真内容）、页面（模板 + 真实内容）。
我们现在那个演示站，严格说只是“模板”，因为全是假数据。这句话能解释你之前那个疑问：“看了演示站为什么还是不知道做完没有”——你看的是模板，不是页面。另外我们做过元素登记，但没做过“界面清单”那种把样式摊开看的工作坊。…
#设计体系把零件和规则写下来，让谁来改都不会散。
Atomic Design
界面不是一个页面一个页面做的，是用“零件”拼的，零件分五级。
五级零件：原子（按钮、输入框）、分子（几个原子凑成一小撮）、有机体（一块完整功能区）、模板（骨架，还没有真内容）、页面（模板 + 真实内容）。
我们现在那个演示站，严格说只是“模板”，因为全是假数据。这句话能解释你之前那个疑问：“看了演示站为什么还是不知道做完没有”——你看的是模板，不是页面。另外我们做过元素登记，但没做过“界面清单”那种把样式摊开看的工作坊。…
Design Systems
光有组件库不够，还得说清“为什么这么设计”，否则下一个人会按自己的理解改散。
设计体系包含五样东西：设计目的、设计原则、组件库、样式指南，以及设计开发协作的流程。
我们的 tokens 文档写了颜色、字号、间距、组件规格——那正是它说的“是什么样”。我们缺的是写在最前面的“设计原则”：为什么选暗色、为什么只用五条渐变、为什么发光只给一个按钮。没有这几句，以后谁来改都会按自己的喜好改。…
#表单用户必须填完才能继续的地方，细节决定完成率。
Web Form Design
表单是用户“必须做完才能继续”的地方，每个细节都影响他做不做得完。
标签位置有实测数据：放顶部，视线从标签移到输入框只要 50 毫秒；放右边 240 毫秒；放左边 500 毫秒——差了十倍。
发币向导是七步、几十个输入框的巨型表单，是用户投入最多的地方。上面这几条可以一条条对着改。第⑦步那个“押金显示的是预估还是锁定”的问题，书里也正好有对应的讲法。…
#可用性测试找人来用，你在旁边看——这是唯一能验证“能不能用”的办法。
Don't Make Me Think
用户不读，只扫；不做最佳选择，能凑合就凑合。所以界面必须一眼就懂。
全书的地基是三个观察：人是在扫描、不是阅读；人做的是“满意”的选择，不是最优的；人是勉强应付，不是追根究底。
我们最大的缺口就在这：五次线稿评审、四轮文档审计，全是我们自己看自己，从来没找人试过。另外它说“去字”，我们正好相反——为满足参考稿的意见，我在连接状态每行都加了一句“这个数据源供什么指标”，用户八成不会读。…
#假设与验证产品是一堆待验证的假设，不是一堆功能。
Lean UX
产品是一堆“待验证的假设”，不是一堆功能。做出来之前先想清楚怎么验证。
整本书的立场：产品由一组有待验证的假设组成。做用户访谈和调研，是为了拟定假设，再用各种方式验证它。
我之前给你列了两条猜测（用户看不看得懂 zkTLS、愿不愿意为验证多等两三天）。按这本书的要求，猜测必须配一句“怎么验证”：谁、什么时候、什么办法、看到什么算通过。我们只有前半句。另外四十七条需求是平铺的，没分“必须有 / 有了更好”，所以真要砍时只能拍脑袋。…
#对象与数据按“东西”设计，不按页面设计。
Information Architecture 4e
东西多了以后，用户能不能找到，取决于四件事：怎么分类、怎么命名、导航怎么做、搜索怎么做。
信息架构拆成四套系统：组织系统、标签系统、导航系统、搜索系统。四套要一起想，不能只做导航。
两处明显没想过。一是命名：我们界面上的词（持仓、连接状态、里程碑放款）是不是用户自己的话，没人验证过。二是手机：我们那个“左侧锚点导航”在手机上怎么变，线稿只写了一句“窄屏收起为顶部下拉”，这背后其实是一个没做的决定。…
Object-Oriented UX（OOUX / ORCA）
按“东西”设计界面，而不是按页面。
ORCA 是四个词：Objects（对象）、Relationships（对象之间的关系）、Calls-to-action（能对它做什么动作）、Attributes（它有哪些属性）。
我们做的“十样东西”就是它的前两个字母。动作也做了（四十七条需求）。但“关系”我们没画：里程碑属于哪个项目、放款批次属于哪个里程碑、押金挂在项目上还是发售上。关系没画，就会出现“删一个东西不知道会影响什么”的问题——我们押金归属模糊就是这个原因。…
#视觉打磨不靠天赋，靠规则也能把界面做干净。
Refactoring UI
不用天生的审美，用规则也能把界面做干净：层级、间距、颜色、少用边框。
“应删除而不是添加空白”——先给太多空间，再一点点删到你满意；而不是一点点往上加。
你说徽章“丑”，对着这本书看我明白了：徽章本身问题不大，问题是它周围的界面没有层级——到处是边框和浅色分割线、间距都一样，所以再好的徽章也显不出来。这本书的两章官方免费，看完能立刻改。…
四、二十一篇网友笔记索引
这些都是网友读同一本书写的笔记，我已经下载成本地文件（在 免费下载/4-网友读书笔记21篇/），直接打开就能读，不用上网。看别人怎么理解，有时候比看原书快。
| 笔记 | 对应哪本书 | 这篇讲了什么 | 本地文件 |
|---|
| AboutFace4-一文读懂目标导向设计-知乎.md | About Face 4 | 把全书核心“目标导向设计”一篇讲透：三原则、六阶段、十三条问题清单。 | 4-网友读书笔记21篇/AboutFace4-一文读懂目标导向设计-知乎.md |
| 界面设计模式-读书笔记-知乎.md | Designing Interfaces | 全书三大部分梳理（用户研究 / 框架层 / 其他模式），点明它是“字典式工具书”。 | 4-网友读书笔记21篇/界面设计模式-读书笔记-知乎.md |
| 界面设计模式-模式的力量书评-豆瓣.txt | Designing Interfaces | 讲清这本书的出发点：把建筑里的“模式语言”引进界面设计。 | 4-网友读书笔记21篇/界面设计模式-模式的力量书评-豆瓣.txt |
| 界面设计模式-APP导航设计实践-人人都是产品经理.txt | Designing Interfaces | 按这本书的思路做的一次导航设计实践。 | 4-网友读书笔记21篇/界面设计模式-APP导航设计实践-人人都是产品经理.txt |
| 信息架构-导航系统读书笔记-CSDN.txt | Information Architecture | 讲信息架构四套系统里的导航，并列出手机端六种结构模式。 | 4-网友读书笔记21篇/信息架构-导航系统读书笔记-CSDN.txt |
| 点石成金-读书笔记-知乎.md | Don't Make Me Think | 两天读完的完整笔记，覆盖全部核心原则（扫描论、导航、主页、可用性测试）。 | 4-网友读书笔记21篇/点石成金-读书笔记-知乎.md |
| 点石成金-读书笔记-Mayo博客.txt | Don't Make Me Think | 前端视角的结构化总结，按章节列了可用性定律和广告牌法则。 | 4-网友读书笔记21篇/点石成金-读书笔记-Mayo博客.txt |
| 点石成金-设计师的第一本必读书-人人都是产品经理.txt | Don't Make Me Think | 讲为什么这本书过了两次时仍然不过时。 | 4-网友读书笔记21篇/点石成金-设计师的第一本必读书-人人都是产品经理.txt |
| RefactoringUI-读书笔记-Nolebase.txt | Refactoring UI | 很详细的前端视角笔记：层级、间距、配色、字体逐条讲，含大量原文小标题。 | 4-网友读书笔记21篇/RefactoringUI-读书笔记-Nolebase.txt |
| AtomicDesign-关于原子设计你想要的都在这里-站酷.txt | Atomic Design | 全书要点总结，含“界面清单”工作坊的具体做法。 | 4-网友读书笔记21篇/AtomicDesign-关于原子设计你想要的都在这里-站酷.txt |
| AtomicDesign-原子设计理念五级拆解-人人都是产品经理.txt | Atomic Design | 把原子→分子→有机体→模板→页面五级拆开讲。 | 4-网友读书笔记21篇/AtomicDesign-原子设计理念五级拆解-人人都是产品经理.txt |
| AtomicDesign-全书中文翻译项目介绍-知乎.md | Atomic Design | 社区全书中文翻译项目的入口说明。 | 4-网友读书笔记21篇/AtomicDesign-全书中文翻译项目介绍-知乎.md |
| DesignSystems设计体系-读书笔记-优设.txt | Design Systems | 完整笔记：三层级（设计语言/组件库/设计体系）、设计原则、界面盘点、模式库。 | 4-网友读书笔记21篇/DesignSystems设计体系-读书笔记-优设.txt |
| 精益UX-全书笔记-中文版第1版.txt | Lean UX | 按验证 / 设计 / 产品三篇梳理，核心是“产品由待验证的假设组成”。 | 4-网友读书笔记21篇/精益UX-全书笔记-中文版第1版.txt |
| 用户故事地图-读书笔记-豆瓣.txt | User Story Mapping | 精髓一句：卡片用动词短语，从左到右讲故事，从上到下拆细节。 | 4-网友读书笔记21篇/用户故事地图-读书笔记-豆瓣.txt |
| 用户故事地图-什么是用户故事地图-CSDN.txt | User Story Mapping | 讲它如何防止设计在开发中走样，以及怎么排卡片。 | 4-网友读书笔记21篇/用户故事地图-什么是用户故事地图-CSDN.txt |
| OOUX-面向对象的体验设计思维-人人都是产品经理.txt | OOUX | 介绍 ORCA 方法：对象、关系、动作、属性，以及为什么按对象设计更耐用。 | 4-网友读书笔记21篇/OOUX-面向对象的体验设计思维-人人都是产品经理.txt |
| 用户体验要素-读书笔记-知乎.md | Elements of UX | 五层模型逐层讲，含每层的产出物和典型争论错误。 | 4-网友读书笔记21篇/用户体验要素-读书笔记-知乎.md |
| 用户体验要素-读书笔记-人人都是产品经理.txt | Elements of UX | 产品经理视角的五层解读。 | 4-网友读书笔记21篇/用户体验要素-读书笔记-人人都是产品经理.txt |
| 用户体验要素-五要素保姆级教程-优设.txt | Elements of UX | 大厂 UED 团队写的保姆级教程，配图多。 | 4-网友读书笔记21篇/用户体验要素-五要素保姆级教程-优设.txt |
| Web表单设计-优质表单9个方法-优设.txt | Web Form Design | 9 个方法：标签对齐（含眼动数据）、必填标注、即时校验、错误消息。 | 4-网友读书笔记21篇/Web表单设计-优质表单9个方法-优设.txt |
说明：这些笔记是网友写的，观点和总结未必和原书完全一致，我保留了他们自己的说法（引号里的都是原文）。官方免费章节在你下载的 免费下载/ 里，分三个文件夹：1-AtomicDesign免费全书、2-官方样章与画布PDF、3-作者官方免费文章。