2、视觉层次构建：通过尺寸、颜色、间距与阴影创造深度感，对比扁平设计中的纯色与极简主义

视觉层次这件事，说白了就是告诉用户「先看哪里，再看哪里」。我刚开始做UI那会儿，总觉得把所有信息都摆上去就是「丰富」，结果用户打开页面一脸懵——不知道重点在哪。后来我才明白，好的设计不是信息多，而是信息有秩序。

2.1 尺寸：最直接的注意力分配器

尺寸是构建视觉层次最粗暴也最有效的手段。你想想看，一个大标题和一个副标题放在一起，谁更重要？一目了然。

我在项目中遇到过一个问题：一个数据看板页面，所有卡片都用同样的字号和大小，结果用户反馈「找不到关键指标」。后来我把核心指标的字号放大到32px，次要指标用20px，辅助信息用14px，问题就解决了。

嗯，这里要注意：尺寸差距要明显。如果你用18px和16px做对比，用户根本感觉不到差异。我建议至少拉开4px以上的差距，才能形成有效的层次感。

2.2 颜色：用色相和饱和度说话

颜色在视觉层次中的作用，有点像舞台上的聚光灯。你想让用户注意哪里，就把最亮的颜色放在哪里。

扁平设计里，纯色用得特别多。但纯色不等于单调，关键在于怎么搭配。我记得有一次做电商App，首页的「立即购买」按钮用了纯红色，结果点击率反而下降了。后来改成品牌主色+微妙的渐变，效果好了不少。

颜色属性	层次效果	扁平设计中的应用
高饱和度	突出、醒目	CTA按钮、重要标签
低饱和度	柔和、后退	背景、次要信息
深色	稳重、下沉	标题、正文
浅色	轻盈、后退	辅助文字、分割线

2.3 间距：呼吸感就是层次感

间距这个东西，很多人容易忽略。其实间距是视觉层次里最「隐形」但最有力的工具。你想想看，两个元素离得近，用户会觉得它们是一组的；离得远，就是不同的组。

扁平设计讲究极简，但极简不等于挤在一起。我曾经接手过一个项目，设计师把所有内容都塞在一个页面里，间距只有8px，结果用户说「看着头晕」。后来我把间距调整到16px、24px、32px三个层级，页面瞬间清爽了。

说白了，间距就是给内容「呼吸」的空间。没有呼吸感的设计，再好的内容也白搭。

2.4 阴影：扁平设计中的「伪深度」

扁平设计最核心的特点就是「去阴影」，但完全去掉阴影有时候会让界面显得「平铺直叙」。我个人习惯在需要强调层级关系的地方，适度使用阴影。

比如卡片设计。纯扁平风格里，卡片之间靠间距和边框区分。但如果你想让某个卡片「浮起来」，加一个轻微的阴影就够了。阴影的强度取决于你想让这个元素「浮多高」。

阴影的参数我一般这样控制：

• 轻微阴影： box-shadow: 0 1px 3px rgba(0,0,0,0.1) —— 用于普通卡片
• 中等阴影： box-shadow: 0 4px 6px rgba(0,0,0,0.1) —— 用于悬浮状态
• 强调阴影： box-shadow: 0 10px 15px rgba(0,0,0,0.1) —— 用于弹窗或重要元素

2.5 扁平设计中的纯色与极简主义

扁平设计的核心就是「少即是多」。纯色和极简主义是它的两大支柱。但很多人误解了「极简」——以为极简就是「什么都没有」。其实不是。

极简主义追求的是「去掉不必要的，保留必要的」。比如一个按钮，扁平设计里可能就是一个纯色块+文字，没有渐变、没有阴影、没有边框。但它的颜色、大小、位置，都必须经过精心设计。

我记得有一次做后台管理系统，客户要求「极简风格」。结果我把所有装饰都去掉了，只留下纯色块和文字，客户说「太简陋了」。后来我调整了颜色的饱和度，增加了微妙的间距变化，再配合适当的字体粗细对比，客户才满意。

你想想看，为什么很多大厂的产品（比如苹果、谷歌）看起来那么「高级」？不是因为它们用了多复杂的特效，而是因为它们把纯色和极简做到了极致。每一个像素都有它的意义，没有多余的装饰。

2.6 综合案例：一个卡片组件的层次构建

光说不练假把式。我拿一个实际项目中的卡片组件来举例，看看怎么把尺寸、颜色、间距、阴影结合起来。

<!-- 扁平风格卡片 -->
<div class="card">
  <h3 class="card-title">数据分析报告</h3>
  <p class="card-desc">本月用户增长趋势与活跃度分析</p>
  <span class="card-tag">更新于 2024-01</span>
  <button class="card-btn">查看详情</button>
</div>

<style>
.card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  /* 扁平设计：无阴影，靠间距区分 */
  margin-bottom: 16px;
}
.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.card-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}
.card-tag {
  font-size: 12px;
  color: #999;
}
.card-btn {
  background: #4A90D9;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}
</style>

这个例子看起来简单，但每个细节都在构建层次：标题用20px加粗，正文用14px灰色，标签用12px更浅的灰色，按钮用纯蓝色突出。没有阴影，没有渐变，但层次感一点不少。

最后说一句：视觉层次不是「炫技」，而是「服务内容」。好的层次设计，用户甚至感觉不到它的存在——他们只会觉得「这个页面看着真舒服」。这才是最高境界。