9 個最佳網站佈局示例以及何時使用它們

已發表: 2020-12-04

每個專業設計師都清楚網站佈局在影響設計質量方面的作用。 網站的模式和結構是我們在設計過程的最早階段首先考慮的事情。 在確定我們網站的目標及其應包含的元素後,頁面佈局設計有效地開始了將想法寫在紙上的第一階段。

只有在您決定了網站的結構以及如何相應地繪製您的內容之後,您才能構建低保真線框並探索最適合您想要實現的目標。

它是一個高度可視化的主頁,以全屏媒體佈局的形式最適合您的內容策略嗎? 還是以更均勻的格式分佈信息層次結構更有意義,使用分屏佈局來顯示具有相互重要性的多個內容部分?

通過查看我們精心挑選的九個專業設計師最常使用的網站佈局設計示例,這正是我們將要探索的內容。

評估這些示例將幫助我們了解每種佈局類型在構建實現我們設計目標的網站內容中所扮演的角色。 最終,知道何時以及如何為我們的網站利用正確的佈局 - 將使我們能夠構建更強大的設計策略並製作更漂亮的網站。

使用網站網格構建頁面佈局

目錄

  • 什麼是網站佈局?
  • 每個網站佈局必須包含的內容
  • 9 種最有效的網站佈局
  • 1.單欄佈局:世界名牌iPad
  • 2. 兩欄佈局:Earmark
  • 3. 三盒佈局:KatchMe
  • 4.分屏佈局:Bose
  • 5. 不對稱佈局:下腹部
  • 6. 固定側邊欄:Arbor 餐廳
  • 7. 全屏媒體佈局:荷蘭國家歌劇院和芭蕾舞團
  • 8. 網格佈局:Malika Favre
  • 9. 盒子佈局:多倫多證券交易所百老匯
  • 準備、設置、構建

什麼是網站佈局?

網站佈局是定義網站結構的框架。 佈局將網站的關鍵元素放在前面和中間,為用戶提供清晰的導航路徑。 網站佈局是決定網站成功與否的關鍵因素。

網站佈局的目標是提高用戶參與度,使網頁具有視覺吸引力,並組織網站內容,使其以清晰的順序組合在一起

每個網站佈局必須包括的內容

雖然我們當然看到了專業網頁設計中有多少佈局可供選擇的美妙之處,但每種佈局類型也必須包含一些基本組件,即使以非常規的方式包含在內。 正如我們從雅各布定律中知道的那樣,網頁設計中最基本的原則之一是界面佈局和導航流應該具有引人入勝的獨特性,同時與用戶的合乎邏輯和直觀的熟悉度相平衡。

本質上,我們在規劃頁面佈局時絕不能忘記包括:

  • 網站標題,它應始終捕獲最簡單的導航元素,傳達您網站的基本結構以及如何找到您要查找的內容
  • 頁面正文,網頁的核心部分,例如視覺內容、主要消息等。
  • 導航菜單,無論是側邊欄、漢堡菜單、子標題、大型菜單、滾動觸發、粘性或固定菜單,還是其他形式。
  • 網站頁腳,無論多短或多高,頁腳通常包含社交頻道鏈接、版權聲明和隱私政策鏈接,以及其他可選項目,例如頁眉菜單內容的副本、號召性用語,例如“訂閱”、 “聯繫我們”,甚至是提交表格。

現在,對於我們一直在等待的網頁設計靈感,我們最喜歡的一些最常用的網站佈局示例。

了解如何使用 Elementor 優化您的網站佈局