緣起：前後端聯調痛點催生 DPL

項目增多，前後端聯調複雜導致延期。交互+前端聯合產出 DPL（設計模式庫），含柵格體系、控件體系、視覺體系，降低溝通成本，沉澱團隊資產。

為什麼門戶網站都愛 950/960px？

Alexa 前 100 門戶站（Yahoo、淘寶、新浪、網易、優酷、AOL 等）首頁寬度高度集中於 950/960px，特徵：結構複雜。功能專一站點（Google、YouTube、Facebook）則無固定規律。結論：複雜門戶結構天然收斂於 960px 體系。

柵格系統數學建模

頁面寬度 W = n×a + (n-1)×i，令 A = a+i，則 W = n×A - i。

約束條件：

• n 為 3 的倍數（需三列佈局，避免重要信息落在末尾）
• A 為 5 的倍數（控件設計便利）
• W 符合大眾化寬度

推導：15×x×y - 10 = W。現有成熟站點多為 12 或 24 列。保持 i=10px、兼容 1.0 控件、後台結構統一，最終確定 24 列柵格：A=40px，W=(40×24)-10=950px。

基線系統：橫向秩序的隱形骨架

輸入框結構：text area（行高 18px、字號 12px 居中）、padding、border、margin。基線間距設 20px，text area 底部對齊，兩輸入框間距恰好 18px 可容一行文本。

標籤冒號對齊（而非左對齊），適應字段長短不一，保證輸入框整齊。反饋置於輸入框下方，僅顯示錯誤態。

落地驗證：從列表到詳情、查詢頁

給設計師的兩個詞：嚴謹，溝通

柵格非憑感覺，須專注像素級嚴謹，持續與前端溝通、虛心接受挑戰。前端工程師的質疑推動了規范的深化完善。

文章來源：lpued.com