有一種(zhǒng)「奇怪的」現象會經(jīng)常的看到：「很多設計師沒(méi)有辦法清楚的跟其他人解釋他們是如何設計的，越細緻的地方可能(néng)越是如此。比如，這(zhè)個菜單的寬度爲什麼(me)是200px？250px或者190px是否可以？圖片的尺寸爲什麼(me)是278px*196px？如何确定網頁的寬度？」

軟件界面(miàn)的設計師除了視覺本身以外，對(duì)于設計是否可以實現、大概以何種(zhǒng)方式實現、規範可否被(bèi)理解并且複制執行、設計實現的性價比與時間比等緯度都(dōu)應有相當高度的認識。就像建築設計師一樣(yàng)，他們一定很了解建築材料以及如何建築，雖然他們不會去親自砌牆。：)

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

希望通過(guò)此文可以交流關于栅格化和盒子比例的設計方法。

栅格化

對(duì)于網頁的寬度，設計師之間基本上比較容易達成(chéng)共識，比如：950px、960px、1000px、1190px、1200px。但是如果接下來讓每一個設計師設計一個左右布局的版式，左邊是一個樹形菜單，右邊是主要

内容區域。那麼(me)可能(néng)會有很多結果。但是這(zhè)些結果基本上是比較接近的。如果這(zhè)些設計師都(dōu)服務于一個品牌下的話，這(zhè)種(zhǒng)情況并不是一個好(hǎo)的事(shì)情。會給人以沒(méi)有一緻性的感覺。

每一個界面(miàn)單獨呈現的時候，并不會有不和諧的感覺，但是作爲一個産品或者品牌下的一員，這(zhè)種(zhǒng)情況就會帶來負面(miàn)的影響。這(zhè)種(zhǒng)情況可能(néng)因爲四種(zhǒng)情況産生：1.寬度沒(méi)有理論基礎，憑借自身多年的經(jīng)驗取得了一個方便記憶的整數；2.有自己的設計方法，但是一個團隊的下的設計師沒(méi)有統一這(zhè)個方法；3.設計的時候沒(méi)有查看已有的類似設計；4.認爲對(duì)方的（已有）的寬度不适合。

如果大家遵守一個栅格化的設計方法（希望您也可以貢獻其他的方法）那麼(me)這(zhè)個問題將(jiāng)會迎刃而解。

先科普一點栅格化的基礎

栅格化并不是一個新的概念，大家關注的點往往是他表面(miàn)的950、960和1190。左邊的三個數據的核心是一個24等分的栅格系統。可以被(bèi)輕松的2等分、3等分、4等分、6等分、8等分、12等分，還(hái)可以做到1:2、1:3、1:5、2:4、1:7、3:5的不對(duì)稱分割，并且可以精确到像素。由于3:5和3等分的需求，所以[3,8]得到了24這(zhè)個結果。

W ＝ A * n – i;

A = a + i;

i:被(bèi)分割的區塊之間的間隔（爲了方便計算，大都(dōu)爲10px）

整個公示中，i和n一樣(yàng)是核心，再确定i，即可确定整個栅格化系統。

當n ＝ 24, i = 10;假如A＝40，則W＝950；假如A＝50，則W＝1190；假如A＝60，則W＝1430。

科普結束。

雖然A的值可以變成(chéng)“任何”一個值，但有觀點認爲栅格化仍然是不太适合彈性布局。因爲彈性布局的關鍵在用百分數單位來替代像素的單位（由于display:flex尚未成(chéng)爲Candidate Recommendation不适合大規模商用），用百分數來表示無法整出100的分割方案。就算是像6等分這(zhè)樣(yàng)的訴求，每一份爲16.66%，在視覺上也感知不到1像素級的差别。并且還(hái)可以轉變爲50%的33.33%保持對(duì)稱和1像素級差别的感知。

好(hǎo)像如果在界面(miàn)中有5等分的需求，整個栅格化系統將(jiāng)變得複雜[3,5,8]，也就是120等分。但其實并不需要如此，因爲i并沒(méi)有改變，隻是把a縮小，但對(duì)于24等分的下的組合并沒(méi)有産生變化。所以隻需要設置每個A爲20%，然後(hòu)每個A的右測内邊距爲10即可以融入原來的24分的栅格化系統。

或者換一種(zhǒng)更加容易理解的話語來描述栅格化：“栅格化是通過(guò)确定等分的單位寬度以及單位寬度之間的間距，把單位寬度進(jìn)行組合的一種(zhǒng)排版方式。”（這(zhè)句是我自己總結的，求探讨）

闆式的變化越複雜，栅格化系統越複雜，就像這(zhè)個系統最開(kāi)始被(bèi)設計的時候：64*36=2304。

在實際操作中，推薦24的栅格化，插入5等分，i＝10，最大寬度1430px，最小寬度爲950px。CSS采用百分比。

在設計自己産品的栅格化系統大緻可以采用下面(miàn)的流程：

