鸿蒙原生应用开发实战:校园影像我的页 —— 摄影徽章墙与签到联动经验条 鸿蒙原生应用开发实战校园影像我的页 —— 摄影徽章墙与签到联动经验条App 19「校园影像」我的 TabProfileTab是个人中心页。整页用渐变用户卡片摄影爱好者 Lv.6 680/1000 经验条与签到联动 4 栏统计作品/点赞/粉丝/获奖 6 摄影徽章成就墙4 解锁 2 未解锁 本周拍摄量条形图平均 71% 6 项菜单消息通知带数字 5/NEW 角标 关于应用信息卡。本篇基于19-campus-photo/entry/src/main/ets/pages/ProfileTab.ets约 226 行逐段拆解附 4 张实机截图。一、整体结构与 App 18 我的页同源ProfileTab 与 App 18 我的页几乎完全同构UserCard StatRow 固定、其余滚动签到联动 exp10build() { Column() { this.UserCard() this.StatRow() Scroll() { Column({ space: 14 }) { this.AchievementWall() this.WeekChart() this.MenuList() this.AboutInfo() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }6 个块UserCard身份→ StatRow数据→ AchievementWall成就→ WeekChart行为图→ MenuList资产→ AboutInfo关于。固定用户卡 滚动内容布局App 18 同款——身份/经验/签到常驻顶部。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCardLv.6 摄影爱好者 签到联动经验UserCard 是摄影爱好者 Lv.6的青绿渐变身份卡签到按钮真实联动经验值与 App 18 同款真联动设计Builder UserCard() { Column() { Column({ space: 12 }) { Row({ space: 16 }) { Stack({ alignContent: Alignment.BottomEnd }) { Row() { Text().fontSize(48) } .width(80).height(80).backgroundColor(#FFFFFF33).borderRadius(40).justifyContent(FlexAlign.Center) Row() { Text(Lv.6).fontSize(10).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) } .backgroundColor(C.accent).borderRadius(8) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) } Column({ space: 6 }) { Text(摄影爱好者).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(摄影社 · 资深成员).fontSize(12).fontColor(#FFFFFFCC) }.alignItems(HorizontalAlign.Start).layoutWeight(1) }.width(100%) Column({ space: 6 }) { Row() { Text(经验值).fontSize(11).fontColor(#FFFFFFCC) Blank() Text(this.exp / this.maxExp).fontSize(11).fontColor(#FFFFFFCC) }.width(100%) Progress({ value: this.exp, total: this.maxExp }).color(#FFFFFF).backgroundColor(#FFFFFF33) .borderRadius(4).height(8).width(100%) }.width(100%) Button(this.checkedIn ? ✓ 今日已签到 : 签到 10经验) .fontSize(13).fontColor(C.primary) .backgroundColor(this.checkedIn ? #FFFFFF66 : #FFFFFF) .borderRadius(20).height(36) .onClick(() { if (!this.checkedIn) { this.checkedIn true; this.exp 10; promptAction.showToast({ message: 签到成功10经验值 }); } }) } .width(100%).padding({ top: this.safeTop 24, left: D.pad, right: D.pad, bottom: 24 }) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }.width(100%) }2.1 身份设定头像相机——呼应摄影主题姓名摄影爱好者——注意这不是人名是身份称号区别于 App 18 的张同学——爱好摄影的匿名用户设定摄影社区用称号而非真名保护隐私等级Lv.6 C.accent浅青绿徽章Slogan摄影社 · 资深成员——社团 级别身份不是已使用 X 天的时长叙事而是社团地位叙事Lv.6680/1000 68%——系列第二高等级App 18 Lv.8 后回落到 Lv.6。2.2 签到联动经验值真联动Button(this.checkedIn ? ✓ 今日已签到 : 签到 10经验) .fontSize(13).fontColor(C.primary) .backgroundColor(this.checkedIn ? #FFFFFF66 : #FFFFFF) .borderRadius(20).height(36) .onClick(() { if (!this.checkedIn) { this.checkedIn true; this.exp 10; promptAction.showToast({ message: 签到成功10经验值 }); } })签到三态联动与 App 18 完全同构未签 → 签到 10经验 白底青绿字点击 →checkedIn trueexp 10 Toast已签 → ✓ 今日已签到 半透明白底 点击拦截exp 10经验值联动——签到不只是打勾真实增加经验值进度条680/1000 → 690/1000实时涨——签到即升级App 18 首创、App 19 延续。State checkedInState expState maxExp三个状态——系列个人中心的标准3 状态。三、StatRow4 栏统计StatRow 与 App 18 同构90% 宽 负边距 -28 悬浮private stats: StatItem[] [ { value: 248, label: 作品 }, { value: 1.2k, label: 点赞 }, { value: 36, label: 粉丝 }, { value: 12, label: 获奖 } ];作品 248/点赞 1.2k/粉丝 36/获奖 12——与首页统计校园照片 248/总点赞 1.2k/参与拍摄 36一致✓参与拍摄 36 粉丝 36的数据一致性——虽然语义略有差异但数字对上了。获奖 12是摄影 App 特有统计比赛获奖次数——获奖数反映摄影能力。4 栏同色C.text。四、AchievementWall摄影徽章墙AchievementWall 是 6 个摄影徽章的 3 列 Row4 解锁 2 未解锁private badges: BadgeItem[] [ { id: 1, icon: , name: 摄影新手, unlocked: true }, { id: 2, icon: , name: 连续签到, unlocked: true }, { id: 3, icon: ⭐, name: 精选作品, unlocked: true }, { id: 4, icon: , name: 比赛获奖, unlocked: true }, { id: 5, icon: , name: 百赞作品, unlocked: false }, { id: 6, icon: , name: 校园摄影师, unlocked: false } ];6 个徽章完全贴合摄影业务摄影新手/连续签到/精选作品⭐/比赛获奖解锁、百赞作品/校园摄影师未解锁——摄影成长阶梯新手→签到→精选→获奖→百赞→摄影师——徽章名 摄影成就对比 App 17 复用省钱能手的违和App 19 完全定制。百赞作品与首页樱花季 156 赞呼应——156 100 已达成百赞但徽章未解锁数据小瑕疵156 赞的作品存在百赞徽章却未解锁——徽章解锁条件与数据不一致是 demo 常见小瑕疵真实项目应条件驱动解锁。解锁/未解锁三件套背景/透明度/文字4 / 6 已解锁。五、WeekChart本周拍摄量WeekChart 与首页同构7 天条形图 平均 71%Builder WeekChart() { Column({ space: 10 }) { Row() { Text(本周拍摄量).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(平均 71%).fontSize(11).fontColor(C.textDim) }.width(100%) Row() { ForEach(this.weekBars, (b: BarItem) { Column({ space: 6 }) { Column().width(14).height(b.value * 0.7).backgroundColor(C.primary).borderRadius(4) Text(b.day).fontSize(10).fontColor(C.textDim) }.layoutWeight(1) }, (b: BarItem) b.day) }.width(100%).alignItems(VerticalAlign.Bottom).height(90) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }数据与首页完全一致同一份 weekBars40/65/55/80/90/100/70——平均 71% (406555809010070)/7 71.4 ≈ 71% ✓——汇总有数学依据。与首页的差异首页共 42 张口径不匹配的瑕疵我的页平均 71%口径正确——同一个 App 内部两页周图口径不一致首页张数vs 我的页百分比——又是口径混用的坑本系列反复出现的 demo 瑕疵。六、MenuList6 项菜单 数字/NEW 角标MenuList 与 App 18 同构showBadge布尔控制 两种角标色private menus: MenuItem[] [ { id: 1, icon: , label: 个人主页, badge: , showBadge: false }, { id: 2, icon: ️, label: 我的相册, badge: , showBadge: false }, { id: 3, icon: , label: 消息通知, badge: 5, showBadge: true }, { id: 4, icon: , label: 滤镜管理, badge: NEW, showBadge: true }, { id: 5, icon: , label: 云端备份, badge: , showBadge: false }, { id: 6, icon: ❓, label: 帮助反馈, badge: , showBadge: false } ];6 项菜单个人主页/我的相册/消息通知5/滤镜管理NEW/云端备份/帮助反馈——我的相册和滤镜管理是摄影 App 特有菜单。消息通知 5社区页新点赞 28新评论 12...——不完全对应但有 5 条待处理的语义成立——数字角标示意。角标两种色NEW →C.accent浅青绿 / 数字 →C.danger红Divider().strokeWidth(0.5)超细分隔线App 18 同款。七、AboutInfo关于应用AboutInfo 是 3 行键值对关于卡与 App 18 同构Builder AboutInfo() { Column({ space: 8 }) { Row() { Text(关于应用).fontSize(13).fontColor(C.textDim).layoutWeight(1) Text(v2.0.0).fontSize(12).fontColor(C.textDim) }.width(100%) Row() { Text(运行环境).fontSize(13).fontColor(C.textDim).layoutWeight(1) Text(HarmonyOS 6.0).fontSize(12).fontColor(C.primary) }.width(100%) Row() { Text(开发者).fontSize(13).fontColor(C.textDim).layoutWeight(1) Text(校园影像团队).fontSize(12).fontColor(C.textDim) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }关于应用 v2.0.0 / 运行环境 HarmonyOS 6.0青绿高亮/ 开发者 校园影像团队——开发者跟随 App 名校园影像团队。八、State 与数据一致性ProfileTab 有3 个 StatecheckedIn/exp/maxExp——系列个人中心标准App 18 同款。数据一致性作品 248 首页校园照片 248 ✓点赞 1.2k 首页总点赞 1.2k ✓粉丝 36 首页参与拍摄 36 ✓数字对上消息通知 5 社区页统计间接✓4 组数据跨页一致——App 19 的数据闭环完整首页精选作品 → 发布页发布 → 社区页收到互动 → 我的页统计作品/点赞。九、与 App 18 我的页对比总结维度App 18 社交匹配App 19 校园影像主题色粉红 #EC4899青绿 #0D9488用户张同学 Lv.8摄影爱好者 Lv.6统计好友/互动/活动/匹配率作品/点赞/粉丝/获奖徽章社交徽章摄影徽章菜单编辑资料/隐私…我的相册/滤镜管理…Aboutv2.0.0v2.0.0同款App 19 与 App 18 我的页几乎完全同构布局/签到联动/3 状态/6 菜单/About——个人中心模板第 5 次复用App 13-19签到联动经验值从 App 18 延续到 App 19。十、摄影 App 的作品资产闭环App 19 我的页的 4 项统计作品/点赞/粉丝/获奖构成摄影 App 的作品资产1. 作品 248——数量资产发了多少作品2. 点赞 1.2k——影响力资产作品被认可多少3. 粉丝 36——关系资产多少人关注4. 获奖 12——荣誉资产比赛成就作品 → 点赞 → 粉丝 → 获奖是摄影师的成长资产链发布作品作品数1 → 作品被点赞点赞数1 → 高热度作品带来粉丝粉丝数1 → 优质作品参赛获奖获奖数1 → 获奖提升知名度 → 更多粉丝/点赞循环资产链闭环是内容创作者的核心激励——我的页统计 创作者的成长仪表盘对比 App 13 音乐订单、App 16 商城积分的消费型统计App 19 是创作型统计。真实项目的创作者中心收入统计创作激励/广告分成数据周报本周涨粉/爆款作品成长建议你的夜景作品受欢迎多拍夜景作品资产是摄影 App 我的页的灵魂——用户看统计就知道我在这个平台混得怎么样。十一、称号型身份 vs 实名型身份的设计App 19 我的页用户是摄影爱好者称号而非张同学人名——称号型身份设计App用户身份类型13 音乐小明同学实名昵称14 运动张运动实名昵称16 商城王积分实名昵称18 社交张同学实名昵称19 摄影摄影爱好者称号匿名称号型身份的 3 个优势隐私保护——不用真名/昵称用我是谁身份标签平台统一——所有用户都是XX爱好者/XX达人平台身份体系统一匿名创作——创作者更敢表达不用担心身份暴露称号 社团组合摄影爱好者 摄影社 · 资深成员——个人称号 组织归属双身份——比纯昵称更有平台生态感。称号型身份适合摄影社区蜂鸟网、兴趣社区兴趣部落、匿名社区树洞——兴趣优先、身份弱化的平台。实名型身份适合社交 App微信/探探、电商淘宝、服务 App外卖——信任优先、身份明确的平台。身份类型 平台调性——App 19 的称号型身份配合摄影创作调性比实名更契合。十二、签到10经验的激励设计App 19 签到 10经验与 App 18 完全同款值得从激励角度拆解10 经验这个数字的设计680/1000 初始——签到 32 次即可升级(1000-680)/10 32 天——一个月左右升级是合理的激励周期太长失去动力、太短没有成就感10是**一次签到 1% 进度10/1000——签到 10 天 1% 进度的缓慢成长不对10/1000 1%签到 100 次才满级100%——这个数字设计其实偏慢App 18 也是 720/1000 10——10 经验在 1000 上限下是细水长流型**每天 1%100 天升一级——适合摄影这种低频高价值场景不是每天必须来的工具是兴趣社区。对比系列签到积分App签到奖励上限周期14 运动10 积分—即时可用16 商城20 积分—兑换商品18 社交10 经验1000100 天/级19 摄影10 经验1000100 天/级经验型App 18/19vs 积分型App 14/16的差异经验升级/身份长期成长感——我是 Lv.6积分兑换/消费短期获得感——我能换保温杯摄影 App 用经验不用积分——摄影是兴趣创作不是消费场景经验/等级比积分/兑换更契合摄影师在乎段位而非兑换。十三、总结App 19「校园影像」我的页解析完毕。Lv.6 摄影爱好者 签到联动经验 摄影徽章墙 获奖统计让 App 19 成为系列的摄影主题标杆。