鸿蒙原生应用 HarmonyOS ArkTS科研首页的紧凑布局与项目进度卡App 24「科研项目管理」首页HomeTab主题色#4338CA靛蓝indigo4 个 Tab 分别为首页、项目、文件、我的。首页采用紧凑布局——3 栏统计概览负责项目 4/任务待办 18/文件数 32 科研项目 SectionTitle 4 张项目卡52×52 emoji 名称 团队 · 状态 Progress 进度条 百分比。本篇基于24-research-mgmt/entry/src/main/ets/pages/HomeTab.ets约 110 行逐段拆解附 4 张实机截图。一、整体结构Header 3 栏统计 4 项目卡App 24 首页是科研管理的展示页——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.SummaryCard() this.SectionTitle(科研项目) this.ProjectList() } .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— 科研管理标题SummaryCard— 3 栏统计SectionTitle(科研项目) ProjectList— 4 张项目卡主题色#4338CA靛蓝——系列第一个靛蓝indigo——靛蓝是科研/学术/专业的传统色学术帽/学位服/期刊封面都用靛蓝——靛蓝 科研/学术/严肃。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、HeaderHeader 是科研管理单行与 App 13/17 简版 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: 12 }) } .width(100%).backgroundColor(C.card) }科研管理是产品名不是分类名——工具型应用 Header 用产品名而不是分类名如记账本天气计算器是产品名。无 Slogan——App 24 是工具型科研管理不需要 Slogan用户来管项目不是来听故事——工具型 Header 产品名 副标题或 Slogan 可省。三、SummaryCard3 栏统计项目数/任务/文件SummaryCard 是3 栏彩色统计与 App 22/23 风格同款但项目维度Builder SummaryCard() { Row({ space: 10 }) { Column({ space: 4 }) { Text(4).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.primary) Text(负责项目).fontSize(11).fontColor(C.textDim) }.layoutWeight(1).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) Column({ space: 4 }) { Text(18).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.ok) Text(任务待办).fontSize(11).fontColor(C.textDim) }.layoutWeight(1).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) Column({ space: 4 }) { Text(32).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.warn) Text(文件数).fontSize(11).fontColor(C.textDim) }.layoutWeight(1).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }.width(100%) }3 栏数据数字颜色标签含义4靛蓝C.primary负责项目4 个项目与下方项目卡数量一致 ✓18绿C.ok任务待办18 个待办任务App 24 我的页任务记录 36是 36 1818 已完成32橙C.warn文件数32 个文件与 Func2Tab 6 文件不直接对应——6 是首页展示、32 是总数3 栏彩色项目靛蓝项目维度我有多少项目任务绿任务维度我有多少任务文件橙文件维度我有多少文件项目 任务 文件是科研管理的 3 大要素——3 栏统计覆盖科研管理的核心维度。数据一致性4 负责项目 下方 4 张项目卡 ✓——统计与列表跨组件一致。18 待办 vs 36 总任务是真实项目应分待办/已完成两栏——App 24 简化只展示待办——任务双栏待办/已完成是真实项目的细节。四、SectionTitle参数化SectionTitle 是参数化标题Builder SectionTitle(title: string) { Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(新建 ).fontSize(12).fontColor(C.primary) }.width(100%) }科研项目 / 新建 ——右侧新建 是创建入口对比 App 22 首页更多 是浏览更多入口——任务型应用的 SectionTitle 右侧 操作入口新建/添加/上传。Blank()撑开标题与右侧新建——C.primary靛蓝高亮新建入口。五、ProjectList4 张项目进度卡本页核心ProjectList 是 4 张项目卡emoji 名称 团队/状态 进度条 百分比Builder ProjectList() { Column({ space: 12 }) { ForEach(this.projects, (p: Project) { Column({ space: 10 }) { Row({ space: 12 }) { Row() { Text(p.emoji).fontSize(28) } .width(52).height(52).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(p.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(p.team · p.status).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) }.width(100%) Row({ space: 8 }) { Progress({ value: p.progress, total: 100 }).color(C.primary).layoutWeight(1) Text(p.progress %).fontSize(12).fontColor(C.primary) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: p.name }); }) }, (p: Project) p.id.toString()) }.width(100%) }5.1 4 个科研项目的数据private projects: Project[] [ { id: 1, emoji: , name: 基于深度学习的图像识别研究, team: 5 人, progress: 65, status: 进行中 }, { id: 2, emoji: , name: 校园交通流量分析系统, team: 4 人, progress: 40, status: 进行中 }, { id: 3, emoji: , name: 基因序列比对算法优化, team: 6 人, progress: 85, status: 结题中 }, { id: 4, emoji: , name: 校园健康监测 APP 开发, team: 3 人, progress: 20, status: 启动期 } ];4 个科研项目覆盖科研 4 大方向方向项目团队状态进度 AI深度学习图像识别5 人进行中65% 数据校园交通流量分析4 人进行中40% 生物信息基因序列比对6 人结题中85% 移动开发健康监测 APP3 人启动期20%4 个项目的4 种状态进行中2 个65%/40%—— 项目主体阶段结题中1 个85%—— 项目收尾阶段接近完成启动期1 个20%—— 项目初始阶段刚开始进行中 结题中 启动期是科研项目的 3 阶段——3 状态比 App 22 投票/23 实验室的2 状态更细分——项目阶段比设备状态更复杂项目有生命周期。5.2 项目进度条靛蓝Row({ space: 8 }) { Progress({ value: p.progress, total: 100 }).color(C.primary).layoutWeight(1) Text(p.progress %).fontSize(12).fontColor(C.primary) }.width(100%)Progress({ value: p.progress, total: 100 })靛蓝进度条——4 个项目进度 65/40/85/20 视觉对比明显靛蓝条长度差——进度条 项目完成度的视觉表达。Text(p.progress %)12sp 靛蓝——百分比 进度条双通道色弱用户能读数字。5.3 名称截断 团队/状态Text(p.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(p.team · p.status).fontSize(12).fontColor(C.textDim)基于深度学习的图像识别研究12 个汉字在项目卡宽度内放不下——maxLines(1) Ellipsis截断为基于深度学习的图像识别…——长项目名 单行截断是项目卡的标准。5 人 · 进行中—— 团队规模 状态——项目卡副信息——·分隔符是中文常见风格。六、State 与科研管理数据模型HomeTab 只有0 个 State无状态字段所有数据private不可变——系列第 8 个0 State 首页首页 0 状态是纯展示型 App 的特点。App 24 4 Tab 的 State 分布首页0项目1State tasks任务数组驱动任务看板完成态切换文件1activeCat 分类 Chip我的0App 24 是科研管理 0 状态型应用——状态全部以数据字段形式存在task.done / project.status——真实项目应把这些字段变为 State 联动 UI——0 状态首页 演示数据不可变。七、科研项目4 状态与项目生命周期App 24 的 3 种项目状态进行中/结题中/启动期——真实项目生命周期申报期写申请书、待立项 → 启动期刚立项团队组建 → 进行期主要研究阶段 → 结题期写结题报告、准备验收 → 已结题验收通过、归档5 状态映射App 24 简化 3 状态启动期App 24 20%← 申报期立项前进行中App 24 65%/40%← 进行期主体结题中App 24 85%← 结题期App 24 无已结题App 24 无已延期3 状态 vs 5 状态——App 24 简化了 2 个状态已结题/已延期——真实项目应支持完整 5 状态。项目状态与项目进度双维度状态status定性——进行中/结题中/启动期——决定项目在哪个阶段进度progress定量——65%/40%——决定项目完成度项目状态 进度是科研管理的双指标——状态看阶段、进度看完成度——真实项目状态决定能做什么操作进行中可改任务、结题中可写结题报告、已结题只读。八、项目 vs 设备 vs 场地 的 3 状态对比App对象状态数状态色App 14 运动场地2空闲绿/已约满红App 22 投票投票3进行中绿/即将结束橙/热门红App 23 实验室设备3空闲绿/使用中橙/维护中红App 24 科研项目3进行中/结题中/启动期3 状态 App 共 3 个22/23/24——3 状态 业务对象的核心生命周期——投票有进行/即将结束/热门、设备有空闲/使用/维护、项目有启动/进行/结题。3 状态是业务对象的开始 主体 结束3 阶段——任何业务对象都有生命周期——3 状态 1 开始 1 主体 1 结束——3 状态是自然分类。九、首页与项目页的项目数据流首页 4 个项目项目列表→项目页 5 团队成员 5 任务项目详情——首页列表 → 项目详情是分层数据流项目列表首页4 个项目每个项目名称/团队/状态/进度项目详情项目页1 个项目默认展示第一个基于深度学习的图像识别研究5 个团队成员每个含角色/任务数5 个任务每个含标题/负责人/优先级/完成态列表 → 详情是经典 App 信息架构——列表展示概览、详情展示细节——概览 细节是信息架构的两层。真实项目应点击项目 → 显示该项目详情——App 24 当前项目页硬编码基于深度学习的图像识别研究永远显示第一个项目——**路由传参或Prop item**让详情动态化。十、项目卡与系列其他主列表的对比App 24 首页的 4 张项目卡与系列其他 App 的主列表卡对比App主列表信息量视觉锚点13 音乐推荐项目emoji标题标签进度标签14 运动场地星级时间进度按钮进度条15 环保分类指南星级掌握度学测星级16 商城商品划线价库存缺货态价格18 社交同好卡匹配度环形在线状态匹配度19 摄影作品卡封面点赞完成度封面❤20 阅读书卡竖版封页码条竖版封21 问卷问卷卡emoji标题状态状态色22 投票投票卡emoji状态剩余状态色时间23 实验室设备卡emoji名称规格状态emoji状态24 科研项目卡emoji名称团队/状态进度进度条App 24 项目卡的科研特色唯一带团队规模5 人的卡片唯一带科研状态进行中/结题中/启动期的卡片唯一状态进度双信息卡片项目 状态 进度是科研管理特色——设备/场地/商品只有可用/不可用二态项目有3 阶段状态 完成度进度——项目复杂度 设备是科研管理比 App 23 实验室复杂的根本原因。十一、列表 → 详情 → 看板 三层信息架构App 24 的 3 个 Tab 体现项目管理的 3 层信息架构首页项目列表—— 概览层4 项目 进度 ↓ 项目详情任务看板—— 协作层5 团队 5 任务 ↓ 文件管理文件列表—— 资源层6 文件 4 类型概览 → 协作 → 资源是项目管理的 3 层金字塔概览层首页——项目做多少进度条 状态协作层项目详情——谁在做什么团队 任务资源层文件管理——产出什么文件 类型3 层金字塔是项目管理的标准架构——任何项目管理类 App研发/营销/活动都按 3 层组织——读者做项目管理工具时先设计 3 层信息架构再设计每层 UI。十二、总结App 24 首页解析完毕。3 栏统计项目/任务/文件 4 张项目进度卡3 种状态是核心组件。项目生命周期 3 状态启动/进行/结题是科研管理的核心。项目状态 进度双维度和**列表 → 详情信息架构是项目管理的标准。靛蓝 科研/学术的主题色映射让 App 调性专业。0 状态首页 纯展示是工具型应用的特点。概览 → 协作 → 资源3 层金字塔**是项目管理的标准架构。
鸿蒙原生应用 HarmonyOS ArkTS：科研首页的紧凑布局与项目进度卡
鸿蒙原生应用 HarmonyOS ArkTS科研首页的紧凑布局与项目进度卡App 24「科研项目管理」首页HomeTab主题色#4338CA靛蓝indigo4 个 Tab 分别为首页、项目、文件、我的。首页采用紧凑布局——3 栏统计概览负责项目 4/任务待办 18/文件数 32 科研项目 SectionTitle 4 张项目卡52×52 emoji 名称 团队 · 状态 Progress 进度条 百分比。本篇基于24-research-mgmt/entry/src/main/ets/pages/HomeTab.ets约 110 行逐段拆解附 4 张实机截图。一、整体结构Header 3 栏统计 4 项目卡App 24 首页是科研管理的展示页——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.SummaryCard() this.SectionTitle(科研项目) this.ProjectList() } .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— 科研管理标题SummaryCard— 3 栏统计SectionTitle(科研项目) ProjectList— 4 张项目卡主题色#4338CA靛蓝——系列第一个靛蓝indigo——靛蓝是科研/学术/专业的传统色学术帽/学位服/期刊封面都用靛蓝——靛蓝 科研/学术/严肃。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、HeaderHeader 是科研管理单行与 App 13/17 简版 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: 12 }) } .width(100%).backgroundColor(C.card) }科研管理是产品名不是分类名——工具型应用 Header 用产品名而不是分类名如记账本天气计算器是产品名。无 Slogan——App 24 是工具型科研管理不需要 Slogan用户来管项目不是来听故事——工具型 Header 产品名 副标题或 Slogan 可省。三、SummaryCard3 栏统计项目数/任务/文件SummaryCard 是3 栏彩色统计与 App 22/23 风格同款但项目维度Builder SummaryCard() { Row({ space: 10 }) { Column({ space: 4 }) { Text(4).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.primary) Text(负责项目).fontSize(11).fontColor(C.textDim) }.layoutWeight(1).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) Column({ space: 4 }) { Text(18).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.ok) Text(任务待办).fontSize(11).fontColor(C.textDim) }.layoutWeight(1).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) Column({ space: 4 }) { Text(32).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.warn) Text(文件数).fontSize(11).fontColor(C.textDim) }.layoutWeight(1).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }.width(100%) }3 栏数据数字颜色标签含义4靛蓝C.primary负责项目4 个项目与下方项目卡数量一致 ✓18绿C.ok任务待办18 个待办任务App 24 我的页任务记录 36是 36 1818 已完成32橙C.warn文件数32 个文件与 Func2Tab 6 文件不直接对应——6 是首页展示、32 是总数3 栏彩色项目靛蓝项目维度我有多少项目任务绿任务维度我有多少任务文件橙文件维度我有多少文件项目 任务 文件是科研管理的 3 大要素——3 栏统计覆盖科研管理的核心维度。数据一致性4 负责项目 下方 4 张项目卡 ✓——统计与列表跨组件一致。18 待办 vs 36 总任务是真实项目应分待办/已完成两栏——App 24 简化只展示待办——任务双栏待办/已完成是真实项目的细节。四、SectionTitle参数化SectionTitle 是参数化标题Builder SectionTitle(title: string) { Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(新建 ).fontSize(12).fontColor(C.primary) }.width(100%) }科研项目 / 新建 ——右侧新建 是创建入口对比 App 22 首页更多 是浏览更多入口——任务型应用的 SectionTitle 右侧 操作入口新建/添加/上传。Blank()撑开标题与右侧新建——C.primary靛蓝高亮新建入口。五、ProjectList4 张项目进度卡本页核心ProjectList 是 4 张项目卡emoji 名称 团队/状态 进度条 百分比Builder ProjectList() { Column({ space: 12 }) { ForEach(this.projects, (p: Project) { Column({ space: 10 }) { Row({ space: 12 }) { Row() { Text(p.emoji).fontSize(28) } .width(52).height(52).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(p.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(p.team · p.status).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) }.width(100%) Row({ space: 8 }) { Progress({ value: p.progress, total: 100 }).color(C.primary).layoutWeight(1) Text(p.progress %).fontSize(12).fontColor(C.primary) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: p.name }); }) }, (p: Project) p.id.toString()) }.width(100%) }5.1 4 个科研项目的数据private projects: Project[] [ { id: 1, emoji: , name: 基于深度学习的图像识别研究, team: 5 人, progress: 65, status: 进行中 }, { id: 2, emoji: , name: 校园交通流量分析系统, team: 4 人, progress: 40, status: 进行中 }, { id: 3, emoji: , name: 基因序列比对算法优化, team: 6 人, progress: 85, status: 结题中 }, { id: 4, emoji: , name: 校园健康监测 APP 开发, team: 3 人, progress: 20, status: 启动期 } ];4 个科研项目覆盖科研 4 大方向方向项目团队状态进度 AI深度学习图像识别5 人进行中65% 数据校园交通流量分析4 人进行中40% 生物信息基因序列比对6 人结题中85% 移动开发健康监测 APP3 人启动期20%4 个项目的4 种状态进行中2 个65%/40%—— 项目主体阶段结题中1 个85%—— 项目收尾阶段接近完成启动期1 个20%—— 项目初始阶段刚开始进行中 结题中 启动期是科研项目的 3 阶段——3 状态比 App 22 投票/23 实验室的2 状态更细分——项目阶段比设备状态更复杂项目有生命周期。5.2 项目进度条靛蓝Row({ space: 8 }) { Progress({ value: p.progress, total: 100 }).color(C.primary).layoutWeight(1) Text(p.progress %).fontSize(12).fontColor(C.primary) }.width(100%)Progress({ value: p.progress, total: 100 })靛蓝进度条——4 个项目进度 65/40/85/20 视觉对比明显靛蓝条长度差——进度条 项目完成度的视觉表达。Text(p.progress %)12sp 靛蓝——百分比 进度条双通道色弱用户能读数字。5.3 名称截断 团队/状态Text(p.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(p.team · p.status).fontSize(12).fontColor(C.textDim)基于深度学习的图像识别研究12 个汉字在项目卡宽度内放不下——maxLines(1) Ellipsis截断为基于深度学习的图像识别…——长项目名 单行截断是项目卡的标准。5 人 · 进行中—— 团队规模 状态——项目卡副信息——·分隔符是中文常见风格。六、State 与科研管理数据模型HomeTab 只有0 个 State无状态字段所有数据private不可变——系列第 8 个0 State 首页首页 0 状态是纯展示型 App 的特点。App 24 4 Tab 的 State 分布首页0项目1State tasks任务数组驱动任务看板完成态切换文件1activeCat 分类 Chip我的0App 24 是科研管理 0 状态型应用——状态全部以数据字段形式存在task.done / project.status——真实项目应把这些字段变为 State 联动 UI——0 状态首页 演示数据不可变。七、科研项目4 状态与项目生命周期App 24 的 3 种项目状态进行中/结题中/启动期——真实项目生命周期申报期写申请书、待立项 → 启动期刚立项团队组建 → 进行期主要研究阶段 → 结题期写结题报告、准备验收 → 已结题验收通过、归档5 状态映射App 24 简化 3 状态启动期App 24 20%← 申报期立项前进行中App 24 65%/40%← 进行期主体结题中App 24 85%← 结题期App 24 无已结题App 24 无已延期3 状态 vs 5 状态——App 24 简化了 2 个状态已结题/已延期——真实项目应支持完整 5 状态。项目状态与项目进度双维度状态status定性——进行中/结题中/启动期——决定项目在哪个阶段进度progress定量——65%/40%——决定项目完成度项目状态 进度是科研管理的双指标——状态看阶段、进度看完成度——真实项目状态决定能做什么操作进行中可改任务、结题中可写结题报告、已结题只读。八、项目 vs 设备 vs 场地 的 3 状态对比App对象状态数状态色App 14 运动场地2空闲绿/已约满红App 22 投票投票3进行中绿/即将结束橙/热门红App 23 实验室设备3空闲绿/使用中橙/维护中红App 24 科研项目3进行中/结题中/启动期3 状态 App 共 3 个22/23/24——3 状态 业务对象的核心生命周期——投票有进行/即将结束/热门、设备有空闲/使用/维护、项目有启动/进行/结题。3 状态是业务对象的开始 主体 结束3 阶段——任何业务对象都有生命周期——3 状态 1 开始 1 主体 1 结束——3 状态是自然分类。九、首页与项目页的项目数据流首页 4 个项目项目列表→项目页 5 团队成员 5 任务项目详情——首页列表 → 项目详情是分层数据流项目列表首页4 个项目每个项目名称/团队/状态/进度项目详情项目页1 个项目默认展示第一个基于深度学习的图像识别研究5 个团队成员每个含角色/任务数5 个任务每个含标题/负责人/优先级/完成态列表 → 详情是经典 App 信息架构——列表展示概览、详情展示细节——概览 细节是信息架构的两层。真实项目应点击项目 → 显示该项目详情——App 24 当前项目页硬编码基于深度学习的图像识别研究永远显示第一个项目——**路由传参或Prop item**让详情动态化。十、项目卡与系列其他主列表的对比App 24 首页的 4 张项目卡与系列其他 App 的主列表卡对比App主列表信息量视觉锚点13 音乐推荐项目emoji标题标签进度标签14 运动场地星级时间进度按钮进度条15 环保分类指南星级掌握度学测星级16 商城商品划线价库存缺货态价格18 社交同好卡匹配度环形在线状态匹配度19 摄影作品卡封面点赞完成度封面❤20 阅读书卡竖版封页码条竖版封21 问卷问卷卡emoji标题状态状态色22 投票投票卡emoji状态剩余状态色时间23 实验室设备卡emoji名称规格状态emoji状态24 科研项目卡emoji名称团队/状态进度进度条App 24 项目卡的科研特色唯一带团队规模5 人的卡片唯一带科研状态进行中/结题中/启动期的卡片唯一状态进度双信息卡片项目 状态 进度是科研管理特色——设备/场地/商品只有可用/不可用二态项目有3 阶段状态 完成度进度——项目复杂度 设备是科研管理比 App 23 实验室复杂的根本原因。十一、列表 → 详情 → 看板 三层信息架构App 24 的 3 个 Tab 体现项目管理的 3 层信息架构首页项目列表—— 概览层4 项目 进度 ↓ 项目详情任务看板—— 协作层5 团队 5 任务 ↓ 文件管理文件列表—— 资源层6 文件 4 类型概览 → 协作 → 资源是项目管理的 3 层金字塔概览层首页——项目做多少进度条 状态协作层项目详情——谁在做什么团队 任务资源层文件管理——产出什么文件 类型3 层金字塔是项目管理的标准架构——任何项目管理类 App研发/营销/活动都按 3 层组织——读者做项目管理工具时先设计 3 层信息架构再设计每层 UI。十二、总结App 24 首页解析完毕。3 栏统计项目/任务/文件 4 张项目进度卡3 种状态是核心组件。项目生命周期 3 状态启动/进行/结题是科研管理的核心。项目状态 进度双维度和**列表 → 详情信息架构是项目管理的标准。靛蓝 科研/学术的主题色映射让 App 调性专业。0 状态首页 纯展示是工具型应用的特点。概览 → 协作 → 资源3 层金字塔**是项目管理的标准架构。
