設計網站的第1步是了解網站地圖,設計師依據網站的版面劃分來編排不同版面的空間大小和方位關系。網站的布局實際上就是把文本、圖片、多媒體等在頁面里邊進行合理的安排排列。由此,網站設計也衍生出許多種類的布局款式。
Banner式布局:顧名思義,Banner式布局就是指頁面上方是導航條,頂部是一個Banner,下方是其他內容。這種布局辦法的長處是頁面的結構十清楚晰,主次清楚。不管屏幕的尺寸是什么,網頁的內容都會明晰地出現出來。
Banner式布局是網站設計中基本也是遍及的一種設計方法,比方說站酷、好奇心日報等。雖然有的設計師會將Banner設計成固定寬或許橫跨整個頁面的大小,但總體的布局款式都是差不多的。
上下型布局:指的是網頁的上下都有一個廣告條,左右兩側是超鏈接,中心放置主要內容,下面是網站的基本信息、聯系方式、版權聲明等。
很顯然,這種布局辦法的長處是能夠充分使用版面,盡可能多地傳達信息量。同時,網站設計師需要注意板塊的內容和面積大小,不能讓頁面過火臃腫。
左右型布局:是將網頁分為左右兩頁的框架結構,左邊是導航鏈接,頂端是小標題,右面是主要內容。
現在大部分的導航網站、論壇都采取了這種結構,十清楚晰,一目了然。比方說科技網站36氪,左邊是咨詢分類,中心是新聞和文章。
POP式布局:POP是廣告中的術語,意思是售點廣告。在網站設計中,POP式布局是指頁面的布局設計像一張宣揚海報,精巧又吸睛。
通常情況下,時髦購物類網站會采取POP式布局,用一張精巧的圖片作為頁面中心,在頂端或許下方放置導航條。POP式布局的缺陷是由于圖片過大,渲染速度較慢。
有時,POP式布局還加上小動畫,或許直接在圖片上放上對應的鏈接。這種設計一般會出現在企業介紹的主頁或許個人網頁,給人一種簡潔、優雅的視覺享受。
標題正文型布局:這種類型的布局是網站設計中簡單的一種款式,通常是頂端放置標題,下方用作正文區。設計師們喜愛在咨詢文章頁面、注冊頁面等使用標題正文型的布局款式,這樣的款式能夠小程度地打擾用戶,還給用戶一個安靜的閱讀體驗。
其實,不管設計師采用哪一種布局,在網頁設計中,重要的要求是主次清楚和重點突出。只有當頁面中有一個明確的視覺中心時,網站用戶才能夠迅速找到內容重點,不至于進入到網站后變得一頭霧水。
網站設計師還能夠使用留白來制造視覺會集的作用,引導用戶的視線到主要內容區域。比方蘋果官網中,在產品的介紹頁面,僅保留了中心的概況圖片和上下方的導航條,很多的留白使得用戶會集注意力在產品圖上面。