UI设计师必看！5个章节教你系统掌握Group组件设计

在我们构建页面结构时，有一种组件总是悄悄出现，却从未真正被定义清晰，它像标题，却不仅仅是标题，我们称它为 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 打破了「标题仅作标识」的固有思维，将「分组标题」与「交互控件」巧妙融合。它让模块既清晰可辨，又触手可及，极大提升用户浏览效率与操作体验。

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

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

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