48
RIA 及及及及及及 KDUED Brandon 2008 年 12 年 19 年

RIA 及技术与用户体验

  • Upload
    ena

  • View
    150

  • Download
    0

Embed Size (px)

DESCRIPTION

RIA 及技术与用户体验. KDUED : Brandon 2008 年 12 月 19 日. 目录. Flash/Flex/Flash player/AIR 的比较 先谈谈 RIA(Rich Internet Applications) 谈谈用户体验设计 进入 RIA 的世界 - 转换思维模式 RIA 深度应用案例 RIA 的开发利器 —— 具体了解 Flex. Flash / Flex / Flash player / AIR 的比较. 这些都是什么技术?. Flash / Flex / Flash player / AIR 的比较. 这些都是什么技术? - PowerPoint PPT Presentation

Citation preview

Page 1: RIA 及技术与用户体验

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

Page 2: RIA 及技术与用户体验

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

Page 3: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

这些都是什么技术? 

Page 4: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

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

Page 5: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

Page 6: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

Page 7: RIA 及技术与用户体验

RIA=Rich Internet Application

Page 8: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

Page 9: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

http://windowshop.com/

Page 10: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

Page 11: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

Page 12: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

http://www.adobe.com

Page 13: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

http://www.adobe.com

Page 14: RIA 及技术与用户体验

Flash/Flex/Flash player/AIR 的比较

Page 15: RIA 及技术与用户体验

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

Page 16: RIA 及技术与用户体验

先谈谈 RIA (Rich Internet Applications)

RIA 并不专指某项技术,也不像 Java , C# 是一门语言,它是一种软件开发的趋势,是建立在对用户友好程度(即:用户体验)的认知的基础上的对软件所能达到程度的一种期望。

Page 17: RIA 及技术与用户体验

先谈谈 RIA

RIA

如何理解 RIA ?

Page 18: RIA 及技术与用户体验

先谈谈 RIA

丰富 WEB 可交互性

RIA

如何理解 RIA ?

Page 19: RIA 及技术与用户体验

先谈谈 RIA

丰富 WEB 可交互性

RIA

数据模型 用户界面

如何理解 RIA ?

Page 20: RIA 及技术与用户体验

先谈谈 RIA

丰富 WEB 可交互性

RIA

数据模型 用户界面

体验如何理解 RIA ?

Page 21: RIA 及技术与用户体验

先谈谈 RIA

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

Page 22: RIA 及技术与用户体验

先谈谈 RIA

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

• 好的体验是目的

Adobe 关于 RIA 体验的诠释:

Page 23: RIA 及技术与用户体验

先谈谈 RIA

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

• 好的体验是目的• 符合 RIA 是核心概念

Adobe 关于 RIA 体验的诠释:

Page 24: RIA 及技术与用户体验

先谈谈 RIA

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

• 好的体验是目的• 符合 RIA 是核心概念• 开发 RIA 则要需要选择最适合的技术

Adobe 关于 RIA 体验的诠释:

Page 25: RIA 及技术与用户体验

先谈谈 RIA

● RIA 将指导我们开发更丰富互动,更加友好的用户界面,提高客户满意度和粘滞度。

RIA 可以为我们带来那些具体的优势?

Page 26: RIA 及技术与用户体验

先谈谈 RIA

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

RIA 可以为我们带来那些具体的优势?

Page 27: RIA 及技术与用户体验

先谈谈 RIA

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

RIA 可以为我们带来那些具体的优势?

Page 28: RIA 及技术与用户体验

先谈谈 RIA

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

RIA 可以为我们带来那些具体的优势?

Page 30: RIA 及技术与用户体验

先谈谈 RIA

● 在消息确认和格式编排方面提供互动用户界面。 ● 在无刷新页面之下提供快捷的界面响应时间。 ● 提供通用的用户界面特性如拖放式 ( drag and drop ) 以及在线和离线操作能力。 ● 立即部署、跨平台、采用逐步下载来检索内容和数据以及可以充分利用被广泛采纳的互联网标准。 ● RIA 具有通信的特点则包括实时互动的声音和图像。

怎样才算符合 RIA ?

Page 31: RIA 及技术与用户体验

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

Page 32: RIA 及技术与用户体验

谈谈用户体验设计用户体验 ( User Experience , 简称 UE )

Page 33: RIA 及技术与用户体验

谈谈用户体验设计用户体验 ( User Experience , 简称 UE ) • 是一种纯主观的在用户使用一个产品 (服务)的过程中建立起来的心理感受

Page 34: RIA 及技术与用户体验

谈谈用户体验设计用户体验 ( User Experience , 简称 UE ) • 是一种纯主观的在用户使用一个产品 (服务)的过程中建立起来的心理感受• 因为它是纯主观的,就带有一定的不确定因素

Page 35: RIA 及技术与用户体验

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

Page 36: RIA 及技术与用户体验

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

Page 37: RIA 及技术与用户体验

谈谈用户体验设计用户体验的概念从开发的最早期就开始进入整个流程,并贯穿始终 目的: ( 1 )对用户体验有正确的预估 ( 2 )认识用户的真实期望和目的 ( 3 )在功能核心还能够以低廉成本加以修改的时候对设计进行修正 ( 4 )保证功能核心同人机界面之间的协调工作,减少 BUG 。

Page 38: RIA 及技术与用户体验

谈谈用户体验设计实施流程: 

focus group

contextual interview

usability study

user test

早期: 

开发过程: 

后期: 

Page 39: RIA 及技术与用户体验

谈谈用户体验设计实施流程: 

focus group

contextual interview

usability study

user test

早期: 

开发过程: 

后期: 

要让我们的开发进入 RIA 的轨道,先要对用户体验这个概念有着足够的重视和理解才行。

Page 40: RIA 及技术与用户体验

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

Page 41: RIA 及技术与用户体验

进入 RIA 的世界 - 转换思维模式• 首先,要跟上 RIA 的脚步,不能只关注技术,停留在软件“可以 使用”的层面,而要理解用户体验,努力改善软件的用户体验。

 • 其次,改善软件开发过程,将软件的交互放在比较重要的位置。

 • 第三, RIA 的基础技术反而都是一些已有的,相对成熟的技术, 所以不要从技术的角度去担心学习成本,转换思维模式最重要。

Page 42: RIA 及技术与用户体验

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

Page 43: RIA 及技术与用户体验

RIA 的应用案例• 淘宝网产品浏览采用 FLEX 技术

 • 招商银行信用卡中心采用 FLEX 构建财务分析

 • 72ec.com 的图片上传显示工具

 • Coghead 在线企业应用程序开发平台

 • 在线 Photoshop

Page 44: RIA 及技术与用户体验

给我们的思考友商网什么地方可以使用 RIA ,可以带给用户怎样的体验改变? 还有人担心 Flash player 的安装问题吗?  还有人担心速度吗?  

Page 45: RIA 及技术与用户体验

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

Page 46: RIA 及技术与用户体验

RIA 的开发利器—— Flex

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

Page 47: RIA 及技术与用户体验

RIA 的开发利器—— Flex

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

1. Flex主要用于 WEB 应用程序的开发2. Flex SDK 是开源的,免费的3. Flex拥有专业级的开发工具 -Flex Builder3

Page 48: RIA 及技术与用户体验

谢谢!