交互设计 · 经典精读

About Face 4交互设计精髓 · 全书精读与项目诊断

584 页 21 章 3 大部分 附录 A 设计原则 中文第 4 版

这本书不是在教你把界面画好看。它在回答一个更前置的问题:一个会做出复杂行为的数字产品,凭什么让人用得顺、信得过、愿意再回来。前半本讲怎么找到对的问题,中间讲产品应该怎么表现,后半本讲每一个控件为什么长这样。最后一部分,我们用它把 Launchpad 重新审一遍。

目标导向设计 人物模型 姿态 数字礼仪 附加工作 视觉层级
READ · DIGEST · APPLY
00 · 导读

怎么读这本书先建立地图,再进细节;否则 21 章会变成 21 堆互不相干的原则

《About Face 4》常被当成「界面设计原则大全」引用,但它其实是一本讲因果的书:为什么数字产品会做出恶劣行为 → 因为团队从「功能」而不是「目标」出发 → 所以要研究人、建人物模型、写场景、抽需求、定框架 → 行为定下来之后,才轮到控件和像素。

全书有一条很硬的论证链,21 章都挂在这条链上:观察真实的人 → 合成人物模型 → 用场景推演理想交互 → 从场景里抽设计需求 → 定义交互框架 → 细化外形与行为 → 用行为原则守住质量 → 在具体平台和控件上落地。你如果只记原则、不记这条链,就会得到一堆「正确的废话」;记住链,任何一个界面问题都能被定位到它该在哪一步被解决。

全书真正的四个主张

① 设计的是行为,不是屏幕

交互设计处理的是「产品随时间如何响应人」。屏幕只是行为的容器。所以本书大量篇幅在讲目标、场景、流、反馈、撤销,而不是配色。

Foreword / 第 1 章

② 目标是设计的起点,不是功能的附注

用户不是来「使用功能」的,是来完成某件事、成为某种人、获得某种感受的。功能是实现目标的手段,手段可以换,目标不能丢。

第 1、3 章

③ 好行为可以被拆成规则

礼貌、体贴、聪明、有判断力——这些听起来像人的品质,本书把它们翻译成了可检查的产品行为规则(第 8 章),这就是它最实用的地方。

第 7、8 章

④ 细节不是最后一步,是设计的一部分

控件、菜单、对话框、手势——这些不是「实现细节」。选错控件,等于把产品的行为逻辑做错了。第 18–21 章是设计书,不是开发手册。

第 18–21 章

五个反常识,先记住

1. 用户要的不是功能,是目标

「我要一个导出按钮」背后可能是「我要在周五前把报表交给老板」。只做按钮,换一个场景就失效;理解目标,可能根本不需要按钮。

2. 人物模型不是用户画像

用户画像描述「谁」,人物模型解释「为什么」。它不是人口统计学标签的拼贴,而是从行为变量里合成出来的、有目标、有动机、有上下文的设计工具。

3. 隐喻是拐杖,习惯用法才是母语

桌面、文件夹、回收站曾经是好隐喻,但当产品行为超出隐喻的物理边界,隐喻就开始骗人。成熟界面靠的是「习惯用法」——用户不需要理解原理,只需要知道怎么用。

4. 好用不是「少点击」,是「少负担」

点击次数是伪指标。真正消耗人的是导航负担、拟物负担、模态负担、样式负担——那些不直接推进目标、却必须做的额外工作。

四种读法,按你的时间选

只有 1 小时

读第 1 章(过程总览)、第 3 章(人物模型与目标)、第 12 章(附加工作)。这三章能立刻改变你做需求评审的方式。

约 60 分钟

产品负责人 / 创始人

第 1–5 章全读,第 8、9、11、12 章精读。重点不是画图,是学会用「目标—场景—需求」替代「功能清单」。

约 6 小时

设计师 / 交互

全书通读;第 13–17 章反复读(范式、数据、错误、视觉);第 18–21 章当工具书,做具体界面时查。

约 20 小时

工程师 / 评审者

第 7、8、12、15、21 章。你会拿到一套判断「这个交互是不是在给用户添麻烦」的硬标准。

约 3 小时
本页怎么用

左边目录可以跳章;每章都是「一句话主旨 + 核心概念 + 一张图 + 方法步骤 + 原书金句 + 坑与项目钩子」。第 21 章之后是工具箱和 Launchpad 诊断——诊断部分把全书的判断标准真的用了一遍。

全书地图

三部分,一条链从「为谁做」到「做成什么样」再到「具体怎么摆」

图 0-1 全书的论证链
01观察定性研究
→
02建模人物模型
→
03推演场景剧本
→
04定义设计需求
→
05框架交互与视觉
→
06细化行为与外形
第 1–5 章讲完这条链;第 7–17 章给这条链加上「行为质量」的约束;第 18–21 章把它落到具体平台。链是迭代的,不是瀑布——框架阶段发现人物模型错了,就回去改模型。

第一部分

目标导向设计
第 1–6 章
回答:为谁做、为什么做、做成什么样。
产出:研究笔记 → 人物模型 → 场景 → 需求 → 框架。

全书的方法论地基

第二部分

设计行为与形式
第 7–17 章
回答:好产品应该具备什么行为品质,怎么把它变成规则。
产出:价值标准、礼仪清单、姿态、流、负担审计、视觉层级。

全书最「可抄」的部分

第三部分

交互细节
第 18–21 章
回答:桌面 / 移动 / 网页 / 控件,具体怎么选、怎么摆。
产出:窗口与菜单规范、手势语义、寻路模型、控件决策树。

当工具书查

附录 A

设计原则
把散落各章的原则收成一张总表:伦理、目标明确、实用、优雅四组。
适合贴在评审会上当检查表。

评审用

每部分回答的问题不一样,别混着用

部分它回答的问题典型误用
一 · 目标导向设计我们该为谁、解决什么问题?做成什么样才算对?跳过研究和建模,直接画界面;把「用户说想要」当目标。
二 · 行为与形式这个产品应该表现出什么样的行为品质?把「礼貌」「聪明」当文案风格,而不是系统行为。
三 · 交互细节在这个平台、这个场景里,用哪个控件、怎么组织?把控件当美术素材选,不看它隐含的行为承诺。
如果只想带走一句话

「目标决定行为,行为决定形式。」形式层的问题(按钮放哪、颜色对不对)几乎都能往上追到行为层(用户此刻要完成什么、怕什么),再往上追到目标层(他为什么来)。追不上去的设计决策,通常只是偏好。

速查

28 个核心概念全书反复出现的「判断工具」,先混个脸熟,再进章节

以下概念按「用在哪一步」粗略排序。每个后面标了主要出处章节,方便回查。加粗的是最容易被误用的。

目标Goal · ch1/3

用户最终想达成的状态,不是他当下操作的步骤。判断标准:功能砍掉一半,目标还在不在。

任务 vs 活动Task / Activity · ch1

活动是目标导向的一整件事,任务是其中一步。界面按任务组织,产品按活动设计。

三个模型Implementation / Mental / Presented · ch1

实现模型=代码怎么跑;心理模型=用户以为它怎么跑;呈现模型=界面让他以为怎么跑。好设计让呈现模型贴近心理模型,而不是暴露实现模型。

人物模型Persona · ch3

从真实行为变量里合成的原型角色,有目标、动机、上下文。不是人口统计画像,也不是「平均用户」。

行为变量Behavioral Variable · ch3

把用户区分开的那几个维度:频率、熟练度、动机、态度……人物模型要在变量上取两极,而不是取中间值。

三层目标Life / End / Experience Goal · ch3

生活目标=想成为谁;最终目标=要完成什么;体验目标=过程中想有什么感受。产品首先服务最终目标。

场景Scenario · ch4

用故事推演人物模型如何达成目标。三类:上下文场景(宽)、关键路径场景(主成功路径)、验证场景(异常与边界)。

设计需求Design Requirement · ch4

从场景里抽出的「产品必须做到什么」,不是功能清单,也不是规格说明。它约束设计,不规定实现。

设计框架Framework · ch5

交互框架(结构、流、控件)+ 视觉框架(层级、布局)+ 工业/服务框架。先定骨架,再抠细节。

姿态Posture · ch9

产品对用户注意力的长期占用方式:独占(长时间沉浸)、暂时(用完即走)、后台(默默运行)。姿态决定界面密度和交互节奏。

永久的中级用户Perpetual Intermediate · ch10

大多数人永远停在「会用但不想学」的状态。产品应为这一层优化,而不是为新手或专家。

渐进式展开Progressive Disclosure · ch10

先给常用的一层,高级内容按需展开。降低首屏负担,同时保留深度。

流Flow · ch11

人完全投入、忘记时间的状态。产品要保护流:减少打断、减少选择、让下一步自然浮现。

编配Orchestration · ch11

多个界面元素、反馈、状态之间的协同节奏。像指挥乐队,不是堆功能。

附加工作Excise · ch12

不直接推进目标、却必须做的额外工作。五类:导航、拟物、模态、样式、记忆。设计的首要任务是消灭它,而不是优化它。

数字礼仪Digital Etiquette · ch8

把「体贴」翻译成产品行为:恭顺、有常识、有判断力、预见需求、不添负担、失败也不失风度……共十几条。

隐喻 vs 习惯用法Metaphor / Idiom · ch13

隐喻借熟悉事物解释新功能,但会限制行为;习惯用法是约定俗成的操作方式,不解释原理,只保证好用。成熟产品靠习惯用法。

能供性 / 顺从Affordance / Pliancy · ch13

能供性=东西看起来能怎么用;顺从=界面元素能被操作的程度与方式。按钮要看起来能按,拖拽目标要看起来能接。

直接操作Direct Manipulation · ch13

直接对对象动手(拖、拉、改),而不是输入命令。适合空间性、可视化的任务;不适合批量、精确、不可逆的任务。

非模态反馈Rich Visual Feedback · ch15

不打断用户的反馈:状态变化、预览、进度、微动效。比弹窗高级,因为它不抢走控制权。

撤销与可逆历史Undo · ch15

比「确认对话框」更好的容错:让操作可逆。撤销要符合用户的心理模型,而不是代码的调用栈。

视觉层级Visual Hierarchy · ch17

用大小、颜色、位置、留白告诉用户「先看什么、再看什么」。层级不清,等于让用户自己猜。

信息设计Information Design · ch17

让数据可读:加强对比、显示因果、显示多变量、就近比较、该量化就量化。图表不是装饰。

一致性与标准Consistency · ch17

平台内一致降低学习成本;跨平台一致保护品牌。但一致性服务理解,不服务强迫症。

寻路Wayfinding · ch20

用户在任何页面都能回答:我在哪、我能去哪、怎么回去、现在在哪一步。

手势语义Gesture · ch19

轻拍=选择/激活,长按=上下文,拖=移动,滑=浏览/操作。手势必须可发现、可撤销、不与系统冲突。

控件选择Controls · ch21

控件是对行为的承诺:命令按钮、选择控件、列表、输入、显示。选错控件=承诺了错误的行为。

无障碍Accessibility · ch16

不是附加功能,是设计约束:可感知、可操作、可理解、可兼容。用「能力受限的人物模型」来检验。

Part I · 第 1–6 章

目标导向设计

先别画界面。这一部分解决的是「我们到底在为谁、解决什么问题、做成什么样才算对」。它给出一套从实地研究到交互框架的完整流水线,也是全书后面所有原则的来源。

核心产出:研究笔记 → 人物模型 → 场景剧本 → 设计需求 → 交互框架
01

数字产品的设计过程

PDF P30–P53 | 原书 p2–25

产品做坏多半不是技术问题,是没人把设计当成定义产品的那道工序。

为什么重要

全书的前提只有一句:能让人顺利达成目标的数字产品,用户会满意、会买、会推荐,商业于是成立。可这件事在多数团队里没被当成一道工序。作者把设计定义为「以人为本的设计活动」——理解用户的期望与情境,也理解商业与技术的限制,再据此决定形式、内容与行为。缺这一环,技术越强,产品越像科学怪人:零件齐全,人性没装进去。

产品为什么让人痛苦

后果很具体,不是一句「体验差」。粗鲁:错误弹窗先假定用户操作失败,还命令他点「确认」认错。逼人像计算机一样思考:Word 里改文件名得先关文件或「另存为」,界面张口就是 SSID、IRQ。马虎:打印完再关文档,它又问要不要保存;Dropbox 把「删除」夹在「下载」和「重命名」中间。让人干重活:数值在窗口间复制甚至重打,为找一个常用功能反复拖窗口。P31–P32

病根四条,每条都能在自己的项目里对上号。重点错置:市场部交来特性清单,开发按技术难度和工期排优先级,没人对「用户要完成什么」负责。无视真实用户:知道人群的年龄收入职业,却不知道他们为什么用、怎么用。利益冲突:写代码的人同时决定交互——「绝不能让原告来裁定案件」。流程缺失:产品能做什么、怎么跟用户说话,只是构建的副产品。错误的补救是把用户直接拉进设计流程:用户能描述症状,开不出处方;把领域知识当设计知识,正是医疗、法律系统难用的原因。P33–P36

核心概念

实现模型 implementation model

代码和算法真实的运作方式,工程师的世界观。按它做界面最省事:一个功能一个按钮,一个数据输入一个字段,一个代码模块一个对话框。对工程结构合理,对用户却是灾难——他得先搞懂机器怎么跑。判断标志:屏幕上出现的是系统的名词(模块、表、字段),不是用户的名词。

心理模型 mental model

用户脑中那套「它大概怎么运作」的简化解释,够用即可,不必正确。看电影的人不需要知道放映机每秒遮光 24 次,打电话的人也不需要知道自己在基站之间切换。它来自经验,且人偏好更简单的解释。所以它既是设计要迎合的对象,也是设计改不动的东西——只能贴合。

呈现模型 represented model

设计师选择怎样把功能呈现给用户,是三种模型里唯一有较大控制权的一层。原则很硬:界面应基于心理模型,而非实现模型。iPad 版 Photoshop Express 调十种滤镜,用的不是十个数字字段,而是十张缩略图加一根滑块——业余摄影者想的是照片「看起来怎样」。呈现模型越贴近心理模型越好学。

目标 / 任务 / 活动 goal / task / activity

目标是「对最终情况的预期」,任务和活动只是达成目标的中间步骤;活动由任务构成,任务由动作组成。关键差别在变化速度:目标受动机驱动,几十年不变;任务随技术而变。同样是「从圣路易斯到旧金山」,过去是马车加一把来复枪,今天是飞机。盯着任务设计会被当下技术绑死,盯着目标才能用新技术删掉整段任务。

图 1-1 三种模型:谁定义、用户看见谁
实现模型呈现模型心理模型
是什么代码与算法的真实运作设计师呈现给用户的那一层用户脑中够用的简化解释
由谁决定工程师与技术限制设计师(唯一能大改的)用户的经验与常识
用户看见吗不该看见全部看见拿它判断产品
偏离的代价照它做界面,用户要学机器越像实现模型,越难学被忽视,界面自说自话
设计动作理解它,然后藏起来把它拉向心理模型研究它,别改造它
据原书 P42–P45 图 1-4 重画。只有一条判断标准:呈现模型离心理模型越近,产品越好学;离实现模型越近,用户越得先当工程师。P44

流程:目标导向设计的六个阶段

这套流程叫目标导向设计(Goal-Directed Design)。它真正的贡献不是阶段划分,而是几个可交接的中间产物——没有它们,研究结论传不到设计手里。书里列六个阶段,前五个才是设计动作。P48–P52

01研究。

实地观察、情境访谈,加竞品审核、文献与利益相关者访谈。产出:行为模式与问题清单。

02建模。

把行为模式收敛成领域模型与人物模型(persona),按目标交叉度排出主次。产出:人物模型与目标。

03需求定义。

用情境场景(context scenario)推演人物模型的一天,定出必备能力。产出:需求清单。

04框架定义。

用交互原则与设计模式,把需求落成结构、流程与草图。产出:交互与视觉框架。

05提炼。

关键路径场景走查,细化控件、信息层级与视觉系统。产出:形式与行为规范。

06开发支持。

开发期回答实现问题,在工期压力下守住设计概念。产出:设计修正。

原书金句

「目标是对最终情况的预期,而任务和活动只是达成一个或者一组目标的中间步骤。」

P40

「呈现模型越趋近于用户的心理模型,用户就会感觉程序越容易使用和理解。」

P44

「产品成功的关键是目标,不是特性。」

P52,本节标题即结论

坑。一是拿「加一条易用性目标」当设计:在特性清单上添「易用」不会产生行为设计。二是把访谈里的方案当需求:用户和专家给的常是处方,不是症状。三是把界面留到写完代码之后——那时结构已定,设计只剩贴皮。

对 App-IPO:我们现在的路线图是按「要有的功能」排的(榜单、徽章、K 线、zkTLS 证明),缺的正是这一步:先写清谁在什么情境下要完成什么、怎样算完成,再决定做哪些控件。

02

理解问题:设计研究

PDF P54–P76 | 原书 p26–48

研究不是为了证明你想对了,是为了在动手前推翻错误的问题定义。

为什么重要

第 1 章说设计是定义产品的工序,这一章解决第一道输入:你该知道什么,以及怎么知道。作者的分工很干脆——定量回答「多少」,定性回答「为什么」,而设计要的正是后者。方法都服务于一个目的:在画第一屏之前,弄清用户的目标与情境。方向错了,画得再漂亮也只是给错误的问题配个好答案。

定性不是「不严谨的定量」

把研究等同于数字,是商业与工程界的通病。但电子不会有情绪,人也无法像物理实验那样被隔离;压成统计,丢掉的恰是对设计影响最大的细微差别。定量只在少数简化轴上回答「多与少」,定性才回答「是什么、怎么样、为什么」。市场划分(market segmentation)能算出谁会买,算不出他买回去怎么用。P54–P57

书里的案例值得记住:客户想做消费级视频剪辑软件,市场研究显示机会很大。团队家访 12 位目标用户,父母拍得最多、最想分享;但 12 人里只有 1 人成功把摄像机连上电脑。四天研究,帮客户决定搁置这个产品,省下的投资很可能远超研究成本。P56

核心概念

定性研究能回答什么 qualitative research

用户与潜在用户的行为、态度、能力;产品的技术、业务与环境情境;领域词汇;现有产品的真实用法。它还产出两样东西:设计决定的可信性,和团队对「用户是谁」的共识。它更快、更便宜,也更可能回答「产品如何进入用户生活」。

情境调查 contextual inquiry

拜耳与霍尔茨布拉特把这叫师徒模式:用户是师傅,你是学徒。四原理——情境(在用户的工作现场,不是白房间)、伙伴关系(观察与追问交替)、解读(综合后向用户求证,别替他想)、焦点(巧妙引导)。改良:一场一小时、每类约六人、两三人小队、一天不超六场。

访谈纪律 ethnographic interview

在交互发生地访谈;不拿固定问卷;装门外汉;开放式与封闭式交替(先展开后收口);先目标后任务;别把用户当设计师,追问「这解决了什么问题」;鼓励讲故事;请对方演示。底线是绝不问诱导性问题——「这个功能有用吗」就是诱导。

人物模型假设 persona hypothesis

选访谈对象的起点,按行为变量而非人口统计切分。商业产品用角色(role,大致等于职位)组织;消费品用行为、态度、生活阶段。数量:企业产品每类 4–6 场,消费品 8–12 场;变量可叠在同一场访谈里。

客户 ≠ 用户 customer / user

客户是掏钱的人,用户是天天用的人。儿童产品的客户是父母,企业产品的客户常是高管或 IT 经理,目标截然不同。访谈客户问采购目的与决策过程;访谈用户问流程、动机与心理模型。把客户偏好当用户需求,是 B 端产品最常见的偏差。

四种「也在做研究」的方法,别用错位置

焦点小组(focus group)、可用性测试(usability testing)、卡片分类(card sorting)、任务分析(task analysis)都能产出信息,但都替代不了早期定性访谈。焦点小组擅长「想买什么」,群体压力还会磨平异议,正好抹掉行为差异。可用性测试要拿连贯原型验证方案,天然在中后期。卡片分类探信息组织,前提是用户会分类。任务分析能拆清现有流程与卡点,但人们现在的做法往往只是迁就落后系统的产物。P74–P76

图 2-1 研究工具箱:每种方法只回答一类问题
方法回答什么问题产出 / 时机
人种学访谈 + 观察用户为什么这样工作,目标是什么行为模式、人物模型假设;最早期
利益相关者(stakeholder)/ SME 访谈业务约束、技术边界、领域规则设计简报、领域词汇表;访谈用户之前
焦点小组人们想买什么、对形式的第一反应市场假设;不能用来定交互
可用性测试这个方案人们能不能用顺问题清单;要有连贯原型,中后期
卡片分类用户怎么归类信息与概念信息架构草案;依赖用户的组织能力
任务分析当前任务怎么执行、卡在哪流程图、难点清单;对「目标」帮助不大
据原书 P74–P76 整理。顺序错了方法就白做:焦点小组和可用性测试问的都是「这个方案行不行」,而目标导向设计要先问「该做哪个方案」。

研究怎么跑:七个活动

01启动会。

七个问题定范围:产品是什么、用户是谁、最需要什么、哪些客户最重要、最大对手、必读文献。产出:一页研究简报。

02文献综述。

读市场规划、品牌策略、白皮书、客服数据与行业报告。产出:领域词汇表与待问清单。

03竞品审核。

按交互与视觉原则做启发式评审,建立一流产品参照。产出:优劣势与功能范围清单。

04利益相关者访谈。

一对一、不超一小时,问愿景、预算、技术限制、商业驱动、他们眼中的用户;分歧是黄灯。产出:约束清单。

05主题专家访谈。

复杂领域必做,问最佳实践与规则;他们是专业用户,不是设计师。产出:领域规则。

06用户与客户访谈。

问流程、领域知识、动机、心理模型、现有产品的坑。产出:编码后的行为模式。

07现场观察。

去交互发生地,访谈与观察交替;留意便条与备忘单。产出:环境与行为记录。

原书金句

「定量分析只能回答那些少数简化轴上的『多与少』问题。而定性研究能够以丰富多元的形式回答『是什么』、『怎么样』和『为什么』等问题。」

P55

「焦点小组擅长收集人们拥有或愿意购买的产品方面的信息,但在收集用户使用产品做什么、如何使用产品以及为何这么使用产品等方面的信息方面表现不佳。」

P74

「任务分析是了解用户当前行为、识别难点所在,以及改进机会的重要途径。然而,任务分析对明确用户目标帮助不大。」

P76

坑。一是拿焦点小组当用户研究:它产出偏好与共识,不是行为。二是只访谈不观察,或在会议室访谈:用户说不清自己的行为,也会出于礼貌隐藏问题。三是把「你觉得这个功能有用吗」当成需求验证。

对 App-IPO:先写三条人物模型假设——谁因为什么打开它、现在用什么凑合、什么会让他放弃——再定访谈谁,否则我们只会访到同行和加密老手,做出来的仍是给同行看的产品。

03

用户建模:人物模型和目标

PDF P77–P109 | 原书 p49–81

把一摞访谈笔记压成几个有名字、有目标的人,设计才有可争论的对象。

为什么重要

第 2 章带回一摞访谈笔记:每次决策都要回去翻几百页。这一章解决「数据怎么变成判断」:人物模型(persona)把行为模式压成几个具体的人,目标把「用户要什么」从功能清单里拽出来。第 4 章的场景、第 5 章的框架都建立在「一个主要人物模型 + 它的目标」上;这步做虚,讨论就退回「我觉得」。

核心概念

人物模型(persona)

不是真人,也不是带照片的用户档案,而是从访谈和观察到的行为模式里合成的原型(composite archetype):把许多真实用户重复出现的行为与动机收束成一个具体的人。它有效是因为具体的人能触发同理心——团队会问「朱莉会这么做吗」,而不是「用户会不会」。

作为设计工具的五个用途

书里列了五条:确定功能与行为;给利益相关者、开发和设计共同语言;让决策形成共识而不是靠嗓门;在白板上低成本试方案;外溢到营销、客服与组织规划。前三条决定设计质量,后两条决定它能不能在组织里活下来。

三个设计陷阱

弹性用户(elastic user):「用户」没有边界,谁强势就按谁的理解变形;外科、儿科 ICU、手术室的护士根本不是一个物种。自我参考设计(self-referential design):把自己的心理模型当成用户的。边缘功能设计(edge-case design):为偶尔发生的情况花掉主要设计预算。人物模型的用处就是逼出一句追问:「她经常这么做吗?」

