阴影与层级效果设计：打造有深度的企业级 UI

引言

在移动端 UI 设计中，阴影（Shadow）是塑造视觉层次感和空间深度感的关键元素。合理的阴影设计能够让界面元素"浮"在背景之上，形成清晰的视觉层级，引导用户关注重要的交互元素。在 HarmonyOS NEXT 的 ArkUI 框架中，shadow 属性提供了丰富的参数控制，让开发者能够精确控制阴影的视觉效果。

星办 OA 项目在底部导航栏、卡片、按钮等关键位置使用了阴影效果，提升了整体 UI 的品质感。本文将深入分析 shadow 属性的参数机制、阴影在视觉层级中的作用，以及如何通过阴影设计提升企业级应用的 UI 品质。

一、Shadow 属性基础

1.1 基本语法

在 ArkUI 中，shadow 属性用于为组件添加阴影效果：

.shadow({
  radius: number,       // 阴影模糊半径
  color: string,        // 阴影颜色（支持透明度）
  offsetX: number,      // 水平偏移量
  offsetY: number       // 垂直偏移量
})

1.2 参数详解

radius（模糊半径）

radius 控制阴影的模糊程度，值越大，阴影越柔和、扩散范围越大：

• radius: 4 — 小阴影，清晰锐利
• radius: 8 — 中等阴影，柔和自然
• radius: 12 — 大阴影，模糊扩散
• radius: 16+ — 超大阴影，几乎不可见边缘

color（颜色与透明度）

阴影颜色使用十六进制颜色值，并通过透明度控制阴影的深浅：

// 颜色格式：RRGGBBAA（A 为透明度）
.color('#1218241A')  // 透明度 10%（1A / 255 ≈ 0.1）

透明度值越小，阴影越淡；值越大，阴影越深。

offsetX / offsetY（偏移量）

偏移量控制阴影相对于组件的位置：

• offsetX: 0, offsetY: 4 — 阴影在组件下方 4px
• offsetX: 2, offsetY: 2 — 阴影在右下角
• offsetX: 0, offsetY: -4 — 阴影在组件上方（上浮效果）

二、星办 OA 中的阴影应用

2.1 底部导航栏阴影

在 CustomTabBar 中，底部导航栏使用了上浮阴影：

// CustomTabBar.ets
build() {
  Row() {
    ForEach(this.titles, (title: string, index: number) => {
      // Tab 项
    }, (title: string) => title)
  }
  .width('100%')
  .padding({ bottom: Number(AppStorage.get('bottomRectHeight')) })
  .backgroundColor('#F8F9FC')
  .shadow({ 
    radius: 12, 
    color: '#1218241A', 
    offsetX: 0, 
    offsetY: -4   // ★ 向上偏移，阴影在组件上方
  })
}

这个阴影设计的精妙之处在于：

• offsetY: -4：负值偏移使阴影出现在组件上方，模拟底部导航栏"浮"在页面内容之上的效果
• radius: 12：较大的模糊半径，使阴影柔和自然
• color: '#1218241A'：深色（#121824）配合低透明度（1A ≈ 10%），形成微妙的阴影效果

2.2 卡片阴影设计

在星办 OA 中，卡片主要使用纯色背景配合圆角来区分层级，而不是依赖阴影。这是因为：

• Material Design 影响：现代设计倾向于使用背景色和圆角来区分层级，而非阴影
• 性能考量：阴影渲染需要 GPU 计算，大量阴影可能影响性能
• 视觉清洁度：减少阴影可以让界面更简洁、清晰

然而，在需要突出层级差异的地方，阴影仍然是一个重要的设计工具。

2.3 阴影的视觉层级作用

阴影在 UI 设计中主要用于创建视觉层级：

• 底层：页面背景（#F4F7FB 或 #F5F7FA）
• 中层：白色卡片（backgroundColor: Color.White），通过纯色背景区分
• 顶层：底部导航栏、浮动按钮，通过阴影区分

三、阴影参数深入分析

3.1 radius 与视觉距离

radius 参数模拟了光源距离对阴影的影响：

• 小半径 → 光源近 → 阴影清晰 → 组件离背景近
• 大半径 → 光源远 → 阴影模糊 → 组件离背景远

在 CustomTabBar 中，radius: 12 表示底部导航栏与页面内容之间的距离适中，不会过于突兀。

3.2 颜色透明度控制

阴影颜色的透明度公式：

透明度 = 实际透明度值 / 255

例如：

'#1218241A'  // 1A（十六进制）= 26（十进制）
              // 透明度 ≈ 26/255 ≈ 10.2%

透明度 10% 的阴影非常微妙，在大多数设备上都能清晰显示，但不会喧宾夺主。

