Flash RIA 的可用性 刘轩飞 2010/09/18
RIA <ul><li>Rich Internet Application (这一说法最初是由 Macromedia ,现在的 Adobe 提出的) </li></ul><ul><li>能够提供类似桌面应用的交互体验,模糊了桌面应用和 Web ...
什么是可用性 (Usability) <ul><li>效果 用户达成目标的精确度和完成度 </li></ul><ul><li>效率 用户达成目标花费的交互成本 </li></ul><ul><li>满意度 用户使用界面达成目标时的愉悦感等正面情感...
Flash RIA 的一些可用性挑战 <ul><li>浏览器兼容性 </li></ul><ul><li>Flash RIA 的页面导航与人们使用一般网页浏览的习惯不同 </li></ul><ul><li>如何利用全屏模式 </li></ul><...
Flash 的浏览器兼容性 <ul><li>Flash Player 是跨浏览器的 </li></ul><ul><li>但是… </li></ul>
Flash 的浏览器兼容性 <object   classid = &quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot;   codebase = &quot;http://downloa...
Flash 的浏览器兼容性 部分浏览器对插件的访问做了限制 6/7 <ul><li>此限制已与 2008 年 4 月的更新中取消,仅发生于部分 IE 6/7 ,相关链接: </li></ul><ul><li>http://msdn.micros...
Flash 的浏览器兼容性 兼容各种浏览器的 HTML (一) <object   classid = &quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot;   codebase = &q...
Flash 的浏览器兼容性 W3C 推荐使用 Object 标签 兼容各种浏览器的 HTML (二) <object   classid = &quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&qu...
Flash 的浏览器兼容性 http://code.google.com/p/swfobject/ <script   type = &quot;text/javascript&quot;   src = &quot;swfobject.js&...
别忽视地址栏 <ul><li>忽视地址栏就是忽视用户的习惯和感受 </li></ul>A:  看看我家双宝  :D   Http:// www.somedomain.com /album 杯具 轩飞的相册 – 我的宝宝 Http://www.s...
别忽视地址栏 <ul><li>深链接 (Deep Linking) </li></ul>http://[Domainname] / # / {Username} / {ModuleName} / {ObjectId} <ul><li>深链接的设...
别忽视地址栏 <ul><li>使用 SWFAddress 实现深链接 </li></ul>http:// www.asual.com/swfaddress /   <ul><li>不要直接调用 SWFAddress ,用自定义 Deeplink...
Flash Player 的全屏模式 全屏模式下的交互限制 <ul><li>全屏模式下将限制使用键盘  </li></ul><ul><li>用户不能在文本字段中输入文本  </li></ul><ul><li>在 FP9 中,不能使用 Tab 键...
Flash Player 的全屏模式 一些小问题…… <ul><li>如果 wmode 为 opaque 或 transparent , 9.0.27.0 –9.0.100.0 版本的 FP 全屏失效 </li></ul><ul><li>在竖屏...
Flash Player 的全屏模式 为全屏模式改变用户界面 <ul><li>在全屏模式下隐藏 TextArea 等不能正常交互的界面元素,减少用户的试错成本  </li></ul><ul><li>只在真正需要的时候提供全屏功能 </li></...
适应不同的屏幕分辨率 <ul><li>让 Flash 舞台充满浏览器窗口 </li></ul><style   type = &quot;text/css&quot;   media = &quot;screen&quot; >   html,...
适应不同的屏幕分辨率 <ul><li>在舞台大小改变时重新布局 </li></ul>stage . addEventListener ( Event . RESIZE , resizeHandler); function   resizeHan...
适应不同的屏幕分辨率 <ul><li>有时候最大的不一定最好,最合适的才是 </li></ul>Mac OS 的窗口控制 CS5 的安装程序窗口保持合适的大小,不能最大化 “ 最合适大小”的按钮,不是“最大化”
适应不同的屏幕分辨率 <ul><li>使用 swffit 让 Flash 更聪明的适应分辨率 </li></ul><script type= &quot;text/javascript&quot; > swfobject.embedSWF( &...
创建全球化的 FLASH RIA <ul><li>针对多语言版本的 Flex 界面设计 </li></ul><mx:HBox   width = &quot;390&quot; > <mx:VBox> <mx: Label   text = &...
更多 <ul><li>合理的使用动效 </li></ul><ul><li>Accessibility( 可达性 ) </li></ul><ul><li>移动 RIA </li></ul><ul><li>…… </li></ul>        ...
案例 <ul><li>Pixlr –  类 PS 图片编辑器 http:// pixlr.com /editor/   </li></ul><ul><li>Gliffy -  类 Visio 工具 http:// www.gliffy.com/...
Q & A
谢谢! <ul><li>Email:  [email_address] </li></ul><ul><li>Blog:  http://www.xuanfei.me   </li></ul>
Upcoming SlideShare
Loading in …5
×

Flash ria usability 刘轩飞

1,152 views

Published on

  • Be the first to comment

  • Be the first to like this

Flash ria usability 刘轩飞

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

×