三层目标

体验目标(experience goal)对应本能层:用的时候想有什么感觉。最终目标(end goal)对应行为层:要用它完成什么。人生目标(life goal)对应反思层:想成为什么样的人。多数人物模型 3–5 个最终目标、0–2 个体验目标、0–1 个人生目标;「别让我觉得自己笨」是隐含目标。

目标从定性数据里长出来

目标不能靠直接问:人要么说不清,要么说不准,要么不说实话。得从行为、回答、非言语暗示和环境线索里重建,每个目标写成一句简单的话。目标也不是任务:任务是手段,目标是目的。判断人物模型真假,只看它有没有目标。

六种人物模型类型

一个界面只能有一个主要人物模型(primary persona),它不满意方案就不成立;次要(secondary)补特例,超过 3–4 个说明范围失控;补充(supplementary)被前两者覆盖;客户(customer)买单;接受服务(served)受产品影响;负面(negative / anti-persona)明确「不为谁设计」。主要人物模型不必是最大市场。

图 3-1 目标的三个层次
人生目标(反思层)我想成为什么样的人
最终目标(行为层)我要完成什么
体验目标(本能层)过程中我想有什么感觉
原书 P89–P91 图 3-4。三层不是并列的三张清单,而是同一个动机在不同抽象层级上的说法。越往下越贴近界面能直接给到的东西,越往上越决定用户会不会长期留下来。
图 3-2 六种人物模型的分工
类型是产品用户吗设计中的分工
主要是界面为它而做;一个界面只有一个
次要是主要满足后补特例;超过 3–4 个说明范围太大
补充是需求被主、次覆盖,不单独设计
客户通常不是买单方;企业产品里可能独占管理界面
接受服务否受产品影响的人(如病人);用来跟踪二次后果
负面否写清「不为谁设计」,防止范围漂移
原书 P99–P101。选择是排除法:拿每个人物模型的目标去比,谁不满意方案就排除谁。利益相关者通常归入补充人物模型,也叫政治人物模型。

怎么用:八步造一个人物模型

01按角色分组。

企业产品按岗位分,消费产品按家庭角色、态度、活动方式分;护士和护士长不是一类,新老护士也不是。产出:角色分组表。

02找行为变量。

每个角色列出活动、态度、能力、动机、技能五类变量,通常 15–30 个;先别碰年龄地域,人口统计解释不了行为。产出:变量清单。

03把访谈对象映射上去。

连续变量画轴(如「对技术的信心」),离散变量列选项;相对位置比精确刻度重要,45% 还是 50% 无所谓。产出:映射图。

04找行为模式。

找同时落在 6–8 个变量上的聚类,检查是逻辑或因果关系而非巧合:买 CD 又下载 MP3 说得通,买 CD 又吃素说不通。产出:2–3 个行为模式。

05综合特征,阐明目标。

为每个模式补行为、环境、挫折、技能、态度和替代方案;推出 3–5 个最终目标。产出:目标清单 + 行为要点。

06检查完整性和冗余。

看坐标轴有没有空洞,缺就补研究;只在人口统计上不同的模型就合并或拉开差异。产出:人物模型集。

07指定类型。

用排除法选一个主要人物模型:拿目标去比,谁不满意方案就排除谁;再定次要、补充、客户、接受服务和负面。产出:优先级表。

08描述特性和行为。

写 1–2 页第三人称叙述,只写观察到的细节,不写解决方案、不写区间和均值(没有 1.5 个孩子)。产出:人物模型卡。

原书金句

「人物模型并非真正的人,但它们来源于研究中众多真实用户的行为和动机。换句话说,人物模型是“合成原型”(composite archetype),建立在调查过程中发现的行为模式基础上。」

P78,第 3 章开篇

「满足广大用户需求的最佳方式是,为具有特定需要的特定个体类型设计。」

P78,反「功能越多覆盖越广」的直觉

「多强调目标对人物模型的重要性也不为过。事实上,可以说,如果模型没有目标,你所拥有的就根本不是人物模型。」

P84,人物模型有动机

两个常见误读。一是把人物模型当「编造」:名字、照片只是包装,行为模式必须来自一手数据;反过来,只有人口统计加头像的「用户画像」也不叫人物模型,问一句「它的目标是什么」就能拆穿。二是让非用户目标(nonuser goal)接管设计:客户要安全、技术要跨平台,这些是约束,不能凌驾于用户目标。「要定量验证」也站不住:人物模型对应行为模式,不是市场份额。

对 Launchpad:把「发币的开发者」和「买币的投资人」当成两个主要人物模型、两套界面的起点,而不是一个笼统的「用户」——前者要的是把真实收入换成可验证的发行资格,后者要的是在几十秒内判断这个项目值不值得继续看。

04

设立愿景:场景和设计需求

PDF P110–P124 | 原书 p82–96

先写人怎么达成目标,再决定界面长什么样。

为什么重要

研究做完、人物模型也有了,团队还是会卡在「然后呢」:数据能证明你理解用户,却不能告诉你产品该长什么样。这一章给出从理解到方案的前半座桥——先用叙事推演理想体验,再从故事里榨出需求,最后才谈界面。它把「做什么」和「怎么做」切开,这是第 5 章框架的前提。

核心概念

基于人物模型的场景(scenario)

用叙事描述一个或多个人物模型如何借助产品达成目标:谁、在什么情境、想做什么、过程中怎么想。它是设计工具,不是需求文档——从人物模型视角写,先写行为与体验,不写控件。作者认为它比用例更适合设计:用例把所有交互视为同等重要,场景天然带优先级。

三类场景

情境场景(context scenario)在画草图前写,广而浅,只写活动、感知和期望,用来探索理想体验;关键路径场景(key path scenario)在框架定下后改写,引入界面词汇,盯住最重要的一条路径;验证场景(validation scenario)用「如果……会怎样」挑异常与边界。三者是同一个故事的三种精度。

设计需求不是特性,也不是规格

书里的需求(requirement)等于需要(needs):人物模型完成目标必须具备什么信息和能力。它不是功能清单,也不是 PRD 里「应该有一个菜单包含……」这种预先指定的方案。后者把问题和解法焊死:数据分析工具直接做「报告」,就看不见决策者真正要的是在错失机会前发现异常。

问题陈述与愿景陈述

问题陈述(problem statement)一句话把商业问题和可用性问题绑在一起:「份额跌了 10%,因为用户做 X、Y、Z 时工具不趁手,而这些任务是为了目标 G。」愿景陈述(vision statement)是它的倒转:新设计让用户更准确地完成 X、Y、Z,从而达成 G、提升份额。作用是在开工前对齐「为什么做」。

情境场景怎么写

范围广而浅:只写一天里有意义的时段、人物模型与系统的主要接触点,不写界面细节,先假设界面是魔法。要回答环境问题:什么背景下用、会不会超时、经常被打断吗、多人共用设备吗、和其他产品一起用吗、预期结果是什么。第一稿纯文字,「怎么做」留到框架阶段。

需求的三类语法

提需求最省事的句式是「对象 + 动作 + 情境」:从预约(情境)中拨电话(动作)给某人(对象)。也可拆成数据需求(必须有哪些对象与属性)、功能需求(对它做什么、放在哪个容器)、情境需求(哪些对象必须同时可见、物理环境与技能约束)。业务、品牌、技术需求是约束,不是方向。

图 4-1 需求定义的五个步骤
01问题与愿景一句话对齐「为什么做」
→
02探索与头脑风暴清空先入之见,限时发散
→
03确定人物模型期望心理模型决定呈现模型
→
04构建情境场景广而浅,假装界面是魔法
→
05明确设计需求对象 + 动作 + 情境
原书 P117 图 4-1。步骤大致有序,但 3 和 5 之间要反复回到场景里改,直到需求稳定——这是必要环节,不是返工。
图 4-2 场景、用例、用户故事不是一回事
场景 scenario用例 use case用户故事 user story
视角具体人物模型 + 目标系统功能,事务性一句话的角色与动作
粒度宏观流程,可细化到界面任务级,所有路径等权任务级,接近需求条目
回答什么为什么做、该有什么体验系统必须支持什么谁需要什么能力
什么时候用定义设计与验证设计后期查漏、确认功能完整排期与验收
原书 P112–P113。场景更接近敏捷里的叙事诗(epic):讲更宽的交互集合与用户目标,而不是任务清单。

怎么用:从场景到需求

01写问题和愿景陈述。

两段话,句式固定:商业问题 + 可用性问题 + 目标 G;再把因果倒过来写成愿景。内容来自研究和人物模型。产出:一页纸,开工前对齐。

02探索和头脑风暴。

限时:简单项目几小时,复杂项目几天;先不评判,把古怪想法全记下来,目的是清空先入之见、切到解决方案模式。产出:想法池。

03确定人物模型期望。

写下影响期望的态度与经历、对体验和产品行为的期待、对数据基本单位的理解;回访谈看受访者先提什么、用什么动词名词、漏了哪些步骤。产出:期望清单。

04构建情境场景。

纯文字、广而浅,只写一天里有意义的时段和主要接触点;先假设界面是魔法,不写控件。产出:一页情境场景,可有多条。

05明确设计需求。

逐句拆成「对象 + 动作 + 情境」,再分数据、功能、情境三类;补上业务、品牌、技术约束。此时仍不写控件。产出:需求清单,作为范围基线。

原书金句

「场景既具体又概括,既真实又灵活……场景迫使人们关注使用,而使用则构成了设计的产品。」

P113,约翰·卡罗尔《Making Use》

「设计产品行为前,首先定义产品会做什么。」

P115,设计原则

「设计的早期阶段,假定界面是魔法。」

P122,设计原则

两个坑。一是把需求写成特性或规格:PRD 里「应该有一个菜单包含……」已经替你选好方案,团队只能在错误方案上优化。二是跳过情境场景直接画界面:先画了屏幕,故事就被现有布局驯服,只剩「在这个页面加个按钮」式的创新。场景也别写成用例——把所有路径视为同等重要,等于没有优先级。

对 Launchpad:先写「开发者第一次发币」和「投资人第一次核验」两条情境场景,再倒推需求;如果从现有表单和仪表盘反推,做出来的只会是竞品界面的复刻。

05

设计产品:框架和提炼

PDF P125–P145 | 原书 p97–117

先定结构与流,再谈控件与像素;框架错了,细节越美越是放大错误。

为什么重要

第 4 章把场景和需求摊在桌上,这一章回答从哪一笔开始画。作者的态度近乎顽固:不要一上来就抠细节,先站在高层次上定住界面与行为的整体结构。因为框架层面的错误是乘法——布局错了,后面每一屏的细节都在放大同一个错误;框架对了,细化阶段才可能越做越顺。这是全书从「想清楚」转向「做出来」的铰链,后面讲流、讲控件、讲视觉,都默认你已有一个站得住的框架。

核心概念

设计框架design framework

定义用户体验的整个结构:底层组织原则、屏幕上功能元素的排列、工作流程、产品交互、传递信息的视觉与形式语言、品牌识别。它分成交互、视觉,有时还有工业与服务设计框架几条线,并行推进。像设计房子时先定每个房间的功能、布局和大概面积,而不是先挑门把手和水龙头。最常见的混淆是把它当成线框图或高保真稿——那些只是框架的产物。框架阶段可以粗糙,但不允许含糊。P125

交互框架interaction framework

交互设计者用场景与需求推出屏幕和行为的草图,产出视图、窗格、容器、流与控件行为的关系。Cooper 的做法叫「方块图阶段」:每个功能区一个方块,标上名字和一句关系说明,方块之间的箭头表示流程或状态变化。它最大的价值是便宜——这时推翻重来只要半天,等像素画完再推翻要赔一个版本。P131

形式要素、姿态与输入方法

六步里的第一步,也最容易被跳过。形式要素(form factor)决定屏幕尺寸、分辨率、环境光、单手还是双手;姿态(posture)决定用户愿意投入多少注意力、产品该如何回应这份注意力;输入方法(input method)要从人物模型的态度与能力倒推,有多种输入时还必须指定主要(primary)那一种。这三件事定错,后面的布局再精致也是在错误的画布上作画。P127

关键线路与验证性场景

关键线路情景剧本(key path scenario)描述人物模型每天都会走的那条主路径,比如收发邮件,而不是配置服务器。它比情境场景更任务导向,接近敏捷里的用例。走完主线,再用三类验证场景找洞:替代场景(分叉与例外)、必须使用的场景(清空数据、升级设备)、边缘情形场景。边缘情形必须处理,但不该占据设计重心。P132–P134

体验特征与视觉语言研究

视觉设计框架(visual design framework)不是挑一个好看的颜色。先由三到五个形容词定下产品的音调、语气和品牌承诺,再用视觉语言研究(visual language studies)探索 3–5 套风格,其中常有一两套刻意推到极端,逼出方向上的差异。展示时要把目标和关键词情境化,让涉众先谈情感反应、再谈理性判断。有一条硬规矩:绝对不要展示你自己不满意的方案。P135–P137

形成性与总结性评价

形成性评价(formative evaluation)发生在设计过程中,快速、定性,用来发现哪里看不懂、哪里会走错;总结性评价(summative evaluation,书中译作「最终性评价」)针对已完成的产品,用于比较、追责和召回判断。可用性测试(usability test)本质是评估,不是创造:它能验证命名、分组、可发现性和任务有效性,却测不出用了十次之后的中级体验。设计者必须亲自参与——定参与者标准、写任务、现场观察、共同分析——但协调者要换成没参与项目的人。P142–P145

图 5-1 四套框架,四条并行推进的线
服务设计框架客户旅程、服务蓝图(泳道图与可见线)、体验原型;管所有触点,也包括后台
交互框架视图、窗格、容器、流、控件行为;主干,先于其他三者成形
视觉设计框架体验特征、视觉语言研究、屏幕原型;管外形、层次与情绪
工业设计框架形式要素、输入方法、形式语言、泡沫原型;管实体与手感
原书 P125–P139。四者不是包含关系:服务设计框架(service framework)在最外层统管触点,交互是主干,视觉与工业设计框架(industrial design framework)并行推进、互相制约——形式和行为必须和谐,谁也不能事后补。
图 5-2 形成性评价与总结性评价的分工
形成性评价总结性评价
何时做框架基本成型后、编程开始前产品完成后,或与竞品对比时
回答什么这一处用户看不看得懂、会不会走错这个产品比那个好吗、问题出在哪
怎么做小样本(通常 5–8 人)、出声思考、低保真原型较大样本、第三方主导、定量指标
产出问题清单与具体改法统计结论与生命周期决策依据
最大风险太早没东西可测,太晚来不及改结论正确,但已经没有时间修改
原书 P143–P144。多数团队只把总结性评价当质量保证、放在开发末尾,那时能做的往往只是记录问题,而不是设计。

怎么用:交互框架的六步

01定形式要素、姿态与主要输入方法。

回到情境场景,写下屏幕尺寸、使用环境、单手还是双手、注意力水平,再选输入方式并标明哪一种为主。这一步不写界面,只写约束。一页形式与输入说明

02列功能与数据元素。

把需求翻译成用户看得见的对象(照片、订单、联系人)和能执行的动作,每个元素都要能追溯到某个场景或业务目标,追不到就删。数据元素清单+功能映射表

03分组、定层级、划视图。

按「任务相邻」和「顺序相邻」归类,决定哪些元素同屏、哪些必须分视图;先用缩略图或韦恩图摆关系,别急着排像素。视图清单与容器树

04画方块图,一次画三套。

每个功能区一个方块,标名称与一句关系,箭头表示流;不上色、不加图标、不画控件。三套布局都拿去跑验证场景,而不是凭喜好选一套。三套可选布局

05写关键线路剧本与故事板。

按真实频率挑主线,逐屏写用户动作与系统反应。语言思维者从剧本推到草图,视觉思维者从草图倒推剧本,两种顺序都成立。主线故事板

06用三类验证场景打洞。

依次过替代、必须使用、边缘情形,记录卡住的位置;该改结构就改结构,不要用文案和提示去补结构的漏。缺口清单与取舍记录

从框架到细化

框架稳了才进细化:故事板变成全分辨率屏幕,逐像素推敲;视觉设计者交出视觉风格指南,工业设计师与工程师同步做部件与装配。最终交付一份可打印的外形和行为规格文档——带编号的屏幕渲染说明,加上描述行为的故事板。HTML 或 Flash 原型有用,但不能只有原型:它表达不了底层的模式、原则和理由,而这些恰恰是要和工程对齐的部分。开发团队必须全程参与,否则设计在从文档变成代码的路上会被悄悄改写。

原书金句

「不要一上来就直接跳入细节设计,而应先站在一个高层次上关注用户界面和相关行为的整体结构。」

P125,创建设计框架

「可用性测试的本质是评估(evaluate),并非创造(create)。」

P142,原文续:「所以他不能代替交互设计,永远也不可能成为伟大创意的源泉。」

「绝对不要向涉众展现你不满意的设计方案,那可能正是他们喜欢的。」

P137,设计原则
两个坑

一是把框架会开成评审会。一上来就摆高保真稿,讨论自然滑向配色和圆角;等发现导航结构不对,改造成本已经翻倍。框架阶段唯一该争的是结构、流和优先级。

二是把可用性测试当解药。它测的是第一次使用,测不出熟练后的效率,更替代不了设计;放在开发末尾,只能产出一份「下次一定」的报告。还有一个隐蔽的坑:让设计者亲自引导测试,用户在引导下「成功」了,问题只是被藏了起来。

对 Launchpad

先把「申请—审核—发币」的主线画成方块图和关键线路剧本,再决定任何一屏长什么样;此刻改结构的成本,比上线后低一个量级。

06

创造型团队合作

PDF P146–P162 | 原书 p118–134

团队不是把人凑齐,而是配出一对会互相踩刹车、又敢互相否稿的思想伙伴。

为什么重要

前面五章讲方法,这一章讲人。作者开门见山:团队很常见,有成效的团队很少;不仔细看护,结果只能是各方妥协后的折中方案。设计失败常常不是流程错,而是结构错——没有人为用户目标负责,没有人有权拍板,或者十个人挤在会议室里把创意磨平。所以这一章给的不是激励口号,而是可执行的编制、权责和会议规则,它决定了前五章的方法能不能真的落地。这也是全书的组织学补丁:没有它,人物模型和场景会在第一次评审会上被磨成平均值。

核心概念

核心团队与扩展团队core team / extended team

核心团队小而专注,实质工作都在这里完成;扩展团队人数更多、常常异地,包含涉众,他们依赖设计结果却不对设计本身负责——提供约束和评审,不参与共同决定。控制膨胀的四条原则:团队规模小、角色清晰、决策紧凑、砍掉「与工作相关的工作」。P147、P152

思想伙伴thought partner

不是找个脾气好的人陪聊,而是找一个目标相同、技术不同、看问题角度不同的人。卡尼曼与特维斯基是模板:两人都挑剔、都爱争论,但「在多年的合作中,我们从未拒绝过另一个人的想法」。Cooper 早年有间会议室被叫作「吼叫室」,恰好证明雇用想法相似的人换不来和谐。P147–P148

创造者与综合者creator / synthesizer

创新光谱的两端:创造者遇到问题就抓笔画,综合者摸着下巴列单子、追问意图。创造者主导概念方向,综合者掌握文字与象征意义上的主导权,负责把讨论从细节泥潭里拽出来。失衡的代价很具体:创造者沉溺于一个方案,综合者过早用分析掐死方向。三条操作规则:角色可换但要明说、辩论不拒稿、卡住超过 15 分钟就换一位设计者进来。P149–P152

跨设计领域协作

交互设计管行为与结构;视觉界面设计(Visual Interface Design)管层次、状态、情绪基调与心理模型的视觉匹配,它不是收尾的化妆;平面设计管品牌基调与审美;视觉信息设计管数据、内容与导航的可视化;工业设计管外形、材质与实物输入机制。视觉和工业必须从框架阶段就介入,事后补救等于让形式和行为各说各话。P153–P155

责任与权威responsibility and authority

设计对用户目标负责,因此必须有权决定产品的外观、感觉和行为,也有权拿到研究信息;可用性对验证负责,必须独立于设计又与之协作,两者都向能拍板的决策者汇报;工程师对建造负责;市场定义市场机会;商业领导定义商业机会并为盈利负责。一句话:没有权力的责任是空话,没有责任的权力是灾难。P156

创造型文化与段位匹配

能干的人凑在一起不一定出好设计。文化要素很具体:环境里放点意外、工作场所有白板和走动的空间、会议有行为准则(开始时间、议程、关掉手机和电脑)、容许「积极正面的题外话」——「留点迷路的时间」。另一半是段位:学徒要在师傅手下做超出当前层次的问题,技术高手爱单打独斗,领导者要能定范围、配人、争预算。设计师的技术水平必须匹配问题的广度与深度,配不上,两个方向都伤产品。P160–P161

图 6-1 团队的三层与协作流
01核心团队2–4 人,定体验主干
→
02思想伙伴创造×综合,互相刹车
→
03扩展评审工程、市场、商业、可用性提约束
→
04阶段检查点决策者拍板:继续或返工
→
05真实反馈回流用户怎么用、哪里出错
原书 P147、P152、P156。设计工作收在核心的 2–4 人身上;向外每扩一层,只增加「被咨询」,不增加「共同决定」。
图 6-2 五个角色,五种权力
角色对什么负责必须拥有的权力向谁交付
设计用户的当前目标决定外观、感觉、行为;取得研究与用户接触决策者
可用性验证有用、可用、可期待独立评估,不被设计收编决策者
工程把设计建造出来定平台与库,给出工作量估算设计与商业
市场市场机会与可采纳性以最实惠的方式主张设计商业领导
商业领导商业机会与盈利定差异化方向与项目范围客户与董事会
原书 P156–P157。五份权力对应五个问题,缺一个就会出现「用户目标没人负责」或「设计被工程估算绑死」。

敏捷不是这一章的主角,却是最容易把设计整个吞掉的环境。作者不反对快,他反对把「快」当成不必先想的借口:瀑布把设计全压在开头,敏捷容易把设计摊成碎片、没人对它整体负责。两种失败最后长得一样:界面能用,但没人说得清它本来要帮谁完成什么。敏捷的节奏奖励立刻能做出来的东西,而人物模型、场景和框架恰恰不是立刻看得见的——这正是设计最容易被挤掉的原因。

怎么用:把设计接进敏捷(Agile)

01开工前定体验主干。

在第一个迭代之前,把布局、导航、信息架构、关键转换定下来,让工程与商业一起确认。不是画完所有屏幕,而是定住「不能边写边改」的那部分。体验主干一页纸

02把用户目标写成可验收的条目。

每个目标配一个场景和一句验收(谁、在什么情境、完成什么、怎样算完成),直接进待办列表,而不是另建一份没人读的文档。目标—场景—验收对照表

03给设计留出前置的一小段。

每个迭代前留 1–2 天做定义与验证,迭代中只做细化。此时开发人员就是可用的思想伙伴,尤其能指出哪些设计在现有架构里代价过高。迭代设计说明与取舍记录

04发布后按三个问题收反馈。

用户假设成立吗、他们在哪里出错、什么让他们惊喜;把反馈归因到结构、文案还是性能,再决定下一轮改什么。反馈归因表

原书金句

「两个成员基本合理,三个更好,四个就会令人惊叹,而十个估计可以扭曲时空了。」

P152,核心团队规模适度

「但在多年的合作中,我们从未拒绝过另一个人的想法。」

P147,卡尼曼回忆与特维斯基的合作

「法则:留点迷路的时间。」

P161,容许积极正面的题外话
两个坑

一是把跨职能理解成人人决策。评审会坐十个人,每人改一点,最后产出的必然是折中方案——正是作者开篇点名的失败模式。跨职能是让专业的人在早期提约束,不是让所有人共享否决权。

二是把敏捷当成「不用先设计」的许可证。构建速度快不等于思考速度快;没有体验主干就开写,通常会在第三个迭代推倒重来,代价比先想两周高得多。

对 Launchpad

设计与工程先固定 2–4 人的核心小组和一名能拍板的决策者,其余角色只进评审、不进决策;主线没定之前,不打开工的第一行代码。

Part II · 第 7–17 章

设计行为与形式

