响应性设计和开发

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”) 1440x900(15”) 600x1024 600x800 768x1024 320x480 480x800 320x240 360x640 95x65Thursday, June 23, 2011

带宽和迟时 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

使用环境不同的屏幕尺寸不同的浏览器不同的操作系统不同的网络环境不同的设备性能Thursday, June 23, 2011

用户行为的“源” 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

屏幕分辨率Thursday, June 23, 2011

屏幕分辨率 08~09Thursday, June 23, 2011

屏幕分辨率 10~11 08~09Thursday, June 23, 2011

浏览器Thursday, June 23, 2011

浏览器 IE Chrome Firefox SafariThursday, June 23, 2011

浏览器 IE Chrome Firefox Safari IE6 IE8 IE7 IE9Thursday, June 23, 2011

操作系统Thursday, June 23, 2011

操作系统 Windows 90% Not set 3.18% Macintosh 2.95% Nokia 1.56% Linux 0.72%Thursday, June 23, 2011

操作系统 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

智能手机用户增长Thursday, June 23, 2011

智能手机用户增长 2011.3Thursday, June 23, 2011

Thursday, June 23, 2011

1. 分辨率：传统安全区域被打破(1004x580) 2. Chrome + Safari + Firefox + IE8,9 > IE6,7 浏览器分级支持 3. 操作系统：Win7/Mac OS升, XP降 4. 智能手机的上升趋势Thursday, June 23, 2011

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

“We need to move from prescribed design to responsive design.” http://www.slideshare.net/livefront/responsive-design-7877412Thursday, June 23, 2011

响应性设计 “ 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

Developer DesignerThursday, June 23, 2011

Developer Designer 共同实现一个“阴谋”Thursday, June 23, 2011

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

响应性界面要素 1. 兼顾移动设计 2. 模块化设计和开发 3. 浏览器分级支持 4. 自适应布局 5. 资源响应性优化 6. 性能考虑Thursday, June 23, 2011

兼顾移动设计 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

模块化设计和开发 1. 以模块为单位设计－同样的内容，不同的展现－模块宽度自适应 2. UI模式可复用。避免设计风险 3. 对应后端模板系统的模块化组织－不同的内容，不同的展现 4. 产品统一维护Thursday, June 23, 2011

浏览器分级支持 1. 高端和低端浏览器 a. 高端浏览器：Firefox 3.6+, Safari 4+, Chrome 6+, IE 9+, IE8(准) b. 低端浏览器：IE 6/7 c. 高端浏览器更标准，高性能，支持HTML5，低端浏览器则正相反 2. GBS(Graded Browser Support) 根据数据制订分级支持策略并定期更新Ａ - 高品质。严格测试完全符合产品设主要求（优先级高）Ｂ - 中品质。UI退化支持，保证可用（优先级中）Ｃ - 低品质。基本可用（优先级低） http://bit.ly/douban-css 3. 分级支持策略 a. 向下兼容变为向后退化Thursday, June 23, 2011

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

移动浏览器 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

http://jquerymobile.com/gbs/Thursday, June 23, 2011

HTML5 2004提出。目标是做为下一代的HTML标准。现在泛指新一代Web技术新一代Web技术：HTML5 + CSS3 + ECMA 5 + CanvasThursday, June 23, 2011

HTML5带给设计什么... 取代图片字体 Web-font 排版 Multi-column Flexible Box 视觉效果透明度圆角渐变阴影色相/饱和度 2D Transforms 3D Transforms 动态效果 Transitions Animation 富媒体内容 Audio Video 动态矢量图表(SVG) 2D/3D绘图(Canvas)Thursday, June 23, 2011

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

应用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

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

自适应布局 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

2 7 5 1 3 4 6Thursday, June 23, 2011

1 2 5 3 4 6 7Thursday, June 23, 2011

2 7 5 1 3 4 6Thursday, June 23, 2011

2 7 1 5 1 3 2 5 4 6 3 4 6 7Thursday, June 23, 2011

2 1 7 1 5 1 3 2 2 5 3 4 6 3 4 4 6 5 7 6 7Thursday, June 23, 2011

/* 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

Viewport Meta标签 320 x 356 <meta name="viewport" content="width=device-width,initial-scale=1.0">Thursday, June 23, 2011

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

资源响应性优化 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

性能考虑 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

共同的挑战 1. 系统的设计和开发 2. 通过重用降低成本 3. 综合性方案（设计＋技术） 4. 通过设计平衡技术的局限性Thursday, June 23, 2011

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

重用模式继承响应性可持续性敏捷迭代框架原型模块化渐进增强面向对象分级支持Thursday, June 23, 2011

http://www.douban.com/note/145271310/Thursday, June 23, 2011

谢谢！☺ @douban @twitter @zhihu gtalk: listenpro@gmail /people/listenpro /kejunz /people/kejun msn: listenpro@hotmailThursday, June 23, 2011

http://hikejun.com	10001
http://66.147.244.89	70
http://blog.mobantop.com	63
http://blog.hikejun.com	40
http://feeds.feedburner.com	40
http://www.techgig.com	26
url_unknown	22
http://xianguo.com	19
http://cache.baidu.com	18
http://ioshome.sinaapp.com	10
http://www.xfruits.com	4
http://translate.googleusercontent.com	2
http://xnny.net	2
http://www.slideshare.net	2
http://192.168.0.138:8360	1
http://flavors.me	1

响应性设计和开发

by kejun on Jun 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 10,321

Statistics

响应性设计和开发 — Presentation Transcript