內(nèi)容簡(jiǎn)介：

本書出自一位世界級(jí)設(shè)計(jì)師之手。復(fù)雜的設(shè)計(jì)原理在本書中凝煉為親密性、對(duì)齊、重復(fù)和對(duì)比4 個(gè)基本原則。作者以其簡(jiǎn)潔明快的風(fēng)格，將優(yōu)秀設(shè)計(jì)所必須遵循的這4 個(gè)基本原則及其背后的原理通俗易懂地展現(xiàn)在讀者面前。本書包含大量的示例，讓你了解怎樣才能按照自己的方式設(shè)計(jì)出美觀且內(nèi)容豐富的產(chǎn)品。
本書適用于各行各業(yè)需要從事設(shè)計(jì)工作的讀者，也適用于有經(jīng)驗(yàn)的設(shè)計(jì)人員。

亞馬遜購(gòu)買地址

《寫給大家看的設(shè)計(jì)書（第3版）》

作者簡(jiǎn)介：

Robin Williams 世界著名的設(shè)計(jì)師、技術(shù)專家和暢銷書作家。通過寫書和授課，她已經(jīng)影響了整整一代數(shù)字設(shè)計(jì)師。同時(shí)，作為Adobe和Mac技術(shù)社區(qū)內(nèi)的偶像級(jí)專家，她擁有大批擁戴者。她是Publish Magazine、Adobe Magazine等雜志的專欄作家，是MacWorld Expo 等業(yè)界重要活動(dòng)和組織的顧問委員會(huì)成員，還創(chuàng)辦了Santa Fe 電影藝術(shù)學(xué)院。除本書外，她還著有幾十部暢銷圖書和獲獎(jiǎng)著作，包括The Non-Designer's Web Book、Robin Williams Design Workshop、The Little Mac Book 等，有的書已被翻譯為15中文字，產(chǎn)生了世界性的影響。

試讀 ：第2章　親密性

在新手的設(shè)計(jì)中，單詞、短語(yǔ)和圖片四處分布，連角落也不放過，它們占據(jù)了每一處空間，以至于根本沒有任何留白，這種情況比比皆是?？瓷先ニ坪跏窃O(shè)計(jì)者們不敢留有空白。不過要知道，如果一個(gè)設(shè)計(jì)中充斥著太多的內(nèi)容，這個(gè)頁(yè)面會(huì)顯得雜亂無(wú)章，讀者也無(wú)法從中很快看到所需的信息。

Robin親密性原則是指：將相關(guān)的項(xiàng)組織在一起，移動(dòng)這些項(xiàng)，使它們的物理位置相互靠近，這樣一來，相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組，而不再是一堆彼此無(wú)關(guān)的片段。

如果某些信息項(xiàng)或組彼此之間并無(wú)關(guān)聯(lián)，這些元素就不應(yīng)存在很近的親密性（即不應(yīng)靠近），這樣就能為讀者提供一個(gè)直觀的提示，使讀者馬上了解頁(yè)面的組織和內(nèi)容。

下面這個(gè)簡(jiǎn)單的例子很好地闡釋了這個(gè)概念。在列表的左邊，你對(duì)所有這些花會(huì)怎么想？是不是認(rèn)為它們都擁有某種共同的東西？對(duì)于右邊的列表，你又是怎么想的呢？看上去，后4種花與其他的花有些不同。這一眼就能感受到，而且認(rèn)識(shí)到這一點(diǎn)根本無(wú)需任何提醒。你很清楚后4種花與其他花有所不同，因?yàn)樗鼈兣c列表中的其他項(xiàng)物理上是分開的。這正反映了親密性的概念，在一個(gè)頁(yè)面上，物理位置的接近就意味存在著關(guān)聯(lián)（實(shí)際生活中也是如此）。

來看看下面這個(gè)企業(yè)名片的布局，這是一種很典型的布局。在這樣小的空間里你看到多少個(gè)單獨(dú)的元素？你的眼睛要停下來多少次才能看全這張名片上的所有信息？

你的眼睛是不是停過5次？當(dāng)然，這個(gè)小小的名片上放置了5項(xiàng)孤立的內(nèi)容。

你是從哪里開始的？可能是從中間，因?yàn)橹虚g的短句字體最粗。
接下來看什么？是不是按從左向右的順序讀？（因?yàn)檫@是英語(yǔ)）
如果已經(jīng)讀到名片的最后（即右下角），你的目光又會(huì)移向哪里？

你是不是還會(huì)全盤再巡視一番，確保自己沒有遺漏任何角落？

如果再添點(diǎn)亂，情況會(huì)怎樣呢？

