RIA及技术与用户体验 KDUED： Brandon 2008年12月19日

RIA及技术与用户体验 KDUED： Brandon 2008年12月19日
这一段时间以来，我们遭受了“用户体验”，“以用户为中心”，“KDUED”等词语的轰炸，例如UPAChina，毛基业教授做的可用性的管理论坛，谢文所说的web1.0转变到以用户为中心的web2.0以及前几次的友商畅想沙龙都谈到了用户体验，足以说明了这些词语和概念的日益重要性，不研究就要对不起自己了。那么，有哪些技术在真正关心用户体验呢，有哪些技术成功的改善了用户体验？今天就通过一些具体的案例来讲一讲Adobe公司的概念及技术以及如何解决Adobe公司称之为“用户体验问题”的问题。 KDUED： Brandon 2008年12月19日

目录 Flash/Flex/Flash player/AIR的比较先谈谈 RIA(Rich Internet Applications)
谈谈用户体验设计进入RIA 的世界-转换思维模式 RIA深度应用案例 RIA的开发利器——具体了解Flex

Flash/Flex/Flash player/AIR的比较
下面我们先来了解几个概念 1.Flash/Flex/Flash player/AIR的比较这些都是什么技术？

这些都是什么技术？ AIR=Adobe Integrated Runtime

概括的说你可以使用Flash /Flex应用框架（Flex framework）来创建应用程序，即Create

而Flashplayer和AIR分别用来在浏览器和桌面上运行Flash和Flex应用程序，即Runtimes

RIA=Rich Internet Application
以上技术推出了今天要讲的主打概念 RIA=Rich Internet Applications 丰富互联网应用程序 Adobe公司把Flash/Flex/Flashplayer/AIR放在产品目录下，把RIA放到解决方案目录下，可见，Adobe认为RIA是运用技术手段达到的一个目的。

对于大多数WEB开发者来说，Flash只是设计师制作动画的工具，但是在过去的10年中，许多专业人士用Flash创建了富媒体和富交互的应用程序。

在这个例子中，亚马逊(Amazon)作为全球B2C的No.1站点，在如何吸引更多购买用户上下了很多功夫去研究，他们为此推出了自己的Windowshop站点，完全基于Flex和FlashVideo构建，用户可以在其中体验商品并直接购买。请注意，用户可以使用箭头或者点击图片来获取每个商品的详细信息。

lash是非常强大的工具，但是，随着更多的程序员参与到RIA开发中来，他们不习惯采用画图工具，时间轴及其他可视化面板来制作表格和其他商业应用中很常见的元素。这一现象很快的凸现出来。

Adobe Flex的出现为程序员解决了这个问题。FlexBuilder使程序员快速使用ActionSript3+MXML开发RIA程序。

我们看一个例子它可以使我用互动的方式快速浏览Adobe各种产品的功能

Flash使用画图和时间轴来对程序布局，并用ActionSript来实现功能 Flex为应用者提供程序应用框架和可视化组件，MXML用于可视化布局，ActionSript用于业务逻辑可以看出，Flex对于开发者更具吸引力，Flash更多针对设计人员。无论是Flex还是Flash，使用者都能体会到相同的互动体验。二者可以同时使用，是比较好的选择

在浏览器中观看Flex和Flash的应用程序，需要应用到Flashplayer9播放器。 Adobe AIR是Adobe的桌面应用程序运行环境，通过AIR，你可以使用网页技术如Flash，Flex，Ajax制作网络应用程序，并把他们部署成存在于浏览器之外的桌面应用程序。

先谈谈RIA (Rich Internet Applications)
RIA并不专指某项技术，也不像Java，C#是一门语言，它是一种软件开发的趋势，是建立在对用户友好程度（即：用户体验）的认知的基础上的对软件所能达到程度的一种期望。 .先谈谈 RIA(Rich Internet Applications) 言而概之，RIA并不专指某项技术，也不像Java，C#是一门语言，它是一种软件开发的趋势，是建立在对用户友好程度（既：用户体验）的认知的基础上的对软件所能达到程度的一种期望，就如此前所说的，可以理解为一种解决方案。

