案例分析|響應式柵格的布局研究

2020-12-15 人人都是產品經理

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

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

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

文章目錄:

1. 單欄布局

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

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

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

1.1 柵格用法解析

單列布局中的每個元素都可以作為單獨的模塊,所以易於在行動裝置上擴展。在Wework登錄頁面中,就突出顯示了柵格系統中的列(粉色)和模塊(紫色)。

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

1.2 案例

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

2. 雙欄布局

是最常見的布局之一。雙欄布局有兩個優勢:首先是保證了文本的寬度在6-8列,防止文本過長不容易閱讀;另外就是可以將其他元素摺疊在側欄作為導航或者廣告。

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

2.1 案例

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

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

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

2.2 移動端

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

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

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

3. 三欄布局

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

4-4-4布局

這種布局方式多用在展示大量圖像的網站中,有利於內容的整齊規範。Unsplash(左)和Dribbble主頁(右)都針對縮放圖像採用了這樣的布局設計。

3-6-3布局

這種布局方式多用於處理較長內容的頁面,或者主要內容不需要很多水平空間時。

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

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

接著使用Dribbble的工作頁作為例子,通過下面的截圖能看出來:在平板上(左)原先的三欄變成兩欄,左側的內容消失了;在行動裝置上(中),右側欄被隱藏在另一個界面中,只有通過觸發按鈕才能展開該部分的內容(右)。

2-5-3布局

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

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

柵格用法解析

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

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

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

4. 粘性布局

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

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

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

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

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

5. Web應用

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

由於這樣的設計意味著導航始終存在,因此可以利用它來簡化內容。在網頁版的Spotify中,左側和底部面板都是固定的。

對於web應用程式設計,粘性導航實際上不屬於網格,因為它一直固定在網格外面。網格內部是需要布局的內容,當調整瀏覽器窗口時,只有網格中的內容會動態地改變大小。

5.1 案例

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

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

5.2 移動端

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

如果網頁版中有一個頂部導航充當總體導航,那麼它在行動裝置上可能仍然粘在頂部或底部。為什麼是底部呢?因為它離手更近,更容易觸摸點擊。

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

總結

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

單欄布局中的元素位置更靈活,更易於在移動端擴展;雙欄布局在保證文本可讀性的同時,側欄區域有更大的擴展潛力;三欄布局分配靈活,但布局方式要取決於產品目標;在粘性布局和Web應用中,注意粘性面板和固定導航裡的內容要簡潔。原文:https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-common-ui-layouts-7073293697f8

作者:Christie Tang

每周精選設計文章,專注分享關於產品、交互、視覺上的設計思考。

本文由 @Clippp 翻譯發布於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議

