騰訊動漫（左右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協議