Web設計師應遵循的高效設計原則之親密性

　　“親密性”是“Web設計者應遵循的高效設計原則”中的最後一個。引導用戶順利浏覽網站，合理使用空白間隔，把相似的內容放在一起，提供清晰的結構是“親密性”設計標准的所有內容。

　　間隔與關聯

　　圖1Web設計的親密性，即把相似或相關的元素組織在一起，對不相關或不相似的元素進行分離。

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

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

　　空白區域

　　另一個“親密性”元素即Web頁面中空白區域。利用“外邊距”(margin)來分隔每個元素，內邊距用來平衡內容與空白區域。一般來講，太多的留白，會使網頁看起來不正規，給人一種缺少內容的感覺。當然，如果你的設計要求具有藝術效果，突出開放空間，以達到吸引人的目的，那就這樣去做吧。

　　親密性與排版

　　上文討論了太多空白區域所帶來的消極影響，但內容過於緊密同樣會使網頁看起來雜亂而擁擠。一般來講，恰當的空白區域更具有吸引力，更讓人舒服。下面兩個案例展示了空白區域的兩個極端，圖3中的空白區域太多，而圖4中的空白區域太少。

　　圖3

　　圖4

　　直觀的內容流會在空白區域與排版元素(由文本內容組成)之間達成一種平衡。圖5是一個IT課程列表，我們試著對該列表進行調整，使它更適宜閱讀。

　　圖5

　　現在，看看圖6中所展示的相同內容的列表。每個邏輯組之間通過合適的空白進行分隔，每個組都由大標題及無序的列表項組成。

　　圖6

　　第二個列表將內容劃分為幾部分，每個子部分包括相應的課程列表;每組課程列表與相關的子部分的標題有親密關系。

　　利用間隔、排順、大小、關聯、顏色及空白區域和排版元素的劃分，“親密性”設計原則可以我們幫助組織頁面中的內容元素。

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

　　編譯鏈接：CSDN