相關焦點

  • 手把手教你做規範:布局規範(柵格)
    屏幕端對不同尺寸頁面響應式時更省時省力對一種方法,是讓減輕我們工作量對方法,看到這裡是不是心動了,那就往下看看~柵格最早是應用於平面設計中,產生於二十世紀初的西歐,完善於五十年代的瑞士,通過有規律的網格來指導版面布局。
  • 【史上最幹】Material Design複雜響應式設計
    既然是通用大綱,那麼拋開產品僅談設計,難免會停留於「通用」層面,而利用Material Design進行實戰的案例,網上也多是app的一些設計嘗試。恰好在近期的工作學習中,接手一個響應式web站點的改版設計,筆者參考Material Design總結以下三點分享如何實現複雜響應式站點的Material Design。
  • 交互規範:響應式讓屏幕利用更高,用戶體驗更佳
    本文主要圍繞什麼是響應式,如何搭建響應系統,響應式網站解析 三個部分進行闡述,在項目中提前定義好響應系統將有助於設計師在設計中考慮頁面在不屏幕斷點上布局,希望對正在了解響應式知識的你有幫助!!!1.什麼是響應式馬科特說,真正的響應式設計方法不僅僅是根據可視區域大小而改變網頁布局,而是要從整體上顛覆當前網頁的設計方法,是針對任意設備的網頁內容進行完美布局的一種顯示機制。也就通過 CSS3’s 的媒體查詢識別當前屏幕寬度,在根據預設的屏幕斷點比對展示相應的頁面結構布局、版式設計以及不同數量信息的展示。
  • bootstrap 用什麼布局專題及常見問題 - CSDN
    bootstrap學習之布局(柵格布局)今天自己在網上學習了BOOTSTRAP柵格系統,很有體會,希望將自己的學習心得寫寫下來供自己日後參考學習1.什麼是柵格布局?
  • 響應式布局技術:App如何適配不同尺寸的設備
    響應式就是基於同一套代碼,開發一個APP能夠兼容多尺寸、多終端設備的顯示,能夠動態調整頁面的布局以及容器的布局,充分利用當前屏幕的尺寸,為用戶顯示更多的內容,提供更好的瀏覽體驗,同時提升APP的開發效率,迭代速度更快,保障多終端業務同步發展。
  • Bootstrap4.4.1網格實現響應式布局,只需要掌握這一點就行
    實現前端網頁實現響應式布局如果是自己寫代碼來實現真的挺困難的,但是使用bootstrap框架就非常容易了,即使不懂前端開發也可以很好地駕馭。當前最新版本是bootstrap4.4.1,和之前的老舊版本相比較在細節方面做了很多的優化和升級,其中網格系統是實現網頁響應式的核心組成部分。
  • 用Adobe XD 12更智能的快速完成響應式設計
    9月Adobe XD CC 發布12.0版本,新增響應式調整大小和約束功能,可以調整在多個外形規格中以不同的大小保持空間關係的對象的大小,快速實現響應式設計。Adobe XD CC 響應式在Adobe XD CC中選中任一或多個元素,在屬性檢測器會看到響應式調整大小的選項。
  • 進口乾貨:網頁設計中柵格的應用(中英文)
    三分法則「三分法則」就是通過使用一個簡易柵格,來確保在界面加入元素的時候會放置在某個三等分的行上。這樣的布局會更看起來更使人愉快, 比如在攝影當中,三分法則就是個十分常用的方法。但是,儘管這個方式可能是一個很好的設計起點,也通常能夠幫你做出正確的選擇,我還是建議你在具體情況下具體分析它是否是最合適的解決辦法。
  • 響應式設計:一個網站,讓整個世界了解你
    這篇文章將帶你了解一個最好的選擇——響應式網頁設計。 一、響應式網站設計概念 響應式網站設計(Responsive Web design)的理念是:頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。
  • JFinal-layui v1.4.1 發布,實現響應式,解決表單重複提交
    JFinal-layui v1.4.1 主要實現響應式布局,解決表單重複提交問題,以及優化多選樹的展開功能。v1.4.1更新內容詳情:一、實現響應式布局    在給客戶開發的系統能夠現象響應式展示,那麼會給客戶的工作帶來便利。
  • 移動端H5常見的布局方式有哪些
    響應式頁面兼容移動端即pc和移動端共用一套網站,只不過在不同屏幕下,樣式會自動適配響應式媒體查詢bootstarp比如三星的官網 , 用不同終端打開, 它會自動適配不同的樣式,但是卻是一套代碼 ,但是由於響應式網站能夠適應市場上所有主流終端,在開發中的測試量非常很大很麻煩,因此響應式布局不能在大型網站的前提下實現多終端自適應。
  • 騰訊移動遊戲用戶研究大揭秘:研究思路、方法、案例及步驟
    用戶研究繁瑣而複雜,雖然遊戲公司都有類似的分析,例如競品,但真正的分析研究需要專人或是部門負責,並不適合大部分的公司,但是研究的結果卻對產品立項研發以及用戶體驗方面有重要的價值。騰訊眾多遊戲成功的背後,離不開基於大量數據和用戶的研究分析,而本次分享中涉及到的移動遊戲用戶研究思路、研究方式、研究結論以及具體案例中都有許多可借鑑參考的地方。以下是遊戲陀螺整理篩選的具體內容。
  • 2019年中國輕醫美市場布局、在線平臺競爭格局及標杆案例分析
    輕醫美機構、網際網路醫美平臺紛紛布局輕醫美市場,順應需求推進輕醫美服務線上線下協同供給。醫美機構發力布局輕醫美,輕醫美診所誕生隨著消費意識的覺醒和消費需求迸發,醫美機構紛紛發力布局輕醫美領域,大型連鎖醫美機構開始與美團醫美等網際網路醫美平臺合作,提供更多輕醫美項目並將服務和產品線上化。
  • 5大方面,8個案例詳解創意旅遊產業創新與規劃|中哲研究
    創意產業是文化、經濟一體化的必然選擇,創意產業為創意旅遊創造了全新的發展模式,本文將從5大方面,8個案例,為大家詳細拆解分析創意旅遊的產業創新與規劃。三、主題產業創意旅遊主要內容: 浙江諸暨珍珠文化創意旅遊產業研究 河北遷西板慄旅遊創意產業鏈研究1、浙江諸暨珍珠文化創意旅遊產業研究
  • 資料|MATLAB優化算法案例分析與應用(進階篇)
    from=leiphonecolumn_res0817內容簡介 · · · · · ·《MATLAB優化算法案例分析與應用(進階篇)》是深受廣大讀者歡迎的《MATLAB優化算法案例分析與應用》一書的姊妹篇,即進階篇。本書全面、系統、深入地介紹了MATLAB算法及案例應用。
  • 使用Windows 8模擬器及Visual Studio 2012調試IE 10觸控及響應式...
    目前我正在研究IE 10觸控事件。雖然我已經十分幸運地擁有了一臺Windows 8平板電腦,但是我仍在尋找一種更加簡便的方法,即無需每次切換至平板電腦,便可直接在經典筆記本上執行基本測試的方法。在尋找該方法的過程中,我發現了一些技巧和竅門,有了這些經驗,您就可以在不使用觸控設備的情況下,對代碼中的IE 10觸控事件進行調試了。
  • 湖南法院32篇案例在全國法院系統優秀案例分析評選活動中獲獎
    湖南法院網訊 近日,由最高人民法院主辦的全國法院系統2020年度優秀案例分析評選活動獲獎名單公布。湖南法院系統共有32篇案例獲獎,其中二等獎6篇,三等獎14篇,優秀獎12篇。湖南高院獲得先進組織單位獎,唐競獲先進組織個人獎。
  • 中山大學管理學院講座預告丨案例研究近路之爭:案例研究最佳實踐...
    中山大學管理學與經濟學系列前沿講座之四一四講暨「案例思享會」專題講座第17講講座主題案例研究近路之爭:案例研究最佳實踐主講嘉賓李平 教授(寧波諾丁漢大學)主持人梁劍平 副教授講座時間
  • 數據分析案例及新手如何學習數據分析
    數據分析常見作用之案例一:提升效率 數據分析常見作用之案例二:驗證猜想 >數據分析常見作用之案例三:修正方向 數據分析常見作用之案例四:輔助決策 數據分析常見作用之案例五:了解現狀
  • 研究人員使用高性能熱塑性塑料分析FFF 3D列印
    中國3D列印網4月23日訊,Shahriar Bakrani Balani最近在土魯斯國家理工學院發表了題為「高性能熱塑性塑料的增材製造:熔融長絲加工的實驗研究和數值模擬」的論文。進一步研究材料和3D列印科學,Balani提供了FFF 3D列印的全面定義,同時著重於工藝參數和材料的重要性。從使用Chuck Hull和第一臺SLA印表機的3D列印開始,Balani給出了該技術的完整歷史-並解釋了該技術的發展基礎及其工作原理。 Balani概述了三個不同的AM組(基於液體的,基於固體的和基於粉末的)以及所有可能的所得過程。