响应性设计和开发

Responsive UI
响应性界面设计与开发
张克军

Thursday, June 23, 2011

设计环境

用户使用环境

网络访问终端


网络访问终端

1280x1024(17”) 1920x1080(27”) 2560x1440(27”)

1024x600(10”) 1366x768(14”) 1440x900(15”)

600x1024 600x800
768x1024

320x480 480x800 320x240 360x640 95x65


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


使用环境

不同的屏幕尺寸

不同的浏览器

不同的操作系统

不同的网络环境

不同的设备性能


用户行为的“源”

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/


屏幕分辨率


屏幕分辨率

08~09


屏幕分辨率

10~11

08~09


浏览器


浏览器

IE
Chrome
Firefox
Safari


浏览器

IE
Chrome
Firefox
Safari

IE6
IE8
IE7
IE9


操作系统


操作系统

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


操作系统

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

WinXP 64.83%
Win7 28.25%
Vista 6.41%


智能手机用户增长


智能手机用户增长

2011.3


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


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


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

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/

设计和开发应针对用户行为和使用环境
做出不同响应的设计方法。


Developer
Designer


Developer
Designer

共同实现一个“阴谋”


1280x1024(17”) 1920x1080(27”) 2560x1440(27”)

1024x600(10”) 1366x768(14”) 1440x900(15”)

Responsive UI

600x1024
768x1024

WebApp 320x480 480x800
NativeApp

简陋UI 320x240 360x640 95x65

WAP


响应性界面要素

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


兼顾移动设计

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. 产品统一维护


浏览器分级支持

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. 向下兼容变为向后退化


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


移动浏览器

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


http://jquerymobile.com/gbs/

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


HTML5带给设计什么...

取代图片

字体 Web-font
排版 Multi-column Flexible Box
视觉效果透明度圆角渐变阴影色相/饱和度
2D Transforms 3D Transforms

动态效果 Transitions Animation
富媒体内容 Audio Video 动态矢量图表(SVG) 2D/3D绘图(Canvas)


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


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


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


自适应布局

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.js


2
7
5
1
3

4
6


1

2
5

3

4 6

7


2 7
5
1
3

4
6


2 7 1
5
1
3
2 5
4
6
3

4 6

7


2 1
7 1
5
1
3 2
2 5 3
4
6
3 4
4 6
5
7 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 ----------- */
/* Styles */
}
/* Large screens ----------- */
/* 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/798569

Viewport Meta标签

320 x 356

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


Distributed Experiences: Multi-Device Design
分布式体验：面向多设备设计
http://punchcut.com/perspectives/distributed-experiences-multi-device-design

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)


性能考虑

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


共同的挑战

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


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/


重用模式
继承

响应性
可持续性敏捷迭代
框架
原型
模块化
渐进增强
面向对象
分级支持


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

谢谢！☺

@douban @twitter @zhihu gtalk: listenpro@gmail
/people/listenpro /kejunz /people/kejun msn: listenpro@hotmail


响应性设计和开发

More Related Content

Viewers also liked

Similar to 响应性设计和开发

Recently uploaded

响应性设计和开发