在我們構(gòu)建頁面結(jié)構(gòu)時(shí)，有一種組件總是悄悄出現(xiàn)，卻從未真正被定義清晰，它像標(biāo)題，卻不僅僅是標(biāo)題，我們稱它為 Group，當(dāng)我們?cè)噲D對(duì) Group 進(jìn)行重新定義與收斂時(shí)，總會(huì)被它無處不在、卻又難以言說的“通用性”困擾。今天，就讓我們一起聊聊這個(gè)常被低估，卻能顯著提升交互效率的組件 —— Group。

一、Cell vs Group：本質(zhì)差異在哪里？

在大多數(shù) App 中，Cell（單元格）是最基礎(chǔ)也最常見的組件之一，它用來承載信息或操作項(xiàng)，比如：設(shè)置項(xiàng)、訂單條目、聯(lián)系人信息。

Group 和 Cell 互相獨(dú)立，但又可以組合在一起，它并不是 Cell 的變體，你可以理解為 Group 是 Cell 的“分組標(biāo)題+控制中心”，是一種承載內(nèi)容模塊標(biāo)題與操作控件的基礎(chǔ)組件。

1. 分組標(biāo)識(shí)：Group 主要負(fù)責(zé) Title，清晰告訴用戶「這里是一段新的內(nèi)容／功能區(qū)域」
2. 內(nèi)容容器：下層包含的內(nèi)容可以是 Cell，也可以是圖文混排、功能卡片甚至是復(fù)雜的自定義內(nèi)容
3. 操控入口：Group 可內(nèi)嵌按鈕、篩選、搜索、視圖切換等控件，用戶無需跳轉(zhuǎn)，在標(biāo)題區(qū)即可一鍵操作

Group 的核心價(jià)值在于：

1. 提升信息組織性：幫助用戶快速理解模塊內(nèi)容
2. 加速任務(wù)流轉(zhuǎn)：篩選、搜索和管理模塊內(nèi)的內(nèi)容觸手可及

一句話理解：Cell 是信息的「載體」，Group 則是信息的「組織者」和「操控者」。

二、Group 的分類與特性

根據(jù)內(nèi)容復(fù)雜度與交互需求的不同，Group 可以被歸納為四種通用形態(tài)：

靜態(tài)分組

1. 特性：僅展示固定信息，無交互狀態(tài)
2. 常見場(chǎng)景：內(nèi)容頁模塊劃分、個(gè)人中心中功能入口區(qū)分、表單模塊劃分

可操作分組

1. 特性：含交互控件（“查看更多”跳轉(zhuǎn)、篩選、切換器、搜索...)
2. 常見場(chǎng)景：表單、內(nèi)容頁

可折疊分組

1. 特性：支持展開/收起操作，需在折疊態(tài)保留摘要信息（如統(tǒng)計(jì)數(shù)值或內(nèi)部?jī)?nèi)容的摘要）
2. 常見場(chǎng)景：設(shè)置頁高級(jí)選項(xiàng)、評(píng)論區(qū)/任務(wù)列表折疊預(yù)覽

卡片式分組

1. 特性：圓角卡片包裹，強(qiáng)調(diào)模塊聚合，視覺聚焦
2. 常見場(chǎng)景：功能分類卡片的展示（如“我的求購”）、內(nèi)容預(yù)覽（如聊天室）

三、設(shè)計(jì)原則

原則一：明確性優(yōu)先

關(guān)鍵詞：一眼看懂，一步理解。

Group 的首要職責(zé)是告訴用戶「模塊分區(qū)和主要任務(wù)」，尤其在信息密集或流程復(fù)雜的頁面中，這種模塊標(biāo)識(shí)能力尤為重要。

建議：

1. 模塊標(biāo)題（Title）必須簡(jiǎn)潔、明確，避免冗長(zhǎng)句式
2. 若需補(bǔ)充說明，應(yīng)使用副標(biāo)題分層表達(dá)
3. 操控區(qū)（按鈕、篩選器）需命名清晰，表達(dá)一致性行為預(yù)期

