起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識移動端的柵格欄選擇以及適配
編輯導語：針對于馬蜂窩和騰訊動漫改版，發現柵格欄逐步向24格。在互聯網中，柵格欄應用于網頁和移動端中。馬蜂窩和騰訊動漫為什么會突然作出改變，其原因是什么？我們一起來看看吧。
先講一下為什么要寫這個方向（坑），最近在研究馬蜂窩改版以及騰訊動漫的改版發現了現在柵格欄逐步向24格（原先是12格子）。
柵格欄原先是平面設計中為了更有規律的展現設計（參考報紙或者書籍），后來隨著互聯網的興起逐步延伸到網頁以及移動端之中。
網頁的柵格欄是大家一直在談的話題，反而移動端則是很少談到的話題。今天主要來討論移動端柵格欄選擇的問題。
先展示一下馬蜂窩的改版以及騰訊動漫的改版，分別柵格欄的參數。
馬蜂窩(左右10px,寬度11px.水槽5px)
騰訊動漫（左右16,寬度12px,水槽4）
一、變化的原因
1. 互聯網的發展
互聯網從1993年進入到中國開始，到現在有28年的歷史?；ヂ摼W也是在這28年里逐步向多元化發展。隨之而來的是用戶的需求也隨著互聯網本身的變化而變得多樣化，從原來的只是打電話和收發短信,后來逐步參與一些小游戲等等。
到現在手機可以說是成了人們不可分割的一部分，但是對于產品而言也同時意味著同一個頁面要承載更多的內容。而且對于交互的挑戰等等難度也在提升。
2. 手機硬件的發展
手機屏幕從一開始3.5到現在5.5甚至于更大的屏幕方向發展，在屏幕越來越大的基礎上能夠承受的視覺，以及功能板塊也在不斷的增加以及優化。這也是為了后面的變化做好了鋪墊。
二、柵格欄和24柵格欄的2個實驗比較
首先要先明確柵格欄的計算公式：（m+a）*n-a=414（x的尺寸）-2b(m 柵格寬；a 槽寬；b 留白寬；n柵格個數），設置一個固定值b=16（常用數值）。屏幕固定在xr（414）。
1. 實驗01-12刪欄格
m=24,n=12,b=16,a=8，針對1/2/2.5/3/3.5/4/6。
（1）優點
- 繼承來自PC端一脈相承，
- 設計師使用方便，前端可以用Bootstrap實現。
- 可以去到最小44*44的最小基礎尺寸
（2）缺點
- 整體頁面分布比較死板，延展性差
- 凹槽略窄
- PC轉化移動端的時候視覺很難保持一致
2. 實驗02-24刪欄格
m=12,n=24,b=16,a=4，針對1/2/2.5/3/3.5/4/6。
（1）優點
- 無論是設計師用于設計還是前端開發時可以通用Bootstrap實現。
- 具有更多的兼容性以及靈活性
（2）缺點
- 槽寬更窄
- PC轉化移動端的時候視覺很難保持一致（pc是12欄）
綜上所述，如果產品板塊相對而言比較規整的話（沒有2.5/3.5這種非常規）且不考慮未來延展的話可以使用12刪格欄。如果產品內容模塊有非常規的模塊，且要考慮到未來的延展性可以考慮到24柵格欄。
這里還有一個問題就是，為什么馬蜂窩改版的時候左右邊距是10px？是為了相同屏幕內承載更多的內容嗎？有沒有馬蜂窩的設計師或者懂得這一塊為什么這么做的，可以交流一下想法。
本文由@汪仔3414 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
騰訊動漫設計稿寬度是412，邊距16最合適，
馬蜂窩的設計稿寬度是375，375的寬度里面邊距不用10，就只能21或者22，有點太大了，還是10看起來合適一點
您好，請教下，移動端的B端產品用375還是414設計？哪個更合理呢？