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                                       ...
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     960x...
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="style...
<!—显示器样式 & 显示器最大宽度480px--><link rel="stylesheet"     type="text/css”     media="screen and (max-device-width:480px)"     h...
/* 显示器最大宽度480px */@media screen and (max-device-width: 480px) {     .column {          float: none;     }}                ...
测试你的设备显示参数http://virtuelvis.com/gallery/mediaqueries/
<!doctype html><html><head>     <meta charset="utf-8">     <meta name="viewport"          content="width=device-height"/> ...
<!doctype html><html><head>     …     <!--[if IE 6]>          <link href=“ie6.css” />     <![endif]-->     …     <!--[if l...
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   ...
Desktop               Tablet              Mobile        0                     0                  0        1               ...
Desktop               Tablet        0                     0        1                         13             5   3        2...
Desktop                    Tablet        0                         0        1         remove              13             5...
功能减法
功能减法
等比缩放栅格模式功能减法修饰减法流式布局纯语义化
视觉: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 an...
浮动容器定宽     定高
50%    50%100%   图文混排容器的宽度适应 &高度自增
定宽不定高容器的自适应?
MasonryLayouthttp://masonry.desandro.com
等比缩放栅格模式功能减法修饰减法流式布局纯语义化
焦点图(设备检测)              语义化标签             更好的可读性标题 &导语正文图片(设备检测) 正文文本  兼容的多媒体
<header>     <h1>             <a href=“#”>                  <strong>I</strong> love <em>u</em>             </a>           ...
<div class="grid-*3">     <div class=“g-aside”>左边栏</div>     <div class="g-main">          <div class=“g-wrap”>主内容</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    -...
@jayli       F2E & Translatorhtt[p://jayli.github.com      bachi@taobao.com
Mobile UI design and Developer
Mobile UI design and Developer
Mobile UI design and Developer
Mobile UI design and Developer
Mobile UI design and Developer
Mobile UI design and Developer
Upcoming SlideShare
Loading in...5
×

Mobile UI design and Developer

10,371

Published on

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

Published in: Technology, Design
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,371
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
423
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

Mobile UI design and Developer

  1. 1. Design &Develop拔赤 – F2E@Taobao2011-8-19
  2. 2. @jayli F2E & Translatorhtt[p://jayli.github.com bachi@taobao.com
  3. 3. ongoingprojecthttp://ued.taobao.com/javascript http://jayli.github.com/jswebapps @jayli F2E & Translator htt[p://jayli.github.com bachi@taobao.com
  4. 4. Long time ago…
  5. 5. Mobile Web is coming
  6. 6. 如今有350亿部移动终端连接至Internet - EricSchmidt,Google
  7. 7. 新的挑战
  8. 8. 主流分辨率
  9. 9. 像素 像素 + DPI
  10. 10. 3.5英寸320x480160DPI 3.5英寸 480x800 240DPI
  11. 11. 生产商 设备 分辨率 尺寸 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
  12. 12. siteIwanna buildamobilewebapp…
  13. 13. jQuery MobileFramework http://jquerymobile.com/
  14. 14. 自适应的Web UIjQuery MobileFramework http://jquerymobile.com/
  15. 15. WebUI应当具备设备自适应性
  16. 16. 59% 在PC中也会访问访问者 同样的网站使用不同设备 访问同一网站
  17. 17. 在mobile34% 中也会访 问同样的访问者 网站使用不同设备 访问同一网站
  18. 18. “ResponsiveWebDesign”http://www.alistapart.com/articles/responsive-web-design
  19. 19. 移动设备中打开
  20. 20. 主要内容无差别,两者是同一套代码
  21. 21. 不同的设计,不同的实现,两套代码 看起来像不同的网站
  22. 22. 一套代码,自适应UI针对不同的终端各自实现
  23. 23. How to Code ?
  24. 24. WebKitiOS,Android,Palm WebOS,NokiaQtBada,Symbian &newBlackberryOpera Mini JavaME…
  25. 25. <!—显示器样式--><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
  26. 26. <!—显示器样式 & 显示器最大宽度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
  27. 27. /* 显示器最大宽度480px */@media screen and (max-device-width: 480px) { .column { float: none; }} CSS 条件样式 http://www.w3.org/TR/CSS2/media.html
  28. 28. 测试你的设备显示参数http://virtuelvis.com/gallery/mediaqueries/
  29. 29. <!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>…
  30. 30. <!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>
  31. 31. How to Design ?
  32. 32. 像素 百分比pixel %
  33. 33. 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
  34. 34. 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
  35. 35. 在小屏幕中等比缩小不自然的字体和布局 http://caipiao.taobao.com
  36. 36. 较少视觉元素的页面等比缩小 视觉体验无差异 http://www.flickr.com
  37. 37. 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
  38. 38. LessFramework.css http://lessframework.com/
  39. 39. 68px 24pxLessFramework.css栅格系统
  40. 40. PC:68x10+24x9+48x2=992
  41. 41. Ipad:68x8+24x7+28x2=768
  42. 42. Iphone:68x3+24x2+34x2=320
  43. 43. Iphone:68x5+24x4+22x2=480
  44. 44. 设计原则:灵活的 Outermargin 以适应更多分辨率 LessFramework.css
  45. 45. 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
  46. 46. 触手可及 EasytoTouch功能减法FewerFeatures
  47. 47. 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 重点 >次重点 >非重点
  48. 48. 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 重点 >次重点 >非重点
  49. 49. Desktop Tablet 0 0 1 13 5 3 2 2 6 4 4 8 5 6 7 7 8 Mod5:重要程度降低?
  50. 50. Desktop Tablet 0 0 1 remove 13 5 3 2 2 6 4 4 8 7,8… 7 小屏幕优先展示重点内容 操作区引导至单独页面完成
  51. 51. 功能减法
  52. 52. 功能减法
  53. 53. 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
  54. 54. 视觉:20%视觉:50%功能:50% 功能:80%
  55. 55. Mobile:Focus Desktop:Overview
  56. 56. 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
  57. 57. 960px520px 200px 200px 20px 20px 固定布局
  58. 58. 90%50% 20% 20% 5% 5% 流式布局
  59. 59. 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; }}
  60. 60. 浮动容器定宽 定高
  61. 61. 50% 50%100% 图文混排容器的宽度适应 &高度自增
  62. 62. 定宽不定高容器的自适应?
  63. 63. MasonryLayouthttp://masonry.desandro.com
  64. 64. 等比缩放栅格模式功能减法修饰减法流式布局纯语义化
  65. 65. 焦点图(设备检测) 语义化标签 更好的可读性标题 &导语正文图片(设备检测) 正文文本 兼容的多媒体
  66. 66. <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> 语义化编码
  67. 67. <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> 善用布局
  68. 68. Would U like to Know More ?
  69. 69. 1. 手持设备优先2. 语义化标签3. @media检测4. @media&JavaScript渐进增强5. 正文自适应6. 图片尺寸压缩7. Webkit vs OperaMini
  70. 70. To be continue…
  71. 71. refhttp://mediaqueri.eshttp://lessframework.comhttp://masonry.desandro.comhttp://www.slideshare.net/helgetenno/mobile -abilities-maphttp://www.w3.org/TR/CSS2/media.html
  72. 72. @jayli F2E & Translatorhtt[p://jayli.github.com bachi@taobao.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×