手风琴和标签的区别

difference between accordion and tabs

本文关键字:区别 标签 手风琴      更新时间:2023-09-26

手风琴相对于制表符有什么好处?

虽然它们都在许多Javascript UI框架/库中得到支持,您可以在这里看到示例:http://jqueryui.com/demos/

对我来说,它们的目的是相同的(隐藏复杂性),除了手风琴更适合"连续阅读",它更容易快速进入下一节,而制表符似乎更"随机访问"

它们的好处是什么,什么时候我应该选择其中一个而不是后者?(从用户体验的角度来看,我不关心水平/垂直和html代码的差异)

根据UX上的repost, 手风琴有固定的高度,它们必须适合整个屏幕(见示例)-这很重要,因为随时可以轻松选择不同的部分(我们不想向上/向下滚动以选择我认为的其他部分)。

另一方面,选项卡可以有不同的高度(尽管更好的主意是将它们固定并提供滚动条)。选项卡标头与手风琴标头不同,选择后会留在原来的位置。

手风琴最适合移动设备,在那里没有足够的空间容纳水平标签和垂直标签需要用户旋转他的头来阅读标题。在这种情况下,"移动页眉"是必要的罪恶。

与选项卡相比,手风琴的一个优点是,如果您将信息分成有序的步骤或内容,从而导致下一个内容等等,当您完成阅读时,查看下一部分的选项卡就在您的眼睛所在的位置,而不必回到顶部并单击下一个选项卡。这看起来可能没什么大不了的,但这与垂直堆叠的表单比水平对齐的表单更容易使用和更少混淆的原因相似。这并不总是最好的选择,但是当你对内容进行排序时,阅读它会容易得多,如果你想继续阅读,就在你的眼睛已经看到的地方点击下面。

它们在美学上的区别在于制表符表示内容部分的清晰分隔符,而手风琴表示内容部分的分隔符。

所有这些+

手风琴是动画的,而标签页不是。既然手风琴很蹩脚,动画也很烦人……标签是你的朋友。只要确保URL定义了打开哪个选项卡。