Mobile UI design and Developer

  • 10,066 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,066
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
413
Comments
0
Likes
39

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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