鸿蒙原生应用实战用 ArkUI 搭纪念册首页 —— Banner 与纪念册列表App 44「校园纪念册」首页HomeTab主题色#A29BFE淡紫色lavender4 个 Tab 分别为首页、相册、留言、我的。首页采用Header Banner 纪念册列表三区布局——白色双行 Header校园纪念册22 号加粗 记录我们共同的青春 渐变 Banner创建你的纪念册 邀请同学一起添加照片和留言SectionTitle我的纪念册 全部 4 本纪念册列表 计科2022级毕业纪念 / 软件工程班级相册 / 社团年度纪念册 / ⛰️ 大三秋游纪念每本含 80×90 淡紫封面图块 标题 N 张 N 人 淡紫查看纪念册 。本篇基于44-memorial-book/entry/src/main/ets/pages/HomeTab.ets共 101 行逐段拆解附 4 张实机截图。一、整体结构三区Header Banner 纪念册列表布局首页是品牌头部 创建引导 纪念册清单的三区布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.Banner() this.SectionTitle(我的纪念册) this.BookList() } .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) }3 块结构Header— 双行品牌头标题 副标题白底固定Banner— 渐变宣传卡创建你的纪念册是产品的主 CTACall To ActionBookList— 我的纪念册 4 本纪念册列表是用户的核心资产展示首页没有分类筛选、没有瀑布流——纪念册是少而珍贵的资产一个班级就几本用单列大卡列表展示最合适每本纪念册有封面、标题、数据照片数/人数、入口信息完整且庄重符合纪念册的产品气质与 App 40 相册瀑布流的多而密形成对照。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header双行品牌头Header() { Column() { Text(校园纪念册).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text) .width(100%).padding({ top: this.safeTop 10, left: D.pad, right: D.pad, bottom: 4 }) Text(记录我们共同的青春 ).fontSize(12).fontColor(C.textDim).width(100%) .padding({ left: D.pad, right: D.pad, bottom: 12 }) }.width(100%).backgroundColor(C.card) }细节标题校园纪念册22 号加粗直白点题班级/校园的集体记忆。副标题记录我们共同的青春 ——共同的青春强调集体属性纪念册是大家的不是个人的 纪念册 emoji 呼应产品形态。安全区safeTop 10避让状态栏双行间距层次清晰。白底全宽系列双行 Header 范式App 39/42/43 同款。三、Banner 渐变创建引导卡Banner() { Row({ space: 12 }) { Text().fontSize(40) Column({ space: 4 }) { Text(创建你的纪念册).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(邀请同学一起添加照片和留言).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) .onClick(() { promptAction.showToast({ message: 创建纪念册 }); }) }技术拆解大图标 双行文案40 号 视觉锚点 16 号加粗创建你的纪念册主 CTA 12 号 90% 透明度邀请同学一起添加照片和留言功能说明。CTA 语义Banner 不是宣传而是引导创建——整卡onClick弹创建纪念册Toast产品化后进入新建纪念册流程填标题 → 邀请同学 → 开始记录是产品增长的入口。渐变背景linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })从淡紫#A29BFE到浅淡紫#C4BEF5——比 App 40/42 的紫色更淡契合纪念册温柔怀旧的氛围。布局弹性右侧 ColumnlayoutWeight(1)撑开左图标固定任何屏宽排版稳定。四、BookList纪念册列表BookList() { Column({ space: 14 }) { ForEach(this.books, (b: Book) { Row({ space: 14 }) { Column() { Text(b.emoji).fontSize(40) } .width(80).height(90).backgroundColor(C.primarySoft) .borderRadius(D.rMd).justifyContent(FlexAlign.Center) Column({ space: 8 }) { Text(b.title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text).maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Row({ space: 14 }) { Text( b.photos 张).fontSize(12).fontColor(C.textDim) Text( b.members 人).fontSize(12).fontColor(C.textDim) } Text(查看纪念册 ).fontSize(12).fontColor(C.primary) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: b.title }); }) }, (b: Book) b.id.toString()) }.width(100%) }4 本纪念册20-25 行纪念册emoji照片成员计科2022级毕业纪念25645软件工程班级相册18938社团年度纪念册32060大三秋游纪念⛰️12842卡片细节封面图块80×90 淡紫底 40 号 emoji 毕业 / 校园 / 社团 / ⛰️ 秋游——比 App 40 相册封面更高的图块90 高封面感更强emoji 即纪念册主题的视觉符号。标题16 号加粗maxLines(2) 省略号防超长标题换行撑破计科2022级毕业纪念这类长标题两行内可容。数据行 N 张 N 人12 号浅灰——照片量内容规模 成员数参与广度是纪念册的两大数据维度用户据此判断哪本值得先看。查看入口12 号淡紫查看纪念册 ——颜色与 Banner 渐变呼应暗示可点击进入纪念册详情。整卡点击点击 Toast 纪念册标题产品化后进入纪念册详情页照片墙 留言墙。keyb.id.toString()稳定唯一。五、跨页数据自洽纪念册贯穿三页首页的纪念册与相册、留言、我的页形成完整体系首页 4 本纪念册↔ 我的页4 纪念册统计、副标题参与 4 本纪念册——数字完全一致4 本即用户参与的全部纪念册。相册页 8 张照片↔ 首页 N 张中的相册内容——首页计科2022级毕业纪念的 256 张照片即相册页的班级相册8 张是展示样例256 是总数口径。留言页毕业寄语↔ 纪念册的留言功能——首页 Banner邀请同学一起添加照片和留言中的留言即留言页的寄语。我的页86 我的照片 / 12 我的留言↔ 相册页照片 留言页留言——个人贡献的累计统计。六、实机截图与交互演示本节结合 4 张实机截图逐张还原首页的视觉效果与交互过程。1. 首页首屏品牌头 创建 Banner 纪念册第一张截图是进入 App 44 后的默认首屏顶部校园纪念册标题与记录我们共同的青春 副标题下方淡紫渐变 Banner—— 大图标 创建你的纪念册 邀请同学一起添加照片和留言再往下是我的纪念册 全部 标题行与第一本纪念册卡 计科2022级毕业纪念 / 256 张 / 45 人 / 查看纪念册 第二本 软件工程班级相册部分可见。淡紫主题温柔怀旧Banner 的创建引导明确。2. 点击 Banner创建纪念册 Toast第二张截图是点击淡紫渐变 Banner 后的反馈弹出创建纪念册Toast。整卡挂载onClick点击任意区域 图标/标题/说明都触发同一反馈——创建纪念册是产品的主 CTABanner 的整卡可点设计最大化引导转化。3. 点击纪念册弹出标题 Toast第三张截图是点击第一本纪念册卡 计科2022级毕业纪念后的反馈弹出计科2022级毕业纪念Toast。每本纪念册独立挂载onClick且闭包捕获各自的b.title点击哪本就弹出哪本——列表点击参数传递正确。4. 滚动到底四本纪念册完整可见第四张截图是滚动到底部的视图第三本 社团年度纪念册320 张 / 60 人与第四本⛰️ 大三秋游纪念128 张 / 42 人完整可见。四本纪念册按毕业/班级/社团/秋游覆盖大学四年与校园生活的不同场景Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。七、扩展思考纪念册的产品形态与社交属性首页 4 本纪念册揭示了这个产品的独特定位集体记忆 vs 个人相册纪念册是集体的——每本有成员数45 人/38 人照片和留言由多人共同贡献Banner邀请同学一起添加这与 App 40 个人照片共享个人上传本质不同纪念册是共写一本书照片墙是各发各的。生命周期纪念册伴随一个群体的一段时光毕业/班级/社团/秋游——有明确的主题 时间窗与 App 40 活动的关联类似但更长期纪念册存续多年活动有起止。创建与邀请创建纪念册Banner CTA→ 邀请同学加入 → 共同添加照片和留言——邀请机制是纪念册的社交裂变点一本纪念册 一个群的共同记忆容器。数据维度照片数内容量 成员数参与度双维度展示——用户点开前就能感知这本册子多厚、多少人参与是集体资产的厚度可视化。纪念册 vs 相册 Tab 的关系首页是册子目录多本纪念册相册 Tab 是当前册子的照片墙——目录 内容两级结构点击首页的册子进入相册 Tab 对应的照片集。八、扩展思考纪念册详情页的产品设计首页纪念册点击后当前 Toast应进入详情页其设计可参考成熟产品详情页信息架构封面大图 册名 成员头像墙45 个头像环形排布 数据照片数/留言数 两个页签照片墙 / 留言墙 加入按钮。成员墙展示参与同学的头像emoji 头像可复用系列风格点击查看该同学在册中的贡献——成员的在场感是纪念册区别于普通相册的核心。时间线浏览照片按时间线组织大一军训 → 大四毕业提供回忆时间轴滑动浏览——纪念册是时光的书时间线是翻书的方式。共同编辑成员可上传照片相册 Tab、写留言留言 Tab——协作文档式的纪念册多人共同维护是产品的核心机制。导出与实体化纪念册可导出 PDF / 生成电子纪念册 H5 分享甚至对接实体打印把电子纪念册印成纸质册子——纪念册的可打印属性是独特价值。九、开发者视角首页的调试与验证技巧长标题的省略maxLines(2) Ellipsis 明确宽度三件套——计科2022级毕业纪念这类长标题在卡片内两行可容验证更长标题如计算机科学与技术2022级1班毕业纪念册的省略位置。封面图块的对齐80×90 封面 40 号 emoji 垂直居中justifyContent(FlexAlign.Center)——若 emoji 在部分字体下偏高会与数据行错位真机验证。Banner 的点击热区整卡onClick覆盖全宽——确认文字区与图标区都可点无点了没反应的边界。数据自洽回归首页 4 本纪念册 ↔ 我的页4 纪念册——修改任意一处需同步最好抽公共常量系列验收标准。列表性能纪念册数量有限一个班级几本ForEach足够若未来支持广场全校纪念册需LazyForEach分页。十、系列横向对比集体记忆类产品 vs 个人内容产品App 44 是集体记忆类产品与系列的个人内容产品对比可看清其设计差异维度App 44 纪念册App 40 相册App 41 表白墙内容主体集体班级/社团个人个人匿名组织单位纪念册多人共享相册个人帖子核心数据照片数成员数照片数点赞数参与方式邀请共同编辑个人上传个人发布情感基调怀旧、共同记忆记录、分享表达、心动纪念册的差异首页每本纪念册都有 成员数45 人/38 人——这是个人产品没有的维度Banner邀请同学一起添加直接点明协作属性纪念册是多人共同维护的不是单方面展示。App 40 相册是我分享给大家看个人 → 平台纪念册是我们一起写一本书集体 ↔ 集体——内容主体从我变成我们是整个 App 设计逻辑的根本转变成员数替代获赞数成为核心指标、创建邀请替代上传成为核心动作。共享的骨架尽管主体不同首页仍复用系列双行 Header 渐变 Banner 内容列表的骨架——品牌区、CTA、内容区三层结构在个人与集体产品间通用再次验证了系列方法论的普适性。十一、扩展思考纪念册的创建与邀请流程首页 Banner创建你的纪念册是产品增长的核心入口其完整流程值得展开创建向导点击 Banner → 填写册名默认XX 班级纪念册→ 选择主题毕业/班级/社团/旅行对应首页 4 类→ 生成封面emoji 自选或上传照片——三步完成创建。邀请机制创建后生成邀请码/链接分享到班级群——同学点击加入后自动成为成员成员数 1邀请裂变是纪念册的增长引擎一本册子 一个群的转化。成员权限创建者为管理员可审核照片/删除留言/转让成员可上传照片与留言——权限分层是集体产品的内容治理基础。创建后的引导新册子空态引导上传第一张照片写下第一条寄语——冷启动引导让纪念册从零开始时不冷清。与相册/留言的衔接创建成功后进入纪念册详情页相册 Tab 与留言 Tab 绑定该册子——首页的册子与 Tab 的内容在此打通。十二、FAQ 与一句话总结Q1纪念册和普通相册App 40有什么区别纪念册是集体共写——一本册子有成员、有共同主题毕业/班级、多人共同添加照片和留言相册是个人共享——个人上传、平台聚合。首页的 45 人与邀请同学一起添加直接体现了集体属性。Q2为什么首页没有分类或瀑布流纪念册是少而珍贵的资产一个用户参与几本单列大卡列表能完整展示封面、标题、数据与入口庄重清晰瀑布流适合多而密的照片浏览相册 Tab 已是 3 列网格。内容形态决定列表形态。Q3创建你的纪念册Banner 点击后去哪Demo 弹 Toast 占位。产品化后进入新建纪念册向导填标题 → 选主题毕业/班级/社团→ 邀请同学 → 创建成功进入详情页——Banner 是产品增长的主入口。Q44 本纪念册的数据从哪来静态数组模拟用户参与的纪念册——与我的页4 纪念册、副标题参与 4 本纪念册完全一致是用户资产的真实呈现。产品化后从服务端拉取用户参与的纪念册列表。Q5为什么封面用 emoji 而不是真实照片原型阶段 emoji 封面 毕业 / ⛰️ 秋游零资源、主题直观真实产品用纪念册的封面照片可自选/自动取第一张布局代码把Text(b.emoji)换成Image(coverUrl)即可。一句话总结首页以双行品牌头 创建引导 Banner 纪念册列表三区结构完成了集体记忆的展示与入口。记录我们共同的青春的副标题点明集体属性、 渐变 Banner 承担创建 CTA、封面 数据照片/人数 查看入口的纪念册大卡让每本册子的厚度与参与度一目了然——101 行代码一个让用户想翻开回忆的纪念册首页。十三、开发者视角首页的调试与验证技巧长标题的省略maxLines(2) Ellipsis 明确宽度三件套——计科2022级毕业纪念这类长标题在卡片内两行可容验证更长标题如计算机科学与技术2022级1班毕业纪念册的省略位置与卡片高度稳定性。封面图块的对齐80×90 封面 40 号 emoji 垂直居中justifyContent(FlexAlign.Center)——emoji 在不同字体下垂直位置略有差异真机验证封面与右侧文字顶对齐是否稳定。Banner 点击热区整卡onClick覆盖全宽——确认文字区、图标区都可点无点了没反应的边界同时注意 Banner 与列表的点击不冲突不同卡片独立事件。数据自洽回归首页 4 本纪念册与我的页4 纪念册、副标题参与 4 本纪念册——修改任意一处需同步建议抽公共常量系列验收标准。列表性能纪念册数量有限一个班级几本ForEach足够若未来支持纪念册广场全校/全网需LazyForEach 分页加载首页结构不变。十四、FAQ 与一句话总结Q6首页为什么不显示纪念册封面图片原型用 emoji 封面/⛰️零资源、主题直观真实产品可让创建者上传封面照或自动取第一张照片把Text(b.emoji)换成Image(coverUrl)即可布局零改动。Q74 本纪念册是怎么来的静态数组模拟用户参与的纪念册——毕业计科2022级、班级软件工程、社团、秋游四类覆盖校园集体生活的主要场景产品化后从服务端拉取我参与的纪念册列表含成员身份。Q8全部 入口能点吗Demo 未挂事件。产品化后跳转全部纪念册页含他人分享的/广场上的纪念册首页我的纪念册与全部两级目录。Q9创建纪念册需要什么条件产品化后需登录班级身份、填册名、选主题——创建后邀请同学加入成员数从 1 开始增长与首页 成员数字段衔接。Q10纪念册会被删除吗纪念册是永久记忆的承诺——产品应禁止普通成员删除、管理员删除需二次确认且可导出备份这与留言页永久保存、我的页校友沉淀的定位一致。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏品牌头创建 Banner第一本纪念册、Banner 点击创建纪念册 Toast、纪念册点击计科2022级毕业纪念 Toast、滚动底部四本纪念册全览四个状态渐变 Banner、封面图块、数据行、查看入口、整卡点击均验证正常。跨页数据自洽通过核对——首页 4 本纪念册与我的页4 纪念册、副标题参与 4 本纪念册完全一致相册页班级相册对应首页计科2022级毕业纪念 毕业相册留言页毕业寄语对应 Banner邀请同学添加留言。整页 101 行代码完成集体记忆展示 创建引导的完整结构验收通过可作为纪念册/集体记忆类产品首页的参考范本。再补充一处细节Banner 的渐变#A29BFE → #C4BEF5与我的页 UserCard 完全同款——品牌渐变在创建入口与个人中心两处复用用户对纪念册的淡紫形成条件反射式的品牌记忆。而封面图块的 80×90 尺寸宽 80 高 90比正方形略高是有意的书本比例纪念册是竖开的书这种图块比例呼应产品形态的细节正是让纪念册首页区别于普通列表页的质感所在。至此从品牌色到图块比例首页的每一处设计都在悄悄讲述这是一本关于青春的书整页 101 行代码的完成度也因此远超其体量。
鸿蒙原生应用实战：用 ArkUI 搭纪念册首页 —— Banner 与纪念册列表
鸿蒙原生应用实战用 ArkUI 搭纪念册首页 —— Banner 与纪念册列表App 44「校园纪念册」首页HomeTab主题色#A29BFE淡紫色lavender4 个 Tab 分别为首页、相册、留言、我的。首页采用Header Banner 纪念册列表三区布局——白色双行 Header校园纪念册22 号加粗 记录我们共同的青春 渐变 Banner创建你的纪念册 邀请同学一起添加照片和留言SectionTitle我的纪念册 全部 4 本纪念册列表 计科2022级毕业纪念 / 软件工程班级相册 / 社团年度纪念册 / ⛰️ 大三秋游纪念每本含 80×90 淡紫封面图块 标题 N 张 N 人 淡紫查看纪念册 。本篇基于44-memorial-book/entry/src/main/ets/pages/HomeTab.ets共 101 行逐段拆解附 4 张实机截图。一、整体结构三区Header Banner 纪念册列表布局首页是品牌头部 创建引导 纪念册清单的三区布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.Banner() this.SectionTitle(我的纪念册) this.BookList() } .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) }3 块结构Header— 双行品牌头标题 副标题白底固定Banner— 渐变宣传卡创建你的纪念册是产品的主 CTACall To ActionBookList— 我的纪念册 4 本纪念册列表是用户的核心资产展示首页没有分类筛选、没有瀑布流——纪念册是少而珍贵的资产一个班级就几本用单列大卡列表展示最合适每本纪念册有封面、标题、数据照片数/人数、入口信息完整且庄重符合纪念册的产品气质与 App 40 相册瀑布流的多而密形成对照。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header双行品牌头Header() { Column() { Text(校园纪念册).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text) .width(100%).padding({ top: this.safeTop 10, left: D.pad, right: D.pad, bottom: 4 }) Text(记录我们共同的青春 ).fontSize(12).fontColor(C.textDim).width(100%) .padding({ left: D.pad, right: D.pad, bottom: 12 }) }.width(100%).backgroundColor(C.card) }细节标题校园纪念册22 号加粗直白点题班级/校园的集体记忆。副标题记录我们共同的青春 ——共同的青春强调集体属性纪念册是大家的不是个人的 纪念册 emoji 呼应产品形态。安全区safeTop 10避让状态栏双行间距层次清晰。白底全宽系列双行 Header 范式App 39/42/43 同款。三、Banner 渐变创建引导卡Banner() { Row({ space: 12 }) { Text().fontSize(40) Column({ space: 4 }) { Text(创建你的纪念册).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(邀请同学一起添加照片和留言).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) .onClick(() { promptAction.showToast({ message: 创建纪念册 }); }) }技术拆解大图标 双行文案40 号 视觉锚点 16 号加粗创建你的纪念册主 CTA 12 号 90% 透明度邀请同学一起添加照片和留言功能说明。CTA 语义Banner 不是宣传而是引导创建——整卡onClick弹创建纪念册Toast产品化后进入新建纪念册流程填标题 → 邀请同学 → 开始记录是产品增长的入口。渐变背景linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })从淡紫#A29BFE到浅淡紫#C4BEF5——比 App 40/42 的紫色更淡契合纪念册温柔怀旧的氛围。布局弹性右侧 ColumnlayoutWeight(1)撑开左图标固定任何屏宽排版稳定。四、BookList纪念册列表BookList() { Column({ space: 14 }) { ForEach(this.books, (b: Book) { Row({ space: 14 }) { Column() { Text(b.emoji).fontSize(40) } .width(80).height(90).backgroundColor(C.primarySoft) .borderRadius(D.rMd).justifyContent(FlexAlign.Center) Column({ space: 8 }) { Text(b.title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text).maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Row({ space: 14 }) { Text( b.photos 张).fontSize(12).fontColor(C.textDim) Text( b.members 人).fontSize(12).fontColor(C.textDim) } Text(查看纪念册 ).fontSize(12).fontColor(C.primary) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: b.title }); }) }, (b: Book) b.id.toString()) }.width(100%) }4 本纪念册20-25 行纪念册emoji照片成员计科2022级毕业纪念25645软件工程班级相册18938社团年度纪念册32060大三秋游纪念⛰️12842卡片细节封面图块80×90 淡紫底 40 号 emoji 毕业 / 校园 / 社团 / ⛰️ 秋游——比 App 40 相册封面更高的图块90 高封面感更强emoji 即纪念册主题的视觉符号。标题16 号加粗maxLines(2) 省略号防超长标题换行撑破计科2022级毕业纪念这类长标题两行内可容。数据行 N 张 N 人12 号浅灰——照片量内容规模 成员数参与广度是纪念册的两大数据维度用户据此判断哪本值得先看。查看入口12 号淡紫查看纪念册 ——颜色与 Banner 渐变呼应暗示可点击进入纪念册详情。整卡点击点击 Toast 纪念册标题产品化后进入纪念册详情页照片墙 留言墙。keyb.id.toString()稳定唯一。五、跨页数据自洽纪念册贯穿三页首页的纪念册与相册、留言、我的页形成完整体系首页 4 本纪念册↔ 我的页4 纪念册统计、副标题参与 4 本纪念册——数字完全一致4 本即用户参与的全部纪念册。相册页 8 张照片↔ 首页 N 张中的相册内容——首页计科2022级毕业纪念的 256 张照片即相册页的班级相册8 张是展示样例256 是总数口径。留言页毕业寄语↔ 纪念册的留言功能——首页 Banner邀请同学一起添加照片和留言中的留言即留言页的寄语。我的页86 我的照片 / 12 我的留言↔ 相册页照片 留言页留言——个人贡献的累计统计。六、实机截图与交互演示本节结合 4 张实机截图逐张还原首页的视觉效果与交互过程。1. 首页首屏品牌头 创建 Banner 纪念册第一张截图是进入 App 44 后的默认首屏顶部校园纪念册标题与记录我们共同的青春 副标题下方淡紫渐变 Banner—— 大图标 创建你的纪念册 邀请同学一起添加照片和留言再往下是我的纪念册 全部 标题行与第一本纪念册卡 计科2022级毕业纪念 / 256 张 / 45 人 / 查看纪念册 第二本 软件工程班级相册部分可见。淡紫主题温柔怀旧Banner 的创建引导明确。2. 点击 Banner创建纪念册 Toast第二张截图是点击淡紫渐变 Banner 后的反馈弹出创建纪念册Toast。整卡挂载onClick点击任意区域 图标/标题/说明都触发同一反馈——创建纪念册是产品的主 CTABanner 的整卡可点设计最大化引导转化。3. 点击纪念册弹出标题 Toast第三张截图是点击第一本纪念册卡 计科2022级毕业纪念后的反馈弹出计科2022级毕业纪念Toast。每本纪念册独立挂载onClick且闭包捕获各自的b.title点击哪本就弹出哪本——列表点击参数传递正确。4. 滚动到底四本纪念册完整可见第四张截图是滚动到底部的视图第三本 社团年度纪念册320 张 / 60 人与第四本⛰️ 大三秋游纪念128 张 / 42 人完整可见。四本纪念册按毕业/班级/社团/秋游覆盖大学四年与校园生活的不同场景Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。七、扩展思考纪念册的产品形态与社交属性首页 4 本纪念册揭示了这个产品的独特定位集体记忆 vs 个人相册纪念册是集体的——每本有成员数45 人/38 人照片和留言由多人共同贡献Banner邀请同学一起添加这与 App 40 个人照片共享个人上传本质不同纪念册是共写一本书照片墙是各发各的。生命周期纪念册伴随一个群体的一段时光毕业/班级/社团/秋游——有明确的主题 时间窗与 App 40 活动的关联类似但更长期纪念册存续多年活动有起止。创建与邀请创建纪念册Banner CTA→ 邀请同学加入 → 共同添加照片和留言——邀请机制是纪念册的社交裂变点一本纪念册 一个群的共同记忆容器。数据维度照片数内容量 成员数参与度双维度展示——用户点开前就能感知这本册子多厚、多少人参与是集体资产的厚度可视化。纪念册 vs 相册 Tab 的关系首页是册子目录多本纪念册相册 Tab 是当前册子的照片墙——目录 内容两级结构点击首页的册子进入相册 Tab 对应的照片集。八、扩展思考纪念册详情页的产品设计首页纪念册点击后当前 Toast应进入详情页其设计可参考成熟产品详情页信息架构封面大图 册名 成员头像墙45 个头像环形排布 数据照片数/留言数 两个页签照片墙 / 留言墙 加入按钮。成员墙展示参与同学的头像emoji 头像可复用系列风格点击查看该同学在册中的贡献——成员的在场感是纪念册区别于普通相册的核心。时间线浏览照片按时间线组织大一军训 → 大四毕业提供回忆时间轴滑动浏览——纪念册是时光的书时间线是翻书的方式。共同编辑成员可上传照片相册 Tab、写留言留言 Tab——协作文档式的纪念册多人共同维护是产品的核心机制。导出与实体化纪念册可导出 PDF / 生成电子纪念册 H5 分享甚至对接实体打印把电子纪念册印成纸质册子——纪念册的可打印属性是独特价值。九、开发者视角首页的调试与验证技巧长标题的省略maxLines(2) Ellipsis 明确宽度三件套——计科2022级毕业纪念这类长标题在卡片内两行可容验证更长标题如计算机科学与技术2022级1班毕业纪念册的省略位置。封面图块的对齐80×90 封面 40 号 emoji 垂直居中justifyContent(FlexAlign.Center)——若 emoji 在部分字体下偏高会与数据行错位真机验证。Banner 的点击热区整卡onClick覆盖全宽——确认文字区与图标区都可点无点了没反应的边界。数据自洽回归首页 4 本纪念册 ↔ 我的页4 纪念册——修改任意一处需同步最好抽公共常量系列验收标准。列表性能纪念册数量有限一个班级几本ForEach足够若未来支持广场全校纪念册需LazyForEach分页。十、系列横向对比集体记忆类产品 vs 个人内容产品App 44 是集体记忆类产品与系列的个人内容产品对比可看清其设计差异维度App 44 纪念册App 40 相册App 41 表白墙内容主体集体班级/社团个人个人匿名组织单位纪念册多人共享相册个人帖子核心数据照片数成员数照片数点赞数参与方式邀请共同编辑个人上传个人发布情感基调怀旧、共同记忆记录、分享表达、心动纪念册的差异首页每本纪念册都有 成员数45 人/38 人——这是个人产品没有的维度Banner邀请同学一起添加直接点明协作属性纪念册是多人共同维护的不是单方面展示。App 40 相册是我分享给大家看个人 → 平台纪念册是我们一起写一本书集体 ↔ 集体——内容主体从我变成我们是整个 App 设计逻辑的根本转变成员数替代获赞数成为核心指标、创建邀请替代上传成为核心动作。共享的骨架尽管主体不同首页仍复用系列双行 Header 渐变 Banner 内容列表的骨架——品牌区、CTA、内容区三层结构在个人与集体产品间通用再次验证了系列方法论的普适性。十一、扩展思考纪念册的创建与邀请流程首页 Banner创建你的纪念册是产品增长的核心入口其完整流程值得展开创建向导点击 Banner → 填写册名默认XX 班级纪念册→ 选择主题毕业/班级/社团/旅行对应首页 4 类→ 生成封面emoji 自选或上传照片——三步完成创建。邀请机制创建后生成邀请码/链接分享到班级群——同学点击加入后自动成为成员成员数 1邀请裂变是纪念册的增长引擎一本册子 一个群的转化。成员权限创建者为管理员可审核照片/删除留言/转让成员可上传照片与留言——权限分层是集体产品的内容治理基础。创建后的引导新册子空态引导上传第一张照片写下第一条寄语——冷启动引导让纪念册从零开始时不冷清。与相册/留言的衔接创建成功后进入纪念册详情页相册 Tab 与留言 Tab 绑定该册子——首页的册子与 Tab 的内容在此打通。十二、FAQ 与一句话总结Q1纪念册和普通相册App 40有什么区别纪念册是集体共写——一本册子有成员、有共同主题毕业/班级、多人共同添加照片和留言相册是个人共享——个人上传、平台聚合。首页的 45 人与邀请同学一起添加直接体现了集体属性。Q2为什么首页没有分类或瀑布流纪念册是少而珍贵的资产一个用户参与几本单列大卡列表能完整展示封面、标题、数据与入口庄重清晰瀑布流适合多而密的照片浏览相册 Tab 已是 3 列网格。内容形态决定列表形态。Q3创建你的纪念册Banner 点击后去哪Demo 弹 Toast 占位。产品化后进入新建纪念册向导填标题 → 选主题毕业/班级/社团→ 邀请同学 → 创建成功进入详情页——Banner 是产品增长的主入口。Q44 本纪念册的数据从哪来静态数组模拟用户参与的纪念册——与我的页4 纪念册、副标题参与 4 本纪念册完全一致是用户资产的真实呈现。产品化后从服务端拉取用户参与的纪念册列表。Q5为什么封面用 emoji 而不是真实照片原型阶段 emoji 封面 毕业 / ⛰️ 秋游零资源、主题直观真实产品用纪念册的封面照片可自选/自动取第一张布局代码把Text(b.emoji)换成Image(coverUrl)即可。一句话总结首页以双行品牌头 创建引导 Banner 纪念册列表三区结构完成了集体记忆的展示与入口。记录我们共同的青春的副标题点明集体属性、 渐变 Banner 承担创建 CTA、封面 数据照片/人数 查看入口的纪念册大卡让每本册子的厚度与参与度一目了然——101 行代码一个让用户想翻开回忆的纪念册首页。十三、开发者视角首页的调试与验证技巧长标题的省略maxLines(2) Ellipsis 明确宽度三件套——计科2022级毕业纪念这类长标题在卡片内两行可容验证更长标题如计算机科学与技术2022级1班毕业纪念册的省略位置与卡片高度稳定性。封面图块的对齐80×90 封面 40 号 emoji 垂直居中justifyContent(FlexAlign.Center)——emoji 在不同字体下垂直位置略有差异真机验证封面与右侧文字顶对齐是否稳定。Banner 点击热区整卡onClick覆盖全宽——确认文字区、图标区都可点无点了没反应的边界同时注意 Banner 与列表的点击不冲突不同卡片独立事件。数据自洽回归首页 4 本纪念册与我的页4 纪念册、副标题参与 4 本纪念册——修改任意一处需同步建议抽公共常量系列验收标准。列表性能纪念册数量有限一个班级几本ForEach足够若未来支持纪念册广场全校/全网需LazyForEach 分页加载首页结构不变。十四、FAQ 与一句话总结Q6首页为什么不显示纪念册封面图片原型用 emoji 封面/⛰️零资源、主题直观真实产品可让创建者上传封面照或自动取第一张照片把Text(b.emoji)换成Image(coverUrl)即可布局零改动。Q74 本纪念册是怎么来的静态数组模拟用户参与的纪念册——毕业计科2022级、班级软件工程、社团、秋游四类覆盖校园集体生活的主要场景产品化后从服务端拉取我参与的纪念册列表含成员身份。Q8全部 入口能点吗Demo 未挂事件。产品化后跳转全部纪念册页含他人分享的/广场上的纪念册首页我的纪念册与全部两级目录。Q9创建纪念册需要什么条件产品化后需登录班级身份、填册名、选主题——创建后邀请同学加入成员数从 1 开始增长与首页 成员数字段衔接。Q10纪念册会被删除吗纪念册是永久记忆的承诺——产品应禁止普通成员删除、管理员删除需二次确认且可导出备份这与留言页永久保存、我的页校友沉淀的定位一致。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏品牌头创建 Banner第一本纪念册、Banner 点击创建纪念册 Toast、纪念册点击计科2022级毕业纪念 Toast、滚动底部四本纪念册全览四个状态渐变 Banner、封面图块、数据行、查看入口、整卡点击均验证正常。跨页数据自洽通过核对——首页 4 本纪念册与我的页4 纪念册、副标题参与 4 本纪念册完全一致相册页班级相册对应首页计科2022级毕业纪念 毕业相册留言页毕业寄语对应 Banner邀请同学添加留言。整页 101 行代码完成集体记忆展示 创建引导的完整结构验收通过可作为纪念册/集体记忆类产品首页的参考范本。再补充一处细节Banner 的渐变#A29BFE → #C4BEF5与我的页 UserCard 完全同款——品牌渐变在创建入口与个人中心两处复用用户对纪念册的淡紫形成条件反射式的品牌记忆。而封面图块的 80×90 尺寸宽 80 高 90比正方形略高是有意的书本比例纪念册是竖开的书这种图块比例呼应产品形态的细节正是让纪念册首页区别于普通列表页的质感所在。至此从品牌色到图块比例首页的每一处设计都在悄悄讲述这是一本关于青春的书整页 101 行代码的完成度也因此远超其体量。