恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

深入了解交互？看透《交互设计精髓》就够了（三）

0.0°

2020-03-30 原创文章 经验/观点 举报 2648 3 3 0

点星设计关注

《About Face 4: 交互设计精髓》是一本数字产品和系统的交互设计指南，全面系统地讲述了交互设计的过程、原理和方法。很多产品开发中的流程，包括用户调研、视觉优劣等，书中都有详细讲解，是一种交互“圣经”的存在，时不时翻出来看看都会有不同见解。

和《要点提炼：设计心理学》一样，我会根据我看书时总结的思维导图，来罗列书中的重要知识点。为了避免流水账，我会在每个章节前面，列出本章节的知识结构，大家理解完结构后再看知识点，效果会更好。

上期回顾：

上期主要说了在进入产品原型之前，如何根据用户模型建立产品的期望、情境，以明确设计需求。根据设计需求，然后阐释了如何设计产品原型和进行可用性测试的相关知识。

本期主要介绍在进行交互设计的时候，一些具体可操作的理论和规则知识。

第二部分、设计行为和形式

Part 7、良好产品行为的基础

知识结构

一、设计价值

1.合乎伦理的交互设计

交互设计师对影响人类生活的系统进行设计，会面临道德问题。我们必须确保我们费劲心力设计出的产品做的是好事。产品设计是为用户做好事，但产品对其他人的影响有时候很难去估算。

不造成伤害
- 人际伤害：缺乏尊严、侵犯他人、羞辱他人
- 心理伤害：困惑、不舒服、烦躁、强迫性、无趣
- 身体伤害：疼痛、受伤、残疾、死亡、威胁安全
- 减少利润、降低生产力、失去财产或积蓄
- 社交和社会伤害：受到剥削或不公正对待
- 环境伤害：污染、生物多样性灭绝
改善人类
- 增进对人、社会和文化的理解
- 提高个人与团队的效率或张力
- 促进团队沟通
- 降低个人与团队之间的社会文化张力
- 促进平等
- 平衡文化多样性与社会凝聚力

2.目标明确的交互设计

基于用户目标与动机的理解，采取目标明确的设计
不仅理解用户目标，还要理解他们的局限性。创造出弥补缺憾且锦上添花的产品

3.实用的交互设计

商业、工程与设计团队之间必须进行积极的对话，即产品定义的哪些部分是灵活可变的，哪里有着明确的界限
三方团队相互信任与尊重，设计工作将顺利很多

4.优雅的交互设计

形式上的优美与婉约、科学上的精确与简洁

代表最简单而完整的设计方案
- 完美不在于无以复加，而在于无可删减
- 用最少的屏幕与器件来完成任务。运用最少的视觉区别明确传达想要表达的意思。根据角色的心理模型尽量减少形式与行为的添加。
拥有内在的一致性
1. 优秀的设计让人感觉是一个整体，各部分平衡和谐
适当顺应、调动认知与情感
1. 我们不会指望操作医疗器械的医生喜欢设备，我们只希望他能对设备潜在的危险能够心怀畏惧，小心翼翼
3. 5.交互设计原则
  是关于行为、形式与内容的普遍适用法则，促使产品行为支持用户目标与需求，创建积极的用户体验。
  - 作用于不同层面细节的原则
    - 概念原则：用来界定产品定义，产品如何融入广泛的使用情境
    - 行为原则：描述产品在一般情境与特殊情境中应有的行为
    - 界面原则：描述行为及信息有效的视觉传达策略
  - 行为与界面层面的设计原则使工作符合将至最低
    - 设计原则的主要目的之一是优化用户的产品体验
    - 对于生产工具和其他非娱乐导向的产品而言，意味着将工作符合将至最低

Part 8、数字产品的礼仪

知识结构

一、设计体贴的软件

1.体贴的产品关心用户喜好

2.体贴的软件是恭顺的

3.体贴的软件是乐于助人的

4.体贴的软件是具有常识的

5.体贴的软件预见需求

6.体贴的软件是尽责的

7.体贴的软件不会因为自己的问题增加用户的负担

8.体贴的软件会即时通知我们

9.体贴的软件是敏锐的

10.体贴的软件是自信的

11.体贴的软件不问过多的问题

12.体贴的软件即使失败也不失风度

13.体贴的软件知道什么时候调整规则

14.体贴的软件承担责任

15.体贴的软件能够帮助避免低级错误

二、设计聪明的产品

1.利用计算机的空闲周期

