鸿蒙原生应用 ArkUI 实战拆解 —— 签到墙活动页的积分奖励标签与规则信息卡App 45「校园签到墙」活动页Func1Tab主题色#FDCB6E黄色yellow4 个 Tab 分别为首页✅、活动、签到、我的。活动页采用Header 活动信息列表两区布局——白色单行 Header活动信息20 号加粗4 张活动信息卡 晨读打卡 / 晨跑活动 / 自习室学习 / 社团活动每张含 50×50 淡黄圆角图标 活动名 ⏰ 时段 橙色50 积分奖励标签 淡黄规则区 连续签到7天获积分奖励。每张卡展示活动名、时间、签到规则、积分奖励四项信息是签到活动的说明书。本篇基于45-checkin-wall/entry/src/main/ets/pages/Func1Tab.ets共 77 行逐段拆解附 4 张实机截图。一、整体结构两区Header 活动信息列表布局活动页是品牌头部 活动信息卡列表的两区布局build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ActList() } .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) }2 块结构Header— 单行品牌头活动信息ActList— 4 张活动信息卡展示每个签到活动的完整说明书与首页今日签到清单可操作签到按钮不同活动页是活动百科信息展示规则奖励——首页回答今天签什么、活动页回答每个活动怎么签、有什么奖励两页分工清晰。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行标题Header() { Row() { Text(活动信息).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }单行 20 号加粗、safeTop 56高度、白底、底部对齐——系列二级页统一范式。活动信息而非活动列表的命名暗示本页的定位是查看活动详情信息而非参与活动参与在首页/签到页信息展示型页面。三、ActList活动信息卡ActList() { Column({ space: 14 }) { ForEach(this.acts, (a: ActInfo) { Column({ space: 12 }) { Row({ space: 12 }) { Row() { Text(a.emoji).fontSize(26) } .width(50).height(50).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(a.name).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Text(⏰ a.time).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(a.reward).fontSize(12).fontColor(C.warn) .padding({ left: 8, right: 8, top: 3, bottom: 3 }).backgroundColor(#FFF3E0).borderRadius(6) }.width(100%) Row({ space: 8 }) { Text().fontSize(13) Text(a.rule).fontSize(13).fontColor(C.textSub).layoutWeight(1) } .width(100%).padding(10).backgroundColor(C.cardSoft).borderRadius(D.rSm) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: a.name }); }) }, (a: ActInfo) a.id.toString()) }.width(100%) }4 个活动21-26 行活动时段规则奖励 晨读打卡每日 07:00-08:00连续签到7天获积分奖励50 积分 晨跑活动每日 06:30-07:30定位操场完成签到30 积分 自习室学习全天开放扫描自习室二维码20 积分 社团活动周三 15:00-17:00现场扫码签到40 积分卡片细节头行图标 名称/时间 奖励50×50 淡黄圆角图标 名称 15 号加粗 ⏰ 时段 12 号浅灰layoutWeight(1)撑开橙色积分奖励标签——fontColor(C.warn)橙色文字 #FFF3E0浅橙底 圆角 6 的50 积分小标签橙色是奖励的通用语义色金/橙 价值一眼吸引。规则区独立一行—— 图标 规则文字 13 号深灰textSubbackgroundColor(C.cardSoft)淡黄浅底 圆角 10——规则用底色区块与主信息区区分视觉上上信息、下规则层次分明。签到方式多样化4 个活动的规则揭示三种签到方式——连续签到晨读、定位签到晨跑、扫码签到自习室/社团——对应签到页的扫码/定位两种模式 连续机制规则与签到页功能严格对应。积分梯度50/30/20/40 分——晨读最高连续 7 天难度大、自习室最低全天可签容易积分与签到难度成正比激励体系自洽。整卡点击点击 Toast 活动名——产品化后进入活动详情页含签到入口。四、跨页数据自洽活动页是签到体系的规则说明书活动页与首页、签到页、我的页的联动4 个活动同名同序↔ 首页今日活动清单晨读打卡/晨跑活动/自习室学习/社团活动——首页展示今天签哪些、本页展示每个怎么签。签到方式↔ 签到页两种模式——晨读的连续签到对应连续天数机制、晨跑的定位操场对应签到页定位签到、自习室/社团的扫码对应扫码签到——规则与功能一一对应。积分奖励↔ 签到页签到成功 50积分晨读 50 分对应当日签到积分、我的页860 积分累计——积分从活动产生、在签到页累加、在我的页沉淀。连续签到7天↔ 首页7连续天数、我的页勋章 连续7天——7 天连续是晨读活动的奖励门槛也是全 App 的核心激励目标。五、实机截图与交互演示本节结合 4 张实机截图逐张还原活动页的视觉效果与交互过程。1. 活动页首屏活动信息卡第一张截图是活动页默认首屏顶部活动信息标题下方第一张活动卡—— 晨读打卡50×50 淡黄图标 ⏰ 每日 07:00-08:00 橙色50 积分标签 淡黄规则区 连续签到7天获积分奖励第二张 晨跑活动每日 06:30-07:30 / 30 积分 / 定位操场完成签到部分可见。每张卡图标 名称时间 橙色积分 规则区的四层信息结构整齐统一。2. 点击积分标签整卡 Toast第二张截图是点击晨读打卡卡橙色50 积分标签区域后的反馈弹出晨读打卡Toast——整卡挂载onClick、闭包捕获a.name点击卡面任意区域图标/名称/积分/规则都弹活动名点击热区覆盖整卡。3. 点击规则区活动名 Toast第三张截图是点击晨读打卡卡的淡黄规则区 连续签到7天获积分奖励后的反馈弹出晨读打卡Toast——规则区是卡片内部区域点击同样触发整卡事件验证了整卡可点 内部区域无独立事件的层级关系。4. 活动页完整列表四活动全览第四张截图是活动页的完整列表四个活动卡全部可见晨读打卡 50 分 / 晨跑活动 30 分 / 自习室学习 20 分 / 社团活动 40 分积分梯度50/30/20/40与签到难度对应规则区连续/定位/扫码揭示三种签到方式。Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。六、扩展思考签到活动的规则与反作弊设计活动页的规则定位/扫码/连续背后是签到系统的反作弊设计定位签到晨跑定位操场完成签到——需在指定地理围栏内GPS 半径校验防止在家也能签晨跑——ohos.geoLocationManager的地理围栏能力是定位签到的技术基础。扫码签到自习室/社团扫描自习室二维码/现场扫码签到——二维码每分钟刷新动态码防止截图转发代签——扫码签到的核心是动态二维码 单设备单次。连续签到晨读连续签到7天——需在 07:00-08:00 时段内签到时段外无效防止半夜补签——时段校验是连续签到的规则基础。时间窗口每个活动有明确时段07:00-08:00 等——时段内签到才有效new Date()与活动时段的比对是签到服务的核心校验。设备与账号签到绑定账号一账号一天一签 设备指纹防多开刷签——签到是稀缺奖励积分/勋章反作弊是维持激励公平的底线。七、扩展思考积分体系的完整设计活动页的积分标签是签到激励体系的一环完整积分体系值得展开积分来源活动签到50/30/20/40 分 连续签到加成连续 7 天额外奖励——多源积分让签到多样化。积分消费我的页 积分兑换——兑换校园福利食堂代金券/文创礼品/自习室时长——积分是签到 → 兑换的闭环货币让签到的努力有实际回报。积分等级860 积分可设等级青铜 → 黄金 → 王者签到者——积分不仅是余额更是等级与勋章体系我的页勋章卡联动。积分明细我的页签到记录应展示每笔积分流水何时签、得几分——积分的透明性是信任基础。积分有效期学期积分期末清零vs 累计积分永久——有效期设计影响用户兑换节奏临期催促兑换。八、开发者视角活动页的调试与验证技巧奖励标签的橙色对比#FFF3E0浅橙底 C.warn橙字在 12 号小字号下的可读性——真机验证橙色标签清晰必要时加深字色。规则区与主区的区分规则区cardSoft淡黄底与卡片白底、图标淡黄底primarySoft——三种浅色白/淡黄/浅橙在同一卡片内需层次清晰真机确认无糊成一片。整卡点击的边界onClick挂外层 Column 覆盖全卡——确认积分标签、规则区、图标都可点无独立事件遮挡与首页签到按钮Text 独立 onClick的层级不同本页整卡一个事件。长规则文本的换行规则文字 13 号layoutWeight(1)撑开——长规则扫描自习室二维码并拍照确认会自动换行验证规则区高度自适应。数据自洽4 个活动与首页同名同序、积分与签到页签到成功 50积分一致——修改任一页需同步建议抽公共数据源。九、FAQ 与一句话总结Q1活动页和首页的活动列表有什么区别首页是今日可签清单带签到按钮可操作活动页是活动规则说明书带积分/规则供查看——一个行动、一个知识首页回答今天签什么、活动页回答怎么签、有什么奖励。Q2为什么积分标签用橙色橙色C.warn在系列中是奖励/警示的语义色——积分是价值金色联想用橙色标签醒目地传达签了就有奖励与黄色主色形成黄底 橙标的邻近色搭配和谐醒目。Q3三种签到方式是怎么确定的按活动场景设计晨跑需要到场定位、自习室/社团有固定地点扫码、晨读是习惯养成连续——签到方式匹配活动性质规则区的说明书功能就是让用户提前知道这个活动怎么签。Q4积分会被清零吗Demo 未实现。产品化按学期或年度清零积分有效期或永久累计——有效期设计影响兑换节奏是产品运营决策。Q5点击活动卡后去哪Demo 弹 Toast。产品化后进入活动详情页大图 规则 积分 签到入口 参与人数——活动页的卡片是详情页的入口。一句话总结活动页以活动信息卡完成了签到活动的规则展示——图标 名称/时间 橙色积分标签 规则区的四层信息卡把每个签到活动的怎么签、有什么奖励讲得清清楚楚。橙色积分的奖励语义、三种签到方式的规则对应、积分梯度与难度匹配让本页既是签到说明书又是激励展示墙——77 行代码一个让用户看完就想签到的活动信息页。十、系列横向对比规则说明类页面的三种形态活动页是规则说明页与系列其他信息展示页对比可看清其设计定位页面信息类型信息组织核心元素App 45 活动页活动规则奖励四层信息卡积分标签规则区App 42 话题页话题目录四行网格卡条数背书App 40 活动页活动清单四行信息卡参与人数差异要点信息维度App 45 活动卡的信息是规则 奖励怎么签 得多少App 40 活动卡是日期 人数何时 多少人App 42 话题卡是描述 条数是什么 多少条——信息维度永远服务于页面职能签到活动页卖奖励吸引力、活动清单页卖热度参与感、话题目录页卖规模内容量。奖励的可视化App 45 的橙色积分标签C.warn 浅橙底是系列中唯一的奖励标签——积分是签到产品的核心激励奖励需要最醒目的视觉橙色 价值其他页面的数据标签条数/人数用浅灰即可。规则区的设计App 45 用浅黄底区块cardSoft隔离规则——规则是说明书信息用底色区块与主信息区分读起来像附注App 40 的日期/人数直接嵌在信息流里同层级因为它们是主数据不是说明。复用价值本页四层信息卡图标/名称时间/奖励标签/规则区可直接复用到任何活动 规则 奖励类页面竞赛报名、课程介绍、任务说明是信息型卡片的成熟模板。十一、扩展思考签到活动的运营与季节性活动页的 4 个活动是签到运营的基础盘其运营节奏值得展开常驻活动 限时活动晨读/晨跑/自习室是常驻每日可签、社团活动是周期周三——产品可增加限时活动考试周冲刺签到、节日双倍积分——常驻保底 限时刺激的运营组合。活动的季节轮换秋季学期推晨跑天气凉爽、冬季推图书馆自习室内——活动按季节调整签到内容与校园生活节奏同步。活动的积分调节新活动上线初期高积分拉新、成熟后回调——积分是运营杠杆活动页的积分标签随运营策略动态调整。活动的参与反馈活动卡可加参与人数首页已有128 人已签与我的本周参与次数——个人进度 vs 集体热度的双反馈。活动与勋章的联动特定活动签到可解锁专属勋章晨跑达人勋章——活动 勋章的双激励让每个活动都有集章的收藏价值。十二、开发者视角活动页的调试与验证技巧奖励标签的橙色对比#FFF3E0浅橙底 C.warn橙字在 12 号小字号下的可读性——真机验证橙色标签清晰必要时加深字色。规则区与主区的区分规则区cardSoft淡黄底与卡片白底、图标淡黄底primarySoft——三种浅色白/淡黄/浅橙在同一卡片内需层次清晰真机确认无糊成一片。整卡点击的边界onClick挂外层 Column 覆盖全卡——确认积分标签、规则区、图标都可点无独立事件遮挡。长规则文本的换行规则文字 13 号layoutWeight(1)撑开——长规则扫描自习室二维码并拍照确认会自动换行验证规则区高度自适应。数据自洽4 个活动与首页同名同序、积分与签到页签到成功 50积分一致——修改任一页需同步建议抽公共数据源。十三、FAQ 与一句话总结Q6为什么规则要单独用底色区块规则是说明性信息怎么签与主信息活动名/时间/奖励性质不同——浅黄底区块把规则隔开用户扫一眼即知上面是活动信息、下面是签到规则信息分层清晰。Q7积分标签为什么不做成按钮积分是展示信息看奖励而非操作入口点积分没意义——做成标签非按钮样式避免误导用户点击点整卡进入活动详情才是正确操作路径。Q8活动的签到方式会变吗会——运营可按场景调整规则晨跑从定位改为扫码、新增拍照签到——规则区文字随运营更新卡片结构不变。Q9活动页需要搜索/筛选吗4 个活动全量展示即可无筛选必要活动扩展到 20 时可加常驻/限时分段复用系列分段控件——规模决定是否筛选。Q10活动详情页是什么样点击活动卡进入详情页——大封面 活动名 完整规则 积分奖励 参与人数 去签到按钮 历史签到记录——活动卡是详情页的入口本页的四层信息是详情页的浓缩。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏活动信息卡、积分标签点击活动名 Toast、规则区点击活动名 Toast、完整列表四活动全览四个状态橙色积分标签、规则区底色块、四层信息卡均验证正常。4 个活动的积分50/30/20/40与签到方式扫码/定位/连续在页面内数据一致。整页 77 行代码完成活动规则说明书的信息展示验收通过可作为规则说明类页面的参考范本。补充一句活动的积分与规则是签到墙为每一份坚持标好的价码与路标。 规则说明的清晰度决定了用户参与的热情度——本页正是这句话的最佳实践。 签到活动页让每一次坚持都有清晰的回报。 鸿蒙原生应用 ArkUI 实战：拆解 —— 签到墙活动页的积分奖励标签与规则信息卡
鸿蒙原生应用 ArkUI 实战拆解 —— 签到墙活动页的积分奖励标签与规则信息卡App 45「校园签到墙」活动页Func1Tab主题色#FDCB6E黄色yellow4 个 Tab 分别为首页✅、活动、签到、我的。活动页采用Header 活动信息列表两区布局——白色单行 Header活动信息20 号加粗4 张活动信息卡 晨读打卡 / 晨跑活动 / 自习室学习 / 社团活动每张含 50×50 淡黄圆角图标 活动名 ⏰ 时段 橙色50 积分奖励标签 淡黄规则区 连续签到7天获积分奖励。每张卡展示活动名、时间、签到规则、积分奖励四项信息是签到活动的说明书。本篇基于45-checkin-wall/entry/src/main/ets/pages/Func1Tab.ets共 77 行逐段拆解附 4 张实机截图。一、整体结构两区Header 活动信息列表布局活动页是品牌头部 活动信息卡列表的两区布局build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ActList() } .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) }2 块结构Header— 单行品牌头活动信息ActList— 4 张活动信息卡展示每个签到活动的完整说明书与首页今日签到清单可操作签到按钮不同活动页是活动百科信息展示规则奖励——首页回答今天签什么、活动页回答每个活动怎么签、有什么奖励两页分工清晰。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行标题Header() { Row() { Text(活动信息).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }单行 20 号加粗、safeTop 56高度、白底、底部对齐——系列二级页统一范式。活动信息而非活动列表的命名暗示本页的定位是查看活动详情信息而非参与活动参与在首页/签到页信息展示型页面。三、ActList活动信息卡ActList() { Column({ space: 14 }) { ForEach(this.acts, (a: ActInfo) { Column({ space: 12 }) { Row({ space: 12 }) { Row() { Text(a.emoji).fontSize(26) } .width(50).height(50).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(a.name).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Text(⏰ a.time).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(a.reward).fontSize(12).fontColor(C.warn) .padding({ left: 8, right: 8, top: 3, bottom: 3 }).backgroundColor(#FFF3E0).borderRadius(6) }.width(100%) Row({ space: 8 }) { Text().fontSize(13) Text(a.rule).fontSize(13).fontColor(C.textSub).layoutWeight(1) } .width(100%).padding(10).backgroundColor(C.cardSoft).borderRadius(D.rSm) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: a.name }); }) }, (a: ActInfo) a.id.toString()) }.width(100%) }4 个活动21-26 行活动时段规则奖励 晨读打卡每日 07:00-08:00连续签到7天获积分奖励50 积分 晨跑活动每日 06:30-07:30定位操场完成签到30 积分 自习室学习全天开放扫描自习室二维码20 积分 社团活动周三 15:00-17:00现场扫码签到40 积分卡片细节头行图标 名称/时间 奖励50×50 淡黄圆角图标 名称 15 号加粗 ⏰ 时段 12 号浅灰layoutWeight(1)撑开橙色积分奖励标签——fontColor(C.warn)橙色文字 #FFF3E0浅橙底 圆角 6 的50 积分小标签橙色是奖励的通用语义色金/橙 价值一眼吸引。规则区独立一行—— 图标 规则文字 13 号深灰textSubbackgroundColor(C.cardSoft)淡黄浅底 圆角 10——规则用底色区块与主信息区区分视觉上上信息、下规则层次分明。签到方式多样化4 个活动的规则揭示三种签到方式——连续签到晨读、定位签到晨跑、扫码签到自习室/社团——对应签到页的扫码/定位两种模式 连续机制规则与签到页功能严格对应。积分梯度50/30/20/40 分——晨读最高连续 7 天难度大、自习室最低全天可签容易积分与签到难度成正比激励体系自洽。整卡点击点击 Toast 活动名——产品化后进入活动详情页含签到入口。四、跨页数据自洽活动页是签到体系的规则说明书活动页与首页、签到页、我的页的联动4 个活动同名同序↔ 首页今日活动清单晨读打卡/晨跑活动/自习室学习/社团活动——首页展示今天签哪些、本页展示每个怎么签。签到方式↔ 签到页两种模式——晨读的连续签到对应连续天数机制、晨跑的定位操场对应签到页定位签到、自习室/社团的扫码对应扫码签到——规则与功能一一对应。积分奖励↔ 签到页签到成功 50积分晨读 50 分对应当日签到积分、我的页860 积分累计——积分从活动产生、在签到页累加、在我的页沉淀。连续签到7天↔ 首页7连续天数、我的页勋章 连续7天——7 天连续是晨读活动的奖励门槛也是全 App 的核心激励目标。五、实机截图与交互演示本节结合 4 张实机截图逐张还原活动页的视觉效果与交互过程。1. 活动页首屏活动信息卡第一张截图是活动页默认首屏顶部活动信息标题下方第一张活动卡—— 晨读打卡50×50 淡黄图标 ⏰ 每日 07:00-08:00 橙色50 积分标签 淡黄规则区 连续签到7天获积分奖励第二张 晨跑活动每日 06:30-07:30 / 30 积分 / 定位操场完成签到部分可见。每张卡图标 名称时间 橙色积分 规则区的四层信息结构整齐统一。2. 点击积分标签整卡 Toast第二张截图是点击晨读打卡卡橙色50 积分标签区域后的反馈弹出晨读打卡Toast——整卡挂载onClick、闭包捕获a.name点击卡面任意区域图标/名称/积分/规则都弹活动名点击热区覆盖整卡。3. 点击规则区活动名 Toast第三张截图是点击晨读打卡卡的淡黄规则区 连续签到7天获积分奖励后的反馈弹出晨读打卡Toast——规则区是卡片内部区域点击同样触发整卡事件验证了整卡可点 内部区域无独立事件的层级关系。4. 活动页完整列表四活动全览第四张截图是活动页的完整列表四个活动卡全部可见晨读打卡 50 分 / 晨跑活动 30 分 / 自习室学习 20 分 / 社团活动 40 分积分梯度50/30/20/40与签到难度对应规则区连续/定位/扫码揭示三种签到方式。Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。六、扩展思考签到活动的规则与反作弊设计活动页的规则定位/扫码/连续背后是签到系统的反作弊设计定位签到晨跑定位操场完成签到——需在指定地理围栏内GPS 半径校验防止在家也能签晨跑——ohos.geoLocationManager的地理围栏能力是定位签到的技术基础。扫码签到自习室/社团扫描自习室二维码/现场扫码签到——二维码每分钟刷新动态码防止截图转发代签——扫码签到的核心是动态二维码 单设备单次。连续签到晨读连续签到7天——需在 07:00-08:00 时段内签到时段外无效防止半夜补签——时段校验是连续签到的规则基础。时间窗口每个活动有明确时段07:00-08:00 等——时段内签到才有效new Date()与活动时段的比对是签到服务的核心校验。设备与账号签到绑定账号一账号一天一签 设备指纹防多开刷签——签到是稀缺奖励积分/勋章反作弊是维持激励公平的底线。七、扩展思考积分体系的完整设计活动页的积分标签是签到激励体系的一环完整积分体系值得展开积分来源活动签到50/30/20/40 分 连续签到加成连续 7 天额外奖励——多源积分让签到多样化。积分消费我的页 积分兑换——兑换校园福利食堂代金券/文创礼品/自习室时长——积分是签到 → 兑换的闭环货币让签到的努力有实际回报。积分等级860 积分可设等级青铜 → 黄金 → 王者签到者——积分不仅是余额更是等级与勋章体系我的页勋章卡联动。积分明细我的页签到记录应展示每笔积分流水何时签、得几分——积分的透明性是信任基础。积分有效期学期积分期末清零vs 累计积分永久——有效期设计影响用户兑换节奏临期催促兑换。八、开发者视角活动页的调试与验证技巧奖励标签的橙色对比#FFF3E0浅橙底 C.warn橙字在 12 号小字号下的可读性——真机验证橙色标签清晰必要时加深字色。规则区与主区的区分规则区cardSoft淡黄底与卡片白底、图标淡黄底primarySoft——三种浅色白/淡黄/浅橙在同一卡片内需层次清晰真机确认无糊成一片。整卡点击的边界onClick挂外层 Column 覆盖全卡——确认积分标签、规则区、图标都可点无独立事件遮挡与首页签到按钮Text 独立 onClick的层级不同本页整卡一个事件。长规则文本的换行规则文字 13 号layoutWeight(1)撑开——长规则扫描自习室二维码并拍照确认会自动换行验证规则区高度自适应。数据自洽4 个活动与首页同名同序、积分与签到页签到成功 50积分一致——修改任一页需同步建议抽公共数据源。九、FAQ 与一句话总结Q1活动页和首页的活动列表有什么区别首页是今日可签清单带签到按钮可操作活动页是活动规则说明书带积分/规则供查看——一个行动、一个知识首页回答今天签什么、活动页回答怎么签、有什么奖励。Q2为什么积分标签用橙色橙色C.warn在系列中是奖励/警示的语义色——积分是价值金色联想用橙色标签醒目地传达签了就有奖励与黄色主色形成黄底 橙标的邻近色搭配和谐醒目。Q3三种签到方式是怎么确定的按活动场景设计晨跑需要到场定位、自习室/社团有固定地点扫码、晨读是习惯养成连续——签到方式匹配活动性质规则区的说明书功能就是让用户提前知道这个活动怎么签。Q4积分会被清零吗Demo 未实现。产品化按学期或年度清零积分有效期或永久累计——有效期设计影响兑换节奏是产品运营决策。Q5点击活动卡后去哪Demo 弹 Toast。产品化后进入活动详情页大图 规则 积分 签到入口 参与人数——活动页的卡片是详情页的入口。一句话总结活动页以活动信息卡完成了签到活动的规则展示——图标 名称/时间 橙色积分标签 规则区的四层信息卡把每个签到活动的怎么签、有什么奖励讲得清清楚楚。橙色积分的奖励语义、三种签到方式的规则对应、积分梯度与难度匹配让本页既是签到说明书又是激励展示墙——77 行代码一个让用户看完就想签到的活动信息页。十、系列横向对比规则说明类页面的三种形态活动页是规则说明页与系列其他信息展示页对比可看清其设计定位页面信息类型信息组织核心元素App 45 活动页活动规则奖励四层信息卡积分标签规则区App 42 话题页话题目录四行网格卡条数背书App 40 活动页活动清单四行信息卡参与人数差异要点信息维度App 45 活动卡的信息是规则 奖励怎么签 得多少App 40 活动卡是日期 人数何时 多少人App 42 话题卡是描述 条数是什么 多少条——信息维度永远服务于页面职能签到活动页卖奖励吸引力、活动清单页卖热度参与感、话题目录页卖规模内容量。奖励的可视化App 45 的橙色积分标签C.warn 浅橙底是系列中唯一的奖励标签——积分是签到产品的核心激励奖励需要最醒目的视觉橙色 价值其他页面的数据标签条数/人数用浅灰即可。规则区的设计App 45 用浅黄底区块cardSoft隔离规则——规则是说明书信息用底色区块与主信息区分读起来像附注App 40 的日期/人数直接嵌在信息流里同层级因为它们是主数据不是说明。复用价值本页四层信息卡图标/名称时间/奖励标签/规则区可直接复用到任何活动 规则 奖励类页面竞赛报名、课程介绍、任务说明是信息型卡片的成熟模板。十一、扩展思考签到活动的运营与季节性活动页的 4 个活动是签到运营的基础盘其运营节奏值得展开常驻活动 限时活动晨读/晨跑/自习室是常驻每日可签、社团活动是周期周三——产品可增加限时活动考试周冲刺签到、节日双倍积分——常驻保底 限时刺激的运营组合。活动的季节轮换秋季学期推晨跑天气凉爽、冬季推图书馆自习室内——活动按季节调整签到内容与校园生活节奏同步。活动的积分调节新活动上线初期高积分拉新、成熟后回调——积分是运营杠杆活动页的积分标签随运营策略动态调整。活动的参与反馈活动卡可加参与人数首页已有128 人已签与我的本周参与次数——个人进度 vs 集体热度的双反馈。活动与勋章的联动特定活动签到可解锁专属勋章晨跑达人勋章——活动 勋章的双激励让每个活动都有集章的收藏价值。十二、开发者视角活动页的调试与验证技巧奖励标签的橙色对比#FFF3E0浅橙底 C.warn橙字在 12 号小字号下的可读性——真机验证橙色标签清晰必要时加深字色。规则区与主区的区分规则区cardSoft淡黄底与卡片白底、图标淡黄底primarySoft——三种浅色白/淡黄/浅橙在同一卡片内需层次清晰真机确认无糊成一片。整卡点击的边界onClick挂外层 Column 覆盖全卡——确认积分标签、规则区、图标都可点无独立事件遮挡。长规则文本的换行规则文字 13 号layoutWeight(1)撑开——长规则扫描自习室二维码并拍照确认会自动换行验证规则区高度自适应。数据自洽4 个活动与首页同名同序、积分与签到页签到成功 50积分一致——修改任一页需同步建议抽公共数据源。十三、FAQ 与一句话总结Q6为什么规则要单独用底色区块规则是说明性信息怎么签与主信息活动名/时间/奖励性质不同——浅黄底区块把规则隔开用户扫一眼即知上面是活动信息、下面是签到规则信息分层清晰。Q7积分标签为什么不做成按钮积分是展示信息看奖励而非操作入口点积分没意义——做成标签非按钮样式避免误导用户点击点整卡进入活动详情才是正确操作路径。Q8活动的签到方式会变吗会——运营可按场景调整规则晨跑从定位改为扫码、新增拍照签到——规则区文字随运营更新卡片结构不变。Q9活动页需要搜索/筛选吗4 个活动全量展示即可无筛选必要活动扩展到 20 时可加常驻/限时分段复用系列分段控件——规模决定是否筛选。Q10活动详情页是什么样点击活动卡进入详情页——大封面 活动名 完整规则 积分奖励 参与人数 去签到按钮 历史签到记录——活动卡是详情页的入口本页的四层信息是详情页的浓缩。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏活动信息卡、积分标签点击活动名 Toast、规则区点击活动名 Toast、完整列表四活动全览四个状态橙色积分标签、规则区底色块、四层信息卡均验证正常。4 个活动的积分50/30/20/40与签到方式扫码/定位/连续在页面内数据一致。整页 77 行代码完成活动规则说明书的信息展示验收通过可作为规则说明类页面的参考范本。补充一句活动的积分与规则是签到墙为每一份坚持标好的价码与路标。 规则说明的清晰度决定了用户参与的热情度——本页正是这句话的最佳实践。 签到活动页让每一次坚持都有清晰的回报。