網頁設計案例分析:邊框的使用
2012/12/26 14:59:04來源:互聯(lián)網
本文主要就網頁設計中邊框的使用進行實例的分析:
下圖是Gandi’s website網站的部分截圖。這個網站使用了方框和邊框來結構化網站內容,粗看上去比較淡雅,給人感覺不錯。但是問題在于,這個網站對很多內容都使用了邊框,導致出現(xiàn)了邊框的過度使用問題。
來看下面網站底部的大截圖,從下圖你可以看到,網站底部出現(xiàn)了多達5個邊框。雖然運用相似的原則,將相似的元素組合在一起可以體現(xiàn)內容層級和內容間的關系,但是也不能濫用。
這個網站有幾個部分,每個部分都有一個外邊框,這些部分又都包含在一個大的容器里。底部的內容里邊,有一個幫助提示(Helpful Tips),幫助提示也有一個帶背景顏色的外框,下圖就是它的結構圖:
我認為完全可以對它進行精簡而且不會丟失任何信息。
首先,我們可以先去掉最外邊的容器,因為它沒有太多的目的性,去掉它對網頁的結構不會造成任何影響。
其次,我們可以把幫助提示那個帶背景的框也去掉,并在中間加一個分割線,用來和右邊的內容區(qū)分。
上下兩個邊框是不能合并的,因為它們的內容有較大的不同,使用邊框將它們分割是一個好主意,下圖是我們精簡之后的結構圖:
現(xiàn)在看上去干凈整潔多了,我們來看看精簡后的實際效果:
僅僅是通過細微的調節(jié)就解決了邊框過多的問題。很多情況,內容的分割只需要用分割線就可以,通過簡單的分割線可以使網頁設計更加整齊,不會顯得雜亂,甚至有時候只通過空白也能達到分割內容的目的。
[教程作者:admin]
免責聲明:本站文章系圖趣網整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1276.html
本文地址:http://m.likemindfilms.com/tutorial/di1276.html
下一篇:簡化你的網頁設計
這些是最新的
最熱門的教程