Flex应用的易用性设计过程

简介

Adobe Flex

Adobe Flex是支持RIA(Rich Internet Applications)的开发和部署一系列发展中的技术和产品线的概括词, 包括the Flex SDK, Flex Builder 2和若干企业级服务.Adobe Flex使用已经流行的Flash展现技术, 基于Actionscript 3的编程框架, 是当前RIA方案中最成熟构建方案.

易用性设计

易用性(Usability)是一门跨学科的知识领域.(TODO: 内容)

Rapid Prototyping

快速原型技术. (TODO: 优点/缺点)

设计过程

总览

作为一种新型的客户端框架, Flex应用的设计过程还有很多不确定的因素. 官方的Design Guideline推荐使用Rapid Prototyping的方式进行开发, 所有的工作均从原型开始. 

整个过程中, 设计者和界面开发者的合作非常紧密. Flex本身也要求界面开发者拥有更高的技能, 以及对界面整体的感知能力等.

过程角色

产品经理/市场/项目经理(PDM/Marketing/PM)
负责收集需求, 分析需求, 鉴别需求, 确认需求, 和客户/用户沟通协调.

易用性工程师(UE)
负责用户/需求的研究.界面框架的设计, 导航设计, 易用性的把握.

信息架构师(IA)
负责系统信息的架构, 功能研究, 导航设计.

界面设计师(UI Designer)
负责根据Wireframe设计界面. 负责总体风格的设计.

界面开发工程师(UI Developer)
根据各种设计文档, 把最终界面实现; 根据和客户/用户的沟通迭代界面.

用户/需求研究

角色: PDM/Marketing/PM, UE, IA, UI Developer.

关键任务: 确认初步需求, 初步的数据字典.

产物: 

简要的, 初步的已确认需求列表.

基本的数据字典.

需求示例:

对象关系分析

角色: PDM/Marketing/PM, UE, IA, UI Developer.

关键任务: 分析出系统中的对象关系.

产物:

对象的结构图.

示例:

(需求已过期)

图3:

(用户视角的对象关系图)

图4:

任务分析

角色: UE, IA, UI Developer.

关键任务: 从各个层次上的需求推导出满足需求所需要的任务.

产物:

任务列表.

示例(Book.Shelf):

图5:

场景分析

角色: UE, IA, UI Developer.

关键任务: 把完成每个任务的具体步骤规划出来, 涉及到完成任务所需的数据设计.

产物:

场景设计文档.

示例:

图6:

图7:

Wireframe设计

角色: UE, IA.

关键任务: 依据之前的设计, 实现低保真的界面线框图.

产物:

界面的线框图.

示例(更多参看Book.Shelf Wiki):

图8:

风格设计

角色: UI Designer, UI Developer.

关键任务: 根据客户的反馈, 制作出界面风格.

产物:

Flex CSS文件, 以及相关资源.

示例:

无

控件设计

角色: UI Developer.

关键任务: 根据之前设计成果, 分析出系统的控件包含层次, 封装通用控件.

产物:

完整的系统界面结构.

图9:

界面实现

角色: UI Developer.

关键任务: 根据之前设计成果, 实现系统界面,以及导航.

产物:

代码.

示例:

无

易用性回顾

角色: UE, IA.

关键任务: 根据易用性检查列表回顾已经实现的界面.

产物:

评估报告.

示例:

无

风格迭代

角色: UI Designer, UI Developer.

关键任务: 根据客户反馈, 调整风格.

产物:

迭代的CSS文件以及资源.

示例:

无

RIA应用易用性检查列表

系统状态的可视性

• 系统必须在正常的时间内, 以适当的反馈方法告知用户自身的状态.
  
• 照顾到现实世界和系统的对应
  
• 系统必须使用用户的语言, 用用户熟悉的词,句和概念. 遵守现实世界的规则, 以自然, 符合逻辑的顺序展示信息.
  
• 用户控制, 用户高自由度
  
• 用户经常误用系统功能. 系统必须提供”紧急出口”, 使得用户能离开不想使用的功能, 而不是忍受一序列的对话框. 支持Undo和Redo.
  
• 一致性和标准
  
• 用户不会被逼迫猜测是否某些不同的词句, 情景, 操作有相同的意义. 遵守系统所在平台的标准.
  
• 错误防止
  
• 显示友好的错误提示信息是不错的设计, 但是更好的设计是在第一时间防止错误产生.
  
• 让用户认得, 而不是记得.
  
• 让对象, 操作, 选项可见. 让用户在使用系统的时候不会记忆太多信息. 任何时候, 系统的使用提示应该以适当的方式出现, 或者易于获取.
  
• 灵活, 使用效率高
  
• 支持加速键(Accelerators), 虽然不会被初学者看到, 却能加快高级用户的使用效率.允许用户定义快捷操作.
  
• 美观, 最小化设计
  
• 对话框不应该包含无关的信息, 或者很少用到的信息. 谨慎使用动画, 转换特效.
  
• 帮助文档
  

参考文档

Apple User Experience Documentation
http://developer.apple.com/documentation/UserExperience/UserExperience.html

Instone, Keith Site Usability Heuristics for the Web
http://user-experience.org/uefiles/writings/heuristics.html

Macromedia Usability Topic Center
http://www.macromedia.com/devnet/topics/usability.html

Microsoft Windows User Experience
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/fore.asp

Nielsen, Jakob Ten Usability Heuristics
http://www.useit.com/papers/heuristic/heuristic_list.html