微博 UED 團隊系統化輸出 Web 排版設計方法論，源於 Metro 設計語言的瑞士風格啟示，結合 Web 交互性、多終端、技術演進、多媒體融合四大特殊挑戰，構建從原則、類型到工程落地的完整知識體系。

核心理念：減少元素，顯現本質

Metro 基於瑞士平面設計（清晰、真實、美觀），源於交通指示系統的極致功能主義。互聯網同樣面臨信息過載、注意力稀缺，排版使命是：以簡潔秩序實現高效獲取。

排版定義與原則體系

定義： 將有限視覺元素有機排列組合，實現邏輯清晰、閱讀順暢、交互便捷。
遵循平面八大原則： 重複/交錯、節奏/韻律、對稱/均衡、對比/調和、比例/適度、變異/秩序、虛實/留白、變化/統一。
Web 兩大強調： 功能與形式統一、兼容與響應。

六大排版類型實戰規範

1. 文字： 字號/字體/字色/粗細/間距/行距構建層級，建立垂直韻律基線網格。
2. 色彩： 形體/位置/面積 + 色相/明度/純度，結合內容語境組織色彩系統。
3. 圖片： 瀑布流（Pinterest 引領）、卡片流、全屏沉浸、圖文混排多模式靈活切換。
4. 表單： 分組邏輯、標籤對齊、即時驗證、鍵盤類型匹配、錯誤狀態可見，讓輸入愉悅。
5. 界面： 功能分區（導航/工具/內容/狀態）、操作習慣適配、狀態反饋完備，易用優於美觀。
6. 導航/圖表： 數據歸納分類、視覺編碼規範、層級穿透交互，複雜信息清晰直觀傳遞。

工程落地雙支柱

• 視覺規範文檔化： 色彩/字體/間距/圖標/組件庫標準化，設計與前端共建，CSS 實現漸變圓角，提供純色降級。
• 交互規範文檔化： 組件行為標準（懸停/聚焦/禁用/加載/錯誤）、頁面轉場、響應式斷點、無障礙標準。

總結

好的排版設計，不僅美觀，更能有效組織信息、降低認知負荷、引導用戶行動。要求設計師深度理解內容本質，將內容視為設計元素，依原理有效排布。良好的排版，助力 Web 設計更簡潔、高效、可信。