響應性設計中的”金發女孩”方法

　　譯者注：金發女孩(Goldilocks)指的是大家耳熟能詳的故事——三只熊。金發女孩闖進了三只熊在森林裡的小木屋。女孩坐了三把椅子、喝過三碗湯，睡了三張床。前兩個不是太大，就是太小，不是太燙，就是太涼，總是在第三次，也恰好是最後一次才找到“剛剛好”的那個。這個故事包含了許多“最恰當”的意味。作者用“金發女孩”應該指的是將復雜的設備情況簡化為三種情況：太大、太小、剛好，並且這種方法是“剛好”適合所有設備的。

　　這是一篇關於“方法”大於“技術”的文章，作者提出了一種“通用性”設計的思路，並且給出了比較具體的實現方案——先基於可讀性做設計，再根據“太大”、“太小”、“剛剛好”三種情況分別處理。至於如何用現有技術來實現，能不能實現，以及響應性設計本身存在的性能問題並不在文章的討論范圍內。

　　既然作者提出的是新思路，那麼舊的思路是什麼?如果你想了解，可以看看這個網站：http://stuffandnonsense.co.uk/projects/320andup/

　　移動浏覽器的數量增長得非常快，全世界已有超過4億的移動設備。我們不能再假設網站只在一個擁有中等分辨率的桌面監視器中被浏覽。或許我們從來就不該這樣假設。

　　問題的答案就是由Ethan Marcotte提出的響應性網頁設計(Resposive Web Design)。我們只開發一個適應所有設備的網站，而不是為每個設備開發單獨的網站。然而，目前針對響應性設計的方法，仍然是基於一些流行的設備，因此，也很可能會隨著這些流行設備一起被淘汰。

　　如果我們能創造一種真正通用的、獨立於設備的設計呢?無論你使用那種設備浏覽，這種設計看起來就像是剛剛好為這個設備而做的。在New Adventures中，Mark Boulton談到了為內容而設計，而不是畫布(designing from the content out， rather than the canvas in)，我們很認同他的說法。或許要創造在所有設備中通用的設計的唯一方法，就是把設備統統忘掉。

　　試試這個在線例子。

　　現行慣例

　　響應性設計的現行方法是把設計與設備綁定。它根據最常見的設備尺寸來使用像素寬度，但我們不認為這種方法足夠好。它導致了設計要基於兩個非常容易變化的因素：

　　設備分辨率;以及

　　像素

　　設備分辨率

　　有成千上萬種設備和可能的環境，我們無法全部支持。所以我們就選擇一些流行的設備，並基於它們的分辨率做設計，忽略市場上其他的產品。隨著技術發展，分辨率的提高，我們的網站看起來將會很過時，就像現在看到的600×400的網站一樣。

　　像素

　　像素的大小不是固定的——至少顯示出來的大小不是。在iPhone上，16像素的文字可能只有Macbook上的60%那麼大。以像素為尺度的設計在不同的設備中會產生不一致的效果，並可能對可讀性和可用性產生負面影響。

　　設備並不重要

　　那麼，我們要如何才能像Mark Boulton建議的那樣，根據內容做設計?在實踐中，這表示從內容的最常見形式——段落元素開始，然後逐步完善整個布局。

　　我們常常傾向於先設置body的文字尺寸。但制造商和用戶已經為浏覽器設置了適合閱讀的默認尺寸，我們認為沒有太好的理由，你不應該改動它。

　　然而，如果你的整個設計是基於這個基本的文字尺寸(即設計中使用em作為單位)，隨著基本文字尺寸的增加或者減小，你的設計也會發生相應的變化。使用em令你的設計獨立於分辨率。

　　接下來，用max-width設置段落的行寬，盡可能保證可讀性(一行66個字符)。不同的字體之間會有區別，但一般來說，30em左右的效果通常不錯。這個設置的是你的單欄布局的寬度，讓它剛好適合閱讀。

　　“金發女孩”方法

　　現在，不管使用什麼設備來觀察你的設計，可用的空間可能是更大、更小，或者剛剛好。你可以用media queries來充分利用它們。

　　太大

　　如果有比單欄的寬度大很多的寬度，你可以考慮使用一個多欄的排版。例如，如果單欄的寬度是28em(此外左右各有1em的外邊距)，屏幕的寬度超過45em，你有足夠的空間切換到三欄布局——欄寬13.5em，1em的間距，主容器占兩欄(這樣保留了閱讀的最優寬度)。

　　太小

　　如果空間小於最優閱讀寬度，你需要盡量利用所有的空間。例如：

　　將外邊距減少為原來的一半(但不要去掉它);同時/或者

　　將懸掛的標點設為行內(這樣它不會被截斷)。

　　剛剛好

　　如果空間剛好適合你的單欄，你就沒什麼好擔心的。你的工作完成了，去喝杯茶吧。

　　我們並不是說單欄布局對每個網站來說都是最好的布局。我們不知道用戶會看到哪一種排版，所以我們需要讓網站在單欄和多欄狀態看起來都一樣好。然而，在實踐中，我們發現這樣有助於做好單欄的狀態，再將其他更大或更小的情況處理好。

　　優點

　　我們認為“金發女孩”方法是有很多優點的。

　　使用目前流行的方法，即使你只需要為蘋果的設備設計(很幸運哦)，也需要考慮五種狀態：

　　1 iMac(大顯示器)

　　2 Macbook(小一點的顯示器)

　　3 iPad(平板，可能是橫放的或者豎放的)

　　4 iPhone4(Retina屏幕，譯者注：640×960)

　　5 iPhone(非Retina屏，譯者注：320×480)

　　Edenspiekermann網站看起來使用了這種方法，並且工作得很好，但不是一個可放大的解決方案。而使用金發女孩方法，你只需要考慮三種狀態：

　　1 太小的屏幕

　　2 太大的屏幕

　　3 剛剛好的屏幕

　　不需要考慮設備的分辨率，你的布局在所有的設備和環境中都能工作，甚至還未出現的設備。如果一個用戶的基本字體尺寸是80像素(不管處於何種原因)，這種方法應該仍然會為可用的空間提供合適的布局。這就是設備獨立的。

　　最終，技術會變化，但人體在過去的幾千年裡一直相當的穩定。為人(的閱讀)設計，而不是為技術(設備尺寸和分辨率)設計，你的布局不會很快就過時的。

　　從此，設計師們過著幸福的生活……

　　via designbyfront

　　作者：Chris Armstrong

　　譯文出處：Seemeloo西米露