这 13 本书：每本教你什么步骤、去哪儿合法读到

• 先别想界面。先搞清楚"用户是谁、他想达成什么目标"——是"我要在开盘前抢到额度"，不是"我要点这个按钮"。
• 把用户分成几种典型角色（比如"职业打新的老手""第一次玩的小白"），挑一个当主要服务对象。
• 观察真实的人怎么做这件事（访谈、跟着看），找出他们真正在意的东西和现在的笨办法。
• 用一句句"场景故事"写下来：某某人，什么情况下，想干什么，希望怎么完成。
• 定下产品该有的"骨架"（有哪些功能、怎么分类），再画框架，最后才做漂亮的皮。
• 用一套造好的假界面试一遍，看故事能不能跑通，再回头改。

防止"技术能做出来什么就做什么"，做出一堆自己觉得牛、用户根本用不上的功能。

• 出版社官方页面（可买纸质/电子版）：https://www.wiley.com/en-us/about-face-the-essentials-of-interaction-design-4th-edition-p-9781118766576
• 免费可读：官方提供的第 1 章 PDF：https://media.wiley.com/product_data/excerpt/71/11187665/1118766571-26.pdf
• 官方目录 PDF：https://media.wiley.com/product_data/excerpt/71/11187665/1118766571-28.pdf
• 图书馆线上借阅（Internet Archive 有这本书的借阅记录，链接已确认存在，但本机网络打不开 archive.org）：https://archive.org/details/aboutfaceessenti0000coop

• 先问"用户在这个画面上是要浏览、要搜索，还是要直接做一件事"——三种情况界面完全不同。
• 按场景去翻"模式库"：别人已经验证过的做法（比如长列表怎么滚、搜索没结果怎么提示、多步骤怎么分页）。
• 挑一个模式套上去，先做出来能点的样子，别追求完美。
• 做出来立刻给人看，看他哪里卡住。
• 卡住的地方换成另一个模式，再试。

每个界面都从白纸开始想，重复发明轮子，结果做出别人早就踩过坑的东西。

• 出版社官方在线阅读页（需 O'Reilly 订阅；本机被 O'Reilly 拦截，该链接来自搜索结果确认，未能本机打开）：https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/
• 图书馆线上借阅（该记录是较早的版本，搜索确认存在，本机打不开 archive.org）：https://archive.org/details/designinginterfa00tidw/mode/
• 未核实到官方免费样章。
• 公共/高校图书馆通常有 O'Reilly 电子书库，用借书证免费看（找图书馆员问"有没有 O'Reilly Safari 电子书"）。

• 把你要放的内容和功能全列出来（比如：项目列表、白皮书、额度、KYC 认证、领币记录、公告）。
• 研究用户会用什么词来叫它们——你叫"额度分配"，用户可能叫"我中签了多少"。
• 做分类：哪些是同一类、哪个在上哪个在下（先看项目、再看详情、再看参与记录）。
• 定导航：顶部菜单放什么、侧栏放什么、面包屑怎么走（"面包屑"就是页面顶部那行"首页 > 项目 > 详情"）。
• 做"标牌"：按钮和标题到底写什么字，一定要用用户的说法。
• 做卡片分类测试——把各功能写在卡片上，让真人来分组，看他怎么分。

功能一大堆，堆在首页像仓库，用户找不到东西，只能打电话问你。

• Google Books 预览（搜索结果确认存在）：https://books.google.com.sg/books/about/Information_Architecture.html?id=vJWJCgAAQBAJ
• Google Books 另一条记录：https://books.google.com.sg/books/about/Information_Architecture_4th_Edition.html?id=GO5zzQEACAAJ
• O'Reilly 订阅可读，但该书的 O'Reilly 具体书页未核实（本机被 O'Reilly 拦截，无法确认网址）。
• 未核实到官方免费样章；Internet Archive 具体借阅记录未核实。
• 图书馆是最实际的路径：用 https://search.worldcat.org/ 搜书名，能查到你附近哪家图书馆有。

• 假设用户不会读页面，只会扫一眼。所以：重要的东西放大、放前、放显眼。
• 每看到一个画面，问自己"用户会不会在这里停下来想一下？"——会，就是问题。
• 把"要想一下"的地方改掉：按钮字写清楚、流程步骤减少、别用行话。
• 找 3–5 个真人，给他一个任务，让他边做边说出声（这就是最划算的可用性测试）。
• 每次只改最刺眼的那几个问题，改完再测一轮。

用户在你的页面上"看不懂、不敢点、找不到下一步"，然后走了。

• 出版社官方页面（可买纸质/电子版）：https://www.peachpit.com/store/dont-make-me-think-revisited-a-common-sense-approach-9780321965516
• 作者官网（Steve Krug 的站点 sensible.com）未核实：本机访问时该域名 SSL 证书异常、无法确认页面，所以我不给具体网址。
• 未核实到官方免费样章；Internet Archive 具体借阅记录未核实。
• 免费替代（官方，可靠）：Nielsen Norman Group 的免费文章，讲的是同一套"别让用户思考"的道理：https://www.nngroup.com/articles/ ；这里有一篇《Usability Testing 101》（怎么做那种 3–5 人的小测试）：https://www.nngroup.com/articles/usability-testing-101/

