Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

深入淺出RWD自適應網頁設計

27,224 views

Published on

2018.4.19更新通知:如您想獲得2018年更新版本,可付費觀看線上課程喔!
https://www.tibame.com/course/325
------
2014年3月到某單位分享RWD的簡報,針對他們需求做的規劃,從概念到實務寫法,從自刻到使用框架工具。本簡報適合閱讀之對象:設計師或網站企劃。

Published in: Design

深入淺出RWD自適應網頁設計

  1. 1. A Guide to Responsive Web Design 深入淺出自適應網頁設計 主講者:Marie Chang
  2. 2. 什麼是 Responsive Web Design
  3. 3. 是因應手機上網趨勢而產生的解決方案
  4. 4. 是一種能符合各種螢幕尺寸的網站設計方法
  5. 5. 是根據裝置螢幕寬度而調用不同CSS規則
  6. 6. 我還是不懂 廢話太多 為什麼要這樣設計 這樣設計有什麼好處 以後的網站都要朝這方向設計嗎 ( 這是要設計師的命嗎 )
  7. 7. RWD Web UX Mobile 網站 使用者經驗 手機上網 因應潮流/趨勢提供使用者更佳的瀏覽體驗
  8. 8. 縮短開發不同螢幕裝置的時程和成本 = 1 WEB= 1 WEB + 1 Native App for Mobile ( + 1 Native App for Pad ) $ 50,00,00 ↑ $ 10,00,00
  9. 9. 這樣有懂嗎?
  10. 10. 但這一帖非靈丹妙藥
  11. 11. Responsive Web Design 的缺點
  12. 12. 1) 瀏覽器兼容的問題 2) 效能問題 IE8 不支援media queries, IE6不支援max(min)-width, 這兩大項是RWD的CSS必用規則 解法:使用網路上能降級的js套件或多花心思自寫css hack 網站結構較複雜,通常有大量圖片或資源,即使符合行動裝置來流覽, 在行動頻寬下,等待下載的時間長,檔案也過大。 解法:RWD + Server Side Solution,透過伺服器端判斷裝置後調配 資源
  13. 13. 你目前網站有多少流量來自行動裝置? 你的網站是否需要自適應設計以服務行動裝置使用者? 你們是否有企劃或UX師會共同參與設計? 若追求網站效能,是否具有程式設計師協同工作? 拿起手機/平板流覽自己公司網站,你感受的使用經驗為何? 你有使用智慧型手機或平版的習慣嗎? 先提出問題,再決定是否採用RWD
  14. 14. Responsive Web Design 工作流程
  15. 15. 發現 資訊 架構 內容 整理 草稿 原型 設計 視覺 設計 測試 討論 NO 完成! RWD完整流程
  16. 16. Responsive Web Design 規劃首則
  17. 17. Content first Mobile first 內容優先 行動裝置優先
  18. 18. 內容規劃-網頁區塊模組化 線上demo: http://www.philiphousenyc.com/ http://mashable.com/ http://stuffandnonsense.co.uk/
  19. 19. 範例:4 col → 2 col → 1 col
  20. 20. Responsive Web Design 牛刀小試時間
  21. 21. 任務:5分鐘,畫出手機上的樣式或排序吧! 1 2 3 4 5
  22. 22. Responsive Web Design 視覺設計要點
  23. 23. 1) 一致性 2) 視覺上的反饋設計 常用對比顏色去突顯(例如選單和內文背景色對比),全站色彩規 劃一致,標題與內文要易於辨識,因為小的行動裝置不需要太多 裝飾或花俏設計,而是以易於閱讀、易於瀏覽為優先。 若有餘力則進一步考量行動裝置與電腦的不同。 例如按鈕在行動裝置中,按下去才有效果,hover在行動裝置中 則無用。例如自動捲動的圖片,除了在電腦能點選左右鍵換圖外, 是否支援touch時左右滑動。 http://mediaqueri.es/ 有很多範例
  24. 24. Responsive Web Design 實作技術
  25. 25. Meta Tag寫法 CSS Media Queries 自適應的Grid 自適應的image 隱藏或顯示content 完成以上四點就是RWD!
  26. 26. Meta Tag: Viewport 沒設viewport 有設viewport
  27. 27. Meta Tag: Viewport 對瀏覽器說:viewport規則套用,寬度設定為device-width,且初始縮放數值為1 IE8或更舊的IE則可CDN javascript來解決: <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script> <![endif]-->
  28. 28. Media Queries max寫法:當螢幕寬度600像素以下時,class的背景是紅色的 Min寫法:當螢幕寬度超過900像素時, class的背景是灰色的 混合寫法:當螢幕寬度在600~900像素時, class的背景是深灰色的
  29. 29. @media screen and (max-width: 980px) { /* style */ } @media screen and (max-width: 720px) { /* style */ } @media screen and (max-width: 480px) { /* style */ } Media Queries
  30. 30. Media Queries : Breakpoint @media screen and (min-device-width : 768px) and (max-device-width : 1024px) Device寫法:當螢幕寬度超過900像素時, class的背景是灰色的
  31. 31. 自適應的Grid,用%或em,不用px
  32. 32. 自適應的image img { max-width: 100%; } 基於效能(選擇性載入大圖)解決方案: 使用別人撰寫好的 rwd-images.js 搭配服用 最好讓圖片都隨著外圍容器(Grid)縮放
  33. 33. 隱藏/顯示content @media screen and (max-width: 980px) { .col { with: 23.4%; } } @media screen and (max-width: 720px) { .col { with: 23.4%; } } @media screen and (max-width: 480px) { .col { display: none; } }
  34. 34. 結論 剩下就是看你CSS怎麼刻了
  35. 35. Responsive Web Design Framework RWD框架快速開發技術
  36. 36. Bootstrap,mobile web 或 RWD前端框架 http://getbootstrap.com/
  37. 37. 瀏覽器的支援:不支援IE8
  38. 38. http://v3.bootcss.com/ 別怕,有簡體中文版,讓我們直接看看
  39. 39. 框架必熟的撇步 1. 搞懂Grid System 2. 從套用template開始著手 3. 熟悉常用的class name 4. 熟悉顏色規則 5. 既然有vertical,一定有horizontal 6. 既然有Left就會有right, center 7. 特效請愛用jQuery 相關Plugin
  40. 40. Bootstrap插件大觀園
  41. 41. Bootstrap好用工具與資源 Bootable Template 網站範例 Boostrap Landing page 登陸頁應用 Bootstrap 3 PSD 視覺設計psd檔 Bootstrap 3 Illustrator Template視覺設計ai檔 Free theme for Boostrape 免費樣版 Bootsnipp 現成小元件套用
  42. 42. Responsive Web Design 好用輔助工具介紹
  43. 43. 原型/草圖工具 (為什麼要畫3次 Wireframe?) Responsive Web Design Sketch Sheets http://balsamiq.com/ https://moqups.com 格線工具 http://simplegrid.info/ http://www.columnal.com/ SUSY 企劃和格線的好用工具
  44. 44. 測試工具 http://mattkersley.com/responsive/ (線上) http://www.responsinator.com/ (線上) Opera Mobile Classic Emulator (安裝到電腦) 沒有太多實機能測試時的虛擬取代方案
  45. 45. 謝謝指教! 學習愉快! THANK YOU THANK YOU 3Q

×