1 / 26

RWD 概念

RWD 概念. Wilson Weng. 傳統網站、手持裝置網站、 WebApp 在設計上要考量的方向. 寬度 使用者互動 動畫 技術. 傳統網站設計. 寬度：因應桌上型電腦的螢幕解析度，網站版面的寬度多半為 800px 、 960px 、 1200px 等 。 使用者 互動介面：滑鼠。 動畫： Flash Player 。 技術： xhtml 、 CSS2.1 、 Flash 技巧。 . 手持裝置網站. 分成 手機、平版電腦 之外 考慮 直式還是橫式的 顯示 設計者 必須通盤考量尺寸變化對 App 的影響。.

morwen
Download Presentation

RWD 概念

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. RWD 概念 Wilson Weng

  2. 傳統網站、手持裝置網站、WebApp在設計上要考量的方向傳統網站、手持裝置網站、WebApp在設計上要考量的方向 • 寬度 • 使用者互動 • 動畫 • 技術

  3. 傳統網站設計 • 寬度：因應桌上型電腦的螢幕解析度，網站版面的寬度多半為800px、960px、1200px等。 • 使用者互動介面：滑鼠。 • 動畫：Flash Player。 • 技術：xhtml、CSS2.1、Flash技巧。

  4. 手持裝置網站 • 分成手機、平版電腦之外 • 考慮直式還是橫式的顯示 • 設計者必須通盤考量尺寸變化對App的影響。 768x1024 / 1024x1280 etc. 320x480 / 480x800 etc.

  5. WebApp網站 • 如同手持裝置網站 • 只是將網站透過PhoneGap打包為App • 在設計上的考量和手持裝置網站完全相同。

  6. 解析度混亂 • Android手機、平板解析度過多 • ui設計師、程式設計師無所適從 資料來源：http://www.techbang.com/posts/14315-android-fragmentation-visualized

  7. 解析度混亂 • 2012 年中約有 3,997 種 Android 裝置，到了 2013 年中卻提升到 11,868 種 • Android 智慧型手持裝置越出越多，但前十名卻都以 Samsung 產品為主，佔有率更是接近 5 成

  8. 螢幕尺寸 android vsiphone Android 的螢幕尺寸太多， 開發程式時將遭遇不少挑戰 iOS : 4

  9. 解法 • 傳統 • 新思維: RWD • 參考： • http://fundesigner.net/responsive-web-design-explain/ • 例子： • http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

  10. 以例子來解釋RWD

  11. 以例子來解釋RWD • 安裝輔助套件：firesizer • 分析畫面的臨介點， • 例如：寬400px時，畫面臨介點為400px。 • 分析該網站的臨界點為400px、600px、1300px，所以版面Layout建立了四個畫面。

  12. 1300px以上版面Layout分析 • 外圍區有兩欄。 • 左欄內為Logo區。 • 右欄內由上而下為Navigation區、Content區及Footer區。 • Content區有六欄。

  13. 600px-1300px版面Layout分析 • 外圍區有兩欄。 • 左欄內有Logo區和Navigation區。 • 右欄內由上而下有Content區及Footer區。 • Content區有三欄兩列。

  14. 400-600px版面Layout分析 • 外圍區有一欄。 • 一欄內由上而下有Navigation區、Logo區、Content區及Footer區。 • Content區有三欄兩列。

  15. 實機觀測

  16. iPad橫式1024x768 • 版面出現在600-1300px間

  17. iPad直式768x1024 • 版面出現在600-1300px間

  18. iPhone5橫式568×320 • 版面出現在400-600px間

  19. iPhone5直式320x568 • 版面出現在0-400px

  20. iPhone4 橫式480×320 • 版面出現在400-600px間

  21. iPhone5直式320x480 • 版面出現在0-400px

  22. 練習 • http://www.lukew.com/ • 找出臨界值 • 思考需要幾種layout? • 思考各Layout的navigator, content , footer , logo如何配置？ • Logo大小是否要改變？ • 單一欄時哪些區塊該在愈上面？

  23. RWD 優缺點 • 優點 • 開發成本比 Native App 低 • 用 Media Query 直接寫搭配行動裝置的 CSS ，與 Native App 的成本比較下來較低。 • 不需要重寫 HTML • 直接使用 CSS 屬性來對不同裝置做調整即可。 • 可以同時針對許多不同裝置分別調整 • 通常都是利用 CSS3 的 Media Queries 方法來實現，而你可以使用這項 CSS 來對許多裝置做設計

  24. RWD 優缺點 • 缺點 • 載入速度的問題 • 在 Mobile 上，要再花心思做設計 • 思考各Layout的navigator, content , footer , logo如何配置？ • 順序？

  25. RWD的實作方式 • CSS Grid System 與 CSS Fluid Grid System 網頁版面 • 大宗！參考960gs或golden grid • CSS Image max-width （Flexible image）調整圖片 • 太累！ • CSS3 Media Queries • 大宗！ • 參考 http://fundesigner.net/css3-media-queries/

  26. Q & A Thank you. Wilson Weng

More Related