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

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

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

移動(dòng)瀏覽器的數(shù)量增長(zhǎng)得非�？�，全世界已有超過(guò)4億的移動(dòng)設(shè)備。我們不能再假設(shè)網(wǎng)站只在一個(gè)擁有中等分辨率的桌面監(jiān)視器中被瀏覽�；蛟S我們從來(lái)就不該這樣假設(shè)。

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

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

試試這個(gè)在線例子。

現(xiàn)行慣例

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

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

像素

設(shè)備分辨率

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

像素

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

設(shè)備并不重要

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

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

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

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

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

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

太大

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

太小

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

將外邊距減少為原來(lái)的一半（但不要去掉它）；同時(shí)/或者

將懸掛的標(biāo)點(diǎn)設(shè)為行內(nèi)（這樣它不會(huì)被截?cái)啵��?/p>

剛剛好

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

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

優(yōu)點(diǎn)

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

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

1 iMac（大顯示器）

2 Macbook（小一點(diǎn)的顯示器）

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

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

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

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

1 太小的屏幕

2 太大的屏幕

3 剛剛好的屏幕

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

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

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

via designbyfront

作者：Chris Armstrong

譯文出處：Seemeloo西米露

標(biāo)簽： 設(shè)計(jì)方法 金發(fā)女孩 交互設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。