現(xiàn)在有兩個(gè)元素都是粗體，你又該從哪里開始呢？從左上角嗎？還是從中間開始？

讀完這兩項(xiàng)之后，接下來看什么？也許你會(huì)在這些粗體詞之間看來看去，緊張兮兮地想找出角落里還隱藏著哪些詞尚未看到。
你知道什么時(shí)候才算完嗎？

你的朋友是不是也像你這樣？他們會(huì)不會(huì)用不同的方式讀這個(gè)名片？

如果多個(gè)項(xiàng)相互之間有很近的親密性，它們就會(huì)成為一個(gè)視覺單元，而不是多個(gè)孤立的元素。就像實(shí)際生活中一樣，親密性（即緊密性）意味著存在關(guān)聯(lián)。

如果把類似的元素組織為一個(gè)單元，馬上會(huì)帶來很多變化。首先，頁(yè)面會(huì)變得更有條理。其次，你會(huì)清楚地知道從哪里開始讀信息，而且明白什么時(shí)候結(jié)束。另外，"空白"（字母以外的空間）也會(huì)變得更有組織。

之前的名片存在這樣一個(gè)問題：名片上的每一項(xiàng)看上去都與其他任何項(xiàng)沒有關(guān)聯(lián)。這樣一來，首先不清楚從哪里開始讀名片，另外不知道何時(shí)才算結(jié)束。

如果對(duì)這個(gè)企業(yè)名片做一點(diǎn)調(diào)整——把相關(guān)的元素分在一組，使它們建立更近的親密性，看看會(huì)發(fā)生什么。

從哪里開始讀名片？接下來看什么？什么時(shí)候結(jié)束？對(duì)于這些問題你現(xiàn)在還有疑問嗎？

僅僅利用這樣一個(gè)簡(jiǎn)單的概念，現(xiàn)在這個(gè)名片不論從理解上還是從視覺上看都很有條理。而且這樣一來，它還能更清楚地表達(dá)信息。

下面顯示了一個(gè)很典型的簡(jiǎn)報(bào)刊頭。這里有多少個(gè)單獨(dú)的元素？單從放置的位置看，能不能看出某些信息項(xiàng)與其他項(xiàng)存在關(guān)聯(lián)？

要花些工夫來判斷哪些項(xiàng)應(yīng)當(dāng)分在一組，讓它們建立更近的親密性，而哪些項(xiàng)應(yīng)當(dāng)分開。

左上角的兩項(xiàng)相互之間有很近的親密性，這意味著它們之間存在某種關(guān)系。不過這兩項(xiàng)真的應(yīng)該有某種關(guān)系嗎？amusing、peculiar是形容Society還是"The Shakespeare Papers"？

日期和期號(hào)呢？它們應(yīng)該更靠近一些，因?yàn)樗鼈兌紭?biāo)識(shí)這一期刊物。

下面的例子建立了正確的關(guān)系：

請(qǐng)注意，這里還做了另外幾件事：

• 把所有大寫都變?yōu)樾?，只保留合適的首字母大寫，這樣能留出更多空間，使標(biāo)題更大、更醒目。
• 把圓角變?yōu)橹苯牵箍^的外觀更簡(jiǎn)潔、更突出。
• 將天鵝圖放大，超出邊線。必須要讓它更顯眼。

因?yàn)槲淖謨?nèi)容需要從背景中凸顯出來，我把小字體改為Trebuchet字體，這樣打印的時(shí)候就不會(huì)看不太清楚了。

創(chuàng)建廣告?zhèn)鲉?、宣傳?cè)、新聞簡(jiǎn)報(bào)或者其他出版物時(shí)，你很清楚其中哪些信息在邏輯上存在關(guān)聯(lián)，知道哪些信息應(yīng)當(dāng)強(qiáng)調(diào)，而哪些信息不用強(qiáng)調(diào)?？梢酝ㄟ^分組形象地表現(xiàn)這種信息。

顯然，需要對(duì)這個(gè)列表做某種格式化處理，以便理解。不過，這個(gè)列表最大的問題在于，其中的每一個(gè)元素都與其他所有元素湊在一起，所以無(wú)法看出它們之間的關(guān)系，也無(wú)從知道這些信息項(xiàng)的組織。		仍然是這個(gè)列表，現(xiàn)在看起來已經(jīng)形成了多個(gè)組。相信你自己也肯定做過這種工作，這里只是建議要有意識(shí)地這樣做，而且要投入更大的力度。注意我在這里對(duì)標(biāo)題增加了一些對(duì)比效果，并讓這種對(duì)比重復(fù)出現(xiàn)。

