UX/UI 排版

Source: Dev.to

什么是排版（Typography）？

• 使用哪种字体
• 在什么位置多大
• 多粗
• 行间距
• 颜色和对比度
• 文本之间的层级

当用户打开页面时：

• 首先看到什么
• 接着阅读什么
• 完全不阅读什么

所有这些都由排版决定。

为什么排版对 UX 很重要？

用户来阅读。他们会阅读：

• 产品名称
• 按钮文字
• 错误信息
• 价格

如果阅读困难，设计再好看也没有意义。UX 有一句原则：

“如果读不懂，就不起作用。”

选字：少即是多

新手设计师最大的错误——使用太多字体。实际上：

• 1 种主字体
• 1 种辅助字体

在 UX/UI 中最常用的有：

• Inter
• Roboto
• SF Pro
• Poppins

原因很简单：它们在屏幕上易读，并不是因为好看，而是因为舒适。

排版的核心——层级

如果标题、正文、辅助文字看起来一样，用户会感到困惑。

简单示例：

把所有地方都 加粗 并不是 “最佳实践”。

行高（line-height）与间距

• 看不见，但能感受到。
• 大多数人不注意的地方。

文字太密集：

• 看起来不专业
• 阅读困难

正文的行高

line-height 通常在 140 %–160 %。这会让文本更有“呼吸感”。

颜色与排版

• 主文本不应过于纯黑。
• 次要文本不应过于淡灰。
• 必须保证足够的对比度。

好看但不可读的文字是设计错误。UX 中颜色既服务于可读性，也服务于美观，而不是仅仅装饰。

按钮和 UI 元素中的排版

按钮文字

• 清晰
• 简短
• 易懂

因此：

• 不要太小
• 不要使用太轻的字重

用户必须明确知道自己在点击什么。

排版系统：专业阶段

在真实项目中，排版不是随意的。以下样式预先定义，设计过程中保持不变：

• 标题样式
• 正文样式
• 标注样式
• 按钮文字样式

这可以：

• 让设计保持一致
• 开发者易于理解
• 产品迭代时不出现问题

结论

在 UX/UI 中的排版：

• 不是装饰
• 不是次要元素
• 不是可以 “以后再改” 的细节

糟糕的排版会导致

• 再好的布局也显得差劲
• 用户感到疲劳
• 产品显得不可信

良好的排版则会

• 让设计易于理解
• 不强迫用户
• 留下专业印象

在 UX 中，有时最有力的设计决策就是少而精准的文字。

如果愿意，可以把这篇文章按 dev.to 的格式翻译成英文，加入真实 UI 示例，或做成 “针对初级 UX/UI 设计师的排版检查清单”。这个主题很深，但正是这种深度让设计师脱颖而出。