對齊是視覺秩序的基石。基於用戶視線行為（F型/Z型掃視）與Gestalt心理學原理，制定B2B站點四大維度對齊標準，提升信息獲取效率與專業信任感。

一、基礎對齊原則

• 左對齊為王：符合左到右閱讀習慣，最安全、最高效、認知負荷最低；
• 對比需謹慎：標題居中+正文左對齊是經典有效組合；多種對齊混用易破壞節奏，除非有強烈設計意圖；
• 視線流暢性：框架間左右邊緣對齊、基線對齊，讓視線「順勢而下」，減少跳躍。

二、框架與模塊對齊網格

• 側邊欄高度<主內容區時：右側多模塊總高度須與左側單模塊底邊對齊；
• 建立8px基線網格：所有模塊外邊距、內邊距、高度為8的倍數，確保跨頁面、跨模塊垂直節奏一致；
• 卡片式佈局：卡片頂部/底部/內容區基線嚴格對齊，陰影/邊框視覺重量均衡。

三、內容與圖標微觀對齊

四、圖文混排對齊策略

1. 文字在圖下 → 居中對齊：單行/少量文字，左右對齊易形成「短行殘缺感」；
2. 文字在圖右 → 水平左對齊 + 垂直兩端對齊：
   • 標題與圖片頂部對齊，導讀/摘要與圖片底部對齊；
   • 中間內容自動分布，形成矩形視覺塊，視線「L型」流動無阻；
   • 圖片高度變化時，文字區塊高度跟隨，保持兩端對齊。

五、表單交互對齊：效率優於對稱

• 輸入框左對齊：用戶視線垂直下移，肌肉記憶連貫，減少水平掃視；
• 標籤右對齊：標籤長短不一時，右對齊使冒號/輸入框左緣對齊，視線移動距離最短（Luke Wroblewski眼動研究驗證）；
• 錯誤提示/幫助文本：輸入框下方左對齊，紅色高亮，不佔用標籤列寬度；
• 操作按鈕組：主操作（提交）靠右/靠左視業務流向，次操作（取消/重置）次之，間距≥16px防誤觸。

執行檢查清單

1. 建立《視覺規範文檔》定義基線網格、間距刻度、對齊規則；
2. 設計稿標註「對齊基線」、交付前端驗收標準；
3. 前端實現使用CSS變量--space-unit: 8px、--baseline: 1.5統一控制；
4. 上線後執行「視線流暢性測試」：5秒測試法+眼動追蹤抽樣。