产品该表现出什么样的行为品质?这一部分把「礼貌、聪明、体贴、高效」拆成可检查的规则:设计价值、数字礼仪、姿态、流的保护、附加工作的消灭、界面范式、错误与反馈、视觉层级。

核心产出:价值标准 · 礼仪清单 · 姿态选择 · 负担审计 · 范式与视觉规则
07

良好产品行为的基础

PDF P164–P173 | 原书 p136–145

好设计不是品味之争:四层价值定门槛,原则定动作,模式定复用。

为什么重要

第 1–6 章回答「怎么找到对的问题」,这一章起回答「什么算好」。作者先立四层价值,再给两套工具:原则(principles)与模式(patterns)。这是全书的判据章:第 8 章起的礼仪、姿态、流、负担、控件,都是四层价值在细节处的投影。跳过判据直接抄规则,抄到的是偏好清单。

核心概念

设计价值四层design values

四层不是评分维度,而是递进门槛:伦理不过关直接出局,实用不过关则优雅无从谈起。合乎伦理(ethical)是有用、贴心:不伤害并改善人类处境;目标明确(purposeful)是帮他达成目标、也符合他的场景与能力;实用(pragmatic)是商业与技术可行;优雅(elegant)是最简单完整的方案、内在一致、恰当调动情感。评审先问「它在第几层被否决」,比争论好不好看有效。

合乎伦理:不伤害,再谈造福

伤害被拆成六类:人际关系(缺乏尊严、羞辱)、心理(困惑、烦躁、强迫)、身体(疼痛、受伤、死亡)、经济(利润、财产)、社会(剥削与不公)、环境(污染与多样性)。无害只是底线,还要造福:增进理解、提高效率、促进沟通、降低社会文化张力、促进平等、平衡多样性与凝聚力。

目标明确purposeful

不只是「知道用户想干什么」,还包括知道他的弱点与盲点。观察到的行为模式既要描述能力,也要记录局限;人物模型的价值在于把「这个人会在哪里犯错、会忽略什么」写进设计输入,产品于是不只满足目标,还能弥补缺憾。

实用pragmatic

书架上尘封的设计说明书没有价值,设计只有问世才算数。实用要求认真对待商业目标与技术约束,但不是对涉众和程序员言听计从,而是三方保持积极对话:哪些部分可变、哪里是硬边界。作者点破一句行业黑话——程序员说「这个方案无法实现」,多半意思是「按现在的排期做不完」。三支团队互信时,设计才推得动。

优雅elegant

优雅拆成三件事:形式简约(economy of form)、内在一致性、恰当顺应并调动认知与情感。简约是用最少的屏幕与器件完成任务;一致性让产品像一个整体,而不是不同团队零件拼合。情感这条最容易被误读——不是「让用户愉悦」就完事,放疗技师面对设备时需要的可能是敬畏与专注。故作者说,优雅是「在任何情况下适当地顺应、调动用户的认知与情感」。

原则与模式principles / patterns

原则作用于三个层面:概念原则界定产品是什么、如何嵌入使用情境;行为原则描述一般与特殊情境下应有的行为;界面原则处理行为与信息的视觉传达。模式是把有效方案捕捉下来、复用到类似问题的方法,源自亚历山大的《模式语言》。记录一个模式必须写清:具体案例、案例共有特征、方案背后的理念(它好在哪)。

图 7-1 设计价值的四层门槛
优雅elegant · 最简单而完整的方案 · 内在一致 · 恰当调动认知与情感
实用pragmatic · 商业目标可达 · 技术约束可承受 · 三方对「可变与硬边界」有共识
目标明确purposeful · 帮用户达成目标 · 同时包容他的弱点与盲点
合乎伦理ethical · 不造成六类伤害 · 改善人类处境 · 全生命周期可持续
P165。自上而下读是「追求」,自下而上读是「否决」:下层不成立时,上层只是修辞。
图 7-2 原则的三层与模式的三类,是同一件事的两种写法
要回答的问题原则(本书章节)对应的模式类型
概念层产品是什么,如何嵌入使用情境第 8–13 章:礼仪、姿态、流、负担、范式定位模式(如「暂态」:短暂服务于别处的高级目标)
行为层一般与特殊情境下它该怎么做第 14–17 章:数据、错误与通知、帮助、视觉结构模式(如组织者-工作区:导航、总览、详情同屏)
界面层行为与信息如何被看见、被操作第 18–21 章:桌面、移动、网页、控件行模式(器件级交互,如双层抽屉的滑动与选择)
P169–P173。层级边界是模糊的,但用错层代价不同:概念层错了,界面再精致也救不回来。

怎么用:四层价值的落地检查

01先划伦理红线。

把六类伤害逐条对照产品:谁的钱会亏、谁的数据被看见、谁的注意力被占用。写成不超过 5 条红线,越过即否决。伦理红线清单

02用盲点复核流程。

拿人物模型的弱点与盲点重走主流程,而不是只对目标;标出用户会误判、漏看、想放弃的位置。目标—盲点对照表

03把约束谈成共识。

与商业、工程各开一次短会,只确认两件事:哪里可变、哪里是硬边界;并追问「无法实现」是原理不行,还是排期不够。约束边界表

04对核心任务做减法。

逐个任务删界面元素和决策点,再检查同一件事是否只有一个说法。减法清单与一致性核对表

原书金句

「书架上尘封的设计说明书没有任何用处,设计只有问世才具有价值。」

P167,论「实用」的交互设计

「完美不在于无以复加,而在于无可删减,万事莫不如此。」

P168,作者引圣-埃克苏佩里,论形式简约

「模式不是拿来就能用的商品,每一次模式的运用都有所不同。」

P171,作者引泰德维尔《设计交互界面》

两个常见误读。一是把四层当评分表:优雅加分、伦理扣分,最后选平均分最高的方案——四层是门槛,伦理不过直接出局。二是把模式当模板:只抄形(三窗格、抽屉),不记录「它好在哪、什么情境下成立」,于是把 Outlook 的布局搬进手机、把移动端的双层抽屉搬进桌面,模式脱离情境就退化成装饰。

对 App-IPO:发射页的「优雅」不该体现在动效上,而应体现在把一次认购的决策点从「链、金额、滑点、截止时间」压到只剩「金额」——其余用默认值承担,并把修改入口放在用户看得见的地方。

08

数字产品的礼仪

PDF P174–P195 | 原书 p146–167

产品的礼貌不在敬语里,而在它把用户当上级还是当操作对象。

为什么重要

第 7 章给了价值,这一章把价值翻译成能逐条检查的行为。依据是纳斯与里夫斯的《媒介等同》(The Media Equation):人会把人际交往的本能直接套到机器上,软件因此天然「有性格」,用户会像评价同事一样评价它。于是设计问题变成角色分配:人来思考,计算机干活。每一条都能还原成一个界面机制。

核心概念

体贴considerate

比「礼貌」更进一步。礼貌是「请、谢谢」这类礼节,体贴是心里始终想着他人的需求:先关心用户的目标,其次才是功能。软件缺信息、过程模糊、逼用户到处找常用功能,还因为自己的问题责备用户——这种软件即便措辞再客气、比喻再漂亮,也依然不体贴。

角色分配:人思考,机器干活

人不缺「思考上的帮助」,缺的是信息管理上的帮助:访问、分析、组织、可视化;而依据信息做决策,应该留给人。把决策推给用户不是尊重,是把工作退回去。「智能」噱头常帮倒忙:用户要的不是会思考的软件,而是活干得又快又准的软件。

恭顺与「提交」deferential

好的服务员把带位当建议,不是命令;软件可以提醒、可以解释原因,但不能随意判断或限制用户的行为。作者因此说「提交」按钮不礼貌:它把软件摆在用户之上。正确姿势是默认值加可覆盖:先按用户的意愿办,错了给撤销。

提问与选择question vs. choice

提问者所处的位置高于被提问者。软件提问而不是提供选择,会让用户产生被胁迫感;问题还带侵犯性:爱问的产品会被看成无知、健忘、软弱、要求过多——正是人际交往里最讨厌的毛病。落地路径只有一条:把问题变成选项,把选项变成默认值,把默认值变成可修改的记忆。ATM 每次开机都问语言,就是反例。

聪明的软件:空闲周期、记忆、任务一致性

CPU 等用户时每秒空转数十亿条指令,这段空闲可以预取、索引、算好下一步。记忆(memory)不是内存,而是跨会话跟踪并反应用户行为;依据是任务一致性(task coherence):人每天达成目标的方式高度重复,所以上次的选择就是最好的默认值。判断标准:预测准确率有 80% 就径直去做、允许撤销,而不是用对话框确认那 20%。

社交软件的两套规范social / market norms

社交规范(social norms)用于朋友家人:互助、感恩、互惠;市场规范(market norms)用于交易:物美价廉、守信用、公平。在朋友家甩钱是粗鲁,在餐馆道谢后不付钱是违法——软件得知道自己身处哪种情境。此外要帮用户展现最好的一面、让协作就地发生、知进退(社交不压过主任务)、把额外分享做成选择性加入并尊重隐私;社交圈也有复杂度:邓巴数约 150 人,超过就得有规则与工具;对滋事者(troll),要能区分真正的反社交用户和「想融入却不受欢迎」的人。

体贴清单

  • 关心喜好
  • 恭顺
  • 乐于助人
  • 有常识
  • 有判断力
  • 预见需求
  • 尽责
  • 不因自己的问题增加负担
  • 及时通知
  • 敏锐
  • 自信
  • 少问
  • 失败不失风度
  • 知道调整规则
  • 承担责任
  • 帮用户避免低级错误
图 8-1 礼仪条款怎么落成机制
条款它反对的行为落地成什么机制
不添负担网络错误、升级、风控提示全甩给用户软件自己的问题自己扛,改成非模态状态
及时通知事后来一句「保存成功」打断人状态常驻可见;只在影响用户决策时打断
有常识照发 0 元支票、9.5 亿元账单异常阈值检查,命中后转人工兜底而不是照常执行
预见需求等用户点开才加载,空闲时间全浪费空闲周期预取,假设错了就丢弃,成本近于零
知道何时破例缺客户编号就不许开单允许中间态与规避能力(fudgeability),先记录再补全
失败不失风度崩溃后邮件丢失、表单被清空先落盘再确认;崩溃可恢复;保留用户已输入内容
承担责任提示「已取消打印」,纸还在出端到端确认状态,不把锅甩给驱动或硬件
帮用户避免低级错误群发前不提醒,漏了附件也不说非模态提醒加可继续,事后仍能撤回
P176–P184。每一条都能在界面上找到对应动作,做不到通常不是文案问题,是机制没设计。
图 8-2 体贴的四个成熟度
有风度graceful · 出错时不甩锅、能恢复、留退路:先落盘再确认,崩溃可续
聪明smart · 记住偏好与细节、预判下一步、利用空闲把活提前干完
体贴considerate · 心里想着用户目标:替他省步骤,而不是替他做决定
礼貌polite · 措辞客气、界面好看——只是入场券,不是体贴
P175–P190。层级不是四选一:多数产品停在第一层,却以为自己在第三层。

怎么用:把礼仪变成机制

01收集「开口」。

走一遍主流程,记录软件每次主动说话:弹窗、Toast、错误、确认、邮件。标出触发条件与打断强度。开口清单

02先删一半。

凡属「软件自己的问题」改成非模态或干脆不说;留下的每条都要能回答「用户要靠它决定什么」。可删提示列表

03把问题改默认值。

每个必填项先问「上次答案是什么」,改成默认值加可见入口,再配撤销。默认值与撤销映射表

04盘点该记的事。

列出用户重复输入的字段与重复动作,定好记什么、记多久、记错了怎么改。记忆字段表与纠错路径

原书金句

「人来思考,计算机干活。」

P174,设计原则,论人机角色分配

「真正的体贴意味着心里始终想着他人的需求。」

P175,论体贴与礼貌的区别

「如果用户愿意操作,就值得程序记住。」

P187,设计原则,论记忆的边界

两个常见误用。一是把礼仪当文案:加敬语、加吉祥物,机制一条没改——Clippy 的教训不是「别帮忙」,而是「没被邀请的帮助比不帮更烦人」。二是把「自信」做成不问也不给退路:删除不问确认是对的,但没有撤销就是灾难;自信的前提是撤销足够便宜。

对 App-IPO:认购失败那一刻最见礼仪——不要只弹「交易失败」,而要说清哪一步失败、钱在哪里、下一次点哪里,并记住用户上次用的链与金额;发射平台的口碑几乎全部产生在这种时刻。

09

平台和姿态

PDF P196–P220 | 原书 p168–192

姿态不是平台;姿态选错,密度、导航、反馈会一起错。

为什么重要

第 7、8 章讲一个界面该怎样有礼、有分寸;这一章退到所有细节之前,先回答交互框架的第一问:什么平台、什么姿态。它把桌面、网站、手机、信息亭、汽车、家电放进同一套语汇里比较,也是全书少数给出「否决权」的地方——姿态定错,后面所有的密度、导航、反馈、控件尺寸都是白工。

核心概念

平台(platform)

平台是让产品运转起来的软件与硬件共同作用体,涵盖用户交互与内部运转。它不是精确概念,而是物理形态、显示面积、分辨率、输入方式、联网、操作系统与数据能力的简写——「桌面还是手机」只是表象,真正约束设计的是输入精度和屏幕面积。书里那条原则值得转给管理者:平台决策最好融进交互设计的成果。

姿态(posture)

姿态是产品的行为立场,也就是它向用户展现自己的方式。变量只有两个:用户投入多少精力,产品如何回应。它不是审美选择——外观和感觉在这里是行为选择,必须与姿态一致。同一产品可以同时有多种姿态:Word 主体是独占,而插入表格的工具偶尔一用、用法简单,按暂时姿态设计更合适。

独占姿态(sovereign posture)

长时间占据注意力、通常全屏最大化的应用。功能多、交互复杂,用户会沉淀成永久的中级用户,所以优化对象就是中级用户,不能为易学牺牲速度和动力。它该慷慨用屏幕(要四个工具栏就给四个),视觉反而要保守(大色块看几周就俗),反馈要丰富(状态栏、滚动条、标题栏都能放状态),输入方式要多样(直接操作、助记符、加速键)。Word、Outlook 都如此。

暂时姿态(transient posture)

打开一小会儿、做完一件事就退场的应用,常被独占程序调用。用户没机会熟悉它,所以自明是第一要求:大按钮、完整词、不缩写、不做精细操作;一个窗口一个视图,需要第二视图就说明设计要重做。它借用了独占程序的空间,必须可移动、有标题栏,不能遮住下面有用的信息。对话框全属于这一类,也受同一套规则管。

后台姿态(daemonic posture)

不与用户互动、安静运行的程序:打印机驱动、网盘同步。用户多半不知道它存在,界面要极省——只有持续提供状态时才常驻图标,否则宁可隐藏。配置放进控制面板这种暂时式外壳,出问题才浮出来。原则沿用暂时姿态那一套,只是更严:不能在不恰当的时机报告状态。

网站三姿态

信息类网站(informational websites)以阅读为主,靠导航与搜索,考的是「可检索性」;事务性网站(transactional websites)要完成一件事——购物车、结账、配置器,少一步无谓导航就多一分成交;网站应用(web applications)行为复杂,页面像视图而非文档,接近独占桌面应用。三者是连续光谱而非互斥标签:同一站点,常客看到的是独占,稀客和手机访客看到的是暂时。

图 9-1 姿态矩阵:平台决定约束,姿态决定行为
平台 / 场景独占姿态暂时姿态后台姿态
桌面软件文字处理、Outlook、垂直行业软件;全屏最大化文件浏览器、设置、Art Directors 工具箱打印驱动、云盘同步;托盘图标偶尔亮起
网站网站应用:Jira、Proto.io、在线文档;页面即视图信息页与购物流程的一次性访问;手机版极少;站点统计、离线缓存
手机 / 平板独立姿态(standalone):全屏、自明,几分钟换一个应用电话、通知、表盘、小组件;用完即走后台同步、推送;无界面
信息亭屏幕大,但不等于独占(教育、娱乐型偏探索)售票、值机、点餐:单屏完成,情境导航设备监控、打印队列
电视 / 游戏机少数沉浸式长时游戏遥控器导航;当前焦点必须显眼固件升级、待机录制
汽车导航:整个旅程持续显示地图与路线空调、娱乐、设置:大控件,一眼可见胎压、保养提醒
智能家电几乎没有;用户不想「待着」洗衣、烘干、烤箱:任务单一,拨盘常优于触摸屏角落状态图标(刻录就绪、滤网到期)
原书 P198–P205、P216–P220。行是平台,列是姿态:同一格里能填进完全不同的产品,说明决定行为的不是设备,而是「一次会话多长、投入多少注意力」。

关键判断:姿态不是平台

这是本章最容易被跳过、也最吃亏的一句。平台是硬件与系统的组合,姿态是行为立场,两者不是一一对应。同一台 iPhone 上,电话是暂时姿态,Keynote 是独占姿态;同一块汽车屏里,空调和设置是暂时姿态,导航却是独占姿态——它持续几个小时,边缘要放路名、时间、到达时间与下个转弯(P218)。

反过来也成立:信息亭屏幕很大,看起来像独占,实际是暂时姿态。使用者多是首次使用、站着、在嘈杂明亮的公共场所,触摸屏或两侧硬按键都不适合大量输入,多数人做一笔简单交易就离开。所以它要的是大而彩色的屏幕、清晰的硬件按键对应、一屏完成,而不是桌面式的悬浮窗和对话框。

判断姿态只问三件事:一次会话多长、用户投入多少注意力、被打断后还要不要接着干。答错这一层,密度(该慷慨还是该省)、导航(全球还是情境定位)、反馈(丰富状态栏还是大按钮)会一起错——那是重做,不是调样式。

图 9-2 网站的三类姿态:从「读」到「用」的连续光谱
01信息类阅读优先:导航 + 搜索,考可检索性;更新越慢越偏暂时
→
02事务性完成一件事:购物车、结账、配置器;少一步导航多一分成交
→
03网站应用页面即视图,接近独占:窗格分区、少刷新、可全屏
原书 P207–P212。分类是模糊的:搜索引擎本身是暂时姿态,而带信息汇聚的门户又需要独占姿态。判断依据仍是常客还是稀客。

移动端还要多分一层。卫星姿态(satellite posture)是桌面的延伸:Kindle、数字相机只做检索与浏览,控件少、数据靠同步。独立姿态(standalone posture)是 iPhone 之后的新姿态:全屏、自明、短会话,几分钟内在邮件、地图、支付间跳;可穿戴则是「高度暂时」,只给当下情境够用的信息(P213–P215)。

原书金句

「技术平台相关的决定最好能融入交互设计的成果。」

P197,设计原则

「暂时应用程序必须简单、清晰并且意思明确。」

P203,设计原则

「设计交互产品时首先要做的决定就是采用高水平类型的姿态和平台。」

P220,章末总结。原文紧接一句:「许多设计不好的产品都没有意识到这方面内容,只能自尝苦果。」

两个坑

一是把姿态当视觉风格:独占应用做得花哨(撞色、满屏动画),天天看几周就俗;暂时应用做得精细(小滚动条、小图标),用户一个月才见一次,根本点不中。两个方向都错在拿一套规格套所有界面。二是跳过平台谈姿态:在信息亭上套桌面交互(悬浮窗、多窗口),在汽车屏上堆平板级的信息密度。作者点名的反面是智能家电——把没人要的功能塞进 LCD 触摸屏。

对 Launchpad

先定「这是每天泡在里面的工作台,还是扫码即走的临时页」——这一个姿态判断决定了导航、密度与反馈,比后面任何组件选型都靠前。

10

为中级用户优化设计

PDF P221–P229 | 原书 p193–201

产品不该为新手或专家调音,而应为永远停在中间的大多数定调。

为什么重要

第 8、9 章讲产品该怎样待人、该摆什么姿态,这一章补上更靠前的一问:到底为谁设计。作者把「用户」拆成三个经验层级,给出一个反直觉的结论——新手和专家都是过客,中级用户(intermediate)才是常住人口。后面所有的导航、菜单、帮助与控件密度,都建立在这个人口学判断上;判断错了,越努力越错。

核心概念

永久的中级用户Perpetual Intermediate

大多数人的熟练度按正态分布落在中段:新手在左尾,专家在右尾,人都不多。康斯坦丁(Larry Constantine)叫它「不断提高的中级用户」,作者偏要叫「永久」——新手要么升级要么放弃,专家久不用会退回中间,只有中级用户长期停在这里。曲线是某一刻的快照,不是人的命运,但它决定了产品的默认服务对象。

三层用户各要什么

新手要范围与目标,不要原理:一次全局导游、解释性对话框、菜单这种完整但慢的路径。专家要高密度信息、快捷方式、深奥功能与自定义。中级用户要常用工具在前台、工具提示用人话说功能、帮助索引足够全,还需要知道「高级功能就在那儿」——用不用另说,存在本身就让人安心。

扭转界面Interface Twisting

把最常用的功能与部件放到最直接的位置,比如工具条、组件箱;不常用的收进菜单、对话框、抽屉,需要时才取出。典型是傻瓜相机:快门做成硬件键,曝光补偿藏进菜单。注意扭转的是导航成本,不是功能数量——低频但有用的功能可以藏,不可以删。

付出与回报相称Commensurate Effort

人愿意为值得的事付出努力,值不值由用户的目标判定,跟实现难度毫无关系。想做出漂亮文档的人会主动往菜单深处钻;只想打印一页普通文档的人,没有理由去学排版。推论很硬:结果简单,界面就不该复杂,除非结果本身复杂且不常用。功能可以复杂,代价是回报必须够大。

渐进式展开Progressive Disclosure

把高级的、低频的部件收进扩展型窗格,只留一个小开关作入口。开关是「粘连」的:专家打开一次,之后一直开着;中级用户需要时展开,不需要时退回。Adobe Creative Suite 的工具栏是范例——复杂度被折叠,而不是被删除。它同时兑现了「付出与回报相称」:一次点击,换一层能力。

组织界面的三把尺子

排序界面部件看三维:使用频率(一天数次的放触手可及,一天一两次的控制在一两次点击内)、转换程度(transformation:会让界面或文档突然大变的功能,藏深)、风险承担(risk:不可逆或后果危险的操作要更难触发,导弹得两个人在两间屋里同时转钥匙)。频率不是唯一标准,后两条专门用来兜住频率的盲区。

三把尺子里,频率是明面上的,转换程度和风险承担是暗处的。只按频率排界面,就会做出「常用功能很快、危险功能也很快」的产品。

图 10-1 用户能力分布,以及两端向中间的迁移
人数 新手 要范围与目标 很快升级,或直接离开 中级用户 人数最多,停留最久 要常用工具、提示与索引 专家 要高密度与快捷方式 久不用会退回中段 经验水平
原书 P222 图 10-1。曲线是快照,不是命运:新手向右走或离开,专家会因生疏退回,两端的净流向都是中段。
图 10-2 渐进式展开的四层,以及每层的点击成本
高频 · 0 点击一天用数次:工具条、主按钮、常用对象,位置固定、永远在场
中频 · 1 次点击一天一两次:扩展窗格、选项板;开关粘连,专家不必每次重开
低频重要 · 2–3 点击菜单、对话框、抽屉:可达但不挡路,永远不删
高风险 · 更难触发不可逆或会让界面大改:二次确认、长按、双人钥匙
原书 P225–P226。每一次点击都是一次付费,价格必须对得上收益;这也是「付出与回报相称」在界面上的算法。

原书金句

「没有人愿意永远当个新手。」

P223,设计原则;同页上文:「新手会很快成为中级用户,或者干脆放弃」

「用户只有获得充分的回报,才会付出相应的努力。」

P224,设计原则,为「付出与回报相称」定调

「将用户想象成为非常聪明但很忙碌的人。」

P227,设计原则,新手帮助的第一前提

两个最常见的误用。一是把「新手」当成目标:向导、夹子助手、首屏强制教程,做成固定不动的界面家具。作者的原话是「无论你提供什么样的额外帮助,它都不应该在界面中固定下来」(P227)——帮助一旦常驻,就从扶手变成了路障。二是把「渐进式展开」做成「藏功能」:开关没有提示、打开后不粘连、或干脆删掉低频功能。低频而有用的功能不能删(P226),只能藏——藏的前提是可达。

对 App-IPO:项目方第二次登录时只关心「验证过没过、财报季什么时候到期」,首屏就该是这两件事;新手导游只在首次出现、可关、不粘连。