• 先做一个功能，不要先做整页排版——有一个真东西再谈好看。
• 先定"层级"：哪个最重要、哪个次要（大小、颜色深浅、留白来区分）。
• 定一套间距和字号规则（比如间距永远是 4 的倍数），不要每次手动调。
• 颜色先定深浅全套（一个主色配 10 个深浅），别临场调色。
• 少用边框，多用留白、浅背景和阴影分隔——这是它最出名的一条。
• 每次只改一处，看整体是不是更清爽。

"我知道这很丑，但我不知道为什么丑"——尤其对非设计师出身的团队。

• 官方站（可买，免费领 2 章）：https://refactoringui.com/
• 免费可读：官方的 Medium 文章合集：https://medium.com/refactoring-ui （链接来自官方站页面，本机网络打不开 Medium）
• 免费可看：作者的 YouTube 教学频道：https://www.youtube.com/steveschoger （链接来自官方站页面，本机网络打不开 YouTube）

• 把最小的零件列出来：按钮、输入框、图标、颜色、字号（"原子"）。
• 把几个零件拼成一个小组合：搜索框 = 输入框 + 按钮 + 图标（"分子"）。
• 再把小组合拼成一块区域：注册卡片、项目列表行（"组织"）。
• 用这些块拼出完整页面（"模板 → 页面"）。
• 把这套零件清单沉淀成一个共用库，之后所有页面都从这里取，不许自己另造一套。

同一个"确认按钮"在 10 个页面里有 10 种样子，改一次要改 10 个地方。

• ⭐ 免费可读（全书）：https://atomicdesign.bradfrost.com/ ，目录页：https://atomicdesign.bradfrost.com/table-of-contents/
• 官方电子书商店：https://shop.bradfrost.com/
• 作者关于纸质版停售的说明：https://bradfrost.com/blog/post/ceasing-sales-of-atomic-design-paperback-version/

• 先定"设计原则"——三五句话，说清楚你们做产品要坚持什么（比如"任何操作三步内完成"）。
• 做一次"界面盘点"：把现有页面全截图铺开，看哪些按钮/颜色/文案是重复或打架的。
• 把重复的合并成一套：功能类零件（按钮、表单、导航）+ 感觉类规则（颜色、字体、图标风格）。
• 建"模式库"（就是一份大家都能查的清单：这个零件长什么样、什么时候用）。
• 定流程：谁可以新增零件、怎么提交、谁审核、多久清理一次。
• 让它跟着产品一起长——定期回看，删掉没人用的，补上缺的。

设计规范做出来了，但没人用、三个月就过期、越写越厚。

• 出版社官方页面（可买纸质/电子版）：https://www.smashingmagazine.com/printed-books/design-systems/
• 免费可读：官方提供的第 2 章免费 PDF（讲怎么定设计原则）：https://www.smashingmagazine.com/provide/design-systems-chapter-2.pdf
• 电子版随 Smashing 会员免费（官方页有会员入口）。

• 拿一张纸画出"Lean UX 画布"：我们要解决谁的什么问题、不解决的后果、我们的猜测是什么。
• 把所有"我们以为对"的假设写下来，标出最不确定、错了最惨的那几个。
• 只做能验证这一个假设的最小东西（不用做完整产品，做个能点的假页面就够）。
• 找几个真人试，看行为，不听客气话。
• 学到的东西当场决定：继续、改方向、还是砍掉。
• 每隔一两周重复一遍，别搞半年一次的大发布。

花半年做完才发现方向错了；团队一直在"交付功能"，没人管有没有用。

• 作者官方站（含购买入口与更多资源）：https://leanuxbook.com/
• 免费可读：官方提供的 Lean UX 画布 PDF（第 3 版就围绕这张画布重组）：https://jeffgothelf.com/wp-content/uploads/2016/12/LeanUX_canvas_v4.pdf
• 纸质/电子版在亚马逊、O'Reilly 等常规渠道在售（作者官方站"Buy Now"指向亚马逊）。

• 从左到右，按时间顺序写下用户要走的每一步（注册 → 认证 → 看项目 → 投额度 → 等结果 → 领币）。
• 在这些步骤下面，从上到下按"必须 / 更好 / 锦上添花"分层排。
• 横着切第一刀：挑出一条最薄的、但用户能完整走完的路（"最小可用版本"）。
• 先只做这一条横线以内的东西，做完就发出来给人用。
• 再往下切第二刀、第三刀，每切一刀发一次，而不是一次发全部。
• 每次切之前重排一次地图——用户的需求会变，地图是活的。

需求清单越拉越长、永远做不完；每个人对"最小可用版本"的理解都不一样。

• 作者官方页（购买入口 + 各类资源）：https://jpattonassociates.com/story-mapping/
• 免费可读：作者写的原始文章（故事地图的起点）：https://jpattonassociates.com/the-new-backlog/
• 免费可读：官方速查表（一页纸版流程）：https://jpattonassociates.com/story-mapping-quick-ref/
• 纸质/电子版在亚马逊、O'Reilly 等渠道在售。

