Responsive UI

响应性界面设计与开发

张克军

Thursday, June 23, 2011

Thursday, June 23, 2011



设计环境

Thursday, June 23, 2011



用户使用环境

网络访问终端

Thursday, June 23, 2011

1280x1024(17”) 1024x600(10”)



网络访问终端



1920x1080(27”)



2560x1440(27”)



1366x768(14”)



1440x900(15”)



768x1024



600x1024



600x800



320x480



480x800



320x240



360x640



95x65



Thursday, June 23, 2011

Latency(ms) Bandwidth(kbps)



带宽和迟时







Broadband



xDSL



Cable



T1



Mobile







Dial-up





Thursday, June 23, 2011



http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/

Latency(ms) Bandwidth(kbps)



带宽和迟时







Broadband



xDSL



Cable



T1



Mobile







Dial-up





Thursday, June 23, 2011



http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/

Thursday, June 23, 2011



使用环境

不同的屏幕尺寸 不同的浏览器 不同的操作系统 不同的网络环境 不同的设备性能

用户行为的“源”



mousedown mouseup mousemove click double-click

mouse-gesture

keydown keyup keypress

shortcut key



touchdown touchup touchmove gesture: tap, double tap drag, flick, pinch, spread...

more:

http://www.lukew.com/ff/entry.asp?1071

Sensor web ? Kinect

http://depthjs.media.mit.edu/



Thursday, June 23, 2011

屏幕分辨率

Thursday, June 23, 2011

屏幕分辨率

08~09

Thursday, June 23, 2011

10~11



屏幕分辨率



08~09

Thursday, June 23, 2011

浏览器

Thursday, June 23, 2011

浏览器

IE Chrome Firefox Safari

Thursday, June 23, 2011

浏览器

IE Chrome Firefox Safari

Thursday, June 23, 2011

浏览器

IE Chrome Firefox Safari

Thursday, June 23, 2011



IE6 IE8 IE7 IE9

操作系统

Thursday, June 23, 2011

操作系统

Windows 90% Not set 3.18% Macintosh 2.95% Nokia 1.56% Linux 0.72%

Thursday, June 23, 2011

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

智能手机用户增长

2011.3

Thursday, 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.com

Thursday, June 23, 2011

“We need to move from prescribed design to responsive design.”



Thursday, June 23, 2011



http://www.slideshare.net/livefront/responsive-design-7877412

响应性设计

“ 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

Designer

Thursday, June 23, 2011



Developer

Designer



共同实现一个“阴谋”



Developer



Thursday, June 23, 2011

Responsive UI



1280x1024(17”) 1024x600(10”)



1920x1080(27”)



2560x1440(27”)



1366x768(14”)



1440x900(15”)



768x1024



600x1024



WebApp NativeApp



320x480



480x800



简陋UI

WAP

Thursday, June 23, 2011



320x240



360x640



95x65

响应性界面要素

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

Thursday, June 23, 2011

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/

模块化设计和开发

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



Thursday, June 23, 2011



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-agnostic

Thursday, 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.html

Thursday, June 23, 2011



http://jquerymobile.com/gbs/

HTML5

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

Thursday, 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 WebGL



Thursday, June 23, 2011

应用HTML5面临的问题

1. 兼容问题



主流桌面浏览器



Microsoft Internet Explorer 9 Apple Safari 5.0.3 Mozilla Firefox 4.0 Opera 11.10 Google Chrome 10.0.648



130 228 255 258 288



Microsoft Internet Explorer 6.0 17 Microsoft Internet Explorer 7.0 17 Microsoft Internet Explorer 8.0 32



开发版桌面浏览器

Microsoft Internet Explorer 10 PP 1 Apple Safari 5.1 Webkit Nightly 79987 Google Chromium 11.0.690



130 273 273 293



http://html5test.com/results.html



2. 设备性能局限



移动版浏览器

Apple iPhone and iPod iOS 3.1 Apple iPhone and iPod iOS 4.0 Apple iPhone and iPod iOS 4.1 Apple iPhone, iPod and iPad iOS 4.2 Android 2.3 Blackberry 6 Opera Mobile 11



132 195 195 206 182 233 234



3. 功能探测 + fallback支持 + 降级处理

如：http://www.modernizr.com



Thursday, June 23, 2011

Thursday, 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-Polyfills

Thursday, June 23, 2011



自适应布局



1. 100% (传统)



2. MediaQuery

Media Type all screen print ......



实例：http://mediaqueri.es/

Media Features color, color-index aspect-ratio, device-aspect-ratio device-height, device-width, height, width orientation ......



3. MediaQuery + Viewport



动浏览



4. IE6/7/8不支持@media



fallback如：Respond.js

Thursday, June 23, 2011

27 5

1 3

4 6

Thursday, June 23, 2011

Thursday, June 23, 2011

Thursday, June 23, 2011



2 3 4



5 6

2 57 1

3 4

Thursday, June 23, 2011

2 57 1

3 4

Thursday, June 23, 2011



2 3 4



5 6

2 57 1

3 4

Thursday, June 23, 2011



2 3 4



5 6



2 3 4 5 6 7

/* 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 (mindevice-pixel-ratio : 1.5) {

/* Styles */ }



Thursday, June 23, 2011



https://gist.github.com/798569

320 x 356



Viewport Meta标签



<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



Thursday, June 23, 2011



http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions

资源响应性优化

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 worker

Thursday, 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

http://www.getskeleton.com/



jQuery Mobile

http://jquerymobile.com/demos/1.0b1/

Sencha Touch

http://www.sencha.com/products/touch/



Thursday, June 23, 2011

重用



继承



模式



可持续性



敏捷 迭代



响应性



原型



模块化



框架 渐进增强



面向对象



分级支持



Thursday, June 23, 2011

Thursday, June 23, 2011



http://www.douban.com/note/145271310/

谢谢！☺



@douban /people/listenpro



@twitter /kejunz



@zhihu /people/kejun



gtalk: listenpro@gmail msn: listenpro@hotmail



Thursday, June 23, 2011