將類似的項(xiàng)歸為一組來建立很近的親密性時(shí)，有時(shí)需要做一些修改，如需要調(diào)整文本的大小或字體粗細(xì)，或者要改變圖片的大小或放置位置，等等。正文（所讀內(nèi)容的主干部分）的大小不一定非得是12點(diǎn)！作為正文的輔助信息，如期號(hào)和新聞簡(jiǎn)報(bào)發(fā)行年份，字體通?？梢孕〉?或8點(diǎn)。

這個(gè)頁(yè)面看上去很乏味（沒什么可吸引你去看一眼正文的內(nèi)容），不僅如此，還很難從中找出所要的信息，比如到底發(fā)生了什么，在哪里，什么時(shí)間等，信息不是順次給出的，無(wú)法一目了然。

例如，這個(gè)系列活動(dòng)舉辦了多少場(chǎng)讀書會(huì)？

親密性的思想并不是說所有一切都要更靠近，其真正的含義是：如果某些元素在理解上存在關(guān)聯(lián)，或者相互之間存在某種關(guān)系，那么這些元素在視覺上也應(yīng)當(dāng)有關(guān)聯(lián)。除此以外，其他孤立的元素或元素組則不應(yīng)存在親密性。位置是否靠近可以體現(xiàn)出元素之間是否存在關(guān)系。

這個(gè)系列活動(dòng)舉辦了多少場(chǎng)讀書會(huì)？

首先，根據(jù)理解對(duì)信息進(jìn)行分組（這個(gè)工作在我的腦海中完成，也可以在紙上把想法簡(jiǎn)單畫出來），然后在頁(yè)面上物理地對(duì)文本分組，即通過調(diào)整位置把文本分為多組。注意，三場(chǎng)讀書會(huì)之間的間隔是一樣的，這說明這三個(gè)組之間存在某種關(guān)系。

輔助信息則相距很遠(yuǎn)，由此可以馬上意識(shí)到它不是另外一場(chǎng)演出，即使在你沒有看清楚之前。

下面的例子與上一頁(yè)是一樣的。用最快的速度看一眼，現(xiàn)在你對(duì)這三場(chǎng)讀書會(huì)有什么想法？

為什么你會(huì)認(rèn)為其中一場(chǎng)讀書會(huì)與另外兩場(chǎng)不同？原因就在于，其中一場(chǎng)讀書會(huì)與其他讀書會(huì)是分開的。由于這種空間關(guān)系，可以立刻發(fā)現(xiàn)這場(chǎng)讀書會(huì)有某種不一樣的地方。

僅僅像這樣對(duì)頁(yè)面很快地看一眼居然就能得到這么多信息，這確實(shí)讓人驚嘆不已。正因如此，你要負(fù)責(zé)保證讀者確實(shí)得到正確的信息。

看看下面這個(gè)舞蹈課的宣傳卡片，設(shè)計(jì)者的本意可能希望表現(xiàn)得更有意思，更有活力，不過第一眼看上去，你能說出舞蹈課的時(shí)間和地點(diǎn)嗎？-

根據(jù)親密性原則來組織這些信息（如下圖所示），可以清楚地表達(dá)關(guān)鍵信息，包括：誰(shuí)、做什么、什么時(shí)間以及在哪里。這樣一來就不會(huì)失去潛在的顧客，因?yàn)樘热舨蛔龃烁倪M(jìn)，他們有可能不愿在這一大堆雜亂無(wú)章的文本中搜尋，并因此放棄。

你不要認(rèn)為，不管怎樣都必須通過自己的設(shè)計(jì)來突出"舞蹈"這個(gè)主題（在這個(gè)例子中）。此時(shí)，如果要在簡(jiǎn)單表達(dá)和并不專業(yè)的設(shè)計(jì)之間做出選擇的話，你應(yīng)該選擇簡(jiǎn)單表達(dá)。設(shè)計(jì)技能需要逐步提高，要先從簡(jiǎn)單的表達(dá)開始。

也許你在自己的工作中已經(jīng)用過親密性原則，不過可能做得還不夠充分，還沒有最有效地發(fā)揮它的作用。仔細(xì)看看你的那些頁(yè)面，看看頁(yè)面上的那些元素，再看看哪些元素應(yīng)當(dāng)分在一組。

設(shè)計(jì)這個(gè)小傳單的人在每個(gè)標(biāo)題和段落后面都加了兩個(gè)回車。這樣一來，標(biāo)題與它上下的正文之間就有同樣的距離，所以看上去它們是孤立的、沒有任何關(guān)聯(lián)的項(xiàng)。你無(wú)法分清標(biāo)題屬于它上面的文本還是屬于下面的文本，原因就出在上下的距離都相等。

