Responsive UI                           响应性界面设计与开发                               张克军Thursday, June 23, 2011
设计环境Thursday, June 23, 2011
用户使用环境Thursday, June 23, 2011
网络访问终端Thursday, June 23, 2011
网络访问终端            1280x1024(17”)      1920x1080(27”)        2560x1440(27”)            1024x600(10”)    1366x768(14”)      ...
带宽和迟时                                  Latency(ms)                                  Bandwidth(kbps)                       ...
带宽和迟时                                  Latency(ms)                                  Bandwidth(kbps)                       ...
使用环境                          不同的屏幕尺寸                          不同的浏览器                          不同的操作系统                    ...
用户行为的“源”                          mousedown                           touchdown                          mouseup          ...
屏幕分辨率Thursday, June 23, 2011
屏幕分辨率                08~09Thursday, June 23, 2011
屏幕分辨率                10~11                08~09Thursday, June 23, 2011
浏览器Thursday, June 23, 2011
浏览器                          IE                          Chrome                          Firefox                          ...
浏览器                          IE                          Chrome                          Firefox                          ...
浏览器                          IE                          Chrome                          Firefox                          ...
操作系统Thursday, June 23, 2011
操作系统                                 Windows 90%                                 Not set 3.18%                            ...
操作系统                                 Windows 90%                                 Not set 3.18%                            ...
智能手机用户增长Thursday, June 23, 2011
智能手机用户增长                              2011.3Thursday, June 23, 2011
Thursday, June 23, 2011
1.   分辨率 :传统安全区域被打破(1004x580)                          2.   Chrome + Safari + Firefox + IE8,9 > IE6,7 浏览器分级支持             ...
One Web                          “One Web means making, as far as is reasonable, the same                          informa...
“We need to move                          from prescribed design                           to responsive design.”         ...
响应性设计            “ Responsive Web design is the approach that suggests that design and            development should respo...
Developer              DesignerThursday, June 23, 2011
Developer              Designer                          共同实现一个“阴谋”Thursday, June 23, 2011
1280x1024(17”)        1920x1080(27”)              2560x1440(27”)                          1024x600(10”)     1366x768(14”) ...
响应性界面要素                          1. 兼顾移动设计                          2. 模块化设计和开发                          3. 浏览器分级支持       ...
兼顾移动设计                          1. Luke Wroblewski - “Mobile First”     (http://www.lukew.com/ff/entry.asp?933)           ...
模块化设计和开发                          1. 以模块为单位设计                            -同样的内容,不同的展现                            -模块宽度自适应 ...
浏览器分级支持                                   1. 高端和低端浏览器                                        a. 高端浏览器:Firefox 3.6+, Safari...
Progressive Enhancement 2.0                          OMG CSS                                                      OMG JS  ...
移动浏览器                          1. ~20种                          2. webkit内核                               iOS, Android, ba...
http://jquerymobile.com/gbs/Thursday, June 23, 2011
HTML5                          2004提出。目标是做为下一代的HTML标准。现在泛指新一代Web技术                                新一代Web技术:HTML5 + CSS3 + ...
HTML5带给设计什么...                                   取代图片                           字体     Web-font                           ...
HTML5带给开发什么...                                     丰富的API                           交互API     drag & drop History(#!)     ...
应用HTML5面临的问题                                                   1. 兼容问题           主流桌面浏览器                                  ...
Modernizr                          Modernizr.load({                           test: Modernizr.geolocation,                ...
自适应布局                          1. 100% (传统)                          2. MediaQuery     实例:http://mediaqueri.es/           ...
Thursday, June 23, 2011
2                                  7                              5                   1                          3        ...
Thursday, June 23, 2011
1                          2                                  5                          3                          4     ...
2       7                              5           1                          3                          4                ...
2       7       1                              5           1                          3                                   ...
2                       1                                  7       1                              5           1           ...
/* Smartphones (portrait and landscape) ----------- */                          @media only screen and (min-device-width :...
Viewport Meta标签                          320 x 356                                      <meta name="viewport" content="wid...
Distributed Experiences: Multi-Device Design                                         分布式体验:面向多设备设计                        ...
资源响应性优化                          1. 图片                              a.   <div><img src= width=100%></div>                 ...
性能考虑                          1. 移动设备是perf-senstive (电池、内存、宽带、延迟等)                          2. 缓存。资源的本地存储 (Localstorage)  ...
共同的挑战                          1. 系统的设计和开发                          2. 通过重用降低成本                          3. 综合性方案(设计+技术)  ...
User Interface Frameworks                           5. Establish frameworks to provide flexibility.                       ...
重用                模式                                  继承                                             响应性           可持续性   ...
http://www.douban.com/note/145271310/Thursday, June 23, 2011
谢谢!☺                          @douban             @twitter    @zhihu          gtalk: listenpro@gmail                      ...
Upcoming SlideShare
Loading in...5
×

响应性设计和开发

19,642

Published on

Published in: Technology
0 Comments
45 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
19,642
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
331
Comments
0
Likes
45
Embeds 0
No embeds

No notes for slide

响应性设计和开发

  1. 1. Responsive UI 响应性界面设计与开发 张克军Thursday, June 23, 2011
  2. 2. 设计环境Thursday, June 23, 2011
  3. 3. 用户使用环境Thursday, June 23, 2011
  4. 4. 网络访问终端Thursday, June 23, 2011
  5. 5. 网络访问终端 1280x1024(17”) 1920x1080(27”) 2560x1440(27”) 1024x600(10”) 1366x768(14”) 1440x900(15”) 600x1024 600x800 768x1024 320x480 480x800 320x240 360x640 95x65Thursday, June 23, 2011
  6. 6. 带宽和迟时 Latency(ms) Bandwidth(kbps) 4000 3000 2000 1000 Broadband xDSL Cable T1 0 Mobile Dial-up http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/Thursday, June 23, 2011
  7. 7. 带宽和迟时 Latency(ms) Bandwidth(kbps) 4000 3000 2000 1000 Broadband xDSL Cable T1 0 Mobile Dial-up http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/Thursday, June 23, 2011
  8. 8. 使用环境 不同的屏幕尺寸 不同的浏览器 不同的操作系统 不同的网络环境 不同的设备性能Thursday, June 23, 2011
  9. 9. 用户行为的“源” mousedown touchdown mouseup touchup mousemove touchmove click gesture: double-click tap, double tap drag, flick, pinch, spread... mouse-gesture more: http://www.lukew.com/ff/entry.asp?1071 keydown keyup keypress Sensor web ? Kinect shortcut key http://depthjs.media.mit.edu/Thursday, June 23, 2011
  10. 10. 屏幕分辨率Thursday, June 23, 2011
  11. 11. 屏幕分辨率 08~09Thursday, June 23, 2011
  12. 12. 屏幕分辨率 10~11 08~09Thursday, June 23, 2011
  13. 13. 浏览器Thursday, June 23, 2011
  14. 14. 浏览器 IE Chrome Firefox SafariThursday, June 23, 2011
  15. 15. 浏览器 IE Chrome Firefox SafariThursday, June 23, 2011
  16. 16. 浏览器 IE Chrome Firefox Safari IE6 IE8 IE7 IE9Thursday, June 23, 2011
  17. 17. 操作系统Thursday, June 23, 2011
  18. 18. 操作系统 Windows 90% Not set 3.18% Macintosh 2.95% Nokia 1.56% Linux 0.72%Thursday, June 23, 2011
  19. 19. 操作系统 Windows 90% Not set 3.18% Macintosh 2.95% Nokia 1.56% Linux 0.72% WinXP 64.83% Win7 28.25% Vista 6.41%Thursday, June 23, 2011
  20. 20. 智能手机用户增长Thursday, June 23, 2011
  21. 21. 智能手机用户增长 2011.3Thursday, June 23, 2011
  22. 22. Thursday, June 23, 2011
  23. 23. 1. 分辨率 :传统安全区域被打破(1004x580) 2. Chrome + Safari + Firefox + IE8,9 > IE6,7 浏览器分级支持 3. 操作系统:Win7/Mac OS升, XP降 4. 智能手机的上升趋势Thursday, June 23, 2011
  24. 24. One Web “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using...” 出自 http://www.w3.org/TR/mobile-bp/#OneWeb http://www.douban.comThursday, June 23, 2011
  25. 25. “We need to move from prescribed design to responsive design.” http://www.slideshare.net/livefront/responsive-design-7877412Thursday, June 23, 2011
  26. 26. 响应性设计 “ Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. ” http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ 设计和开发应针对用户行为和使用环境 做出不同响应的设计方法。Thursday, June 23, 2011
  27. 27. Developer DesignerThursday, June 23, 2011
  28. 28. Developer Designer 共同实现一个“阴谋”Thursday, June 23, 2011
  29. 29. 1280x1024(17”) 1920x1080(27”) 2560x1440(27”) 1024x600(10”) 1366x768(14”) 1440x900(15”) Responsive UI 600x1024 768x1024 WebApp 320x480 480x800 NativeApp 简陋UI 320x240 360x640 95x65 WAPThursday, June 23, 2011
  30. 30. 响应性界面要素 1. 兼顾移动设计 2. 模块化设计和开发 3. 浏览器分级支持 4. 自适应布局 5. 资源响应性优化 6. 性能考虑Thursday, June 23, 2011
  31. 31. 兼顾移动设计 1. Luke Wroblewski - “Mobile First” (http://www.lukew.com/ff/entry.asp?933) a. Mobile is exploding b. Mobile forces you to focus c. Mobile extends your capabilities 2. 触摸 vs. 鼠标 -无CSS Hover状态 -分辨率1024x768 -手指面积 -手持习惯 -iOS不支持Flash http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/Thursday, June 23, 2011
  32. 32. 模块化设计和开发 1. 以模块为单位设计 -同样的内容,不同的展现 -模块宽度自适应 2. UI模式可复用。避免设计风险 3. 对应后端模板系统的模块化组织 -不同的内容,不同的展现 4. 产品统一维护Thursday, June 23, 2011
  33. 33. 浏览器分级支持 1. 高端和低端浏览器 a. 高端浏览器:Firefox 3.6+, Safari 4+, Chrome 6+, IE 9+, IE8(准) b. 低端浏览器:IE 6/7 c. 高端浏览器更标准,高性能,支持HTML5,低端浏览器则正相反 2. GBS(Graded Browser Support) 根据数据制订分级支持策略并定期更新 A - 高品质。严格测试完全符合产品设主要求(优先级高) B - 中品质。UI退化支持,保证可用(优先级中) C - 低品质。基本可用(优先级低) http://bit.ly/douban-css 3. 分级支持策略 a. 向下兼容变为向后退化Thursday, June 23, 2011
  34. 34. Progressive Enhancement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML 出自 http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnosticThursday, June 23, 2011
  35. 35. 移动浏览器 1. ~20种 2. webkit内核 iOS, Android, bada(三星), BlackBerry OS 6, webOS(palm), S-class(LG), S40/60(Nokia) ... 3. Opera Mobile/Opera Mini 4. Fennec(移动版Firefox) 5. IE 7 (Window Phone 7) 6. UCWeb (中国only) http://www.quirksmode.org/mobile/browsers.htmlThursday, June 23, 2011
  36. 36. http://jquerymobile.com/gbs/Thursday, June 23, 2011
  37. 37. HTML5 2004提出。目标是做为下一代的HTML标准。现在泛指新一代Web技术 新一代Web技术:HTML5 + CSS3 + ECMA 5 + CanvasThursday, June 23, 2011
  38. 38. HTML5带给设计什么... 取代图片 字体 Web-font 排版 Multi-column Flexible Box 视觉效果 透明度 圆角 渐变 阴影 色相/饱和度 2D Transforms 3D Transforms 动态效果 Transitions Animation 富媒体内容 Audio Video 动态矢量图表(SVG) 2D/3D绘图(Canvas)Thursday, June 23, 2011
  39. 39. HTML5带给开发什么... 丰富的API 交互API drag & drop History(#!) 通讯 Cross-document messaging WebSocket 地理信息 Geolocation 本地存储 localStorage 表单控件&校验 input[type=search] input[type=tel] input[type=range] ...... 文件访问 FileAPI 图形处理 2D/3D绘图(Canvas) SVG WebGLThursday, June 23, 2011
  40. 40. 应用HTML5面临的问题 1. 兼容问题 主流桌面浏览器 开发版桌面浏览器 移动版浏览器 Microsoft Internet Explorer 9 130 Microsoft Internet Explorer 10 PP 1 130 Apple iPhone and iPod iOS 3.1 132 Apple Safari 5.0.3 228 Apple Safari 5.1 273 Apple iPhone and iPod iOS 4.0 195 Mozilla Firefox 4.0 255 Webkit Nightly 79987 273 Apple iPhone and iPod iOS 4.1 195 Opera 11.10 258 Google Chromium 11.0.690 293 Apple iPhone, iPod and iPad iOS 4.2 206 Google Chrome 10.0.648 288 Android 2.3 182 Microsoft Internet Explorer 6.0 17 Blackberry 6 233 Microsoft Internet Explorer 7.0 17 Opera Mobile 11 234 Microsoft Internet Explorer 8.0 32 http://html5test.com/results.html 2. 设备性能局限 3. 功能探测 + fallback支持 + 降级处理 如:http://www.modernizr.comThursday, June 23, 2011
  41. 41. Modernizr Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js }); Modernizr.load([ { test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients, nope : [presentational-polyfill.js, presentational.css] }, { test : Modernizr.websockets && window.JSON, nope : functional-polyfills.js, both : [ app.js, extra.js ], complete : function () { myApp.init(); } }, post-analytics.js ]); Modernizer docs : http://www.modernizr.com/docs/ HTML5 Cross Browser Polyfills : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-PolyfillsThursday, June 23, 2011
  42. 42. 自适应布局 1. 100% (传统) 2. MediaQuery 实例:http://mediaqueri.es/ Media Type Media Features all color, color-index screen aspect-ratio, device-aspect-ratio print device-height, device-width, height, width ...... orientation ...... 3. MediaQuery + Viewport 动浏览 4. IE6/7/8不支持@media fallback如:Respond.jsThursday, June 23, 2011
  43. 43. Thursday, June 23, 2011
  44. 44. 2 7 5 1 3 4 6Thursday, June 23, 2011
  45. 45. Thursday, June 23, 2011
  46. 46. 1 2 5 3 4 6 7Thursday, June 23, 2011
  47. 47. 2 7 5 1 3 4 6Thursday, June 23, 2011
  48. 48. 2 7 1 5 1 3 2 5 4 6 3 4 6 7Thursday, June 23, 2011
  49. 49. 2 1 7 1 5 1 3 2 2 5 3 4 6 3 4 4 6 5 7 6 7Thursday, June 23, 2011
  50. 50. /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min- device-pixel-ratio : 1.5) { /* Styles */ } https://gist.github.com/798569Thursday, June 23, 2011
  51. 51. Viewport Meta标签 320 x 356 <meta name="viewport" content="width=device-width,initial-scale=1.0">Thursday, June 23, 2011
  52. 52. Distributed Experiences: Multi-Device Design 分布式体验:面向多设备设计 http://punchcut.com/perspectives/distributed-experiences-multi-device-design http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutionsThursday, June 23, 2011
  53. 53. 资源响应性优化 1. 图片 a. <div><img src= width=100%></div> b. background-image c. <img src="small.jpg?full=large.jpg" > 如:https://github.com/filamentgroup/Responsive-Images d. <img src="${image-src}" > 2. Flash vs. HTML5 a. 音/视频 (Audio/Video) b. 动态图表 (SVG) c. 广告 (CSS3) d. 数据通讯 (WebSocket, XDM)Thursday, June 23, 2011
  54. 54. 性能考虑 1. 移动设备是perf-senstive (电池、内存、宽带、延迟等) 2. 缓存。资源的本地存储 (Localstorage) 3. 图片优化。惰性加载, 无损压缩, spirites,dataURI, K-weight等 4. 用css3视觉效果代替图片;用css3动态效果代替JS 5. 语义化HTML5模板和OOCSS 6. 异步。数据异步加载(ajax),模块异步加载,内容延迟加载 7. JS优化。非阻塞加载、响应性加载、轻量 8. JS执行效率。100ms/10ms,利用setTimeout拆分长执行时间的操作 9。线程。web workerThursday, June 23, 2011
  55. 55. 共同的挑战 1. 系统的设计和开发 2. 通过重用降低成本 3. 综合性方案(设计+技术) 4. 通过设计平衡技术的局限性Thursday, June 23, 2011
  56. 56. User Interface Frameworks 5. Establish frameworks to provide flexibility. “By defining a set of principles, elements, patterns and guidelines, frameworks help distributed experiences adapt to meet users not only where they are, but where they are going to be.” 摘自 http://punchcut.com/perspectives/distributed-experiences-multi-device-design Skeleton jQuery Mobile http://www.getskeleton.com/ http://jquerymobile.com/demos/1.0b1/ Sencha Touch http://www.sencha.com/products/touch/Thursday, June 23, 2011
  57. 57. 重用 模式 继承 响应性 可持续性 敏捷 迭代 框架 原型 模块化 渐进增强 面向对象 分级支持Thursday, June 23, 2011
  58. 58. http://www.douban.com/note/145271310/Thursday, June 23, 2011
  59. 59. 谢谢!☺ @douban @twitter @zhihu gtalk: listenpro@gmail /people/listenpro /kejunz /people/kejun msn: listenpro@hotmailThursday, June 23, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×