比如：Mac的系统搜索非常流畅，能快速检索出要搜索的内容。内在逻辑就是计算机在空闲的时候自动扫描系统，建立内容检索。当用户使用搜索的时候，就能够快速检索出内容。

2.聪明的产品有记忆

即产品记住用户的个性化设置，下次使用的时候不用再次进行调整

3.聪明的产品能够预测需求

即提前感知用户的需要

4.聪明的产品能够记住细节

记住文件位置
推断信息
取消多会话
录入过去的数据
程序文件的外部程序活动

5.让聪明的产品发挥聪明

缩小决策数量
偏好阈值
多数情况下，多数是对的

三、设计社交软件

1.社交软件要知道社交规范和市场规范的区别

2.社交软件帮助用户展现最好的一面

用户身份
动态VS静态用户形象

3.允许简单协作

4.知进退

5.助于增长网络环境

6.社交产品尊重社交圈的复杂性

7.社交产品尊重其他用户的隐私

Part 9、平台和姿态

平台：使产品能运转起来的软件和硬件的共同作用体，包括用户交互和产品内部运转。

姿态：产品的行为立场，也就是产品对用户的展现方式。姿态讨论的是用户在与产品交互上投入多少精力，以及产品如何回应这些精力投入。

知识结构

一、产品平台

桌面软件、网站和网络应用、电话、平板电脑、车载系统、游戏机等
是描述产品的几个重要特征的简写，包括物理形态、显示面积大小、输入方法、网络连接、数据库能力

二、产品姿态

平台和姿态是紧密相连的，电脑和手机有着不同的用户关注点和交互层次
产品的外观和行为应该对其使用方式有所反应，而不是随意定的

三、桌面软件姿态

1.独占姿态

程序长时间占据使用者的注意力，用户使用独占应用时，通常发现他们处于一种工作流的状态。

锁定中级用户
- 独占姿态的程序应该为永久的中级用户优化，而不能将主要目标放在初级用户上
- 独占应用程序的成功依赖于其大多数的中级用户
慷慨使用屏幕空间
- 尽可能多地使用屏幕空间，不必吝啬
- 全屏幕使用独占应用程序，让它发挥最优效果
使用保守的视觉风格
- 用户会长时间盯着应用程序，应该考虑弱化视觉表现上的颜色和纹理
- 使用保守颜色
丰富的视觉反馈
- 设置程序状态、数据状态、系统状态的视觉提示和其他有用的用户行为暗示
- 一开始用户可能不会理解，也不会理会。但一段时间后，新手用户会发现他们开始思考其意义并进行试探性的探索。
支持丰富的输入方式
以文档为中心
1. 程序内部包含文档的子窗口应该始终最大化，比如Word
  
  2.暂时姿态
  在打开短暂的时间后随机关闭，用一套有限的附加控件展现一些单一的功能。暂时应用程序必须简单、清晰并且意思明确。
  - 明亮而清晰
    - 界面上的控件应该比独占更大
    - 醒目的图形有助于用户更快的定位
  - 保持简一
    - 暂时式应用程序只使用一个窗口和试图
    - 可以拖动
  - 记住用户的选择
    1. 应该处于上一次的位置和配置状态下
    3. 3.后台姿态
      - 不与用户互动的程序
      - 如win状态栏右下角的那些图标
    4. 4.网络姿态
      - 信息类网站姿态
        信息类网站由导航和搜索引擎组成，前者帮助用户打开不同的页面，后者以目标为导向对某个页面进行定位搜索
        平衡独占和暂时姿态
        有用信息的显示密度要适当。便于首次或者不经常使用网站的用户学习和搜索
        独占属性
        考虑用户群体使用的屏幕分辨率
        暂时姿态
        对于每周或者每月才更新的网站，用户通常只做间歇性的访问，因此导航必须清楚
  - 事务性网站姿态
    - 事务性网站的暂时姿态要求我们不能强迫用户做没有必要的导航动作
    - 用户对载入时间的感知与其能否达成目标有更紧密的联系，而和实际的载入时间关系不大

网站应用姿态

独占式网站应用
① 提供信息和功能，力图为更为复杂的人类活动提供最佳支持，通常需要丰富并交互的用户界面 ② 尽可能避免或者少的重新渲染或刷新页面
暂时姿态网站应用
一个用户的暂时式应用有可能是另一用户的独占式应用。要思考两个用户需求在多大程度上能够兼容

四、移动设备的姿态

1.智能手机和手持设备姿态

卫星姿态
- 强调信息的检索和浏览，必须充分利用设备上有限的屏幕控件
- Kindle、谷歌眼睛、iPad、手环都属于卫星姿态的设备
独立姿态
手机

