為什麼需要響應式設計？

DailyTech 預測 2015 年移動網民將超越桌面。手機、平板、智慧電視等多裝置並存，響應式設計讓同一內容隨裝置動態調整佈局與樣式，確保優質體驗。

何時適合採用響應式？

• 心裡沒譜：新建移動站/原生 App 風險大，不如先強化既有站彈性，覆蓋主流裝置。
• 想省成本：響應式成本約比普通站高 20-30%，但遠低於獨立移動站或原生 App，維護更輕鬆。
• 面向未來裝置：傳統移動站針對特定規格，新裝置層出不窮需持續維護；響應式按環境規格判斷呈現，適應性強。

更多策略選擇參考《走出移動互聯網迷宮——網站移動化方法策略》。

響應式設計流程四步驟（Macdonald 酒店網站實例）

1. 用戶研究與裝置規格預估
2. 製作線框原型
3. 視覺設計
4. 前端構建

步驟 1：用戶研究與裝置規格預估

• 調研用戶裝置分佈，預估典型響應斷點
• 關鍵問題：不同裝置用戶目標差異有多大？
• 避免刻板印象：移動用戶非全「高目標導向」，平板/手機在舒適環境下瀏覽比例上升，功能需求差異在縮小
• 功能繁雜站點需按裝置類型做功能/內容優先級排序，指導 CSS 響應規則

步驟 2：製作線框原型

線框圖規劃視覺背後的邏輯結構。本案根據研究選三大代表性裝置：

• 桌面顯示器：1024px
• iPad 豎屏：768px
• iPhone 豎屏：320px

強調：只需具代表性規格，不必覆蓋所有；目標是規劃樣式背後的邏輯。

關鍵頁面識別

首頁、預訂流程頁、酒店詳情頁等具功能/佈局代表性的頁面。

網格系統建立

三款頁面模板，等寬欄位起步，簡化規劃，聚焦響應式佈局變化。

跨角色溝通與評審

視覺設計師、前端工程師早期介入，用線框原型對齊模組在不同寬度下的調整策略，盡早暴露前端實現風險。

首頁三規格線框對比

全域導航

• 橫向導航隨寬度伸縮
• <320px 時換行顯示，保證可讀性
• 預判複雜 Tab 背景在換行時的樣式風險，提前與視覺溝通

頁腳

• 預設四欄 → 平板三欄 → 手機單欄，內容順延文檔流

內容模組（輪播/卡片列表）

• 桌面：四欄並排 + 左右滾動按鈕
• 平板：三欄預設
• 手機：單欄垂直滾動，移除左右按鈕
• 原則：結合裝置慣用操作（點擊 vs 滑動）與螢幕寬度，設計最合理交互

線框原型實機測試

將線框圖片導入對應裝置，實測滾動、導航、信息獲取流程，早期暴露可訪問性與可讀性問題。

手機用戶痛點：首屏僅見站名/導航/搜索，點擊導航跳轉後內容可能超出首屏，需進一步優化錨點與內容優先級。

後續步驟預告

視覺設計與前端構建將在後續文章展開。核心心法：以內容優先級為錨，用流體網格與媒體查詢實現邏輯的優雅降級與增強。