• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flash RIA Usability
 

Flash RIA Usability

on

  • 1,953 views

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

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

如需转载请注明出处!

Statistics

Views

Total Views
1,953
Views on SlideShare
1,229
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 Flash RIA Usability Presentation Transcript

    • Flash RIA 的可用性 刘轩飞 2010/09/18
    • RIA
      • Rich Internet Application (这一说法最初是由 Macromedia ,现在的 Adobe 提出的)
      • 能够提供类似桌面应用的交互体验,模糊了桌面应用和 Web 应用的界限,提供了更完整和统一的体验
      http:// www.adobe.com/resources/business/rich_internet_apps
    • 什么是可用性 (Usability)
      • 效果 用户达成目标的精确度和完成度
      • 效率 用户达成目标花费的交互成本
      • 满意度 用户使用界面达成目标时的愉悦感等正面情感
      可用性是用户界面易用程度的衡量指标
    • Flash RIA 的一些可用性挑战
      • 浏览器兼容性
      • Flash RIA 的页面导航与人们使用一般网页浏览的习惯不同
      • 如何利用全屏模式
      • 如何适应不同的屏幕分辨率
      • 全球化应用
    • Flash 的浏览器兼容性
      • Flash Player 是跨浏览器的
      • 但是…
    • 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 无法访问 查看演示
    • Flash 的浏览器兼容性 部分浏览器对插件的访问做了限制 6/7
      • 此限制已与 2008 年 4 月的更新中取消,仅发生于部分 IE 6/7 ,相关链接:
      • http://msdn.microsoft.com/en-us/library/ms537508.aspx
      • http://www.adobe.com/devnet-archive/activecontent /
      查看演示
    • 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> 查看演示
    • 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> 查看演示
    • 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> 查看演示
    • 别忽视地址栏
      • 忽视地址栏就是忽视用户的习惯和感受
      A: 看看我家双宝 :D Http:// www.somedomain.com /album 杯具 轩飞的相册 – 我的宝宝 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 和 SWFAddressEvent. 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 = &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>
    • 适应不同的屏幕分辨率
      • 在舞台大小改变时重新布局
      stage . addEventListener ( Event . RESIZE , resizeHandler); function resizeHandler(evt: Event ) { updateDisplay (); } function updateDisplay () { // 设置界面元素的位置、大小和外观 }
    • 适应不同的屏幕分辨率
      • 有时候最大的不一定最好,最合适的才是
      Mac OS 的窗口控制 CS5 的安装程序窗口保持合适的大小,不能最大化 “ 最合适大小”的按钮,不是“最大化”
    • 适应不同的屏幕分辨率
      • 使用 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);
      查看演示
    • 创建全球化的 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> 查看演示
    • 更多
      • 合理的使用动效
      • Accessibility( 可达性 )
      • 移动 RIA
      • ……
                                                                                                                 
    • 案例
      • Pixlr – 类 PS 图片编辑器 http:// pixlr.com /editor/
      • Gliffy - 类 Visio 工具 http:// www.gliffy.com/gliffy
      • Mindomo – 思维导图创建及管理 http:// mindomo.com/index.htm
    • Q & A
    • 谢谢!
      • Email: [email_address]
      • Blog: http://www.xuanfei.me