2.平板电脑姿态

设计师需要避免平板电脑看起来像特大号的手机屏幕

3.其他平台姿态

信息亭姿态
- 信息亭的使用者通常是首次使用者
- 多数人不会在信息亭上花费很多时间
- 信息亭不适合大量数据的输入
- 信息亭是暂时姿态
远距离界面姿态：电视和操控性游戏
汽车界面姿态
智能家电姿态
把众多用户并不想要的新功能强加到新一代数字产品设计中，简单的LCD触摸屏变得不再简单，而是令人困惑和行不通

Part 10、为中级用户优化设计

如何设计出一种简单、一致的界面同时满足初学者和专家的需求

知识结构

一、永久的中级用户

大多数用户即非新手又非专家，而是属于中级用户
没有人愿意永远当新手
为中级用户而优化设计

二、扭转界面

好的用户界面既不迎合新手，也不取悦专家，而是把大部分工作放在满足永久的中间用户上

1.付出与回报要相称

用户只有获得充分的回报，才会付出相应的努力
用户界面不能为实现简单的结果而进行复杂的设计，除非结果也很复杂

2.渐进式展开

如PS界面右边的那些属性窗口

3.组织界面的扭转

按照三个原则对界面中的部件和显示器进行整理：使用频率、转换程度、风险承担程度。

使用频率：部件、功能、物件和显示器在一般日常模式中的使用频率。最经常使用的工具和按钮放在触手可及的地方，不太常用的功能确保点击次数不超过两次就能实现
转换程度：由于某一功能或命令引发正在处理的界面或者文档、信息突然发生变化的程度
风险承担程度：不可更改的功能或者更改后会产生危险后果的功能

三、为三层用户设计

1.新手想要什么

不可将改善新手使用产品时产生的挫败感，视为目标。好的软件缩短这一过程，并且不将注意力集中在这一过程中。

将新手想象成为非常聪明但很忙碌的人
- 聪明的人在理解原因和效果后会学的更好，使用心理模型来弥补这种矛盾。
- 让呈现模型紧密符合用户的心理模型
欢迎新手加入
- 一个新手必须迅速掌握程序的概念和范围，不然他可能会彻底放弃
- 无论提供什么样的额外帮助，当不再需要这种帮助的时候就应该消失

2.专家想要什么

专家（有时被市场人员称为有影响力的人）也是很重要的群体，他们的选择能够对市场交易产生重大影响
会寻找奥妙的功能，对经常使用的工具栏，要求快速访问，甚至需要所有功能的快捷方式

3.永久中级用户需要什么

现实情况是大多数实际用户通常被忽略
中级用户需要快速进入最经常使用的工具
中级用户知道高级功能在哪，即使他们用不到，这些高级特征的事实让用户感到放心，让他们确信投资购买这个程序是正确的选择

Part 11、编配与流

产品设计的目标是让用户在使用产品时生产力更高、更高效、更投入，让用户保持正确的心态。

本质讨论人类心理工程学：让产品支撑起用户的智力和效率，避免破坏用户在投入生产时的专注度。

知识结构

一、流与透明

当人们全身心地投入在某个活动中时，会对周边干扰视而不见，这种状态成为“流”
如果一个应用程序不断地骚扰用户，打断其流状态，就很难让用户保持在高生产力状态
用户界面与用户目标没有直接关联，终极用户界面往往是没有界面
如果产品和用户交互得很好，交互机制就会消失了，让人们直接面对他们的目标，意识不到软件和开发人员的介入

二、编配

如果一个应用程序与用户的交流安排得当，则与软件的交互几乎就是透明的
编配即和谐的组织，结合场景思考交互和视觉布局

三、交互设计原则

1.遵循用户的心理模型

每个用户心里对软件如何执行任务都有自己自然的想法，人脑通过寻找某种因果模式来深入理解机器行为

2.少就是多

以更少的元素做更多的事，编配的重要性。一个交互产品中内部的逻辑可能非常复杂，而重视优雅和简单更为重要，要让技术有效地为人的需求服务。

3.让用户指示而不是讨论

有时，交互产品莽撞地要求我们展开对话，通知我们不足之处，要求得到答案。事实是角色颠倒了，应该是用户提出要求，软件回答。

4.提供选择，而不是提供问题

确认对话框停止进程，要求用户回答问题，知道得到答案才会消失。而工具栏始终存在，提供直接操作
无模态选择有助于给用户带来控制感和掌控感，这正是他们使用数字产品时想要的感觉

5.让必要工具近在咫尺