先谈谈RIA 如何理解RIA？ RIA 理解这个概念并不难，你只要把握“丰富”，“WEB”，“可交互性”这几个关键词，就能透过表象，洞察RIA的精髓。

先谈谈RIA 如何理解RIA？ RIA “WEB”很好理解，仅指互联网的应用。丰富和可交互性是相辅相成的。丰富 WEB 可交互性

先谈谈RIA 如何理解RIA？ RIA 丰富 WEB 可交互性数据模型用户界面
“富”的概念包含两方面，分别是数据模型的丰富和用户界面的丰富。数据中的“富”意思是用户界面可以显示和操作更为复杂的嵌入在客户端的数据模型，它可以操作客户端的计算和非同步的发送接收数据。这种模式相对于传统的HTML页面的优点是程序运行于客户端并且程序更多的是和用户进行交互同时更少的和服务器进行交互。通过平衡客户端和服务器端的复杂的数据模型可以让你有更大的空间去创建更高效和更具有交互性的网络应用程序。 “富”同样也描述了全面提升的用户界面，HTML只给用户提供了非常有限的界面控制元素，而丰富互联网应用程序（RIA）的用户界面提供了灵活多样的界面控制元素，这些控制元素可以很好的与数据模型相结合。传统的因特网模型使用线性的设计，提供给用户一些选择然后用户发送选择结果给服务器，这种单一的模式不符合应用程序的灵活交互的要求和用户的意愿。频繁的服务器请求和页面刷新有很多的缺点包括页面打开缓慢和降低网络带宽。如果采用富客户界面，可以从以前的服务器响应影响整个界面，转移到只有收到请求的应用程序部分才会做出相应的变化。这本质上意味着界面被分解成许多独立的模块，这些模块都会对收到的信息做出相应的反应，有些会和服务器端进行交互，有些是这些模块之间的通信。丰富 WEB 可交互性数据模型用户界面

先谈谈RIA 体验如何理解RIA？ RIA 丰富 WEB 可交互性数据模型用户界面

先谈谈RIA Adobe 关于RIA体验的诠释：
丰富互联网应用程序 (RIA) 提供丰富的、引人入胜的体验, 该体验可提高用户满意度并提高用户生产效率。使用互联网的广泛触及力, 可以在各种浏览器、桌面和设备上部署 RIA。 Adobe官方这样诠释RIA在体验方面的定义：“丰富互联网应用程序 (RIA) 提供丰富的、引人入胜的体验, 该体验可提高用户满意度并提高用户生产效率。使用互联网的广泛触及力, 可以在各种浏览器、桌面和设备上部署 RIA”。就是说，好的体验是目的符合RIA是核心概念开发RIA则要需要选择最适合的技术

丰富互联网应用程序 (RIA) 提供丰富的、引人入胜的体验, 该体验可提高用户满意度并提高用户生产效率。使用互联网的广泛触及力, 可以在各种浏览器、桌面和设备上部署 RIA。好的体验是目的

丰富互联网应用程序 (RIA) 提供丰富的、引人入胜的体验, 该体验可提高用户满意度并提高用户生产效率。使用互联网的广泛触及力, 可以在各种浏览器、桌面和设备上部署 RIA。好的体验是目的符合RIA是核心概念

丰富互联网应用程序 (RIA) 提供丰富的、引人入胜的体验, 该体验可提高用户满意度并提高用户生产效率。使用互联网的广泛触及力, 可以在各种浏览器、桌面和设备上部署 RIA。当你可以做到脱离技术层面去看RIA，也就看清楚了RIA的实质。好的体验是目的符合RIA是核心概念开发RIA则要需要选择最适合的技术

