折叠面板通常用于卡片,根据观察口的宽度,卡片可能相当广泛,因此有些用户拼命尝试图标,你的一些用户将被用来通过点击空白区域栏来收缩和展开卡片。其他用户用于没有目的的空白空间服务,根本不用,只会忽略它。只有少数人会期待栏作为该分类的链接。在我们的测试中,空白的空间触发器展开并不容易。 折叠面板不一定只用于导航。它也可以显示或多或少的细节。例如,在PremierLeague.com中的的表格或排行榜表单。(Desktop view Mobile view) 但如果你希望分类标题直接链接到该分类,该怎么办?一个办法是通过在元素边界“提示”的两个视觉上独特的元素——例如用图标和分类标题的不同背景颜色(参见上面的示例)来提高清晰度。在我们的实验中,我们不会注意到期望行为的变化——有些人仍然会点击分类,想知道发生了什么。这样展开的折叠面板中的链接部分看起来会更安全。 满足了吗?我们还没有。如果用户点击图标进行展开,但屏幕上没有足够的空间显示所有子项目,该怎么办?团队中的一些人或许会建议自动向上滚动页面,以确保展开区域显示在屏幕顶部。这是个好主意吗? 每当我们试图控制远离用户时,该决定必须经过深入的测试和考虑。或许用户有兴趣立即查看多个部分,并希望快速跳转这些部分的内容。而不是让用户思考自动滚动或跳转的行为,然后向后滚动恢复以前的状态。只是为了保持原状,看起来不那么突兀,让用户决定必要时,他们可以向下滚动。没有多少用户会希望跳到顶部——不会中断流程,或有一个固定链接到该部分(如果它真的很长)。 在Sony.com中,如果展开了一个部分,用户点击了另一个部分,则展开部分会自动折叠。这种行为在网站之间是不一致的,所以用户不能依赖也不期望这种行为无所不在。Large view. 另一个问题是:如果一个部分已经展开,用户点击另一个部分,是会先折叠还是保持原样?如果第一部分自动折叠,但这并不是用户期望的,所以用户会再次打开它们,但是它们就无法同时扫描或比较两个分类。如果该部分保持展开,他们要主动关闭他们不需要的分类。这两个选项似乎都有合理的用例。 折叠面板的本质是要求自动折叠,但在实用性方面可能不是最佳选择。对于有许多项目的折叠面板,我们倾向于将部分展开,因为在面板关闭和打开的同时,发生跳跃太过麻烦。所以,可以提供“全部折叠”/“全部展开”按钮,这对于设计计划表或详细表格是非常有用。如果没有那么多的项目,该部分会默认折叠,因此将是最小限度的跳转。(请注意,水平折叠面板部分肯定会收缩——保持展开是没有任何意义。) 在The Guardian网站上,一个V字形放在左边,其次是分类标题和空格。整栏触发展开,分类主页作为折叠面板项目中的第一个选项整齐地展示出来。 然后不要介意选择图标的位置,每当折叠面板展开时,都能很容易立地折叠起来。 这种交互不需要鼠标光标或手指的额外移动——就像其他隐藏和显示的交互。这意味着图标的折叠和展开都会在激活时发生变化,但其位置应保持完全相同,从而允许折叠面板的状态能够立即切换。 总结Link (责任编辑:admin) |