這里有很多空白可以利用，不過這些空白都被打散了。另外有些空白放置不當(dāng)，比如標(biāo)題與其相關(guān)正文之間的空白。如果像這樣"截留"空白，從視覺上看就會(huì)把元素分隔開。

將有關(guān)系的項(xiàng)歸為一組。如果頁(yè)面上有些區(qū)域的組織不太清晰，則要看看這些項(xiàng)是不是存在本不該有的親密性。使用這個(gè)簡(jiǎn)單的設(shè)計(jì)原則來管理空間，不僅會(huì)使頁(yè)面更有條理，看上去也更美觀。

如果對(duì)這個(gè)傳單做一處修改，只需把標(biāo)題移到離其相關(guān)文本段更近的位置，這就會(huì)帶來很多變化：

• 條理更清楚。
• 元素內(nèi)部不再截留空白。
• 頁(yè)面看上去有更多的空間，使這個(gè)小傳單顯得不那么擁擠。

這里還把電話號(hào)碼和E-mail地址分行放置，不過它們歸為一組，與其他信息分開，這樣就能作為重要信息突出出來。

你可能還注意到，我把居中對(duì)齊改為左對(duì)齊（這就是對(duì)齊原則，將在下一章解釋），這樣就留出了更多空間可以將圖片放大。

你可能會(huì)很自然地利用位置的緊密程度來反映元素間的關(guān)系，而親密性實(shí)際上就是更有意識(shí)地這樣做，并把這個(gè)概念更向前推進(jìn)一步。一旦了解了各元素之間的關(guān)系是何等的重要，就會(huì)注意到親密性的效果。而一旦開始注意到這種效果，就會(huì)利用它，掌握它，并施以充分的控制。

你可能會(huì)認(rèn)為再?zèng)]有比這更糟糕的菜單了，但這確實(shí)是我從一家餐館拿到的。不錯(cuò)，最嚴(yán)重的問題是所有的信息都堆在一起。

在根據(jù)這個(gè)信息進(jìn)行設(shè)計(jì)之前，先寫出同屬一類的各部分信息，將這些元素分組。（你應(yīng)該知道如何做到這一點(diǎn)，只需充分調(diào)動(dòng)你的大腦）。

一旦為信息建立了不同的分組，接下來可以在頁(yè)面上擺弄這些信息組了。你手頭肯定有一臺(tái)計(jì)算機(jī)，怎么擺弄實(shí)在是方法多多。要學(xué)會(huì)如何用你的軟件格式化頁(yè)面。

在下面的例子中，我在單獨(dú)的菜單項(xiàng)之間騰出了更多的空間。當(dāng)然，不應(yīng)當(dāng)采用全部大寫的形式，因?yàn)樽x起來確實(shí)費(fèi)勁。我把它改成了首字母大寫的形式，同時(shí)把字體也縮小了兩個(gè)點(diǎn)。兩種做法都為各個(gè)元素間預(yù)留了更多空間。

原來那個(gè)菜單中最大的問題是信息之間沒有分開。只有在你的軟件中學(xué)會(huì)如何格式化頁(yè)面，才能在每個(gè)元素前后精確預(yù)留所需空間。

原來的所有文本都用大寫，而且是一大"塊"文本，這就占據(jù)了所有的空間，再?zèng)]有任何"留白"能讓你的眼睛稍作休息。完全可以把文本的字體設(shè)置為小于12點(diǎn)。真的，確實(shí)可以這么做！

上一頁(yè)的例子中，對(duì)Starters（開胃小吃）和Entrees（主菜）的區(qū)分還存在一點(diǎn)小問題。試著把每部分內(nèi)容縮進(jìn)，看看多出的空間是不是能更明確地定義這兩個(gè)組，同時(shí)仍然能很清楚地表示出它們還是類似的組。（我還把Starters和Entrees的字體放大了，這里采用了對(duì)比的原則。）

Starters和Entrees前面確實(shí)再?zèng)]有足夠的空間留出空白了，不過設(shè)置縮進(jìn)還是綽綽有余的。標(biāo)題下面多出的空間有助于區(qū)分這兩組信息。只需一點(diǎn)點(diǎn)空間就能達(dá)到這種效果。

