UI设计师平均每天要在Figma里新建3个组件库，但多数人翻烂了设计规范也记不住“什么时候该用卡片阴影、什么时候该用扁平分割”——这恰恰说明UI设计不是“画出来”的，而是“判断出来”的。

1. 阴影层级：从“悬浮感”反推投影参数

很多新手给卡片加投影时直接套用默认数值，结果页面像叠了一沓扑克牌。正确的做法是：用阴影的y轴偏移值和模糊半径来模拟物理距离。比如一个操作按钮（如“立即下单”）需要强视觉重力，阴影y偏移设为4px、模糊8px就足够；而一个浮窗提示（如“优惠券即将过期”）需要明显悬浮感，y偏移要拉到12px、模糊24px，同时透明度从15%降到8%，这样眼睛会自然觉得“这个元素和背景分开了两层”。

2. 文字层级：别让用户用尺子量字号

某电商App曾把商品标题设为18px、价格设为20px，结果用户反馈“看不清价格”——问题不是20px太小，而是两个层级只差2px，眼睛需要费力分辨。实用速查法：正文、次级标题、主标题之间字号差距至少保持4-6px（比如14px/18px/24px），且行高统一用1.5倍；如果某段文字需要弱化（如辅助说明、灰色注释），直接做颜色降级（从#333降到#999），而不是只改字号。

3. 间距系统：8的倍数不是“死规则”而是“心理锚点

我见过一个后台系统把所有间距都设为8px的倍数，结果“保存”按钮和输入框之间留了24px，视觉上像在中间空了一行——因为24px恰好等于该页面基础行高的1.5倍，看起来像是“多了一个空行”。真正的技巧是：用8px倍数做最小单位（如8、16、32），但相邻元素的间距要参考“内容呼吸感”。比如表单标签和输入框之间用16px够用，但不同字段组之间要用32px，让眼球能自然识别“这是一组”。

4. 图标与文字对齐：视觉中心比数学中心更重要

大多数UI工具默认把图标放在文字正中间，但一个24px的“加号图标”和一个16px的“新建”文字，如果按基线对齐，图标会偏上。实用方案：把图标的视觉中心调整到文字x高度（即小写字母x的顶部）的1/2处，而不是文字的整体中线。比如聊天列表的“发送”图标，在16px文字旁时，图标下边沿应该比文字基线低2px，这样眼睛才会觉得“它们在一起”。

5. 结尾：三个很容易踩的坑

• 阴影和边框同时用：卡片加了6px投影又加1px实线边框，等于告诉用户“这个东西边缘和背景有冲突”——要么只用投影（表现自然层次），要么只用边框（表现框线结构），不要混搭。
• 全局只用一种字号比例：手机端正文14px、桌面端16px是基础，但很多人把按钮和标签也套用同样的字号——按钮上12px的字可读性极差，至少保持按钮文字比正文小2px以内。
• 忽略“触摸热区”的真实尺寸：移动端设计时，图标按24px画，但点击区域至少扩展到44px（苹果规范），否则用户怎么都点不到右上角的“关闭”按钮——直接在设计稿里用透明矩形框标出热区边界，开发才不会漏。