为什么同样是按钮有的看起来高档大气有的却显得廉价劣质秘诀就在于层次感。就像 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 干货。