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

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

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

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

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

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

試試這個在線例子。

現(xiàn)行慣例

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

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

像素

設(shè)備分辨率

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

像素

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

設(shè)備并不重要

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

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

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

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

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

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

太大

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

太小

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

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

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

剛剛好

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

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

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

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

使用目前流行的方法，即使你只需要為蘋果的設(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)站看起來使用了這種方法，并且工作得很好，但不是一個可放大的解決方案。而使用金發(fā)女孩方法，你只需要考慮三種狀態(tài)：

1 太小的屏幕

2 太大的屏幕

3 剛剛好的屏幕

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

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

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

via designbyfront

作者：Chris Armstrong

譯文出處：Seemeloo西米露

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

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