mobile ui design and developer
DESCRIPTION
可适应移动终端屏幕大小的网站UI设计和实现TRANSCRIPT
Design &
Develop
拔赤 – F2E@Taobao�2011-8-19
http://ued.taobao.com/javascript http://jayli.github.com/jswebapps
ongoing�project
@jayliF2E & Translator
htt[p://[email protected]
Long time ago…
Mobile Web is coming
如今有350亿部移动终端连接至Internet
- Eric�Schmidt,�Google
新的挑战
主流分辨率
像素 像素 + DPI
3.5英寸320x480�
160�DPI 3.5英寸480x800�
240�DPI
生产商 设备 分辨率 尺寸 DPI
Apple iPhone 480x320 3.5 163
Apple iPhone4 960x640 3.5 326
Apple iPad 1024x768 9.7 123
BlackBerry PlayBook 1024x600 7 170
HTC Evo 800x480 4.3 217
Motorola Atrix 960x540 4 275
Motorola Xoom 1280x800 10.1 150
Samsung Galaxy�Tab 1024x600 7 170
I�wanna build�a�mobile�webapp…site
WebUI应当具备设备自适应性
59%访问者
在PC中也会访问同样的网站
使用不同设备 访问同一网站
34%访问者
在mobile中也会访问同样的网站
使用不同设备 访问同一网站
http://www.alistapart.com/articles/responsive-web-design
“Responsive�Web�Design”
移动设备中打开
主要内容无差别，两者是同一套代码
不同的设计，不同的实现，两套代码看起来像不同的网站
一套代码，自适应UI
针对不同的终端各自实现
How to Code ?
WebKitiOS,Android,Palm WebOS,�Nokia�QtBada，Symbian &�new�Blackberry
Opera MiniJava�ME…
<!—显示器样式--><link rel="stylesheet"
type="text/css" href="core.css" media="screen" />
<!—打印机样式--><link rel="stylesheet"
type="text/css" href="print.css" media="print" />
设备适配http://www.w3.org/TR/CSS2/media.html
<!—显示器样式 & 显示器最大宽度480px-->
<link rel="stylesheet" type="text/css”media="screen and (max-device-width:480px)" href="shetland.css" />
多条件设备适配http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html
/* 显示器最大宽度480px */@media screen and (max-device-width: 480px) {
.column {float: none;
} }
CSS 条件样式http://www.w3.org/TR/CSS2/media.html
<!doctype html> <html><head>
<meta charset="utf-8"><meta name="viewport"
content="width=device-height"/>
<link href="all.css" rel="stylesheet"><link href="30em.css"
media="screen and (min-width: 30em)" rel="stylesheet">
<link href="48em.css" media="screen and (min-width: 48em)" rel="stylesheet">
<link href="64em.css" media="screen and (min-width: 64em)" rel="stylesheet">
</head>…
<!doctype html> <html><head>
…<!--[if IE 6]>
<link href=“ie6.css” /><![endif]-->…<!--[if lt IE 9]>
<script src=“html5shim.js"></script> <![endif]-->
</head><body>
<header>…</header><section>…</section>…
</body>
How to Design ?
像素pixel
百分比%
等比缩放栅格模式功能减法修饰减法流式布局纯语义化
等比缩放栅格模式功能减法修饰减法流式布局纯语义化
等比缩放栅格模式功能减法修饰减法流式布局纯语义化
68px
24px
LessFramework.css�栅格系统
PC:�68x10+24x9+48x2�=�992
Ipad：68x8+24x7+28x2�=�768
Iphone：68x3+24x2+34x2�=�320
Iphone：68x5+24x4+22x2�=�480
LessFramework.css
设计原则：灵活的 Outer�margin以适应更多分辨率
等比缩放栅格模式
功能减法修饰减法流式布局纯语义化
触手可及Easy�to�Touch
功能减法Fewer�Features
0
31
25
46
8
7
0
1
2
3
4
5
重点 >�次重点 >�非重点
0
31
2
5
4
6
87
Desktop Tablet Mobile
操作区
0
31
25
46
8
7
0
1
2
3
4
5
重点 >�次重点 >�非重点
0
31
2
5
4
6
87
Desktop Tablet Mobile
0
31
25
46
8
7
Mod�5：重要程度降低？
0
31
2
5
4
6
87
Desktop Tablet
0
31
25
46
8
7
0
31
2
4
7，8…
Desktop Tablet
remove
小屏幕优先展示重点内容操作区引导至单独页面完成
功能减法
功能减法
等比缩放栅格模式功能减法
修饰减法流式布局纯语义化
视觉:50%
功能:50%
视觉:20%
功能:80%
Mobile:Focus Desktop:Overview
等比缩放栅格模式功能减法修饰减法
流式布局纯语义化
960px
520px 200px 200px
20px 20px
固定布局
90%
50% 20% 20%
5% 5%
流式布局
.content-wrapper {width:65.4%;margin:5px 10px 5px 0px;
}@media handheld, screen and (max-width: 767px){
.content-wrapper {width:auto;margin:5px 10px;
} }
65.4%65.4%65.4%auto
浮动容器定宽
定高
图文混排容器的宽度适应 &�高度自增
50%50%100%
定宽不定高容器的自适应？
等比缩放栅格模式功能减法修饰减法流式布局
纯语义化
焦点图(设备检测)
标题 &�导语
正文图片(设备检测)
正文文本
兼容的多媒体
语义化标签更好的可读性
<header><h1>
<a href=“#”><strong>I</strong> love <em>u</em>
</a><span>I am Jay</span>
</h1><nav>
<ul><li>my journal</li><li>about me</li><li>the sandbox</li>
</ul></nav>
</header>
语义化编码
<div class="grid-*3"><div class=“g-aside”>左边栏</div><div class="g-main">
<div class=“g-wrap”>主内容</div></div><div class=“g-side”>右边栏</div>
</div>
善用布局
Would U like to Know More ?
1. 手持设备优先2. 语义化标签3. @media检测4. @media�&�JavaScript�渐进增强5. 正文自适应6. 图片尺寸压缩7. Webkit vs Opera�Mini
To be continue…
ref
http://mediaqueri.eshttp://lessframework.comhttp://masonry.desandro.comhttp://www.slideshare.net/helgetenno/mobile
-abilities-maphttp://www.w3.org/TR/CSS2/media.html