11

编配与流

PDF P230–P246 | 原书 p202–218

流不是界面更酷,而是界面消失;编配就是把刺耳的音符拿掉。

为什么重要

上一章回答「为谁设计」,这一章回答「用户此刻处在什么状态」。作者把这件事叫作心理工效学(mental ergonomics):界面不只要好用,还要让注意力留在目标上,而不是留在界面上。他给出的十几条策略没有一条能单独成立,合起来却是一套验收标准——第 12 章的减负、第 15 章的反馈,都从这里长出来。

核心概念

流Flow

米哈伊·奇克森特米哈伊(Mihaly Csikszentmihalyi)命名的完全投入状态:对周边干扰视而不见,察觉不到时间流逝,带一点温和的快感。《人件》把它形容为「深层、几近冥想式的投入」。流状态的人最高效,所以界面的第一职责是不打断它。用户不会因为界面漂亮而进入流,只会因为界面消失而留在流里。

透明与编配Transparent / Orchestration

透明指交互机制消失,人直接面对目标:好小说让读者看见故事和人物,看不见写作技巧。编配取自韦氏「和谐的组织」,要求所有元素朝同一个目标使劲。它拒绝固定配方——「移动端菜单四个按钮好、六个太多」没有意义,因为没考虑用户此刻在做什么。反例是 Razr V3:电话本和日程表各用一套输入界面,像两个团队各写各的谱。

让用户下命令Command, Not Conversation

理想交互不是对话,是用工具:木匠不跟锤子讨论钉子,司机不跟汽车开恳谈会——踩油门、打方向盘,反馈从视野、仪表、风声和路面传来。软件却常反过来:弹窗指出你的不足,要求你回答。作者在 P234 画了一个「锤子错误」对话框,结论很干脆:责备不等于保护,机器可以挡住致命错误,但没有资格训人。选择也一样:工具栏给选择,确认框提问题。

无模态反馈Modeless Feedback

反馈要长在界面结构里,不打断当前动作:Word 状态栏的页码与字数、iOS 通知中心的横幅、战斗机的平视显示器(HUD)、Photoshop 窗口边缘的标尺。模态对话框则是最差的通报方式,它把程序锁进一个状态,用户必须先处理它才能继续。判断标准很简单:这条信息能不能在用户干活时被余光读到。常态更不该报告——连接成功、记录已保存,那些是机器的嗡嗡声。

可能性与概率Possibility vs Probability

逻辑学家看见「百万分之一为假」就判命题错误,用户看的是几乎必然为真。开发者把可能性当概率,于是每次关闭都问「是否保存更改」——作者说这是图形界面里最多余的对话框。更好的是先做「很可能是对的」第一步,再让用户微调,也就是请求原谅而不是许可。空白状态是最贵的提问:它把从零开始的成本全推给用户。

命令、设置与弹射座椅Ejection Seat

同一个功能,调用与配置(command / configuration)是两件事:打印是命令,纸张、份数、送纸器是设置。经验值是调用十次、设置一次,所以命令应当直接执行(沿用上次设置),设置藏进菜单;前者进工具栏,后者进配置界面。至于不可逆或会让界面大改的操作——弹射座椅(ejection seat)——要藏得更深:它必须存在,但绝不能被误触。

图 11-1 十六条策略按「心态 / 动作 / 反馈 / 节奏」分组
组原书策略验收问题
心态遵循心理模型 · 少即是多界面结构像用户对任务的想象吗?每个元素都在为同一个目标服务吗?
动作指示而非讨论 · 给选择不给提问 · 必要工具近在咫尺 · 区分命令与设置是用户发起、单击可达吗?常用动作是否零层可见?
反馈无模态反馈 · 反映对象与程序状态 · 避免不必要报告 · 上下文信息 · 防万一但看概率 · 避免空白状态信息能被余光读到吗?有没有为常态停下来?
节奏优化响应但容许延迟 · 动作与过渡 · 隐藏弹射座椅 · 毫不费力0.1 / 1 / 10 秒的线守住了吗?不可逆操作够难触发吗?
原书 P232–P246。四组不是分类学,而是排查顺序:先问心态对不对,再问动作顺不顺,再看反馈吵不吵,最后调节奏。
图 11-2 响应时间的四条线,以及动画的单独上限
0.1 秒内 · 即刻

用户感觉不到延迟,像直接用手搬动数据。悬停高亮、按下反馈必须落在这档。

1 秒左右 · 有响应

能察觉延迟,但思路没断。这也是动画过渡的上限:超过 1 秒就开始拖慢交互、打断流。

10 秒以内 · 会走神

明显变慢,注意力开始漂移;必须有进度条,并允许取消。

10 秒以上 · 离开

用户去拿咖啡或切到别的程序。任务应转到后台,并交待剩余时间与取消机制。

原书 P243–P245。四个阈值来自 1968 年以来的响应时间研究;动画的 1 秒上限与响应的 10 秒上限是两条不同的线。

原书金句

「不论界面多酷,越少越好。」

P231,设计原则;同页后文:「终极用户界面往往是没有界面」

「如果小说家小说写得好,读者能够清晰地看到故事和人物,而看不到作者的写作技巧。」

P231,透明(transparent)的定义

「请求原谅,而不是许可。」

P241,设计原则,针对「避免空白状态」

两个最常见的误用。一是把「流」当成动效:转场、视差、弹性动画一多,用户注意到的恰恰是界面本身。作者对动画的要求是短暂、有意义、不超过 1 秒,iOS 7 的视差效果就是他举的反面教材(P244)。二是把「少即是多」做成阉割:Razr V3 各团队各做一套界面,iPod Shuffle 用视觉简化换来了认知复杂(P233–P234)。少的是元素,不是能力,也不是可发现性。

对 App-IPO:项目方跑一次 zkTLS 验证要装插件、登录、等证明、上链,中间任何一次模态弹窗都在切断流;「证明生成中」应做成状态栏式无模态进度并允许离开,回来还能看到结果。

12

减少工作 消除负担

PDF P247–P268 | 原书 p219–240

用户为界面花的每一分力气,都该先被审问一句:它推进目标了吗?

为什么重要

上一章讲流,这一章讲流怎么被打断。视角切换很干脆:前面教界面该做什么,这里教界面不该逼用户做什么。尺子很硬——任何大任务里,只有一部分步骤直接推进目标,其余都是额外工作。第 13、14、15、21 章都要过它。

核心概念

目标导向任务与负担goal-directed task / excise

去办公室这趟,只有「开车」把人送到目的地:车库门是为车开的,等红灯来自外界。软件同理——保存、配网络、备份、找文件,都不推进目标,只是让工具能继续工作。判据不是难不难、步骤多不多,而是这一步是否直接实现目标。OCR 印作 exercise,通用拼写是 excise(切除)。

四类工作cognitive / memory / visual / motor work

用户要付四种成本:认知(理解行为、文本、结构)、记忆(命令、密码、对象位置)、视觉(从哪看起、怎么解码布局)、肢体(点击、拖动、切换输入模式)。这是成本账本,不是负担分类——任何负担最终都落进这四项。最容易漏记的是记忆:信息藏在上一屏,用户就得背下来。

导航负担navigational excise

导航的定义很宽:所有把用户带到界面新部分的动作,以及要求用户定位对象、工具、数据的动作。分四层——页面之间、窗格之间、工具与菜单之间、信息内部(滚动、链接、缩放)。它转移注意力、强迫换情境,窗口一多就有导航创伤。Photoshop 把颜料桶和渐变塞进同一工具位,两个都常用却要先展开。

拟物化负担skeuomorphic excise

把机械时代的形态原样搬上屏幕。地址簿:纸本按姓氏排,想按名字找人只能一页页翻;忠实拟物的数字版也不能按名字搜,还丢了折角与手写批注。拟物不必一律禁止——制表键功能相同,可以留;但用户一过新手期,打理隐喻本身就成负担。

模态负担modal excise

打断流的代价远大于打断本身:回到流里要重新热身。错误框、确认框、请求许可同属一族——程序把自己的问题转嫁给用户。Outlook 的规则冲突框是反面教材:检测到冲突,却不说哪条规则、哪条更新,只让人在保存与取消之间猜,且可能不可逆。原则:不要让用户请求许可;任何输出之处应允许输入。

样式负担style excise

视觉信息也要花力气:找到列表里那一项、判断从哪读起、分清哪些能点。过度样式化——花体字、无网格、装饰与导航同质——会抬高这笔成本。判断看场景:效率类应用里样式必须让信息更清楚;游戏、拼图这类娱乐产品,适量视觉负担本身就是乐趣。

图 12-1 四类负担:症状、用户实际在做什么、怎么消灭
负担类型典型症状用户实际在做什么消灭方法
导航负担页面、窗格、工具层层切换,回不去原处重建方向感,重读上一屏,管窗口减少去处;给导航标志与概览
拟物化负担屏幕画成实体物件,得先学会这个隐喻维护隐喻,而不是完成任务只保留功能真正等价的旧约定
模态负担错误框、确认框、请求许可打断手头工作猜程序意图,替程序承担不可逆用撤销替代确认;就地编辑;后台静默处理
样式负担装饰与控件同质,视线找不到落点分辨哪里能点、该从哪一行读起效率场景里,样式服从信息层级
原书 P248–P257。四者不是并列清单:导航最普遍,先动手;模态最破坏流,最该清零;拟物与样式要看情景,游戏里的视觉负担可以是乐趣。
图 12-2 通勤里的五组动作,只有一组推进目标
开车库门为车付账:门不开车出不去,但门不把人送到办公室
上车、启动、热车为车付账:热车让发动机顺畅,不让人更快到
倒车出库、关车库门为车付账:纯属为车善后,与「到办公室」无关
遇红灯停车为外界付账:不推进目标,但服务于「安全抵达」这个相关目标
驱车前往目标导向:唯一直接把人送到目的地的动作
原书 P248。数字产品被比作《星际迷航》的传送器:拨出坐标就到,没有车库、发动机、红绿灯。若照「实现模型」设计,产品看上去就像现实里的汽车。

负担取决于情景

同一个动作,对不同人可能是目标,也可能是负担。窗口管理:对必须并排比较两份数据的人物模型,分享屏幕是目标;对没有这需求的人,配置窗口就是纯负担。姿态也改账本——暂态应用(transient posture)不常用,占屏讲清楚不算负担;独占应用天天用,多一步都嫌烦。判据只有一条:与人物模型的目标对照。

消灭负担:六个可执行的动作

01减少要去的地方。

页面与视图控制在两三个,窗格够用即止(独占应用三个,网页两个导航区),控件按目标裁剪,滚动缩放交给用户自愿。页面与控件清单,标注各为哪个目标存在

02提供导航标志。

给持久对象(persistent objects):主窗口、菜单栏、工具栏、状态栏、导航栏。它们必须常在;别把「让工具栏消失」的控件放进工具栏。持久对象清单

03提供概览。

概览定位内容而非应用:缩略图加范围框、面包屑、注释滚动条(Word 滚屏显示页码与最近标题)。概览区要持久,内容随数据变。概览形态清单

04把控件映射到功能。

控件、被影响对象、预期结果要在空间或逻辑上对得上:灶台旋钮按灶眼排布是自然映射,「升序/降序」改「最近优先/最早优先」是逻辑映射。映射走查表

05避免层级。

用户的心理模型是单层分组(monocline grouping):一叠、一摞、一个抽屉,最多一层深。改为单层组织加搜索,而不是摆深树。单层分组的架构图

06不要复制机械时代的模型。

逐项问:数字版能不能更好?日历受纸张限制才一月一页,屏幕上本可连续滚动,网格高度也该可调。改了还得显著更好。新旧形态对照一页纸

原书金句

「用户界面中的负担是用户对产品不满的首要原因。」

P248,讲负担类型之前

「确定像这样的一种功能或者动作是否属于负担的唯一方式是与人物模型的目标做比较。」

P257,解释窗口管理为何因人而异

三个把负担当价值的冲动。一是把「功能齐全」当价值:每个功能都「也许有人用」,代价是所有人的导航成本。二是把系统状态当用户任务:同步中、正在保存、选同步策略,是程序自己的账。三是用流程弥补信息缺失:没说清规则冲突,就加一步确认。简化不等于删掉反馈与撤销。

对 Launchpad:用户来是为了「核验并发布」,不是为了配置核验口径——每让用户选一次链、填一次合约地址、确认一次同步策略,都是替系统付账。这些该做成带默认值的就地编辑。

13

隐喻、习惯用法及能供性

PDF P269–P288 | 原书 p241–260

界面不该照搬现实世界,而该教一套只需学一次的习惯用法。

为什么重要

第 7–12 章讲界面行为该守什么规矩,这一章回答更靠前的问题:这些规矩从哪来。答案是习惯用法,不是隐喻。全书后文的控件、手势、反馈、错误预防,都默认你已经接受两个前提:用户不想知道软件怎么运行;屏幕上每一块看起来能点的区域,都是你对用户做出的承诺。所以这是全书最像「设计宪法」的一章,值得逐字读,而不是只看那三个范式名词。

核心概念

实现中心范式(implementation-centric)

把软件内部的流程和数据结构直接摆上屏幕:一个功能一个按钮,一个代码模块一个对话框。它对开发者最省事——写完功能贴一块界面,出问题好排查——工程师也确实喜欢看见虚拟的齿轮和阀门。代价是把「理解机器」的成本转给用户,而用户只想成功完成任务。要特别防它的变体:组织结构中心(org-chart-centric)的网站按部门分标签页,用户得先搞懂你们公司怎么分工,才找得到信息。

隐喻范式与「全局隐喻」

隐喻范式(metaphoric)借真实世界经验在视觉和功能之间搭桥:剪刀代表剪切,垃圾篓代表删除。它比实现中心进步,但把界面和物理世界的机制捆死了,还依赖「用户与设计师有相同联想」——手机上一张飞机图,是查到达还是订机票?更危险的是全局隐喻(global metaphor):Magic Cap 把功能铺成街道与楼里的房间,进游戏室要沿街走,配另一项服务要退回街上。隐喻对新手友好,用户一升到中级就变成税。

习惯用法范式(idiomatic)

习惯用法不解释、不联想,只要求学一次:窗口、标题栏、关闭框、滚动条、超链接、下拉菜单、单选按钮,连鼠标本身都是学来的约定,没有一个「看一眼就懂」——斯科蒂对着鼠标说话那个电影桥段之所以好笑,就是因为它是真的。好消息是人脑极擅长记这类东西,一次就够;坏消息是不能省掉那一次。所以控件必须有标签或图标补语义,界面必须有提示把「可操作」说出来。

能供性(affordance)与手动能供性

诺曼的原定义里含「实际的属性」,作者主张删掉「实际的」:能供性是你以为对象能做什么,不是它实际能做什么。门边的按钮看起来百分之百是门铃,哪怕按下去掉进陷阱,它的能供性仍是门铃。手动能供性(manual affordance)则是对象形状对一双会抓握的手发出的邀请:看见手指大的凸起就想按,看见长圆的东西就想抓。那扇该推、却装了根该拉的金属杆的门,就是能供性压过标语的经典案例。

直接操作(direct manipulation)

施耐德曼 1974 年提出,三要素:数据对象的视觉呈现、作用在对象上的视觉与手势操作、动作的即刻可见结果。后两条都在说反馈,所以作者认为叫「视觉操控」更准确。拖动排序、把歌拖进播放列表(Sonos)、在 Snapseed 里捏合调滤镜都是好例子。但它并非万能:诺曼提醒第一人称的直接操作要求用户自带技能,遇到 CAD 这类复杂任务,强行直接操作反而做不好,要由应用补上引导、提示或自动化。

顺从(pliancy)与三类提示

顺从指对象对输入有没有反应:能按的按钮、能拖的卡片、能编辑的单元格都是顺从的。原则是「尽可能用视觉表达顺从」,三条路:静态提示(按钮的立体凸起)、动态提示(鼠标经过时翻滚 rollover,工具栏图标因此不必常驻按钮外观)、光标提示(拖窗口边缘变双箭头、Excel 列线可拖)。还有一条常被漏掉:顺从响应——按下去要凹、选中要整块高亮,它同时是取消机制的组成部分。触屏没有悬停,动态提示整条路直接作废。

图 13-1 三类界面范式的取舍
实现中心隐喻习惯用法
用户要懂什么软件内部怎么跑现实世界怎么用只需记住这个约定
学习成本高且前置低,但靠联想命中一次,之后近乎自动
何时崩功能一多就成迷宫规模变大、跨文化、抽象概念约定没被教、或提示缺失
典型场景企业、医疗、科学软件游戏、模拟器、iPad 合成器窗口、菜单、手势、表单
原书 P270–P277。结论不是「隐喻一律禁止」,而是默认走习惯用法,只在隐喻本身是体验核心时才用它。
图 13-2 交互词汇的倒金字塔
习惯用法领域任务:带标签按钮、字段、导航条、列表、对话框
组合原语拼出来:双击、拖动、滑动、捏合、控件对象
原语指向、单击、拖曳、按键(触屏:敲击与拖曳)
原书 P278–P279 图 13-5。图形界面之所以好学好记,不是因为「图形」,而是把命令行的无限字符集压缩成 3 个原子动作:指向、单击、拖动。

怎么用:搭一套自己的习惯用法

01先定原语,别先画界面。

列出这个产品允许的全部原子动作(点、长按、拖、滑、双指),越少越好,并写进设计规范。产出:交互原语表,一页纸。

02用原语拼组合词。

把「双击=打开」「拖=移动」「长按=唤出更多」这类组合固定下来,全产品只许一种含义,禁止同一手势两处两义。产出:手势—语义对照表。

03包装成领域习惯用法。

面向用户的任务定义控件:带标签的按钮、字段、导航条、列表、对话框,让「问题域的词汇」出现在界面上,而不是代码模块的词汇。产出:界面模式清单。

04补上「语义 + 顺从」两件事。

每个控件配标签或图标说明它做什么,再用静态/动态/光标三类提示说明它能被操作;按下必须有视觉响应。产出:控件注释规范 + 可点性走查表。

原书金句

「多数人并不想知道得太多,只想成功地使用产品。」

P270,设计原则,针对实现中心范式

「所有的习惯用法都需要学习,而好的习惯用法只需学习一次。」

P277,设计原则

「当我们在屏幕上渲染一个按钮时,就与用户建立了一个契约。」

P281,原文续:「用户按下按钮,按钮在视觉上就会发生变化……并将执行图例中确切说明的某些合理的工作。」

两个最常见的误用。一是把「直觉」当「免学习」:手势、拖拽、悬浮控件都是要教的,界面里没人教,用户就永远只会用最慢的那条路(第 16 章会讲这条路径怎么补)。二是扁平化时连能供性一起删掉:按钮只剩一行字、卡片没有边界、可点区域和装饰完全同质,用户无法判断哪里能点。更糟的是诱饵式(bait-and-switch)能供性——渲染成按钮却不像按钮那样动作,屏幕上「外观」与「功能」没有必然联系,用户一被愚弄就再也不信任何提示。

对 App-IPO:「验证徽章」「已通过 zkTLS 核验」这类元素必须做成可预期的习惯用法(点开有证据与口径说明),而不是装饰性的发光图形——徽章一旦不可点或点开是空页,毁掉的是整站提示系统的可信度。

14

重新思考数据输入、存储与检索

PDF P289–P314 | 原书 p261–286

让人像人一样输数据:错不是程序的错,但收拾错是程序的责任。

为什么重要

这一章是全书对「实现模型」最具体的一次清算:输入、保存、找文件这三件事,软件一直是按数据库和文件系统的需要设计的,然后要求人配合。作者给出的替代方案很硬:数据免疫而不是数据完整,审核而不是编辑,统一文件模型而不是内存/磁盘二元,属性检索而不是让你记路径。对我们这种要在 App 里收 zkTLS 核验数据、又要展示收入数字的产品,这一章几乎是操作手册。

核心概念

数据完整(data integrity)vs 数据免疫(data immunity)

数据完整像海关:任何数据进库前先严格检查,不合规就挡在门口,好处是库里的数据永远干净。代价是把数据库的需求排在用户需求前面,而且每一次输入都被同等怀疑。数据免疫换个思路:让程序自己扛住脏数据——用户输「nine」就当 9 算,输「TZ」又写了 Dallas 就知道该是 TX;算不了就去问别的模块、查历史记录;实在不行给数据加注释,留下完整说明。核心信条是:程序要相信用户输入的是他所希望的。

丢失数据与规避机制

缺一个字段不该让一切停下:汽车发现玻璃水不足不会锁死方向盘,程序也不该因为发票金额没填就禁止继续。真实的工作方式是先把手上有的录进去,回头补。提示要用丰富的无模态反馈(rich modeless feedback),而不是模态弹窗。更进一步是规避机制(avoidance mechanism):允许用户打破刻板规则(把单据提到队列顶部、暂停记录),但由计算机详细记录动作以便追责与恢复——「让用户做他想做的,但把动作记全」。

