以用户体验为中心的需求分析 -...
TRANSCRIPT
![Page 1: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/1.jpg)
第5 章 以用户体验为中心的需求分析
现在 PACS 项目团队沿着前进的道路来到一座大山前,在旁边的石碑上赫然篆刻着“定
义”两个大字。
这个问题往往是许多项目实施中业务部门都会提出的问题。需求的定义过程就是要让
业务需求通过分析手段转化为可以指导开发的系统需求。现在我们需要好好坐下来,进行
需求分析,而你的角色从这个阶段开始已经转变为业务需求分析师(BA)。我们需要进一
步细化原始需求,将模糊、不清晰的业务原始需求变为明确的定义,使需求提出者和需求
实现者双方都能明白未实现的系统将会是什么样子。
表 5-1 业务需求因素分析
成功因素 权 重 失败因素 权 重
用户的参与 15.9% 不完整的需求 13.1%
执行层的支持 13.9% 缺乏用户参与 12.4%
清晰的需求描述 13.0% 资源不足 10.6%
合适的规划 9.6% 不切实际的用户期望 9.9%
现实的客户期望 8.2% 缺乏执行层的支持 9.3%
较小的里程碑 7.7% 需求变更频繁 8.7%
有才能的员工 7.2% 规划不足 8.1%
主权 5.3% 提供了不再需要的 7.5%
清晰的愿景和目标 2.9% 缺乏 IT 管理 6.2%
在概念阶段不是已经明确技术方案与初步
范围了吗?为什么还要经过定义的过程?
![Page 2: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/2.jpg)
第 5 章 以用户体验为中心的需求分析
71
努力的工作和稳定的员工 2.4% 技术能力缺乏 4.3%
其他 13.9% 其他 9.9%
需求定义阶段对于项目成败具有非常关键的作用!表 5-1 是美国专门从事跟踪 IT 项目
成功或失败的权威机构 Standish Group 在其 CHAOS Report 报告中指出的影响软件项目成
功和失败的十大关键因素。其中在成功因素中有三个与需求定义有关,差不多占到 40%左
右,这是一个相当大的比例。而在失败因素中直接和需求有关的更是超过了 50%。在企业
级应用开发的经验也表明,在需求定义中出现的问题对项目的影响是非常巨大的,常常导
致项目成本大幅超支或者进度延误,甚至还会导致项目完全失败。需求定义的错误在后期
会被放大,图 5-1 就是经验总结出的一个单位人时代价图例(注意:本图中的数字代表一
个错误在需求时修正需要消耗 1 个单位人时,而在设计时发现并修正就需要消耗 5 个单位
人时,依此类推)。
图 5-1 一个单位人时代价图例
需求定义过程的传统方法一直以来都存在各种困境,作者认为对产出物的具体规格的
认识差异一直以来都不能得到很好的解决,下面我们就来看一下在 Silverlight 项目案例中
是如何走出这一泥潭的。
5.1 走出需求定义的泥潭
现在的需求定义的成熟度差异相当大,以前的系统开发过分依赖于系统需求规格说明
书,但事实上,由于业务分析师(BA)和需求分析师(RA)在专业知识业务方面的不统一、
信息不对称等问题,往往导致双方对一个系统功能场景缺乏统一认识,各自大脑中的影像
那我们应该怎么来定义系统的样子呢?我
现在都不知道我们要建的系统会是一个什么样
子,难道又要像以前一样费劲地写出一本需求规
格说明书,画出用例与时序图吗?
![Page 3: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/3.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
72
可能完全不同。这就像盲人摸象一样,对系统缺乏统一完整的认识,下面我们就来关注一
下,这个寓言故事在需求定义中的情形吧。
![Page 4: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/4.jpg)
第 5 章 以用户体验为中心的需求分析
73
5.1.1 盲人摸象的故事
从前,有四个盲人很想知道大象是什么样子,可他们看不见,只好用手摸,如图 5-2
所示。胖盲人先摸到了大象的牙齿。他就说:“我知道了,大象就像一个又大、又粗、又光
滑的大萝卜。”高个子盲人摸到的是大象的耳朵。“不对,不对,大象明明是一把大蒲扇嘛!”
他大叫起来。“你们净瞎说,大象只是根大柱子。”原来矮个子盲人摸到了大象的腿。而那位年
老的盲人呢,却嘟嚷:“唉,大象哪有那么大,它只不过是一根草绳。”四个盲人争吵不休,都
说自己摸到的才是真正大象的样子。
图 5-2 盲人摸象
现在这个大象换成了需求规格说明书对某一功能的具体描述,由于该描述并没有对最
终产出物进行原型描绘,因此业务分析师从业务知识出发认为大象就应该是“又大、又粗、
又光滑的大萝卜”,需求分析师从自己的角度出发认为大象就应该是“一把大蒲扇”,架构师认
为是“一根大柱子”,而程序员却认为是“一根草绳”。图 5-3 更加形象地描述了这种认知的差异。
图 5-3 需求分析与结果差异过程
![Page 5: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/5.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
74
在项目实施中由于需求定义不确切而导致沟通失真的情况比比皆是,客户的需求放大、
项目经理的需求控制、分析人员的技术加工、编码人员的断章取义导致最终产出物无法令
使用者满意。图 5-4 显示了由于定义不确切导致信息的衰减情况。
图 5-4 定义不确切导致信息的衰减情况
以上问题的主要原因是项目干系人对项目最终产出物没有统一认识造成的,而通过传
统的 UML 与需求规格说明书都不能直观地对最终产出物进行表述。因此,需求分析需要找
到能够解决对业务问题统一表述的工具。
5.1.2 Silverlight 需求分析利器——Blend SketchFlow
Silverlight 既然要照亮企业级应用,那么照亮的就不仅仅是其用户体验的友好性,同样
它也能通过更加直观的原型方式来照亮需求定义的模糊区域,而使项目团队不再是盲人,
它照亮了待实现系统的全部,这就是 Silverlight 需求分析的利器——Blend SketchFlow。
Microsoft Express Blend 是微软公司为 Silverlight 专门打造的界面设计工具(如图 5-5 所
示),自 Blend 3.0 开始就内置了原型设计工具 SketchFlow。利用 SketchFlow,设计人员
可以很快地创建 Silverlight 低保真原型,并可以发布到任何网站上,提供给业务分析师使
用。更为可贵的是,业务分析师可以在使用过程中将反馈直接提交在界面上,通过
SketchFlow 也可以无缝转换为高保真原型,并生成最终界面控件。在第 6 章将会具体介绍
本案例的需求定义是如何通过 SketchFlow 原型工具来进行面向用户体验需求分析的。
图 5-5 Microsoft Express Blend 4
![Page 6: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/6.jpg)
第 5 章 以用户体验为中心的需求分析
75
在需求定义过程中,业务分析师、需求分析师和用户体验工程师可以通过 SketchFlow
设计出的系统原型进行交流沟通,从而使得团队成员再也不会对最终产出物的理解产生偏
差。这种原型分析的方法一方面避免了类似盲人摸象的情况发生,另一方面也有助于分析
用户使用习惯与用户界面的友好性。其中第二方面就是 RIA 设计中非常重要的用户体验,
那么为什么 RIA 企业级应用要如此重视用户体验呢?
5.1.3 面向用户体验的重要性
什么是用户体验?最近几年,越来越多的应用程序解决方案商开始关注“用户体验”,随
之而来的还有一大堆相关的词汇:UX/UE、UED、UCD、IxD……听得多了,你也许会觉
得用户体验,一定是一个很时髦的东西(“虽然我不知道具体指些什么,但是它很热门”)。而
一说到用户体验相关的工作,你也许会觉得,好高深啊,不知道怎么下手。其实,用户体
验(User Experience,国外常简写为 UX,国内有时简写为 UE)也很简单,是一种纯主观
在用户使用产品过程中建立起来的感受。作者认为的用户体验就是从用户的角度出发,不
要让用户多想(易用性),不要让用户等待(响应速度),不要让用户操作过多步骤(简化
操作)。以北京交通为例,如果你不幸在上班过程中必须在西直门地铁站换乘,那将是非常
糟糕的用户体验:首先你必须学会复杂的路标指示,在中心站台广场你可能会由于异常复
杂的指示牌而彻底迷失方向,这就使用户要去不断思考如何才能找到正确的路线而违背了
易用性原则;本来两个站台相隔不远的绝对距离却设计了一个漫长的绕行方案使用户不得
不走很远的弯路,这严重违背了简化操作原则;最后你通过不懈努力来到 2 号线站台,却
遇到滚滚人流,使你无法乘坐上地铁,严重违背了响应速度原则。其实“用户体验”在现实生
活中的例子比比皆是:吃到美餐你会很高兴;碰上塞车你会很郁闷;快递把你的物品包装
弄坏了东西洒了一地,你就想冲他发火;在机场遇到航空管制导致乘坐的航班延误你会很
无奈……你也是用户,需要吃饭、上网、打电话、买东西、使用银行服务,每天都生活在“用
户体验”之中。
作为人机交互过程中的用户体验也越来越受到用户的重视, iPhone 和 iPad 的广受欢
迎无疑体现出用户体验在人机交互中的重要性。现在的用户已经体验了很多糟糕的应用程
序:比如当作者通过某移动公司的自助式终端打印发票,首先系统将对公、对私以及各种
业务的菜单都堆砌在一起,而且菜单名称又难于理解,这使作者陷入了逐个菜单尝试的窘
况,其次当要对很多缴费记录补打发票只能单选分别打印,更要命的是需要用户在打印每
Don’t Make Me Think! Don’t Make Me Wait!
![Page 7: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/7.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
76
一张发票时都重复手写长长的公司名称。如果上面的自助终端将呆板的主界面菜单换成直
接输入手机号,进入后根据手机号适用的业务种类显示人性化的“我要充值“、”我要查询“、”
我要补打发票“等站在客户立场采用的日常用语来代替专业术语将避免用户去思考。当然如
果要做得更好,系统可以直接把用户关心的余额、可补打的发票个数和金额列出来,并且
使用更形象的方式展示这些内容,使用这样的推荐操作方式,可以完全不用去思考就能提
醒用户操作。如果在打印发票的列表中设计”一键全部打印“按钮,并且只需要输入一次公司
名称,甚至直接记录用户曾经输入的公司名称,这样的用户体验无疑比作者的遭遇要好很
多。
当然用户体验的重要性还有很多,本书将在回顾篇中详细讨论用户体验的重要性问题。
5.2 面向用户体验的分析方法
5.2.1 UML 救不了业务分析师
企业级应用项目的需求分析手段有很多种,譬如基于面向对象分析设计(OOAD)的
需求分析过程,主要使用统一建模语言(UML)来描述与定义业务需求,这是一种以对象
为中心的需求分析方法。从 1996 年 UML 发布至今,这种面向对象分析方法广泛使用在企
业级应用的设计过程组中,但由于 UML 本身不具有对用户体验方面的分析方法,往往陷入
对象实现细节当中,而对于大型系统的 UML 设计本身就是一个噩梦,不知道多少业务分析
师要勉为其难地学习一门纯 IT 化的设计工具,而且还要在设计模式中选择合适的分层与重
构方法,这样对于一个业务分析师而言实在是一道难题!图为 UML 业务分析结果。
图 5-6 UML 业务分析结果
其实问题不应该这么复杂!作者一直认为 UML 不是分析化工具,而是设计化工具,在
没有弄清真实的业务需求前,直接使用 UML 这种重型的设计工具开展分析工作有点过于勉
强。因此,需求分析特别是面向用户体验的需求分析就需要一种直观、快捷、利于交流的
分析工具来描绘出产品的最终形态与处理逻辑,这就是原型分析工具!原型分析的目标在
![Page 8: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/8.jpg)
第 5 章 以用户体验为中心的需求分析
77
于将原始业务需求形成更加明确的交互方式,以达到业务与 IT 的充分认可,然后由 IT 人
员针对原型设计对象和对象方法,最终完成编码实现。这样做的好处在于避免了对需求“盲
人摸象”情况的产生:业务方与 IT 方都对产出物有一致的认识,消除了由于知识不对等而导
致的偏差;由于将产出物形态前置到设计之前也大大降低了返工的可能性。另一个很重要
的目的在于利用原型工具可以很好地分析用户体验的需求,业务分析师与用户体验专家对
产品的交互方式与内容可以进行充分的沟通,并就易用性、简化操作等具体问题找出最佳
的解决方案。
5.2.2 学会使用原型分析法
为了防止“盲人摸象”中对问题认识的不统一,同时提高产品的用户体验性,我们选择原
型分析法来构建企业 RIA 应用。通常我们将原型分析分为两个阶段:“低保真原型分析”和“高
保真原型设计”,如图 5-7 所示。
图 5-7 原型分析法
下面我们来了解一下面向用户体验分析中的低保真原型与高保真原型的含义。
1.低保真原型
低保真原型(Low-Fidelity Prototypes)是基于手绘方式的原型,其重点在于结构设计
与交互设计,而不是视觉设计。低保真原型的工具有纸和笔绘制的手稿(Sketches)、故事
板(Storyboards)、原型绘制软件等。低保真原型的优点是简单、便宜、易于制作和修改,
这种灵活的原型非常适合我们探索、尝试、修改。作为较便捷的方式,使用纸面介质作为
传达想法、信息的方式是最为迅速的。我们可以在最短的时间和低成本的情况下,提供让
项目组成员能够理解的设计方案。把交互过程的想法逐步通过简单的图形与文字表现出来,
修改不合理的功能和结构等,逐步成熟体验场景和交互的过程,帮我们找到设计的准则与
方向是否正确。
2.高保真原型
高保真原型(High-Fidelity Prototypes)不再是“木头手机”,而是你在手机店里看到的
手机精模,外观和真机一模一样,除了功能之外一切都是惟妙惟肖的。高保真原型通过软
件制作的视觉高级原型,可以让用户直观地了解到产出物的最终形态,其重点在于视觉设
计,确定用户体验美观性。其实现工具一般都是专业的原型开发工具,高保真原型设计的
特点就是包含了明确的任务操作流程、完整的功能与视觉效果。
![Page 9: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/9.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
78
就目前而言原型可以有多种实现方法,大多数需求分析达人都认为最好的原型分析方
法是纸和笔!下面我们就来简单看一下原型分析工具。
纸和笔
纸和笔(如图 5-8 所示)是最简单也是最常见的原型设计工具。与客户、同事沟通的
过程中,不用打断思路,随手拿起纸和笔,就能表达出我们的心中所想。而在原型分析的
初期阶段,由于发散性思维与头脑风暴式(如图 5-9 所示)的思维碰撞往往需要不断修改
原型,通过笔和纸可以有利于快速修改。
图 5-8 纸和笔设计 图 5-9 头脑风暴式
Visio
Visio 其实是一种应用非常广泛的低保真原型设计工具。Visio 的适用性非常广,从网
站界面、数据库模型,到平面布置图、工艺流程图,Visio 都提供了相应的元件库和模板来
进行快速创建,当然它也可以很快地制作软件原型。
![Page 10: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/10.jpg)
第 5 章 以用户体验为中心的需求分析
79
图 5-10 Visio
Fireworks/Photoshop 等图形制作软件
直接使用类似于 Fireworks/Photoshop(如图 5-11 所示)等图形制作软件制作产品原
型,一般是美工比较善于运用的制作工具,而这些专业的图形制作软件也主要用于高保真
原型的视觉设计当中。
图 5-11 Fireworks/Photoshop
Balsamiq Mockups
一个基于 Adobe Air 的手绘风格原型制作工具,控件库很丰富,而且可以自定义控件
外观,导出格式为 pdf 和 png,如图 5-12 所示。
![Page 11: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/11.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
80
图 5-12 手绘风格原型制作工具
Mockflow 以及其他在线原型工具
与 Balsamiq Mockups 相似,是在线原型工具,如图 5-13 所示,它们各有各的特色,
例如 Mockflow 的原型模板是它的一大特色,当然这些工具的导出格式也是 pdf 和 png。
Axure RP
Axure RP 是美国 Axure Software Solution 公司出品的一款原型制作软件,如图 5-14
所示,RP 是“Rapid Prototyping”(快速原型设计)的缩写。顾名思义,Axure RP 能够帮你
快速而有效地建立产品的 prototype。Axure RP 的事件机制能够模拟大多数 Web 应用中出
现的交互行为,并且它的输出物是 html,客户能够直观地“使用”原型,这一点是之前介绍
的原型工具中不具备的交互逻辑设计能力。然而 Axure RP 需要一定的成本投入,也是门
槛相对较高的专业原型工具。
图 5-13 Mockflow 图 5-14 Axure RP
Microsoft Expression Blend
![Page 12: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/12.jpg)
第 5 章 以用户体验为中心的需求分析
81
Microsoft Express Blend 是微软公司为 Silverlight 专用打造的界面设计工具如图 5-15
所示,自 Blend 3.0 开始就内置了原型设计工具 SketchFlow。下面我们就来认识一下如何
使用 Express Blend 完成以用户体验为中心的原型分析过程。
图 5-15 Microsoft Express Blend 4
5.3 使用 Blend SketchFlow 构造 Silverlight 应用原型
设计人员可以使用 Blend SketchFlow 以十分直观的方式确定 Silverlight 应用程序的
界面结构设计与交互方式。SketchFlow 原型可以从一个简单的原型开始,后续不断优化原
型,它提供了迭代式的用户体验优化平台,并可以通过使用完整的标准 UI 手绘控件、绘
制用户手绘控件、导入外部元件(如 Photoshop、 Illustrator 的图像)、制作交互式动画、
创建示例数据的方式自由地创作原型,也可以将阶段性原型发布到 SharePoint 网站与其他
项目干系人分享。
5.3.1 低保真原型设计
在 Silverlight 设计工具 Blend 中包含了原型开发工具 SketchFlow,它能帮助我们做以
下这几件事:
设计师和客户的桥梁
使需求与交付物更为明确(涂鸦风格画原型图,显得更清晰)
快速的 UI 设计(关注界面的整体感觉而不是细枝末节)
吸引客户的原型(有趣味性)
![Page 13: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/13.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
82
SketchFlow 做的原型是能够交互的,一点它可以切换,一动它可以做业务逻辑。这样
的原型,用户看起来非常直观,设计师或需求人员与客户交流起来也更容易,避免了最终
交付物与客户需求的差异。
现在回到我们的具体案例中,业务分析人员要与项目团队分析用户登录时的业务需求,
现在是项目组利用 SketchFlow 来实现原型分析的时候了,项目经理通过 TFS 给用户体验
工程师安排了制作登录界面原型的任务。现在用户体验工程师打开 Blend 新建了一个
Silverlight SketchFlow 应用程序项目,并命名为“PACS”,如图 5-16 所示。
图 5-16 79 Microsoft Express Blend 新建项目
我们首先来熟悉一下 Blend 工作区,如图 5-17 所示。
![Page 14: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/14.jpg)
第 5 章 以用户体验为中心的需求分析
83
图 5-17 Microsoft Express Blend 工作区
其中① 为“SketchFlow 反馈”面板,可以在“SketchFlow 反馈”面板中查看对原型留下
的反馈。文本反馈直接显示在面板中。你可以查看多个反馈文件,并在“SketchFlow 反馈”
面板下拉列表中的反馈文件之间进行切换。② 为“SketchFlow 动画”面板。通过使用
“SketchFlow 动画”面板,可以轻松创建用于表示屏幕上的交互式元素的动画。SketchFlow
动画可让你快速轻松地创建简单的动画样式的动画序列,而不必使用 Expression Blend 中
提供的关键帧动画工具。你还可以使用动画来显示特定元素的不同可视状态,或者表示与
屏幕上的元素进行的交互。③ 为美工板,美工板提供了各个屏幕的视图,在这些屏幕上,
你可以使用 Expression Blend 中的任何绘图工具进行绘图,可以导入来自 Adobe
Photoshop 的图像,还可以使用 Expression Blend for Windows Presentation Foundation
(WPF) 和 Microsoft Silverlight 中的全套控件。④ 为“SketchFlow 图”面板,“SketchFlow
图”面板是应用程序流的直观表示形式。可以使用 SketchFlow 图为原型创建导航,它从第
一个屏幕开始,并且跟随用户的交互,一直到最后一个操作。
接下来,我们就来一起完成一个简单的原型,首先在“SketchFlow 图”面板上建立两个
页面(在 Blend 中文版中叫做“屏幕”):登录页面与主界面,如图 5-18 所示。
然后我们开始在“登录页面”的美工板上就可以绘制其原型,我们可以在控件库中找到带
有“草图样式”字样的控件,比如使用 TextBox-Sketch 来创建“账户”的输入框,如图 5-19 所
示。
![Page 15: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/15.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
84
图 5-18 Microsoft Express Blend SketchFlow 面板
图 5-19 Microsoft Express Blend 草图样式控件
利用“资产”面板里“SketchFlow”中提供的“草图样式”控件,通过简单的几步拖放和设置,
我们就可以很快地绘制出传统的登录界面草图,如图 5-20 所示。
图 5-20 PACS 登录页面草图设计
现在我们可以将“登录”按钮链接到“主界面”,链接方式也很简单,只需要在“登录”按钮上
![Page 16: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/16.jpg)
第 5 章 以用户体验为中心的需求分析
85
单击鼠标右键,然后在“导航到”菜单中选择“主界面”,如图 5-21 所示。
图 5-21 草图导航功能
现在我们再绘制出主界面的基本样式,如图 5-22 所示。
图 5-22 PACS 主界面草图设计
其他页面的展现形式都可以先以这种低保真原型为准进行前期设计,现在项目组可以
将低保真原型发布到 SharePoint 团队网站上供业务分析人员进行审订。
如图 5-23 所示是本案例在分析时在低保真原型的审订过程中对“数据上传”界面的调整
意见,通过这样直接的审订方式,业务分析师可以更加直接地与用户体验工程师进行在线
协作,保证了 RIA 项目开发的高效性。
5.3.2 将 SketchFlow 项目发布到 SharePoint 网站
在完成项目相关低保真原型设计后,我们可以在 SketchFlow 项目中的“文件”菜单上单
![Page 17: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/17.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
86
击“发布到 SharePoint”选项。弹出对话框后,系统将要求你在“文档库”文本框中输入文档库
的 URL,并在“项目文件夹”文本框中输入项目文件夹的名称,如图 5-24 所示。
图 5-23 数据上传低保真原型
单击“确定”按钮后,输入 SharePoint 网站用户名和密码就发布成功了,此后团队成员
就可以在以上 URL 网页中直接运行 SketchFlow 项目原型,还可以在网页上留下反馈,将
反馈发布到 SharePoint 网站,然后让审阅者在 SketchFlow 播放器中查看反馈。添加反
馈的方式有多种,可以添加文本反馈,也可以添加墨迹反馈。当反馈编辑完后,在
“SketchFlow 播放器”面板中,单击“显示反馈选项”选项,然后单击“上载到 SharePoint”选
项。在“反馈作者信息”对话框中,添加作者姓名及姓名缩写,然后单击“确定”按钮。反馈即
被发布到 SharePoint 网站上项目文件夹中的 Feedback 文件夹内。将反馈发布到
SharePoint 网站之后,团队成员可以在“共享”面板中单击“刷新”按钮,以便在 SketchFlow
播放器中查看反馈,如图 5-25 所示。
图 5-24 将 SketchFlow 项目发布到 SharePoint 网站 图 5-25 查看反馈
![Page 18: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/18.jpg)
第 5 章 以用户体验为中心的需求分析
87
多个业务分析师可以同时编写反馈,而且可以在 SketchFlow 播放器中查看为某个原型
留下的所有反馈。更为方便的是如果当前的 SketchFlow 项目正被 TFS 源控件跟踪,就可
以通过.feedback 文件快速创建任务。将反馈转换为任务时,会向此任务添加反馈的屏幕
截图,而且会在工作项模板中包含有关此工作项的信息,团队成员可以直接在工作项模板
中添加或修改信息。将反馈转换为 TFS 任务的具体操作是:使用“SketchFlow 反馈”面板在
Blend 中查看反馈文件,找到待转换的反馈文件后单击鼠标右键,选择“将反馈转换为 TFS
工作项“命令;在弹出的对话框中选择要使用的工作项模板,单击”确定“按钮后弹出“新建工
作项”对话框,填写完表单后单击“保存“按钮就会在 TFS 服务器上新增一个任务。
整个以用户体验为中心的分析过程充分利用了 Silverlight 的开发与设计时环境,与团
队中相关干系人进行高效协同,并时刻围绕原型进行分析。在分析过程中,原型一直在被
优化与改进,这就是原型的迭代式优化过程,这样的做法有效保证了在系统开发初期,需
求分析人员对最终产出物的交互逻辑充分肯定,避免了需求提出与理解的不一致性。事实
上本书的案例项目正是通过需求评审时的全部原型图来进行验收的,这样的验收过程被证
明是非常高效的。
5.3.3 使用原型分析 UI 控件交互
还记得在第 3 章的 PoC 过程中,我们使用 AJAX 技术实现的分段设置控件(如图 5-26
所示)吗?
图 5-26 AJAX 技术实现的分段设置控件
由于使用传统的分析方式,将用户交互部分设计得很不自然。以用户体验为中心的分
析思路注重交互中的自然感,将一切信息交互做得更加自然(Do It Naturally)是用户体验
的一大重要指标,也是 NUI 时代的主旋律。前文中已经说到 Apple iPhone 的巨大成功离不
开注重用户体验的分析与设计。项目小组在分析分段设置的用户体验交互时,采用了原型
分析法,总结了以下特征:
分段设置的本质是对一个连续区间的切割;
分段设置的区间具有左有界、右有界或者左右均有界三种情况;
![Page 19: 以用户体验为中心的需求分析 - images.china-pub.comimages.china-pub.com/ebook195001-200000/198839/ch05.pdf · 项目案例中. 是如何走出这一泥潭的。 5.1 走出需求定义的泥潭](https://reader030.vdocuments.site/reader030/viewer/2022012820/5faed24a88a76d710236e2b2/html5/thumbnails/19.jpg)
Silverlight 寻光之旅——企业级 RIA 项目全流程实践
88
分段设置在边界值和分段点存在左包含、右包含的情况;
分段设置每一个分段都对应一个数值。
针对以上对于控件交互特征的总结,同时考虑到分段设置控件在本项目的诸多功能中
都会使用,因此,项目组考虑使用公用自定义控件来实现,最直观最自然的表现形式就是
数轴方式。现在用户体验工程师通过手稿绘制了 UI 控件原型,如图 5-27 所示。
图 5-27 UI 控件原型
在分析过程中业务分析师与用户体验工程师通过实际的交互场景,放弃了用例分析中
复杂的 UML 语言,而通过特例推导出一般情况的方法论进行分析。图 5-27 中以 CPI 分段
设置为特殊案例进行分析,将分段设置点放在数轴下方,分段对应的 CPI 数值放在数轴上
方,这样可以很直观地让用户区分分段值与分段范围。而分段范围通过数轴中的小点进行
设置,可以直接拖曳在数轴上移动,也可以往外拖曳提示删除。如果要增加新的分段点,
可以在数轴上任意空白位置单击鼠标右键来增加,此时上方的左右两处分段值都默认为原
分段范围上的分段值。新增与删除都可以通过自然的方式实现,那如何解决分段点左右包
含的关系呢?这一点可以通过单击分割点切换包含类型,实现左包含、右包含的切换功能。
通过以用户体验为中心的分析方法,项目团队确认了系统的所有原型,并安排需求分
析师很快根据原型交互完成了需求规格说明书,提交并通过了需求评审。至此,项目组顺
利迈过了第二个里程碑,下面将向“设计”的山峰进发。