在蘭亭妙微多年 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 界面的基礎語言,規范的文字系統,既能提升用戶閱讀體驗,又能大幅降低協作成本,讓設計完美落地。
蘭亭妙微始終堅持像素級嚴謹 + 體系化規范,把每一處文字細節做到位,用專業交付保障產品體驗與品牌質感。