• 时间:
  • 分类:

为什么同样是按钮，有的看起来高档大气，有的却显得廉价劣质？

秘诀就在于层次感。

就像 3D 电影比 2D 电影更有沉浸感一样，有深度的界面比扁平的界面更能抓住用户的注意力。

扁平的化界面就像一张平铺的纸，而有层次的界面就像立体的雕塑，自然显得更高级。

核心秘诀

苹果的产品为什么看起来那么高级？

其实原理很简单——就像化妆一样，层次感来自多重叠加。

回忆一下女朋友化妆的步骤：

  1. 第一层：浅色打底（提亮）
  2. 第二层：深色阴影（立体感）

界面设计也是同理：

  • 第一层阴影：让元素“浮起来”
  • 第二层阴影：让元素“站得住”

就这么简单！但效果却能让你惊叹。

现在让我们看些实际的例子。

应用场景

1. 鼠标悬停

CSS 代码很简单：

.card {
  background: var(--shade);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), /* top glow */ 0 4px 6px rgba(0, 0, 0, 0.12); /* bottom drop */
}

鼠标悬停时：

.card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 20px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}

使用效果如下：

<!-- 这是一张图片，ocr 内容为：BEFORE FLAT SIMPLE BORDERED BUTTONS WITH NO DEPTH OR HIERARCHY. PRIMARY SECONDARY AFTERDEPTH SAME ACTIONS,BUT WITH SOFT GLOW,SHADOW AND GRADIENT. SECONDARY PRIMARY -->

这种轻微的悬停提升效果能让用户界面感觉响应迅速且高端，而无需使用动画库。

激活标签

当前激活的标签页看起来应该比其他标签页位置更高。

代码如下：

.tab.active {
  background: var(--shade);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 6px rgba(0, 0, 0, 0.12);
}

使用效果如下：

<!-- 这是一张图片，ocr 内容为：BEFORE:FLAT TABS NO DEPTH, SINGLE BACKGROUND, BORDERS EVERYWHERE.WORKS, BUT FEELS LIKE A WIREFRAME. ACTIVITY BILLING OVERVIEW AFTER:DEPTH&LAYERS SAME LAYOUT, BETTER HIERARCHY:LAYERED SHADES, TOP GLOW, SOFT DROP SHADOW. OVERVIEW BILLING ACTIVITY -->

结论

我以前认为，优秀的 UI 需要复杂的渐变、自定义图标或大规模的重新设计。

事实证明，优秀设计很大程度上来自于细微的、有意设计的深度细节。

颜色图层 + 柔和阴影 = 廉价 UI → 高级 UI

现在就去试试吧！花 1 分钟，你就能让界面看起来贵 10 倍。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。

标签: none

添加新评论