通用设计流程

本文全系列满满干货,是从众多交互设计前辈们分享的宝贵经验里挑选出的最实用的方法,能让你彻底了解交互设计。本思维导图是《交互设计指南》设计过程部分详细笔记，赶快收藏学起来吧！

通用设计流程

• 设计策略
• 设计研究
• 结构化的研究结果
• 构思和设计原则
• 细化
  • 约束
    • 时间，资金，技术，商业需求，用户需要，上下文背景，工具，团队，你。
    • 约束最终确定了产品的定义。
  • 交互设计法则和原则
  • 架构
    • 隐喻
      • 为用户理解抽象（数字）概念提供的一种方法。
      • 最著名的例子是桌面隐喻，其帮助统一了图形用户界面（GUI）
      • 隐喻暗示了从产品该如何工作到视觉或物理形态该如何塑造等一切事物。
      • 一个很通用的隐喻是仪表盘或控制面板。直接从物理对象那拿来，作为一种对系统信息和控件聚类和分组的方法。
    • 姿态
      • 独占态
      • 暂时态
      • 后台态
      • 寄生态
    • 结构
      • 1.功能绘制
        • 如果项目结合了软件和硬件，需要确定功能如何存在。
        • 理解了功能的使用背景就可以决定该功能的控制形式是否为
          • 模拟的（物理按钮、滑块和刻度盘等）
          • 数字的（屏幕控制）
          • 两者的混合（如软键，是屏幕标签旁边的物理按钮，其功能和标签可改变）
        • 确定功能绘制的决定因素
          • 情境
          • 优先权
          • 成本
          • 人类工效学
          • 美学
          • 可触知性
        • 功能制图完成后，就很容易去给设备勾勒框架、建模和制作原型。
      • 2.站点/屏幕/状态图
        • 对功能、信息和内容的组织和分类属于信息架构学科。信息架构利用了图书馆学中的技巧，对信息空间进行结构化，让发现、导航和理解内容更容易。
        • 状态，一个基于时间的系统的某个暂停瞬间。状态特别关注的是初始、激活和更新。
        • 模式是用户或者系统创建的允许访问不同功能和不同状态的总条件。有争议，因为模式增加了所有系统的复杂性，使得心智模型更有挑战性。
        • 对页面、屏幕、状态和模式进行绘制，可以建立统一产品的概貌。
  • 细化的文档和方法
    • 剧情
      • 剧情是用语言创建的原型，在本质上是简单的故事。
      • 最常见的剧情是：想象第1次使用的情况。
    • 草图和模型
    • 故事板
      • 故事版制作技术借鉴了电影制作和广告制作
      • 通过把故事和附图结合在一起，设计师可以有效的讲述关于产品或服务的故事，并在上下文情境中展示它的特性。
      • 通过故事版，设计师可以展示动作的关键时刻。
      • 故事版可以与线框图一起阐述复杂过程或功能的细节。
    • 任务流
      • 清楚了哪些任务需要设计后，排列出合理的顺序是很重要的。
      • 帮助设计师开始看到产品初步成形
    • 用例
      • 用于草拟出产品或服务的功能。用例试图以平实的语言解释某个功能是做什么的，并且为什么。
      • 程序员已经在软件设计中使用用例好多年了
      • 用例也描述了功能涉及的人。
      • 用例的形式
        • 标题
        • 参与者
        • 目的
        • 初始状态
        • 终止状态
        • 主要步骤
        • 备选方案
        • 其他使用到的用例
      • 是一个非常好的工具，能用来分解任务，并且显示系统将支持什么。
    • 情绪板
      • 是设计师考虑产品情感内容的一种方式
    • 线框图
      • 一组文档，用来显示结构、信息层次、控件和内容。
      • 起源于建筑图纸和网络示意图
      • 仅次于原型的最重要文档（服务设计是是服务蓝图）
      • 在同一文档中满足各种群体的需求
      • 主要区域
        • 1.线框图本身
          • 产品形式由三要素构成：内容、能发现和接触功能的必要的控件、访问和浏览以上两个要素的方法。
          • 控件包括：按钮，旋钮，滑块，刻度盘，输入框等。
          • 体现创建最终产品所需要的所有项目（内容占位符，功能和导航）
        • 2.注释
          • 需要被注释的对象：控件，条件选项，约束等
        • 3.线框图元数据
          • 设计师，修改时间，版本号，最后一个版本更改内容，相关文档（商业需求书、技术规范、用例等），未解决的问题，用于总结性注解的位置。
    • 服务蓝图
      • 服务时刻
        • 每个服务都是由一组离散的可以被设计的时刻组成。
        • 重要部分应该是每个服务时刻中每个接触点的集思广益的构想。
      • 服务序列
        • 以故事版的形式展示服务的重要意图。通过把各种服务时刻的概念组合到一起来创建服务序列，形成剧情或贯穿整个服务的事件序列路径。
  • 控件
    • 基本控件
      • 开关
      • 按钮
      • 单选按钮
      • 旋钮
      • 门闩
      • 滑块
      • 把手
    • 纯物理控件
      • 滚轮
      • 游戏操纵杆
      • 轨迹球
      • 5向键
    • 纯数字控件
      • 复选框
      • 折叠
      • 滚动条
      • 下拉菜单
      • 多选列表
      • 文本框
      • 选值框
  • 非传统输入
    • 语音
    • 姿势
      • 生理学和人体运动学
      • 存在和说明
      • 避免误动作
      • 将手势匹配相应的任务
    • 存在