3.3 偏移量的方向性

offsetX 和 offsetY 的正负值决定了阴影的投射方向：

• 正偏移：阴影向右/向下投射（最常用）
• 负偏移：阴影向左/向上投射

在底部导航栏中，offsetY: -4 使阴影向上投射，模拟了"上方光源"的效果，即导航栏浮在页面之上。

四、阴影设计的最佳实践

4.1 阴影层级体系

在移动端 UI 设计中，建议建立明确的阴影层级体系：

层级

radius

offsetY

透明度

用途

1（最浅）	4	2	5%	轻微悬浮的元素
2（中等）	8	4	8%	卡片、弹窗
3（最深）	12	4	10%	底部导航栏、FAB

4.2 阴影与圆角的配合

阴影与圆角的配合可以增强卡片的立体感：

// 卡片组合
Column() {
  // 卡片内容
}
.padding(16)
.borderRadius(16)        // 圆角让卡片更柔和
.backgroundColor(Color.White)
.shadow({                // 阴影让卡片浮起来
  radius: 8,
  color: '#00000014',    // 略微可见的阴影
  offsetX: 0,
  offsetY: 2
})

圆角与阴影的配合原则：

• 圆角越大，阴影应该越柔和（radius 更大）
• 圆角越小的元素，阴影偏移量应越小

4.3 避免过度阴影

过度使用阴影会导致以下问题：

• 视觉杂乱：太多的阴影让界面显得杂乱
• 层级混淆：阴影过多会导致用户无法区分元素的层级关系
• 性能影响：阴影渲染消耗 GPU 资源

星办 OA 的策略是"少即是多"——只在关键位置使用阴影，如底部导航栏。

五、阴影与品牌调性

5.1 阴影颜色与品牌色

阴影颜色应与品牌色协调。星办 OA 使用 #1218241A 作为阴影色，这是一种接近黑色的深色，配合低透明度，形成中性、自然的阴影效果。

5.2 阴影风格与品牌调性

• 柔和阴影（大 radius、低透明度）：传达现代、友好的品牌调性
• 清晰阴影（小 radius、高透明度）：传达专业、精确的品牌调性

星办 OA 选择柔和阴影，与其"现代企业办公"的品牌定位一致。

六、阴影与其他视觉效果的配合

6.1 阴影与背景色

阴影在不同背景色下的视觉效果不同：

// 浅色背景上 - 阴影清晰可见
.backgroundColor('#F8F9FC')
.shadow({ radius: 12, color: '#1218241A', ... })

// 深色背景上 - 阴影可能不明显，需要调整透明度
.shadow({ radius: 12, color: '#00000040', ... })  // 更高的透明度

6.2 阴影与模糊效果

ArkUI 还支持 blur 属性，可以与阴影配合使用：

// 毛玻璃效果（示例）
.backgroundBlurStyle(BlurStyle.Thin)
.shadow({ radius: 12, ... })

七、高阶阴影技巧

7.1 多层阴影

通过嵌套组件，可以实现多层阴影效果：

// 多层阴影（示例）
Column() {
  // 内容
}
.padding(16)
.borderRadius(16)
.backgroundColor(Color.White)
.shadow({ radius: 4, color: '#0000000A', offsetX: 0, offsetY: 2 })
.shadow({ radius: 12, color: '#00000008', offsetX: 0, offsetY: 8 })

7.2 动态阴影

结合交互状态，可以创建动态阴影效果：

// 按压状态的阴影变化（示例）
@Local pressed: boolean = false

Column()
  .onTouch((event: TouchEvent) => {
    this.pressed = event.type === TouchType.Down
  })
  .shadow({
    radius: this.pressed ? 4 : 12,
    color: '#1218241A',
    offsetX: 0,
    offsetY: this.pressed ? 2 : 4
  })

八、总结

阴影是 UI 设计中塑造视觉层次感的重要工具。在星办 OA 项目中，阴影设计遵循了"少即是多"的原则，在关键位置（如底部导航栏）使用阴影来提升 UI 品质感。

通过 shadow 属性的 radius、color、offsetX、offsetY 四个参数，可以精确控制阴影的视觉效果。在星办 OA 中，CustomTabBar 使用 radius: 12, color: '#1218241A', offsetX: 0, offsetY: -4 的上浮阴影，使底部导航栏在页面内容之上形成清晰的视觉层次。

阴影设计的最佳实践包括：

• 建立明确的阴影层级体系
• 阴影与圆角配合使用
• 避免过度阴影，保持界面清洁
• 阴影颜色与品牌调性协调

通过这些设计策略，星办 OA 实现了既有深度又不失简洁的企业级 UI 设计。