• Save
Flash RIA Usability
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Flash RIA Usability

on

  • 2,105 views

我在Flash Camp 2010上的演讲,从开发者的角度讲述了一些可用性相关的要点,都是常识性内容:...

我在Flash Camp 2010上的演讲,从开发者的角度讲述了一些可用性相关的要点,都是常识性内容:
- Flash浏览器兼容性
- Flash RIA如何符合用户的网页浏览习惯
- 如何利用全屏模式
- 如何适应不同的屏幕分辨率
- 如何创建全球化应用

如需转载请注明出处!

Statistics

Views

Total Views
2,105
Views on SlideShare
1,381
Embed Views
724

Actions

Likes
0
Downloads
0
Comments
0

5 Embeds 724

http://www.xuanfei.me 714
http://www.inmedia.cn 3
http://amp3.cn 3
http://cache.baidu.com 3
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Flash RIA Usability Presentation Transcript

  • 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 = &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. 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 = &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. 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. 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. 别忽视地址栏
    • 忽视地址栏就是忽视用户的习惯和感受
    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 = &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. 适应不同的屏幕分辨率
    • 在舞台大小改变时重新布局
    stage . addEventListener ( Event . RESIZE , resizeHandler); function resizeHandler(evt: Event ) { updateDisplay (); } function updateDisplay () { // 设置界面元素的位置、大小和外观 }
  • 19. 适应不同的屏幕分辨率
    • 有时候最大的不一定最好,最合适的才是
    Mac OS 的窗口控制 CS5 的安装程序窗口保持合适的大小,不能最大化 “ 最合适大小”的按钮,不是“最大化”
  • 20. 适应不同的屏幕分辨率
    • 使用 swffit 让 Flash 更聪明的适应分辨率
    <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>
    • 常用方法:
    • SWFFit.stopFit()
    • SWFFit.startFit()
    • SWFFit.fit(‘flashId', width, height);
    查看演示
  • 21. 创建全球化的 FLASH RIA
    • 针对多语言版本的 Flex 界面设计
    <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. 更多
    • 合理的使用动效
    • 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