Responsive Web Design 響應式網頁設計
Download as PPTX, PDF7 likes5,052 views
文档介绍了响应式网页设计（RWD）的概念、优势和劣势，以及流行框架（如Twitter Bootstrap和jQuery Mobile）的应用。RWD能够自动调整网页布局以适应不同设备，提供更好的用户体验，但也需考虑加载速度和移动设备的用户界面设计。文中还提到了一些优秀的RWD网站示例，展示了其在当今网页设计中的重要性。
Responsive Web Design 響應式網頁設計
- 2. OVERVIEW Responsive Web Design • What? • Why? • How? • 優缺點 Popular Frameworks • Twitter Bootstrap • jQuery Mobile
- 4. 一致性 具有一致性的設計模式及視覺風格，能為用戶建立起完整 一致的心智模型，使產品更加易用，提升整體體驗。 對比 透過配色、尺寸和佈局的調整，使界面元素在視覺上與其 他元素形成鮮明的對比。 佈局 為界面設定視覺規範，讓用戶的視線可以跟隨內容本身所 界定出的路徑自然的移動，增強界面的視覺平衡。 如：960 Grid system 一些設計上的建議
- 5. 層級化 最重要的東西要比相對次要的東西更容易被看到。著重突 出那些與核心功能與常見用例相關的交互元素。 目標用戶 不同類型的用戶所青睞的界面風格也有所不同。建築、設 計、時尚等領域正流行扁平化風格，而一般用戶則更容易 接受相對傳統的擬物化界面。 反饋 當點擊行為發生時，要立刻向用戶提供清晰明確的視覺反 饋。 降低「阻力」 無論採用怎樣的視覺風格，都要使界面盡量簡化，減少用 戶完成目標所需執行的操作，打造更加流暢的交互體驗。 任何一點障礙或額外的步驟都會提高操作成本，增加功能 的複雜度。
- 7. What?
- 8. • Ethan Marcotte在2010年於發表的文章中提 出Responsive Web Design術語。 • RWD出處來源 • Ethan Marcotte官網
- 9. • Responsive Web Design (RWD)，通常翻譯做 「響應式 網頁設計」或「自適應網頁設計」。 • 網站對於各種設備(桌機、筆電、平版、手機) 瀏覽網頁時， 能對應不同解析度而改變網頁排版方式，以得到最佳的視 覺效果。 • 網頁根據到訪裝置的特點而使用不同 CSS 樣式規則，最常 用的是瀏覽器的寬度。 • 頁面元素使用相對單位如百分比或 EM 調整大小，而不是 絕對的單位如像素或點。 • 影像也以相對單位調整大小，以防止超出包含它們的容器 之外。
- 11. How? • CSS3 Media Queries • HTML(5) / CSS skills • Use common CSS Frameworks • Progressive Enhancement or Graceful Degradation* • Design sense (還是讓專業的來吧) // 在 PC 上的顯示 .box { width: 1000px; } // Media Query，當寬度小於767px時載入下面這段CSS : @media (max-width: 767px) { .box { width: 100%; } } ※關於Progressive Enhancement/Graceful Degradation的詳細
- 12. RWD的優點 • 開發成本相對比Native App低 RWD通常可以直接利用Media Query 直接開發搭配行動裝 置的 CSS，與Native App的成本比較下來較低。 • 不需要另外製作網頁 RWD不需要再為不同裝置另外製作專屬網頁，直接使用 CSS屬性來對不同解析度做調整即可。 • 能同時針對不同裝置分別調整 通常只要利用CSS3的Media Queries方法來實做，不論是 小螢幕、大螢幕、超高解析度的Retina Display都能做 RWD。
- 13. RWD的缺點 • 載入速度的考量 因為使用同一份HTML & CSS ，所以不論是使用手機或 PC上網，都是存取同一份網頁。即使針對小螢幕將畫面 設計的簡潔，實際上只是把元素隱藏，故網頁檔案大小其 實是一樣的。所以除了畫面的合理性外，也需考慮行動裝 置網路速度的議題。 • Mobile，需再花心思設計 手機上的操作是與傳統PC是完全不一樣的，所以如果要 有一個好的Mobile User Experience的話，還是必須針對 Mobile這塊去設計整個操作及動線流程才是最理想的。
- 14. DEM O
- 15. Some Excellent RWD Websites• WWF • Disney • Forefathers Group • The Boston Globe • Harvard University • Food Sense • Starbucks
- 16. • RWD 被 .net Magazine 列為 2012 年度頂尖網 頁設計趨勢第二名。 (第一名是Progressive Enhancement ) 來源 • 2012年底 Google 在其「Webmaster's Guide」 中建議將RWD列入網頁設計。來源
- 17. Frameworks
- 18. Twitter Bootstrap 使用部份 HTML5/CSS3 技術(瀏覽器不能太舊) Visual Studio 2013 ASP.NET 專案預設使用 Bootstrap 提供了： • 網格系統(支援RWD) • 佈局 • 字體樣式 • 多媒體展現 • 表格 • 導覽 • 警告與提示 • 縮圖 • ……and more Bootstrap Bootstrap中文教學 類似的套件：
- 19. • 以 jQuery 為核心 • 輕量化檔案 • Html5 Markup-driven • 自動切換排版 • 支援滑鼠與觸碰事件 • WAI-ARIA(無障礙設計) • 強大的佈景主題系統 • ASP.NET MVC 的支援 • 支援市面上大部分行動裝置 • 畫面的一致化 • 多樣化的 UI jQuery Mobile Demo
- 20. One More Thing …
- 21. Parallax Scrolling 透過滑鼠的捲動，配合網頁多層背景以不同的速度 移動，從而形成立體的運動效果，帶來非常出色的 視覺和交互體驗。 • Apple MAC Pro • Nestle KitKat • Q Music Titanic • Ben the Bodyguard • Firefox OS • Audi A3 Sportback • Every Last Drop • Pi’s Epic Journey • Wedding Invitation I • Wedding Invitation II
- 22. AQ