“親密性”是“Web設(shè)計(jì)者應(yīng)遵循的高效設(shè)計(jì)原則”中的最后一個(gè)。引導(dǎo)用戶順利瀏覽網(wǎng)站，合理使用空白間隔，把相似的內(nèi)容放在一起，提供清晰的結(jié)構(gòu)是“親密性”設(shè)計(jì)標(biāo)準(zhǔn)的所有內(nèi)容。

　　間隔與關(guān)聯(lián)

　　圖1Web設(shè)計(jì)的親密性，即把相似或相關(guān)的元素組織在一起，對(duì)不相關(guān)或不相似的元素進(jìn)行分離。

　　當(dāng)元素之間發(fā)生重疊或接觸，那最上層的元素就會(huì)獲得主要的注意力。觀看圖1，你是否首先注意到“Proximity”這一部分?你的眼睛首先會(huì)被紫色部分吸引，之后向上移動(dòng)從左掃描其它部分嗎?如果附近的其它元素與之形成鮮明對(duì)比，那么重疊的元素就會(huì)立刻“黯然失色”。同樣，多個(gè)元素緊密地靠攏在一起，有鮮明對(duì)比的元素就會(huì)凸顯出來(lái)。在親密和對(duì)比之間取得平衡，甚至調(diào)整這兩個(gè)原則可以獲得不同的結(jié)果。看圖2，你的眼睛首先會(huì)被哪一部分吸引。你會(huì)首先注意到“Repetition”這部分嗎?

　　圖2相對(duì)于與其相近的元素，每個(gè)元素都有一個(gè)“重力極”(gravitational pole)，一個(gè)元素與另一個(gè)元素的親密程度也會(huì)影響到它的權(quán)重。正如地球的引力可以影響月球的運(yùn)轉(zhuǎn)軌跡一樣，頁(yè)面中的元素相對(duì)彼此的位置會(huì)影響到它及其他元素的權(quán)重。

　　空白區(qū)域

　　另一個(gè)“親密性”元素即Web頁(yè)面中空白區(qū)域。利用“外邊距”(margin)來(lái)分隔每個(gè)元素，內(nèi)邊距用來(lái)平衡內(nèi)容與空白區(qū)域。一般來(lái)講，太多的留白，會(huì)使網(wǎng)頁(yè)看起來(lái)不正規(guī)，給人一種缺少內(nèi)容的感覺(jué)。當(dāng)然，如果你的設(shè)計(jì)要求具有藝術(shù)效果，突出開(kāi)放空間，以達(dá)到吸引人的目的，那就這樣去做吧。

　　親密性與排版

　　上文討論了太多空白區(qū)域所帶來(lái)的消極影響，但內(nèi)容過(guò)于緊密同樣會(huì)使網(wǎng)頁(yè)看起來(lái)雜亂而擁擠。一般來(lái)講，恰當(dāng)?shù)目瞻讌^(qū)域更具有吸引力，更讓人舒服。下面兩個(gè)案例展示了空白區(qū)域的兩個(gè)極端，圖3中的空白區(qū)域太多，而圖4中的空白區(qū)域太少。

　　圖3

　　圖4

　　直觀的內(nèi)容流會(huì)在空白區(qū)域與排版元素(由文本內(nèi)容組成)之間達(dá)成一種平衡。圖5是一個(gè)IT課程列表，我們?cè)囍鴮?duì)該列表進(jìn)行調(diào)整，使它更適宜閱讀。

　　圖5

　　現(xiàn)在，看看圖6中所展示的相同內(nèi)容的列表。每個(gè)邏輯組之間通過(guò)合適的空白進(jìn)行分隔，每個(gè)組都由大標(biāo)題及無(wú)序的列表項(xiàng)組成。

　　圖6

　　第二個(gè)列表將內(nèi)容劃分為幾部分，每個(gè)子部分包括相應(yīng)的課程列表;每組課程列表與相關(guān)的子部分的標(biāo)題有親密關(guān)系。

　　利用間隔、排順、大小、關(guān)聯(lián)、顏色及空白區(qū)域和排版元素的劃分，“親密性”設(shè)計(jì)原則可以我們幫助組織頁(yè)面中的內(nèi)容元素。

　　原文鏈接：Effective design principles for web designers：Proximity

　　編譯鏈接：CSDN