9 交互式系统的设计-2016.pdfVIP

人机交互的软件工程方法 —— 交互式系统的设计 主讲教师：冯桂焕 2016年春季 如何开展交互式系统设计？ 设计框架 • 过早地把重点放在小细节、小部 件和精细的交互上会妨碍产品的 设计 – 先站在一个高层次上关注用户界面 和相关行为的整体结构 – 房屋设计举例 • 设计框架 – 定义高层次上的屏幕布局 Alan Cooper (1952~) – 定义产品的工作流、行为和组织 1. 定义外形因素和输入方法 • 外形因素 – 设计什么样的产品？ • 高分辨率屏幕上显示的Web应用？ • 轻便、低分辨率、在黑暗和阳光下都能看得见的手机产品？ • 产品的特点和约束对设计提出了什么样的要求(回想一下人物角色和 场景剧本) • 产品输入方法 – 产品与用户互动的形式 – 取决于产品的外形和人物角色的能力和喜好 – 哪种方式或者组合更适合设定的人物角色 2. 定义功能和数据元素 • 数据元素 – 交互产品中的基本主体，如相片、电子邮件、订单 • 功能元素 – 对数据元素操作的工具以及输入或者放置数据元素的位置 • 举例：智能电话人物角色Vivien ，满足其需求的功能元素 包括 – 快速拨号键 使用场景剧本检验！ – 从地址簿中选择联系人 – 从电子邮件、约会项以及备忘录中选取联系人 – 在某些情境下自动拨号键（比如即将到来的约会事项） 3. 决定功能组合层次 • 元素分组 – 更好地在任务中和任务间来帮助促进任务角色的操作流程 • 需考虑的内容 – 哪些元素需要大片的视频区域 – 容器如何组织才能优化工作流 – 哪些元素是被一起使用的等 – 产品平台、屏幕大小、外形尺寸和输入方法的影响 • 容纳对象的容器之间有比较关系或者要放在一起使用，则其应该是 相邻的 • 表达一个过程中多个步骤的对象通常也要放在一起，并且遵循一定 的次序 4. 勾画大致的设计框架  最初阶段，界面的视觉化工作应该非常简单 • 方块图阶段 – 用粗略的方块图来表达并区分每 个视图 – 方块图对应窗格、控制部件（如 工具栏） – 为每个方块图添加上标签和注解 • 注意 – 不要被界面上某个特殊区域的细 枝末节分散了精力 5. 构建关键情景场景剧本 • 描述了人物角色如何同产品交互 – 这些场景剧本描述了人物角色最频繁使用界面的主要路径 • 重点在任务层 • 举例：电子邮件应用中关键线路的活动主要包括读和写邮件，而不 是配置邮件服务器 – 必须在细节上严谨地描述每个主要交互的精确行为，并提供每个 主要线路的走查 • 可使用低保真草图序列的故事板 6. 通过验证性的场景剧本来检查设计 • 验证性的场景剧本不用具备很多细节 – 但包含一系列“如果怎样，将怎样”的问题 • 关键线路的变种场景剧本 设计过程中上述步骤 – 关键途径的替代 可能包含循环往复 • 如果Vivien决定不给Frank打电话，而是发电子邮件 • 必须使用的