折叠面板怎么设计？展开状态、记忆与键盘操作

折叠面板适合降低信息密度，但不应隐藏完成任务所需的答案。先区分可折叠的补充说明与必须直接展示的内容，再决定单开还是多开。用界面设计协作将桌面和窄屏状态放在一起，能提前发现面板展开后页面跳动的问题。

哪些内容值得折叠

帮助中心的详细解释、筛选条件和设置项通常适合折叠；价格、提交结果、关键警告和当前错误不应默认隐藏。标题本身要能概括内容，避免用户必须逐个打开才能知道面板里是什么。

单开、多开和默认状态

默认展开第一项不等于默认展示最重要答案。应根据用户任务决定初始状态；当面板内有校验错误或未保存修改时，重新进入不能悄悄折叠掉提示。

展开后的高度与滚动

长内容可以在面板内部滚动，但滚动条、当前标题和收起操作要保持可发现。不要让面板展开后把用户推到页面底部，必要时在展开前保留标题位置。图表、代码和表格在窄屏下应允许横向查看而不挤压文字。

键盘与读屏

标题使用按钮语义，焦点顺序跟随内容顺序；展开状态通过可读属性同步，箭头图标只做辅助。按 Enter 或空格切换，按 Tab 进入展开内容，避免焦点落在不可见区域。

原型中至少准备默认、展开、收起、长内容和键盘焦点五种状态，并在窄屏画板验证内容不会被底部操作遮挡。

标题需要承担导航作用

面板标题最好包含对象和问题，例如“导出前如何检查字体”，不要只写“更多信息”。标题过长时可以换行，但展开箭头和焦点位置仍要稳定。面板内的链接、按钮和表单控件应按内容顺序排列，收起后不能留下不可见焦点。

如果面板中包含未保存输入，收起前提醒是否保留；切换到另一面板时不要自动丢弃。用户从搜索结果跳到页面内某个答案时，可以默认展开目标面板，并在标题处保留定位效果。

帮助中心的分组方法

把“账号设置、文件权限、导出交付”分成三个面板，每个面板内先给一句摘要，再展开详细步骤。移动端打开权限面板后，底部的“保存”按钮应固定在视口内；桌面端则可让内容自然展开，避免内部滚动层过多。

验收清单

• 标题是否能在收起状态下表达内容？
• 展开后页面滚动位置是否仍能找到当前标题？
• 错误、未保存和键盘焦点是否不会被收起隐藏？
• 单开/多开及状态记忆是否与产品规则一致？

面板与页面链接的关系

当页面链接直接定位到面板内标题时，目标面板应自动展开并把标题置于可见位置。复制链接后在新页面打开，状态是否默认展开要有产品规则；如果链接指向具体答案，不能只滚动到一个仍然收起的标题。

面板中有表格或代码时，展开高度可能远超视口。桌面端可以设置内部滚动，但必须保留标题和收起入口；移动端则优先让页面滚动，避免两层滚动同时存在。长内容折叠前，提醒用户是否有未完成输入。

实现前把面板标题、内容容器、焦点和链接目标写入交互标注；实现后用刷新、返回和复制链接三种方式检查状态是否一致。

组件变体与内容边界

为折叠面板建立默认、悬停、聚焦、展开、禁用和错误六种变体。面板标题长度、图标方向和内容内边距写入组件属性，避免不同页面自行改写后出现跳动。若标题含未读数量，数量变化不应让箭头位置左右移动。

面板内容可以是文字、列表或表单，但每种内容都要指定最小宽度和换行规则。禁止把必须完成的输入放在默认收起且没有提示的面板里；有错误的面板在进入页面时应自动展开。

测试刷新、返回和复制锚点链接，确认状态记忆符合预期。产品若不保存展开状态，就不要让界面暗示它会永久记忆。

展开内容仍需可扫读

展开后的文字使用清晰的小标题、列表和间距，避免把长段落塞进一块可滚动区域。面板标题可以显示数量或更新时间，但不要用数量替代关键信息。用户快速浏览时，即使只看标题也能判断是否需要展开。

多个面板连续展开后，页面很长，目录或锚点仍应能定位到每个标题。面板内的图片、表格和链接要有可读的替代文本，收起后不应留下空白高度。

如果面板内容来自异步请求，展开时显示局部加载，失败时在当前面板提供重试。不要因为一个面板请求失败而把其他已经展开的内容全部收起。

交付时保留状态契约

组件交付不只是一张展开图，还应说明单开或多开、默认状态、记忆范围、内容超长和错误展开规则。状态契约明确后，设计系统和业务页面才不会出现不同的折叠行为。

把链接定位、键盘焦点和无动画替代写在组件说明里，移动端验证再按实际页面内容补充。

检查展开状态的一致性

刷新、后退、分享锚点和切换账号分别验证面板状态。每种入口都要符合产品规则，错误和未保存输入不能因重新渲染而消失；状态不保存时也不要留下“记住展开”的暗示。

用内容优先级决定默认展开

先把文章或设置项按必须立即看到、需要时查看和极少使用三层分类，再决定哪些默认展开。默认状态不是视觉偏好，而是帮助用户快速完成当前任务的导航选择。

评审时让用户只看面板标题回答“这里能解决什么”，再展开内容完成操作。如果标题和摘要不能支持判断，说明分组或文案还需调整。

内容更新后，如果某个面板的标题或锚点变化，旧链接要有兼容策略。面板组件和页面目录采用同一套标题层级，用户才能通过搜索或浏览器查找回到正确答案。

评审记录中同时保存默认、展开和错误态，避免只验收顺利展开的画面。内容、状态和焦点都有证据后，面板才可作为设计系统组件复用。

组件说明还应列出内容更新、权限不足和请求失败三种异步结果。面板保持当前展开位置，错误只影响对应区域，其他面板继续可用；这条规则能避免一个接口故障把整页信息隐藏。