确定关键词;与作者达成共识


以活动为中心的设计:ACD
产品接触点:用户与产品发生交互的关键点
用户场景:描述用户完成一项任务的故事
行为模式:是人们有动机、有目标、有特点的日常活动结构、内容以及有规律的行为系列
行为变量:是市场细分中根据顾客对产品的了解程度、态度、使用情况与反应等划分市场的变量。包括使用时机、追求的利益、使用经验、使用频率、忠诚度、需求阶段和对产品的态度等

作者的问题


交互设计解决如何设计行为

作者的回答


概论

  1. ![](https://cdn.nlark.com/yuque/0/2020/png/586762/1595345703220-0ec8776d-67c4-439f-b7f6-789e373cd527.png#crop=0&crop=0&crop=1&crop=1&height=444&id=JZRii&originHeight=444&originWidth=546&originalType=binary&ratio=1&rotation=0&showTitle=false&size=0&status=done&style=none&title=&width=546)

交互设计是面向目标的设计 , 用户体验设计,交互设计是用户体验设计的一部分

本书主要从原则、模式、过程三个方面构成

  • 原则:关于设计实践的思考
  • 模式:交互设计术语,用于处理用户要求和设计关注点
  • 过程:整体流程。理解和定义用户需求—建立相应设计框架—应用设计原则和模式

    本书结构

  • 目标导向设计构成

  • 高级交互设计原则:适用于所有领域
  • 互联网交互设计原则:互联网web、app、pc

第一部分:目标导向设计

第一章 数字产品设计过程

理解用户期望、需求、动机和使用情境

  • 理解商业、技术及行业机会、需求和制约
  • 以上述知识为规划基础来创造产品,让产品的形式、内容、行为可用、易用,令人满意,无论经济还是技术上均切实可行

    产品行为恶劣表现

  • 粗鲁无礼:警告过多且使用专业术语、不描述原因

  • 要求人像计算机一样思考
  • 马虎大意
  • 用户被迫做大量工作

    原因

  • 重点错置 📒《about face 4 交互设计精髓》 - 图3

  • 无视产品真实用户
  • 利益冲突:开发者在易于编程和易于使用之间的选择显而易见
  • 设计流程缺失

    规划并设计产品行为

  • 了解使用这些产品的用户如何生活和工作,所设计的产品的行为和形式能够支持和方便用户的这些行为

  • 开发三原则
    • 功用性
    • 可行性
    • 称许性
  • 行为设计需要了解用户从购买到使用完整过程中童产品的关系。要了解用户希望如何使用该产品,以什么样的反思使用产品,及使用产品的目的
  • 方法:目标导向设计

    识别用户目标

    📒《about face 4 交互设计精髓》 - 图4

  • 用户目标主要是个人需求-个人目标促成商业目标的实现

  • 用户界面无法满足用户目标
    • 让用户感觉自己的愚蠢
    • 导致用户犯大错
    • 费很大力气才能有效操作
    • 无法带来愉快的体验
  • “编写了大量重要且不容变更的代码之后,想让程序服从于用户目标就不是那么容易了”
  • 目标vs任务与活动
    • 目标是对最终情况的预期,而任务和活动知识达成目标的中间步骤
    • ACD强调用户情境,有一定帮助。知道用户行为是什么,但是却不知道为什么
    • 目标一般没有变化,但是任务和活动依赖于技术水平
    • 完全按照对活动和任务的理解进行设计,容易让设计束缚于早已过时的技术模式中
  • 设计要满足情境目标

    • 易于学习是一个重要原则,但并不是每次都是最主要的

      实现模型和心理模型

  • 计算机素养:迫使人们理解应用逻辑的内在工作原理,而不是让数字产品适应人们普遍的思考方式

  • 实现模型:也就是系统模型。有构造,但是没有连贯机制就会使用户迷惑。
  • 心理模型:人们使用产品时不需要了解复杂工作原理的所有细节,所以会创造一种快捷的认知方式来解释复杂的机制
  • 呈现模型:设计师模型。设计师主要目标是使呈现模型经可能的匹配用户的心理模型
  • 设计原则:用户界面应该基于用户心理模型,而不是实现模型
  • 设计原则:目标导向的交互设计反映了用户的心理模型

    目标导向设计概论

    消除隔阂

  • 多数传统方法无法将研究结果转化为设计方案:

  • 一个原因:设计师不参与用户研究过程。目前很多设计只是装点一下视觉效果而已
  • 解决方法:将设计师引入用户研究过程
  • 另一个原因:捕捉用户行为并恰当的知道产品定义的方法并不多。多数方法不是提供用户目标的信息,而是提供任务层次的信息。可以确定流程,但是不能优化框架。
  • 解决方法:我们需要一个系统过程 📒《about face 4 交互设计精髓》 - 图5

    设计过程概述

    交互设计的五个组成部分:理解、抽象、架构、呈现、细节-吉利恩·克兰普顿·史密斯
    详细的过程 📒《about face 4 交互设计精髓》 - 图6 📒《about face 4 交互设计精髓》 - 图7

    研究

  • 观察或情境访谈,获取真正用户的定性数据。

    • 主要成果:找出一组行为模式,帮助我们对现有模式的分类。
    • 模式指出用户使用产品的目标和动机(希望达到的结果)。商业科技领域对应某种职业角色,消费品对应生活方式选择
  • 包括考察竞争对手,市场研究、品牌战略分析。目的在于加深理解,阐明必须支持的商业目标、品牌属性及技术限制

    建模

  • 将发现的行为模式综合到领域模型及用户模型中。

  • 领域模型包括信息流和工作流程
  • 用户模型:包括行为、态度、目标、动机的明确分组

    • 1.对人物模型综合、区分角色及优先级
    • 2.研究不同种类用户目标,交叉对比,确立优先级
    • 3.将人物模型映射到一系列行为中,保证不缺失或重复

      需求定义

  • 设计方法:情境场景

  • 1.找出产品接触点,深化细节,完善流程。
  • 2.人物模型使用产品的技巧、使用环境
  • 3.商业目标、品牌属性、技术限制
  • 上面三点需求与人物模型的目标和需求进行平衡
  • 原则:将人物模型的目标和需求置于首位。人物模型帮助我们确定哪些任务重要,原因何在
  • 分析人物模型(对象、动作、情境),而后对其进行优先级排序。

    框架定义

  • 交互设计原则(自下而上)

  • 交互设计模式(自上而下)
  • 按照交互原则,将数据及功能性需求的描述,将其转变为设计元素,输出设计草图和行为描述
  • 制作物理原型,保证整体交互概念可用
  • 视觉设计者运用品牌界面结构的理解来进行视觉设计

    提炼

    输出详细的设计文档

    开发支持

    根据开发产生的问题调整设计

  • 产品成功的关键是目标,不是特性

  • 始终要将注意力放在用户目标上
  • 设计原则:交互设计不是凭空猜测,也不是个人偏好

第二章 理解问题:设计研究

定量研究与定性研究

主要讨论定性研究
定量研究适用于没有情绪的实验,定性研究适用于“人”
定量研究可以帮助我们知道“是什么”,但是不能知道“为什么”,“怎么样”p29

目标导向设计研究

  1. 启动会
    1. 产品是谁
    2. 用户是谁?
    3. 用户最需要什么?
    4. 哪些客户和用户最重要?
    5. 设计团队和商业上面了何种挑战?
    6. 谁是最大的竞争对手?为什么?
    7. 未来熟悉产品、业务和技术领域知识,需要了解何种内外部文献资料
  2. 文献综述
    1. 内部资料
    2. 行业报告
    3. 网络搜索
  3. 产品/原型和竞争者审核
  4. 利益相关者访谈
    1. 产品初期设想
    2. 预算和日程计划
    3. 技术限制和机遇
    4. 商业驱动
    5. 利益相关者对用户的看法(例如顾客支持代表)
    6. 要接受相关意见,便于拟定解决方案时利益相关者能够接受,但是不能照单全收,一些用户会通过提出解决方案来哦表达问题,设计师就需要找出问题。
  5. 主题专家访谈
    1. 对于技术性极强的领域来说,至关重要
    2. 要注意:倾向于向专家级用户而不是永久的中级用户的角度
    3. 主题专家知识渊博,但不是设计师
    4. 确保能获得主题专家的协助
  6. 客户访谈
  7. 用户访谈
    1. 产品如何适应用户生活和工作流程,用户何时、因何种原因以及如何使用产品
    2. 用户角度的领域知识,用户完成工作需要知道的信息
    3. 当前任务和活动:包括现有产品需要完成和不能完成的
    4. 使用产品的动机和期望
    5. 心理模型:用户对于工作、活动的看法,以及对产品的期望
    6. 现有产品的问题和不完美之处
  8. 用户观察

    访谈并观察用户

    1. 情境调查:
    2. 环境选择用户熟悉的环境
    3. 伙伴关系:合作的方式探索用户
    4. 解读:研究收集到的用户行为
    5. 焦点:设计师应该巧妙的引导访谈
  9. 改进情境调查
    1. 缩短访谈过程
    2. 小规模设计团队:依次进行每一场访谈
    3. 首先找出用户目标
    4. 超越商业情境
  10. 为人种学访谈做准备
    1. 确定候选人:合适的、多样化的用户样本和类型
    2. 人物模型假设
      1. 哪些不同类别的人可能会使用这些产品?
      2. 他们的需求和行为可能会有何变化?
      3. 需要探索哪些行为范畴和环境类型?
    3. 商业和消费领域角色
      1. 对于商业用户,可以通过职位类别来确定用户类型
      2. 对于消费用户,用户类型主要来源于用户态度、能力、生活方式选择或生活阶段等因素。
    4. 行为和人口统计学变量
      1. 根据用户的需求和行为来区分不同的用户群体
      2. 消费品用户通过组合用户类型所对应的行为变量来区分,业务和技术用户中通过行为变量挖掘同一业务角色的不同需求和动机
    5. 技术专业知识与行业专业知识
      1. 行为区分:技术专业知识和行业专业知识之间的不同。
      2. 领域支持及技术易用性也是产品设计的必要部分,如果经验较少用户是目标市场的一部分,界面需要提供领域支持。
      3. 环境因素
        1. 公司规模
        2. 公司位置
        3. 产业、部门
        4. IT部门规模设置
        5. 安全级别
      4. 行为变量及环境变量都需要领域方面的支持
    6. 做好计划
      1. 创建人物模型假设后,加上潜在角色和行为、人口统计学及环境变量,制定访谈计划。
      2. 每个假设的行为模式要经过大约6次访谈才能得到证实
  11. 进行人种学访谈
    1. 建议两位设计师参加:一位负责访谈并适当做些笔记,另一位负责详细记录访谈内容。每场用户访谈一个小时左右足够。但医疗、科技和金融服务等辅助领域除外。
    2. 访谈控制在每天6次以内,留时间进行总结。
    3. 人种学访谈阶段
      1. 早期访谈问题较广泛、开放。重点是从用户角度搜集领域知识
      2. 中期访谈用户模式初步显现,设计师开始提出开放式和明确的问题,形成初步轮廓,问题更关注于行业细节设计
      3. 后期访谈确认先前观察到的模式,进一步阐明用户角色和行为,侧重封闭性问题。
    4. 基本方法
      1. 在交互发生的地方进行访谈
        1. 观察他们正在使用的产品,了解交互环境
        2. 注意一下他们需要的信息类型、不适当的系统、任务频率和优先级、以及工作流程类型
      2. 避免按照固定的问题进行提问
        1. 可以有标准化的话题使用,话题清单可以随着访谈进程而演变
        2. 目标导向型问题
          1. 目标:哪些事会让你愉快?或是糟糕?
          2. 机会:哪些事情在浪费你的时间?
          3. 优先级:哪些是最重要的事?
          4. 信息:什么帮助你做决定
        3. 系统导向型问题
          1. 功能:使用产品时做的最多的事情是什么?
          2. 频率:产品那个部分使用频率最高?
          3. 偏好:你喜欢产品的哪些方面?最讨厌什么?
          4. 失败:你如何解决遇到的问题?
          5. 经验:你使用什么样的快捷键?
        4. 工作流程导向性问题
          1. 过程:做的第一件事是什么?然后呢?
          2. 频率:这件事多久做一次?
          3. 特殊情况:通常一天是怎么过的?什么事情不寻常?
        5. 态度导向性问题
          1. 期望:未来五年的规划是什么
          2. 避免:你不愿意做什么?那些事在拖延
          3. 动机:工作中最满意的是什么?哪些问题你常常会优先解决
      3. 假装成门外汉,而非专家
      4. 采取开放式和封闭式问题相结合引导提问
      5. 首先关注目标、任务其次
      6. 避免把用户当设计师
      7. 避免讨论技术问题
      8. 鼓励讲故事
      9. 请求演示和讲解
      10. 避免诱导性问题
  12. 访谈之后

    1. 每次访谈,设计团队都要比对笔记
    2. 通览所有笔记,标注或重点画出数据中的趋势和模式

      定性研究的其他类型

    • 焦点小组
    • 可用性测试:重新设计时可采用此方法发现改进点,或是测试新设计的功能
    • 卡片分类
    • 任务分析:通过问卷调查或开放式访谈来深入理解人们如何执行具体任务
      • 用户执行任务的原因
      • 任务的执行频率与重要程度
      • 提示:推动或促使任务执行的因素
      • 依赖关系:执行任务的要素和完成任务的必备条件
      • 相关人员有哪些,他们的职责和角色
      • 执行的具体动作
      • 做出的决定
      • 支持决策的信息
      • 有哪些问题:失误和意外情况
      • 如何纠正这些失误和意外

第三章 为用户建模

为何要建模

人物模型、工作流程模型及物理模型。

人物模型的力量

  • 不必满足所有人的需求。代表最广大关键人群需要的用户,之后进行优先级排序,满足最重要人群需求的同时,不会损害次重要个体的需求。
  • 人物模型作为设计工具的优势
    • 确定产品的功能及行为:人物模型的目标和任务奠定整个设计的基础
    • 便利利益相关者、开发人员和其他设计师交流。
    • 就设计意见达成共识和承诺
    • 衡量设计的效率
    • 助力市场营销和销售规划等与产品相关的其他工作。
  • 任务模型助于避免各种设计陷阱

    • 弹性用户:每个人都对用户及需求有自己的理解,到了做决定的时候,用户成了弹性概念,为了适应团队中强势者的观点,容易被扭曲变形
    • 自我参考设计:设计者或开发人员将自己的目标和动机加入产品设计
    • 边缘功能设计:不要把边缘功能当成重点,虽然这是需要考虑的。

      人物模型为什么有效

  • 人物模型是用户的化身

  • 人物模型以研究为基础(其他补充数据)
    • 脱离用户的情境进行访谈
    • 利益相关者和主题专家提供的用户相关信息
    • 焦点小组、调查等市场研究数据
    • 市场划分模型
    • 文献综述和前期研究收集的数据
  • 人物模型代表特定产品的用户类型
    • 人物模型被描述成某个具体人
    • 跨产品人物模型:不同产品应该单独研究课开发不同的人物模型
    • 模型≠模式化信息
      • 人物模型具有代表性、值得信赖,但不能一成不变
  • 人物模型拓展了用户行为的范围
    • 不同人物模型代表不同的关联行为模式
  • 人物模型有动机
    • 模型必须要有目标
  • 人物模型可以代表用户之外的相关人士
    • 客户/顾客模型(即并非真正使用产品但和产品有关联的人)
    • 反人物模型(避免为其服务的人物模型)
  • 人物模型是比其他用户模型更合适的设计工具

    • 用户模型包括人物模型、用户角色、用户信息、市场划分等。描述永固以及用户同产品关系
    • 用户角色:包括需求、兴趣、期望和行为模式。
    • 人物模型提供全面的用户及情境模型,而许多其他模型则过于简化
    • 人物模型≠用户信息
    • 人物模型与市场划分:市场划分基于人口统计数据、分销渠道和购买行为,人物模型基于使用行为和目标
    • 可以使用市场划分限制人物模型范围

      理解目标

  • 目标是最终目的,任务是手段。通常目标越少越好

  • 目标驱动使用模式
  • 目标必须来自定性数据:每个目标表述成一个简单句子
  • 用户目标和认知处理

    • 本能:深入交互之前,人会对视觉和感觉做出本能反应
    • 行为:以往的交互设计全部在解决这一层面的认知处理。中间过程,作用于本能设计和反思设计,也受本能设计和反思设计的影响
    • 反思:保护有意识的思考和对以往经历的反思

      为本能反应而设计

    • 主要是视觉外观和动作

    • 用户一开始通常会认为吸引人的界面会更有用,这种观点持续很久,直到对产品界面积累足够经验才推翻最初观点

      为行为而设计

    • 应该以行为设计为基础,实现本能与反思设计的和谐统一

      用户目标的三种类型

      分别对应本能、行为、反思三个层次

  • 体验目标:期望感受与交互时期感觉,关注交互感、物理设计。

    • 感觉灵敏
    • 有趣
    • 再次确保安全性和敏感性
    • 感觉很酷或很时髦或者放松
    • 保持专注警醒
    • 按照人物模型的态度和行为来打造视觉主题
  • 最终目标
    • 代表用户使用某个具体产品执行任务的动机
  • 人生目标

    • 代表用户的个人期待,解释用户为什么试图完成最终目标
    • 人生目标需要转换为高层次的系统功能,正式的设计概念和品牌战略。
    • 其他目标达成的前提下,能否达成用户的人生目标,决定用户成为普通的满意用户,还是狂热的忠实用户

      用户目标是用户的动机

  • 体验目标-本能:用户想要感受什么(视觉)

  • 最终目标-行为:用户想要做什么(逻辑/交互/使用感-是否高效)
  • 人生目标-反思:用户想要成为什么

    非用户目标

  • 客户目标、商业目标、技术目标,需要考虑,但是不能牺牲用户目标,用户目标是设计方向的基础

  • 商业目标
    • 增加利润
    • 提高市场占有率
    • 留在现有客户
    • 打败竞争对手
    • 更高效的使用资源
    • 提供更多产品和服务
    • 保证知识产权安全
  • 组织目标
    • 教育大众
    • 筹集资金维持运作
  • 技术目标(这些目标的实现通常以牺牲用户目标为代价)
    • 能够在不同浏览器中运行
    • 保护数据完整性
    • 提高应用程序的执行效率
    • 使用特定开发语言或库
    • 保持跨平台一致性

成功的产品首先满足用户目标
设计原则:不要让用户感觉自己愚笨

构造人物模型

用其代表各种各样观察到的动机、行为、态度、能力、约束、心理模型、工作或者活动流程、环境、以及对现有产品和系统的不满之处。 📒《about face 4 交互设计精髓》 - 图8

第一步:根据角色对访谈对象分组

企业应用程序:角色通常与职责相对应。
消费品角色区分则根据家庭角色、态度、相关活动方法、兴趣和选择生活方式的能力

第二步:找出行为变量

  • 活动—用户做什么:频率和工作量
  • 态度—用户看待产品所在领域和采用技术
  • 能力—用户所受教育和培训、学习能力
  • 动机—用户涉足产品领域的原因
  • 技能—用户与产品领域和技术相关的技能

查看行为变量完整集合,对比结果和假设,进行行为角色的调整,必要时增加用户访谈

第三步:将访谈主题和行为变量对应起来 📒《about face 4 交互设计精髓》 - 图9

不必将用户精确的落在比例刻度上,你必须依靠自己的直觉,直觉建立在对主体的观察上。最后需要看出,多个主体如何聚集在重大变量周围。

第四步:找出重要的行为模型

如果一组主体聚集在6-8个不同的变量上,可能代表一种显著的行为模式。一个角色通常会发现2-3个此类模式。聚集的行为见会有逻辑和因果关联。

第五步:综合各种特征,阐明目标(行为模型要包含以下细节)

  • 行为本身(活动及动机)
  • 使用环境
  • 使用当前解决方案遇到的挫折和痛苦
  • 行为相关联的人口统计学
  • 行为相关的技巧、经验或能力
  • 行为相关的态度和情感
  • 同其他人、产品或服务相关的交互
  • 做同样事情的替代或竞争方案,尤其是类似技术
  • ——
  • 定义目标:推断方式:对受访者动作的观察(试图完成的任务及原因),对访谈主体对目标导向型问题回答的分析
  • 人物模型和社会关系

    第六步:检查完整性和冗余

    爆炸人物模型集的完整,及各个人物都具有差异性

    第七步:指定人物模型的类型

  • 主要人物模型

  • 次要人物模型
  • 补充人物模型
  • 客户人物模型
  • 接受服务的人物模型
  • 负面人物模型
  • 选择其中一个人物模型,其需求和目的能够用一个界面就完全得到愉快满足,同时不会剥夺其他人物模型的权利

设计原则:界面设计的关注点在单个主要人物模型

第八步:进一步描述特性和行为

  • 人物模型应该能够包含在人物模型描述中。最好的叙述方式就是快速介绍人物模型的职业或生活方式,简略的描绘他一天的生活,包括抱怨、关切和兴趣等于产品直接相关的信息。
  • 1.叙述中无比包括所有重要行为类型的总结
  • 2.不要包含过多虚构描述。细节描述要恰到好处,只要能涵盖基本的人口统计数据,能将行为类型编成一个故事就足够了。
  • 3.不要将未观察到的细节加入行为描述中。
  • 4.在人物模型描述不引入暗含解决设计方案的线索,而是突出痛点。
  • 人物模型照片:可以创建照片拼贴画

    实践中的人物模型

  • 人物模型的量化:通过调查问卷为参与者匹配相应的人物模型,计算市场份额,主要人物模型不一定占最大的市场份额。

  • 机构的“人物模型”
  • 资源有限时使用临时人物模型

    • 尽量使用现有的数据(市场调查、领域研究、主题专家)

      其他设计模型

  • 工作流模型

    • 过程的目标或期望结果
    • 过程的每个动作的频率及重要性
    • 过程每个动作的诱发和促进因素
    • 依赖关系——过程和每个动作执行必需的条件,以及什么依赖于过程和每个动作的完成
    • 参与者及其角色和责任
    • 具体执行的动作
    • 做出的决定
    • 用以支持决策的信息
    • 哪些地方会犯错——错误和例外情况
    • 如何纠正错误和意外情况
  • 人工制品模型:代表的是用户只需人物和工作流中使用的各种不同人造品
  • 物理模型:物理环境

第四章 设立愿景:场景和设计需求

  1. 利用故事情节或场景剧本来设想理想的用户交互过程
  2. 运用场景剧本提取设计需求
  3. 依次使用这些需求来定义产品的基本交互需要。
  4. 在这个框架中不断增加设计细节

    关键名词

    场景:以叙述为设计工具

  • 只关注情节的各个点(有故事情节、简单明快,类似动画脚本)
  • 场景与使用案例、用户故事对比:使用案例没有定义优先级,用户故事没有定义完整的工作流程,而场景包含系统功能、功能优先级排序,功能如何从用户所见,用户如何与系统交互
  • 从人物模型的角度描述一种理想的体验
  • 创建场景剧本,绘制在白板或写字板上,再填补外观和感觉细节。最后使用人物模型和场景来验证整个过程中的设计创意和猜想是否有效。
  • 三类场景

    • 情境场景本

      设计需求

  • 通过场景剧本提炼

  • 人物模型需要哪些信息和能力来完成其目标。阐明交互需要什么:产品外观是什么样子,有什么样的行为,如何操作,感觉如何。
  • 设计需求不是特性,他更接近于需要
  • 设计需求不是规格说明:许多产品需求文档把需求和实现方式混为一谈。
  • 设计需求是战略性的:分离问题和解决方案是一种方法。
  • 人物模型和场景时设计需求的主要来源。
  • 需求定义回答了关于产品是什么以及要做什么的问题,框架定义则主要回答了产品行为方式和如何构建产品来满足用户目标等问题。
  • 需求定义过程 📒《about face 4 交互设计精髓》 - 图10

  1. 创建问题和愿景陈述

📒《about face 4 交互设计精髓》 - 图11 📒《about face 4 交互设计精髓》 - 图12

  1. 探索和头脑风暴
  2. 确定人物模型期望
  • 以你想认我模型期望的态度、经历、渴望和其他社会、文化、环境及人物模型认知因素
  • 对使用产品的体验有一般期待和愿望
  • 对产品行为的期待和愿望
  • 如何看待数据基本元素或单位
  1. 构建情境场景
  • 重点是如何才能使设计的产品最有效的帮助人物模型实现目标。
  • 产品在什么背景下使用?
  • 是否会被超时使用?
  • 人物模型是否经常被打断?
  • 是否有多个用户使用单个工作站或者设备?
  • 与其他产品一起使用吗?
  • 人物模型要达到目标需要执行的首要活动是什么?
  • 与其他产品一起使用吗?
  • 人物模型要达到目标需要执行的首要活动是什么?
  • 使用产品预期的最终结果是什么?
  • 根据人物模型的技能和使用频率,允许的复杂程度有多大?
  • 情境剧本举例 📒《about face 4 交互设计精髓》 - 图13 📒《about face 4 交互设计精髓》 - 图14
  1. 明确设计需求
  • 数据需求
  • 功能需求-对应界面控件
  • 情境需求-包括哪些对象必须显示在一起才能让工作流程有意义。产品使用的物理环境,人物模型的技能和能力。
  • 输出简表

第五章 框架和提炼

创建设计框架

  • 包括底层组织原则、屏幕上功能元素的排列、工作流程、产品交互,传递信息的视觉和形式语言、功能性和品牌识别等。
  • 包括交互框架和视觉设计框架。

定义产品交互框架

定义形式要素姿态和输入方法

定义功能性和数据元素

  • 开始构建产品原型-构建多个解决方案
  • 选择方案:
    • 最有效满足用户目标
    • 最符合设计原则
    • 最适合当前技术水平和成本考量
    • 最能满足其他条件
  • 假定产品是真人:如果是一位乐于助人的人,会怎么做?
  • 采用设计原则和模式:除非有充足的理由,否则不要轻易背离标准

    确定功能组和层级

    📒《about face 4 交互设计精髓》 - 图15

    把数据和功能纳入屏幕、框架或网格等高层次容器元素。

    勾画交互框架

    为不同模块添加标签注解、描述每个分组或者元素如何影响其他分组和元素。
    注意不要沉浸于细节设计中。

    构建关键线路情境剧本:用以检测交互设计的细节

  • 关键线路情境剧本关注任务及其细节,但我们不能忽视目标

  • 故事板:描绘用户与产品间交互
  • 过程变更和反复

    通过验证性的场景来检查设计

  • 替代场景:人物模型决策过程中,关键路径某个点的替代或者分叉点。

  • 必须使用的场景:必须执行但又不经常发生的动作
  • 边缘情形场景:必须要有却不太常用的功能

定义视觉设计框架

开发视觉体验特征

选择三到五个形容词来定义产品的音调、语音和品牌承诺。(如果这些特性不符合人物模型的目标和利益,则需要进行战略性讨论。) 📒《about face 4 交互设计精髓》 - 图16 📒《about face 4 交互设计精髓》 - 图17

开发视觉语言研究

  • 包括颜色、类型、小部件处理,整体的外形尺寸和界面的“材料”属性。
  • 开发视觉样式事,要考虑环境因素和人物模型的能力。
  • 视觉方案一般有3-5套方案进行选择。其中1-2个上把视觉做到极致。
  • 讨论后对视觉风格的某些方面达成一致共识。

    将已选择的视觉风格应用于屏幕原型

  • 协调视觉设计和交互设计工作

定义工业设计框架

  • 与交互设计者就形式要素和输入方法进行合作
    • 设计原则:用户体验只有一个,即形式和行为的设计必须相互和谐。
  • 开发粗略的原型
  • 开发形式语言研究:包括形状、三维尺寸、材料、颜色和修饰。

定义服务设计框架

  • 描述客户旅程
  • 创建服务蓝图
  • 创建体验原型

细化外形和行为

  • 视觉规范文档

    验证与测试设计

  • 可用性测试的本质是评估而非创造

  • 可用性测试在验证内容时尤为有效 📒《about face 4 交互设计精髓》 - 图18
  • 最终性评价和形成性评价
    • 最终性评价:重新设计开始前找出问题
    • 形成性评价:设计过程中对某一交互过程的测试

第六章 创造型团队合作

团队合作的战略

  • 创意创造:无边无际的构想
  • 创意综合:对创造进行指导和聚焦
  • 创造者和综合者 📒《about face 4 交互设计精髓》 - 图19 📒《about face 4 交互设计精髓》 - 图20

    产品开发的正确方法

    整合不同组织间团队合作的技巧

    跨设计领域工作

  • 交互设计
  • 视觉界面设计:它并非设计结束之后的锦上添花,而应该被看作满足用户和商业需求必不可少的一个工具。
  • 平面设计
  • 视觉信息设计:主要目标是以一种易于理解的方式展现数据。
  • 工业设计

    扩展团队

    • 责任和权威

      • 设计要对产品用户目标负责。要履行这一责任,设计师必须有权决定产品的外观、感觉和行为。并且还应该有权获得信息。 📒《about face 4 交互设计精髓》 - 图21

        创建创造性的文化

    • 环境

    • 小的工作场所,避免分散注意力
    • 协作的行为准则
    • 法则:留点迷路的时间

      确定设计的技术水平

      协作是关键

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

良好产品行为的基础

  • 使设计过程具有普遍适用性,答案在于交互设计价值、原则和模式的使用。
  • 设计价值:成功、恰当的设计实践的指导方针。
  • 设计原则:为设计有用而令人期待的产品、系统和服务提供了向导。
  • 设计模式:针对某些具体的设计问题给出一般方案。

    设计价值

  • 合乎伦理(有用、贴心)

    • 不造成伤害 📒《about face 4 交互设计精髓》 - 图22 📒《about face 4 交互设计精髓》 - 图23
    • 改善人类环境
      • 可持续发展的关键阶段 📒《about face 4 交互设计精髓》 - 图24
    • 改善人类处境 📒《about face 4 交互设计精髓》 - 图25
  • 目标明确(有用、可用)
    • 帮助目标实现目标和期望
    • 符合用户场景和能力水平
  • 实用(切实可行)
    • 帮助设计机构实现目标
    • 满足商业和技术需求
  • 优雅(高效、艺术性、能打动人)

    • 代表最简单而完整的方案
    • 内在一致性(自我表现、可理解的)
      • 恰当顺应、调动认知与情感

        交互设计原则

  • 原则帮助我们将情境中的任务需求转化为界面的形式结构和行为。

  • 概念原则:界定产品定义,如何融入实用情境。
  • 行为原则:描述产品在一般情境与特殊情境中应有的行为。
  • 界面原则:描述行为级信息有效的视觉传达策略。

行为和界面目的是使用户工作负荷降至最低。

交互设计模式

  • 模式展开的环境极其重要。
  • 交互设计模式类型
    • 定位模式:应用于概念层面,帮助界定产品对于用户的整体定位。
    • 结构模式:如何在屏幕上安排信息和功能元素之类的问题。
    • 行为模式:旨在解决功能或数据元素的具体交互问题。
    • 心理模式

第八章:数字产品的礼仪

设计体贴的软件
设计原则:软件应该像人一样体贴。
体贴的产品或人的特点

  • 关心用户喜好
  • 恭顺的
  • 乐于助人
  • 具有常识
  • 有判断力
  • 预见需求
  • 尽责
  • 不会因为自己的问题,增加你的负担
  • 及时通知
  • 敏锐
  • 自信
  • 不问过多的问题
  • 及时失败也不失风度
  • 知道什么时候调整规则
  • 承担责任
  • 帮助你避免犯低级错误
这里我的想法有出入:作者任务软件不需要提供我们不关心的信息,但是有些信息是会潜在影响我们的态度的,作者是站在自己是一个绝对标准、不出错、强势的用户立场上来写这段文字的。
作者认为用户不应该使用提交也体现了这一立场。
删除需要确定,但是打印不需要,早期的软件给所有操作设定确定,就没有考虑到重要性的区分,但是作者也不应该因此全面否定所有的操作。

设计聪明的产品

  • 利用计算机的空闲周期
  • 聪明的软件有记忆:预测用户将要做什么。
  • 聪明的产品能预测需求:我们每天都目标和实现目标的方式通常是相同的。
  • 聪明的产品能够记住细节:程序可以使用用户以前的设置作为默认值,而不是使用无法更改的常量默认值。
    • 记住文件位置
    • 推断信息
    • 取消多会话
    • 录入过去的数据
    • 程序文件的外部程序活动
  • 让聪明的产品发挥聪明

    • 缩小决策数量
    • 偏好阈值

      设计社交软件

  • 社交规范和市场规范

    • 社交规范:包括困难时伸出援手,表达感恩
    • 市场规范:包括物美价廉、守信用
  • 社交软件帮助用户展现最好的一面
    • 用户身份
    • 静态用户形象
    • 允许简单协作
  • 允许简单协作
  • 知进退
  • 尊重社交圈的复杂性
  • 尊重其他用户的隐私
  • 要恰当处理反社交行为

第九章 平台和姿态

产品平台

技术原则:技术平台相关的决定最好能融入交互设计的成果。
交互设计师完成工作后再做出平台选择,其成果会更有效。

产品姿态

软件程序风格可以大胆或谨慎,绚丽多彩或乏味 ;但无论怎样都应该有一个之所以如此具体且目标导向的原因。
应用程序的姿态是行为的基础,不管审美上如何选择,都应该和产品的姿态和谐一致。

桌面软件姿态

  1. 独占姿态:长时间占据使用者的注意力
    • 应该为永久的中级用户优化,用户停留在初级阶段的时间是较少的。
    • 尽可能多的使用屏幕空间。
    • 要考虑防止视觉疲劳。
    • 丰富的视觉反馈,但是要避免混乱。
    • 支持丰富的输入方式:每个常见部分都应该可以用多种方式操作。
    • 让工作界面最大化。
  2. 暂时姿态
    • 暂时应用程序必须简单、清晰并且意思明确
    • 暂时性应用程序只是用一个窗口和视图。
    • 不过就目前的形势来看,还是有很多的程序都是用了第二视图或对话框。工作流程需要纵列的深度。
    • 记住用户的选择
  3. 后台姿态
    • 隐藏,当时程序的意图和用户可获得的选择范围和含义必须要告知用户。
    • 需要访问的时候能够访问,出现问题时能够提醒。

网络姿态

  • 信息类网络姿态
    • 重要:“可检索性:搜索特定信息的便利性。”
    • 平衡独占和暂时姿态。
      • 可以根据不同的访问频率来确定个体类型
    • 可以自适应,不过应用应该针对最常用的尺寸优化。而且还要包含主要人物模型可能用到的尺寸。
    • 对于频率不高的用户:保留以往的操作。
  • 事务性网站姿态
    • 包含功能性因素:购物车和结账
    • 用户对载入时间的感知与其是否能够打出目标有更紧密的关系,二合实际的载入时间关系不大。
  • 网站应用姿态
    • 用户应该感觉他们处在某一环境中,而不是从一个页面浏览到另一个以页面,或者从一个地方到了另一个地方。
    • 暂时性的应用重要的是提供清晰的导向和导航。

第十章:为中级用户优化设计

设计原则:不要将培训工具固定化

永久的中级用户

📒《about face 4 交互设计精髓》 - 图26
设计原则:没有人愿意永远当个新手

扭转界面

  • 常见导航最少化,不经常使用的功能隐藏,需要的时候被提取。
  • 渐进式展开 :高级部件或不太经常使用的部件隐藏在扩展型窗格的后面,仅提供一个小的扩展或隐藏开工作为用户进入通道。例如ps
  • 界面部件和显示器整理原则:使用频率、转换程度和风险承担程度。
  • 使用频率:
    • 使用频率高的按钮和工具:触手可及的地方
    • 使用频率低的功能:点击次数不超过一两次
    • 其他功能两三次点击
    • 很少使用的功能不删除
  • 转换程度:
    • 功能和命令使信息发生变化,最好将这一功能隐藏
  • 风险承担程度:
    • 不可更改或事更改后会产生危险后果的功能:对用户而言更难使用
  • 提供快捷方式

    为三层用户设计

  • 让新手迅速掌握程序的概念和范围

  • 工具提示是适合中级用户最好的习惯用法

第十一章:编配与流

设计原则:不论界面多酷,越少越好

编配

📒《about face 4 交互设计精髓》 - 图27

和谐交互的策略P203

📒《about face 4 交互设计精髓》 - 图28
📒《about face 4 交互设计精髓》 - 图29

  • 少就是多。但是不要过犹不及,不要视觉简化导致认知复杂。
  • 提供选择。无模态选择有助于给用户带来控制感和掌控感。
  • 工具应该近在咫尺
  • 无模态:不打断正常活动流和交互。不需要中断工作来寻找这些信息。例如页码、字数。停留数秒然后消失的通知
  • 可视化的使用数据,而不是简单的使用文字或数字显示。
  • 避免不必要的报告

动作、时间与过渡

  • 采用动作和动画切换,首要目标时支持和增强用户的流状态。 📒《about face 4 交互设计精髓》 - 图30
  • 📒《about face 4 交互设计精髓》 - 图31
  • 动画在任何情况下不应超过一秒,以保持响应。
  • 自然和顺滑

毫不费力的理想:让用户只需任务像流水一样感觉不到障碍。

第十二章:减少工作,消除负担

  • 尽可能消除每一种负担
  • 多个试图或页面之间的导航:严重转移注意力,打断用户工作流,强迫他们进入新的情境。
  • 机械时代的方法照搬到数字世界中,就会增加负担,限制交互。
  • 设计原则:不要愚蠢的打断进程。
  • 避免产生样式负担,能够清楚区分哪些元素可点击,哪些仅仅是装饰。
  • 负担取决于情境。一个人的目标可能是另一个人的负担。

    如何消灭负担

  • 减少要去的地方的数量,包括模态、表格、对话、页面、窗口和屏幕。

  • 提供导航标志
  • 提供概览
  • 恰当的把控件映射到功能上:将控件的树木限制到最少。
  • 尽可能减少滚动。
  • 避免层级关系:与其强迫用户在复杂的深层树状结构中导航,不如给他们工具,让用户自己找出来所要的东西。
  • 不要复制机械时代的模型。

常见的负担陷阱

📒《about face 4 交互设计精髓》 - 图32 📒《about face 4 交互设计精髓》 - 图33

第十三章:隐喻、习惯用法及能供性

放弃隐喻设计、替代隐喻设计的方法

界面范式

  • 实现中心——隐喻范式——习惯用法范式
  • 1.实现中心:用户界面完全建立在实现模型上。
    • 设计原则:多数人并不想知道得太多,只想成功的使用产品
  • 2.隐喻范式界面:使用可以代表明显特征的事物,使用户明白其中含义。
    • 隐喻利用人脑强大的推理能力。心理上联系我们学习过的东西。
    • 隐喻的问题:把界面与机械时代制品绑在一起。如果设计者和用户没有相似文化背景,容易导致隐喻失败。
    • 设计原则:不要让界面强行适应隐喻
  • 3.习惯用法范式:

    手动能供性:“我们认为对象能做什么”

  • 语义学:必须有文本或图标标签来指明其意义。

    直接操作与顺从

  • 用户直接操作

  • 顺从:只带队用户输入及其他操控的响应
  • 设计原则:尽可能用视觉表达顺从
  • 三种表现方式
    • 静态提示:提示自身状态,例如:可按下
      • 扁平化:视觉变得简单,学习变得困难
    • 动态提示:鼠标经过时状态改变,例如:悬浮状态
    • 顺从响应提示:操作后的响应,例如:按下状态
    • 光标提示:光标的改变提示可操作部分
    • 触屏平台没有这种提示

第14章:重新思考数据输入、存储与检索

提供一套不同的方法来处理数据输入、文件与保存和检索问题

重新思考数据输入

  • 提供及时的视觉反馈、注释,体系用户检查问题,而不是中断流程
  • 通过无模态反馈告诉用户,而不是停止一切工作
  • 设计原则:出错可能不是程序的问题,但是时程序的责任
  • 审核,不要编辑

    重新思考数据存储

  • 用统一文件模型修复数据储存

    • 自动保存
    • 创建副本
    • 命名和重命名
    • 在文件系统中存放和移动文件
    • 制定文档的格式
    • 还原所做更改
    • 放弃所做更改
    • 生成一个版本 沟通状态

      重新思考数据检索

  • 位置检索、标示检索、属性检索

  • 位置检索和标示检索结合构成数字存储系统的基础
  • 选择基于属性的检索系统

第15章:防止错误、通知决定

运用富视觉非模态反馈

  • 含义:全面的信息、利用屏幕的像素、及时更新
  • 📒《about face 4 交互设计精髓》 - 图34 📒《about face 4 交互设计精髓》 - 图35
  • 听觉反馈

    • 负面听觉反馈
    • 正面听觉反馈:没有反馈时即出现问题。

      撤销、恢复和可逆的历史操作

  • 撤销很重要

  • 撤销应当遵循心理模型
  • 撤销没有直接支持用户人物背后的具体目标,他只是在实现目标的途中提供可信赖的条件。
  • 撤销的类型
    • 渐增动作:包含数据的转换
    • 过程动作:数据没有增加
    • 隐蔽撤销
    • 解释性撤销:解释会撤销什么
    • 单次撤销:例如ps 只能撤销一次,再撤销就会恢复
      • 弊端:只能撤销一次
    • 多次撤销
      • 弊端:后续添加的操作也会一并撤销
    • 其他类型:选择撤销的话,如果操作之间有因果关系就难以处理

第16章:为不同的需求而设计

策略:易学性、帮助、可定制性、本地化、全球化、无障碍性。

易学性和帮助

  • 命令模态
    • 直接操作柄、下拉菜单和弹出菜单项、工具栏控件和快捷键
    • 三个命令
      • 教学式命令:用描述性文本教用户如何使用
      • 直接命令:直接操作控件,如按钮滑块。不需要中间步骤。
      • 隐形命令:快捷键和手势。-为中级或高级用户服务。
    • 信息获取方式
      • 现实中的信息:不用记住的信息-对应教学式命令
      • 头脑中的信息:已经记住或学会的信息-对应隐形命令
    • 除了教学式命令外,还必须提供直接(或者隐形)命令;让用户学会教学式命令相对应的直接命令。
  • 有效特性工作集
    • 中级用户最终会记住一部分命令和特性,这一部分就是有效功能工作集。
  • 上下文帮助和辅助界面

    • 导览教程
    • 覆盖层教程
    • 导览结合覆盖层教程
    • 库和模板
    • 输入与内容区域提示
    • 向导
    • 工具提水和覆盖式工具提示
    • 全文搜索和索引:优良的设计应该大幅降低用户对帮助系统的依赖。
    • 用户指南:使用复杂功能时用来查看详细信息的

      可定制性

  • 个性化:给固定对象添加装饰有助于导航,但是移动会妨碍导航。

  • 配置:移动固定对象。
  • 特质模态行为:不同偏好的习惯用法都满足。

    本地化和全球化

  • 语言翻译:不同的语言文字长度不同

  • 难按字母顺序排序
  • 年月日的顺序,12小时制与24小时制
  • 数字和货币中小数点使用方式,逗号与句号的使用方法

    无障碍性

  • 用户能感知和理解所有的指示、信息和反馈

  • 用户能够感知、理解并轻易的操控所有控件并进行输入
  • 用户能够轻易的导航,并知道所处位置及导航结构。
  • 方式
    • 利用操作系统的无障碍工具和指南
    • 不要覆盖用户选择的系统设置
    • 启用标准的键盘访问方式
    • 为视力不佳的人加入显示选项
    • 提供只有视觉和只有听觉的输出
    • 使用简单、明确、精炼的语言
    • 响应时间要能满足所有用户
    • 使用一致的布局及任务流程
    • 给视觉元素添加文本释义

第17章:整合视觉设计

艺术家的的首要关切是表达自我,而视觉设计师的重点则是清晰沟通。
“设计关注的是发现最适于传达某些具体信息的呈现方式。”

视觉界面设计元素

  • 情景、情景、情景(产品使用环境)
  • 形状
  • 大小
  • 颜色
  • 色值
  • 色调:使用有限数量的色调
  • 饱和度
  • 方向
  • 纹理
  • 位置:比如利用间距来区分不同的模块
  • 文字与版面
    • 使用高对比度的文字,建议使用80%的对比
    • 选择适当的文字大小
    • 简介的组织文字
  • 信息层级
  • 动作及其随时间的变化

    视觉界面设计原则

  • 传达风格/传播品牌

    • 产品关键词:例如安全、灵活
  • 带领用户厘清视觉层级
    • 使用基本视觉元素(位置、颜色、大小等等)区分层级级别
    • 改变其中一个属性即可
    • 通过调低次要的凸显重要的(另外的角度思考)
    • 具有相似功能的元素,可以通过视觉组织在一起。
    • 只需相邻元素之间设定不同的距离,就可以有效的实现分组
    • 使用眯眼进行测试
  • 在组织的每个级别提供视觉结构和涌流
    • 对齐到网格
      • 标签对齐
      • 控件对齐
      • 控件与窗格对球
    • 网格系统
      • 使用原子单位及其倍数
    • 几何关系的采用
      • 黄金分割:1.61
      • 2的平方根1.14
      • 4:3
      • 几何关系与空间需求要平衡
      • 细微的差异就会让用户感觉不稳定
    • 运用网格系统的好吃
      • 可用性——用户可以快速学会如何找到关键界面元素
      • 美学吸引——感到舒适
      • 提高效率——减少工作量
    • 创建逻辑路径
      • 眼睛的阅读习惯:从上到下,从左到右
      • 界面元素平衡:不对称。完全对称没有层次感
  • 在特定屏幕上告诉用户能做什么
    • 能供性原则:设计布局、内容分类、图标、视觉符号
    • 使用图标
      • 传达功能感:用图表代表抽象的语言
      • 保持图标简单,避免过多的设计细节
      • 尽可能复用元素,降低学习成本
      • 视觉上区分不同对象
      • 尽可能预览视觉效果
  • 响应命令
    • 响应不超过一秒,提供细微的视觉线索
    • 响应达到十秒,提供某些线索告知延迟
    • 超过十秒,最好解释延迟原因
  • 把注意力吸引到重要事件上
    • 警告提醒
  • 建立有凝聚力的视觉系统,保证体验一致
  • 最小化视觉工作量
    • 视觉噪音:
    • 过分的装饰
    • 3d渲染
    • 过度使用标尺、用户分离控件的元素
    • 元素拥挤
    • 颜色、纹理和对比过于密集
    • 使用太多颜色
    • 无力的视觉层级
  • 保持简单
    • 任何差异都要足够理由,如果没有,就放弃元素或事消除差异
    • 设计原则:删减东西,知道破坏了设计位置,再把最后去掉的东西加上

视觉信息设计的原则

  • 两个问题
    • 很难在一个二维表面显示多位信息
    • 显示器不注意显示高密度信息
  • 加强视觉对比
    • 提供相关变量和趋势的对比手段
  • 显示因果关系
    • 使用非模态视觉反馈,告诉可能结果
  • 显示多个变量
  • 在一个界面整合文本、图形及数据。
    • 降低理解难度
  • 确保内容的质量、相关性和完整性。
  • 在相邻空间上显示事物,而不按时间堆积
  • 可量化的数据就要量化

一致性和标准化

  • 好处:
    • 提高产出减少错误,提高用户学习界面的能力和生产率
    • 歼敌客户培训和技术支持的费用
    • 检索开发时间和工作量
    • 降低维护费用,提高设计和代码的重复利用
  • 风险
    • 标准强调的是语法,还需要考虑用户具体行为和使用模式
  • 作为具体的指导准则和经验法则,如果有更好的,就可以更新成更好的。
    • 不能因为标准而摒弃用户需求,用户需求始终是最终目的。
  • 什么时候打破标准?
    • 有充分理由时
    • 当一个习惯用法被目标用户试用后,大多数人认为明显更好
  • 应用程序之间的一致性和标准

    • 一致性不意味着僵化。
    • 界面和交互风格指南准则必须随其所服务的软件而成长和演化。
    • 有时为了更好的服务与用户及其目标,必须打破规则。同时尽量是改变和增加与标准兼容。
    • 指导你的是规则的精神实质,而不是规则的文字本身。
    • 设计语言:最好的设计语言以用户为中心


    第18章:为桌面应用而设计

    剖析桌面应用-主要看独占式

  • 主窗口和辅窗口

    • 主窗口
      • 通常会被分成多个窗格
    • 结构
      • 一个内容区或工作区
      • 一个菜单条。
      • 多个工具栏、窗格、工具板,用于在工作区导航,选择或操作内容对象。
      • 索引窗格。
    • 辅窗口:最典型的是对话框

      窗口

  • 层叠窗口

  • 平铺窗口-不适用
  • 多窗格应用-现在主要是这种表现方式
  • MDI 和SDI:多文档界面-单文档界面
  • 窗口的运用

    • 不必要的对话框
      • 滥用辅窗口会导致导航问题,带来不必要的负担
    • 必要的对话框
      • 执行非日常功能时,提供特殊场所(对话框)

        菜单

  • 把菜单作为教学工具,提供一条学习的路径

  • 禁用状态
  • 复选标记菜单项
  • 菜单上的图标
  • 快捷键
    • 遵循标准
    • 形成使用快捷键的习惯
    • 标明如何使用他们
    • 分类
      • 每个人都认为是日常使用的功能为一组——必须要快捷键
      • 不认为是日常的为一组——不用快捷键
      • 其他的为另一组
      • 在菜单中显示出来
  • 访问键
  • 级联菜单vs单层分组

    工具栏

  • 非模态的

  • 工具栏和菜单配合工作,工具栏为有经验的用户提供快速访问常用功能的途径。
  • 按钮:图标只需要容易辨识即可
  • 工具提示
  • 禁用状态:变成灰色
  • 工具栏中一个工具的多种选择
  • 可移动工具栏
  • 可定制工具栏
  • 情境工具栏:根据对象改变内容。
  • ribbon:标签和菜单的混合体,参考word菜单
  • 工具板:点击可以延伸的工具板。参考adobe
  • 同时使用的东西,一定要放在一起。

    点操作(鼠标)、选择、直接操作(触摸)

  • 鼠标

    • 鼠标左键
    • 鼠标右键
    • 滚轮和滚球
    • 元键:ctrl、alt、command、shift
    • 指向
    • 单击
    • 指向和单击
    • 单击拖放
    • 双击
  • 触控板、轨迹球、手势传感器
  • 光标
    • 直接操作的成功关键是丰富的视觉反馈
  • 选择
    • 对象-动词次序:适合直接操作
    • 动词-对象次序
    • 单击选择:离散选择
    • 点击并拖动框选:连续选择
    • 互斥:只能选择一个或一组对象。默认状态。
    • 添加选择:选择多项,互斥不起作用。
    • 选择的视觉提示:举例:蚂蚁线
    • 插入和替换
    • 拖动要去颤动,极小范围的颤动不是拖动而是选择
  • 控件操作
  • 2d对象操作
    • 调整位置:拖放
    • 调整大小和形状:控制柄
    • 连接:箭头;例如蓝湖
  • 3d操作对象
    • 多重视点:转动摄像机
    • 基线网格、景深效果
    • 使用2d的习惯用法,但是还有特殊的问题,坐标的变化
    • 选取问题:(作者提出可以通过选取id或是语音输入选取3d对象,但是这样好像更加复杂了。。。)

第19章:为移动设备和其他设备而设计(APP设计原则)

剖析移动应用

  • 桌面:独占式,移动应用:暂时式。
  • 手机应用常见表现形式
    • 全屏显示
    • 堆叠卡片页
    • 屏幕轮显
    • 方位和布局
  • 平板应用
    • 堆叠方式
    • 索引窗格
      • 垂直模式是隐藏的
      • 水平模式则是显示的
    • 平板的两种布局:移动布局&类桌面布局
      • 确保工具栏、控制面板、菜单项等具备一定的面积,是的提示去、元素的间距足够手指操作。
      • 拖放操作容易失误,要少用或避免使用。
      • 弹出面板要指向来源地,具备相应页眉。
      • 密切关注功能层级,尽可能将工作流线性化。尽可能在单个路径中完成任务。
      • 复杂布局的应用,只是用一种屏显模式,完全不同的场合可以用其他的屏显模式。
  • 小平板应用

    • 避免使用相邻窗格,界面容易拥挤。
    • 工具栏最好竖直放置
    • 列表会显得单薄,可以采用卡片方式来替代。
    • 手持设备的全屏对话框不建议在小平板中使用。

      关于移动独特的习惯用法

  • 浏览控件

    • 列表:如内容布局
    • 网格:如应用图标
    • 内容轮显:水平滑动手势
    • 泳道:独立水平滚动
    • 卡片
  • 导航栏和工具栏
    • 导航栏
    • 工具栏
    • 标签轮显
    • 动作栏:回退
    • 工具轮显
    • 移动应用避免使用菜单栏
  • 抽屉
    • 条目级抽屉,滑动单个条目,会将条目底下的工具栏展现出来,工具栏包含相关操作。
    • 相关问题:出现记忆负担,用户需要记住条目的内容。
    • 避免过度使用弹出窗格和滑动窗格,一个叠一个的情况。
  • 搜索、排序、筛选
    • 搜索
      • 语音搜索
      • 自动填充
      • 预加载(和自动填充好像没有区别?)
      • 最近/频繁搜索建议
      • 分类推荐
    • 排序和筛选
      • 排序和筛选结合
  • 欢迎和帮助界面

    • 原因
      • 有限的屏幕尺寸制约文本向导的数量
      • 屏幕上的空间通常不具备能供性
      • 没有鼠标悬停,不能调出提示或其他帮助信息
    • 第一次打开某个应用时
    • 导览
    • 覆盖层
    • 工具提示覆盖层——最好用在帮助界面上

      多点触摸手势

  • 手势要尽可能简单和直接

  • 点按选择
  • 点按保持
  • 拖动
  • 滑动(上下左右)
  • 双指张合
  • 旋转(两指扭动)
  • 多指滑动——少用

    应用间集成

  • 作者希望把集成做到一个人所有相关信息都归为一类。

  • 我感觉会造成混乱,毕竟你也不是每个互发邮件的人都有对方的手机号。而且也不是每个人都知道名字。
  • 现在苹果的快捷指令好像有点集成的意味,但是不是以联系人为中心的,而且太多开发的属于,不太好用。
  • APP:ifttt

    其他设备

  • 一般性设计原则

    • 不要把你正在设计的产品认为是计算机
    • 把硬件和软件设计集成在一起
    • 让使用情境来驱动设计 📒《about face 4 交互设计精髓》 - 图36 📒《about face 4 交互设计精髓》 - 图37
    • 模式的运用要明智,如果有的话
    • 限定范围 📒《about face 4 交互设计精髓》 - 图38 📒《about face 4 交互设计精髓》 - 图39
    • 根据显示器的分辨率来考虑导航 📒《about face 4 交互设计精髓》 - 图40
    • 尽可能简化输入

      为专用手持设备而设计

  • 硬件

    • 用户会如何持握和携带该设备
    • 特有的情境需求
    • 单手操作还是双手操作
      • 对于单手操作的设备,可以考虑加入一些需要双手但仅仅是偶尔用一下的高级功能
  • 软件

    • 避免使用多个窗口或弹出窗口。主要是独占姿态

      为信息台而设计

  • 交易型&探索型

    • 交易型:自动售卖、自动取款:无需吸引,但是要显眼,方便寻找,还有安全性。交易型可以排队等待
    • 探索型:博物馆和展览馆,探索型空闲时才会想要使用 📒《about face 4 交互设计精髓》 - 图41
    • 公共使用容易传染疾病,尽量做成非接触式的。
    • 管理输入
      • 确保单机对象足够大
      • 保守使用软键盘输入
      • 避免使用拖放操作

        为电视机设计

  • 屏幕布局和视觉设计要清楚,能轻松看到。

  • 导航要简单,对应五向的遥控器
  • 牢记控制集成。不要用好几个遥控器来操纵
  • 遥控要尽可能简单
  • 重点要放在用户的目标和活动,而不是产品的功能:引导用户按命令执行程序

    为汽车界面设计

  • 复杂的令人费解的交互会分散驾驶员注意力

  • 手离开方向盘的时间要尽可能短。常用的导航控制要直接在中心控制台上
  • 显示布局的一致性。保持方向感和关系
  • 运用直接控制对应关系
  • 小型选择控制方式:旋钮用的较多
  • 对比度要强烈,一眼看过去就能抓到所有信息
  • 提供声音反馈

    为语音界面设计

  • 按照用户心理模型来组织和命名功能

  • 明示当前可选的功能
  • 任何时候都可以返回上一步和最高一级
  • 任何时候都可以转到人工接听电话。
  • 给用户足够的时间来响应。


    第20章:网页的设计

    基于页面的交互

  • 导航和寻路

    • 一级导航
      • 顶端导航:设计者会想办法减少珠区域的数量,从而界面会变的简介
      • 侧边导航:用户会在阅读内容时被迫扫描到它,让页面显的拥挤。左侧导航适合展示内容很多的情况。
    • 二级导航及更深层级的导航
      • 一级导航悬浮显示二级导航-胖导航
      • 面包渣:将位置信息反馈给用户
  • 内容导航
    • 按照主题、作者、发布时间来组织和排序
  • 搜索
    • 自动填充
    • 自动推荐
    • 分类推荐(还有分类搜索)
    • 与筛选、排序配合使用
  • 滚动
    • 关键工具要 固定位置
    • 视差效果
  • 页眉和页脚
  • 分页&无限滚动

    移动网页

    自适应设计:每出现一个临界点,就开发一个相应的布局

    未来

    网页即将成为软件和媒体真正交汇的最重要的场所

    第21章:设计细节:控件和对话框

    控件

    四种基本类型

  • 命令控件

  • 选择控件
  • 输入控件
  • 显示控件

    命令控件

  • 按钮

    • 在外观上暗示客户,使他具有一些视觉受范性,暗示用户它具备“可按压性”
    • 现在经过长时间的习惯性,即使扁平设计去掉了受范性,用户仍然可以识别
  • 图标按钮
    • 只有悬浮时才显示出能供性,避免界面的混乱
    • 第一次使用可能无法理解图标含义,但是工具提示可以提供帮助
    • 微软的ribbon结合了文本和图标,虽然牺牲了部分空间,但是更加易用
  • 超链接

    选择控件

  • 复选框

  • 开关按钮
  • 单选框:适用于非模态交互,不会打断用户做决定时的流状态
  • 状态切换按钮:例如播放暂停按钮(目前显示的状态和按钮是冲突的)但是用户已经习惯
  • 组合图标按钮

    列表控件

  • 列表框

    • 设计原则:用图标来区分列表中重要的文本项
    • 采用复选框的多项选择
    • 列表排序
    • 从列表中拖放
    • 列表排序
    • 列表水平滚动(作者建议想办法优化,但是企业化的软件中很难做到)
    • 列表中输入数据
  • 下拉列表=弹出列表
  • 树形控件

    • 开发人员很喜欢,但是会给用户带来困扰,有时候开发人员会把非层次数据强行放在树形控件中
    • 妨碍来使用者是靠和利用对象健的其他更有意义的关系,同时它也没能尊重真实世界中事物的复杂关系。

      输入控件

  • 有界输入控件和无界输入控件

  • 微调器(步进器)
  • 刻度盘和滑块
    • 作者任务不应该强迫用户画圆弧,而是改成上下或是左右的滑动,进行操作。但是这可能会导致用户划的方向错误,也可能导致用户需要增加操作步骤
  • 拇指轮

    验证输入控件

  • 输入提示

  • 验证控件在视觉上与非验证控件区分开来。
  • 密码或其他的安全输入,不能完全遵循可用性的设计原则
  • 主动验证和被动验证
    • 主动验证:输入电话号码时弹出数字键盘,并且不能切换到字母键盘
    • 被动验证:使用递减计时器。每次击键重新计时。暂停超过时间,就开始验证
  • 暗示:相当于工具提示,提示输入范围
  • 处理出界数据
  • 单位和度量

    显示控件

  • 文本控件

  • 滚动条
    • 滚动时:显示页数、显示页面略缩图(此处特指pdf预览)
    • 根据章节跳读
    • 跳到文档开始和末尾的按钮
    • 设置可以快速返回的书签工具
  • 分割线
  • 抽屉和拉动杆


    对话框

    设计原则:把主要的交互操作放在主窗口内

    合理运用对话框:适用于放主交互流之外的功能

  • 对高级用户:用来控制更高级或是更危险的设置

  • 对不熟悉的用户:用来学习基础知识

    模态和非模态对话框

    模态对话框:应用程序不能继续进行,直到对话框关闭为止

    五种对话框

  • 属性对话框

  • 功能对话框
  • 进度对话框(展现五个信息)
    • 一个耗时的进程正在运行
    • 现在一切正常
    • 还需要多少时间
    • 还有多少事情
    • 如何取消或者重获控制权
  • 通知对话框
    • 长时间非模态的驻留或是几秒后关闭
    • 未读,在界面上清晰地、显著地、持久地标注出来
  • 公告对话框

    • 错误、警告、确认。应该是阻塞型的

      管理对话框(属性和功能)

  • 使用选项卡对话框

  • 设计原则:所有交互的习惯用法都有其适用范围
  • 扩展对话框
    • 有一个更多按钮,点击可以扩展对话框
    • 最好是记住上次被调用时所处的使用状态
  • 级联对话框

消除错误、警告和确认

(怎么优化公告对话框)

让错误不可能发生

  • 使用有界控件,是用户进行选择
  • 如果有预定义的内容,程序可以事先自行输入
  • 正面反馈
  • 📒《about face 4 交互设计精髓》 - 图42

    警告和确认

  • 警告:此地无银三百两

  • 确认:狼来了

    • 应用程序自己判断去做,不要询问
    • 让动作可以撤销








    摘抄


  • “交互设计更多的是综合,需要想象事物可能如何,而不必局限于现有的状态”
  • “设计是为赋予有意义的秩序,做出有意识或直觉的努力”
  • “想想一个用户如何使用产品的故事,远比仅仅设想一个更好的形式元素或屏幕元素配置,更能充分地利用强大的创造力。”
  • 📒《about face 4 交互设计精髓》 - 图43
  • 真正伟大的创意很少。
  • 没什么比分散注意力更能扼杀创意的了。无法集中注意力不等于有创意。
  • “完美不在于无以复加,而在于无可删减,万事莫不如此。”
  • “在现实世界中,限制总是可以调整的。”
  • 终极用户界面往往是没有界面
  • 如果小说家小说写得好,读者能够清晰的看到故事和人物,而看不到作者的写作技巧。糟糕的作者会让读者看到他的存在。
  • 人们已经习惯了前一时代的模式和形态,自然会尝试利用这些工具,以描述更加不确定的新时代。
  • 新科技的成果开始只能用此前的技术语言来描述。

📒《about face 4 交互设计精髓》 - 图44
📒《about face 4 交互设计精髓》 - 图45

相关书籍


  • 活动理论-唐纳德·诺曼
  • 《情境设计》
  • 《数字时代的设计》金·古德温
  • 《观察用户体验》伊丽莎白·古德曼
  • 《演员的自我修养》康斯坦丁·斯坦尼斯拉夫斯基
  • 《情感化设计》唐纳德
  • 《决断毫秒间》blink 马尔科姆
  • 《力量的源泉》加里·克莱因
  • 《兔脑龟心:慢活让你更聪明》hare brain tortoise mind盖伊·克拉克斯顿
  • 《服务设计》service design——polane、lovlie和reason
  • 《纸质原型》介绍可用性测试的多种方法
  • 《卓越升级》罗伯特·萨顿 哈吉·奥拉
  • 《设计交互模式》(design interfaces)交互设计模式
  • 《媒介等同》克利福德·纳斯 拜伦·里夫斯
  • 《流:最有体验的心理学》米哈伊
  • 《the icon book》
  • 《the visual display of quantitative information》塔夫特