騰訊動漫（左右16,寬度12px,水槽4）

一、變化的原因

1. 互聯(lián)網(wǎng)的發(fā)展

互聯(lián)網(wǎng)從1993年進入到中國開始，到現(xiàn)在有28年的歷史?；ヂ?lián)網(wǎng)也是在這28年里逐步向多元化發(fā)展。隨之而來的是用戶的需求也隨著互聯(lián)網(wǎng)本身的變化而變得多樣化，從原來的只是打電話和收發(fā)短信,后來逐步參與一些小游戲等等。

到現(xiàn)在手機可以說是成了人們不可分割的一部分，但是對于產(chǎn)品而言也同時意味著同一個頁面要承載更多的內(nèi)容。而且對于交互的挑戰(zhàn)等等難度也在提升。

2. 手機硬件的發(fā)展

手機屏幕從一開始3.5到現(xiàn)在5.5甚至于更大的屏幕方向發(fā)展，在屏幕越來越大的基礎(chǔ)上能夠承受的視覺，以及功能板塊也在不斷的增加以及優(yōu)化。這也是為了后面的變化做好了鋪墊。

二、柵格欄和24柵格欄的2個實驗比較

首先要先明確柵格欄的計算公式：（m+a）*n-a=414（x的尺寸）-2b(m 柵格寬；a 槽寬；b 留白寬；n柵格個數(shù)），設(shè)置一個固定值b=16（常用數(shù)值）。屏幕固定在xr（414）。

1. 實驗01-12刪欄格

m=24,n=12,b=16,a=8，針對1/2/2.5/3/3.5/4/6。

（1）優(yōu)點

• 繼承來自PC端一脈相承，
• 設(shè)計師使用方便，前端可以用Bootstrap實現(xiàn)。
• 可以去到最小44*44的最小基礎(chǔ)尺寸

（2）缺點

• 整體頁面分布比較死板，延展性差
• 凹槽略窄
• PC轉(zhuǎn)化移動端的時候視覺很難保持一致

2. 實驗02-24刪欄格

m=12,n=24,b=16,a=4，針對1/2/2.5/3/3.5/4/6。

（1）優(yōu)點

• 無論是設(shè)計師用于設(shè)計還是前端開發(fā)時可以通用Bootstrap實現(xiàn)。
• 具有更多的兼容性以及靈活性

（2）缺點

• 槽寬更窄
• PC轉(zhuǎn)化移動端的時候視覺很難保持一致（pc是12欄）

綜上所述，如果產(chǎn)品板塊相對而言比較規(guī)整的話（沒有2.5/3.5這種非常規(guī)）且不考慮未來延展的話可以使用12刪格欄。如果產(chǎn)品內(nèi)容模塊有非常規(guī)的模塊，且要考慮到未來的延展性可以考慮到24柵格欄。

這里還有一個問題就是，為什么馬蜂窩改版的時候左右邊距是10px？是為了相同屏幕內(nèi)承載更多的內(nèi)容嗎？有沒有馬蜂窩的設(shè)計師或者懂得這一塊為什么這么做的，可以交流一下想法。

本文由@汪仔3414 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議