• O = Objects（有哪些"东西"）：先列出业务里真正存在的"名词"，比如"项目""用户""白名单""额度""交易记录"。
• R = Relationships（它们之间什么关系）：一个用户有多个额度，一个项目属于一个链，一条记录属于一个用户。
• C = Calls-to-action（对每个"东西"能做什么动作）：对"项目"能"收藏/参与"；对"额度"能"领取/转让"。
• A = Attributes（每个"东西"有哪些信息）：项目的名称、开盘时间、价格、状态；用户的钱包地址、认证状态。
• 这套东西列完，才画界面。作者的比喻是："先把名词理清，动词自然就出来了"——先有"东西"，再有"按钮"。

复杂系统（发币平台绝对算）里功能互相纠缠、加一个功能就崩一片，因为一开始就没人把"东西和关系"理清楚。这也帮你们和程序员对齐：程序员本来也是按"对象"写代码的。

• 官方方法总入口（免费可读）：https://ooux.com/
• 官方"什么是 OOUX"页（免费可读，ORCA 四个字母的官方解释就在这页）：https://ooux.com/what-is-ooux
• 官方入门培训（收费，$15 起）：https://ooux.com/uxlevelup
• 官方播客（免费，讲复杂系统的拆解方法）：https://www.ooux.com/podcast
• 未找到公开的合法免费"整本书"——因为书本身不存在。

• 战略层：我们和用户各要什么？（商业目标 + 用户需求）
• 范围层：到底做哪些功能、不做哪些？
• 结构层：这些功能怎么组织、页面之间怎么走？
• 框架层：每个画面上，按钮、文字、导航各放哪里？
• 表现层：最后才是颜色、字号、图片好不好看。
• 关键规则：上一层没定清楚，别急着往下画。顺序错了，返工最贵。

一上来就争论"按钮用蓝色还是绿色"，而"这东西到底该不该做"根本没讨论过。

• 出版社官方页面（可买纸质/电子版）：https://www.peachpit.com/store/elements-of-user-experiencethe-user-centered-design-9780321683687
• 图书馆线上借阅（Internet Archive 有借阅记录，链接已确认存在，本机打不开 archive.org）：https://archive.org/details/elementsofuserex0000garr
• 未核实到官方免费样章。
• 作者（Jesse James Garrett）的个人站 jjg.net 未核实：本机无法连接该域名，所以不给网址。

• 先问：这个字段真的必须现在问吗？能删就删，能后问就后问。
• 把表单排成一条顺畅的路：先易后难，一步一步，随时知道走了多少、还剩多少。
• 标签写清楚放哪里（在输入框上方最容易读），必填项标出来。
• 按钮写"动词+结果"（写"创建账户"，别写"提交"），主次按钮分清。
• 帮忙的文字放在需要它的地方（提示、示例），不要堆在开头。
• 出错时：说清楚哪里错、为什么错、怎么改，并且别让我重填一遍。
• 边填边检查（比如邮箱格式），当场告诉他，不要等我按了提交才一起报错。

注册掉一半人、充值卡在最后一步、用户骂街——表单是转化率最容易漏钱的地方，对发币平台更是命门。

• 出版社官方页面（可买纸质/电子版，官方说明电子版 DRM-free）：https://rosenfeldmedia.com/books/web-form-design/
• 作者官方书籍页（含常见问题、样章类资料）：https://www.lukew.com/resources/web_form_design.asp
• 免费可读：官方"Web Form Design 常见问题"页（书里核心结论的浓缩版）：https://rosenfeldmedia.com/web-form-design-frequently-asked-questions/ （该链接来自我实际打开的官方书籍页；本机再次访问时返回 403，未能亲自打开验证内容）
• Internet Archive 借阅记录未核实。

• 关系层：先想清楚"我们和填表人的关系是什么"——他信不信任你、愿不愿意给你信息。这一步决定了后面所有设计。
• 对话层：把表单当成一次对话。问问题的顺序要像人说话，先问简单不敏感的，敏感信息（身份证、资产）后面再问，并且解释为什么需要。
• 每个问题都要过一遍："我们真的需要这个吗？用户能答得出来吗？他会愿意答吗？"三个问题有一个"不"，就改问题或删问题。
• 外观层：最后才排版——标签、必填标记、进度提示、帮助文字、报错方式。
• 上线前拿真人试一遍，看他在哪里犹豫、哪里填错、哪里放弃。

问了一堆根本用不上的信息，把用户吓跑；或者用户填错，你还得人工去追。

• 出版社官方页面（可买纸质/电子版）：https://shop.elsevier.com/books/forms-that-work/jarrett/978-1-55860-710-1
• 两位作者的官方网站（可访问）：https://www.formsthatwork.com/
• Caroline Jarrett 的公司站（免费文章与表单设计资源）：https://www.effortmark.co.uk/
• 未核实到官方免费样章；Internet Archive 借阅记录未核实。
• 免费替代（官方，政府级范例）：英国政府设计系统的表单做法，是全世界公认最实用的免费参考：https://design-system.service.gov.uk/patterns/