親密性原則往往并非設(shè)計(jì)頁(yè)面唯一的解決方法。另外三個(gè)原則在設(shè)計(jì)過程中也是少不了的，通常你會(huì)發(fā)現(xiàn)所有這四個(gè)原則都會(huì)用到。不過在這里我們一次只討論一個(gè)原則，先從親密性原則開始介紹。在下面的例子中，可以想象一下，如果我開始沒有設(shè)置適當(dāng)?shù)拈g隔，那么其他原則將毫無(wú)意義。

這里沒有選擇Times New Roman 字體，而是采用了一種更有趣的字體，這很容易做到。之前對(duì)菜單上菜品的描述設(shè) 置了適當(dāng)?shù)目s進(jìn)，這有助于進(jìn)一步區(qū)分各項(xiàng)。

但有一點(diǎn)我認(rèn)為不太好，菜品的價(jià)格與每道菜的描述擠在一起（還用了連字符），所以我把價(jià)格都右對(duì)齊，這樣不僅清晰而且擺放一致。這正是對(duì)齊原則，后面將介紹這個(gè)內(nèi)容。

利用簡(jiǎn)單的親密發(fā)生原則，信息將收集到多個(gè)邏輯組中，使訪問者能更容易地在網(wǎng)頁(yè)上導(dǎo)航?？纯茨愀杏X不錯(cuò)的那些網(wǎng)站，你會(huì)發(fā)現(xiàn)，那些網(wǎng)站的信息都按邏輯做了分組。

這個(gè)頁(yè)面上的信息簡(jiǎn)直亂七八糟?？纯礃?biāo)題下面的網(wǎng)站鏈接。它們同等重要嗎？上面的布局似乎是這樣的，但實(shí)際上并非如此。

有必要再次強(qiáng)調(diào)：從理解的角度你已經(jīng)知道了如何使用親密性，而且已經(jīng)知道如何將各部分信息收集到相應(yīng)的組中。所要做的只是把這種技巧具體應(yīng)用到實(shí)際頁(yè)面上。用留白來對(duì)元素進(jìn)行分組。

在這里，我把所有網(wǎng)站鏈接都移入一列，來顯示它們相互之間的關(guān)系。

這里把引用的文字放在離正文更遠(yuǎn)的位置，因?yàn)樗鼈儽舜瞬]有直接關(guān)系。

我還使用了對(duì)齊原則（將在第3章討論）：這里使用了左對(duì)齊，并確保各元素與另外某些內(nèi)容對(duì)齊。

親密性小結(jié)

如果多個(gè)項(xiàng)相互之間存在很近的親密性，它們將成為一個(gè)視覺單元，而不是多個(gè)孤立的元素。彼此相關(guān)的項(xiàng)應(yīng)當(dāng)歸在一組。要有意識(shí)地注意你是怎樣閱讀的，你的視線怎樣移動(dòng)：從哪里開始；沿著怎樣的路徑；到哪里結(jié)束；讀完之后，接下來看哪里？整個(gè)過程應(yīng)當(dāng)是一個(gè)合理的過程，有確定的開始，而且要有確定的結(jié)束。

根本目的

親密性的根本目的是實(shí)現(xiàn)組織性。盡管其他原則也能達(dá)到這個(gè)目的，不過利用親密性原則，只需簡(jiǎn)單地將相關(guān)的元素分在一組建立更近的親密性，就能自動(dòng)地實(shí)現(xiàn)條理性和組織性。如果信息很有條理，將更容易閱讀，也更容易被記住。此外還有一個(gè)很好的"副產(chǎn)品"，利用親密性原則，還可以使空白（這是設(shè)計(jì)者們最喜歡的）更美觀（也更有條理）。

如何實(shí)現(xiàn)

微微瞇起眼睛，統(tǒng)計(jì)你的眼睛停頓的次數(shù)來數(shù)一數(shù)頁(yè)面上有多少個(gè)元素。如果頁(yè)面上的項(xiàng)超過3～5個(gè)（當(dāng)然，這取決于具體情況），就要看看哪些孤立的元素可以歸在一組建立更近的親密性，使之成為一個(gè)視覺單元。

要避免的問題

不要僅僅因?yàn)橛锌瞻拙桶言胤旁诮锹浠蛑醒搿?br /> 避免一個(gè)頁(yè)面上有太多孤立的元素。
不要在元素之間留出同樣大小的空白，除非各組同屬于一個(gè)子集。

標(biāo)題、子標(biāo)題、圖表標(biāo)題、圖片能否歸入其相關(guān)材料？在這個(gè)問題上一定要非常清楚（哪怕只有一點(diǎn)含糊都要盡量避免）。在有很近親密性的元素之間建立關(guān)系。
不同屬一組的元素之間不要建立關(guān)系！如果元素彼此無(wú)關(guān)，要把它們分開。