twMVC#13 | RWD不是你想的那樣！
0 likes740 views
文档介绍了响应式网页设计（RWD）的概念、优缺点及实施方法，强调了在不同设备上呈现一致性的重要性。虽然RWD可减少开发成本和管理难度，但也面临加载速度慢和旧浏览器兼容性差等挑战。设计师需考虑屏幕尺寸、内容简化及使用适合的工具进行原型设计，以达到最佳用户体验。
twMVC#13 | RWD不是你想的那樣！
- 3. Responsive Web Design 3 • 中文翻譯為 響應式網頁 / 自適應網頁 • 配合手機、平板、電腦螢幕各種不同平台，以不同 畫面呈現，讓使用者可以舒適瀏覽的網頁設計
- 4. 為什麼要RWD? 4 • 比起APP開發，費用省很大! • 一個網頁全平台通吃，不用考慮是哪個系統或載具 • 工程師只要維護一份HTML即可，管理成本也比較 小
- 5. 有利必有弊…缺點是 5 • 所有的載具都讀取同一份網頁，手機或平板效能比 較差的載具，會有讀取速度較慢的議題 • 內容影響整體閱讀，不能有過於複雜的排版與內容 • 舊瀏覽器支援度比較差 (ex : IE7 IE8 IE9) • 設計師會做到脾氣很差…
- 6. RWD就像… 6
- 7. 設計成衣一樣! 7
- 11. 如何開始?? 11
- 14. 就等比例縮放到全部平台呀! 14
- 17. 解析度是?? 17 DPI = Dot per inch 每英吋內含幾個點(像素/px)DPI = Dot per inch 每英吋內含幾個點(像素/px) 1英吋 = 2.54公分 <- 2.54 cm -> <- 2.54 cm -> <- 2.54 cm -> 3 dpi = 3 points per inch 8 dpi = 8 points per inch 16 dpi = 16 points per inch
- 18. 手機/平板/電腦螢幕 常見尺寸 18 • 320x480 (2:3) • 480x800 (3:5) • 540x960 (16:9) • 640x960 (2:3) • 720x1280 (16:9) • 768x1280 (3:5) • 1080x1920 (16:9) 手機 • 600x800 (4:3) • 600x1024 (75:128) • 768x1024 (4:3) • 800x1280 (16:10) • 1536x2048 (4:3) • 1920x1080 (16:9) 平板 • 1280x800 (16:10) • 1280x1024 (4:3) • 1366x768 (16:9) • 1440x900 (16:10) • 1680x1050 (16:10) • 1920x1080 (16:9) • 2560x1440 (16:9) • 2880x1800 (16:10) 電腦螢幕
- 22. 破壞總是 比建設來的簡單 22
- 24. 由大到小 由繁化簡 24
- 27. 27 拿出你的腦袋 和 紙 跟 筆 把想到的畫下來
- 29. 29 再選擇順手的工具繪製出網站的prototype • Word or PowerPoint • Axure http://www.axure.com/ • POP (prototyping on paper) https://popapp.in/
- 32. 32 內容也是決定你的網站RWD能否製作的關鍵 • 簡單而清楚的內容 • 明確可拆分的區塊 • 內容區塊重要性的排序 • 依平台特性與使用者需求取捨功能
- 33. 各平台版面配置重點 33
- 34. 34 電腦螢幕 • 考量一個畫面中 能看見的範圍去 擺放 • 以最小畫面高度 比較常用的768px 做為基礎高 • 過寬的螢幕兩側 適當留白 768px
- 35. 35 平板 • 4:3的畫面比例為主流，寬度可以 1024px做為一個思考點，寬度其 實已經接近平常螢幕的寬度了。 • 平板可以翻轉!所以要考量橫直兩 種畫面的效果 4:3
- 36. 36 手機 • 簡單 簡單 再簡單 • 畫面很小，怎麼在 有限範圍中呈現最 精華的內容 • 選單通通收起來 固定選單/側欄選單 • 向量圖示 • 按鈕大小，最小不 能小於44px x 44px
- 37. 排版要點 37
- 41. 41 裝置寬度 / device-width • 螢幕解析度不一定等於device-width ex: iPhone 5 解析度 640 x 960 裝置寬度 320 • 以螢幕解析度作為device-width，有可能進入大 部分網站時都看到縮小的畫面 <meta name="viewport" content="width=device-width; initial- scale=1.0; maximum-scale=1.0; user-scalable=0;">
- 42. 42 單位 • %百分比 • em字體高 • rem根字體高
- 49. 49 工具網站 • Screen siz.es / 常用裝置解析度與裝置寬度表 http://screensiz.es • IcoMoon / 免費 icon font http://icomoon.io • Web Color Data / 配色收集網站 http://webcolourdata.com/
- 51. Q & A 51
- 53. http://mvc.tw 好活動需要支持 感謝 KKTIX 贊助 twMVC 活動報名平台 53
- 55. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用姓名標示-非商業性-相同方式分享 3.0 台灣授權。閱讀本授權條款，請到 http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信至Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. h t t p : / / m v c . t w