先谈谈RIA RIA可以为我们带来那些具体的优势？ ● RIA将指导我们开发更丰富互动，更加友好的用户界面，提高客户满意度和粘滞度。
说到这里，可能性急的听众已经按捺不住了，既然RIA这么好，那么RIA可以为我们带来那些具体的优势？ ● RIA将指导我们开发更丰富互动，更加友好的用户界面，提高客户满意度和粘滞度。 ● RIA可以继续使用现有的应用程序模型（包括J2EE 和.NET），因而无需大规模替换现有的Web应用程序。通过Rich Client技术，可以轻松构建更为直观、易于使用、反应更迅速并且可以脱机使用的应用程序。 ● RIA可以帮助企业提供多元化的重要业务效益，包括提高产销量、提高品牌忠诚度、延长网站逗留时间、较频繁的重复访问、减少带宽成本、减少支持求助以及增强客户关系等。 ● RIA技术的出现允许我们在因特网上以一种像使用Web一样简单的方式来部署富客户端程序。无论将来RIA是否能够如人们所猜测的那样完全代替HTML应用系统，对于那些采用C/S架构的胖客户端技术运行复杂应用系统的机构和采用基于B/S架构的瘦客户端技术部署Web应用系统地机构来说，RIA确实提供了一种廉价的选择。

先谈谈RIA RIA可以为我们带来那些具体的优势？
● RIA将指导我们开发更丰富互动，更加友好的用户界面，提高客户满意度和粘滞度。 ● RIA可以继续使用现有的应用程序模型（包括J2EE 和.NET），因而无需大规模替换现有的Web应用程序。通过Rich Client技术，可以轻松构建更为直观、易于使用、反应更迅速并且可以脱机使用的应用程序。

● RIA将指导我们开发更丰富互动，更加友好的用户界面，提高客户满意度和粘滞度。 ● RIA可以继续使用现有的应用程序模型（包括J2EE 和.NET），因而无需大规模替换现有的Web应用程序。通过Rich Client技术，可以轻松构建更为直观、易于使用、反应更迅速并且可以脱机使用的应用程序。 ● RIA可以帮助企业提供多元化的重要业务效益，包括提高产销量、提高品牌忠诚度、延长网站逗留时间、较频繁的重复访问、减少带宽成本、减少支持求助以及增强客户关系等。

● RIA将指导我们开发更丰富互动，更加友好的用户界面，提高客户满意度和粘滞度。 ● RIA可以继续使用现有的应用程序模型（包括J2EE 和.NET），因而无需大规模替换现有的Web应用程序。通过Rich Client技术，可以轻松构建更为直观、易于使用、反应更迅速并且可以脱机使用的应用程序。 ● RIA可以帮助企业提供多元化的重要业务效益，包括提高产销量、提高品牌忠诚度、延长网站逗留时间、较频繁的重复访问、减少带宽成本、减少支持求助以及增强客户关系等。 ● RIA所涵盖技术的出现允许我们在因特网上以一种像使用Web一样简单的方式来部署富客户端程序。无论将来RIA是否能够如人们所猜测的那样完全代替HTML应用系统，对于那些采用C/S架构的胖客户端技术运行复杂应用系统的机构和采用基于B/S架构的瘦客户端技术部署Web应用系统地机构来说，RIA确实提供了一种廉价的选择。

