起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識案例分析 | 響應式柵格的布局研究
如何根據(jù)設計目標使用合適的柵格化布局呢？在這里，我們將通過多個案例來研究布局分類，分析它們?nèi)绾瓮卣沟揭苿宇I域。
柵格系統(tǒng)是一種系統(tǒng)地調(diào)整設計，建立層級結構和邏輯的方法。許多好的設計都使用了柵格系統(tǒng)，它讓設計看起來更統(tǒng)一和協(xié)調(diào)。
在如今多設備環(huán)境下，響應式的柵格化布局可以創(chuàng)建更流暢的跨屏幕體驗。
文章目錄：
1. 單欄布局
又稱全屏布局，是最簡單的布局方式，常用于登錄頁面。在單欄布局中，我們有足夠的空間來展示大型圖片，以此來增強產(chǎn)品或品牌想要傳達的信息。
在這樣的布局設計中，照片或圖形會被拉到前景的位置，給用戶留下深刻的印象，所以這是主頁、簡介頁、操作指南或展示新產(chǎn)品的通用布局。
下圖左側是WeWork網(wǎng)站的主頁，右邊是12柵格系統(tǒng)覆蓋的狀態(tài)。
1.1 柵格用法解析
單列布局中的每個元素都可以作為單獨的模塊，所以易于在移動設備上擴展。在Wework登錄頁面中，就突出顯示了柵格系統(tǒng)中的列（粉色）和模塊（紫色）。
在頁面中，無論是小的卡片模塊，還是大的模塊，模塊間的間距都是一致的。這個示例表明，單列布局的設計中也可以用有趣的方式分解頁面。
1.2 案例
下圖是單列布局的一些案例。可以試著分析一下這些網(wǎng)頁各自的柵格布局是什么樣的呢？
2. 雙欄布局
是最常見的布局之一。雙欄布局有兩個優(yōu)勢：首先是保證了文本的寬度在6-8列，防止文本過長不容易閱讀；另外就是可以將其他元素折疊在側欄作為導航或者廣告。
可以用8列作為主要內(nèi)容區(qū)域，另外4欄用作側面內(nèi)容區(qū)域，這樣左右兩面都是偶數(shù)，利于后期的設計和開發(fā)。
2.1 案例
這種布局用途廣泛，適用于網(wǎng)站的內(nèi)頁或者有大量文本出現(xiàn)的頁面。例如：Mango Learning使用左側欄導航到不同的章節(jié)課程。
Discord網(wǎng)站的左側有一個常見問題列表，并顯示當前是哪個問題。
Food&Wine會在右側欄顯示其他食譜，以使讀者在網(wǎng)站上停留更長時間。
2.2 移動端
在移動端設計中，我們不能生搬硬套直接使用網(wǎng)頁的布局形式，而是需要根據(jù)側欄的具體功能來決定內(nèi)容的層級關系。
如果側欄是導航欄或者問題欄，應該把它放在主要內(nèi)容之前；如果側欄是閱讀更多或其他建議，那么應該把它放在主要內(nèi)容的后面。
Mango Learning (左) 和Discord (中) 都把側欄放到頂部，因為它們都是導航項；Food and Wine (右)則把側欄的其他食譜放在主要內(nèi)容的后面。
3. 三欄布局
三欄布局的分配更加靈活，包括4-4-4布局、3-6-3布局以及2-5-3布局。
4-4-4布局
這種布局方式多用在展示大量圖像的網(wǎng)站中，有利于內(nèi)容的整齊規(guī)范。Unsplash（左）和Dribbble主頁（右）都針對縮放圖像采用了這樣的布局設計。
3-6-3布局
這種布局方式多用于處理較長內(nèi)容的頁面，或者主要內(nèi)容不需要很多水平空間時。
Dribbble的工作頁就采用了3-6-3的布局。紫色輪廓顯示了內(nèi)容在網(wǎng)格上的位置，紫色色塊表示內(nèi)容之間的距離，主要內(nèi)容仍然在中間6列。
在不同的設備中，內(nèi)容的顯示會有差異。
接著使用Dribbble的工作頁作為例子，通過下面的截圖能看出來：在平板上(左)原先的三欄變成兩欄，左側的內(nèi)容消失了；在移動設備上(中)，右側欄被隱藏在另一個界面中，只有通過觸發(fā)按鈕才能展開該部分的內(nèi)容(右)。
2-5-3布局
Twitter和Facebook都采用這種布局，主要內(nèi)容放在中間區(qū)域，用瀑布流的形式展示出來。
我們可能會注意到左側和右側的列數(shù)不一樣。這是因為它們的左側面板是導航欄，占用的空間少，右側面板包含生日，精彩集錦，提醒和趨勢等雜項，信息量多占用的空間也更寬。
柵格用法解析
不同的頁面可能需要不同的網(wǎng)格設置，這取決于產(chǎn)品。所以在twitter中10列的布局也是有效的，而且不均勻的分布為內(nèi)容提供了清晰的層級結構。
基本上我們可以按自己喜歡的方式來劃分網(wǎng)格，劃分時需要認真考慮網(wǎng)站的用途，以及內(nèi)容的層級關系如何構建。
如果一個網(wǎng)站的主要用途是閱讀長篇新聞，或者查看大圖片，我們不會考慮使用三欄布局，因為我們想要使用更多的橫向空間。相反會把導航放在頂部，并使用雙欄布局。
4. 粘性布局
粘性布局是指用戶滾動頁面時，頁面上的某些面板會固定在屏幕上，出現(xiàn)粘性定位效果。
在Airbnb網(wǎng)站的右側欄就有一個粘性面板，它不隨著頁面的滾動而變化，而是定位在一個固定區(qū)域，方便用戶預訂住宿。
這些面板可以是帶有號召性消息的靜態(tài)面板，也可以是在更改信息時更新的動態(tài)面板。
如果我們希望突出顯示用戶可以執(zhí)行的單個操作時，最好使用粘性布局。Airbnb網(wǎng)站分成了兩欄8-4的布局，其中四列為粘性面板。
設計粘性面板的一個重要準則是必須保持面板長度足夠短，使其在所有屏幕上都可見。
5. Web應用
有些站點有固定的導航，這些導航常常固定在屏幕的頂部和左側，這些粘性導航幫助用戶在不同的目標之間來回切換。
由于這樣的設計意味著導航始終存在，因此可以利用它來簡化內(nèi)容。在網(wǎng)頁版的Spotify中，左側和底部面板都是固定的。
對于web應用程序設計，粘性導航實際上不屬于網(wǎng)格，因為它一直固定在網(wǎng)格外面。網(wǎng)格內(nèi)部是需要布局的內(nèi)容，當調(diào)整瀏覽器窗口時，只有網(wǎng)格中的內(nèi)容會動態(tài)地改變大小。
5.1 案例
網(wǎng)頁版的谷歌日歷中有一個固定的頂部導航以及顯示日歷控件的左側導航。
Google Keep和Spotify一樣，它們都具有固定的通用導航，而且左側欄都具有粘性。
5.2 移動端
在移動體驗中，由于菜單項很多，導航項往往會隱藏在漢堡菜單中。
如果網(wǎng)頁版中有一個頂部導航充當總體導航，那么它在移動設備上可能仍然粘在頂部或底部。為什么是底部呢？因為它離手更近，更容易觸摸點擊。
如上圖，Slack(左)將導航隱藏在左上角的圖標中；移動端的Google Keep(右)將導航隱藏在漢堡鍵中，還在底部添加了按鈕，用來快速創(chuàng)建新的筆記。
總結
良好的可用性不僅取決于外觀，還取決于有效性，可擴展性和可轉(zhuǎn)換性：
- 單欄布局中的元素位置更靈活，更易于在移動端擴展；
- 雙欄布局在保證文本可讀性的同時，側欄區(qū)域有更大的擴展?jié)摿Γ?/li>
- 三欄布局分配靈活，但布局方式要取決于產(chǎn)品目標；
- 在粘性布局和Web應用中，注意粘性面板和固定導航里的內(nèi)容要簡潔。
原文：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-common-ui-layouts-7073293697f8
作者：Christie Tang
譯者：Clippp，微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產(chǎn)品、交互、視覺上的設計思考。
本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
