精美 ≠ 好看
很多人觉得”精美”就是好看——颜色漂亮、图标精致、动效炫酷。
但做了几年 UI 后你会发现，“惊艳”和”精美”是两回事。惊艳让你”哇”一声，精美让你用起来”舒服”。前者是烟花，后者是灯光——烟花绚烂但转瞬即逝，灯光不起眼，但你每天都在用。
真正精美的界面，往往不是最抢眼的那个，而是你用了很久都意识不到它存在的那一个。
精美的底层逻辑：感知质量
产品设计里有个词叫 Perceived Quality（感知质量）——用户觉得这个东西”高级”还是”廉价”。
拿汽车举例：两辆车功能一样，为什么一辆觉得高级，一辆觉得廉价？区别就在细节——关门的声音、按键的阻尼、皮革的缝线。这些不影响功能，但影响感受。
UI 也一样。两个按钮功能相同，用户会觉得哪个更”精美”？答案藏在下面这些细节里。
让界面”精美”的六个细节
1. 间距比颜色更重要
新手设计师喜欢调颜色，老手设计师先调间距。
同样的字体、同样的颜色，间距不同，高级感完全不同。Apple 的界面为什么看着舒服？拉开间距看——它的留白是有呼吸感的。
实用技巧： 建立 4px 或 8px 的间距体系，所有元素间距都按这个倍数来。比如 8、16、24、32、48、64。不要随心所欲地”目测调一下”。
2. 字号层级要”跳得开”
很多界面看着”平”，是因为字号拉不开差距。
1
2
❌ 标题 16px / 正文 14px / 辅助 12px → 太接近，看着像一坨
✅ 标题 24px / 正文 15px / 辅助 12px → 层级清晰，扫一眼就知道重点
字号比例建议：
| 层级 | 字号 | 字重 |
|---|---|---|
| 大标题 | 28-32px | Bold |
| 小标题 | 18-20px | SemiBold |
| 正文 | 15-16px | Regular |
| 辅助文字 | 12-13px | Regular |
| 标签 | 11px | Medium |
字号不是调出来的，是定出来的。先定好比例，再往里填内容。
3. 颜色少就是精美
一个精美的界面，主色不超过 2 个，中性色 3-5 个。
1
2
❌ 主色 #1890FF + 辅助色 #52C41A + 警告色 #FAAD14 + 点缀色 #722ED1 → 五彩斑斓
✅ 主色 #1677FF + 中性色 #1A1A1A/#595959/#8C8C8C/#BFBFBF/#F0F0F0 → 干净利落
精美的颜色策略：
- 90% 中性色：背景、边框、文字都用灰度
- 10% 品牌色：只在关键操作、焦点元素上出现
- 颜色越克制，品牌色越突出
你去看 Stripe 的界面，几乎只有黑白灰加一个紫色。但没人觉得它不精美。
4. 圆角要有”性格”
圆角不是随便拉的。圆角的大小决定了界面的气质：
| 圆角 | 感觉 | 适用场景 |
|---|---|---|
| 0-2px | 专业、严谨 | 企业后台、数据表格 |
| 4-8px | 现代、干净 | 绝大多数 Web/App |
| 12-16px | 友好、亲和 | 儿童产品、社交应用 |
| 20px+ | 圆润、趣味 | 品牌感强、年轻化产品 |
关键： 保持一致性。所有按钮用 6px，所有卡片用 12px，不要同一个页面按钮 4px 卡片 8px 弹窗 16px。
5. 阴影要有层次
阴影不是越明显越好，而是”能感觉到但说不出来”最好。
1
2
3
❌ box-shadow: 0 4px 12px rgba(0,0,0,0.3) → 太脏，像浮在空中的纸片
✅ box-shadow: 0 1px 2px rgba(0,0,0,0.06),
0 4px 8px rgba(0,0,0,0.04) → 多层叠加，自然柔和
好的阴影技巧： 用两层或三层阴影叠加。第一层控制近处硬边，第二层控制远处虚影，第三层控制环境光。这样出来的阴影更接近真实光照。
6. 微交互动效
精美的界面”会动”，但不是炫技式的动。
- 按钮点击有 0.1s 的反馈
- 页面切换有 0.2-0.3s 的滑入
- 列表项按顺序淡入（Stagger）
这些动效用户不会注意到，但去掉后用户会觉得”怪怪的”。这就是精美的最高境界——你感觉不到它，但少了它就不对。
提升”精美度”的实操清单
下次做界面时，对着这个清单过一遍：
- 间距检查：元素之间是否遵循了统一的间距体系？
- 字号检查：标题和正文能不能一眼区分？
- 颜色检查：去掉所有颜色，只看灰度，结构还清晰吗？
- 圆角检查：全页面圆角是否一致？
- 阴影检查：阴影是否太脏或太飘？
- 对齐检查：所有元素是否严格对齐，有没有”差不多对齐”？
- 留白检查：内容是否太挤？敢不敢多留一点空白？
最后
精美的界面不是设计出来的，是改出来的。
初稿的时候，先把功能做对、结构搭好。然后一遍一遍地调间距、对齐、颜色、字号——每调一次，精美度就涨一点。
把不重要的东西去掉，把剩下的做到极致。 这就是精美的全部秘密。
——来自一个做了多年 UI 还在一线画图的设计师