先谈谈RIA BROADMOOR 酒店的单窗口(OneScreen)预定系统
案例一：BROADMOOR 酒店的单窗口(OneScreen)预定系统纽约建筑事务所Warren & Wetmore （Grand Central Station，大枢纽站的设计单位)设计的broadmoor酒店是当时美国西部最豪华的酒店。意大利文艺复兴风格建筑沿落基山脉的一个高山湖泊依水而立。互联网运用于预定酒店已经非常普遍。网络也是酒店最便宜的销售渠道。问题是，在把顾客引入网站后，还必须确保顾客能够完成预定手续。如今，大多数酒店在线预定系统使用的是传统的多页面多步骤提交方式。这种方式往往会给顾客不太良好的体验，顾客可能在订购的中途，被迫重复整个过程。 BROADMOOR设计了新的RIA预定系统。它提供了一个更为简洁、清楚、易用的预定步骤，并且整个过程在同一个窗口(OneScreen)内进行。OneScreen 通过一个区分成三个部分的互动屏幕来表达有关旅店的信息。用户可以立刻看见在一个部分所作的更改对其它两个部分的效果。举例说，更改房间类型将改变显示在日历上的房间收费。一个弹出视窗立刻便可通知用户有关无空房的日期、房间收费更改、最低住宿日数以及遗漏的信息以便它可以立即作出更正。 OneScreen RIA为酒店带来了巨大的收益。据Webvertising 的旅馆顾客报道，从HTML界面转到OneScreen界面后，网上预定数量增加了89%。并且平均转换率(浏览者变为购买者)比HTML界面的2.3%增加了将近一倍。这个案研究说明了，对于旅馆，采用RIA来改变用户体验可以带来非常显著的效果。

先谈谈RIA 怎样才算符合RIA？ ● 在消息确认和格式编排方面提供互动用户界面。 ● 在无刷新页面之下提供快捷的界面响应时间。
● 提供通用的用户界面特性如拖放式（drag and drop）以及在线和离线操作能力。 ● 立即部署、跨平台、采用逐步下载来检索内容和数据以及可以充分利用被广泛采纳的互联网标准。 ● RIA具有通信的特点则包括实时互动的声音和图像。怎样才算符合RIA？一般说来，一个典型的RIA应该包含以下技术特性： ● 在消息确认和格式编排方面提供互动用户界面。 ● 在无刷新页面之下提供快捷的界面响应时间。 ● 提供通用的用户界面特性如拖放式（dragand drop）以及在线和离线操作能力。（就如同我这个PPT一样，全部是在线应用的） ● 立即部署、跨平台、采用逐步下载来检索内容和数据以及可以充分利用被广泛采纳的互联网标准。 ● RIA具有通信的特点则包括实时互动的声音和图像。

谈谈用户体验设计用户体验（User Experience，简称UE）
3.谈谈用户体验设计从之前的章节中大家可以看到，RIA强调的一个核心就是用户体验，软件好不好用，用户说了算，所以说用户的体验是最重要的。一个软件功能再强大，算法再优秀，如果用户体验没做好，也不算是一个RIA的应用，即使它使用了RIA相关的技术。所以，让我们先来了解一下用户体验的基本概念。用户体验（User Experience，简称UE）

是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受

是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受因为它是纯主观的，就带有一定的不确定因素

是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受因为它是纯主观的，就带有一定的不确定因素个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的

是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受因为它是纯主观的，就带有一定的不确定因素个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到

谈谈用户体验设计用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终目的：
目的：（1）对用户体验有正确的预估（2）认识用户的真实期望和目的（3）在功能核心还能够以低廉成本加以修改的时候对设计进行修正（4）保证功能核心同人机界面之间的协调工作，减少BUG。我这里针对我们目前的情况提一下流程的问题。用户体验主要是来自用户和人机界面的交互过程。在早期的软件设计过程中，人机界面被看做仅仅是一层包裹于功能核心之外的“包装”而没有得到足够的重视。其结果就是对人机界面的开发是独立于功能核心的开发，而且往往是在整个开发过程的尾声部分才开始的。这种方式极大地限制了对人机交互的设计，其结果带有很大的风险性。因为在最后阶段再修改功能核心的设计代价巨大，牺牲人机交互界面便是唯一的出路。这种带有猜测性和赌博性的开发几乎是难以获得令人满意的用户体验。现在流行的设计过程注重以用户为中心。用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证（1）对用户体验有正确的预估（2）认识用户的真实期望和目的（3）在功能核心还能够以低廉成本加以修改的时候对设计进行修正（4）保证功能核心同人机界面之间的协调工作，减少BUG。

