在我们构建页面结构时，章节组件有一种组件总是教系悄悄出现  ，却从未真正被定义清晰，统掌它像标题，设计师必设计却不仅仅是章节组件标题
，我们称它为 Group ，教系当我们试图对 Group 进行重新定义与收敛时
，统掌总会被它无处不在、设计师必设计却又难以言说的章节组件“通用性”困扰。今天，教系就让我们一起聊聊这个常被低估，统掌却能显著提升交互效率的设计师必设计组件 —— Group
。

一 、章节组件Cell vs Group ：本质差异在哪里？教系

在大多数 App 中 ，Cell（单元格）是最基础也最常见的组件之一 
，它用来承载信息或操作项，比如：设置项
 、订单条目
、联系人信息 。

Group 和 Cell 互相独立，但又可以组合在一起，它并不是 Cell 的变体
，你可以理解为 Group 是 Cell 的“分组标题+控制中心”，是一种承载内容模块标题与操作控件的基础组件 。

1. 分组标识：Group 主要负责 Title ，清晰告诉用户「这里是一段新的内容／功能区域」
2. 内容容器 ：下层包含的内容可以是 Cell，也可以是图文混排、功能卡片甚至是复杂的自定义内容
3. 操控入口：Group 可内嵌按钮 、筛选、搜索 、视图切换等控件 ，用户无需跳转，在标题区即可一键操作

Group 的核心价值在于 ：

1. 提升信息组织性：帮助用户快速理解模块内容
2. 加速任务流转：筛选、搜索和管理模块内的内容触手可及

一句话理解：Cell 是信息的「载体」 ，Group 则是信息的「组织者」和「操控者」 。

二、Group 的分类与特性

根据内容复杂度与交互需求的不同，Group 可以被归纳为四种通用形态
：

静态分组

1. 特性：仅展示固定信息，无交互状态
2. 常见场景：内容页模块划分、个人中心中功能入口区分 、表单模块划分

可操作分组

1. 特性 ：含交互控件（“查看更多”跳转 、筛选、切换器、搜索...)
2. 常见场景 ：表单、内容页

可折叠分组

1. 特性 ：支持展开/收起操作  ，需在折叠态保留摘要信息（如统计数值或内部内容的摘要）
2. 常见场景：设置页高级选项、评论区/任务列表折叠预览

卡片式分组

1. 特性：圆角卡片包裹，强调模块聚合 ，视觉聚焦
2. 常见场景 ：功能分类卡片的展示（如“我的求购”）、内容预览（如聊天室）

三 、设计原则

原则一：明确性优先

关键词
：一眼看懂 ，一步理解
。

Group 的首要职责是告诉用户「模块分区和主要任务」，尤其在信息密集或流程复杂的页面中，这种模块标识能力尤为重要 。

建议：

1. 模块标题（Title）必须简洁、明确 ，避免冗长句式
2. 若需补充说明
   ，应使用副标题分层表达
3. 操控区（按钮 、筛选器）需命名清晰，表达一致性行为预期

原则二
：操作聚焦

关键词
：少即是多，专注主路径。

Group 常见误区 ：一个 Group 里同时出现 3
、4 个按钮，界面一片杂乱，导致视觉冗余
，用户无法迅速锁定关键操作，交互挫败，误触率飙升。

建议：

1. 先思考核心，这个模块用户最重要的需求是什么
   ，围绕它做减法 ，只保留必要操作
2. 建议整体 ≤2 个主操作
3. 超出操作建议下沉至内容区域或二级页面

原则三：视觉一致性

关键词  ：统一控件样式  ，减少认知成本

多个 Group 出现在同一页面时，若标题字体、按钮色彩
、控件排布不一致 ，会降低用户的预期体验和整体界面秩序感。

建议：

1. 制定统一的尺寸、色彩、状态规范
2. 卡片风格、分割线 、背景色不可随意变动

四 、Group 组件结构拆解

Left 容器

1. Title
   ：模块名称
2. Lead Icon ：图标辅助识别
3. Avatar：头像
4. Trailing_Button ：紧跟标题的操作，如“添加” 、“编辑”
5. Trailing_IconButton：帮助说明或更多信息（如“ ？”）
6. Summary ：模块补充说明 ，概述模块内容或状态

Right 容器

1. 基础控件
    ：Button
2. 拓展控件

Label

1. 补充说明 ，提示用户何时/如何使用该模块，一般用于圆角卡片风格 Group

五、组件食用指南（Echo 版）

先感受一下最终落地的组件实际的使用效果吧～

1. 类型

基础样式

组件预设的基础样式为左侧 Title+右侧 Button ，通过组件的开关属性可组合成多种样式，Left 容器每次只可选择 1 种元素与标题组合使用 。

圆角卡片样式

需要更加强调模块内容
，可选择圆角卡片样式，常用于功能分类卡片的展示和内容预览。

2. 尺寸

1. 14pt ：常用于表单/管理型内容，信息密度高
2. 16pt 
   ：常用于内容流/社区场景，便于快速扫读

3. 组合与拓展性

在 Group 的基础组件上
，Right 容器可与多种交互控件组合嵌套，形成业务组件 ，具备高度扩展性 ，适配多样化的需求 ：

在 Figma 右上角通过 Swap instance 就可以找到 Group 的业务组件
，根据实际需求在 className 属性中选择合适的功能样式进行调用就好啦～

结语

Group 打破了「标题仅作标识」的固有思维，将「分组标题」与「交互控件」巧妙融合。它让模块既清晰可辨 ，又触手可及，极大提升用户浏览效率与操作体验 。

下次你在设计页面结构时，不妨问自己：

这个模块
，能不能给标题装上一个“操控台” ？

能不能让用户在这里 ，直接完成目标操作？

作者
：Echo Design

文章推荐：

晨读｜陈小玉：与不快活喜悦爱好的人相处

网站流量指标UV、PV和IP分别指什么？详解UV和PV 、UV和IP的关系

抖音变身脚艺人bgm是甚么 ？抖音变身脚艺人bgm音乐是甚么曲子？

我能往你家过年吗是甚么梗 ？抖音上我能往你家过年吗是甚么意思
？

蔡旭 ：六合间有一座番薯林公像

全平易近迷宫礼包码兑换码除夜全最新

互联网DAU、MAU是什么意思？详解DAU/MAU指标及DAU和MAU查询工具

愿你能贯穿连接月亮般的心是甚么歌 ？抖音上愿你能贯穿连接月亮般的心歌曲是甚么名字
？

王汝刚：高博文的“双酿团”

长安胡想结实队气焰推荐攻略

互联网DAU、MAU是什么意思 ？详解DAU/MAU指标及DAU和MAU查询工具

妈妈的好除夜儿甚么梗？抖音上妈妈的好除夜儿甚么意思?