網(wǎng)頁(yè)設(shè)計(jì)案例分析：邊框的使用

本文主要就網(wǎng)頁(yè)設(shè)計(jì)中邊框的使用進(jìn)行實(shí)例的分析：

下圖是Gandi’s website網(wǎng)站的部分截圖。這個(gè)網(wǎng)站使用了方框和邊框來(lái)結(jié)構(gòu)化網(wǎng)站內(nèi)容，粗看上去比較淡雅，給人感覺(jué)不錯(cuò)。但是問(wèn)題在于，這個(gè)網(wǎng)站對(duì)很多內(nèi)容都使用了邊框，導(dǎo)致出現(xiàn)了邊框的過(guò)度使用問(wèn)題。

來(lái)看下面網(wǎng)站底部的大截圖，從下圖你可以看到，網(wǎng)站底部出現(xiàn)了多達(dá)5個(gè)邊框。雖然運(yùn)用相似的原則，將相似的元素組合在一起可以體現(xiàn)內(nèi)容層級(jí)和內(nèi)容間的關(guān)系，但是也不能濫用。

這個(gè)網(wǎng)站有幾個(gè)部分，每個(gè)部分都有一個(gè)外邊框，這些部分又都包含在一個(gè)大的容器里。底部的內(nèi)容里邊，有一個(gè)幫助提示（Helpful Tips），幫助提示也有一個(gè)帶背景顏色的外框，下圖就是它的結(jié)構(gòu)圖：

我認(rèn)為完全可以對(duì)它進(jìn)行精簡(jiǎn)而且不會(huì)丟失任何信息。

首先，我們可以先去掉最外邊的容器，因?yàn)樗鼪](méi)有太多的目的性，去掉它對(duì)網(wǎng)頁(yè)的結(jié)構(gòu)不會(huì)造成任何影響。

其次，我們可以把幫助提示那個(gè)帶背景的框也去掉，并在中間加一個(gè)分割線，用來(lái)和右邊的內(nèi)容區(qū)分。

上下兩個(gè)邊框是不能合并的，因?yàn)樗鼈兊膬?nèi)容有較大的不同，使用邊框?qū)⑺鼈兎指钍且粋€(gè)好主意，下圖是我們精簡(jiǎn)之后的結(jié)構(gòu)圖：

現(xiàn)在看上去干凈整潔多了，我們來(lái)看看精簡(jiǎn)后的實(shí)際效果：

僅僅是通過(guò)細(xì)微的調(diào)節(jié)就解決了邊框過(guò)多的問(wèn)題。很多情況，內(nèi)容的分割只需要用分割線就可以，通過(guò)簡(jiǎn)單的分割線可以使網(wǎng)頁(yè)設(shè)計(jì)更加整齊，不會(huì)顯得雜亂，甚至有時(shí)候只通過(guò)空白也能達(dá)到分割內(nèi)容的目的。

譯文鏈接：A Mild Case Of Borderitis