如何根據設計目標使用合適的柵格化布局呢？在這里，我們將通過多個案例來研究布局設計，分析它們如何拓展到移動領域。

柵格系統是一種系統的調整設計，建立層級結構和邏輯的方法。許多好的設計都使用了柵格系統，它讓設計看起來更統一和協調。

在如今多設備環境下，響應式的柵格化布局可以創建更流暢的跨屏幕體驗。

文章目錄：

單欄布局

又稱全屏布局，是最簡單的布局方式，常用于登錄頁面。在單欄布局中，我們有足夠的空間來展示大型圖片，以此來增強產品或品牌想要傳達的信息。

在這樣的布局設計中，照片或圖形會被拉到前景焦點的位置，給用戶留下深刻的印象，所以這是主頁、簡介頁、操作指南或展示新產品的通用布局。

下圖左側是 WeWork 網站的主頁，右邊是 12 柵格系統覆蓋的狀態。

1. 柵格用法解析

單列布局中的每個元素都可以作為單獨的模塊，所以易于在移動設備上擴展。

在下圖 Wework 登錄頁面中，就突出顯示了柵格系統中的列（粉色）和模塊（紫色）。

在頁面中，無論是小的卡片模塊，還是大的模塊，模塊間的間距都是一致的。這個示例表明，單列布局的設計中也可以用有趣的方式分解頁面。

2. 案例?

下圖是單列布局的一些案例。可以試著分析一下這些網頁各自的柵格布局是什么樣的呢？

雙欄布局

最常見的布局之一。雙欄布局有兩個優勢：首先是保證了文本的寬度在 6-8 列，防止文本過長不容易閱讀；

另外就是可以將其他元素折疊在側欄作為導航或者廣告。

可以用 8 列作為主要內容區域，另外 4 欄用作側面內容區域，這樣左右兩面都是偶數，利于后期的設計和開發。

1. 案例

這種布局用途廣泛，適用于網站的內頁或者有大量文本出現的頁面。例如 Mango Learning 使用左側欄導航到不同的章節課程。

Discord 網站的左側有一個常見問題列表，并顯示當前是哪個問題。

Food & Wine 會在右側欄顯示其他食譜，以使讀者在網站上停留更長時間。

2.??移動端?

在移動端設計中，不能生搬硬套直接使用網頁的布局形式，而是需要根據側欄的具體功能來決定內容的層級關系。

如果側欄是導航欄或者問題欄，應該把它放在主要內容之前；如果側欄是閱讀更多或其他建議，那么應該把它放在主要內容的后面。

Mango Learning (左) 和 Discord (中) 都把側欄放到頂部，因為它們都是導航項；Food and Wine (右) 則把側欄的其他食譜放在主要內容的后面。

三欄布局

三欄布局的分配更加靈活，包括 4-4-4 布局、3-6-3 布局以及 2-5-3 布局。

1. 4-4-4布局

這種布局方式多用在展示大量圖像的網站中，有利于內容的整齊規范。

Unsplash(左)和Dribbble主頁(右)都針對縮放圖像采用這樣的布局設計。

2. 3-6-3布局?

這種布局方式多用于處理較長內容頁面，或者主內容不需要太多橫向空間。

Dribbble 的工作頁就采用了 3-6-3 的布局。紫色輪廓顯示了內容在網格上的位置，紫色色塊表示內容之間的距離，主要內容仍然在中間 6 列。

在不同的設備中，內容的顯示也會有差異。

接著使用 Dribbble 的工作頁作為例子，下面的截圖是 Dribbble 在不同設備上的頁面設計。

在平板電腦上(左)原先的三欄變成兩欄，左側的內容消失了；

在移動設備上(中)，右側欄被隱藏在另一個界面中，只有通過觸發按鈕才能展開該部分的內容(右)。

3.??2-5-3布局?

Facebook 和 Twitter 都采用這種布局，主要內容放在中間區域，用瀑布流的形式展示出來。

我們可能會注意到左側和右側的列數不一樣。這是因為它們的左側面板是導航欄，占用的空間少；右側面板包含生日，精彩集錦，提醒和趨勢等雜項，信息量多占用的空間也更寬。

?4. 柵格用法解析

不同的頁面可能需要不同的網格設置，這取決于產品。所以在 twitter 中，10 列的布局也是有效的，而且不均勻的分布為內容提供了清晰的層級結構。

基本上我們可以按自己喜歡的方式來劃分網格，劃分時需要認真考慮網站的用途，以及內容的層級關系如何構建。

如果一個網站的主要用途是閱讀長篇新聞，或者查看大圖片，我們不會使用三欄布局，因為需要使用更多的橫向空間。相反，會把導航放在頂部，并使用雙欄布局。

粘性布局

粘性布局是指用戶滾動頁面時，頁面上的某些面板會固定在屏幕上，出現粘性定位效果。

Airbnb 網站的右側欄就有一個粘性面板，它不隨著頁面的滾動而變化，而是定位在固定區域，方便用戶預訂住宿。

這些面板可以是帶有號召性消息的靜態面板，也可以是在更改信息時更新的動態面板。

如果我們希望突出顯示用戶可以執行的單個操作時，最好使用粘性布局。Airbnb 網站分成了兩欄 8-4 的布局，其中右邊四列為粘性面板。

設計粘性面板的一個重要準則是必須保持面板長度足夠短，使其在所有屏幕上都可見。

Web應用

有些站點有固定的導航，這些導航常常固定在屏幕頂部和左側，這些粘性導航幫助用戶在不同的目標之間來回切換。

由于這樣的設計意味著導航始終存在，因此可以利用它來簡化內容。

在下圖網頁版的 Spotify 中，左側和底部面板都是固定的。

對于 web 應用來說，粘性導航實際上不屬于網格，因為它一直固定在網格外面。

網格內部是需要布局的內容，當調整瀏覽器窗口時，只有網格中的內容會動態地改變大小。

1.? 案例?

網頁版的谷歌日歷中有一個固定的頂部導航以及顯示日歷控件的左側導航。

Google Keep 和 Spotify 一樣，它們都具有固定的通用導航，而且左側欄都具有粘性。

2. 移動端?

在移動體驗中，由于菜單項很多，導航項往往會隱藏在漢堡菜單中。

如果網頁版中有一個頂部導航充當總體導航，那么它在移動設備上可能仍然粘在頂部或底部。

為什么是底部呢？因為它離手更近，更容易觸摸點擊。

Slack(左) 將導航隱藏在左上角的圖標中；移動端的 Google Keep(右) 將導航隱藏在漢堡鍵中，還在底部添加了按鈕，用來快速創建新的筆記。

總結

良好的可用性不僅取決于外觀，還取決于有效性，可擴展性和可轉換性：

• 單欄布局中的元素位置更靈活，更易于在移動端擴展；
• 雙欄布局在保證文本可讀性的同時，側欄區域有更大的擴展潛力；
• 三欄布局分配靈活，但布局方式要取決于產品目標；
• 在粘性布局和 Web 應用中，注意粘性面板和固定導航里的內容要簡潔。

希望文章能夠為你提供幫助。

歡迎關注作者微信公眾號：「Clip設計夾」