Mobile UI design and Developer

Design &
Develop

拔赤 – F2E@Taobao
2011-8-19

@jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com

ongoingproject

http://ued.taobao.com/javascript http://jayli.github.com/jswebapps

@jayli
F2E & Translator
htt[p://jayli.github.com
bachi@taobao.com

如今有350亿部移动终端
连接至Internet

- EricSchmidt,Google

3.5英寸
320x480
160DPI 3.5英寸
480x800
240DPI

生产商设备分辨率尺寸 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

site
Iwanna buildamobilewebapp…

jQuery MobileFramework
http://jquerymobile.com/

自适应的Web UI

jQuery MobileFramework
http://jquerymobile.com/

WebUI应当具备设备自适应性

59% 在PC中也会访问
访问者同样的网站

使用不同设备访问同一网站

在mobile
34% 中也会访
问同样的
访问者网站

使用不同设备访问同一网站

“ResponsiveWebDesign”
http://www.alistapart.com/articles/responsive-web-design

主要内容无差别，两者是同一套代码

不同的设计，不同的实现，两套代码
看起来像不同的网站

一套代码，自适应UI

针对不同的终端各自实现

WebKit
iOS,Android,Palm WebOS,NokiaQt
Bada，Symbian &newBlackberry

Opera Mini
JavaME…

<!—显示器样式-->
<link rel="stylesheet"
type="text/css"
href="core.css"
media="screen" />

<!—打印机样式-->
type="text/css"
href="print.css"
media="print" />

设备适配
http://www.w3.org/TR/CSS2/media.html

<!—显示器样式 & 显示器最大宽度480px-->

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://virtuelvis.com/gallery/mediaqueries/

<!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">
rel="stylesheet">
rel="stylesheet">
</head>…

<!doctype html>
<html>
<head>
…

…

</head>
<body>
<header>…
</header>
<section>…
</section>…
</body>

像素百分比
pixel %

等比缩放
栅格模式
功能减法
修饰减法
流式布局
纯语义化

在小屏幕中等比缩小
不自然的字体和布局
http://caipiao.taobao.com

较少视觉元素的页面等比缩小
视觉体验无差异
http://www.flickr.com

LessFramework.css
http://lessframework.com/

68px
24px

LessFramework.css栅格系统

设计原则：灵活的 Outermargin
以适应更多分辨率

LessFramework.css

触手可及
EasytoTouch

功能减法
FewerFeatures

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

重点 >次重点 >非重点

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

重点 >次重点 >非重点

Desktop Tablet
0 0

1 1
3 5 3
2 2

6
4 4
8

5 6
7
7 8

Mod5：重要程度降低？

Desktop Tablet
0 0

1 remove 1
3 5 3
2 2

6
4 4
8

7，8…
7

小屏幕优先展示重点内容
操作区引导至单独页面完成

视觉:20%
视觉:50%

功能:50% 功能:80%

Mobile:Focus Desktop:Overview

960px

520px 200px 200px

20px 20px

固定布局

90%

50% 20% 20%

5% 5%

流式布局

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;
}
}

浮动容器
定宽

定高

50% 50%
100%

图文混排容器的宽度适应 &高度自增

定宽不定高容器的自适应？

MasonryLayout
http://masonry.desandro.com

焦点图(设备检测)
语义化标签
更好的可读性
标题 &导语

正文图片(设备检测)

正文文本

兼容的多媒体

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

ref
http://mediaqueri.es
http://lessframework.com
http://masonry.desandro.com
http://www.slideshare.net/helgetenno/mobile
-abilities-map

Mobile UI design and Developer

Recommended

Recommended

More Related Content

Similar to Mobile UI design and Developer

Similar to Mobile UI design and Developer (20)

More from jay li

More from jay li (20)

Mobile UI design and Developer