【OpenHarmony/HarmonyOS】项目实战：高端精致视觉体系与沉浸式学习界面设计

摘要

高端精致不是堆渐变、堆阴影、堆动效，而是让界面看起来稳定、清爽、有层级，并且让用户知道下一步要做什么。本文结合「英语视界 YingYu」项目，分享如何通过设计 token、沉浸背景、悬浮导航、卡片层级和轻量动效，构建一个更精致的 OpenHarmony/HarmonyOS 项目界面。✨

相关文件：

entry/src/main/ets/pages/MainTabsV2.ets
entry/src/main/ets/pages/HomeContent.ets
entry/src/main/ets/components/AppDecorBackground.ets
entry/src/main/ets/styles/MintTokens.ets
entry/src/main/resources/base/element/color.json

一、什么是高端精致？

在移动应用里，高端精致通常体现在：

• 色彩克制；
• 层级清晰；
• 留白充足；
• 动效轻；
• 图标统一；
• 卡片边界明确；
• 文案不拥挤；
• 页面入口稳定。

学习项目尤其需要克制。因为用户打开应用是为了学习，不是为了看复杂动画。

二、项目视觉方向

「英语视界」采用的是柔和、卡片化、轻拟物和玻璃感结合的风格。页面里大量使用：

• 浅色背景；
• 低透明度光斑；
• 圆角卡片；
• 悬浮底部导航；
• SymbolGlyph 图标；
• 轻量进入动画；
• 响应式间距。

这些组合让项目更贴合“高端精致”方向。

三、设计 token：统一颜色基础

项目中有 MintTokens.ets：

export const MintColors = {
  primary: '#006b55',
  primaryContainer: '#98ffd2',
  onPrimaryContainer: '#007957',
  surfaceContainerLowest: '#ffffff',
  surfaceContainerLow: '#e3f9ee',
  surfaceContainer: '#def3e8',
  surfaceContainerHigh: '#d8ede3',
  surfaceContainerHighest: '#d2e7dd'
}

设计 token 的价值是：页面不需要到处硬编码颜色。后续如果换主题，只要调整 token。

四、沉浸背景设计

AppDecorBackground.ets 中使用渐变和漂浮装饰构建背景：

Column()
  .width('100%')
  .height('100%')
  .linearGradient({
    angle: 165,
    colors: [
      [$r('app.color.decor_gradient_0'), 0.0],
      [$r('app.color.decor_gradient_1'), 0.3],
      [$r('app.color.decor_gradient_2'), 1.0]
    ]
  })

装饰元素使用低透明度：

Image($r('app.media.star_decor'))
  .width(18)
  .height(18)
  .opacity(0.28)
  .position({ x: '6%', y: '14%' })

低透明度的好处是：背景有氛围，但不会抢内容注意力。

五、漂浮动效

背景装饰有轻微浮动：

private startBob(): void {
  animateTo({
    duration: 4200,
    curve: Curve.EaseInOut
  }, () => {
    this.floatPhase = this.floatPhase === 0 ? 1 : 0
  })
  this.bobTimer = setTimeout(() => {
    this.startBob()
  }, 4200) as number
}

动效周期 4200ms，很慢，不会产生干扰。

辅助函数：

private ty(sign: number): number {
  return sign * (this.floatPhase === 0 ? 0 : 6)
}

private rot(extra: number): number {
  return extra + (this.floatPhase === 0 ? 0 : 3)
}

这种动效适合学习项目，因为它只是增加生命力，不制造噪音。

六、悬浮导航栏

新版主页面使用自绘底部导航：

@Builder
BottomNavBar() {
  Column() {
    Row() {
      this.NavItem('首页', $r('sys.symbol.house_fill'), 0)
      this.NavItem('学习', $r('sys.symbol.book'), 1)
      this.NavItem('练习', $r('sys.symbol.square_grid_2x2'), 2)
      this.NavItem('我的', $r('sys.symbol.person_crop_circle_fill'), 3)
    }
  }
  .width('88%')
  .height(72)
  .borderRadius(36)
  .backgroundColor('rgba(255, 255, 255, 0.95)')
  .shadow({
    radius: 24,
    color: 'rgba(0, 0, 0, 0.08)',
    offsetX: 0,
    offsetY: 8
  })
  .position({ x: '6%', y: '95.5%' })
}

这个导航栏的精致感来自：

• 不满屏；
• 胶囊圆角；
• 轻阴影；
• 半透明背景；
• 图标和文字组合。

七、选中状态设计

选中状态通过颜色、背景和字重表达：

SymbolGlyph(icon)
  .fontSize(this.iconScale[index] * 24)
  .fontColor([this.currentIndex === index ? '#FF6B35' : '#8A94A7'])
  .fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal)

Text(label)
  .fontSize(11)
  .fontColor(this.currentIndex === index ? '#FF6B35' : '#8A94A7')

背景：

.backgroundColor(this.currentIndex === index ? 'rgba(100, 210, 177, 0.15)' : Color.Transparent)

用户一眼就能看出当前所在页面。

八、轻量交互动效

Tab 切换时，图标轻微放大：

animateTo({
  duration: 200,
  curve: Curve.EaseOut
}, () => {
  this.iconScale[this.prevIndex] = 1
  this.iconScale[index] = 1.15
})

随后回落：

setTimeout(() => {
  animateTo({
    duration: 150,
    curve: Curve.EaseOut
  }, () => {
    this.iconScale[index] = 1
  })
}, 180)

动效只表达反馈，不干扰学习。

九、卡片式首页

首页使用多张卡片组织内容：

Column() {
  this.WelcomeSection()
  this.DailyRecommendCard()
  this.QuickAccessSection()
  this.FunEnglishPickSection()
  this.ListeningRecommendSection()
  this.FeatureGrid()
  this.StatisticsCard()
}

每张卡片只承载一个主题：

• 欢迎和年级；
• 每日一句；
• 快捷入口；
• 趣味英语；
• 听力推荐；
• 学习统计。

这比把所有内容堆在一个区域更清晰。

十、响应式精致感

项目中根据平板调整尺寸：

Text('欢迎来到英语视界')
  .fontSize(this.isTabletDevice ? 26 : 22)

.padding(this.isTabletDevice ? 24 : 18)
.borderRadius(this.isTabletDevice ? 24 : 18)

响应式不是只改宽度，还要调整：

• 字号；
• padding；
• 圆角；
• 卡片间距；
• 网格列数；
• 最大内容宽度。

十一、文案也影响质感

项目里一些文案比较轻：

• 每天学一点，语感自然来；
• 坚持学习，遇见更好的自己；
• 今日目标已完成；
• 还有 5 个单词等待复习。

高端精致不仅是视觉，也是语言。文案过于机械，会拉低整体体验。

十二、避免过度设计

学习项目要避免：

• 大面积高饱和渐变；
• 过多阴影；
• 复杂动画；
• 页面元素过密；
• 每张卡都不同风格；
• 装饰抢内容。

精致感来自统一和克制。

十三、小结

本文结合「英语视界 YingYu」项目，梳理了高端精致视觉体系的实现方式：

• 使用设计 token 统一颜色；
• 使用沉浸背景增强氛围；
• 使用低透明度装饰避免干扰；
• 使用悬浮导航提升层级；
• 使用轻量动效增强反馈；
• 使用卡片分区组织学习内容；
• 使用响应式尺寸适配不同设备；
• 使用温和文案提升整体感受。

高端精致不是“看起来复杂”，而是让用户感觉舒服、清晰、可靠。对学习项目来说，这种体验会直接影响用户是否愿意每天打开应用。🌿