騰訊動(dòng)漫（左右16,寬度12px,水槽4）

一、變化的原因

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

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

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

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

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

二、柵格欄和24柵格欄的2個(gè)實(shí)驗(yàn)比較

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

1. 實(shí)驗(yàn)01-12刪欄格

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

（1）優(yōu)點(diǎn)

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

（2）缺點(diǎn)

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

2. 實(shí)驗(yàn)02-24刪欄格

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

（1）優(yōu)點(diǎn)

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

（2）缺點(diǎn)

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

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

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

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

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