谈谈用户体验设计实施流程： focus group 早期： contextual interview 开发过程：
focus group 早期： contextual interview 在具体的实施上，就包括了早期的focus group（焦点小组），contextual interview（访谈），和开发过程中的多次usability study（可用性实验），以及后期的user test（用户测试）。在设计--测试--修改这个反复循环的开发流程中，可用性实验为何时出离该循环提供了可量化的指标。开发过程： usability study 后期： user test

谈谈用户体验设计要让我们的开发进入RIA的轨道，先要对用户体验这个概念有着足够的重视和理解才行。实施流程： focus group
focus group 早期： contextual interview 要让我们的开发进入RIA的轨道，先要对用户体验这个概念有着足够的重视和理解才行。开发过程： usability study 后期： user test

进入RIA 的世界-转换思维模式首先，要跟上RIA的脚步，不能只关注技术，停留在软件“可以
使用”的层面，而要理解用户体验，努力改善软件的用户体验。其次，改善软件开发过程，将软件的交互放在比较重要的位置。第三，RIA的基础技术反而都是一些已有的，相对成熟的技术，所以不要从技术的角度去担心学习成本，转换思维模式最重要。很多人都觉得RIA很神秘。比如一个传统的程序员，怎样才能进入RIA的开发领域？是否要经历一个痛苦的技术转型才能做RIA？答案是，技术不是最重要的，重要的是转换思维。首先，要跟上RIA的脚步，不能只关注技术，停留在软件“可以使用”的层面，而要理解用户体验，努力改善软件的用户体验。其次，改善软件开发过程，将软件的交互放在比较重要的位置。第三，RIA的基础技术反而都是一些已有的，相对成熟的技术，所以不要从技术的角度去担心学习成本，转换思维模式最重要。

RIA的应用案例淘宝网产品浏览采用FLEX技术招商银行信用卡中心采用FLEX构建财务分析 72ec.com的图片上传显示工具
招商银行信用卡中心采用FLEX构建财务分析 72ec.com的图片上传显示工具 Coghead在线企业应用程序开发平台在线Photoshop 5.RIA的应用案例前面我们已经接触了几个RIA的例子，下面我们再来看几个淘宝网产品浏览采用FLEX技术淘宝网开始试用FLEX技术搭建“产品浏览” 淘宝网是中国大陆目前最大型的C2C平台，采用FLEX作为全新的产品浏览平台，可以认为TAOBAO这次大胆的尝试首先是考虑用户体验，使用传统的FLASH也可以做出类似效果，但如果放在淘宝这样一个用户众多C2C平台上的话..可能在展示与开发上都会出现一系列的困难。招商银行信用卡中心采用FLEX构建财务分析招商银行提供了这套全面的财务分析应用，它包含了：资产负债分析；投资状况分析；收入对比分析；信用卡支出分析。该财务分析应用采用FLEX技术构建，意图使用较为友好的操作与界面提高财务分析的数据展示效果。本篇文章将展示该财务分析软件的“信用卡支出分析”部分。我在用招行信用卡的时候偶然发现的，但是我在招商银行里用他们的电脑操作的时候，发现，招行电脑的Flashplayer版本还是6.0的，根本无法使用。 72ec.com的图片上传显示工具界面漂亮，有进度条，缩略图，动画效果 Coghead在线企业应用程序开发平台 About Coghead Coghead's Platform-as-a-Service enables developers to build custom applications rapidly and create and manage SaaS businesses without writing a single line of code or investing heavily in hardware infrastructure. With a growing community of more than 40,000 members and partners, Coghead is fast becoming an alternative to expensive packaged software systems. Today, Coghead.com is among the top five percent of most-visited web properties worldwide. Founded in May 2003 and funded by American Capital, El Dorado Ventures, and SAP, Coghead is staffed by industry veterans, serial entrepreneurs, and some of the brightest minds in software. Coghead的PaaS使得开发者不需要写一行代码或投入大量资金进行硬件建设就能快速自定义开发应用程序和管理SaaS业务。随着超过4万个用户和伙伴的社区成长，Coghead迅速成为昂贵打包软件系统的替代者。今天，Coghead.com已经成为世界上百分之五访问量最大的顶尖网站。 kingdee2006 Brandon Coghead 于1月14日发布了coghead2.0版本.coghead2.0是在线企业应用程序开发平台。2.0基于Flex开发了全新的用户界面，超过50个的新功能以及3倍超过1.0的运行速度。 Coghead使用了Amazon的Elastic Compute Cloud(EC2)网络服务器。coghead的CEO Paul McNamara这样描述了使用Amazon的服务器的原因“Amazon knows a lot more about running data centers than we do”。 Flex平台的使用大大的提高了coghead平台的效率，在Flex与Ajax的比较上,McNamara说：“A lot of people are talking about Ajax, but we see a world that goes beyond Ajax”。 Flex平台之所以吸引McNamara是因为其出色的跨平台，跨浏览器能力，并且在将来可以使用Adobe AIR让coghead实现离线操作。他期望在2008年年中，可以为用户提供离线版的coghead。从2007年4月coghead1.0发布以来，coghead已经吸引了超过25000的注册用户。但McNamara野心远不止如此，coghead的目标是“ ”的在线用户，McNamara说。虽然这还有很长的路要走，但是相信coghead2.0的发布会为他们带来更多用户。在线Photoshop

