內(nèi)容簡介：

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

亞馬遜購買地址

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

作者簡介：

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

試讀 ：第2章　親密性

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

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

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

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

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

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

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

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

如果再添點亂，情況會怎樣呢？

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

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

你的朋友是不是也像你這樣？他們會不會用不同的方式讀這個名片？

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

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

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

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

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

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

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

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

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

日期和期號呢？它們應(yīng)該更靠近一些，因為它們都標識這一期刊物。

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

請注意，這里還做了另外幾件事：

• 把所有大寫都變?yōu)樾懀槐Ａ艉线m的首字母大寫，這樣能留出更多空間，使標題更大、更醒目。
• 把圓角變?yōu)橹苯牵箍^的外觀更簡潔、更突出。
• 將天鵝圖放大，超出邊線。必須要讓它更顯眼。

因為文字內(nèi)容需要從背景中凸顯出來，我把小字體改為Trebuchet字體，這樣打印的時候就不會看不太清楚了。

創(chuàng)建廣告?zhèn)鲉巍⑿麄鲀浴⑿侣労唸蠡蛘咂渌霭嫖飼r，你很清楚其中哪些信息在邏輯上存在關(guān)聯(lián)，知道哪些信息應(yīng)當強調(diào)，而哪些信息不用強調(diào)。可以通過分組形象地表現(xiàn)這種信息。

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

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

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

例如，這個系列活動舉辦了多少場讀書會？

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

這個系列活動舉辦了多少場讀書會？

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

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

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

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

僅僅像這樣對頁面很快地看一眼居然就能得到這么多信息，這確實讓人驚嘆不已。正因如此，你要負責保證讀者確實得到正確的信息。

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

根據(jù)親密性原則來組織這些信息（如下圖所示），可以清楚地表達關(guān)鍵信息，包括：誰、做什么、什么時間以及在哪里。這樣一來就不會失去潛在的顧客，因為倘若不做此改進，他們有可能不愿在這一大堆雜亂無章的文本中搜尋，并因此放棄。

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

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

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

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

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

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

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

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

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

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

你可能會認為再沒有比這更糟糕的菜單了，但這確實是我從一家餐館拿到的。不錯，最嚴重的問題是所有的信息都堆在一起。

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

一旦為信息建立了不同的分組，接下來可以在頁面上擺弄這些信息組了。你手頭肯定有一臺計算機，怎么擺弄實在是方法多多。要學會如何用你的軟件格式化頁面。

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

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

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

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

Starters和Entrees前面確實再沒有足夠的空間留出空白了，不過設(shè)置縮進還是綽綽有余的。標題下面多出的空間有助于區(qū)分這兩組信息。只需一點點空間就能達到這種效果。

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

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

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

利用簡單的親密發(fā)生原則，信息將收集到多個邏輯組中，使訪問者能更容易地在網(wǎng)頁上導(dǎo)航。看看你感覺不錯的那些網(wǎng)站，你會發(fā)現(xiàn)，那些網(wǎng)站的信息都按邏輯做了分組。

這個頁面上的信息簡直亂七八糟。看看標題下面的網(wǎng)站鏈接。它們同等重要嗎？上面的布局似乎是這樣的，但實際上并非如此。

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

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

這里把引用的文字放在離正文更遠的位置，因為它們彼此并沒有直接關(guān)系。

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

親密性小結(jié)

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

根本目的

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

如何實現(xiàn)

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

要避免的問題

不要僅僅因為有空白就把元素放在角落或中央。
避免一個頁面上有太多孤立的元素。
不要在元素之間留出同樣大小的空白，除非各組同屬于一個子集。

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