审核,不要编辑(audit, don't edit)

程序必须假装用户永远正确,但不必假装用户不会错。两者的差别在于:程序可以清楚地指出可疑之处,却不能替用户改,也不能停下来。范式是里程表——超速时安静地报数,而不是切断燃油。所以 Word 的实时拼写检查是正面教材(红色波浪线 + 右键备选,不改、不拦),自动更正和自动格式化是反面教材(悄悄改了,没有审核轨迹,撤销路径还不直观)。判断标准只有一条:用户能不能看见、能不能撤销。

统一文件模型(unified file model)

用户只有一个文档,不是「内存一份、磁盘一份」。所以「保存更改?」这个对话框该被消灭——它把两个版本的存在暴露给用户,还假设保存与不保存概率相同。替代方案是一组按用户目标命名的动作:自动保存、创建副本、重命名/移动、指定文档格式(放属性里,不放保存里)、还原更改、放弃所有更改、创建版本、传递状态。文件菜单也不必叫「文件」,可以叫「表单」「发票」或「文档」,只有真正以文件为对象的 shell 和工具才该叫文件。

存储系统 vs 检索系统

图书馆是这个区分的最好例子:书架和索书号是存储系统,卡片索引是检索系统,索书号是两者之间的桥。物理世界靠位置检索(记住放哪了)和索引检索(杜威十进制 + 作者/主题/标题三套卡片)。数字世界的尴尬在于:我们只交付了存储系统,却把它叫作检索系统——找文件必须记得文件名和路径,CPU 闲着,记忆扛下 100%。第三种方式是基于属性的检索(attribute-based):按上次编辑时间、参与人、内容、打印记录找东西,Spotlight 是范例。

数字汤与受限自然语言输出

关系数据库要求先定义记录类型、再遵守定义,可人既说不清将来要什么,也守不住定义:一封邮件同时属于 Jerry、Sally、Ajax 和董事会,数据库只允许它属于一个类型。数字汤(digital soup)把存储和检索拆开:汤接受任何东西并返回一个令牌,索引则是「键 → 令牌」的副本,而且可以建无限多个索引。前端不该让用户写 SQL 或自然语言,而该用受限自然语言输出(constrained natural language output):一排下拉控件连起来读着像一句英语,用户只在有限选项里选,永远得到合法查询。

图 14-1 两种数据策略的代价对照
数据完整数据免疫
检查时机入库前,每个字段使用前,按需要
遇到坏数据拦下,弹窗要求改正尽力解释,解释不了就标注
用户感受被当作嫌疑人被当作专家
程序成本低(写规则)高(写容错与追溯)
适合强合规、后果不可逆日常录入、协作、面向客户的表单
原书 P290–P293。判断点不是「哪种更严谨」,而是「这条数据错了,多久能被发现、能不能撤回」。
图 14-2 数字汤:把存储和检索拆开
01任意记录邮件/文档/发票,不预设类型
→
02数字汤全部收下,返回令牌
→
03索引们Jerry / Sally / Ajax 各一条键→令牌
→
04查询按属性查,而不是按路径找
原书 P312–P313。索引可以无限加、随时改,这是关系数据库的固定字段做不到的;标签系统(folksonomy)就是人工补上的那一层索引。

怎么用:把输入、保存、检索改成人的形状

01逐个字段问「缺了会死吗」。

把必填项分成硬约束(合规、资金、不可逆)与软提示(业务上想要)。软的绝不阻塞提交,改成状态提示与待办标记。产出:字段分级表。

02把自由文本换成有界控件。

零件号用提前键入(type-ahead)或下拉;地址、电话、金额用能解析的智能字段,接受连字符、中文数字、前后空格。产出:控件选型表。

03错误反馈全部去模态。

高亮可疑字段、在旁给出建议值,让用户自己决定;不弹对话框、不丢焦点、不丢已填内容。产出:错误文案与状态样式规范。

04给每个动作留审核轨迹。

记录谁在何时改了什么,提供逐条可撤销;跨会话的改动用「版本」而不是「另存为」来管理。产出:操作日志与撤销范围说明。

05消灭「保存更改?」。

自动保存(在用户停手几秒后写盘或入后台),菜单只保留用户目标:重命名、创建副本、放弃更改、还原版本。产出:文档菜单与自动保存策略。

原书金句

「用户输入不正确的数据时,数据往往接近正确。程序应该提供尽可能多的帮助来纠正。」

P291

「出错可能不是程序的问题,但是程序的责任。」

P293,设计原则

「我们把存储系统交给用户,称之『检索系统』。」

P308,原文续:「……需要找到磁盘上的某个文件,就必须知道文件名和存储位置。」

两个坑。一是把「数据洁净」当成产品原则:每个字段都配一条红字和一次弹窗,用户填到一半被「数据警察」叫停,最后要么放弃、要么学会乱填(第 8 章讲过的礼貌问题)。二是静默自动更正:金额、编号、日期被程序「顺手」格式化,却没有可见标记和撤销入口——这正是 Word 自动格式化被作者点名的原因。凡是程序替用户改了东西,必须留下审核轨迹。

对 App-IPO:收入验证表单要允许「先存草稿、后补 zkTLS 凭证」,凭证缺失时用无模态状态条提示而不是拦住发币流程——把「数据完整」的执念换成「申请可以带着缺口继续走」。

15

防止错误 通知决定

PDF P315–P331 | 原书 p287–303

防不住错时别弹窗骂人:用看得见的反馈和撤得回的路径替用户兜底。

为什么重要

第 7–14 章谈界面怎么表现、数据怎么进出;这一章处理「事情没按预期发生」的那一刻。作者把三条策略排了序:先用富视觉非模态反馈把状态摊在界面上,再用撤销把不可逆变成可逆,最后才轮到报错对话框。这个顺序本身就是判断标准——一个产品弹窗越多,说明前两层做得越差。

核心概念

富视觉非模态反馈(rich visual modeless feedback,RVMF)

三个字各有含义:「富」是信息足够深,能看出进程状态或对象属性;「视觉」是用会动的像素而不是文字;「非模态」是不切换模式、不点确定就能看见 P316。Cooper 为长期医疗系统做的病房表格是范例:颜色区分男女与空房,数字是空床数,小方块表示共用浴室,黑三角是健康状况,护士扫一眼就知道整层楼。代价是它不适用于初学者——含义要靠时间学会,所以必须留一条看详情的路。

正面听觉反馈(positive auditory feedback)

多数软件把声音用反了:只在出错时哔一声,于是声音等于当众宣判失败。作者主张倒过来——成功时给细微而连贯的正面反馈,失败时保持沉默。键盘的咔哒声就是最好的例子:某次按键没声音,你立刻知道没按上;iPad 触摸键盘默认发声同理。拖拽成功有一声轻响,拖到无效区域则无声、对象弹回原位。声音要与情境匹配,且不能盖过用户正在听的音乐。

撤销要贴近心理模型(undo)

计算机不犯错,只有人才犯错,所以撤销是人专用的功能;也因此它最不该按实现模型建模,而该贴近用户的心理模型 P321。用户并不认为自己会犯错,界面就不该让他觉得被指责。撤销真正的价值不是纠错,而是让人敢探索:它是通向洞口的绳梯、是灾难发生前想不起来的保险单。设计目标因此变成「支持常用工具,并且绝不暗示用户失败了」。

撤销的变体:单次、多次、分组、分类(single / multiple / grouped / category-specific undo)

单次撤销只撤最近一步,再撤一次等于恢复;它简单到几乎不会用错,但被下一次操作覆盖后就救不回更早的东西——删了 6 段又删 1 个词,撤销只还你那个词。多次撤销按后进先出(LIFO)逆向回放,能找回 6 段,代价是先撤掉中间那些无关操作。分组多次撤销(Word)把动作列成表,但选中第 5 项会把前 4 项一起撤掉。分类撤销按类型走:退格键只撤数据、无视格式修改,是最好用的特例 P327。此外,撤销应当是整个应用通用的功能:直接操作与对话框里的动作都能撤。

已删除数据缓冲区与版本控制(deleted-data buffer / version control)

用户的真实诉求是「把我删掉的东西还给我」,不是「按倒序撤销五步」,所以该有仓库而不是栈:所有被删除的文本和数据进入独立缓冲区,带时间戳与文档名,随时打开、按内容取回。版本控制(version control)是同一思路的粗粒度版本——整篇快照、可对比、可还原,还原前把当前状态另存为一个版本。两者都绕开了「必须记得中间步骤」这个实现模型的负担。

假设分析:对比与预览(what-if)

撤销和恢复在对比场景里其实是同一个功能:一个「应用更改」,一个「不要应用更改」P331。电视遥控器的「返回」键用一个命令做到了;Gmail 在发送后留几秒再真正发出,把不可逆变成可逆;照片应用用缩略图并排预览不同参数的效果。共同点是让用户在确认之前看到结果,而不是在结果之后提供撤销——这才是「防错优先于报错」的正解。

图 15-1 反馈方式选择矩阵
即时·非模态累积·非模态模态(打断)
视觉拖拽时高亮落点、下载进度环、输入框实时校验;零成本,首选病房表格、版本历史、已删除缓冲区;要看一眼才懂,适合反复回看的状态错误对话框、确认框;只留给不可逆且后果严重的一步
听觉键盘咔哒声、保存成功的轻响;用户眼不离屏时的确认连续提示音会变成噪音,几乎不成立;最多做一次汇总提示错误哔声、系统警报;只在必须立刻中止操作时使用
原书 P316–P320。选择顺序是:能不打断就不打断;必须打断才用模态;模态里能用视觉就不加声音。
图 15-2 撤销能力的五级阶梯
单次撤销撤最近一步,再撤一次即恢复;够用,但会被下一次操作覆盖
多次撤销LIFO 逆向历史;找得回早先操作,但要先撤掉中间无关步骤
分组多次撤销动作列表可选,但选第 N 项就撤到第 N 项,前 N−1 项一起走
分类撤销按类型撤:退格键只撤数据,格式撤销、绘图工具的颜料/变换/剪切各走各的
缓冲区 + 版本按内容随机取回,或整篇快照还原;彻底脱离顺序
原书 P323–P330。层级越往下越贵,但用户真正想要的是最后一行:按内容找回,而不是按顺序回放。

原书金句

「『非模态』在于信息能及时轻松地显示出来,即不需要用户做特殊动作或者转换模式,就能看到和理解这些反馈。」

P316,富视觉非模态反馈的定义

「在应用的所有功能中,撤销最不应该按照其构造方法(即模型)来建模,而最应该贴近用户的心理模型。」

P321

「正面听觉反馈真正的价值,在于没有反馈就已经极其有效地指出了问题。」

P320

两个坑一是把非模态反馈做成装饰:图标会动、颜色好看,但没告诉用户任何可行动的信息,也没有「怎么看详情」的入口,用户学不会就把它当背景。二是撤销按实现模型做:保存文件后清空撤销缓冲、嵌入对象各撤各的、单次撤销被无关点击冲掉——每一个都在告诉用户「你的历史不值钱」。

对 Launchpad:发币前的最后一步不该是「确认弹窗」,而该是并排预览(费用、解锁曲线、接收地址)加上发送后几秒可撤回的窗口——把不可逆操作改成可逆,比把确认文案写得更吓人有用。

16

为不同的需求而设计

PDF P332–P352 | 原书 p304–324

新手要看得见,老手要够快:用命令模态分层,而不是把帮助文档写长。

为什么重要

第 15 章管「出错那一刻」,这一章管「人跟人不一样」。人物模型解决目标差异,这里解决易学性(learnability)与熟练度差异:同一个目标,新手要教学式命令,中级用户要直接命令,专家要隐形命令。三个杠杆是命令模态、记忆矢量、有效功能工作集;后半章再扩展到帮助、可定制性、本地化与无障碍——本质都是同一件事:别假设用户和你一样。

核心概念

命令模态(command modality)

命令模态是用户把指令发给应用的具体方式:菜单、工具栏、快捷键、手势、直接操作柄都算 P333。按学习方式分三层:教学式模态(pedagogic modality)用文字讲清自己做什么,菜单是代表;直接命令(immediate command)跳过中间步骤,滑块、拖放、按钮属此类;隐形模态(invisible modality)不显示在界面上,靠记忆,快捷键与手势是代表。重要功能配多重命令模态,让不同水平的人各走各的路。

记忆矢量与有效功能工作集(memorization vector / working set)

诺曼把信息分两类:挂在环境里的现实中的信息可靠但慢;记在脑子里的头脑中的信息快但会忘。教学式靠前者,隐形靠后者。于是有了一个任务:给每条教学式命令配一条通往直接命令的路,这叫记忆矢量。最差是只在文档里提一句,最好是长在界面上——菜单右侧的 Ctrl+S、按 Alt 浮出的字母、工具提示。用户最终记住的那组常用命令就是有效功能工作集,它应当全部走直接模态。

上下文帮助:导览教程与覆盖层教程(guided tour / overlay)

帮助要在需要的位置出现,而不是让用户中断任务翻文档。移动端最有效的是两种首次运行模式:导览教程用 5–7 屏卡片按顺序讲核心功能,每屏都要有「跳过」,结尾要能重新启动;覆盖层教程在真实界面上盖一层箭头与说明;库与模板也是辅助界面,给半成品而不是空白。桌面端的对应物是工具提示与覆盖式工具提示(tooltip overlay):后者一次显示全部标注、模态呈现,适合复杂工具的备忘单,不是欢迎页。

传统在线帮助与向导的边界(full-text search / wizard)

参考文档仍需要,全文搜索比印刷手册快,但有上限:只能搜到帮助文本自己的措辞,用户想的是「怎么把单元格变黑」,文档写的是「设置 100% 阴影」。所以索引不能省:它比正文更容易建立同义词映射 P344;常被漏掉的还有概述——讲清适用范围、代价、与同类功能的差别。向导只在硬件配置、注册激活、问卷这类流程确定的场合合适;拿它包装实现模型,只是把复杂度往后推。

个性化、配置与特质模态(personalization / configuration / idiosyncratically modal)

可定制性(customizability)分三件事:个性化是装饰持久对象——换颜色、换字体,不动结构;它必须好撤销。配置是移动、添加、删除持久对象——重排工具栏、改菜单位置,会改变导航,更适合熟练用户。特质模态指用户偏好分成两派、没有中间地带:菜单派与工具栏派。答案不是选一边,而是两个都给。

本地化、全球化与无障碍(localization / globalization / accessibility)

本地化是按语言文化翻译,全球化是让产品天生适配多种语言文化。图标、手势这类视觉习惯用法全球化成本低,但要确认符号在别处没有别的意思;菜单、标签、工具提示必须整体翻译,并为德语长词、日期与小数点写法留余量。

无障碍性(accessibility)是同一逻辑的极端情形:让有认知、感官或运动障碍的人完成同样的事——能感知信息、操控控件、导航且知道自己在哪。做法是建无障碍人物模型(accessibility persona),守住 10 条方针里最硬的几条:不覆盖系统设置、支持标准键盘访问、对比度不低于 80%、不用每秒两次以上的闪烁。

图 16-1 帮助的五个层级
即时提示字段内提示、工具提示、覆盖式工具提示;回答「这是什么」,成本最低
上下文帮助导览教程、覆盖层教程、空状态内容提示;首次运行 5–7 屏,可跳过、可重启
辅助界面模板库、形状库、智能默认;让用户从半成品开始,而不是面对空白
文档全文搜索 + 索引 + 概述 + 应用内用户指南;回答「为什么」和「还有什么用法」
社区论坛、视频教程、用户群;接住官方文档覆盖不到的长尾问题
原书 P337–P345。层级越低,建设成本越高、被用到的频率越低;先做上面两层,别指望一份大文档补所有洞。
图 16-2 三种命令模态的取舍
教学式直接隐形
靠什么学会文字与结构,看一眼就懂看到就能试,试了就会必须记住,界面很少提示
上手速度最快中最慢,且依赖他人告知
熟练后效率低,每次都要找高最高,手不离键盘
占屏幕空间多中无
移动端几乎放不下主力主要靠手势与首次引导
典型例子菜单、对话框按钮、滑块、拖放快捷键、手势
原书 P333–P336。三者不是替代关系:教学式负责被看见,直接命令负责被使用,隐形命令负责被练熟;缺一层,用户就卡在那一层。

原书金句

「界面上显示视觉符号构成的记忆矢量是最有效的方法,但是整个行业尚未大力挖掘。」

P336

「一片空白让多数人害怕,如果用户不想处理空白文档,就别让他们面对。」

P340,设计原则

「向导给了开发者和设计师许可,把原始实现模型界面放到复杂的特性中,还若无其事地保证:『我们会用向导把它们变简单』。」

P342

两个坑一是把易学性等同于加帮助:产品难学就补一份更长的文档、再加一个首次引导,结果是用户先被教程挡一次、再被文档骗一次——真正该做的是给高频功能补直接命令。二是拿「高级用户」当借口砍掉可发现性:只留快捷键和手势,界面上一句提示都不给,专家用得很爽,新用户永远进不来。

对 Launchpad:发币流程要同时给三条路——新手走模板与预设,中级用户走可视化参数面板,老手走可保存的配置与批量操作;三层都要有,别让所有人挤在同一条表单里。

17

整合视觉设计

PDF P353–P378 | 原书 p325–350

视觉设计不是把界面画好看,而是用属性差异替用户回答「先看什么、什么相关」。

为什么重要

第 5 章把视觉设计排在框架之后,这一章才交代它到底做什么。交互设计决定行为与内容,视觉设计(visual design)决定这些行为能不能被看见、被看懂;作者称之为「清晰沟通」,而不是美化。全书讲到这里,控件、层级、品牌、标准汇到同一张屏幕上。对产品负责人,这一章给的是可验收的词汇:不说「不好看」,而说「哪两个元素在抢注意力」「这条路径断在哪」。

核心概念

视觉艺术与视觉设计visual art / visual design

视觉艺术(visual art)与视觉设计共用媒介,目的相反:艺术家把限制减到最少以追求独特,设计师把限制当作给定条件去解决沟通问题。米莱与萨诺的定义值得记住——设计是发现最适合传达某个具体信息的呈现方式。所以「我觉得好看」不是论据,「用户先看见结论」才是。作者不排除美学,只是把它放进目标导向的框架:先有用户体验与商业目标,再谈品牌和情感。

视觉元素是一套变量visual interface elements

视觉界面设计(visual interface design)里,元素本身不携带含义,属性才携带:形状、大小、颜色、方向、纹理、位置,加上文字与版面、信息层级、随时间变化的动作。要分清变量类型:大小、色值、位置是有序且可量化的(ordered / quantitative),用户会自动按它们排序,适合表达层级;色调(hue)不是有序变量,只适合分类和联想,用它排序一定出错。形状要更高注意力才能分辨,是识别的好线索,却不是抓注意的好工具。

视觉层级与视觉关系visual hierarchy

用户先问「什么最重要」,再问「什么和什么有关」。层级靠属性差异造:重要的更大、对比更强、更靠上,次要的降饱和、降对比。作者给了一条反直觉的建议:两个元素抢注意力时,调低不重要的那个,而不是调高重要的——一屏都是红色粗体,等于没有重点。关系靠分组,相邻即相关,间距比边框有效(按钮间距 4 像素、组间距 8 像素)。验收工具是眯眼测试(squint test)。

网格与逻辑路径grid system

网格把屏幕切成区域,用原子网格单位(atomic grid unit)约束一切间距:单位取 4 像素,所有间距就都是 4 的倍数。比例用黄金分割、√2 或 4:3 都行,真正的要求是「明确」——差不多正方形不行,要精确到二分之一、三分之一。好处有三:可用性(标题永远在同一位置)、秩序感、返工少。布局还要造一条符合阅读习惯的逻辑路径(logical path),并用不对称平衡给出视觉入口。

信息设计不是配图information design

塔夫特的标准是「把清晰的思考视觉化」。七条里最常被忽略的是「在相邻空间显示,而不是按时间堆积」:叠着比较要靠短暂记忆,并排比较靠眼睛。也别因为技术上做得到就显示,坏数据毁掉的是信任。「可量化就量化」不是废话:图形给趋势,数字给决策,两者要同时在场。界面设计管「这块屏幕怎么用」,信息设计管「这些数字说明什么」。

一致性与标准化consistency & standardization

一致性是手段不是目的:它降低学习与支持成本。风险有两层:按标准造出的产品不可能优于标准本身;多数标准只管语法(外观与感觉),不管行为与信息结构——有《芝加哥格式手册》也写不出好小说。所以标准更像指南与经验法则,而非法律;问题不是「要不要遵守」,而是「什么时候打破」:目标用户试用后多数认为明显更好,才算充分理由,改动尽量兼容标准。

同一个「核验结果页」的两种排法。左列不是丑,是七个块音量相同;右列没有新增功能,只改了大小、颜色、位置与留白。

图 17-1 同一张核验结果页:层级改造前后

改造前 · 七个块音量相同

  • 标题 14px、正文 13px:1 像素的字号差,视线没有落点
  • 结论与免责声明同为 40% 灰:重要信息被稀释
  • 七个区块等宽、等距 24px:分组消失,只能逐个读
  • 主按钮与「取消」同为描边样式:动作没有主次
  • 首屏先放品牌大图,结论在第二屏:第一眼看到的是装饰

阅读顺序:标题 → 大图 → 逐块扫过 → 找不到结论 → 回视。两次以上的回视,就是层级失败的证据。

改造后 · 一条结论到动作的路径

  • 结论 28px、正文 14px:2 倍反差,第一眼落在结论
  • 结论用高对比深色,次要信息降到 60% 灰
  • 块间距 32px、块内 8px:分组靠留白,不靠边框
  • 主按钮实心、次按钮纯文字:一屏只有一个主操作
  • 证据紧跟结论,口径与免责收进页脚

阅读顺序:结论 → 证据 → 时间与口径 → 主操作。眼动路径与任务顺序一致,用户不用回头。

01结论28px,高对比
→
02证据紧跟结论,缩进对齐
→
03口径60% 灰,页脚
→
04动作唯一的实心按钮
P358–P360。两列是同一个页面:没有新增功能,只有属性、顺序与留白的重新分配。注意右列是「调低次要信息」换来的层级,不是把所有东西放大。

十个元素,每个配一句判断:它让用户读出什么,用错又要付什么代价。这是排查表,不是名词表。

图 17-2 视觉元素的判断表
元素它让用户读出什么用错时的代价
情景(context)同一套配色,在强光下和暗房里读法不同;先定场景,再定参数办公室调好的灰字,走到户外等于隐形
形状(shape)轮廓是「这是什么」的第一线索,但分辨形状要更高的注意力想靠形状抓注意,用户得先停下来看
大小(size)有序且可量化,用户自动读成重要性排序14px 与 13px 的差别,等于没有差别
颜色(color)色值(value)对比最快被察觉、且有序;色调(hue)只适合分类;饱和度(saturation)量化但易吵闹拿色调排层级,或让高饱和铺满全屏,顺序与重点一起消失
方向(direction)能传达朝向,但小尺寸难辨,只宜做次要向量让一个箭头独自承担关键信息
纹理(texture)主要是能供性(affordance)信号:褶皱可拖、斜面可按扁平化把能供性一起删掉,可点与不可点同脸
位置(position)有序可量化,借阅读顺序与空间关系暗示逻辑不相关的东西放得太近,被读成一组
文字与版面(type & layout)字形是识别单位;全大写难读;正文对比度约 80%、字号不低于 10px10px 全大写小字,读起来像噪音
信息层级(hierarchy)属性差异堆出来的分层结果,决定解码顺序层级不明显,用户只能逐条读
动作与时间(motion)确认命令、指示去向、缓和模式切换没有信息量的动画,只增加等待
P354–P358。表里没有「留白」:留白不是元素,是位置与间距的结果,它决定分组,也决定视线在哪里停顿。

两套原则回答两个不同问题:界面原则约束一块屏幕怎么被使用,信息原则约束一张图表怎么被读懂。

图 17-3 界面八条与信息七条

视觉界面设计 · 八条

传达风格与品牌:排版、色盘、图标兑现品牌承诺,但品牌不压过用户目标。

厘清视觉层级:最重要的更大、更强、更靠上,次要的往后退。

每层提供结构与流:分组、窗格、屏幕逐层对齐,用户不必重新找位置。

告诉用户能做什么:用能供性、图标与结果预览,而不是只写说明。

响应命令:0.1 秒即时;0.1–1 秒给微线索;10 秒给进度与估计;更久要解释。

把注意力引到重要事件:用对比,不用闪烁;信号强度要配得上品牌语气。

最小化视觉工作量:去掉装饰、多余 3D、过重分隔线、拥挤与过多颜色。

保持简单:一两个字体、少量字号、低饱和为主,少量高对比做强调。

视觉信息设计 · 七条

加强视觉对比:给前后、A/B、同类之间一个可比的参照。

显示因果关系:把「因为」和「所以」放进同一屏,用非模态反馈。

显示多个变量:相关变量同时在场,允许用户开关。

整合文本、图形与数据:标签贴着数据,别让眼睛在图例间往返。

保证质量、相关性与完整性:做得到不等于该显示,坏数据毁信任。

相邻空间而非时间堆积:并排比较,不靠短暂记忆。

可量化就量化:图形给趋势,数字给决策,两者同时在场。

P358–P369、P370–P372。共同点只有一条:减少用户为看懂而做的功。

八条里最硬的是响应时间:0.1 秒内算即时,0.1–1 秒要给微线索,10 秒要给进度和估计,更久必须解释原因并允许转后台。这不是偏好,是用户判断「系统是否收到」的阈值。

标准管语法,设计语言(design language)管气质。应用程序之间的一致性尤其棘手:PowerPoint 照搬 Word 的菜单结构,反而偏离了演示文稿的心理模型。风格指南(style guide)与设计语言也不是同义词:有指南不等于有语言;Metro 跨三块屏幕成立,是因为每个决策互相配合,而不是同一张色值表。

原书金句

「设计关注的是发现最适于传达某些具体信息的呈现方式。」

P353,引自米莱与萨诺《设计视觉界面》

「删减东西,直到破坏了设计为止,再把最后去掉的东西加上。」

P369,设计原则

「遵守标准,除非有极好的其他选择。」

P375,设计原则

两个坑。一是把层级做成「所有东西都重要」:每个模块都加粗、加色、加边框,最后只能靠红点喊人;用户对持续刺激会脱敏,真出事时反而没人看。二是把标准当免罪符:只对语法不对行为,界面看起来像 macOS,操作却不符合任何人的心理模型——标准不会替你决定信息结构。

对 Launchpad:项目页的验证徽章、ARR、倒计时、风险披露天然在抢注意力。只让「验证状态 + 已验证 ARR」占最高层级,清算价口径其次,风险披露降级但不隐藏——让视觉顺序等于决策顺序。

Part III · 第 18–21 章

交互细节

落到具体平台:桌面窗口与菜单、移动手势与导航、网页寻路、控件与对话框。这部分不是让你背控件名,而是建立「什么场景该承诺什么行为」的选型能力。

核心产出:窗口/菜单规范 · 手势语义 · 寻路模型 · 控件决策树
18

为桌面应用而设计

PDF P379–P441 | 原书 p351–413

桌面设计的胜负手不是控件,而是窗口、菜单、工具栏三者的分工。

为什么重要

第 9 章提出「姿态」(posture),这一章把它落到桌面:独占式(sovereign)应用该长什么样。作者不谈像素和皮肤,只分配三件东西——窗口容纳什么、菜单教什么、工具栏替谁省事。这是平台篇最具体的一章,也最容易抄成控件清单:习惯用法背一遍没有用,要带走的是预算意识,每多一个窗口、一个菜单项、一个按钮,都得有人付账。

核心概念

主窗口(primary window)与「多余的房间」

一个应用=一个主窗口+若干辅窗口(secondary window)。主窗口装内容,切成内容窗格(content pane)与索引窗格(index pane);辅窗口只放不常用的属性。作者把应用比作房子:判断标准不是「功能有没有地方放」,而是「用户有没有理由走进去」,没理由的房间就是窗口污染(window pollution)。Photoshop 调亮度要另开房间,Lightroom 放回主窗口右侧,差别在房间数量。

窗口状态:最小化、最大化、多元(pluralized)

主窗口只有三种状态,第三种被两家厂商回避:系统菜单叫还原,作者叫多元(pluralized)。规则很硬:独占式应用正常就是最大化,只有临时切换或跨程序拖放才回到多元;计算器、即时通信这类暂时式(transient)应用才适合多元。层叠(cascading)窗口模仿办公桌,没有任务栏、虚拟桌面(virtual desktop)辅助时,几个像素的误点就能让窗口「消失」,用户于是重复启动同一个程序。

多文档界面 vs 单文档界面(MDI / SDI)

MDI 在一个应用里开多个文档窗口,省内存省 CPU;SDI 一个应用一个文档,切换交给系统。MDI 的坑是「窗口中的窗口」:文档窗口一最大化,老问题就在容器里重演,用户被迫管理大窗口里的小窗口,纯属额外工作;替代品是标签(tab)或可平铺窗格。SDI 也不是万能药——采购员核对发票时,在十几个实例间切换同样难受。

菜单:先教,再命令

菜单最被低估的职能是教:新用户靠它知道软件能做什么。菜单项不能精简成「打开…」,要写「打开…文件」;常用命令必须能从菜单找到。三个记号各司其职:禁用(变灰)说明命令在当前状态不适用,本身就在教人何时能用;复选标记(checkmark)同时给出控制与状态,远胜滚翻式菜单项(flip-flop)——「显示工具栏」到底在陈述现状还是下达命令?菜单图标的价值不只表意,更在与工具栏共用同一符号。

工具栏、工具板、侧栏(toolbar / tool palette / sidebar)

工具栏是微软为治菜单「不好发现、执行繁琐」发明的非模态容器:常驻,一次单击完成。菜单负责教与全量,工具栏负责高频;它比非模态对话框强在不遮挡工作,可停靠(docking)。图标按钮不负责表意,只负责可辨识,语义交给工具提示(tooltip,悬停约 1 秒)。工具板是互斥的模态工具,超过 5 个难管。侧栏替掉几十个对话框。情境工具栏(contextual toolbar)把图标送到光标旁;彩条(ribbon)是带标签的菜单与工具栏混合体;可定制的工具栏要留「恢复默认」。

快捷键与级联菜单(accelerator / cascading menu)

快捷键(accelerator)要遵循标准、自己每天用、把它标出来:组合键写在菜单项右侧,写进手册等于没写。给谁配快捷键靠「验伤分类」(triage):人人天天用的必须有,人人都不常用的坚决不给,中间那组把好按的留给最常用。助记符(mnemonic)不是可选项,文本型应用尤其要全。级联菜单(cascading menu)逼鼠标走迷宫,能省则省;扁平的单层分组(monocline grouping)更好找。

指针与直接操作

鼠标的人体工学只有一条分界线:目标近,手掌根贴桌用精细运动(fine motor);目标远,抬臂用粗略运动(coarse motor)。滚动条把一次滚屏拆成三次切换,滚轮就是解药。原则是同时使用的东西放在一起。

光标(cursor)靠一个像素的热点(hotspot)指向,按住元键让它变形是最便宜的提示。选择先于命令,即对象-动词次序(object-verb ordering):先选对象,界面才亮出合法命令;选中状态必须醒目,不能只靠颜色。

拖放(drag-and-drop)成败在四个提示:源对象轮廓、拖放候选对象(drop candidate)自己高亮、插入目标(insertion target)、屏幕外自动滚屏(auto-scrolling);选择与拖动共用一次按下,靠 3 像素阈值去颤动(debounce)。2D 只有移动、缩放、变形、连接四个动作,控制柄(handle)兼任选中标记;3D 麻烦在投影没有视差,难在「选取问题」(picking problem)。

窗口解剖与分工

主窗口拆开看,每个部件各回答一个问题:我在哪、能做什么、常做什么。

图 18-1 桌面主窗口的解剖:每一层回答一个不同的问题
标题栏拖动改位置,关闭/最小化/最大化;受范提示只靠亮度差异,纯粹是习惯用法
菜单栏全量命令、详细说明、快捷键;禁用、复选、图标三种记号都在这里教人
工具栏熟练者的高频命令;图标可辨识即可,语义由工具提示补;禁用要变灰,不要消失
工具板互斥的模态工具,一次只有一个生效;靠光标形状说明当前模式
索引窗格导航与选取对象;选中的对象送进内容窗格,或直接拖进去
内容窗格主工作区,直接操作发生的地方;一个应用通常只有一个
侧栏随选中对象变化的属性区,替代对话框,不遮挡内容
状态栏常驻的尺度与状态反馈:选中数、缩放、坐标,全部非模态
结构见原书 P380–P382,行为要求散在 P388–P406。判断一个部件该不该存在只问一句:它是否让用户少走一趟——少开一扇门、少找一次命令、少记一个位置。状态栏非本章重点,按第 15 章的非模态反馈原则补入。

三个容器各有各的账:菜单赔空间换完整,工具栏赔可辨识度换速度,侧栏赔宽度换「不离开当前对象」。

图 18-2 菜单、工具栏、侧栏的分工
菜单工具栏侧栏
服务谁新手与生疏用户永久中间用户正在调参的用户
何时在场点开才出现,用完收回常驻,移动加单击一次常驻,随选中对象变化
装什么全量命令、说明、快捷键、禁用态最常用命令的图标与状态当前对象的属性与情境控件
屏幕代价最小一行图标,靠工具提示省字占一侧,但不遮工作区
典型失败太精简,教不了人;级联太深当成菜单用,图标堆成墙退化成第二个对话框
原书 P391–P405。三者不是新旧替代关系:菜单回答「有什么」,工具栏回答「常用什么」,侧栏回答「这个对象现在是什么」。同一功能换容器,学的成本完全不一样。

原书金句

「对话框是一个房间,去之前要有个好理由。」

P388,设计原则,针对窗口污染

「用菜单来提供一条学习的途径。」

P392,设计原则

「工具栏为有经验的用户提供快速访问常用功能的途径。」

P398,设计原则,原文续:「不要把工具栏当做简易高速版的菜单」

两个最常见的误用。一是把工具栏当精简版菜单:为省空间把不常用功能塞进图标墙,禁用时干脆让图标消失——用户记得位置,消失一次,界面就从可信变易变。二是把对话框当默认容器:每个功能配一扇门;反过来把破坏性操作塞进主窗口,也是没分清日常。

对我们的发行控制台:左栏是索引窗格,中栏是内容窗格,右栏该是只随选中项目变化的侧栏;右栏一旦出现「打开表单填写」,就是在浏览器里重新盖对话框。

19

为移动设备和其他设备而设计

PDF P442–P496 | 原书 p414–468

移动不是缩小的桌面:屏幕小、手指粗、情境碎,能做的只有减法。

为什么重要

第 9 章给过平台与姿态框架,第 18 章讲透桌面;这一章把同一套原则扔进最苛刻的约束里检验——屏幕 4 到 10 英寸,输入只有十根手指,用户还在走路、排队、开车。结果是把「暂态」(transient)变成前提:注意力是借来的,交互要在几秒内结束P443。这也是全书唯一认真谈硬件、公共空间与十英尺距离的地方。

核心概念

暂态应用transient

桌面应用多是独占(exclusive)的:坐下、开窗、干一小时。移动应用生来就是暂态的:短暂、临时、只服务一个任务。屏幕小、手指粗,移动屏的信息密度其实和桌面对话框差不多,别把它当桌面用。判断标准很土:掏出手机,是不是只想要一个结果。

三档外形form factor

手持 4 到 6 英寸、竖持为主;平板 9 到 10 英寸,苹果 4:3,安卓与 Windows 偏横屏;小平板 7 到 8 英寸最难做。外形直接决定结构:手持只放单列;平板可并置索引窗格;小平板竖屏绝不能并置,横屏最多两个窗格,工具栏竖放侧边。屏幕不动产(screen real estate)是预算,不是形容词。

堆叠与索引窗格stack / index pane

堆叠(stack)是移动端最主流的骨架:垂直堆叠的内容,加顶端或底端一条栏。平板多出的空间用来加索引窗格(index pane)——邮件文件夹、搜索结果——不必下钻就能换条目。竖屏时它从按钮调出、覆盖主内容,横屏时常驻左侧。再往上是弹出控制窗格(pop-up panel),带一个指向来源的三角凸起。

浏览控件家族list / grid / carousel / swimlane / card

列表(list)适合同质、线性、有层级的内容;网格(grid)适合视觉对象,但别用双指张合缩放网格,会毁掉可读性与点击区域;轮显(carousel)一屏只该有一个;泳道(swimlane)是竖向排开的一组横向轮显;卡片(cards)把媒体、文本与社交动作封成自足对象。选型看条目数量与同质性,不看审美。

一级导航的容器tab bar / drawer / nav bar

标签栏(tab bar)放 3 到 5 个平级且高频的目的地,超过 5 个就得换容器。抽屉(drawer)装得下整套层级,但把导航藏进汉堡图标后面,可发现性(discoverability)天然有损;补救是改用「菜单」文本按钮、让抽屉初始就打开。导航栏(nav bar)逐级下钻,左上回退、中间标题。剩下的交给搜索。

手势与可发现性gesture vocabulary

书里对手势很克制:常用的就那几个。真问题是可发现性——触屏没有悬停,控件也没有能供性提示,用户不试就不知道能做什么。所以轻拍保持、旋转、多指滑动,要么别用,要么在导览里教一次。手势用错还会和系统手势、滑删抢动作。

图 19-1 移动手势的语义与代价
手势典型含义用错会怎样
轻拍 tap选择、激活、开关只高亮不执行,用户以为没点中,会连点
轻拍保持 tap-and-hold唤出对象的情境菜单,类似鼠标右键几乎没人自己试得出来;还会和拖滚抢动作,书中明确不推荐
拖滚 drag to scroll滚动列表、轮显、泳道;顶部下拉刷新和拖移混用,用户一拖就把条目搬走了
拖移 drag to move跨列表、窗格搬移或复制对象触屏跨容器极易放错格;创作类应用应少用或不用
拖动控制 drag a control滑块、旋钮、x-y 操控板控制柄太小,指腹正好盖住目标,调准很难
上下滑动 swipe快速滚动;下拉刷新;上滑关闭后台应用同一个上滑既是滚动又是关闭,误杀频繁
左右滑动 swipe翻轮显、拉抽屉、滑动删除、回退与前进一个手势三种含义(翻页 / 抽屉 / 删除),最危险的一档
双指张合 pinch缩放视图,或语义上进 / 出一级层级在网格里缩放会毁掉可读性与点击区域
旋转 rotate转动物体、调角度、调旋钮人机工学别扭且难发现;Paper 拿它做撤销,可用性不如箭头图标
多指滑动 multi-finger系统级切换应用与系统手势冲突,几乎不可能被发现,只能留作特殊需求
原书 P481–P484。判断一个手势能不能用,看三件事:语义是否唯一、是否与系统手势冲突、用户能不能不靠说明自己试出来。

手势教不会,应用就只剩一半。欢迎界面(welcome)首次打开时讲清用途与主要手势,帮助界面(help)随叫随到;导览(guided tour)用卡片轮显,覆盖层(overlay)把手势画在屏幕上,轻拍即消。

怎么用:一次移动端选型

01先量外形,再画界面。

手持走单列;平板才配并置索引窗格;小平板竖屏禁止并置,工具栏挪到侧边。产出:外形—窗格对照表。

02数一遍目的地,再选一级容器。

5 个以内且高频走标签栏;多而深走抽屉;树形走导航栏下钻;海量同质交给搜索。产出:导航容器决策记录。

03按条目选浏览控件。

同质线性用列表;视觉对象用网格;一次一件事用轮显;多品类用泳道;带媒体与社交动作的用卡片。产出:每页的浏览模式标注。

04手势砍到四五个,剩下的教一次。

轻拍、拖滚、左右滑、双指张合通常够用;轻拍保持、旋转、多指滑动默认不用,靠导览与覆盖层补。产出:手势—语义表。

05搜索默认隐式,显式兜底。

先按浏览历史推荐排序,搜索框不抢首屏;排序与筛选合成一组控件,已生效条件要能看见、能点掉。产出:搜索与筛选规格。

图 19-2 一级导航的四种容器怎么选
容器什么时候选代价
标签栏 tab bar3 到 5 个平级、高频、天天要去的区域常驻占掉一条边;第 6 个入口放不下
抽屉 drawer目的地多、层级深,且功能总有人要用整套层级藏在一个图标后面,低频用户想不起来还有它
导航栏 nav bar内容本身是树,用户沿路径一层层下钻每层都要点一次,层级一深就是迷宫
搜索 search条目海量且同质,用户带着明确目标来键盘是移动端最贵的输入,先输入后看到
原书 P462–P473。判据是「目的地数量 × 使用频次」,不是审美;书里的硬判断是:应用本身很少被用到,就别用抽屉。

换一块屏幕:其他设备

嵌入系统(embedded system)的第一条原则是:不要把它当成计算机。微波炉上没有 Cancel,空调也不让你进 settings。信息台(kiosk)在嘈杂的公共场所,十英尺界面(ten-foot interface)在三米外,汽车界面在行驶中——情境不同,界面就不能照搬。

另一处欠账是应用间集成(app integration):应用各自独立,数据却该流动。书里的例子很朴素——来电显示联系人姓名,轻点就能拨号;再进一步是轻点一个人,把他的约会、邮件、通话按时间排开。

图 19-3 五类设备的情境与约束
设备情境与首要约束设计对策
专用手持移动中、常单手、可能戴手套;输入极简陋先做物理模型验证持握;独占全屏,禁窗口与浮层
信息台 kiosk公共场所、一次性使用、身后可能有人等交易型不招客、探索型要招客;点击目标不小于 20 毫米
十英尺界面三米外、遥控器、只有上下左右中五个键字要大、导航只用五向键;按「看电影」这类活动组织,不按设备
汽车界面驾驶中、注意力极度稀缺、手不能离方向盘常用键上方向盘;物理形状可盲摸;模式一键可达;强声音反馈
语音界面无视觉、树形层级、极容易迷路每次播报当前可选功能;随时回上一级、随时转人工
原书 P486–P496。共同点:先把使用情境写清楚,再谈界面;硬件与软件必须一起设计,不能做完了再「削足适履」。

原书金句

「用户的手势词汇量无须太多,满足日常使用即可,这是我们设计的原则。」

P481,多点触摸手势一节的开场判断

「我们不能仅仅将计算机界面压缩变小放在小屏幕的设备上就可以了,我们必须要考虑这个设备的用途。」

P487,一般性设计原则

「如果应用本身很少被用到,则最好不要使用抽屉……用户通常也想不起来里面还有一个隐藏的抽屉。」

P473,关于抽屉的争议话题

两个最常见的误用。一是抽屉套抽屉:Gmail 在抽屉里再挂两层窗格,三个方向、三层界面,用户不知道自己在哪——书里因此立了一条原则:限制动画式转换的次数和方向P472。二是把一个横滑用出三种意思:翻轮显、拉抽屉、滑动删除,滑删还常被误触。

对 Launchpad 意味着什么。按本章判据,Launchpad 是低频、高 stakes 的典型:一年只来几次,却要在几分钟内决定是否参与,一级入口必须常驻可见,关键路径不能藏进汉堡包。

20

网页的设计

PDF P497–P513 | 原书 p469–485

网页把交互从「切换视图」变成「穿越页面」,导航与寻路成了主要设计对象。

为什么重要

第 18、19 章按平台讲姿态,这一章回到网页——今天多数工具真正运行的介质。作者的态度很硬:网页的底层隐喻是页面(page),不是窗口,所以它的导航量和寻路成本天生高于本地应用。这一章值钱的不是 2014 年的截图,而是判断顺序:先认媒介物,再谈导航、搜索、滚动、自适应。顺序错了,后面每一层都会歪。

核心概念

页面(page)与屏幕(screen / view)

基于页面的交互(page-based interaction)意味着每条内容都是一页。本地应用建在屏幕(screen)或视图(view)上:空间和模态有限,进去就看见内容。网页的每条内容通常住在各自的 URL 里,用户是在页面之间移动,不是切换视图。后果是导航量成倍增长,信息构架(information architecture)成了独立工种。动手前先答一句:这是一条条可寻址的内容,还是几个固定工作区?

一级导航(primary navigation)

一级导航回答「这里有哪些主区域」。默认放顶端:位置有限反而逼你砍条目、缩短名字。品类多、名字长时改放左侧,左对齐好读、条目几乎不限,代价是占住视觉进入点;第三种是随滚动收窄的永久页眉(persistent header)。移动端反过来,默认收起,点汉堡包(hamburger)或「菜单」二字才展开;有研究显示后者更好懂。

寻路(wayfinding)三问

用户在任何页面都在问:我在哪、能去哪、怎么回去。答案靠三样:导航项的选中态;面包渣(breadcrumb)显示层级路径,点上级就回退;横向链接(lateral links)让每一级弹出同级菜单。但作者的经验是,内容埋到第三层,中间用户就会明显变慢——正解是压平层级,不是给深结构补面包渣。

搜索是导航的一种

作者反对「训练用户用搜索取代导航」:多数人不会写搜索条件,也不知道怎么改。搜索框必须帮忙:自动填充(auto-complete)补全关键词,自动推荐(disambiguation)纠错并给出更常见的词,分面搜索(faceted search)按属性逐步收窄,分类推荐(categorized suggestions)在词有歧义时先问领域。结果页要继续帮用户缩小范围,而不是丢一堆链接。

滚动(scrolling)的节奏

本地应用把关键功能钉死,网页的重要内容常常要滚动才看得到。问题不是滚动,是没有节奏的滚动:用留白和版式造视觉节奏,触屏上字号与控件要大,长页要一直提示位置(Nest 用日期)。完整内容单元应放在一页里;为多卖广告切成多页,是把编辑问题变成用户的导航问题。分页只适合很长的同质列表。

无限滚动与自适应(responsive design)

无限滚动(infinite scrolling)适合推送式信息流:看过就失去相关性,也不需要到底。但它与页脚互斥,永远到不了底就永远看不到页脚;还常弄坏键盘和屏幕阅读器导航,后退回来记不住位置。自适应设计用一个版本适配所有屏幕:模块化网格加临界点(breakpoint)。作者仍认为移动版值得单独做,因为输入方式、光线、场景都不同。

移动网页,以及之后

移动网页逼出了自适应设计,但作者不认为一个版本能包打天下:手机与桌面差的不只是宽度,还有输入方式(手指与传感器)、环境光线和使用场景。书里的例子以 1024 像素为界:宽于它排三栏,窄于它排一栏。要么做一个真正自适应的单版本,要么单独做移动版,两者都比「把桌面版缩小」强。

看未来,作者的判断是浏览器仍将是最重要的 UI 平台:HTML5 让复杂的视觉与交互成为可能,本地数据缓冲抹平网页与本地应用的最后一点差别,传统媒体与网页的边界也在消失。对设计师的含义很直接:网页的交互能力必须达到软件的水平,只懂「视觉和感觉」或只懂内容结构,已经不够用了。

图 20-1 寻路三问与它们的解法
01我在哪导航选中态、面包渣、能说明用途的页面标题
→
02我能去哪一级导航、胖导航(fat navigation)、相关内容推荐
→
03怎么回去面包渣逐级回退,浏览器后退必须可用
→
04找不到怎么办自动填充、分面搜索把结果收窄
原书 P499–P506。三问的顺序就是检查顺序:先有位置感,再谈可达性;两者都失效,才轮到搜索兜底。
图 20-2 页面式交互与视图式交互的差别
网页(page-based)本地应用(screen / view)
基本单位页面,各有 URL屏幕或视图
导航量大,几乎每条内容一个地址小,空间与模态有限
内容出现滚动才看到,分页或无限滚动常驻窗格,功能钉死
主要风险迷路、层级太深、不会用搜索模态迷宫、空间不足
关键控件一级导航、面包渣、搜索框、页脚菜单、工具栏、面板
设计顺序先信息构架,再导航,再视觉先框架与姿态,再控件
原书 P499–P513。同一套品牌、同一批内容,媒介物换了,主导航、搜索权重与首屏策略都要重排。

原书金句

「网页的每一条内容通常都在其各自的空间里(或者 URL 里),设计网页的难点是如何帮助用户在页面上找到他们所需的内容。」

P499,讲页面与视图的差别

「谷歌多年来认为,经过训练的人可以用搜索来取代导航,这个想法基本上是错误的。」

P505,搜索一节

「无限滚动与网站页脚是互斥的习惯用法。」

P510,设计原则
两个最常见的误用

一是把网页当桌面软件:固定像素画布、工具栏跟着滚、三栏面板照搬,用户一换屏就散架。二是把导航当装饰:汉堡包里塞全部一级导航、面包渣只做展示不可点、页脚里藏二级导航,还配无限滚动——页脚永远到不了,等于没有。分页也要问一句:是为了内容单元完整,还是为了多刷几次广告?

对 Launchpad 意味着什么

Launchpad 是每周回访的工具型网页,用户不是来逛的,是来「回到上次的地方」:顶端固定导航 + 面包渣逐级可点 + 分面搜索,比再做一个漂亮的首页更值钱。

21

设计细节:控件和对话框

PDF P514–P570 | 原书 p486–542

控件和对话框是通用语言;难点不是会不会用,而是知道什么时候不该用。

为什么重要

控件与对话框是全书唯一的「通用语言」:桌面、移动、网页,用户看到的都是按钮、列表、输入框和弹窗。它们在每个 GUI 库里都有现成实现,所以风险不是做不出来,而是随手就用。这一章真正值钱的不是控件清单,而是每条「什么时候不该用」——控件是句子的词性,词性错了,句子再漂亮也读不通。

核心概念

命令控件(imperative control)

命令控件是句子里的动词:按钮、图标按钮、菜单项。按钮靠矩形轮廓和按下凹陷表明能按;扁平化抽掉了立体感,矩形仍是识别符。图标按钮省空间,适合熟手,代价是新手读不懂图标。超链接是浏览导航的习惯用法,不是动作——点链接弹出对话框,用户会困惑。一句话:链接用于导航,按钮用于动作。

选择控件(selection control)

选择控件是形容词:复选框、单选按钮、开关、下拉列表。判断顺序:能多选就复选框;互斥、选项少且要解释,用单选按钮(孤立的一个没有意义);互斥又要省空间,用下拉;移动设置页里的二元属性,用开关。要避开的反例是状态切换按钮(播放与暂停同体):它同时像状态指示器和命令,两种解释都成立,作者的建议是别用。

列表、组合框、树与显示控件

列表控件(list control)把选项排成可滚动的文本行,排除了输错的可能;组合框(combo box)是列表加编辑字段,能选也能输入新值,单选中空间效率最高。树形控件(tree control)只适合天然的层级;开发人员爱它,因为它贴合数据模型,不是因为贴合用户思考。多选一旦会滚出屏幕,别再用 Ctrl 点选,改用做记号(earmarking):每行前放一个复选框。显示控件(display control)则管「怎么显示」:滚动条、分割线、文本控件;它最典型的错,是把只读信息画成编辑框。

有界、无界与验证(validation)

有界输入控件(bounded entry control)让无效值根本输不进去:滑块、刻度盘、微调器(spinner)。有界不是「输错就弹错误框」,而是把边界可视化地告诉用户。微调器是自相矛盾的例子:箭头有界,编辑框无界。无界输入靠验证(validation):主动验证(active validation)边打边拒,被动验证(passive validation)在失焦或提交时判断;更好的做法是暗示(hints),在犯规处用非模态说明解释规则。

对话框的五个目的

对话框是叠在主窗口上的弹出窗口,只该服务五件事:属性(property)、功能(function)、进度(process)、通知(notification)、公告(bulletin)。属性对话框是所选对象的控制面板,最好非模态,高频修改应放进边栏;功能对话框从菜单打开、通常模态;进度必须说明在跑、一切正常、还要多久、能否取消;公告是错误、警告、确认,最该被消灭。判据:主交互流之外、单一主题,才配得上一个对话框。

模态(modal)与非模态(modeless)

模态让整个应用停下来等你,语义清楚,适合危险或罕用的操作;非模态不打断,但作用范围模糊,难设计也难实现。三条硬规则:模态必有终止命令(terminating command,OK 与 Cancel 在底部);非模态只用标题栏关闭;模态不要放标题栏关闭控件。错误对话框、警告、确认这三类公告该整体铲除:让错误不可能发生、让动作可撤销、用非模态反馈代替警告。确认框只在用户可能点「否」时才有意义。

图 21-1 控件选择决策树:先问用户要做什么,再选控件
Q1词性用户在做动词、挑名词,还是填数值?
→
Q2可见性候选项能否一次看全?
→
Q3可逆性选错了代价多大,能否撤销?
→
A落点见下方六条分支
① 启动一个动作按钮;高频且能画成图标才用图标按钮。动词要有按下反馈;主路径给默认按钮,危险动作不要做成默认。链接不承载动作。
② 5 项内挑一个单选按钮(成组、带文字解释);互斥的图标组用单选图标按钮。一次看全,选错代价低;孤零零一个单选按钮没有意义。
③ 很多项挑一个下拉列表;既要选又要能输入新值,用组合框。收起后只显示当前值;少于 5 项且需要解释时,别把选项藏进下拉。
④ 挑多个复选框列表或做记号列表(条目可能滚出屏幕时必须用)。非互斥要在视觉上就不像单选;别用 Ctrl 点选,滚出屏幕就看不见已选项。
⑤ 填一个值有界:滑块、刻度盘、微调器;无界:文本字段加验证与暗示。有界让错值根本输不进去;别用无界文本框去接一个有界数值。
⑥ 只是读显示控件(display control):文本控件、滚动条、分割线。编辑框的外观承诺了「可改」,只读就是欺骗。
原书 P486–P539。每一行都能在书里找到对应的「什么时候不该用」;决策树的价值是把「不该用」提前到动手之前。
图 21-2 该不该用对话框:六条判据
判据该用对话框不该用(改用)
是否主交互流否:可以整体搬到「另一个房间」的功能是:留在主窗口、边栏或就地编辑
主题是否单一是:一个对象的属性、一个动作的参数否:拆开,或改用导航与标签页
使用频率罕用、危险、只需设置一次高频:工具栏、边栏、快捷操作
应用能否自己决定不能,且做错不可撤销能:做,不要问;再给撤销
要不要停手要:模态,两个终止命令放底部不要:非模态,或进通知中心
是否错误 / 警告 / 确认几乎从不,只能是最后手段默认:防错、暗示、撤销、非模态反馈
据 P521–P540 归纳。最后一行的意思是:公告类对话框是外科手术,不是阿司匹林。

魔鬼在细节里

这一章没有宏大方法,全是分寸:5 个单选按钮成组很好,50 个就很荒谬;五六个选项卡排一行很好,堆成两行就毁了习惯用法;级联对话框每多一级,就多一套说不清范围的终止按钮。作者在结尾只留了一句话:整体概念再优秀,一个恼人的控件或一个不该出现的对话框,也足以把体验拉回低级烦恼。书里能给的只是分寸感,具体的像素、间距与措辞,仍要靠走查和真实用户来定。

原书金句

「链接用于导航,按钮用于动作。」

P518,设计原则

「总之,不要使用状态切换按钮。」

P520,讲播放与暂停同体的那个反例

「做,不要问。」

P568,消除确认对话框的设计原则
两个最常见的误用

一是把对话框当主界面:设置、编辑、导入全塞进弹窗,用户在两三个窗口间来回搬运信息,流就断了。二是用确认框替代防错与撤销:确认框只在用户可能点「否」时有用,其余时候它训练用户闭眼点「是」,真出事那天也一样。堆叠选项卡和级联对话框是同一个病的晚期症状:结构没想清楚,就用容器硬装。

对 Launchpad 意味着什么

Launchpad 的导入、批量修改这类低频高危操作,该用「有界输入 + 模态功能对话框 + 可撤销」,而不是用确认框和错误框串成流程;能防的错不要靠提示。

A

设计原则总表

PDF P571–P583 | 原书 p543–548

附录不是重述,而是把全书判断压成一张能当场打勾的评审表。

附录 A 是全书的一次收口:第 1–21 章把原则散在论证和案例里,这里按章抽出,压成一份可逐条打勾的清单(P571–P583)。它只给检查项,不给新论证,适合评审时翻,不适合当教材读。

它与设计模式(design pattern)的分工也在此:模式回答「这类问题别人怎么解」,给的是可复用的结构;原则回答「这个决定该不该做」,给的是否决权。冲突时模式可以几个都成立,原则只能有一个赢。附录没有一条原则附带实现方案,只让你说得出「这条不行,因为……」。

原书按章罗列,下面四组——伦理(ethical)、目标明确(goal-directed)、实用(pragmatic)、优雅(elegant)——是我们的归类,条目文字忠于原文;37 条为节选,不是全部。

图 A-1 四组原则的否决顺序
伦理不羞辱、不打断、不甩锅
目标明确为谁做、做什么
实用少一步、记得住、不出错
优雅一致、克制、行为同源
塔尖否决,塔基完成:伦理不过关,效率再高也不成立;目标不清,控件再精致也只是装饰。四组是同一决定的四道筛子。

一、伦理(ethical)|第 3、8、11、12、14、21 章

原则一句话约束什么
人来思考,计算机干活计算归程序,判断归人自动化边界
软件应该像人一样体贴不抢注意力,不替人做主通知与默认值
如果用户愿意操作,就值得程序记住做过的设置要记住状态保存
不要让用户觉得自己愚笨错误归因于界面,不归人错误文案
不要愚蠢地打断进程打断只在值得时才发生弹窗时机
错误对话框愚蠢地停止进度,应该避免报错不冻结流程,就地提示错误处理
当软件告诉用户他们失败时,用户会觉得很没面子失败提示给台阶提示语气
出错可能不是程序的问题,但是程序的责任责任归产品,不归用户容错范围
请求原谅,而不是许可先做可撤销的,再给回退确认策略

二、目标明确(goal-directed)|第 1、3、4、5、10、13 章

原则一句话约束什么
用户界面应该基于用户心理模型,而不是实现模型按用户的任务组织界面信息架构
目标导向的交互设计反映了用户的心理模型从目标推行为,不从功能推需求定义
交互设计不是凭空猜测行为假设都要有依据设计依据
界面设计的关注点在于单个主要人物模型为一个主要人物模型取舍优先级
设计产品行为前,首先定义产品会做什么先定行为,再画界面需求边界
设计的早期阶段,假定界面是魔法先想理想,再谈技术概念探索
绝对不要向涉众展示你不满意的设计方案,那可能正是他们喜欢的只展示你愿意辩护的方案评审汇报
用户体验只有一个,即形式和行为的设计必须相互和谐视觉与行为同步,不贴皮协作方式
将用户想象成为非常聪明但很忙碌的人不解释常识,不加步骤文案与流程
多数人并不想知道得太多,只想成功地使用产品隐藏机制,只留任务路径功能暴露

三、实用(pragmatic)|第 9、10、12 章

原则一句话约束什么
技术平台相关的决定最好能融入交互设计的成果平台约束提前进设计平台选型
全屏幕使用独占应用程序,让它发挥最优效果主任务给足画布主界面布局
暂时应用程序必须简单、清晰并且意思明确临时任务只做一件轻流程范围
没有人愿意永远当个新手每条路径都长得到专家级学习曲线
为中级用户而优化设计默认界面服务多数熟练者功能默认
尽可能地消除每一种练习(excise)删掉不产生价值的操作流程步骤
不要让用户请求许可程序能判断的就不问用户确认弹窗
任何输出之处应允许输入显示数据的地方应能编辑只读界面
重大改变必须显著优秀改旧习惯须换来明显收益改版决策

四、优雅(elegant)|第 11、17、21 章

原则一句话约束什么
不论界面多酷,越少越好装饰让位于任务视觉密度
遵守标准,除非有极好的其他选择平台约定优先于个人偏好控件选型
一致不意味着僵化一致的是语义,不是像素设计系统
表明这是什么用视觉:明确这是哪一个用文字视觉管类别,文字管身份图标与标签
从视觉上传达功能和行为外观要预示可操作与结果控件外观
删减东西,直到破坏了设计为止,再把最后去掉的东西加上以快坏掉为删减边界视觉简化
链接用于导航,按钮用于动作外观与语义一一对应控件语义
让所有的动作都可以撤销破坏性动作都留回退危险操作
让错误不可能发生用约束和默认值消灭错误校验策略

最容易被违反的三条

不要让用户请求许可

「确认」成本最低,团队爱加。若 Launchpad 发布要连弹两次确认再勾协议,没有一问程序判断不了。

约束:确认只留给不可撤销且后果重大的动作

不要让用户觉得自己愚笨

报错最容易写成对用户的判决。若 App-IPO 表单只回「输入有误」,用户只能逐格猜;标出字段、给出建议值、保留已填内容,错误才指向界面。

约束:错误信息必须指明下一步怎么改

不论界面多酷,越少越好

首屏是政治战场。Launchpad 首页若叠满 KPI 卡、渐变与动效,新用户就找不到「新建项目」;删到一主按钮加一条状态。

约束:新增视觉元素要顶掉一个旧元素

评审 10 分钟速查

  • 主要人物模型(persona)是谁?说不出就先停
  • 这屏服务哪一级用户
  • 每个弹窗:不弹会怎样
  • 每个错误:能否不发生
  • 破坏性动作:能撤销吗
  • 显示值:能直接编辑吗
  • 新控件:符合平台标准吗
  • 视觉与行为同一套语汇吗
  • 删掉一半,还成立吗
  • 有没有替用户做可撤销决定

最容易被违反的,往往不是大原则。伦理层的"不打断、不甩锅"人人同意,但一到排期就让位于"本周必须上线";实用层的"少一步、记得住"人人同意,但每加一个字段都觉得自己有理由。评审时不要问"我们认同这条吗",要问"这一版哪里违反了它、证据在哪"。

对 App-IPO:把附录 A 当成发版前的十分钟评审表——它不告诉你「怎么做」,只告诉你「这条决定该不该做」。每次评审只挑 5 条最相关的原则,逐条问「我们违反了吗、证据在哪」。

工具箱

把书变成可执行的模板评审、发版、吵架时,拿这些表说话

下面这些模板都可以直接抄进文档。它们不是书里的原文,是把书里的方法压成「填空就能用」的格式。

工具 1 · 人物模型卡

字段填写要求常见错误
身份与角色一句「谁 + 在什么处境下 + 想干什么」,不要年龄性别住址写成用户画像
行为变量3–5 个真正区分人的维度,取两极,不取平均维度互相重叠
三层目标生活目标 / 最终目标 / 体验目标各一句把任务当目标
最怕什么失败、被骗、丢脸、浪费时间——具体场景写「体验不好」
现状与替代方案他现在怎么解决?为什么不够好?假设他从零开始
设计含义这个人物模型会逼我们做什么取舍没有取舍,只有描述

工具 2 · 上下文场景剧本(五段式)

  1. 1起点

    人物模型在什么处境下产生这个需求?他手上有什么、缺什么?

  2. 2推进

    他按什么顺序接近目标?哪些步骤是必须的,哪些是我们强加的?

  3. 3阻碍

    哪里会犹豫、出错、想放弃?信息缺口在哪?

  4. 4完成

    什么算完成?他怎么知道自己完成了?

  5. 5之后

    完成后他会做什么?什么会让他回来第二次?

    设计需求候选清单

工具 3 · 数字礼仪自检(ch8)

  • 恭顺:它是否把用户当上级,而不是当操作员?
  • 乐于助人:它是否主动补上用户缺的信息?
  • 有常识:它是否知道「这个时间、这个地点、这个金额」不合理?
  • 有判断力:它是否在规则之外做合理豁免?
  • 预见需求:它是否提前准备好下一步,而不是等用户找?
  • 尽责:它是否记住承诺、跟进到底?
  • 不添负担:它是否把自己的问题(网络、升级、风控)转嫁给用户?
  • 及时通知:它是否在用户需要知道的那一刻说,而不是事后?
  • 敏锐:它是否察觉用户的状态(新手、着急、出错)?
  • 自信:它是否敢给建议、敢下结论,而不是什么都问?
  • 少问:它问的每个问题,是否都真的必要?
  • 失败不失风度:出错时是否道歉、解释、给出路?
  • 知道何时破例:规则和用户目标冲突时,它选哪个?
  • 承担责任:它是否把错误归因于自己,而不是用户?
  • 帮用户避免低级错误:它是否在用户犯错前就挡住?

工具 4 · 附加工作审计(ch12)

负担类型审计问句典型改法
导航负担为了完成这件事,用户要跳几个页面、记几个位置?合并入口、提供概览、就地操作
拟物负担界面是否在模仿一个并不存在的物理对象?换成习惯用法,别让用户学隐喻
模态负担是否必须关掉一个东西才能做另一个?非模态、并行、可撤销
样式负担用户是否要为了「看起来对」而多操作?默认值、自动格式、减少必填
记忆负担用户是否必须记住上一步的信息?就地展示、自动带入、历史记录

工具 5 · 姿态选择决策树(ch9)

Q1用户会长时间沉浸吗?是 → 独占姿态(桌面应用、编辑器、交易终端):高密度、可定制、键盘优先
Q2用户是「用完就走」吗?是 → 暂时姿态(工具、支付、查询):轻、快、单任务、可中断
Q3用户不需要盯着它?是 → 后台姿态(同步、监控、通知):安静、按需出现
Q4是网站?信息型=阅读优先;事务型=完成一件事;网站应用=持续使用,接近独占

工具 6 · 控件选择表(ch21)

用户要做什么首选控件不要用
立即执行一个动作命令按钮把动作藏进下拉菜单
在少量互斥选项中选一个单选组 / 分段控件下拉框(选项少时多一次点击)
从大量选项中选一个下拉框 / 搜索选择一长排单选
开关一个独立状态复选框 / 开关两个互斥按钮
输入自由文本输入框(带校验与默认值)无提示的裸输入
在多个对象间切换标签页 / 侧栏弹窗套弹窗
必须中断并确认的高风险动作模态对话框 + 明确后果用 toast 假装确认过
持续可见的状态状态栏 / 徽章 / 非模态提示每次变化都弹窗

工具 7 · 可用性测试五问(ch5)

  1. 用户第一眼认为这个页面是干什么的?(定位)
  2. 用户能不能找到完成主任务的入口?(寻路)
  3. 用户在哪一步犹豫、回头、求助?(摩擦)
  4. 用户如何判断自己成功了?(反馈)
  5. 出错时用户是否知道发生了什么、下一步怎么办?(恢复)
用法

每个版本发布前,用工具 3 + 工具 4 各过一遍;每季度用工具 1 + 工具 2 重写一遍人物模型和场景。模板会过期,人物模型也会过期。

Apply · 项目诊断

用整本书,把 Launchpad 重审一遍

前面 21 章是别人二十年踩出来的判断标准。这一部分不写读书心得,只做一件事:把我们自己的产品放到这套标准下,看它哪里对、哪里只是“看起来对”、哪里在骗自己。

诊断对象:App-IPO / zkVerify Launchpad 证据:产品需求定稿、1012 首页口径、线稿 v1/v2/v5、演示站验收截图、Michael 意见
结论先行

方向对,界面还在讲别人的品类语言最值钱的差异化,现在只是一个徽章,不是一条能走完的信任链

把《About Face 4》的方法压到 Launchpad 上,最刺眼的不是“哪里不好看”,而是产品的心智模型和界面的呈现模型对不上:我们嘴上说“每个代币背后是一个真实 app”,首页第一屏却是两张巨幅图片 + Trending + 已验证榜;我们说“验证是经济参数的闸门”,项目页最显眼的却是 K 线、出价和成交表。用户没有义务读我们的文档,他只会按第一屏的样子理解这个产品。

3/10首页第一屏的差异化表达
(书:视觉层级 / 少即是多)
5/10信任链完整度
(书:数字礼仪 / 非模态反馈)
7/10项目页结构
(书:姿态 / 信息设计)
3/10数字与口径的自洽
(书:诚实 / 承担责任)

分数是判断,不是测量。它的用途只有一个:逼我们承认“哪些地方不能再靠文案补”。

三个最痛的问题(先修这三个,其他都是次要)

① 差异化不在第一屏

首页首屏是两张满图 banner(ABE / Hookrfun)+ Trending,没有一句“每个币背后是一个真实 app”。差异化的完整叙事被放到了“可选落地页 W6”,而主站首页只留一条价值主张条——这是把最贵的位置让给了别人的品类语言。

证据:EN-W1-home.png;产品需求定稿 §8

② 数字自己的账对不上

同一套演示里:收入“12 months covered”与“6 months covered”并存;毕业线同时出现 $350K / $200K / $100K;发币向导出现“团队 45% + 12 个月 vesting”,而定稿明确“没有团队份额、没有 vesting”;卡片 FDV $18K 却已募 $284K。卖“proof”的产品,数字打架是致命的。

证据:EN-W1 / W2 / W3 / W5;产品需求定稿 §7、§11

③ 核心动作的摩擦被当成“以后再说”

出价面板出现 “Est receive 0% of supply / 0 ABE”、Delivery method 默认显示 “Connect Wallet”、倒计时 “39:08:00”、价格图没有纵轴、钱包未连接时出价按钮的行为没有定义。这些不是细节,它们正好落在用户最紧张的那一步。

证据:EN-W2-auction.png;AF4 ch12 / ch15 / ch21
也要承认:有五件事已经做对了

① 验证页的三卡结论(VERDICT / 已验证年收入 / Source·Coverage·Proof ID)+ 四项分项检查 + “4/4 passed”,比只给一个勾的竞品强一个量级。② 失败态愿意写原因,且具体到“缺 2026-07”。③ 拍卖中/已上线/曲线三种销售状态共用一套骨架,用户学一次就够(ch17 一致性)。④ 把 zkTLS 拆成“检测登录 / 拉取账单 / 本地证明 / 上链校验”四个可见动作(ch11 编配)。⑤ 设计系统是能拿来评审的规则:primitive → semantic 两层 token、“Glow 是稀缺资源”、所有数字用等宽字体(ch17 设计语言)。这五条是底子,后面的修改不要把它们改坏。

先记住这个判断

Launchpad 不是“信息型网站”,也不是“纯交易网站应用”。它更像事务型网站(transactional)+ 高信任要求的金融界面:用户来这里不是为了逛,而是为了在两件事上做决定——“这个项目是真的吗”和“我现在买/卖会不会吃亏”。所以它的姿态、层级、反馈,都应该按“降低决策风险”来排,而不是按“提高交易刺激”来排。

方法

用 AF4 的五阶段,把项目重做一遍不是补文档,是检查每一步的产物是否真的存在

《About Face 4》第 1–5 章给了一条硬流程。我们把它当审计清单,逐阶段问:这一步的产物到底有没有?如果没有,后面的“设计”其实是在补前面的债。

阶段书里要求我们的现状(证据)真正缺什么下一步(可验收)
① 研究 定性研究、情境调查、6–12 个用户访谈;区分“用户说的”与“用户做的” 有 25+ 家竞品的二手调研、老板/顾问意见、Michael 的高层反馈;没有任何一手用户研究记录(项目方怎么决定发币、投资人怎么判断真假、审计师怎么复核) 不是“再调研竞品”,而是三个角色的真实决策过程 各 5 个访谈 + 3 个可用性测试;产出 3 份情境调查笔记
② 建模 从行为变量合成人物模型;目标三层;主/次/补充/负面 1012 文档有“四类人”表(想要什么/怕什么/在哪出现),但没有行为变量、没有三层目标、没有主次之分;四类人仍像“角色说明” 人物模型的优先级:谁是主人物模型?谁的失败最不可接受? 4 个完整人物模型 + 明确 1 个主人物模型(见下一节)
③ 场景 上下文场景(宽)/ 关键路径场景(主成功路径)/ 验证场景(异常与边界) 有一张“从项目方进场到投资人拿币”的系统流程图,颗粒度是“系统步骤”,不是“人物在具体处境下的选择”;失败路径只有“全额退款”一句 验证场景几乎空白:验证失败、数据造假、拍卖失败、退款延迟、季度断报、押金罚没 5 条 key path + 6 条验证场景;每条标“用户此刻怕什么”
④ 需求 从场景抽“设计需求”,不是功能清单,也不是规格说明 产品需求定稿写的是规则与参数(费率、押金、里程碑),很强;但它是“系统必须怎么算”,不是“界面必须让用户理解什么” 可检验的设计需求,例如“投资人在 30 秒内能说出这个收入证明了什么、没证明什么” 12 条设计需求,每条挂一个场景与一个验收动作
⑤ 框架 先定交互框架(形式/姿态/结构/流/控件),再定视觉框架;细化后才测试 线稿 v1/v2/v5 已经很细,但“项目页 vs 代币页”的框架取舍没有定;双栏是布局决定,不是行为框架;移动端没有框架 一个明确的姿态判断 + 一套跨端的信息优先级 项目页框架图(桌面/移动)+ 姿态声明,冻结后再改视觉
最容易自欺的一点

我们很容易把“竞品拆得很细”当成“研究做完了”。AF4 第 2 章说得很直白:竞品审核回答的是“别人怎么做”,不是“我们的用户为什么这么做”。前者让你抄得快,后者才让你知道哪里不能抄。

用户模型

四类人,四种“怕”人物模型不是角色介绍;它要能逼出取舍

下面四个模型是从产品规则里反推出来的,不是人口统计画像。重点看每个模型的「最怕」和「设计含义」——这两栏才是会改变界面的部分。

林哲 · Minute 创始人

项目方 · 发币向导的主要人物模型
处境
34 岁,两人团队,iOS 会议纪要 App,MRR $7,200、年化 $86,400、现金只够 4 个月;想募 $150K–$200K,不签对赌。
行为变量
肯给总额不愿给逐笔 · 融资确定性 > 估值最大化 · 同一字段填两遍就烦 · 要渠道不要“合伙人” · 能装插件看报错,但 TLS 不通就放弃
三层目标
生活:不靠外包养活团队
最终:不出让控制权,拿到 12 个月 runway
体验:像报税——有清单、有进度,不像求人
最怕
签完字才发现钱是分三年、有条件、带押金的;第一笔 30% 卡在“TGE 后首次 L3”,工资发不出。
触点
发币向导 S1–S7;项目页;持仓页“我发的”
设计含义
他逼我们把发币当成金融决策,而不是七步表单:必须在向导里给一条 12 个月现金流时间轴(日期、触发条件、失败后果、押金何时退),并与持仓页共用同一份数据。

沈一 · 谨慎的首次买家

投资人 · 首页 / 项目页 / 持仓页的主要人物模型
处境
29 岁,前 SaaS 销售,2024 年转全职交易;自有 $120K,单笔 $3K–$8K,做 2–8 周波段;每周筛 10 小时,下单 1–2 个。
行为变量
自己拉数据(KOL 只做初筛)· 决策窗口 72 小时 · 平时看徽章、真出手前抽查验证页 · 按收入倍数估值 · 小仓位多次
三层目标
生活:把交易做成能做五年的工作,而不是赌一把
最终:在别人定价前买到收入为真、估值未被炒的项目
体验:出价时心里有底,最坏和最好都能提前算出来
最怕
被“真数据的一个切面”骗:卡片写“月收入已验证 $86K”,没说这是 MRR 还是 TTM、覆盖几个月;点进项目页只剩一枚徽章。第二怕:出价“上限”被公开,大户看得见他的底牌。
触点
首页双横幅 / Trending / 验证榜 / 卡片;项目页价格、K 线、出价面板、业务指标、季度报告;持仓页;验证页
设计含义
他逼我们把“已验证”从形容词变成一组可比较的数(口径、覆盖期、时间、来源、检查项),并且首页承诺的数,点进项目页必须还在。

何嘉 · 独立尽调

验证方 · 验证页的主要人物模型
处境
36 岁,前四大审计,现做加密独立尽调,一份报告 $800–$1,500;一周看 5–8 个项目,每个 45 分钟硬上限,全在浏览器完成。
行为变量
必须跑完全部检查才下结论 · 45 分钟超时写“无法核实” · 只信自己算的 · 产出以内部备忘为主 · 不用命令行
三层目标
生活:靠“看得懂别人看不懂的账”吃饭
最终:45 分钟内给出“真 / 口径有问题 / 无法判断”三档结论
体验:感觉自己是在查账,不是在读宣传页
最怕
客户在投委会问“证据呢”,她只有一个哈希和一枚徽章;检查项里没有“账号是否属于项目方”和“MRR 还是 TTM”,报告只能写“平台声称已验证”。
触点
项目页连接状态清单与季度报告;验证页结论头、拖放复核、逐项检查、链上证明
设计含义
验证页要从“给用户看的绿灯”改成“给第三方用的工具”:结论可引用(项目/来源/覆盖月份/口径/时间/证明编号)、可导出、可分享 URL。代价是它会更长更干——但这张脸本来就该是审计底稿的脸。

唐蕊 · 平台运营 / 风控

平台 · 无前台页面,但四页都在消费她定的规则
处境
33 岁,运营负责人,3 人团队兼风控复核、押金台账、多签放款;手上是 Excel、多签钱包和审核队列,每天留 2 小时处理异常。
行为变量
质量优先于数量 · 照章留痕 · 先疑后信 · 想系统化而非人盯 · 宁可错杀
三层目标
生活:把这份工作做成能交接的流程
最终:不出假数据事故,同时让验证项目数与 VFY 需求一起长
体验:任何罚没/冻结/放款,5 分钟内拉出“谁、按哪条、何时、谁批的”
最怕
放款已经打了,两周后曝出刷单;系统里只有“已证明”,没有审批人、检查项快照和异常标记;董事会问“谁批的”,只能答“流程上是通过的”。
触点
无前台;她的规则长在首页灰标、项目页徽章/放款条/报告状态、持仓页押金进度、验证页失败态
设计含义
前台每多一个状态,后台必须多一个可执行动作和一条留痕。首期要么做最小运营后台,要么把前台承诺收窄到平台能兑现的部分——不能前台写“冻结”,后台没有冻结按钮。

说明:年龄、收入、现金等细节为推断,只为给行为变量一个落点;费率、押金、里程碑、zkTLS 链路、页面模块全部来自产品定稿与验收截图。首轮 5–8 个真实项目方/买家访谈后必须校准。

主人物模型是谁?

如果只能保一个,保投资人(谨慎的首次买家)。因为项目方供给端可以靠 BD 一个个谈,验证方是低频工具型用户;而首页和项目页的每一屏,最终都是在替这个“怕被骗、怕买贵、怕跑路”的人做决定。项目方体验决定供给,投资人体验决定需求,冷启动期需求侧更稀缺。

场景

五条关键路径,五个会掉人的地方用场景走一遍,比用功能列表评审有效得多

场景 1 · 首次发现(投资人,未连钱包)

他从推特点进来,落在首页。目标不是“逛”,是“这里是不是又一个 meme 盘”。卡点:首屏两张 banner 没有解释“app + token”的关系;“Revenue Verified”徽章出现多次但没有一句话说清它证明了什么;卡片上 FDV、募资额、目标三者对不上,他会先怀疑数据。

场景 2 · 尽调验证(投资人 → 验证方角色切换)

他点进项目页,想确认“这个收入是不是真的”。卡点:收入区在交易区下方,要滚两屏;验证结论只有徽章,看不到数据源、覆盖期、检查项;点“View on-chain proof”之前不知道会看到什么;验证页要求拖文件,对普通投资人像开发者工具。

场景 3 · 出价买入(投资人,拍卖最后 2 小时)

他决定出价,最怕“出价后规则变了/买贵了/退不回来”。卡点:出价面板的 “Est receive 0% / 0 ABE” 直接摧毁信任;Max spend 与 Max price 的关系没有解释;“毕业失败全额退款”是救命信息,却埋在进度条下面的一行小字。

场景 4 · 毕业后持仓与复验(投资人 + 项目方)

拍卖结束,他要 claim、看解锁、等季度报告;项目方要提款、交财报。卡点:持仓页把“我买的”和“我发的”混在一页;退款/claim/锁定的状态机没有在界面上被明确表达;季度报告区块在演示里只有一行状态。

场景 5 · 项目方发币(创始团队,第一次用)

他要把“我的收入”变成“可验证的募资资格”,最怕“募到钱却拿不到/押金被吞”。卡点:向导 6/7 步不一致;“验证可跳过”但没告诉他跳过后代价是什么;团队分配/vesting 字段与产品定稿冲突;七步走完才在 Review 看到押金与里程碑,太晚。

页面职责矩阵:每一页只回答一类人的一个问题

页面项目方投资人验证方平台运营
首页我的项目能不能被看见?现在有什么值得看/买?哪些是真的?有哪些项目可复核?供给和需求是否健康?
项目页我的项目页能不能替我说话?这个项目值不值?收入凭什么是真的?证据链在哪、能不能自己验?有没有异常信号?
发币向导我怎么发、要花多少钱、什么时候能拿到?(不出现)(不出现)材料是否齐全、规则是否被遵守?
持仓页我的解锁/押金/验证进度到哪了?我买了什么、现在值多少、下一步做什么?(不出现)退款/罚没/放款是否要处理?
验证页我的证明长什么样?我能不能看懂这个结论?我能不能独立复核?验证服务是否正常?
矩阵暴露的结构问题

“验证页”同时承担了三个互相冲突的任务:给投资人看懂结论、给验证方做工具、给项目方展示证明。AF4 第 9 章的姿态判断在这里直接适用——它到底是“事务型页面”还是“工具型页面”?如果是工具,就不该期待普通投资人在这里停留;如果是结论页,就该把“拖文件复核”收进二级入口。

诊断

12 个维度,逐条对照每条都给证据、书里的依据、以及一个能验收的改法

维度判断现状证据AF4 依据改法
首页第一屏差首屏 = 两张满图 banner + Trending,无价值主张、无“app+token”关系解释;差异化被推到可选落地页ch17 视觉层级;ch11 少即是多;ch1 呈现模型首屏加“一句话 + 三个证据”条(已验证项目数 / 累计验证收入 / 最近链上证明),banner 降为第二屏;卡片改“App 段 + Token 段”
首页信息架构中筛选条三组(全部/已验证、拍卖中/已上线、五种排序)方向对;但“已验证榜”与“Revenue Verified”筛选重复;卡片字段两套(crowd/instant)但视觉未区分ch17 信息设计;ch20 寻路合并“已验证”入口;卡片用姿态区分(拍卖=进度,已上线=持有人/成交);排序默认值写清
项目页结构中演示站是“左内容 / 右出价”两栏,App 指标整体在下方通栏,不是 Michael 说的“两个等宽竖栏”;v5 线稿改成“左目录 + 中内容 + 右交易”三栏,并删除了验证通栏(W2-L9)——首页承诺的“月收入已验证”在项目页无处可查;拍卖页还公开每个出价人的 Max 上限ch9 姿态;ch17 层级;ch3 目标左 Token / 右 App 真正等宽;收入结论与“证据入口”提到项目头下方;两栏独立滚动,关键结论 sticky
信任链表达中徽章出现多次(Revenue Verified / Traffic Verified / X 已认证 / On-chain proof),但没有一条线串起“来源→覆盖期→检查项→链上记录→复核”;验证页 4 项检查是全站最好的东西,却藏得最深ch8 数字礼仪;ch15 非模态反馈;ch17 信息设计做一条“信任链”组件:结论 + 4 项检查 + 时间 + 链上 Proof ID + 本地复核入口;徽章只是入口,不是结论
与事实的一致性差“12 months covered” vs “6 months covered”;毕业线 $350K/$200K/$100K 三版;团队 45% + vesting 与定稿冲突;“fully permissionless” 与技术事实冲突;同一 MAU 两值(84,210 vs 45,800);$777,777 fixture 复用于 5 个 token;押金 $18,000 与括号“$5,000+$5,000”;页脚 “zkTLs”ch8 诚实 / 承担责任;ch7 合乎伦理建立“单一事实源”参数表;界面所有数字从同一模型渲染;对外口径逐句过一遍法务/技术;删掉无法兑现的词
发币向导中演示 6 步 vs 文档 7 步;单页长表单(不是逐步向导);验证可跳过但无代价说明;押金/里程碑到 Review 才出现;团队分配字段残留ch10 渐进式展开;ch12 附加工作;ch11 流统一 6 步;每步只问必要信息;第 3 步给“跳过后会怎样”;押金与到手现金预览提前到第 4 步
持仓页差演示里“我买的/我发的”是两个标签,但状态机没有可视化;退款、claim、锁定、罚没四种状态缺明确表达;押金进度只有一条进度条ch3 目标;ch9 姿态;ch15 反馈按“钱的状态”组织:拍卖中→待清算→可 claim→已毕业→解锁中→异常;每种状态一句话 + 下一步按钮
错误与空态差演示只覆盖成功路径;未连接钱包、无数据、验证失败、拍卖失败、网络错误都没有设计稿;首页新币“没有 24h 历史显示占位”是全案最好的空态实践,但没有推广ch15 防错;ch21 错误对话框;ch8 失败不失风度做 8 个标准空态/错误态模板;错误文案统一“发生了什么 + 为什么 + 下一步”;可恢复的错误不用模态
术语一致性中项目页/币详情页、拍卖/CCA、毕业/建池、验证/认证、crowd/instant 在文档与界面间混用;销售状态七种叫法、徽章五种形态、倒计时五种格式;中英文混排无规则ch17 一致性;ch13 习惯用法建 30 条术语表;界面、文档、营销共用;英文优先或中文优先先定一个
移动端差所有验收截图均为 1440px 桌面;项目页双栏、出价面板、K 线在移动端如何折叠没有方案ch19 移动;ch9 姿态先做“只读 + 简化出价”的移动版;双栏折叠顺序=结论→价格→出价→App 指标;交易面板用底部抽屉
视觉层级中深色底 + 五条语义渐变 + 全站唯一发光按钮,设计系统是成体系的;但 Buy 按钮在网格里重复发光、“已验证”绿色与涨幅绿色同色相、信息密度高ch17 视觉层级;ch11 编配发光只给“主 CTA”(每屏一个);信任用中性/金色,收益用绿色;数字与单位分层排版;图表加坐标轴与空值规则
可访问性中已有 prefers-reduced-motion;但颜色是涨跌/验证的唯一语义,深色对比度未验证,键盘与读屏未提ch16 无障碍;ch13 能供性颜色之外加图标/文字;对比度 ≥4.5:1;所有交互可键盘完成;图表提供表格替代
如果只看一行

最严重的不是任何单个界面,而是“验证”这个全案唯一的差异化,在产品里被当成了一个标签,而不是一条体验。标签可以复制,体验不能。把验证做成一条用户能走完、能看懂、能复核的链,是这个产品唯一值得押注的护城河。

建议

20 条建议,按“先修什么”排序P0 只留 5 条;P0 不做完,P1 都是装修

P0 · 不做就会持续伤害信任

#动作为什么(AF4)验收标准工作量
P0冻结 7 条口径,建单一事实源:毕业线、押金、里程碑、平台币、曲线限额、曲线参数、费率ch8 诚实是最低成本的礼仪;一个数字两个版本,等于告诉用户“别信我们”参数表只有一个版本;界面所有数字由同一模型渲染;文档与演示站零冲突M
P0重做首页第一屏:一句话价值主张 + 三个可核对的证据 + “app+token”双段卡;banner 让位ch17 层级决定用户先看什么;ch11 少即是多;ch1 呈现模型必须贴近心理模型5 秒测试:路人能说出“这里和 pump.fun 有什么不同”;首屏不出现两个以上同权重 CTAM
P0项目页改成真正的双栏:左 Token、右 App;收入结论与证据入口提到首屏ch9 姿态;ch17 信息设计;Michael 的核心意见1440px 下两栏等宽;收入结论在首屏可见;两栏独立滚动不错位L
P0把“验证”升级成信任链:结论 → 来源 → 覆盖期 → 4 项检查 → 链上 Proof → 本地复核;删掉无法兑现的表述ch8 不欺骗、承担责任;ch15 可验证的反馈;ch17 让结论一眼可读一条链在项目页/验证页/持仓页复用;“fully permissionless”等表述与实现一致M
P0修掉核心交易动作的 6 个缺陷:Est receive、Delivery method、倒计时格式、图表坐标轴、未连接钱包态、出价失败反馈ch15 防错优先;ch21 控件承诺正确行为;ch12 消灭附加工作可用性测试中 5/5 用户能独立完成一次出价并说清退款条件M

P1 · 决定“像一个产品”还是“像一个 demo”

#动作为什么(AF4)验收标准
P1发币向导统一 6 步,删除团队分配/vesting 残留,增加“跳过后会怎样”与“到手现金/解锁时间”预览ch10 渐进展开;ch12 减少负担;ch11 保护流项目方在 10 分钟内走完;每一步知道“为什么问这个”
P1持仓页按“钱的状态”重构,拆“我买的/我发的”ch3 目标是第一位;ch15 状态可见任意时点能回答“我的钱现在在哪、下一步做什么”
P18 个标准空态/错误态模板(无钱包、无数据、验证失败、拍卖失败、网络错误、退款中、已结束、无权访问)ch15 失败不失风度;ch21 错误对话框每个模板含“发生了什么/为什么/下一步/能否撤销”
P1建 30 条术语表并全站替换(项目页/拍卖/毕业/验证/认证)ch17 一致性;ch13 习惯用法同一概念只有一个叫法;中英对照表进设计系统
P1徽章降噪:一个主徽章(收入已验证)+ 明细;流量/链上/X 认证降为次级标签ch17 视觉层级;ch11 少即是多项目卡上最多两个标签;每个标签可点开解释
P1首页卡片数据自洽:FDV/募资/目标/毕业线用同一价格模型计算ch8 诚实;ch17 信息设计任意卡片:FDV、募资额、目标、进度在数学上互相解释
P1移动端最小可用:只读 + 简化出价;双栏折叠顺序明确ch19 移动;ch9 姿态375px 宽能完成“看项目→看出价→出价”
P1可访问性基线:对比度、非颜色语义、键盘可达、图表表格替代ch16 无障碍;ch13 能供性用键盘走完全流程;对比度检测通过

P2 · 做完会明显更像“值得分享的项目主页”

#动作为什么(AF4)验收标准
P2项目页 CMS:团队、历史、画廊、代币如何集成进项目ch8 让产品值得被信任;Michael 的 Yelp/Amazon 类比项目方能把它当官网分享
P2季度报告模块标准化:结论/指标/链上证明/下期窗口/空态ch17 信息设计;ch15 反馈每季度一行,能追溯到证明
P2验证页提供“审计师导出包”(证明 + 检查项 + 链上记录)ch16 为不同需求设计;ch9 姿态审计师不登录也能复核
P2搜索/筛选增加“已验证收入 / 已连接数据源 / 实体类型”ch20 寻路;ch10 中级用户三类筛选各返回可解释结果
P2统一“未验证”的限额提示与排序惩罚ch8 有判断力;ch7 合乎伦理未验证项目不被隐藏,但代价可见
P2文案从“营销腔”改为“证据腔”(少形容词,多条件与数字)ch8 数字礼仪;ch17 内容质量每句宣传语都能被一条证据支撑
P2补数据可视化规范:坐标轴、空值、单位、负值、时间范围ch17 视觉信息设计所有图表遵循同一套规则
张力

五组绕不过去的取舍这些不是“设计问题”,是产品立场问题

① 首页叙事 vs 已定模块顺序

红线说“首页既有模块顺序不动”,但 CEO 和 Michael 都要“差异化一眼可见”。建议:不动模块顺序,只在导航下加一条“价值主张 + 三证据”横条,并把双 banner 换成“app+token”双段卡——这是最小改动、最大收益。

AF4 ch17 / ch1

② 四页收敛 vs 验证方独立入口

定稿把验证页挂在项目页“查看完整过程”里。但验证方要的是可分享的独立 URL、可下载的证据包、可复核的工具。建议:保留四页为主 IA,验证页作为“深链”存在,不占主导航。

AF4 ch9 姿态 / ch20 寻路

③ 深色高密度 vs 新手可读性

深色 + 五语义渐变是定好的品牌资产,不能推翻。但“信任”需要中性色和留白,“收益”才用绿色。建议:把绿色收回到数据与涨跌;验证/证明用金属金 + 中性底;每屏只留一个发光 CTA。

AF4 ch17 层级

④ 项目页心智 vs 交易优先的现实

Michael 说“当成项目页而不是代币页”,但用户来这里的直接动作是买。建议:首屏同时回答两个问题,但顺序按人物模型分:未持仓者先看“项目是什么/凭什么真”,持仓者先看“价格/下一步”。

AF4 ch3 目标 / ch9 姿态

⑤ 验证可跳过 vs 差异化

定稿允许“先发币后补验证”,这是冷启动的务实选择。但可跳过不能让“未验证”没有代价。建议:未验证 = 限额 + 排序靠后 + 灰标 + 不能进“已验证榜”,把代价写进发币向导第 3 步。

AF4 ch8 有判断力 / ch11 反馈

⑥ 中英文与目标市场

文档是中文,演示站是全英文,品牌口号是英文。建议:先定“英文优先、中文跟随”还是“中文优先”;两种都需要术语表,不能靠翻译补。

AF4 ch16 本地化

⑦ 透明 vs 公平

拍卖页把每笔出价的“上限”公开(Time / Wallet / Bid / Price / Max),本意是透明,结果把投资人的底牌也公开了——大户能在最后一小时把清算价顶到他刚好不被退款的位置。建议:公开成交价与总量,隐藏个体上限;用“匿名报价区间”替代逐笔上限。

AF4 ch8 有判断力 / ch15 反馈 / ch17 信息设计

和 Michael 的意见对照:哪些印证、哪些我们理解偏了

Michael 说的我们的落地AF4 判断还差什么
首页是 front door,差异化要一眼可见只加一条价值主张条,完整叙事给落地页ch17:第一屏决定层级,不能把核心叙事外包给第二跳主张条要带“可核对的证据”,不能只有口号
项目页 = 项目页,不是代币页;两个等宽竖栏已做双栏雏形,但 App 指标仍在下方通栏ch9:结构即姿态;ch17:等宽≠等权,要看信息重量真正等宽 + 收入结论上移 + 两栏独立滚动
首期没收入,强调连接状态等可信度信号已做“连接状态三态行”ch8:诚实比完整更重要;ch15:状态要可见把“未连接”的后果说清(限额/不能拍卖)
里程碑要写清“是什么”、追踪器、季度报告V2/V3 已补里程碑卡与季度报告行ch17:信息设计要让进度可读;ch15:非模态追踪补“未达标态”与“数据来源”;报告要有空态
项目方会引以为豪,要 CMS项目头 + 画廊 + 团队历史ch8:让产品值得被信任;ch11:编配团队/历史要有可验证信息,不只是装饰
给实体打 App/Project/Business 标签首期只做展示标签ch3:分类必须对应真实行为差异,否则是伪分类先验证“不同类型是否真的看不同指标”,再决定是否扩
待拍板

六件事,需要你定每条给选项和推荐;不定,界面就只能互相打架

#问题选项我的推荐
1首页第一屏改不改?A 不动(守红线);B 加价值条 + 双段卡(不动模块顺序);C 重做首屏B:满足差异化,又不推翻已验收结构
2收入验证结论是否上移到项目页首屏?A 保持在交易区之后;B 项目头下方加“证据条”,完整区仍在下方B:先给结论与入口,深度内容留在原位
3发币向导里的团队分配/vesting 字段?A 保留(旧模板);B 删除(按定稿“只有发售量 + 建池预留”)B:与定稿冲突的字段必须删,否则演示即误导
4“验证”对外怎么表述?A 继续用 “fully permissionless / anyone verifies”;B 改为“指定验证方出证 + 任何人可复核”B:技术事实优先,否则一次质疑就击穿信任
5移动端一期做不做?A 不做(明确提示桌面);B 做只读 + 简化出价;C 完整适配B:加密用户大量在移动端,但完整适配成本高
6中英文优先级?A 英文优先;B 中文优先;C 双语同步A:生态在 Base、口号是英文、演示站已全英文
别再往后拖的两条

第 1 条和第 3 条。前者决定用户 5 秒内信不信我们,后者决定我们是不是在用一个已经被否掉的旧模板骗自己。其余四条可以边做边定。

落地

30 / 60 / 90 天先修信任,再扩体验,最后补规模

0–30 天 · 止血

冻结 7 条口径与单一事实源;首页第一屏价值条 + 双段卡;项目页收入证据条上移;修 6 个交易动作缺陷;删掉与定稿冲突的字段与不实表述。
验收:5 秒测试 + 5 人可用性测试;界面数字零冲突。

31–60 天 · 成型

项目页真正双栏 + 两栏独立滚动;信任链组件三页复用;发币向导 6 步重排;持仓页状态机;8 个空态/错误态模板;术语表全站替换。
验收:项目方与投资人各 3 人完成端到端任务;错误态全部有出路。

61–90 天 · 扩张

移动端最小版;项目页 CMS 与季度报告;审计师导出包;可访问性基线;第二轮可用性测试与人物模型校准。
验收:移动端可完成出价;审计师无需登录可复核;人物模型更新一版。

最后一句

《About Face 4》里最狠的一句判断是:产品做不好,往往不是因为团队不努力,而是因为努力用在了“实现功能”上,而不是“设计行为”上。Launchpad 现在最不缺的就是功能与参数;最缺的是把“证明”这件事设计成一段用户能走完、能看懂、能复核的行为。这件事做完,我们才配得上那句 “Launch apps on proof, not promises”。

附录

页码索引与术语表方便回原书核对

章节页码(PDF 页 = OCR 页)

章标题PDF 页一句话
1数字产品的设计过程30–53为什么产品行为恶劣,以及目标导向设计的全貌
2理解问题:设计研究54–76定性研究、情境调查、访谈与观察
3用户建模:人物模型和目标77–109人物模型八步法与三层目标
4设立愿景:场景和设计需求110–124三类场景与需求定义五步
5设计产品:框架和提炼125–145交互框架、视觉框架、细化与验证
6创造型团队合作146–162小团队、跨领域协作、与敏捷共处
7良好产品行为的基础164–173伦理、目标明确、实用、优雅
8数字产品的礼仪174–195把体贴翻译成产品行为
9平台和姿态196–220独占/暂时/后台与网络三姿态
10为中级用户优化设计221–229永久中级用户与渐进式展开
11编配与流230–246保护流、和谐交互的十几条原则
12减少工作 消除负担247–268五类附加工作与消灭方法
13隐喻、习惯用法及能供性269–288三种范式、习惯用法、直接操作
14数据输入、存储与检索289–314数据完整、统一文件模型、数字汤
15防止错误 通知决定315–331非模态反馈、撤销、预览
16为不同的需求而设计332–352帮助、可定制、本地化、无障碍
17整合视觉设计353–378视觉层级、信息设计、一致性
18为桌面应用而设计379–441窗口、菜单、工具栏、鼠标与拖放
19为移动设备和其他设备而设计442–496移动导航、手势、其他设备
20网页的设计497–513页面交互、寻路、滚动、移动网页
21设计细节:控件和对话框514–570控件选型、对话框五目的、错误处理
附 A设计原则571–583伦理/目标/实用/优雅四组原则总表

术语中英对照

中文英文主要章节
目标导向设计Goal-Directed Design1
人物模型Persona3
行为变量Behavioral Variable3
场景剧本Scenario4
设计需求Design Requirement4
交互框架Interaction Framework5
视觉框架Visual Framework5
形成性评价 / 总结性评价Formative / Summative Evaluation5
姿态Posture9
独占姿态Sovereign Posture9
暂时姿态Transient Posture9
后台姿态Daemonic Posture9
渐进式展开Progressive Disclosure10
流Flow11
编配Orchestration11
附加工作 / 负担Excise12
习惯用法Idiom13
能供性Affordance13
顺从Pliancy13
直接操作Direct Manipulation13
非模态反馈Rich Visual Feedback15
可逆历史Reversible History15
视觉层级Visual Hierarchy17
寻路Wayfinding20
模态对话框Modal Dialog21

制作说明

原书为 584 页扫描版 PDF(Pdg2Pic 生成,无文本层)。本页用 macOS Vision OCR 逐页识别(中文简体 + 英文,584 页),再按章人工/多路并行整理;引文均标 PDF 页码。图表为基于原书内容的重新绘制,不是扫描件。项目诊断部分只使用工作目录中已有的产品文档与截图,未改动任何项目文件。