前言空状态是应用中不可或缺的 UI 设计。当用户还没有任何数据时空状态页面需要传达“这里没有内容“的信息同时引导用户进行下一步操作。“海风日记“在上首页、回顾页、标签管理页、搜索页等多个地方都设计了空状态引导通过品牌元素emoji 波浪、提示文字和行动按钮的组合引导用户创建第一篇日记。本文将从源码出发深入讲解空状态的设计原则和实现方式。一、空状态设计原则1.1 空状态的三个要素一个优秀的空状态应该包含以下三个要素要素作用示例视觉元素吸引注意力缓解“空“的突兀感、、提示文字说明当前状态“还没有日记哦”行动按钮引导用户下一步操作“写第一篇日记”1.2 海风日记的空状态场景页面视觉元素提示文字行动按钮首页“还没有日记哦”“写第一篇日记”回顾页“还没有数据哦”“去写日记”日历页“这个月还没有日记”无点击下方 标签页️“还没有标签”输入框添加搜索页“没有找到相关内容”无换关键词二、首页空状态实现2.1 源码if (this.diaryList.length 0) { // 空状态引导写第一篇日记 Column({ space: 0 }) { // 视觉元素波浪 emoji Text().fontSize(64).margin({ bottom: 20 }) // 提示文字 Text(还没有日记哦) .fontSize(18).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) .margin({ bottom: 8 }) // 补充说明 Text(记录今天的心情让每一天都值得回忆) .fontSize(14).fontColor(COLOR_TEXT_HINT) .textAlign(TextAlign.Center) .padding({ left: 40, right: 40 }) .margin({ bottom: 32 }) // 行动按钮 Button(写第一篇日记) .height(48).fontSize(16).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) .backgroundColor(COLOR_PRIMARY).borderRadius(24) .padding({ left: 32, right: 32 }) .shadow({ radius: 12, color: rgba(245,166,35,0.30), offsetY: 4 }) .onClick(() { router.pushUrl({ url: pages/diary/WriteDiaryPage }) }) } .width(100%).layoutWeight(1) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }2.2 布局分析┌──────────────────────────────┐ │ │ │ │ ← 视觉元素emoji │ │ │ 还没有日记哦 │ ← 主标题 │ │ │ 记录今天的心情让每一天 │ │ 都值得回忆 │ ← 副标题 │ │ │ ┌──────────────────────┐ │ │ │ 写第一篇日记 │ │ ← 行动按钮 │ └──────────────────────┘ │ │ │ └──────────────────────────────┘三、回顾页空状态实现3.1 源码if (MOCK_DIARIES.length 0) { Column({ space: 12 }) { Text().fontSize(48).margin({ top: 60 }) Text(还没有数据哦) .fontSize(17).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) Text(写几篇日记后这里会展示你的\n写作统计和情绪趋势) .fontSize(14).fontColor(COLOR_TEXT_HINT) .textAlign(TextAlign.Center).lineHeight(22) Button(去写日记) .height(44).fontSize(15).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) .backgroundColor(COLOR_PRIMARY).borderRadius(22) .padding({ left: 28, right: 28 }).margin({ top: 24 }) .onClick(() router.pushUrl({ url: pages/diary/WriteDiaryPage })) } .width(100%).alignItems(HorizontalAlign.Center).layoutWeight(1) }四、空状态的设计对比4.1 不同场景的空状态场景emoji标题描述按钮首页空日记“还没有日记哦”“记录今天的心情…”“写第一篇日记”回顾空数据“还没有数据哦”“写几篇日记后…”“去写日记”日历空月份“这个月还没有日记”“点击下方 记录…”无标签空列表️“还没有标签”“添加标签可以帮你…”输入框搜索无结果“没有找到相关内容”“换个关键词试试吧”无4.2 空状态与品牌一致性所有空状态都遵循以下品牌规范使用 emoji 作为视觉元素保持品牌调性一致暖色系文字主标题使用COLOR_TEXT_MAIN副标题使用COLOR_TEXT_HINT橙色按钮CTA 按钮使用COLOR_PRIMARY品牌色居中布局所有空状态使用居中对齐五、空状态的交互反馈5.1 按钮点击反馈Button(写第一篇日记) .shadow({ radius: 12, color: rgba(245,166,35,0.30), // 橙色阴影 offsetY: 4 }) .onClick(() { router.pushUrl({ url: pages/diary/WriteDiaryPage }) })5.2 跳转后的行为点击空状态按钮后用户跳转到写日记页面完成后返回首页首页应该显示新的日记内容// 在 onPageShow 中刷新数据 onPageShow() { this.diaryList [...MOCK_DIARIES] }六、空状态与真实数据的过渡6.1 条件渲染if (this.diaryList.length 0) { // 空状态 this.emptyState() } else { // 数据列表 this.diaryListContent() }6.2 过渡动画// 空状态到数据列表的过渡 Column() .transition({ type: TransitionType.Insert, opacity: 1 }) .transition({ type: TransitionType.Delete, opacity: 0 })七、常见问题与排查7.1 空状态不显示问题数据为空时空状态没有显示。原因条件判断逻辑错误或数据初始值不为空。解决方案检查State初始值和判断逻辑State diaryList: DiaryEntry[] [] // 初始值为空数组7.2 空状态和列表同时显示问题空状态和日记列表同时显示在页面上。原因条件渲染的 else 分支缺失。解决方案使用 if/else 确保互斥显示if (data.length 0) { // 空状态 } else { // 列表 }总结本文通过“海风日记“的多个空状态场景深入讲解了空状态引导的设计和实现设计原则视觉元素 提示文字 行动按钮首页实现emoji 标题 描述 按钮的完整布局多场景空状态首页、回顾、日历、标签、搜索的差异化设计品牌一致性所有空状态遵循统一的品牌规范交互反馈按钮阴影、跳转后的数据刷新下一篇文章将深入讲解WaveHeaderBand 组件的品牌视觉头部封装敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Button 组件文档Text 组件文档Shadow 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区Router 路由文档ArkUI 动画概述