More Related Content
Similar to Mobile UI design and Developer (20)
Mobile UI design and Developer
- 2. @jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com
- 12. 生产商 设备 分辨率 尺寸 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 GalaxyTab 1024x600 7 170
- 17. 59% 在PC中也会访问
访问者 同样的网站
使用不同设备 访问同一网站
- 28. <!—显示器样式-->
<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
- 29. <!—显示器样式 & 显示器最大宽度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
- 30. /* 显示器最大宽度480px */
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
CSS 条件样式
http://www.w3.org/TR/CSS2/media.html
- 32. <!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>…
- 33. <!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>
- 42. 68px
24px
LessFramework.css栅格系统
- 50. Desktop Tablet Mobile
0 0 0
1 1 1
3 5 3
2 2
操作区 2
6
4 4 3
8
5 6 4
7
7 8
5
重点 >次重点 >非重点
- 51. Desktop Tablet Mobile
0 0 0
1 1 1
3 5 3
2 2
2
6
4 4 3
8
5 6 4
7
7 8
5
重点 >次重点 >非重点
- 52. Desktop Tablet
0 0
1 1
3 5 3
2 2
6
4 4
8
5 6
7
7 8
Mod5:重要程度降低?
- 53. Desktop Tablet
0 0
1 remove 1
3 5 3
2 2
6
4 4
8
7,8…
7
小屏幕优先展示重点内容
操作区引导至单独页面完成
- 63. 65.4%
65.4% 65.4%
auto
.content-wrapper {
width:65.4%;
margin:5px 10px 5px 0px;
}
@media handheld, screen and (max-width: 767px){
.content-wrapper {
width:auto;
margin:5px 10px;
}
}
- 67. 50% 50%
100%
图文混排容器的宽度适应 &高度自增
- 71. 焦点图(设备检测)
语义化标签
更好的可读性
标题 &导语
正文图片(设备检测)
正文文本
兼容的多媒体
- 72. <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>
语义化编码
- 73. <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>
善用布局
- 75. 1. 手持设备优先
2. 语义化标签
3. @media检测
4. @media&JavaScript渐进增强
5. 正文自适应
6. 图片尺寸压缩
7. Webkit vs OperaMini
- 78. @jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com