在蘭亭妙微多年 UI 設計項目中，文字排版是設計師與前端對接時高頻出問題的環節：視覺稿精致清晰，開發還原后卻錯位、擁擠、層級混亂，反復像素級微調浪費大量時間。
文字不只是信息載體，更是界面秩序的骨架。本文以蘭亭妙微實戰標準，完整講解 UI 文字從屬性設置、軟件操作、層級規劃到交付規范的全流程，幫你徹底解決設計與開發不一致的痛點。
一、先搞懂：決定還原度的 4 個 CSS 核心屬性
前端最終實現，完全依賴這 4 個基礎參數，設計時必須精準對應：
- Font-family 字體家族
優先選用系統無襯線字體：iOS 用蘋方 - 簡，Android/Windows 用思源黑體、微軟雅黑，保證跨端渲染一致；特殊品牌字體需提供字體包并做好分層。
- Font-weight 字重
中文≠西文：西文可輕細，中文必須保證識別度。
蘭亭規范：
- 標題：Medium (500) / Bold (700)
- 正文：Regular (400)
- 輔助說明：Light (300)
- Font-size 字號
同字號下，英文 / 數字視覺更小，混排時需手動放大 1–2px；移動端常用20px–36px，以4 的倍數遞增，適配柵格與開發適配。
- Line-height 行高
還原偏差頭號元兇。設計軟件與開發工具默認行高不同，必須手動指定，嚴禁用自動行高。
二、設計軟件文字設置：蘭亭標準操作
以主流設計工具為例，嚴格按以下流程設置，避免標注錯誤。
1. 字體與分層原則
- 字體文件提前安裝到系統，自定義字體導出OTF 格式（跨平臺兼容最優）。
- 多字體必須分層：不同字體單獨圖層，否則導出標注錯亂，前端無法識別。
2. 字間距（字距）
- 正文、說明文字默認0；
- 超大標題、品牌標語可適度微調，增強氣勢。
3. 行高：必須≥字號，公式化設置
蘭亭妙微通用公式：
行高 = 字號 + 行間距
行間距建議：
字號的 50%–100%，閱讀最舒適。
示例：正文 28px → 行高 56px；標題 32px → 行高 64px。
- 行間距 = 行高 − 字號
- 段間距必須大于行間距，遵循親密性原則。
4. 段落與對齊
- 不用空格 / 換行分段，統一用段落值控制；
- 正文常用左對齊，標題居中對齊，保持界面整潔。
三、實戰流程：從原型到視覺的文字權重規劃
蘭亭妙微設計師標準工作流：
- 打散原型權重
不直接照搬原型文字樣式，按業務目標重新梳理信息優先級。
- 建立基礎層級
先用字重、字號、顏色拉開對比，在無圖無色狀態下驗證層級清晰性。
- 強化視覺對比
加入顏色、間距、背景，突出核心信息，弱化次要內容。
- 統一文字規范
定稿前輸出文字規范文檔，鎖定所有層級參數，全局復用。
四、核心痛點解決：為什么設計稿總對不上？
1. 根源：默認行高不一致
- Sketch/Figma 28px 文字自動行高≈40px
- iOS/Xcode 28px 文字默認行高≈34px
參數不同 → 界面必然偏差。
解決方案：所有文字手動指定行高，同步給前端。
2. 單行 / 多行文字行高統一
- 以多行閱讀為基準設置行高；
- 同層級文字（如列表、標題）共用同一行高，提升代碼復用率，減少還原誤差。
3. 帶行高文字與組件對齊
行高會產生上下留白，直接按數值對齊會視覺偏移。
設計時要計算
半行距：
- 標題 32px / 行高 48px → 半行距 8px
- 輔助文 24px / 行高 36px → 半行距 6px
用半行距做間距補償，實現數值精準 + 視覺舒適。
五、蘭亭妙微?可直接復用的文字規范
我們沉淀了移動端 @2x 通用標準，適配絕大多數 APP / 小程序 / H5：
| 文字層級 |
字號 |
行高 |
字重 |
使用場景 |
| 特大標題 |
36px |
72px |
Bold |
頭部主標題、彈窗標題 |
| 大標題 |
32px |
64px |
Medium/Bold |
頁面標題、模塊標題 |
| 小標題 |
28px |
56px |
Medium |
卡片標題、列表標題 |
| 正文 |
28px/32px |
56px/64px |
Regular |
頁面主體內容 |
| 輔助說明 |
24px |
48px |
Regular/Light |
提示、備注、時間 |
| 標注文字 |
20px |
40px |
Light |
版權、小提示、底部說明 |
文字顏色規范（蘭亭通用色值）
- #333333：主文本（最高權重）
- #666666：二級文本（中等權重）
- #999999：輔助文本（低權重）
- #007FFF：品牌主色
- #FF004B：警告 / 錯誤
- #00CC8E：成功 / 完成
六、特殊場景適配：不照搬規范
緊湊列表、商品卡片、標簽欄等空間有限場景，可適度收緊行高（如 24px 字號→行高 36px），隨組件統一規則，不破壞整體一致性。
七、交付前端：確保 100% 還原的 3 個動作
- 輸出完整文字規范文檔：列明字體、字號、行高、字重、顏色、使用場景。
- 標注必須帶行高：不省略任何文字行高參數。
- 建立組件樣式：在設計工具中創建文字樣式，一鍵復用，避免手動修改出錯。
結語
文字是 UI 界面的基礎語言，規范的文字系統，既能提升用戶閱讀體驗，又能大幅降低協作成本，讓設計完美落地。
蘭亭妙微始終堅持像素級嚴謹 + 體系化規范，把每一處文字細節做到位，用專業交付保障產品體驗與品牌質感。
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。