← 全部书单 / UI/UX 设计

《点石成金》

《点石成金》封面
作者: 史蒂夫·克鲁格
出版社: 机械工业出版社
出版年: 2006-8
原作名: Don't Make Me Think
8.5
★★★★☆
豆瓣评分 · 7,273 人评价
未标记阅读状态
做网站和 App 的实战小册子:别让用户动脑子,薄、幽默、句句拿来就能用。

总体观点

网页与应用可用性的第一定律就是“别让我思考”。优秀的界面绝不消耗用户的认知资源,当用户停下来犹豫“我该点哪里”、“这个图标是什么意思”时,体验就已经失败了。好设计的核心,是让界面的意图和操作路径不言而喻、显而易见。

真实世界中的用户从不逐字阅读页面,他们像雷达一样飞速扫描,并且“满意即可”——只要看到第一个看似相关的选项就会毫不犹豫地点击,而不是花费精力寻找最优解。因此,设计必须像高速公路上的广告牌一样一目了然、层级分明,砍掉一切冗余干扰。

可用性测试不需要昂贵的实验室或复杂的统计。定期招募 3-4 位典型用户进行半天的低成本测试,就能发现 80% 的关键易用性障碍。小步快跑、持续发现并修复问题是保持产品健康的最高效策略。

核心观点

  1. 1. 别让我思考:好页面应当不言而喻

    用户打开页面时大脑处于节能模式,只想尽快把事办完。每个按钮、每段文字都要一眼看懂,让用户犹豫超过一秒的设计都是在添堵。

    电商结账按钮直接写“立即支付(含运费合计 ¥99)”,用户不用思考;如果写成“继续提交订单并前往第三方结算网关”,用户就会愣住不敢点。
  2. 2. 用户不是在阅读,而是在扫描

    用户像扫描仪一样飞掠页面,只抓取大标题、加粗关键字和直观按钮,其余段落直接跳过。页面必须经得起飞速扫视。

    微信公众号排版多用加粗小标题、数字列表和留白,读者扫视两秒就能抓住核心结论;密密麻麻的一整屏纯文字段落几乎无人读完。
  3. 3. 满意即可:用户不做最优抉择

    用户不会仔细对比十几个选项找最优解,而是点击第一个看起来靠谱的入口,不行再点返回,因为试错成本远低于脑力对比成本。

    搜索引擎结果页中,绝大多数人会直接点击第一条像样的搜索结果,而不是耐心地把前十个结果的摘要逐一读完。
  4. 4. 点击次数不重要,重要的是每次点击毫无悬念

    用户不怕多点几次,怕的是每次点击都像赌博,猜不透会跳到哪里。只要每一步指引清晰明确,三步完成还是五步完成差异不大。

    外卖点单从选菜、选规格、选地址到支付虽然经过五六次点击,但每一步反馈明确,用户感觉非常顺畅;反之一个按下去不知会发生什么的弹窗会让用户彻底迷失。
  5. 5. 坚决删掉页面上一半不必要的废话

    网页上绝大多数客套话、欢迎辞和说明文字都是噪音。把文字删掉一半,再把剩下的删掉一半,只留下行动所必需的信息。

    企业官网把冗长的“热烈欢迎访问我司数字服务门户,我们将竭诚为您提供优质体验”直接删掉,换成巨大的核心产品搜索框与电话。
  6. 6. 导航必须像街头路标,随时告诉用户“我在哪”

    无论用户从哪个深层链接切入,好的导航都要提供清晰的站点标识、层次结构与面包屑路径,让用户随时知道自己的位置与退路。

    电商详情页顶部常驻“首页 > 电子数码 > 降噪耳机”,同时底部固定主导航,用户在商品详情页逛得再深也不会迷路。
  7. 7. 一天 10 美分测试法:小步常态化测试胜过昂贵调研

    别把可用性测试搞成大型科研项目。每月抽一个上午找 3 个普通用户,布置两个典型任务,看他们在哪卡住,下午立刻动手修复。

    某团队开发点餐小程序,直接拉前台和保洁阿姨试用 15 分钟,立刻发现“加购后找不到购物车悬浮球”的致命问题,当天下午就改好上线。
树状思维导图

全书思维导图 · 知识脉络树

💡 拖拽平移 · 滚轮缩放 · 点击分支圆点折叠/展开
已复制思维导图大纲到剪贴板!

