HCI002：设计原则（一）

4+的人机交互系列002

原则一：直接操作 Direct Manipulation

交互设计是一门专业化的学科。直接操作是坠吼的。

关于量杯设计的故事。一个透明材质，侧边标有刻度的量杯，设计成这样仿佛天经地义。你平时怎么使用量杯呢？你把量杯放在桌子上，拿起水壶倒水，预估着快到你的预计刻度线了，附身查看刻度，或者把量杯举起来与视线平齐，然后再倒，再查看。好像有什么不对？

另外一个量杯，杯内有倾斜的突出，上面有刻度，你可以一边倒水一边从上面看到刻度线。因吹斯挺！

以人为本的4条经验教训

1. 仅仅简单询问人们想要什么，往往使人忽略重要契机（福特汽车的老梗：如果你问人们想要什么，他们会说想要一辆更快的马车）
2. 这些问题和契机，可以通过走出去实际观察行为获得
3. 随身携带设计原型可以让观察事半功倍
4. 世界上有很多人在尝试发明创新

如果把量杯当成用户界面，第一步是采取行动（行动鸿沟：用户如何才能知晓该去做什么？），第二步是评估结果（评估鸿沟：用户如何能知道发生了什么）

人们如何找出系统状态与解释系统状态得到的含义之间的对应关系？

An affordance is the possibility of an action on an object or environment. ——via Wikipedia

1. 搬到屏幕上来。一个按钮，一个把手，一个可操作暗示（affordances）
2. 为用户提供明确持续的反馈
3. 界面与已有标准，平台惯例和其他规则一致
4. 任何时候尽可能让人们能退回上一步
5. 提供一个系统途径，挖掘耨个应用中的全部功能
6. 可靠性。归于可用性，不应发生意料之外的状况

Command Line vs GUI ? 命令行和图形界面哪个更好？

GUI 直接操作的强大之处——所有操作的即时反馈，对对象的连续表示，且很好的利用了物质世界的隐喻。

• 命令行的优势，抽象化表达。e.g. 批量转移符合某个条件的文件
• 图形化的劣势，当功能全部罗列，将不具备可发现性 e.g. 展开ppt的所有工具栏
• 更进一步，手势操作。e.g. 两指放大缩小，很自然，比喻明确，反馈即时；四指划过？？代表啥？需要比喻和视觉信号。

推介了《设计心理学1：日常的设计》, 我写的上一篇《HCI001：用户研究》也有提到诺曼这本，正好我对这本进行了精读，读书笔记点这里。

Mental Models 心理模型

e.g. 两扇门，开和不开的门拥有同样的设计（于是你每次都要试一试哪扇门可以开）；冰箱的两个调节旋钮（怎样调节大小冰箱温度才会更低？）

要明确：用户的心理模型和设计者的不一致。
So，通过类比旧模型让用户认识新模型。

Slips vs Mstakes 滑移和错误

Slips ——按错 ——机械失误——解决：人机工程学，可视化设计
Mstakes——意图错——错误模型——解决：更好的反馈，弄清楚选择是什么

原则二：Representation Matters

（这个原则不知道怎么翻译才好，在总结里它提到时用了world in miniature 表述，似乎更直观些）

工作记忆如此之短，让我们用一些方法来解放他们。
e.g. 橘子排序 vs 面包圈排序
e.g. 用纸牌玩凑数字15 vs 井字游戏XXOO数字版

前后一样，但前后有什么不同？——表现问题的方式

人工智能科学家司马贺 （Herb Simon）说：解决一个问题仅仅意味着将这个问题恰当地表现以至于答案自动呈现。

橘子排序和纸牌凑数字之所以困难，是因为他占据了我们的工作记忆 Working Memory。我们需要记忆怎样的移动是被允许的，哪些数字我们已经有了。在用户界面所做的最重要的事，是通过把问题的限制嵌入到用户界面本身，来减轻工作记忆。

经典的记忆组块 7±2，设计师法则 2±2，也就是说用户基本不需要记忆

e.g. 经典的GTD，写下要做的事，避免占据工作记忆。

原则三：Distributing Cognition 分布式认知

课里正经讲概念，翻阅了相关论文，概念如下：

分布式认知(Distributed Cognition)是一个包括认 知主体和环境的系统，是一种包括所有参与认知的事物 的新的分析单元。分布式认知是一种认知活动，是对 内部和外部表征的信息加工过程。分布式认知是指认 知分布于个体内、个体间、媒介、环境、文化、社会和 时间等之中。

知识在脑中是非均匀分布的。分布式认知强调的是认知现象在认知主体和环境间分布的本质。

认知活动可以被看成是在媒介间传递表征状态的一种计算过程。其中，媒介可以是 内部的(如个体的记忆)，也可以是外部的(如地图、图表、计算机数据库等)。 认知在文化上分布，在社会，在具体情境，在时间中。

e.g. 俄罗斯方块游戏，地铁换乘图

后记

本次主要讲了三个原则，第一个原则好表述也好理解，第二个原则不好表述但好理解，第三个原则好表述但不好理解。。。（扶额）

下一篇是我比较熟悉的部分，主要有视觉设计的三个目标，设计上的一些专有名词和概念，如何判断两个界面哪个更好，以及面对面实验和网络随机实验的执行方法和一些实例。

ChangeLog

• 170416 初稿（未完）
• 170417 进一步梳理
• 170505 补充
• 170506 发布

Reference

• Class | Design Principles: an Introduction - University of California, San Diego | Coursera
• Book |《The Sciences of the Artificial》 英语 平装 1996年10月31日
  Herbert A. Simon (中译本：《人工科学：复杂性面面观》)
• Paper | 《基于分布式认知理论的扩展资源模型 》©2005 Journal of Software 软 件 学 报 Vol.16, No.10 王常青, 邓昌智, 马翠霞, 华庆一, 戴国忠
• Paper | 《分布式认知——一种新的认知观点》周国梅 傅小兰