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

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的安慶網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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

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

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

試試這個在線例子。

現(xiàn)行慣例

響應(yīng)性設(shè)計的現(xiàn)行方法是把設(shè)計與設(shè)備綁定。它根據(jù)最常見的設(shè)備尺寸來使用像素寬度，但我們不認為這種方法足夠好。它導(dǎo)致了設(shè)計要基于兩個非常容易變化的因素：

設(shè)備分辨率；以及

像素

設(shè)備分辨率

有成千上萬種設(shè)備和可能的環(huán)境，我們無法全部支持。所以我們就選擇一些流行的設(shè)備，并基于它們的分辨率做設(shè)計，忽略市場上其他的產(chǎn)品。隨著技術(shù)發(fā)展，分辨率的提高，我們的網(wǎng)站看起來將會很過時，就像現(xiàn)在看到的600×400的網(wǎng)站一樣。

像素

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

設(shè)備并不重要

那么，我們要如何才能像Mark Boulton建議的那樣，根據(jù)內(nèi)容做設(shè)計？在實踐中，這表示從內(nèi)容的最常見形式——段落元素開始，然后逐步完善整個布局。

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

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

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

“金發(fā)女孩”方法

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

太大

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

太小

如果空間小于最優(yōu)閱讀寬度，你需要盡量利用所有的空間。例如：

將外邊距減少為原來的一半（但不要去掉它）；同時/或者

將懸掛的標點設(shè)為行內(nèi)（這樣它不會被截斷）。

剛剛好

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

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

優(yōu)點

我們認為“金發(fā)女孩”方法是有很多優(yōu)點的。

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

1 iMac（大顯示器）

2 Macbook（小一點的顯示器）

3 iPad（平板，可能是橫放的或者豎放的）

4 iPhone4（Retina屏幕，譯者注：640×960）

5 iPhone（非Retina屏，譯者注：320×480）

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

1 太小的屏幕

2 太大的屏幕

3 剛剛好的屏幕

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

最終，技術(shù)會變化，但人體在過去的幾千年里一直相當(dāng)?shù)姆€(wěn)定。為人（的閱讀）設(shè)計，而不是為技術(shù)（設(shè)備尺寸和分辨率）設(shè)計，你的布局不會很快就過時的。

從此，設(shè)計師們過著幸福的生活……

via designbyfront

作者：Chris Armstrong

譯文出處：Seemeloo西米露

分享標題：響應(yīng)性設(shè)計中的”金發(fā)女孩”方法
文章網(wǎng)址：http://www.rwnh.cn/article4/cgpcie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、面包屑導(dǎo)航、域名注冊、全網(wǎng)營銷推廣、網(wǎng)站改版、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)