響應式網站設計流程實作參考

使用一個真實的酒店網站http://www.macdonaldhotels.co.uk/作為範例，說明該網站製作響應式Web的流程。
這個網站是我們在九月份剛剛為Macdonald連鎖酒店創建的。在整個設計開發流程中，有幾個關鍵步驟，是我們接下來要逐一展開學習的：

1. 使用者研究與設備規格預估
2. 製作線框原型(草圖)
3. 視覺設計
4. 網站製作

1. 使用者研究與設備規格預估

前期，通過用戶調研，我們可以瞭解到使用者群所使用的設備類型分佈情況，並預估出幾種典型的回應規格，用來規劃不同的呈現方式。有幾個問題需要特別考慮下：

• 使用者在不同設備上的目標有多大區別？

過去，我們通常會假設使用者在使用移動設備訪問網站時，其行為都是高度目標驅動化的，例如在旅途中獲取酒店地址、預訂房間一類。
但實際情況不僅如此——智慧手機、平板電腦等各類移動設備的使用者，會越來越多的在相對穩定從容的狀態下使用網路。
所以在很多時候，使用者使用不同設備的目標差別並沒有想像的那麼大，我們不能片面的假設不同類型設備的使用者對功能的需求差異。

• 關於功能與內容呈現，從技術的角度出發，需要考慮哪些？

對於功能繁多複雜的網站，需要針對不同的設備類型進行功能和內容的優先順序排序，以便在開發階段通過CSS定義不同的回應規則，
以最合理的樣式規格和佈局方式進行呈現；尤其對於手機等小螢幕設備，需要多花些心思。

2.製作線框原型

通過線框圖，我們可以對響應式的視覺效果背後的邏輯結構進行規劃和定義。
 

我們根據之前一步的研究和預估結果，規劃出幾種比較典型的螢幕尺寸規格。本次案例中，我們選擇了三款具有代表性的主流設備，
包括桌面顯示器、iPad和iPhone，因為根據我們的使用者研究結果，使用這三種設備的使用者占了絕大部分。

需要強調一下，回應式設計的目的在於，針對不同設備的螢幕規格區間，進行功能及內容的輸出格式預設。所以我們只需要選取一些具有代表性的設備，而不必顧全所有已知的規格類型；我們製作線框原型的主要目標是規劃樣式背後的邏輯。

在這個階段，我們必須清楚，整個網站中有哪些關鍵頁面是在功能和佈局方面具有代表性的。
對於這次的案例網站，“關鍵頁面”包括首頁、預訂流程中的頁面、酒店詳情頁面等。

1. 開始規劃

首先來定義每種關鍵規格中的結構。我們製作三個頁面範本，寬度分別為1024px(PC電腦寬度)、768px(iPad寬度)、320px(iPhone寬度)。

如上圖所示，從每列等寬的情況入手，可以讓規劃工作相對簡單一些，幫助我們將注意力放在響應式的佈局改變上。

2. 溝通(較缺乏的步驟)

接下來我們需要考慮的是，每一列中的模組元件應該以怎樣的方式隨著頁面的寬度縮放而回應式的適應和調整。在這個過程裡，保持團隊成員之間的溝通是非常重要的，包括視覺設計師、開發人員等；使用初步的線框原型，與大家交流模組元件在佈局和樣式方面的調整計畫，儘量在初期就讓相關成員對整個規劃做到心中有數，並儘早發現前端實現等方面的潛在的問題。

3. 首頁規劃

也許對於你自己的實際專案來說，其他頁面的重要程度或代表性是超過首頁的。這不是問題，你可以調整具體的頁面規劃次序；我們的這個項目案例是從首頁開始入手的。下圖中展示的，就是我們為首頁製作的三種響應規格的線框原型。

4. 主選單規劃

我們設計了一個簡單的橫向主選單，其寬度可以隨著螢幕寬度的變化而調整；在最後一種規格的範圍裡(320px以下)，
主選單會折行顯示，以保證主選單的可讀性。

Header中其他元素的調整方式與主選單的類似。

在這一步中，最好提前考慮一下關於元件元素的樣式問題，做好與視覺設計師的交流溝通。
比如，對於導航元素，如果使用複雜的tab式背景，就很有可能在小螢幕設備中、特別是導航條折行的情況下產生樣式問題!!!

5. Footer

