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