界面图鉴
折叠面板Accordion
你可能会问
折叠面板到底是什么？和标签页有什么不一样？
简单来说
一排可以逐个展开收起的标题，把长内容折起来，只在需要时打开一段。
01 · 拆开看看
这一块由什么组成
名字来自手风琴：风箱一格一格，拉开哪格哪格出声。它把长内容折成一排标题，用户按标题「点播」——不点，就只占一行。拆开看：
标题行Header
可点的那一条，写清里面是什么，整行都能点。
展开图标Chevron
右侧的小箭头或加号，转个方向告诉你开没开。
内容区Panel
展开后露出来的正文，收起时完全不占地方。
分隔线Divider
条与条之间的细线，让一排标题看起来是一组。
02 · 常见变体
同一个零件，几种摆法
打开一条，别的自动收起，页面始终短。
可以同时展开好几条，方便对照着看。
去掉边框只留分隔线，嵌在文章里不突兀。
03 · 火眼金睛
这个页面里，哪一块是折叠面板？
三块都在「分段」，但只有一块是上下叠着、点标题才展开的。
点一块试试，看看它叫什么
标签页Tabs
不是它。标签横着排一行，一次只能看一个视图——它是「切换」，不是「展开」。
折叠面板Accordion
就是它！标题一条条竖着叠，点哪条哪条展开，像手风琴的风箱一样拉开合上。
链接列表Link List
不是它。点一条会跳走，页面上什么都不展开。
04 · 用与不用
什么时候该上它
适合
- FAQ、条款这类「问 → 答」的长内容
- 设置页里不常用的高级选项
- 手机上节省纵向空间
先别用
- 用户需要同时对照两段内容——用平铺
- 只有一两段，折起来反而多一步
- 重要信息——折起来等于藏起来
05 · 想一想
一道题，检查眼力
页面上要放十二条常见问题，每条答案两三句话。怎么摆？
对。十二个问题一眼扫完，用户只展开自己关心的那条，页面也不会拉得老长。
十二个标签一行根本排不下，而且标签页适合平级视图，不适合「问题 → 答案」这种结构。
十二条问答全铺开，用户找自己那条得滚三屏。折叠的意义就是让目录先出来。
06 · 说给 AI 听
让 AI 改它时，这样说
说清「单开还是多开」和「默认开哪条」——这两件事 AI 最爱替你拍板。
FAQ 改成折叠面板，默认全部收起
一次只能展开一条，点开新的就把旧的收起
折叠面板标题右侧加一个会旋转的小箭头
把「高级设置」折进一个折叠面板里，默认收起
最容易踩的坑
折叠是在藏东西。用户得先猜里面有什么才会点开——标题写不清，里面的内容就等于不存在。