在網站建設設計中,網頁設計是核心,核心不僅僅體現在網頁設計上,還體現在網頁的佈局上,往往一個精密的網站佈局體現網站的戰略眼光和專業水平。在網站建設中,常用的網站佈局有以下 5 種常用的方式和技巧。
  1. 頂部大圖 Banner+簡單的柵格
  無論螢幕多大,這種佈局都能夠為多使用者展示充足的內容,供多使用者瀏覽和探索。雖然這種佈局隨著螢幕、裝置而有所差異,有的設計師會傾向於設計成固定寬或者橫跨整個頁面的佈局,但是總體的模式都大同小異。
  ·導航欄
  ·頂部大圖,圖片上疊有文字標題
  ·2~4 個分欄,承載不同類別的資訊,有的會有圖示
  ·主要的內容區域
  ·頁尾
  這種佈局設計乾淨清爽,有足夠強的視覺表現力,並且常常採用的響應式設計,斷點也很好控制。頂部大面積的輪播圖或者 Banner 也有許多外掛或者應用來幫您實現。
  2. 單頁式設計這幾年非常火,它非常適宜於展現極簡的內容,或者專注呈現一個主題。當網站建設的主題集中,內容也比較固定的時候,無需複雜的佈局來呈現,單頁單列式的佈局足以應付一切。
  ·導航
  ·主要內容區域,文字+圖片為主
  ·頁尾
  採用這種佈局模式的時候,空間的控制至關重要,相當考驗設計師設計留白和佈局平衡的功力。元素和元素之間的疏密關係是需要設計師反覆推敲的,如果空間控制不合理會給多使用者一種混亂的感覺,如果過於緊密則會產生侷促感。
  原理:單頁式設計適合於小網站或者小型專案的展示,它可以用來製造一個簡單的介紹頁面,讓簡單的內容顯得不那麼單調,強化內容的形式感和重量感。對於內容簡單的部落格網站建設而言,單頁式設計也是不錯的選擇。
  相關趨勢:和單頁設計結合最緊密的應該是動效設計和視差滾動,他們可以讓單頁式設計更加生動有趣,淡化單調的設計,賦予頁面更強的生命力。
  3. 通欄
  這種佈局方式相對於大框套小框而言,多使用者瀏覽網頁不在受到方框的限制,這種方式顯得大氣些,眼界顯得更開闊些。
  另外這種方式還有一個便利之處那就是主視覺部分可以隨機靈活處理,既能往上移到網站 logo 和導航的位置,也可以移到向下擴充套件的內容區域。這種佈局方式也是網站中常用的佈局方式。
  4. 導航在主視覺下方的佈局。
  這種佈局方式在一些資訊入口網站建設中還是比較常見的,導航直接放置在 banner 的下面,這可以彌補 banner 中設計素材被截斷的缺陷。
  另外這種佈局方式,多使用者開啟網頁就能看到網站的導航,這樣對於新客戶來說是及其友好的,新客戶不用刻意去尋找網站的導航,而且訪客可以透過第一眼就能分清網站主要導航內容。
  5. 極簡分層
  極簡化的設計一直都在流行,它的流行不是沒有原因的。開放式的空間讓多使用者感覺更加輕鬆,也使得其中展現的內容更容易被聚焦。如果極簡化的頁面中加入不多的幾個並列的內容層,可以讓資訊更有層次,也使得極簡的頁面擁有了細節。
  這種設計並不複雜,但是讓頁面更加有趣了,它可以適配更多不同型別的專案了。這也解釋了為什麼多使用者如此的喜愛類似 WordPress APPle 官網這樣的設計。
  原理:極簡化的頁面中加入簡單的幾個分層,讓頁面有了視覺焦點,尤其是當設計者想要引導多使用者關注到某個關鍵的內容的時候,這種頁面佈局很很容易實現這一點。
  相關趨勢:微妙的陰影和漸變常常被用在這樣的頁面當中,強化元素之間的層次感。雖然這些設計手法一度 “過時”,但是現在大有捲土重來之勢,而 Material Design 這樣的設計風格就是它們的衝鋒號。
  許多設計手法、設計趨勢都常常會被人質疑,但是如果撇開情感因素,從最基本的設計原理上來推導這些趨勢的時候,能夠從根本上判讀這些設計手法是否真的是有價值的。
  今天所談及的這些網站建設佈局是經過時間洗煉的經典設計,挑選合適的設計趨勢同這些佈局結合起來,常常能夠帶來不錯的效果。