AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

响应性界面设计与开发[各种设备的兼容开发] by 张克军@豆瓣

发布者 design
发布于 1443488396828  浏览 1710 关键词 前端, 移动开发, 设计 
分享到

第1页

Responsive UI

响应性界面设计与开发

张克军

Thursday, June 23, 2011



第2页

Thursday, June 23, 2011



设计环境



第3页

Thursday, June 23, 2011



用户使用环境



第4页

网络访问终端

Thursday, June 23, 2011



第5页

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



网络访问终端



1920x1080(27”)



2560x1440(27”)



1366x768(14”)



1440x900(15”)



768x1024



600x1024



600x800



320x480



480x800



320x240



360x640



95x65



Thursday, June 23, 2011



第6页

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/



第7页

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/



第8页

Thursday, June 23, 2011



使用环境

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



第9页

用户行为的“源”



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



第10页

屏幕分辨率

Thursday, June 23, 2011



第11页

屏幕分辨率

08~09

Thursday, June 23, 2011



第12页

10~11



屏幕分辨率



08~09

Thursday, June 23, 2011



第13页

浏览器

Thursday, June 23, 2011



第14页

浏览器

IE Chrome Firefox Safari

Thursday, June 23, 2011



第15页

浏览器

IE Chrome Firefox Safari

Thursday, June 23, 2011



第16页

浏览器

IE Chrome Firefox Safari

Thursday, June 23, 2011



IE6 IE8 IE7 IE9



第17页

操作系统

Thursday, June 23, 2011



第18页

操作系统

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

Thursday, June 23, 2011



第19页

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%



第20页

智能手机用户增长

Thursday, June 23, 2011



第21页

智能手机用户增长

2011.3

Thursday, June 23, 2011



第22页

Thursday, June 23, 2011



第23页

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

Thursday, June 23, 2011



第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.com

Thursday, June 23, 2011



第25页

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



Thursday, June 23, 2011



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



第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页

Designer

Thursday, June 23, 2011



Developer



第28页

Designer



共同实现一个“阴谋”



Developer



Thursday, June 23, 2011



第29页

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



第30页

响应性界面要素

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

Thursday, June 23, 2011



第31页

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/



第32页

模块化设计和开发

1. 以模块为单位设计

-同样的内容,不同的展现 -模块宽度自适应

2. UI模式可复用。避免设计风险 3. 对应后端模板系统的模块化组织

-不同的内容,不同的展现

4. 产品统一维护

Thursday, June 23, 2011



第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



Thursday, June 23, 2011



3. 分级支持策略 a. 向下兼容变为向后退化



第34页

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



第35页

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



第36页

Thursday, June 23, 2011



http://jquerymobile.com/gbs/



第37页

HTML5

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

Thursday, June 23, 2011



第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页

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



第40页

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



第41页

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



第42页

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



第43页

Thursday, June 23, 2011



第44页

27 5

1 3

4 6

Thursday, June 23, 2011



第45页

Thursday, June 23, 2011



第46页

Thursday, June 23, 2011



2 3 4



5 6



第47页

2 57 1

3 4

Thursday, June 23, 2011



第48页

2 57 1

3 4

Thursday, June 23, 2011



2 3 4



5 6



第49页

2 57 1

3 4

Thursday, June 23, 2011



2 3 4



5 6



2 3 4 5 6 7



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

/* Styles */ }



Thursday, June 23, 2011



https://gist.github.com/798569



第51页

320 x 356



Viewport Meta标签



<meta name="viewport" content="width=device-width,initial-scale=1.0">



Thursday, June 23, 2011



第52页

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



第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页

性能考虑

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



第55页

共同的挑战

1. 系统的设计和开发 2. 通过重用降低成本 3. 综合性方案(设计+技术) 4. 通过设计平衡技术的局限性

Thursday, June 23, 2011



第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

http://www.getskeleton.com/



jQuery Mobile

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

Sencha Touch

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



Thursday, June 23, 2011



第57页

重用



继承



模式



可持续性



敏捷 迭代



响应性



原型



模块化



框架 渐进增强



面向对象



分级支持



Thursday, June 23, 2011



第58页

Thursday, June 23, 2011



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



第59页

谢谢!☺



@douban /people/listenpro



@twitter /kejunz



@zhihu /people/kejun



gtalk: listenpro@gmail msn: listenpro@hotmail



Thursday, June 23, 2011



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。