折叠面板通常用于卡片，根据观察口的宽度，卡片可能相当广泛，因此有些用户拼命尝试图标，你的一些用户将被用来通过点击空白区域栏来收缩和展开卡片。其他用户用于没有目的的空白空间服务，根本不用，只会忽略它。只有少数人会期待栏作为该分类的链接。在我们的测试中，空白的空间触发器展开并不容易。

折叠面板不一定只用于导航。它也可以显示或多或少的细节。例如，在PremierLeague.com中的的表格或排行榜表单。（Desktop viewMobile view）

但如果你希望分类标题直接链接到该分类，该怎么办？一个办法是通过在元素边界“提示”的两个视觉上独特的元素——例如用图标和分类标题的不同背景颜色（参见上面的示例）来提高清晰度。在我们的实验中，我们不会注意到期望行为的变化——有些人仍然会点击分类，想知道发生了什么。这样展开的折叠面板中的链接部分看起来会更安全。

满足了吗？我们还没有。如果用户点击图标进行展开，但屏幕上没有足够的空间显示所有子项目，该怎么办？团队中的一些人或许会建议自动向上滚动页面，以确保展开区域显示在屏幕顶部。这是个好主意吗？

每当我们试图控制远离用户时，该决定必须经过深入的测试和考虑。或许用户有兴趣立即查看多个部分，并希望快速跳转这些部分的内容。而不是让用户思考自动滚动或跳转的行为，然后向后滚动恢复以前的状态。只是为了保持原状，看起来不那么突兀，让用户决定必要时，他们可以向下滚动。没有多少用户会希望跳到顶部——不会中断流程，或有一个固定链接到该部分（如果它真的很长）。

在Sony.com中，如果展开了一个部分，用户点击了另一个部分，则展开部分会自动折叠。这种行为在网站之间是不一致的，所以用户不能依赖也不期望这种行为无所不在。Large view.

另一个问题是：如果一个部分已经展开，用户点击另一个部分，是会先折叠还是保持原样？如果第一部分自动折叠，但这并不是用户期望的，所以用户会再次打开它们，但是它们就无法同时扫描或比较两个分类。如果该部分保持展开，他们要主动关闭他们不需要的分类。这两个选项似乎都有合理的用例。

折叠面板的本质是要求自动折叠，但在实用性方面可能不是最佳选择。对于有许多项目的折叠面板，我们倾向于将部分展开，因为在面板关闭和打开的同时，发生跳跃太过麻烦。所以，可以提供“全部折叠”/“全部展开”按钮，这对于设计计划表或详细表格是非常有用。如果没有那么多的项目，该部分会默认折叠，因此将是最小限度的跳转。（请注意，水平折叠面板部分肯定会收缩——保持展开是没有任何意义。）

在The Guardian网站上，开奖，一个V字形放在左边，其次是分类标题和空格。整栏触发展开，分类主页作为折叠面板项目中的第一个选项整齐地展示出来。

然后不要介意选择图标的位置，每当折叠面板展开时，都能很容易立地折叠起来。 这种交互不需要鼠标光标或手指的额外移动——就像其他隐藏和显示的交互。这意味着图标的折叠和展开都会在激活时发生变化，但其位置应保持完全相同，从而允许折叠面板的状态能够立即切换。

总结

这是一个看似明显的设计模型的漫长的考察。所以我们如何设计出完美的折叠面板呢？我们选择一个图标，指示展开（V形指向下或带加号），使其足够大以适应点击，轻松地将其放置在的右边缘栏中。整个导航栏就会触发展开——在导航栏周围有足够的内边距以切换状态，以及到折叠面板分类中的分类主页链接。