佈局的範本

大多數我們所談論迄今的設計理論。理論很好,但是它僅僅使我們理解在網站設計中為什麼一些想法有用—-而一些不行。在我看來,例子和練習更有價值。

大多數的學術圖形設計方案都含有很豐富的藝術史和藝術。這些知識能夠為我們從藝術的觀點上理解平面設計提供了一個很好的基礎,但是它們卻在你把設計應用到網站設計中缺乏挑戰性。

畢卡索曾說過:“我一直做我不能這樣做的事情,為了可以學習如何做到這一點。”雖然我很喜歡在設計一個新網站時採取這種做法時,首先必須知道什麼你可以做。當你流覽互聯網,您會看到佈局的可能性實在是無止境的。但是,正如我前面說過,只有這些可能性的少數產生良好的設計思想。

這就是為什麼我們一遍又一遍地看到身份,導航,內容的某些設置。在這一節中,我們會談論一些最常用的佈局,並探索一些他們的優點和缺點。

左列導航

無論我們談論的可變或固定寬度的佈局設計,左邊的導航列格式是事實上的標準。在ThinkGeek網站,如圖1.24 ,是這種設置的一個典型的例子12。適合應用這個模型的許多網站不一定使用左列作為主要的導航塊,有時你會看到導航單獨在網頁的頂部,但它們仍然處於低於主標題把佈局分為狹義(三分之一或更少)的左列和右列。

http://www.thinkgeek.com/ 這是一個現狀,就像安全毯,或在腋下有洞的舒適的襯衫,即使讓你妻子非常不滿意你還是每週穿一次。由於這些原因,任何項目佈局採用左列導航是一個保險的選擇。

  

1.24: ThinkGeek網站上的左列導航

在網站設計中使用左側導航列的缺點是,他們缺乏創造力。他們被多方面使用了很多次,並在許多方面,他們往往看似相同的。這並不是說你不應該使用左列導航佈局。

我猜想:我已經設計出來的網站中的75%基於左邊的列航行模型,但在我的能力範圍內我嘗試不同的方式。在談到差異,試試講左邊列的導航換到正文的右邊。那樣你便有一個右列導航。

右列導航

雖然很難找到像Audi(如圖1.25描述)的網站,那就是把主要的網站導航放於網頁的右側,要找到將分導航,廣告或者分內容置於網頁右邊的網站是很容易找到的13。一直以來,在西方文化,我們的眼睛掃描從左至右,這使該網頁的主要內容被觀眾第一眼看到。

http://www.audi.com 

   

1.25: Audi的網站的右列導航

我不能確定為什麼沒有更多的網站利用右列。我看過的研究是關於右手功能表的可用性和實用性。以我自己的經驗,我的遊標往往徘徊在右側的流覽器視窗,這樣我就可以接近捲軸。

歸根結底,這些都是為了滿足您的客戶的真正需求,以及如何使得人們認識到他們的線上存在。左列導航為我們所熟悉和更加的標準,但是這並不總是設計一個新網站的最優先選擇。一個事情需要被肯定,但如果您希望您的設計和普通的網站不一樣,但您仍希望用戶能夠找到您的導航,你可以試一試用右列導航。

三列導航

典型的三列佈局具有大的中心欄加上兩側的兩個小導航列。蘋果商店網站如圖1.26就是常見的主食網頁佈局的一個例子14。雖然三列可能是有很多導航、短期位元的內容或廣告顯示的網站所必須的,重要的是要記住,如果我們想避免版面出現混亂,空格是至關重要的。

幸運的是,蘋果商店網站的列欄現象只存在於首頁,並且中心列留有一些空白,有助於促進眼球移動。

http://store.apple.com/

 

1.26: Apple Store網站中的三列示意圖

靈感源泉

僅僅因為左,右,三列佈局配置的情景是大多數網頁設計的設計範本並不意味著你必須局限於這些佈局。過多,是的,很多設計展示和畫廊網站具有很多標新立異的想法,可以幫助您進行模組設計,包括以下(僅僅舉幾例)  

n        CSS Zen Garden at http://www.csszengarden.com/

本網站展示的是CSS最新想法的原版。即使你不打算設計一個CSS Zen Garden,這也是一個重要的靈感源泉。

 n        CSS Beauty at http://www.cssbeauty.com/

CSS Beauty不僅是一個畫廊精心設計的CSS網站,還是CSS 網站設計的入門。

 

 n        Stylegala Gallery at http://www.stylegala.com/archive/

Stylegala是網頁設計和標準的一個偉大的資訊來源,但畫廊的功能只有最佳的最好的新的CSS設計。

 

 n        CSS Vault at http://cssvault.com/

CSS Vault畫廊的歸檔可以追溯到200311月,所以它不僅是一個重要的靈感的來源,還是優秀的CSS設計的一個歷史資料庫。

 n        Design Interact Site of the Week at http://www.designinteract.com/sow/

就良好的措施,在這樣的一個畫廊,不專注於CSS的基本設計。設計互動就是以多媒體技術為重點的剝離通信藝術,是可視通信和圖形設計的領先的貿易雜誌。

設計互動自19981月開始每星期突出(和歸檔)一個新的和獨特的網站。

推薦給同仁

Tell a Friend 


您想要瞭解更多的免費小竅門以便提升你的網站排名嗎?
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com