預設尺寸下，頁腳由四列內容組成；另外兩個規格範圍中，佈局分別為三列和一列；內容模組隨資料內容向下擴展即可。

6. 其他模組元件

全域的四列等寬網格佈局使其他組件的規劃也非常輕鬆。在首頁中有一個元件，其中包含若干內容模組。預設尺寸下，可以並排顯示四個模組；左右兩邊各有一個觸發滾動的按鈕，以點擊之後模組清單會前後滾動，以顯示更多內容。在平板電腦類型的佈局中，預設顯示的數量變為三個；而在手機的小尺寸螢幕中，內容模組清單會變為單列，並去掉了用於左右滾動的按鈕，使用者可以上下滾動頁面，依次查看不同的模組。

類似的，其他涉及到多列顯示的元件和模組都需要做這樣的考慮。要瞭解不同設備的使用者所習慣的操作方式，同時結合該設備的螢幕寬度規格，設計出最合理的佈局及對話模式。

7. 測試線框原型

我們可以線上框原型的初稿完成之後，將其圖片導入對應的設備中，進行一些簡單的初步測試。試著上下或左右滾動原型介面，感受導航與功能、內容的佈局，完成一些假設的獲取資訊的目標。這樣的測試可以説明我們儘早的檢驗頁面在可訪問性及可讀性等方面的潛在問題。

對於手機用戶來說，有一個問題：多數頁面在首屏中只能顯示網站名、全域導航和搜索等功能；使用者點擊全域導航中的連結之後，即使頁面正常的進行了跳轉，也會給人一種錯覺，好像頁面並沒有發生變化；除非滾動頁面，通過查看頁面的主要內容部分，來判斷當前是否處於自己的目標頁面。一個常見的解決方法是，對於小螢幕設備，將全域導航與主要內容之間的部分設計為可以展開或收起的容器，預設狀態為收起，這樣即能使主要內容可以呈現在首屏中，也可以保證功能的可用性。

網頁視覺設計

相比于傳統的Web視覺設計過程，在這裡我們不僅要打造出風格恰當的UI元素，而且要根據前面制定下來的幾種規格方案，對某些關鍵性的UI元素進行樣式擴展或改造。例如下圖所示的酒店搜索模組，正如我們前面提到的，在小螢幕版本中，最佳實踐方式是做成可展開和收起的模式，而這種對話模式在平板電腦或桌面設備中是不需要的。類似這樣情況，在視覺設計方面需要花些額外的功夫。

在視覺設計過程中，有一些很實際的經驗和原則：

• 儘量保持小螢幕規格樣式的簡潔；在UI元素風格方面，可以多與前端開發人員交流，儘量採用可以通過CSS3實現的常規風格樣式，減少背景圖片的使用。
• 要保證內容的字體字型大小在所有設備中都足夠可讀，尤其是在手機上。
• 與傳統Web設計開發相似，最終產出的頁面必定會與視覺稿有所出入；尤其對於回應式網站來說，由於在佈局結構和細節樣式等方面都需要有調整變化的能力，所以在開發過程中產生設計還原度方面問題的幾率會更大。仍然要強調一點，就是在專案前期和中期保持設計師與開發者之間的交流與溝通，盡可能早的發現各類潛在問題。

下圖就是針對三種設備規格的首頁最終視覺稿。

3.前端構建

來看一些在前端構建的過程中需要注意的問題；關於技術性的細節問題，仍不會在這裡過多討論。
 

• 關於圖片尺寸

對於小螢幕規格的設計方案，即使我們通過CSS縮小其顯示尺寸，在檔資源方面仍然是要載入完整的大圖的。所以我們在優化保存檔圖片的時候要盡可能的讓檔更小。不過另外有些方法，可以説明我們真正實現圖片檔的響應化。大致思路是，通過JavaScript判斷當前設備的解析度規格範圍，並根據預設的規則載入不同尺寸的圖片檔。

• 使用高級CSS

讓客戶或需求方理解“漸進增強，平穩退化”的思路是很重要的，對於傳統Web設計開發也是如此。對回應式網站來說，CSS3在降低資源消耗、提高頁面載入速度等方面的作用尤為重要。

• 及時溝通

正如我們在前文中多次強調的，保持設計師與開發者之間的密切溝通和交流，對於專案的順利進展會起到不可估量的作用；換個角度說，如果這方面做的不好，很多致命的潛在問題則有可能在專案後期集中爆發出來。

資料來源：視覺部落格