鸿蒙原生应用 ArkUI 声明式实验室首页的 2 列 Grid 与三状态色App 23「实验室设备预约」首页HomeTab主题色#0F766E深青色teal4 个 Tab 分别为首页、设备、预约、我的。首页采用紧凑布局——Header实验室设备 5 分类 Chip全部/光学/电子/机械/化学 SectionTitle设备列表2 列 Grid 6 台设备卡60×100% emoji 图标块 名称 型号规格 3 状态色空闲绿/使用中橙/维护中红。本篇基于23-lab-booking/entry/src/main/ets/pages/HomeTab.ets约 121 行逐段拆解附 4 张实机截图。一、整体结构3 块紧凑内容App 23 首页是系列最紧凑的设备列表首页——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ChipRow() this.SectionTitle(设备列表) this.DeviceGrid() } .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(设备列表) DeviceGrid— 2 列 Grid 6 台设备与 App 21 问卷首页同构3 块紧凑结构——设备列表 任务型列表用户来找设备→预约不需要复杂首页。主题色#0F766E深青色——实验室/科研/专业的调性深青色接近实验服蓝绿、显微镜/试剂瓶的视觉联想——与 App 19 青绿 #0D9488 同系但更深——**深青 科研严肃、浅青 摄影清新**同系不同调。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header ChipRowHeader 是实验室设备单行标题无 Slogan——工具型首页不配 Slogan。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 个分类[全部, 光学, 电子, 机械, 化学]——实验室设备的 4 大分类光学/电子/机械/化学是高校实验室的标准分类。State activeCat: number 0默认选中全部——onClick切选中态activeCat idx ? 深青底白字 : 白底灰字。假筛选同系列其他 Chip——demo 未联动过滤真实项目应加filteredDevices()。borderRadius(16)胶囊形——系列标准 Chip。三、SectionTitle DeviceGrid2 列 Grid本页核心SectionTitle 是设备列表标题无右侧链接——简化版。DeviceGrid 是 2 列 Grid 6 台设备Builder DeviceGrid() { Grid() { ForEach(this.devices, (d: Device) { GridItem() { Column({ space: 8 }) { Row() { Text(d.emoji).fontSize(30) } .width(100%).height(60) .backgroundColor(C.cardSoft).borderRadius(D.rSm) .justifyContent(FlexAlign.Center) Text(d.name).fontSize(13).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }).width(100%) Text(d.spec).fontSize(11).fontColor(C.textDim).width(100%) Row() { Blank() Text(d.status).fontSize(11).fontColor(d.statusColor).fontWeight(FontWeight.Medium) } .width(100%) } .width(100%) .padding(10) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: d.name }); }) } }, (d: Device) d.id.toString()) } .columnsTemplate(1fr 1fr) .columnsGap(12) .rowsGap(12) .width(100%) }3.1 6 台设备的数据private devices: Device[] [ { id: 1, emoji: , name: 高倍显微镜, spec: 1000x · 偏光, status: 空闲, statusColor: C.ok }, { id: 2, emoji: ⚡, name: 示波器, spec: 200MHz · 4通道, status: 使用中, statusColor: C.warn }, { id: 3, emoji: , name: 高效液相色谱仪, spec: UV检测器, status: 空闲, statusColor: C.ok }, { id: 4, emoji: , name: 万能试验机, spec: 100kN, status: 维护中, statusColor: C.danger }, { id: 5, emoji: , name: 光谱分析仪, spec: 200-800nm, status: 空闲, statusColor: C.ok }, { id: 6, emoji: , name: 网络分析仪, spec: 9kHz-6GHz, status: 使用中, statusColor: C.warn } ];6 台设备覆盖 4 大分类设备分类型号规格状态 高倍显微镜光学1000x · 偏光空闲绿⚡ 示波器电子200MHz · 4通道使用中橙 高效液相色谱仪化学UV检测器空闲绿 万能试验机机械100kN维护中红 光谱分析仪光学200-800nm空闲绿 网络分析仪电子9kHz-6GHz使用中橙6 台设备的真实实验室设备显微镜/示波器/色谱仪/试验机/光谱仪/网络分析仪——都是真实的科研仪器高校实验室常见设备——设备列表 真实科研环境。3 状态分布空闲 3 台绿/使用中 2 台橙/维护中 1 台红——多空闲、少维护是实验室常态。3.2 3 状态色映射空闲→C.ok绿可预约使用中→C.warn橙被占用维护中→C.danger红不可用3 状态 3 色——**空闲绿/使用橙/维护红**是设备管理/会议室预约的标准色映射——与 App 14 场地空闲/已约满、App 22 投票进行中/已结束同款状态色编码。3.3 设备卡的 4 层结构每张设备卡 4 行从上到下60 高 emoji 图标块C.cardSoft浅灰底 /⚡ 等设备名称13sp 深色 maxLines(1)截断型号规格11sp 灰——1000x · 偏光等状态11sp 状态色 加粗 右对齐Blank()Blank()把状态推到右下角——名称左上、状态右下的视觉节奏。maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })设备名截断——高效液相色谱仪 7 个字在 1 列内放不下——Ellipsis省略实际显示高效液相色…——Grid 卡片文字必须截断列宽有限。3.4 2 列 Grid 布局columnsTemplate(1fr 1fr)columnsGap(12)rowsGap(12)——2 列等宽 12vp 间隙——6 台设备排成 3 行 2 列。2 列 Grid vs 1 列列表2 列本页——信息密度高一屏看 4 台、紧凑1 列App 21/22——信息完整每行有按钮、宽松设备列表用 2 列 Grid是合理选择——设备卡信息少名称规格状态2 列紧凑展示——信息少的列表用 Grid、信息多的列表用 List。四、State 与紧凑首页设计HomeTab 只有1 个 StateactiveCat分类 0-4。其余数据private不可变。App 23 首页是系列最紧凑的设备列表3 块——**设备预约 找设备 → 看详情 → 预约**的任务流——首页只负责找设备列表展示。对比 App 14 运动场地预约首页5 块Hero/入口/周图/场地/排行——App 14 首页丰富因为运动是内容型场地推荐需要营销——App 23 首页紧凑因为实验室设备是任务型用户知道要什么设备——**业务类型决定首页复杂度**再次验证。五、设备状态与预约意愿的联动App 23 首页的 3 状态直接决定用户要不要点进详情预约状态 → 用户行为空闲绿→ 可以预约 → 点进详情 → 选时段 → 预约使用中橙→ 被占用了 → 可能等/换设备维护中红→ 坏了 → 换设备/联系管理员状态 预约意愿的引导——用户扫一眼 Grid 就知道哪台能约——状态色可视化 高效筛选。真实项目的状态扩展已锁定被特定用户预约但还没用预约中未来时段已被预约待维护快需要维护状态机从 3 态扩展为 6 态——UI 只需改状态名 状态色数据结构不变——状态可扩展性是设备管理的基础。六、设备状态色与系列状态色的统一体系App 23 首页的 3 状态色空闲绿/使用中橙/维护中红与系列其他 App 的状态色形成统一体系状态语义颜色出现位置空闲/可用/进行中绿C.okApp 23 设备、App 14 场地、App 22 投票使用中/待处理/即将结束橙C.warnApp 23 设备、App 22 投票、App 15 环保维护/已满/已结束红C.dangerApp 23 设备、App 14 场地、App 16 商城绿可用、橙警示、红不可用是系列统一的状态色语义——读者在多个 App 间切换不会混淆同一颜色永远代表同一类语义——跨 App 状态色一致性是设计系统的一致性原则。状态色映射的工程实现App 23 设备卡// 数据携带颜色当前实现 { status: 空闲, statusColor: C.ok } { status: 使用中, statusColor: C.warn } { status: 维护中, statusColor: C.danger }真实项目应抽成状态 → 颜色映射表const STATUS_COLOR { 空闲: C.ok, 使用中: C.warn, 维护中: C.danger, 已锁定: C.textDim, 待维护: C.warn }; // 数据只存 status 字符串颜色查表映射表代替数据携带颜色——新增状态只改映射表一处数据与视觉解耦。七、2 列 Grid vs 1 列 List 的选择标准App 23 设备卡用 2 列 Grid信息紧凑对比系列其他列表App主列表布局卡片信息量21 问卷问卷卡1 列 List中emoji标题状态22 投票投票卡1 列 List中emoji标题状态剩余23 实验室设备卡2 列 Grid低emoji名称规格状态13 音乐项目卡1 列 List高emoji标题标签进度条Grid vs List选择标准信息少 数量多设备 6 台、规格短→2 列 Grid一屏看更多信息多 操作多项目有进度条按钮→1 列 List每行完整展示卡片信息量决定布局——信息少的卡片适合 Grid高密度、信息多的适合 List完整性。2 列 Grid的注意点卡片宽度减半 →文字必须截断maxLines(1) Ellipsis状态/操作按钮空间小 →只用状态文字不用按钮点击区域小 →整卡可点GridItem onClickApp 23 设备卡的Grid 三原则截断/无按钮/整卡可点是 2 列 Grid 的标准实践。八、设备列表的搜索与筛选扩展App 23 首页有分类 Chip光学/电子/机械/化学但无搜索框——真实设备管理应有**分类 搜索双筛选**// 真实项目的双筛选 private filteredDevices(): Device[] { let result this.devices; if (this.activeCat 0) { const catName this.cats[this.activeCat]; result result.filter(d this.catOf(d.id) catName); } if (this.keyword.trim() ! ) { result result.filter(d d.name.includes(this.keyword.trim()) || d.spec.includes(this.keyword.trim())); } return result; }分类 搜索双条件过滤——activeCat分类keyword搜索词两个 State 组合过滤——多条件筛选是设备/商品列表的标准。真实设备的分类映射// 设备 → 分类映射 const DEVICE_CATEGORY: Recordnumber, string { 1: 光学, 2: 电子, 3: 化学, 4: 机械, 5: 光学, 6: 电子 };分类映射表让catOf()一行查表——设备与分类的关系数据化当前 demo 的 devices 数组没有 category 字段是假分类——分类字段缺失是假筛选的根源——真实项目每个设备应有category字段。九、设备卡的信息密度与科研设备命名App 23 的 6 台设备卡的信息密度设计每张卡 4 行信息的层级emoji 图标30sp——视觉锚点最高信息密度设备名13sp 加粗——核心识别规格11sp 灰——补充参数状态11sp 状态色——行动信号图标 名称 规格 状态4 层——从最直观到最行动的视觉递减——科研设备卡的信息架构。科研设备命名的专业性高倍显微镜1000x · 偏光高效液相色谱仪UV 检测器万能试验机100kN光谱分析仪200-800nm网络分析仪9kHz-6GHz型号规格都是真实科研参数倍率/通道/检测器/量程/频段——专业参数 科研可信度——用户科研人员一眼看懂这设备能干什么——设备卡是给专家看的对比 App 16 商品卡给消费者看价格设备卡给科研人员看参数。十、任务型首页的 3 原则App 23 首页是任务型首页的范本——3 个设计原则原则 1分类优先Chip 在最上方——用户第一件事是找分类光学/电子/机械/化学——分类 任务的第一步。原则 2列表高效2 列 Grid 一屏 4 台——用户快速扫设备——一屏看到尽可能多。原则 3状态信号状态色右对齐——用户判断哪台能约——状态 决策依据。**分类 → 扫视 → 决策**是任务型首页的用户路径——与内容型首页App 19 摄影欣赏→收藏的差异——任务型用户目的明确、内容型用户浏览探索。读者做任务型首页时 3 原则自查分类在最上面了吗列表一屏够多吗关键状态一眼可见吗十一、总结App 23 首页解析完毕。3 块紧凑结构 5 分类 Chip 2 列 Grid 6 设备卡3 状态色是核心组件。设备状态 → 预约意愿的联动是设备预约场景的特色。**2 列 Grid 紧凑设备列表是任务型首页的范本。Grid vs List 选择标准、分类映射表、任务型首页 3 原则**是真实项目的关键改进。
鸿蒙原生应用 ArkUI 声明式：实验室首页的 2 列 Grid 与三状态色
鸿蒙原生应用 ArkUI 声明式实验室首页的 2 列 Grid 与三状态色App 23「实验室设备预约」首页HomeTab主题色#0F766E深青色teal4 个 Tab 分别为首页、设备、预约、我的。首页采用紧凑布局——Header实验室设备 5 分类 Chip全部/光学/电子/机械/化学 SectionTitle设备列表2 列 Grid 6 台设备卡60×100% emoji 图标块 名称 型号规格 3 状态色空闲绿/使用中橙/维护中红。本篇基于23-lab-booking/entry/src/main/ets/pages/HomeTab.ets约 121 行逐段拆解附 4 张实机截图。一、整体结构3 块紧凑内容App 23 首页是系列最紧凑的设备列表首页——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ChipRow() this.SectionTitle(设备列表) this.DeviceGrid() } .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(设备列表) DeviceGrid— 2 列 Grid 6 台设备与 App 21 问卷首页同构3 块紧凑结构——设备列表 任务型列表用户来找设备→预约不需要复杂首页。主题色#0F766E深青色——实验室/科研/专业的调性深青色接近实验服蓝绿、显微镜/试剂瓶的视觉联想——与 App 19 青绿 #0D9488 同系但更深——**深青 科研严肃、浅青 摄影清新**同系不同调。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header ChipRowHeader 是实验室设备单行标题无 Slogan——工具型首页不配 Slogan。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 个分类[全部, 光学, 电子, 机械, 化学]——实验室设备的 4 大分类光学/电子/机械/化学是高校实验室的标准分类。State activeCat: number 0默认选中全部——onClick切选中态activeCat idx ? 深青底白字 : 白底灰字。假筛选同系列其他 Chip——demo 未联动过滤真实项目应加filteredDevices()。borderRadius(16)胶囊形——系列标准 Chip。三、SectionTitle DeviceGrid2 列 Grid本页核心SectionTitle 是设备列表标题无右侧链接——简化版。DeviceGrid 是 2 列 Grid 6 台设备Builder DeviceGrid() { Grid() { ForEach(this.devices, (d: Device) { GridItem() { Column({ space: 8 }) { Row() { Text(d.emoji).fontSize(30) } .width(100%).height(60) .backgroundColor(C.cardSoft).borderRadius(D.rSm) .justifyContent(FlexAlign.Center) Text(d.name).fontSize(13).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }).width(100%) Text(d.spec).fontSize(11).fontColor(C.textDim).width(100%) Row() { Blank() Text(d.status).fontSize(11).fontColor(d.statusColor).fontWeight(FontWeight.Medium) } .width(100%) } .width(100%) .padding(10) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: d.name }); }) } }, (d: Device) d.id.toString()) } .columnsTemplate(1fr 1fr) .columnsGap(12) .rowsGap(12) .width(100%) }3.1 6 台设备的数据private devices: Device[] [ { id: 1, emoji: , name: 高倍显微镜, spec: 1000x · 偏光, status: 空闲, statusColor: C.ok }, { id: 2, emoji: ⚡, name: 示波器, spec: 200MHz · 4通道, status: 使用中, statusColor: C.warn }, { id: 3, emoji: , name: 高效液相色谱仪, spec: UV检测器, status: 空闲, statusColor: C.ok }, { id: 4, emoji: , name: 万能试验机, spec: 100kN, status: 维护中, statusColor: C.danger }, { id: 5, emoji: , name: 光谱分析仪, spec: 200-800nm, status: 空闲, statusColor: C.ok }, { id: 6, emoji: , name: 网络分析仪, spec: 9kHz-6GHz, status: 使用中, statusColor: C.warn } ];6 台设备覆盖 4 大分类设备分类型号规格状态 高倍显微镜光学1000x · 偏光空闲绿⚡ 示波器电子200MHz · 4通道使用中橙 高效液相色谱仪化学UV检测器空闲绿 万能试验机机械100kN维护中红 光谱分析仪光学200-800nm空闲绿 网络分析仪电子9kHz-6GHz使用中橙6 台设备的真实实验室设备显微镜/示波器/色谱仪/试验机/光谱仪/网络分析仪——都是真实的科研仪器高校实验室常见设备——设备列表 真实科研环境。3 状态分布空闲 3 台绿/使用中 2 台橙/维护中 1 台红——多空闲、少维护是实验室常态。3.2 3 状态色映射空闲→C.ok绿可预约使用中→C.warn橙被占用维护中→C.danger红不可用3 状态 3 色——**空闲绿/使用橙/维护红**是设备管理/会议室预约的标准色映射——与 App 14 场地空闲/已约满、App 22 投票进行中/已结束同款状态色编码。3.3 设备卡的 4 层结构每张设备卡 4 行从上到下60 高 emoji 图标块C.cardSoft浅灰底 /⚡ 等设备名称13sp 深色 maxLines(1)截断型号规格11sp 灰——1000x · 偏光等状态11sp 状态色 加粗 右对齐Blank()Blank()把状态推到右下角——名称左上、状态右下的视觉节奏。maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })设备名截断——高效液相色谱仪 7 个字在 1 列内放不下——Ellipsis省略实际显示高效液相色…——Grid 卡片文字必须截断列宽有限。3.4 2 列 Grid 布局columnsTemplate(1fr 1fr)columnsGap(12)rowsGap(12)——2 列等宽 12vp 间隙——6 台设备排成 3 行 2 列。2 列 Grid vs 1 列列表2 列本页——信息密度高一屏看 4 台、紧凑1 列App 21/22——信息完整每行有按钮、宽松设备列表用 2 列 Grid是合理选择——设备卡信息少名称规格状态2 列紧凑展示——信息少的列表用 Grid、信息多的列表用 List。四、State 与紧凑首页设计HomeTab 只有1 个 StateactiveCat分类 0-4。其余数据private不可变。App 23 首页是系列最紧凑的设备列表3 块——**设备预约 找设备 → 看详情 → 预约**的任务流——首页只负责找设备列表展示。对比 App 14 运动场地预约首页5 块Hero/入口/周图/场地/排行——App 14 首页丰富因为运动是内容型场地推荐需要营销——App 23 首页紧凑因为实验室设备是任务型用户知道要什么设备——**业务类型决定首页复杂度**再次验证。五、设备状态与预约意愿的联动App 23 首页的 3 状态直接决定用户要不要点进详情预约状态 → 用户行为空闲绿→ 可以预约 → 点进详情 → 选时段 → 预约使用中橙→ 被占用了 → 可能等/换设备维护中红→ 坏了 → 换设备/联系管理员状态 预约意愿的引导——用户扫一眼 Grid 就知道哪台能约——状态色可视化 高效筛选。真实项目的状态扩展已锁定被特定用户预约但还没用预约中未来时段已被预约待维护快需要维护状态机从 3 态扩展为 6 态——UI 只需改状态名 状态色数据结构不变——状态可扩展性是设备管理的基础。六、设备状态色与系列状态色的统一体系App 23 首页的 3 状态色空闲绿/使用中橙/维护中红与系列其他 App 的状态色形成统一体系状态语义颜色出现位置空闲/可用/进行中绿C.okApp 23 设备、App 14 场地、App 22 投票使用中/待处理/即将结束橙C.warnApp 23 设备、App 22 投票、App 15 环保维护/已满/已结束红C.dangerApp 23 设备、App 14 场地、App 16 商城绿可用、橙警示、红不可用是系列统一的状态色语义——读者在多个 App 间切换不会混淆同一颜色永远代表同一类语义——跨 App 状态色一致性是设计系统的一致性原则。状态色映射的工程实现App 23 设备卡// 数据携带颜色当前实现 { status: 空闲, statusColor: C.ok } { status: 使用中, statusColor: C.warn } { status: 维护中, statusColor: C.danger }真实项目应抽成状态 → 颜色映射表const STATUS_COLOR { 空闲: C.ok, 使用中: C.warn, 维护中: C.danger, 已锁定: C.textDim, 待维护: C.warn }; // 数据只存 status 字符串颜色查表映射表代替数据携带颜色——新增状态只改映射表一处数据与视觉解耦。七、2 列 Grid vs 1 列 List 的选择标准App 23 设备卡用 2 列 Grid信息紧凑对比系列其他列表App主列表布局卡片信息量21 问卷问卷卡1 列 List中emoji标题状态22 投票投票卡1 列 List中emoji标题状态剩余23 实验室设备卡2 列 Grid低emoji名称规格状态13 音乐项目卡1 列 List高emoji标题标签进度条Grid vs List选择标准信息少 数量多设备 6 台、规格短→2 列 Grid一屏看更多信息多 操作多项目有进度条按钮→1 列 List每行完整展示卡片信息量决定布局——信息少的卡片适合 Grid高密度、信息多的适合 List完整性。2 列 Grid的注意点卡片宽度减半 →文字必须截断maxLines(1) Ellipsis状态/操作按钮空间小 →只用状态文字不用按钮点击区域小 →整卡可点GridItem onClickApp 23 设备卡的Grid 三原则截断/无按钮/整卡可点是 2 列 Grid 的标准实践。八、设备列表的搜索与筛选扩展App 23 首页有分类 Chip光学/电子/机械/化学但无搜索框——真实设备管理应有**分类 搜索双筛选**// 真实项目的双筛选 private filteredDevices(): Device[] { let result this.devices; if (this.activeCat 0) { const catName this.cats[this.activeCat]; result result.filter(d this.catOf(d.id) catName); } if (this.keyword.trim() ! ) { result result.filter(d d.name.includes(this.keyword.trim()) || d.spec.includes(this.keyword.trim())); } return result; }分类 搜索双条件过滤——activeCat分类keyword搜索词两个 State 组合过滤——多条件筛选是设备/商品列表的标准。真实设备的分类映射// 设备 → 分类映射 const DEVICE_CATEGORY: Recordnumber, string { 1: 光学, 2: 电子, 3: 化学, 4: 机械, 5: 光学, 6: 电子 };分类映射表让catOf()一行查表——设备与分类的关系数据化当前 demo 的 devices 数组没有 category 字段是假分类——分类字段缺失是假筛选的根源——真实项目每个设备应有category字段。九、设备卡的信息密度与科研设备命名App 23 的 6 台设备卡的信息密度设计每张卡 4 行信息的层级emoji 图标30sp——视觉锚点最高信息密度设备名13sp 加粗——核心识别规格11sp 灰——补充参数状态11sp 状态色——行动信号图标 名称 规格 状态4 层——从最直观到最行动的视觉递减——科研设备卡的信息架构。科研设备命名的专业性高倍显微镜1000x · 偏光高效液相色谱仪UV 检测器万能试验机100kN光谱分析仪200-800nm网络分析仪9kHz-6GHz型号规格都是真实科研参数倍率/通道/检测器/量程/频段——专业参数 科研可信度——用户科研人员一眼看懂这设备能干什么——设备卡是给专家看的对比 App 16 商品卡给消费者看价格设备卡给科研人员看参数。十、任务型首页的 3 原则App 23 首页是任务型首页的范本——3 个设计原则原则 1分类优先Chip 在最上方——用户第一件事是找分类光学/电子/机械/化学——分类 任务的第一步。原则 2列表高效2 列 Grid 一屏 4 台——用户快速扫设备——一屏看到尽可能多。原则 3状态信号状态色右对齐——用户判断哪台能约——状态 决策依据。**分类 → 扫视 → 决策**是任务型首页的用户路径——与内容型首页App 19 摄影欣赏→收藏的差异——任务型用户目的明确、内容型用户浏览探索。读者做任务型首页时 3 原则自查分类在最上面了吗列表一屏够多吗关键状态一眼可见吗十一、总结App 23 首页解析完毕。3 块紧凑结构 5 分类 Chip 2 列 Grid 6 设备卡3 状态色是核心组件。设备状态 → 预约意愿的联动是设备预约场景的特色。**2 列 Grid 紧凑设备列表是任务型首页的范本。Grid vs List 选择标准、分类映射表、任务型首页 3 原则**是真实项目的关键改进。