9-交互式系统设计

1. 设计框架

定义高层次上的屏幕布局，放置过早把重点放在小细节上。

1.1. 定义外形因素和输入方法

• 外形因素
  • 设计什么样的产品？
    • 高分辨率屏幕上显示的Web应用？
    • 轻便、低分辨率、在黑暗和阳光下都能看得见的手机产品？
    • 产品的特点和约束对设计提出了什么样的要求(回想一下人物角色和场景剧本
  • 产品输入方法
    • 产品与用户互动的形式
    • 取决于产品的外形和人物角色的能力和喜好
    • 哪种方式或者组合更适合设定的人物角色

1.2. 定义功能和数据元素

• 数据元素
  • 交互产品中的基本主体，如相机、电子邮件、订单
• 功能元素
  • 对数据元素操作的工具以及输入或者放置数据元素的位置
• 例子：智能电话人物角色Vivien，满足其需求的功能元素包括
  • 快速拨号键
  • 从地址簿中选取联系人

1.3. 定义功能组合层次

• 元素分组
  • 更好地在任务中和任务间来帮助促进任务角色的操作流程
• 需要考虑的内容
  • 哪些元素需要大片的视频区域
  • 容器如何组织才能优化工作流
  • 哪些元素是被一起使用的
  • 产品平台屏幕大小等影响

1.4. 勾画大致的设计框架

最初节点，界面的视觉化工作应该非常简单，不要被细枝末节的区域分散精力。

1.5. 构建关键情景场景剧本

• 描述了人物角色如何同产品交互
  • 这些场景剧本描述了人物角色最频繁使用界面的主要路径
  • 重点在任务层
  • 严谨描述每个主要交互的精确行为，并提供每个主要路线的走查
• 可使用低保真的故事板

例子：电子邮件应用中的关键线路的活动护主要包括读和写邮件，而不是配置服务器。

1.6. 通过验证性的场景剧本来检查设计

• 验证性的场景剧本不用具备很多细节
  • 但包含一系列“如果怎样，将怎样”的问题
• 关键线路的变种剧本
  • 关键线路的替代
    • e.g. A决定不给B打电话，而是发邮件
• 包含必须要被执行但又不经常发生的情况
• 边缘情形使用场景剧本
  • 非典型产品具备，但又不太常用的功能
    • e.g. 想添加两个同名联系人

2. 设计中的折衷

1. 个性化和配置
2. 本地化与国际化
3. 审美学与实用性

3. 软件设计中的考虑

1. 让软件友好和体贴
2. 有趣的用语
3. 加快响应时间
4. 减轻记忆负担
5. 减少等待感
6. 设计好的出错信息

4. 交互设计模式

4.1. 主导航模式

4.2. 二级导航模式

4.3. 轮播模式

• 优点
  1. 充分利用空间
  2. 当前信息清晰可见
• 缺点
  1. 用户几乎不适应轮播图
  2. 用户通常只能看见图像终端一张

5. 简化设计的策略

5.1. 删除

最明显的简化设计方法。

5.1.1. 如何删除

• 关注核心
  • 与新增功能相比，客户更关注基本功能的改进
  • 影响到用户日常使用体验的功能
• 砍掉残缺功能
  • 沉默成本误区
• 不要简单地因为用户要求就添加功能

5.1.2. 具体方法

1. 删除错误
2. 删除视觉混乱
3. 删减文字、精简句子
4. 不要过多删除

5.1.2.1. 删除视觉混乱

减少用户必须处理的信息，集中注意力在真正重要的内容上。

• 方法
  • 使用空白或轻微背景来划分页面，不要使用线条
  • 尽可能少使用强调，仅加粗就可以了
  • 别使用粗黑线，匀称、浅色的线更好
  • 控制信息的层次，标题、子标题、正文
  • 减少元素大小的变化
  • 减少元素形状的变化

5.1.2.2. 删减文字

删除不必要的内容可以让读者对自己看到的内容更自信。

1. 删除引见性文字
2. 删除不必要的说明
3. 删除繁琐的解释
4. 使用描述性链接
   • 点击这里

5.1.2.3. 不要过多删除

人们希望自己能掌控局面。

5.2. 组织

• 最快捷的简化设计方式

• 分块

• 方法

  1. 利用不可见的网格来对齐界面元素
  2. 大小和位置：重要的元素大一点，相似元素放在一起
  3. 感知分层
  4. 期望路径
     • 在描述用户使用软件的路径时，千万不要被自己规划图中清晰的线条 和整洁的布局所迷惑

5.3. 隐藏

低成本的简化方案

5.3.1. 需要隐藏的内容

1. 主流用户很少使用，但自身需要更新的功能
2. 事关细节（对服务器进行配置或设计邮件签名）
3. 选项和偏好（修改绘图应用的单位）
4. 特定于地区的信息（如时间和日期需要频繁自动更新的信息）

5.4. 转移

• 例子：
  • 被精简掉的按钮全部通过电视屏幕上的菜单来管理
  • 遥控器使用起来非常方便
    • 用户需熟悉和记住的按钮只有几个，不会按错
  • 利用电视屏幕比在遥控器上增加液晶面板便宜得多
    • 如何把屏幕菜单设计得简单易用是个挑战

5.4.1. 在设备之间转移

利用两个平台优势，各司其职。

• 例子
  • RunKeeper应用的例子
  • 功能：记录用户跑步的路线
  • 收集记录跑步数据很简单
  • 但小屏幕难以显示所记录的与一次跑步有关的所有信息
  • RunKeeper网站适合输入数据，且能够很容易地查看各种细节信息

5.4.2. 移动平台与桌面平台

• 有时候，把某项任务的某些内容（如输入信息）转移到不同的平台 上可能是一种更好的选择
  

5.4.3. 向客户转移

把复杂的工作留给客户。搞清楚哪些工作交给计算机，哪些给用户。

5.5. 简化设计策略的组合

1. 删除不必要的
2. 组织要提供的
3. 隐藏非核心的
4. 转移 …… ？