全书结构

  1. 第1章 别让我思考

    确立 Krug 可用性第一定律:页面应做到不言而喻、无需思考,任何让用户产生困惑的微小疑虑都会损耗体验。

    一个按钮到底是纯文本还是可点击卡片,必须通过阴影、外边框或色彩一眼分清,不能让用户鼠标悬停去试探。
  2. 第2章 我们实际上是如何使用Web的

    揭示用户的真实行为特征:扫描而不是阅读、满意即可而不是追求最优解、勉强应付而不是深入研究原理。

    用户不会去阅读软件的使用条款或详细帮助文档,遇到弹窗直接点最显眼的蓝色确认按钮继续操作。
  3. 第3章 广告牌设计101法则

    针对飞速扫视的受众,必须建立清晰的视觉层次、遵循行业既有惯例、划分清晰的功能板块,并明确标出可点击项。

    购物网站将“加入购物车”做成全屏最显眼的橙红色大按钮,价格加粗放大,规格选项整齐排列成胶囊按钮。
  4. 第4章 动物、植物、无机物

    论证为什么用户喜欢无须思考的选择,哪怕多点一次也不愿面对含糊不清的单个复杂决策。

    找工作网站将复杂的筛选条件拆解为两步:先选城市,再选岗位类别,比在一个包含上百项的折叠大下拉框里寻找轻松得多。
  5. 第5章 省略不必要的文字

    讲解精简网页文字的艺术:坚决剔除欢迎辞和絮叨的说明文字,突出信息密度,减轻页面视觉噪音。

    登录页把“欢迎来到本系统,请输入您注册时登记的用户名及密码以继续使用”删成“用户名”和“密码”两个输入框占位符。
  6. 第6章 街头指示牌和面包屑

    系统讲解导航设计的要素:站点标识、栏目层级、搜索入口、面包屑导航以及当前位置的醒目“图钉”高亮。

    维基百科词条页左侧常驻清晰的目录大纲,顶部展示层级分类,当前阅读章节自动高亮,方便读者随时跳转与回退。
  7. 第7章 首先要承认,主页不由你控制

    主页必须在极短时间内回答三个终极问题:这是什么网站、能在这里做什么、为什么选择这里而非别处。

    Airbnb 主页第一屏仅保留品牌 Logo 和醒目的“目的地、日期、人数”搜索栏,一秒向用户传达“这里是用来订全球民宿的”。
  8. 第8章 农场主和牧牛人应该是朋友

    分析设计团队内部关于“用户喜欢什么”的无休止争论与内耗,指出争吵毫无意义,唯一裁判是真实用户的行为测试。

    产品经理和设计师争论轮播图到底放 3 张还是 5 张,别再开会吵,直接拉 5 个用户做任务看他们会不会滑动轮播图。
  9. 第9章 一天10美分的可用性测试

    给出极低成本的实战测试指南:每月固定测试半天,招募 3 名用户,观察他们使用原型时的卡点并迅速排序修复。

    在产品上线前两周,找隔壁部门没参与项目的 3 位同事完成一次“从注册到发起退款”的测试,迅速抓出 4 处断头路。
  10. 第10章 可用性是基本礼貌

    将可用性上升到尊重用户的高度:少索要隐私、不隐瞒费用、方便撤销、少设障碍,守护用户的“好感度储备库”。

    很多软件在注册时非要索要身份证和通讯录权限,一次性把用户好感度扣光;良性产品只在需要邮寄时才请求地址。
  11. 第11章 可访问性、级联样式表和你

    探讨无障碍(Accessibility)设计与样式分离,说明改善无障碍不仅造福残障群体,更能提升所有人的易用性。

    为图片提供精准的 alt 文本、提高文字对比度,不仅让视障读屏器顺畅工作,在烈日强光下的手机屏幕上也更清晰易读。
  12. 第12章 救命!老板想要我……

    教导设计师如何应对来自管理层或商业部门不合理的糟糕设计决策,用数据、用户观察与小实验化解冲突。

    老板要求在首页弹全屏广告强推新业务,设计师建议先灰度 10% 用户并对比跳出率数据,用真实流失率说服老板调整策略。
返回 UI/UX 设计 目录

观点与结构均为转述总结,非原文摘录。封面图片来自豆瓣读书,仅作展示。

豆瓣评分与评价人数为逐本人工核实当天的数值。 · GitHub 仓库 · v1.0.0