溫總前言：本文不適合「天才設計」派。常見怪象：設計師無法解釋菜單寬度為何200px而非250px、圖片尺寸為何278×196px、頁面寬度如何確定。界面設計師除視覺外，必須具備可實現性、實現方式、規範可復制性、性價比時間比等多維認知——如建築師懂材料工法虽不親自砌牆。本文分享柵格化與盒子比例的系統化設計方法。

柵格化：統一團隊佈局語言的基石

頁面寬度易達成共識（950/960/1000/1190/1200px），但左右佈局菜單寬度卻五花八門（同980px頁面菜單寬200px/245px；同1200px頁面菜單寬250/230/200px）。單看不和諧，品牌下卻破壞一致性。成因四種：無理論基礎憑經驗取整數、團隊無統一方法、未參考既有設計、認定既有寬度不合適。遵守柵格化系統，問題迎刃而解。

柵格化基礎公式科普

核心：24等分系統。可輕松2/3/4/6/8/12等分，支持1:2、1:3、1:5、2:4、1:7、3:5非對稱分割，精確到像素。因3:5與3等分需求，最小公倍數[3,8]=24。

W = A × n – i
A = a + i
i：區塊間隔（建議10px，便於計算）
n：分割數（推薦24）
W：頁面總寬度
A：單位模塊寬度（含間隔）
a：實際內容區寬度

例：n=24, i=10 → A=40時W=950；A=50時W=1190；A=60時W=1430。

彈性佈局兼容策略

柵格化被質疑不適合彈性佈局（百分比難整除100）。實則：6等分16.66%視覺無1px差別，可轉換為50%/33.33%保持對稱。5等分需求下，無需擴展至120等分（[3,5,8]），只需設置每個A=20%，右內邊距10px即融入24分系統。
柵格化本質定義：「通過確定等分單位寬度與間距，將單位寬度組合的一種排版方式。」

實操推薦配置

• 推薦24列柵格，插入5等分，i=10px
• 最大寬度1430px，最小950px
• CSS採用百分比實現

建立產品柵格化系統流程

1. 分析等分復雜度：僅4/3等分→12列足夠；多不等分可能→24列靈活應對。
2. 確定頁面大概寬度（見下文比例部分）。暫採1200px。
3. 確定模塊間隔：10/15/20px？建議個位數為0或5，便計算記憶驗證。
4. 驗證：1200px可被24整除→W=1190px。3列等分目標1200px→W=1180(3×400-20)；目標1000px→W=970(3×330-20)或1000(3×340-20)。

騰訊雲/DNSPod已落地，系統為(30+20)×24-20=1180px，要求中心所有設計師遵循。

比例系統：字體行高與盒模型的理性鑰匙

字體行高比例常難統一（同一新聞列表14px宋體行高竟有22/23/24/25/27px）。設計師憑感覺而非理性方法。需固定比例在不同場景應用。推薦1:1.2、1:1.5、1:2三大黃金比例：

• 經典設計大師推薦（如Müller-Brockmann）
• 果粉偏愛1:1.2（蘋果系統字體比例）

頁面最大盒子寬度如何確定？基於屏幕分辨率的經典比例法

以用戶佔比最高1920×1080場景為例：

• 16:9（寬屏標準、顯示器/筆記本/手機/TV通用）→ 寬度≈1080px
• 4:3（傳統TV信號源、1024×768）→ 基準1440px
• √2≈1.414（ISO紙張標準A4等）→ 基準1357px
• 黃金分割1.618（倒數0.618=自身-1，藝術背景者易捕捉）→ 基準≈1118px
• 其他可嘗試：IMAX 1.43:1、5R相片 7:5

方法本身或引專業挑戰，但一致性視角下，統一設計方法範圍內的理性規則，能讓溝通順暢、減少細節扯皮、產出復用性強、代碼優雅的Web頁面。

留白的理性設計

頁面留白同樣有科學方法，非憑感覺。

期待討論，期待更多「理性」設計方法湧現。