给我们的思考友商网什么地方可以使用RIA，可以带给用户怎样的体验改变？还有人担心Flash player的安装问题吗？
还有人担心Flash player的安装问题吗？还有人担心速度吗？这些RIA都有一个共同的特点，对用户的个性化首页，无论你的程序有多复杂，有多少业务，都只涉及与我有关的。而友商网的“友商助手”还是传统的列表给所有的用户看。

RIA的开发利器——Flex Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。可以使用免费的 Flex SDK 构建 Flex 应用程序, 开发人员可以使用 Adobe Flex Builder™ 3 软件来显著促进开发。

RIA的开发利器——Flex Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。可以使用免费的 Flex SDK 构建 Flex 应用程序, 开发人员可以使用 Adobe Flex Builder™ 3 软件来显著促进开发。这3条对于WEB程序员而言，应该是具有足够的吸引力了。我们可以从多个方面，来介绍Flex和它的优势。相对于基于HTML的应用(如PHP,ASP, JSP,ColdFusion?即CFMX等)在每个请求时都需要执行服务器端的模板，由于客户端只需要载入一次，FLEX应用程序的工作流被大大改善。 FLEX的语言和文件结构也试图把应用程序的逻辑从设计中分离出来。 Flex提供了很多功能强大的组件用于表现和数据展示，比如高级表格，图表等等，不少人都是被Flex强大的图表展现能力深深震撼。流程跟软件制作差不多：需求->分析->设计->实现->测试在实现部分需要的团队： UI设计、页面架构、UI程序员(Flex)、前端业务程序员(Flex)、后台程序员 1. Flex主要用于WEB应用程序的开发 2. Flex SDK是开源的，免费的 3. Flex拥有专业级的开发工具-Flex Builder3

谢谢！

RIA及技术与用户体验 KDUED： Brandon 2008年12月19日

Similar presentations

Presentation on theme: "RIA及技术与用户体验 KDUED： Brandon 2008年12月19日"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

RIA及技术与用户体验 KDUED： Brandon 2008年12月19日

Similar presentations

Presentation on theme: "RIA及技术与用户体验 KDUED： Brandon 2008年12月19日"— Presentation transcript:

Similar presentations

About project

反馈