Responsive Web Design 響應式網頁設計
22
資資資資資資資資資 Responsive Web Design 資資資資資資資 06/07/2022 資資資資資資資
description
Transcript of Responsive Web Design 響應式網頁設計
資訊規劃組組內分享
Responsive Web Design
響應式網頁設計
04/10/2023
資訊工業策進會
OVERVIEW① Responsive Web
Design• What?• Why?• How?• 優缺點
② Popular Frameworks• Twitter Bootstrap• jQuery Mobile
Good UI Design
① 一致性具有一致性的設計模式及視覺風格，能為用戶建立起完整一致的心智模型，使產品更加易用，提升整體體驗。
② 對比透過配色、尺寸和佈局的調整，使界面元素在視覺上與其他元素形成鮮明的對比。
③ 佈局為界面設定視覺規範，讓用戶的視線可以跟隨內容本身所界定出的路徑自然的移動，增強界面的視覺平衡。如： 960 Grid system
一些設計上的建議
④ 層級化最重要的東西要比相對次要的東西更容易被看到。著重突出那些與核心功能與常見用例相關的交互元素。
⑤ 目標用戶不同類型的用戶所青睞的界面風格也有所不同。建築、設計、時尚等領域正流行扁平化風格，而一般用戶則更容易接受相對傳統的擬物化界面。
⑥ 反饋當點擊行為發生時，要立刻向用戶提供清晰明確的視覺反饋。
⑦ 降低「阻力」無論採用怎樣的視覺風格，都要使界面盡量簡化，減少用戶完成目標所需執行的操作，打造更加流暢的交互體驗。任何一點障礙或額外的步驟都會提高操作成本，增加功能的複雜度。
Responsive Web Design
What?
• Ethan Marcotte 在 2010 年於發表的文章中提出 Responsive Web Design 術語。
• RWD出處來源• Ethan Marcotte
官網
• Responsive Web Design (RWD) ，通常翻譯做 「響應式網頁設計」或「自適應網頁設計」。
• 網站對於各種設備 ( 桌機、筆電、平版、手機 ) 瀏覽網頁時，能對應不同解析度而改變網頁排版方式，以得到最佳的視覺效果。
• 網頁根據到訪裝置的特點而使用不同 CSS 樣式規則，最常用的是瀏覽器的寬度。
• 頁面元素使用相對單位如百分比或 EM 調整大小，而不是絕對的單位如像素或點。
• 影像也以相對單位調整大小，以防止超出包含它們的容器之外。
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的詳細說明
RWD 的優點• 開發成本相對比 Native App 低
RWD 通常可以直接利用 Media Query 直接開發搭配行動裝置的 CSS ，與 Native App 的成本比較下來較低。
• 不需要另外製作網頁RWD 不需要再為不同裝置另外製作專屬網頁，直接使用CSS屬性來對不同解析度做調整即可。
• 能同時針對不同裝置分別調整通常只要利用 CSS3 的 Media Queries 方法來實做，不論是小螢幕、大螢幕、超高解析度的 Retina Display 都能做 RWD 。
RWD 的缺點• 載入速度的考量因為使用同一份 HTML & CSS ，所以不論是使用手機或PC 上網，都是存取同一份網頁。即使針對小螢幕將畫面設計的簡潔，實際上只是把元素隱藏，故網頁檔案大小其實是一樣的。所以除了畫面的合理性外，也需考慮行動裝置網路速度的議題。
• Mobile ，需再花心思設計手機上的操作是與傳統 PC是完全不一樣的，所以如果要有一個好的 Mobile User Experience 的話，還是必須針對 Mobile這塊去設計整個操作及動線流程才是最理想的。
DEMO
Some Excellent RWD Websites• WWF• Disney• Forefathers Gro
up• The Boston Glo
be• Harvard Univer
sity• Food Sense• Starbucks• Time Magazine
• RWD 被 .net Magazine 列為 2012 年度頂尖網頁設計趨勢第二名。(第一名是 Progressive Enhancement ) 來源
• 2012 年底 Google 在其「 Webmaster's Guide 」中建議將 RWD列入網頁設計。來源
Frameworks
Twitter Bootstrap 使用部份 HTML5/CSS3 技術 ( 瀏覽器不能太舊 )
Visual Studio 2013 ASP.NET 專案預設使用 Bootstrap 提供了：• 網格系統 (支援 RWD)• 佈局• 字體樣式• 多媒體展現• 表格• 導覽• 警告與提示• 縮圖• ……and more
BootstrapBootstrap中文教學
類似的套件：
• 以 jQuery 為核心• 輕量化檔案• Html5 Markup-driven• 自動切換排版• 支援滑鼠與觸碰事件• WAI-ARIA( 無障礙設計 )• 強大的佈景主題系統• ASP.NET MVC 的支援• 支援市面上大部分行動裝置• 畫面的一致化• 多樣化的 UI
jQuery Mobile Demo
OneMore Thing…
Parallax Scrolling
透過滑鼠的捲動，配合網頁多層背景以不同的速度移動，從而形成立體的運動效果，帶來非常出色的視覺和交互體驗。
• Apple MAC Pro• Nestle KitKat• Q Music Titanic• Ben the Bodyguar
d• Firefox OS
• Audi A3 Sportback• Every Last Drop• Pi’s Epic Journey• Wedding Invitatio
n I• Wedding Invitatio
n II
AQ