原則二：操作聚焦

關(guān)鍵詞：少即是多，專注主路徑。

Group 常見誤區(qū)：一個(gè) Group 里同時(shí)出現(xiàn) 3、4 個(gè)按鈕，界面一片雜亂，導(dǎo)致視覺冗余，用戶無法迅速鎖定關(guān)鍵操作，交互挫敗，誤觸率飆升。

建議：

1. 先思考核心，這個(gè)模塊用戶最重要的需求是什么，圍繞它做減法，只保留必要操作
2. 建議整體 ≤2 個(gè)主操作
3. 超出操作建議下沉至內(nèi)容區(qū)域或二級(jí)頁面

原則三：視覺一致性

關(guān)鍵詞：統(tǒng)一控件樣式，減少認(rèn)知成本

多個(gè) Group 出現(xiàn)在同一頁面時(shí)，若標(biāo)題字體、按鈕色彩、控件排布不一致，會(huì)降低用戶的預(yù)期體驗(yàn)和整體界面秩序感。

建議：

1. 制定統(tǒng)一的尺寸、色彩、狀態(tài)規(guī)范
2. 卡片風(fēng)格、分割線、背景色不可隨意變動(dòng)

四、Group 組件結(jié)構(gòu)拆解

Left 容器

1. Title：模塊名稱
2. Lead Icon：圖標(biāo)輔助識(shí)別
3. Avatar：頭像
4. Trailing_Button：緊跟標(biāo)題的操作，如“添加”、“編輯”
5. Trailing_IconButton：幫助說明或更多信息（如“？”）
6. Summary：模塊補(bǔ)充說明，概述模塊內(nèi)容或狀態(tài)

Right 容器

1. 基礎(chǔ)控件：Button
2. 拓展控件

Label

1. 補(bǔ)充說明，提示用戶何時(shí)/如何使用該模塊，一般用于圓角卡片風(fēng)格 Group

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

先感受一下最終落地的組件實(shí)際的使用效果吧～

1. 類型

基礎(chǔ)樣式

組件預(yù)設(shè)的基礎(chǔ)樣式為左側(cè) Title+右側(cè) Button，通過組件的開關(guān)屬性可組合成多種樣式，Left 容器每次只可選擇 1 種元素與標(biāo)題組合使用。

圓角卡片樣式

需要更加強(qiáng)調(diào)模塊內(nèi)容，可選擇圓角卡片樣式，常用于功能分類卡片的展示和內(nèi)容預(yù)覽。

2. 尺寸

1. 14pt：常用于表單/管理型內(nèi)容，信息密度高
2. 16pt：常用于內(nèi)容流/社區(qū)場(chǎng)景，便于快速掃讀

3. 組合與拓展性

在 Group 的基礎(chǔ)組件上，Right 容器可與多種交互控件組合嵌套，形成業(yè)務(wù)組件，具備高度擴(kuò)展性，適配多樣化的需求：

在 Figma 右上角通過 Swap instance 就可以找到 Group 的業(yè)務(wù)組件，根據(jù)實(shí)際需求在 className 屬性中選擇合適的功能樣式進(jìn)行調(diào)用就好啦～

結(jié)語

Group 打破了「標(biāo)題僅作標(biāo)識(shí)」的固有思維，將「分組標(biāo)題」與「交互控件」巧妙融合。它讓模塊既清晰可辨，又觸手可及，極大提升用戶瀏覽效率與操作體驗(yàn)。

下次你在設(shè)計(jì)頁面結(jié)構(gòu)時(shí)，不妨問自己：

這個(gè)模塊，能不能給標(biāo)題裝上一個(gè)“操控臺(tái)”？

能不能讓用戶在這里，直接完成目標(biāo)操作？

作者：Echo Design