• 原型制作、测试和开发
  • 界面设计
    • 最关心的通常是 控件和导航的布局 和 位置问题
    • 在屏幕上，设计师需要提供有关用户该看哪里的线索。
    • 格式塔心理学告诉我们，当对象离得太近的时候，意识会认定他们是相关的。
    • 眯眼测试：在视觉上模糊细节，并查看哪个项目很突出。
    • 视觉设计肩负着传达可能性、局限性和交互状态的责任。
    • 视觉设计如同交互设计和信息架构的声音，它传达了应用中内容和动作的重要性。
    • “除去不必要的，以便必要的可以显示出来。”
    • 音效可以使外界发生的事情的提示，以便用户不必经常监视应用的变化。
  • 原型制作
    • 低保真原型
      • 评估整个功能和产品流程
    • 高保真原型
      • 获得更多像外观、感觉和动画等元素的细节
    • 服务原型
      • 角色扮演构成了服务设计过程的重要部分。
  • 测试
    • 实验室测试优点：效率；可控的环境
    • A/B测试：展示不同的设计给用户，对比结果。
    • 测试的时候，设计师不应该为他们的设计做辩护。最好让其他团队成员执行测试。
    • 你很少能一蹴而就，测试会揭示那些已知和未知的缺陷。关注设计研究阶段所关注的同一件事：模式。然后返回到线框图和原型，纠正错误，并再次测试他们。
    • 启发式评估
      • 没有条件进行测试，可以对原型进行走查。
      • 找出下列事项：
        • 事情发生了吗？（反馈不充分）
        • 缺少解释
        • 咦，刚刚发生了什么？（不理解一个动作的结果，反馈和前馈很差）
        • 死循环
        • 隐藏的功能
        • 迷失了
        • 我的数据哪去了？
        • 如果我点击这个会发生什么？
        • 我看不见那个按钮
        • 死循环
  • 开发
    • 设计师的角色是故障排除；调整设计以适应代码或物理材料；共同协作。
    • 敏捷开发
      • 本质是把比较大的任务/功能化整为零、分成小块，在短时间内就可以开发。
      • 开发周期：计划制定，需求分析，设计，编码，单元测试和验收测试。
      • 敏捷开发能帮助最小化整个风险，并且更容易允许对功能的改变。