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.
关键任务: 分析出系统中的对象关系.
产物:
对象的结构图.
示例:
(需求已过期)
(用户视角的对象关系图)
图4:
任务分析
角色: UE, IA, UI Developer.
关键任务: 从各个层次上的需求推导出满足需求所需要的任务.
产物:
任务列表.
示例(Book.Shelf):
场景分析
角色: UE, IA, UI Developer.
关键任务: 把完成每个任务的具体步骤规划出来, 涉及到完成任务所需的数据设计.
产物:
场景设计文档.
示例:
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