为什么同样是按钮，有的看起来高档大气，有的却显得廉价劣质？
秘诀就在于层次感。
就像 3D 电影比 2D 电影更有沉浸感一样，有深度的界面比扁平的界面更能抓住用户的注意力。
扁平的化界面就像一张平铺的纸，而有层次的界面就像立体的雕塑，自然显得更高级。
核心秘诀
苹果的产品为什么看起来那么高级？
其实原理很简单——就像化妆一样，层次感来自多重叠加。
回忆一下女朋友化妆的步骤：
- 第一层：浅色打底（提亮）
- 第二层：深色阴影（立体感）
界面设计也是同理：
- 第一层阴影：让元素“浮起来”
- 第二层阴影：让元素“站得住”
就这么简单！但效果却能让你惊叹。
现在让我们看些实际的例子。
应用场景
1. 鼠标悬停
CSS 代码很简单：
.card{background:var(--shade);border-radius:10px;box-shadow:inset 0 1px 0rgba(255,255,255,0.5),/* top glow */0 4px 6pxrgba(0,0,0,0.12);/* bottom drop */}鼠标悬停时：
.card:hover{box-shadow:inset 0 1px 0rgba(255,255,255,0.5),0 10px 20pxrgba(0,0,0,0.16);transform:translateY(-2px);}使用效果如下：
这种轻微的悬停提升效果能让用户界面感觉响应迅速且高端，而无需使用动画库。
激活标签
当前激活的标签页看起来应该比其他标签页位置更高。
代码如下：
.tab.active{background:var(--shade);box-shadow:inset 0 1px 0rgba(255,255,255,0.4),0 3px 6pxrgba(0,0,0,0.12);}使用效果如下：
结论
我以前认为，优秀的 UI 需要复杂的渐变、自定义图标或大规模的重新设计。
事实证明，优秀设计很大程度上来自于细微的、有意设计的深度细节。
颜色图层 + 柔和阴影 = 廉价 UI → 高级 UI
现在就去试试吧！花 1 分钟，你就能让界面看起来贵 10 倍。
我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。
欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。