首先分析等份的複雜度，如果版式僅僅是4等份、3等份的話，12列的栅格系統就可以滿足需求。如果有較多不等分的可能(néng)，那麼(me)還(hái)是建議采用24列的栅格系統，如上圖，這(zhè)樣(yàng)你可以靈活的設置。

其次确定頁面(miàn)大概的寬度（如何确定在“比例”的部分會詳細說明），暫時采用1200px。

然後(hòu)根據版式的預見性，确定模塊和模塊之前是否有清晰的“間隔”，這(zhè)個間隔大概是多少？10px？15px？20px？個人認爲認可設計方法都(dōu)有一個目标是效率的提升，所以個位數個人建議是0或者5的話，方便計算，記憶和檢驗。當然你也可設置其他的數字，給自己挖坑。

藍色區域是10px（爲了更好(hǎo)的展示，實際是空白）

1200px可以被(bèi)24整除，所以W=1190px。

再看下面(miàn)一個示例3列等分。

如果目标是1200px左右的話，則W=1180；(3*400px-20px)如果是1000左右的話。W可以等于970px；(3*330px-20px)或者是1000px（3*340px-20px）；

在管理控制台一緻性到達一個裡(lǐ)程碑之後(hòu)，現在我們爲了一緻性以及解決上面(miàn)描述的問題，開(kāi)始在騰訊雲和DNSpod中去落地，并且希望要求中心内所有設計師遵循此方法。（下圖僅爲示意）所以我們的栅格化系統爲（30+20）*24-20=1180px

比例

這(zhè)是一個重要的問題，極大的幫助我們确定字體和行高以及盒子的寬高。

對(duì)于字體和行高的比例，大多數也會存在難以統一，甚至可以用雜亂來表示。我曾經(jīng)在sohu的時候見過(guò)同一個新聞列表，14px的宋體，行高居然有22px，23px，24px，25px，27px。設計師的馬虎可能(néng)是一方面(miàn)，另外一方面(miàn)在長(cháng)達1年的配合中，我竟然發(fā)現他并沒(méi)有這(zhè)樣(yàng)一個概念，這(zhè)種(zhǒng)細節基本上就是憑感覺。因爲在設計這(zhè)些文字的時候，内心并沒(méi)有一個“理性”的方法，而是依賴于專業的背景和當時的感覺。和栅格化一樣(yàng)，我們應需要一個方法，一個比例或者幾個比例在不同的場景下應用。我推薦1:1.5和1:2的比例（如果你有一個你自己的比例請留言，謝謝）。我本身并不是設計專業，但我能(néng)保證這(zhè)兩(liǎng)個比例是一個大多數人都(dōu)會認爲是好(hǎo)的比例。因爲：

這(zhè)是現成(chéng)的設計“大師”推薦的比例。如果你是果粉的話，基本也會喜歡1:1.2。

所以，當實際字體和行高的時候推薦比例1:1.2；1:1.5；1:2。

我們要如何确定網頁中最大的盒子的大概寬度是多少？然後(hòu)在這(zhè)個寬度中進(jìn)行栅格化。現在在這(zhè)裡(lǐ)解釋。以我們的用戶客戶端占比分辨率最大的1920*1080爲場景，說說我們可以如何确定網頁的寬度。

還(hái)是尋找一個大家覺得“好(hǎo)看”的比例作爲方法，如果是16:9的比例。那寬度大概是1080px；這(zhè)個比例又可以赢得果粉的青睐了，因爲：

而且16:9被(bèi)大量的采用到了屏幕的尺寸中，最開(kāi)始的寬屏顯示器。所以這(zhè)個比例很可能(néng)一直在你的生活中陪伴著(zhe)你。PC顯示器，14寸筆記本，手機，電視……

另外的主流比例是4:3。比如1024*768已經(jīng)大多數的電視信号源比例。如果你采用這(zhè)個比例，那麼(me)頁面(miàn)寬度就是1440px基準。

根号2也是一個“好(hǎo)”的比例，所有的标準紙張的寬高都(dōu)是這(zhè)個比例，如果你手邊有A4紙的話，你現在就可以按照下面(miàn)的方法去确認一下。按照這(zhè)個比例的話就是1357px爲基準。

大概認知度最高的比例就是黃金分割比了。

黃金分割奇妙之處，在于其倒數爲自身減1，即：1.618的倒數爲0.618 = 1.618 – 1

1.618倍和0.618倍

我們會發(fā)現有很強藝術背景的人很容易就會找到這(zhè)個點（或者附近的位置），但是其他人就難以找到。當我看到下面(miàn)的圖的時候，簡直是不可思議。

還(hái)有一些比例你可以嘗試，比如1.43:1，這(zhè)個是IMAX的比例。比如7:5，這(zhè)個是5R相片的比例。

上面(miàn)所說的所有方法，就方法本身而言可能(néng)會引起(qǐ)諸多專業人士的挑戰，但是從一緻性的角度來講我們需要在一個範圍内統一設計方法。從我所從事(shì)的職業來說，理解設計師的設計原理會讓溝通更加順暢，減少更多的細節溝通，并且可以制作出更多複用性更強，代碼更優雅的web。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。