Mobile UI design and Developer
Upcoming SlideShare
Loading in...5
×
 

Mobile UI design and Developer

on

  • 10,317 views

可适应移动终端屏幕大小的网站UI设计和实现

可适应移动终端屏幕大小的网站UI设计和实现

Statistics

Views

Total Views
10,317
Views on SlideShare
5,451
Embed Views
4,866

Actions

Likes
38
Downloads
406
Comments
0

23 Embeds 4,866

http://ued.taobao.com 3312
http://www.ued8.net 328
http://ued8.net 293
http://www.php163.com 241
http://xianguo.com 190
http://www.zhuaxia.com 116
http://jayli.github.com 113
http://reader.youdao.com 78
http://www.kuqin.com 69
http://doubanya.com 47
http://zhuaxia.com 38
http://www.itfeed.cn 13
http://old.xianguo.com 9
http://translate.googleusercontent.com 3
http://mailreader.163.com 3
http://www.startfeel.com 3
http://www.psdcool.com 2
http://bj.ued.taobao.net 2
http://localhost 2
http://www.doubanya.com 1
http://artdesigner.org 1
http://www.netvibes.com 1
http://woxihuan.koudai.360.cn 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile UI design and Developer Mobile UI design and Developer Presentation Transcript

    • Design &Develop拔赤 – F2E@Taobao2011-8-19
    • @jayli F2E & Translatorhtt[p://jayli.github.com bachi@taobao.com
    • ongoingprojecthttp://ued.taobao.com/javascript http://jayli.github.com/jswebapps @jayli F2E & Translator htt[p://jayli.github.com bachi@taobao.com
    • Long time ago…
    • Mobile Web is coming
    • 如今有350亿部移动终端连接至Internet - EricSchmidt,Google
    • 新的挑战
    • 主流分辨率
    • 像素 像素 + DPI
    • 3.5英寸320x480160DPI 3.5英寸 480x800 240DPI
    • 生产商 设备 分辨率 尺寸 DPI Apple iPhone 480x320 3.5 163 Apple iPhone4 960x640 3.5 326 Apple iPad 1024x768 9.7 123BlackBerry PlayBook 1024x600 7 170 HTC Evo 800x480 4.3 217Motorola Atrix 960x540 4 275Motorola Xoom 1280x800 10.1 150Samsung GalaxyTab 1024x600 7 170
    • siteIwanna buildamobilewebapp…
    • jQuery MobileFramework http://jquerymobile.com/
    • 自适应的Web UIjQuery MobileFramework http://jquerymobile.com/
    • WebUI应当具备设备自适应性
    • 59% 在PC中也会访问访问者 同样的网站使用不同设备 访问同一网站
    • 在mobile34% 中也会访 问同样的访问者 网站使用不同设备 访问同一网站
    • “ResponsiveWebDesign”http://www.alistapart.com/articles/responsive-web-design
    • 移动设备中打开
    • 主要内容无差别,两者是同一套代码
    • 不同的设计,不同的实现,两套代码 看起来像不同的网站
    • 一套代码,自适应UI针对不同的终端各自实现
    • How to Code ?
    • WebKitiOS,Android,Palm WebOS,NokiaQtBada,Symbian &newBlackberryOpera Mini JavaME…
    • <!—显示器样式--><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
    • 测试你的设备显示参数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"> <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 %
    • 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
    • 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
    • 在小屏幕中等比缩小不自然的字体和布局 http://caipiao.taobao.com
    • 较少视觉元素的页面等比缩小 视觉体验无差异 http://www.flickr.com
    • 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
    • LessFramework.css http://lessframework.com/
    • 68px 24pxLessFramework.css栅格系统
    • PC:68x10+24x9+48x2=992
    • Ipad:68x8+24x7+28x2=768
    • Iphone:68x3+24x2+34x2=320
    • Iphone:68x5+24x4+22x2=480
    • 设计原则:灵活的 Outermargin 以适应更多分辨率 LessFramework.css
    • 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
    • 触手可及 EasytoTouch功能减法FewerFeatures
    • Desktop Tablet Mobile 0 0 0 1 1 13 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 13 5 3 2 2 2 6 4 4 3 8 5 6 4 7 7 8 5 重点 >次重点 >非重点
    • Desktop Tablet 0 0 1 13 5 3 2 2 6 4 4 8 5 6 7 7 8 Mod5:重要程度降低?
    • Desktop Tablet 0 0 1 remove 13 5 3 2 2 6 4 4 8 7,8… 7 小屏幕优先展示重点内容 操作区引导至单独页面完成
    • 功能减法
    • 功能减法
    • 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
    • 视觉:20%视觉:50%功能:50% 功能:80%
    • Mobile:Focus Desktop:Overview
    • 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
    • 960px520px 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% 图文混排容器的宽度适应 &高度自增
    • 定宽不定高容器的自适应?
    • MasonryLayouthttp://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
    • To be continue…
    • refhttp://mediaqueri.eshttp://lessframework.comhttp://masonry.desandro.comhttp://www.slideshare.net/helgetenno/mobile -abilities-maphttp://www.w3.org/TR/CSS2/media.html
    • @jayli F2E & Translatorhtt[p://jayli.github.com bachi@taobao.com