多裝置的Web配置模式

通過靈活的柵格和Media Queris，響應式Web設計能夠讓頁面配置適應不同的螢幕尺寸。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。下面我列出了一些比較熱門的適應多裝置的配置模式。

最靈活的（Mostly Fluid）

最受歡迎的模式或者就是這種最簡單的方式：在更大螢幕使用更大margin的多欄版面配置，依賴於靈活的柵格和圖片，在小螢幕中某列內容往下排。

我把這種模式列為“最靈活”，是因為在很多尺寸的螢幕中，主要布局結構並沒有很大改變，直到在很小的螢幕當中。這個設計依賴於靈活的柵格來適應不同的螢幕尺寸。下面是幾個使用這種模式的網站樣本。

• Five Simple Steps
• Princess Elisabeth Antarctica.
• Trent Walton
• Sifter
• ChoiceResponse

當然這幾個例子有不同的地方：元素移動的方式不同、螢幕尺寸劃分的不同等，但是大體上，這種模式有著很多的相似之處。

列內容往下排（Column Drop）

另一種模式以多列開始，以單列結束，當螢幕尺寸變小，列內容會往下排。不像第一種模式，這種模式的元素大小基本保持不變。

各列內容在解析度臨界點有怎樣的變化，何時變化和如何變化，取決於每個不同設計。但是大體上，在窄螢幕中，導航或者主要內容是放在頂部的。以下是這種模式的幾個例子：

• Modernizr
• Owltastic
• Wee Nudge
• Festival de Saintes
• Ash Personal Training

布局切換（Layout Shifter）

這種模式盡最大可能地去適應不同的螢幕尺寸。即是，不同的布局應用於的大、中、小螢幕當中。因為這本來就花費更多的工作量，所以相比前面兩種模式，這個的受歡迎程度稍低。

基於所見的最常見的網站例子，雖然我把這種模式籠統地括入以上的插圖，但事實上這種模式是很多創新產生的地方。所以，沒有哪種固定格式可以概括所有這種模式的設計。看看以下幾個例子：

• Food Sense
• Performance Marketing Awards
• Forefathers Group
• The Boston Globe
• Andersson-Wise Architects

最簡單（Tiny Tweaks）

這是最簡單的模式，所以也是不常用的模式。大概是因為很少公司會有這麼簡單的網頁，內容少並且是單列布局。對於使用這種模式的網站，多裝置適應也僅僅是一些關於文本和圖片的簡單的變化，

插圖看起來不是那麼有說服力，所以，直接看例子吧：

• Future Friendly
• Path
• Neovada
• Lycos
• Design made in Germany

螢幕以外的空間利用（Off Canvas）

雖然以上列了幾種不同的模式，但是它們之間還是有相同的地方。它們都會在小螢幕當中，把內容往下掉，結果是頁面很長，包含很多的內容模組。另外可能不太明顯的一點，是它們同樣地依賴螢幕的空間以調整頁面配置。

但是你可能會疑問，這不就是我們的目的嗎？這隻不過是，我們把思想局限在了可視的範圍內。實際上，螢幕外的空間總是比螢幕上的空間大得多。好好利用吧！

就如所示，Off Canvas模式利用了螢幕外的空間，它把內容或導航隱藏在這裡，直到在大螢幕顯示或者在小螢幕使用者展開它。這種模式出現在一些移動網站和原生的移動App當中。

Facebook的移動Web利用了左邊的空間，把導航選項隱藏在這裡，直到有人點選連結展開它。在這時候，螢幕外的內容就展示在螢幕當中。有些響應式設計採用了相似的方法，但是其中有些遇到了可訪問方面的問題。

• Barack Obama
• Kaemingk Christmas 2012

Path的原生移動App採用了一種分層技術來建立Off Canvas效果。這個App利用了螢幕的左邊和右邊來導航。

Tokil Jahnsen建立了 proof-of-concept ，模仿了Path的設計。

Google 的移動版本利用了上面的部分，把導航資訊隱藏在此。當使用者點擊“more”的時候，這些選項從上面滑動到可視地區。

Off Canvas 模式的大體思想是，在小螢幕， 除非被點擊 ，附加的元素是被隱藏的。隨著螢幕變大，可視部分越來越多，直至沒有需要展開的元素。如果有人有興趣用響應式設計思想建立這種模式的網站， 請告訴我!

我覺得Off Canvas 模式比較有意思，因為它避免使用者在小螢幕中滾動螢幕和導航。它把網頁的區塊進行分離、分標籤、按需出現。

與這個相關的話題，Brad Frost 最近對 響應式設計導航解決方案 做了很好的分類。

原文：Multi-Device
Layout Patterns，作者是 Luke Wroblewski
譯文：多裝置的Web配置模式，譯者是Vivien
Chen