保证工具和应用程序的状态信息清晰地呈现出来，工具之间的切换快速简单
放在选项板或工具栏供新手和中级用户使用，提供快捷键供专家用户使用

6.提供无模态反馈

模态：让程序处于一种特定状态，用户必须处理，然后才能返回常态，继续执行任务。

通知用户最好的方式是无模态反馈

7.设计要以防万一，但应预测其可能性

冗余交互（通常以对话框的形式）出现在界面中。
要把可能性和概论分开。
用户新建文档后，99%的可能是需要保存的。

8.上下文信息

贴合用户的心理模型，将信息以用户能看懂的方式呈现

9.反映对象和应用程序的状态

当程序休眠，应该看上去是休眠的
当程序恢复时，看上去应该是恢复的样子
用户界面对象的状态也应该对用户是显而易见的
使用非模态的显示给予用户足够的反馈

10.避免不必要的报告

对用户而言，知道正常情况下发生的事情细节让人惊慌失措，容易分神。

不要用对话框报告。

11.避免空白状态

编配用户交互的关键是采用目标导向
问自己某个交互能否让用户快速、自信地实现目标，因为胆怯的程序需要人指示才能行。
Powerpoint会直接给用户创建一个常用文档，而不是先要求用户设置基本样式

12.区别命令和设置

程序应该直接采用合理的默认设置或者上次的配置，而并非盘问精确的配置细节后执行。
在工具栏上放置快速访问功能的按钮，把功能配置用户界面放在菜单中。配置工具更适合用户学习和配置，而按钮则为用户提供快速简单的动作

13.为响应而优化，但容许延迟

用最小的延迟，向用户提供最合适、丰富的交互，还要针对已经选择了但无法重新访问这类情况设计出解决方案。

0.1秒以内，响应即刻

1秒左右，有响应

10秒以内，系统变慢了

10以上，不再集中注意力在系统上

四、动作、时间与过渡

动画切换帮助用户创造一个强烈的心理模型，把呈现在视野里的东西与上一个视图的内容联系起来。

1.作用

让用户注意力集中在一个地方
展示对象及其动作之间的关系
在视图或者对象状态之间的切换中保持背景不变
让人看到进度或者动作
创造虚拟空间，帮助用户实现从一个状态向另一个状态的转变
激发融入和进一步操作

2.注意

短暂、愉快和响应：时间不超过1秒
简单、有意义和恰当
自然和顺滑：模拟真实的物理交互；弹性；重力。

Part 12、减少工作，消除负担

用户与数字产品交互时执行4类工作

知识结构

一.负担的类型

我们花在一些事情上的努力，并不能直接完成目标。比如：安装软件、配置网络、文件备份都属于负担任务

1.导航负担

多个屏幕、视图或页面之间导航
- 在多个视图或网页之间移动是最让用户不知所措的一类导航
- 严重转移注意力，打断用户工作流，强迫他们进入新的情境
- 如果窗口数目过多，那么用户会完全失去方向感，并会体验到导航创伤，迷失在界面中
- 把所有交互放在单独的主视窗中，使其包含多个独立窗格以避免这个问题
窗格之间导航
- 窗口或视图可以包括多个窗格：他们相邻，或用分割线隔开，通过标签识别
- 相邻支持窗格数目太多，或摆放位置与用户工作流不匹配时，会造成混乱
- 使用标签窗格，如Excel底部的标签
工具和菜单之间的导航
- 如PS的工具条，需要长按图标才能选中填色工具
- 相邻摆放，避免因频繁的工具导航而打断工作流
信息的导航
1. 平移和缩放一起使用的时候，会让用户产生更多的导航困难，比如地图应用

2.拟物化负担

人们自然而然地倾向于在新的数字环境中使用旧的表达，成为拟物化
机械时代的方法不应照搬到数字世界中，这些呈现方式产生负担，而且毫无必要地限制了交互，而新的交互方式本可比旧模式更高效
设计师很容易以用户友好的名义陷入拟物化陷阱
人们习惯了前一时代的模式和形态，自然会尝试利用这些工具，以描述更加不确定的新时代。如汽车最初被称为“铁马”“无马马车”

3.模态负担

错误、通知和确认信息
典型的模态错误消息没必要出现，要么告诉用户不关心的东西，要么要求用户修复某种理应由程序修复的情况
向用户请求许可
- 不要让用户请求许可
- 任何输入之处应允许输入
- 在亚马逊上改变已保存的地址，必须先跳转到另一页面；但如果想改变显示的值，应该直接就能改，而非要到另外一个地方请求保存

4.样式负担