第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

如何设计出完美的折叠面板?(4)

时间:2017-07-07 08:57来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
折叠面板通常用于卡片,根据观察口的宽度,卡片可能相当广泛,因此有些用户拼命尝试图标,你的一些用户将被用来通过点击空白区域栏来收缩和展开卡

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

QQ截图20170707084422

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

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

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

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

QQ截图20170707084417

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

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

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

QQ截图20170707084412

QQ截图20170707084407

QQ截图20170707084402

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

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

  总结Link

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