鸿蒙原生应用 HarmonyOS 6.0 轻量布局：问卷首页的横向 Chip 与状态问卷卡

鸿蒙原生应用 HarmonyOS 6.0 轻量布局问卷首页的横向 Chip 与状态问卷卡App 21「在线问卷调查」首页HomeTab主题色#3B82F6蓝色4 个 Tab 分别为首页、创建✏️、数据、我的。首页采用更紧凑的轻量级布局——固定 Header问卷调查/参与问卷让数据说话 横向分类 Chip5 个分类全部/教育/生活/心理/市场 热门问卷 SectionTitle 5 份问卷列表卡52×52 emoji 标题 已收集 X 份 进行中/已结束状态色。本篇基于21-online-survey/entry/src/main/ets/pages/HomeTab.ets约 121 行逐段拆解附 4 张实机截图。一、整体结构3 块轻量内容App 21 首页是系列最紧凑的首页——3 个 Builder 块Header / ChipRow / SurveyList中间穿插 1 个参数化SectionTitlebuild() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ChipRow() this.SectionTitle(热门问卷) this.SurveyList() } .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— 问卷调查/参与问卷让数据说话品牌区ChipRow— 5 个分类胶囊横滑SectionTitle(热门问卷) SurveyList— 5 份问卷与系列其他首页对比App首页 Builder 数主列表13/17 音乐/志愿53 项目14 运动55 场地18 社交84 同好19 摄影84 作品20 阅读84 书21 问卷35 问卷App 21 首页更紧凑3 块 vs 8 块——轻量级问卷社区的简洁设计问卷是任务型页面不像商城/阅读需要复杂展示——内容类型决定页面复杂度。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header蓝色品牌区Header 是问卷调查/参与问卷让数据说话 两行品牌区与系列同款双行结构Builder 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) }参与问卷让数据说话 Slogan——让数据说话是问卷类 App 的核心 Slogan问卷 数据采集让数据产生价值。emoji 在标题里——数据可视化是问卷的视觉隐喻柱状图/饼图/条形图都是问卷数据的呈现方式。主题色#3B82F6蓝色——系列第一个蓝色主题之前 11-20 的颜色橙/玫红/紫/绿/红/粉红/青绿——蓝色从未出现。**蓝色 数据/可信/专业**是设计的通用语义银行 App、政府 App、企业 SaaS 普遍用蓝色——**问卷作为严肃数据采集工具蓝色调性契合可信。三、ChipRow5 个分类胶囊ChipRow 是 5 个分类全部/教育/生活/心理/市场的横向滚动胶囊Builder ChipRow() { Scroll() { Row({ space: 10 }) { ForEach(this.cats, (cat: string, idx: number) { Text(cat) .fontSize(13) .fontColor(this.activeCat idx ? #FFFFFF : C.textSub) .padding({ left: 14, right: 14, top: 7, bottom: 7 }) .backgroundColor(this.activeCat idx ? C.primary : C.card) .borderRadius(16) .onClick(() { this.activeCat idx; }) }, (cat: string) cat) } } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width(100%) }5 个分类private cats: string[] [全部, 教育, 生活, 心理, 市场];education/life/psychology/market4 个真实问卷分类——教育/生活/心理/市场是问卷平台最常见的 4 大类覆盖学术、生活方式、研究、商业场景——分类 业务场景。State activeCat: number 0默认选中全部——onClick切选中态activeCat idx ? 蓝底白字 : 白底灰字。假筛选同 App 13/17——demo 未联动过滤真实项目应加filteredSurveys()。borderRadius(16)圆角 16——胶囊形圆角 高度的一半 16/2 ≈ 8——胶囊 完全圆角。四、SectionTitle参数化复用SectionTitle 是参数化 BuilderSectionTitle(title: string)——系列同款设计Builder SectionTitle(title: string) { Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(更多 ).fontSize(12).fontColor(C.textDim) } .width(100%) }热门问卷 / 更多 标题右侧操作链接——标题 内容指向热门问卷暗示这里是热门的其他分类看更多。Blank()撑开。App 21 只有一个 SectionTitle系列其他 App 多用 2-3 个分类标题——首页内容更紧凑只有热门问卷一个区。五、SurveyList5 份问卷卡核心SurveyList 是 5 份问卷卡每张含 52×52 emoji 标题 已收集 X 份 进行中/已结束状态色Builder SurveyList() { Column({ space: 12 }) { ForEach(this.surveys, (s: Survey) { Row({ space: 12 }) { Row() { Text(s.emoji).fontSize(28) } .width(52).height(52) .backgroundColor(C.primarySoft).borderRadius(D.rMd) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(s.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(已收集 s.count).fontSize(12).fontColor(C.textDim) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(s.status).fontSize(12).fontColor(s.statusColor).fontWeight(FontWeight.Medium) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: s.title }); }) }, (s: Survey) s.id.toString()) } .width(100%) }5.1 5 份问卷的数据private surveys: Survey[] [ { id: 1, emoji: , title: 大学生学习习惯调查, count: 1,256 份, status: 进行中, statusColor: C.ok }, { id: 2, emoji: , title: 校园饮食满意度问卷, count: 892 份, status: 进行中, statusColor: C.ok }, { id: 3, emoji: , title: 大学生心理健康调查, count: 2,100 份, status: 已结束, statusColor: C.textDim }, { id: 4, emoji: , title: 校园消费行为问卷, count: 680 份, status: 进行中, statusColor: C.ok }, { id: 5, emoji: , title: 课余时间分配调查, count: 1,530 份, status: 已结束, statusColor: C.textDim } ];5 份问卷的业务多样性问卷分类推断状态已收集 大学生学习习惯教育进行中1,256 份 校园饮食满意度生活进行中892 份 大学生心理健康心理已结束2,100 份最高 校园消费行为市场进行中680 份最低 课余时间分配生活已结束1,530 份3 进行中 2 已结束——问卷生命周期进行中 还在收数据、已结束 截止分析。已结束的心理健康问卷收集数最高2,100——敏感话题心理调查参与度高大学生心理健康关注度高。5.2 问卷卡的结构Row({ space: 12 })三段布局左侧 52×52 emoji 块C.primarySoft浅蓝底 / 等 emoji中间 标题 已收集 X 份layoutWeight(1)占主要空间右侧 状态色文字进行中绿/ 已结束灰maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })——标题截断单行省略号保证 5 张卡片高度统一。onClick(() promptAction.showToast({ message: s.title }))点击反馈——真实项目应跳到问卷详情/填写页。5.3 状态色映射statusColor: string数据携带颜色与 App 18 同款数据带视觉属性模式进行中 →C.ok绿#2BB673——活跃问卷用绿色在线/活跃已结束 →C.textDim灰#9AA3BC——已结束用灰色停止/不活跃绿/灰二态比绿/红更柔和问卷没有错误/告警概念只分进行中/已结束——业务状态决定颜色语义。Text(s.status).fontSize(12).fontColor(s.statusColor).fontWeight(FontWeight.Medium)——状态文字 12sp 主色加粗——色 文双通道与 App 15 同款。六、首页的轻量级设计哲学App 21 首页是系列最轻量级的页面3 块结构适合**任务型应用**任务型 vs 内容型页面类型示例设计重点内容型社交/摄影/阅读多模块、信息流、推荐算法任务型问卷/记账/打卡简洁列表、明确操作任务型页面设计原则少模块——3-5 块足够不要 8 块大按钮——操作按钮 48vp 高容易点明确状态——进行中/已结束 / 待办/完成 二态清晰少图表——不需要复杂可视化任务型用户看做了什么不是看数据**App 21 的3 块 5 卡片**是任务型页面的黄金骨架——读者做工具/任务类应用可参考记账 App、打卡 App、表单 App 都适用。七、State 与数据一致性HomeTab 只有1 个 StateactiveCat分类 0-4。其余数据private不可变。数据一致性5 份问卷标题与 Func2Tab 数据页无关首页是问卷列表、数据页是问卷填写结果统计——两页是不同视角5 份问卷与 ProfileTab 的我的问卷 8 份无关首页 5 份是热门我的 8 份是用户创建的——数量不同数据视角差异是 App 21 的合理设计——首页是平台热门、我的页是用户私有——两套数据互不打扰。八、问卷列表 vs 系列其他主列表的对比回顾系列 7 个主列表卡片可以清晰看到卡片内容的演进App主列表卡片要素13 音乐推荐项目emoji标题标签进度条14 运动场地星级开放时间预约进度按钮15 环保分类指南星级掌握度学习/测试16 商城商品划线价库存缺货态18 社交同好卡匹配度环形在线状态点19 摄影作品卡封面点赞❤完成度环形标签20 阅读书卡竖版封页码条写笔记/继续阅读21 问卷问卷卡emoji标题已收集 X 份状态App 21 问卷卡是系列最轻量的主列表卡唯一无按钮的主列表其他都有双按钮唯一无进度条的主列表只有已收集 X 份文字唯一无价格/库存的主列表问卷不是商品问卷 轻量信息卡——问卷不需要复杂操作点开就填所以卡片本身是轻量展示。九、蓝色主题在 UI 各处的运用App 21 的#3B82F6蓝色 #60A5FA浅蓝贯穿全 App元素颜色主题色 primary#3B82F6蓝浅蓝 primarySoft#E8F0FE背景浅蓝 accent#60A5FA渐变进度条/选中态蓝我的页用户卡蓝渐变#3B82F6 → #60A5FA蓝色 数据/可信/专业——问卷/金融/医疗类 App 的标准色。十、问卷平台与填写者视角的细节App 21 首页是问卷展示页——但要理解它必须站在填写者视角不是创作者填写者打开 App 21 首页的体验看到 Header问卷调查/参与问卷让数据说话——我是来填问卷的看到分类 Chip教育/生活/心理/市场——我想填哪类问卷看到热门问卷列表5 份——哪份问卷值得我花时间点击问卷 → 跳到问卷详情/填写页——核心动作首页 问卷的淘宝——用户来逛问卷、选问卷、填问卷——首页服务的是消费问卷的用户。创作者视角的入口首页只读 参与创建 Tab创作者工具——设计新问卷数据 Tab创作者分析——查看回收结果我的 Tab混合——我的问卷是创作者的、填写记录是参与者的问卷是双向 UGC 应用——用户既消费又生产。首页只展示消费端热门问卷 分类创作者工具在创建Tab——**首页 ≠ 个人中心**是问卷平台的角色设计与抖音/小红书同款。十一、问卷分类的4 大类行业标准App 21 的 5 个分类全部/教育/生活/心理/市场是问卷平台的行业标准 4 大类分类典型问卷应用场景教育学习习惯、课程反馈学术研究、校园调查生活饮食/消费/作息校园生活、消费者研究心理心理健康/压力/幸福感心理学研究、心理咨询市场品牌认知/购买意向商业调研、产品反馈4 大类是问卷平台分类的最小可行集——再加健康/政务/娱乐等子类就是完整集。全部是默认分类与 4 大类并列——全部 包含 4 大类的全集——5 个胶囊横滑足够覆盖教育/生活/心理/市场 全部 5。真实问卷平台如问卷星/腾讯问卷的分类更多20 分类教育/科研/医疗/金融/政府/消费/媒体/人力资源……——分类数量跟随用户规模小平台 4-10 类、大平台 20 类。十二、ChipRow 分类的扁平 vs 树形设计App 21 的分类是扁平结构5 个分类平铺——真实问卷平台常用树形一级分类 → 二级分类扁平分类App 21[全部] [教育] [生活] [心理] [市场]树形分类真实平台[全部] [教育] [生活] [心理] [市场] [...] └─ 教育 [学习方法] [课程评价] [教师评估] └─ 市场 [品牌认知] [产品反馈] [消费偏好]扁平 vs 树形决定 UI 复杂度扁平5-10 个分类—— 横滑 Chip 即可树形20 分类—— 需要分类选择页弹层/二级页App 21 扁平分类是 demo 的合理选择——4 大类对校园问卷平台足够。真实项目做分类选择应预留可扩展性即使当前扁平预留更多分类入口。十三、问卷数据与行为预测的应用App 21 首页的 5 份问卷数据有内在逻辑——可用于行为预测已结束问卷2,100 1,530 3,630 份——这些问卷的数据已被研究校园心理健康研究、课余时间研究——首页展示已结束问卷 公开研究成果。进行中问卷1,256 892 680 2,828 份——还在收集数据——首页展示进行中 邀请填写。问卷的生命周期 数据价值进行中邀请用户参与 → 积累数据已结束分析数据 → 发表报告真实问卷平台的问卷列表通常按数据价值排序——热门数据多置顶、即将截止置顶、最新发布置顶——首页排序 引导用户行为。十四、与系列其他首页对比系列 8 个首页的设计哲学对比App首页定位首页哲学主列表13 音乐内容流发现好音乐3 项目少而精14 运动行动型找到想去的场地5 场地行动导向15 环保知识型学习分类知识4 指南教育导向16 商城交易型找到好商品5 商品购物车导向18 社交人脉型认识同好4 同好人脉导向19 摄影创作型欣赏好作品4 作品创作者导向20 阅读学习型管理书架4 书收藏导向21 问卷任务型参与问卷5 问卷任务导向设计哲学 用户来 App 做什么——8 个 App 的首页哲学映射 8 种用户需求——读者做自己 App 时先回答用户来做什么再设计首页。App 类型 首页主列表——读者设计自己的产品时先回答用户来这个 App 是来做什么——做什么决定首页主列表内容看电影/购物/学习/社交……。问卷是任务型——用户来做事参与调查/创建调查——首页就展示可做的事问卷列表。App 类型 配色 模块 内容三件套——读者做产品设计时先想清楚App 类型再决定色 模块 内容——避免做出四不像App。十五、总结App 21 首页解析完毕。3 块紧凑结构 5 份问卷列表 状态色二态绿/灰是核心组件。轻量级问卷社区设计适合任务型应用——少模块、大按钮、明确状态、少图表。