Flash ria usability 刘轩飞
Download as PPT, PDF0 likes457 views
本文讨论了 Flash RIA（富互联网应用）的可用性，包括用户界面设计的有效性、效率和满意度，以及面临的一些挑战，如浏览器兼容性和全屏模式的限制。同时，文中概述了如何适应不同的屏幕分辨率和创建全球化应用的技巧，强调了合理使用动效和可达性的重要性。最后，本文还提供了一些实用工具和案例供参考。
![Flash 的浏览器兼容性 W3C 推荐使用 Object 标签 兼容各种浏览器的 HTML （二） <object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width = "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> 查看演示](https://image.slidesharecdn.com/flashriausability-100921034729-phpapp01/85/Flash-ria-usability-9-320.jpg)
![别忽视地址栏 深链接 (Deep Linking) http://[Domainname] / # / {Username} / {ModuleName} / {ObjectId} 深链接的设计应该符合 URL 的基本设计原则 ： URL 应该是有意义的 URL 应该是唯一的](https://image.slidesharecdn.com/flashriausability-100921034729-phpapp01/85/Flash-ria-usability-12-320.jpg)
![谢谢！ Email: [email_address] Blog: http://www.xuanfei.me](https://image.slidesharecdn.com/flashriausability-100921034729-phpapp01/85/Flash-ria-usability-25-320.jpg)
Flash ria usability 刘轩飞
- 1. Flash RIA 的可用性 刘轩飞 2010/09/18
- 2. RIA Rich Internet Application （这一说法最初是由 Macromedia ，现在的 Adobe 提出的） 能够提供类似桌面应用的交互体验，模糊了桌面应用和 Web 应用的界限，提供了更完整和统一的体验 http:// www.adobe.com/resources/business/rich_internet_apps
- 3. 什么是可用性 (Usability) 效果 用户达成目标的精确度和完成度 效率 用户达成目标花费的交互成本 满意度 用户使用界面达成目标时的愉悦感等正面情感 可用性是用户界面易用程度的衡量指标
- 4. Flash RIA 的一些可用性挑战 浏览器兼容性 Flash RIA 的页面导航与人们使用一般网页浏览的习惯不同 如何利用全屏模式 如何适应不同的屏幕分辨率 全球化应用
- 5. Flash 的浏览器兼容性 Flash Player 是跨浏览器的 但是…
- 6. 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 无法访问 查看演示
- 7. Flash 的浏览器兼容性 部分浏览器对插件的访问做了限制 6/7 此限制已与 2008 年 4 月的更新中取消，仅发生于部分 IE 6/7 ，相关链接： http://msdn.microsoft.com/en-us/library/ms537508.aspx http://www.adobe.com/devnet-archive/activecontent / 查看演示
- 8. 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> 查看演示
- 9. Flash 的浏览器兼容性 W3C 推荐使用 Object 标签 兼容各种浏览器的 HTML （二） <object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width = "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> 查看演示
- 10. 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> 查看演示
- 11. 别忽视地址栏 忽视地址栏就是忽视用户的习惯和感受 A: 看看我家双宝 :D Http:// www.somedomain.com /album 杯具 轩飞的相册 – 我的宝宝 Http://www.somedomain.com/album 相册首页 Http://www.somedomain.com/album B: 真可爱… @_@
- 12. 别忽视地址栏 深链接 (Deep Linking) http://[Domainname] / # / {Username} / {ModuleName} / {ObjectId} 深链接的设计应该符合 URL 的基本设计原则 ： URL 应该是有意义的 URL 应该是唯一的
- 13. 别忽视地址栏 使用 SWFAddress 实现深链接 http:// www.asual.com/swfaddress / 不要直接调用 SWFAddress ，用自定义 Deeplink 类封装相应功能 Deeplink 的核心方法是 parseUrl(); 按照设定的 URL 规则编写 Deeplink 类中的 getter/setter 方法 Deeplink 类应该是 Singleton ，在整个应用程序中只有一个实例 Deeplink 应该继承 EventDispatcher 以派发事件 注意 SWFAddressEvent. EXTERNAL_CHANGE 和 SWFAddressEvent. INTERNAL_CHANGE 的区别 查看演示
- 14. Flash Player 的全屏模式 全屏模式下的交互限制 全屏模式下将限制使用键盘 用户不能在文本字段中输入文本 在 FP9 中，不能使用 Tab 键导航 （在 FP10 中，支持方向键，空格键和 Tab 键）
- 15. 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”)
- 16. Flash Player 的全屏模式 为全屏模式改变用户界面 在全屏模式下隐藏 TextArea 等不能正常交互的界面元素，减少用户的试错成本 只在真正需要的时候提供全屏功能 全屏时保持界面布局的稳定性 查看演示
- 17. 适应不同的屏幕分辨率 让 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" ></script> <script type = "text/javascript" > swfobject.embedSWF("ball.swf", "flashContent", "100%" , "100%" , "9.0.0", "expressInstall.swf"); </script>
- 18. 适应不同的屏幕分辨率 在舞台大小改变时重新布局 stage . addEventListener ( Event . RESIZE , resizeHandler); function resizeHandler(evt: Event ) { updateDisplay (); } function updateDisplay () { // 设置界面元素的位置、大小和外观 }
- 19. 适应不同的屏幕分辨率 有时候最大的不一定最好，最合适的才是 Mac OS 的窗口控制 CS5 的安装程序窗口保持合适的大小，不能最大化 “ 最合适大小”的按钮，不是“最大化”
- 20. 适应不同的屏幕分辨率 使用 swffit 让 Flash 更聪明的适应分辨率 <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); 查看演示
- 21. 创建全球化的 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> 查看演示
- 22. 更多 合理的使用动效 Accessibility( 可达性 ) 移动 RIA ……
- 23. 案例 Pixlr – 类 PS 图片编辑器 http:// pixlr.com /editor/ Gliffy - 类 Visio 工具 http:// www.gliffy.com/gliffy Mindomo – 思维导图创建及管理 http:// mindomo.com/index.htm
- 24. Q & A
- 25. 谢谢！ Email: [email_address] Blog: http://www.xuanfei.me