羽球联盟 HarmonyOS NEXT 实战系列 (18/20)：图片资源、图标体系与技术封面准备

wangji93

159人浏览 · 2026-07-07 22:58:39

wangji93 共创先锋 · 2026-07-07 22:58:39 发布

文章导读

一个看起来完整的应用，背后往往不是“图片够多”，而是资源职责划分足够清楚。
Tab 图标、操作图标、头像、赛事 logo、Banner 和封面图，在工程里本来就该走不同策略。
技术文章封面也不该直接挪用商店宣传图，它服务的是系列阅读，而不是营销转化。

页面效果

资源管理最怕“一把梭”。如果把 Tab 图标、页面操作图标、头像和赛事 logo 全都按同一种思路处理，界面很快就会失去层次。功能图标应该干净、可染色、适合跟随主题切换；内容位图应该优先保证清晰度和辨识度；封面则要保证整个系列的统一编号和版式语言。

首页资源与图标效果

羽球联盟首页很适合讲这个问题。底部 Tab 图标要跟随选中态切换主色，顶部搜索图标要和当前页面文字风格一致，Banner 和头像又必须保留图片本身的信息量。如果类型混用，用户第一眼看到的不是“这套应用挺完整”，而是“图都堆在一起了”。

实战拆解

这个项目对资源的划分是比较务实的。Tab、返回、搜索、收藏、设置这一类操作型图标，优先走可染色资源。它们在页面里的主要任务不是“展示纹理”，而是提供一个能随选中态、深浅色一起变化的稳定轮廓。比如底部导航栏会根据当前选中页切换 fillColor，如果这类图标做成难以控制色值的位图，维护成本会立刻上来。

头像、装备图、赛事 logo、Banner 这类资源则完全不同。它们承担的是信息展示功能，用户会看颜色、人物、球拍形态和赛事标识，这类内容更适合稳定的位图资源。换句话说，可染色图标解决交互一致性，位图资源解决内容表达力，两者不应该混成一类。

技术封面是第三种资源。它既不是页面图标，也不是应用宣传海报，而是系列阅读系统的一部分。羽球联盟这一组封面统一为 1200×675，左侧保留半透明信息面板，中间是编号胶囊和主题标题，底部统一落“ArkTS · ArkUI · 实战源码复盘”。这样的设计有一个明显好处：读者在目录页一眼就能识别“这是同一系列里的第几篇”，而不是被每篇完全不同的封面风格打断。

批量生成也比手工一张张改靠谱得多。背景、编号、标题行宽、字体和边距都由脚本统一控制，后续只要改一处规则，就能整体更新全部封面，不会出现第 18 篇和第 19 篇字号不一致、编号错位这种低级问题。

关键代码

@Builder
tabBuilder(idx: number, title: string, icon: Resource) {
  Column() {
    Image(icon)
      .width(24).height(24)
      .fillColor(this.currentIndex === idx ? AppColors.primary : AppColors.textTertiary)
    Text(title)
      .fontSize(AppSizes.f10)
      .fontColor(this.currentIndex === idx ? AppColors.primary : AppColors.textTertiary)
      .margin({ top: 2 })
  }
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
  .width('100%')
  .height(AppSizes.tabBarHeight)
}