Embed Size (px)
DESCRIPTION
Citation preview
Flash RIA 的可用性
刘轩飞2010/09/18
RIA
• Rich Internet Application （这一说法最初是由 Macromedia ，现在的 Adobe 提出的）
• 能够提供类似桌面应用的交互体验，模糊了桌面应用和 Web 应用的界限，提供了更完整和统一的体验
http://www.adobe.com/resources/business/rich_internet_apps
什么是可用性 (Usability)
• 效果用户达成目标的精确度和完成度
• 效率用户达成目标花费的交互成本
• 满意度用户使用界面达成目标时的愉悦感等正面情感
可用性
效果Effectiveness
效率Efficiency
满意度Satisfaction
可用性是用户界面易用程度的衡量指标
Flash RIA 的一些可用性挑战• 浏览器兼容性• Flash RIA 的页面导航与人们使用一般网
页浏览的习惯不同• 如何利用全屏模式• 如何适应不同的屏幕分辨率• 全球化应用
Flash 的浏览器兼容性
Flash Player 是跨浏览器的但是…
Flash 的浏览器兼容性
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%">
<param name="movie" value="ball.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
</object>
不合适的 HTML 标签和属性会导致 Flash 无法访问
查看演示
Flash 的浏览器兼容性部分浏览器对插件的访问做了限制
6/7
此限制已与 2008 年 4 月的更新中取消，仅发生于部分 IE 6/7 ，相关链接：•http://msdn.microsoft.com/en-us/library/
ms537508.aspx •http://www.adobe.com/devnet-archi
ve/activecontent/
查看演示
Flash 的浏览器兼容性兼容各种浏览器的 HTML （一）
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%">
<param name="movie" value="ball.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="ball.swf" quality="high" wmode="opaque" width="100%" height="100%" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_cn" />
</object>
查看演示
Flash 的浏览器兼容性
W3C 推荐使用 Object 标签
兼容各种浏览器的 HTML （二）<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" w
idth="100%" height="100%" id="main"> <param name="movie" value="ball.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="ball.
swf" width="100%" height="100%"> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> </object> <!--<![endif]--></object>
查看演示
Flash 的浏览器兼容性
http://code.google.com/p/swfobject/
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript"> swfobject.embedSWF("ball.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf");
</script>
查看演示
别忽视地址栏忽视地址栏就是忽视用户的习惯和感受
轩飞的相册 – 我的宝宝Http://www.somedomain.com/album
A: 看看我家双宝 :D Http://www.somedomain.com/album
相册首页Http://www.somedomain.com/album
B: 真可爱… @_@
杯具
别忽视地址栏深链接 (Deep Linking)
http://[Domainname]/#/{Username}/{ModuleName}/{ObjectId}
深链接的设计应该符合 URL 的基本设计原则：• URL 应该是有意义的• URL 应该是唯一的
别忽视地址栏使用 SWFAddress 实现深链接http://www.asual.com/swfaddress/
• 不要直接调用 SWFAddress ，用自定义 Deeplink 类封装相应功能• Deeplink 的核心方法是 parseUrl();• 按照设定的 URL 规则编写 Deeplink 类中的 getter/setter 方法• Deeplink 类应该是 Singleton ，在整个应用程序中只有一个实例• Deeplink 应该继承 EventDispatcher 以派发事件• 注意 SWFAddressEvent. EXTERNAL_CHANGE 和 SWFAddressEve
nt. INTERNAL_CHANGE 的区别
查看演示
Flash Player 的全屏模式全屏模式下的交互限制
• 全屏模式下将限制使用键盘 • 用户不能在文本字段中输入文本 • 在 FP9 中，不能使用 Tab 键导航 （在 FP10 中，支持方向
键，空格键和 Tab 键）
Flash Player 的全屏模式一些小问题……
• 如果 wmode 为 opaque 或 transparent ， 9.0.27.0 –9.0.100.0 版本的 FP 全屏失效
• 在竖屏模式下（如 1050*1680 ）， FP10.0.22.87 全屏后花屏（ 10.1.51.66 中已解决）
• 在 Mac OS 中 FP10 全屏后 CPU占用率非常高• 更多： https://bugs.adobe.com/jira/browse/FP （搜索” fullscreen”)
Flash Player 的全屏模式为全屏模式改变用户界面
• 在全屏模式下隐藏 TextArea 等不能正常交互的界面元素，减少用户的试错成本
• 只在真正需要的时候提供全屏功能• 全屏时保持界面布局的稳定性
查看演示
适应不同的屏幕分辨率让 Flash 舞台充满浏览器窗口<style type="text/css" media="screen"> html, body { height:100%; } body { margin:0; padding:0; text-align:center;
overflow:hidden;} </style><script type="text/javascript" src="swfobject.js"></sc
ript><script type="text/javascript"> swfobject.embedSWF("ball.swf", "flashContent",
"100%", "100%", "9.0.0", "expressInstall.swf");</script>
适应不同的屏幕分辨率在舞台大小改变时重新布局
stage.addEventListener(Event.RESIZE, resizeHandler);
function resizeHandler(evt:Event){ updateDisplay();}
function updateDisplay(){ // 设置界面元素的位置、大小和外观}
适应不同的屏幕分辨率有时候最大的不一定最好，最合适的才是
Mac OS 的窗口控制
CS5 的安装程序窗口保持合适的大小，不能最大化
“ 最合适大小”的按
钮，不是“最大化”
适应不同的屏幕分辨率
<script type="text/javascript"> swfobject.embedSWF("ball.swf",
"flashContent", "100%", "600", "9.0.0");
swffit.fit("flashContent");</script>
常用方法：• SWFFit.stopFit()• SWFFit.startFit()• SWFFit.fit(‘flashId', width, height);
使用 swffit 让 Flash 更聪明的适应分辨率
查看演示
创建全球化的 FLASH RIA针对多语言版本的 Flex 界面设计
<mx:HBox width="390"> <mx:VBox> <mx:Label text="{resourceManager.getString('main','comment.name')}"/> <mx:Label text="{resourceManager.getString('main','comment.comment')}"/> </mx:VBox> <mx:VBox width="100%"> <mx:TextInput id="tiName" width="100%"/> <mx:TextArea id="taComment" width="100%" height="80"/> <mx:Button id="btnSubmit" label="{resourceManager.getString('main','comment.
submit')}"/> </mx:VBox></mx:HBox>
查看演示
更多
• 合理的使用动效• Accessibility( 可达性 )• 移动 RIA• ……
案例• Pixlr – 类 PS图片编辑器
http://pixlr.com/editor/ • Gliffy - 类 Visio工具
http://www.gliffy.com/gliffy • Mindomo – 思维导图创建及管理 http://
mindomo.com/index.htm
Q & A
