it-swarm.cn

您应该如何显示手风琴展开了?

当您拥有手风琴时,您需要某种方式显示当前状态

有许多不同的处理方法,每种方法都由许多受关注的网站和框架使用。因此,目前尚不清楚哪种方法最适合在哪种情况下使用。

什么时候最好使用哪种方法?对此进行任何研究的加分点。


完全没有符号,只有颜色表示扩展

用于Android)的Gmail使用了此功能,但是这里有一些更清晰的示例:

enter image description hereenter image description here


左右的人字形

这些是BBC使用的 全球体验语言

enter image description here


右侧的上下人字形

这些用于 Android设计指南文档 和Silverlight 。:

enter image description hereenter image description here


左和右人字形

enter image description here


右侧的加号(+)和减号(-)

这在ExtJS中用作默认值

enter image description here


左侧的加号(+)和减号(-)

enter image description here

77
JohnGB

我花了很多时间研究手风琴的各种选择(部分是写问题),尽管不是确定的,但我目前的想法如下:

左与右

如果您的手风琴中有checkboxes,则将指示器放在复选框的另一侧是有意义的。这主要是为了避免许多指示器彼此非常接近的情况,但是这也使得用户在选择一个选项时无意中选择了另一个选项。

这与为什么星形选择器和复选框在gmail(对于Android)中位于相反侧的原因类似。
enter image description here

否则,左边或右边的复选框似乎主要是设计决定。在设计方面,我赞成使用权利,因为它可以使用户对内容保持关注。

负担

如果没有图标作为指示器,则几乎没有迹象表明您在看手风琴,而不是简单的清单。对于许多人来说,这可能不是问题,但是我会建议使用某种形式的指示器。这应该使它更易于使用,但要花一些(很可观的代价)是要拥有繁忙的设计。

易于扫描和理解

对我来说,使用上/下或左/右人字形一直是个难题。我永远不确定向上的人字形是状态还是动作,阅读障碍的人很难分辨出两者之间的区别。 左/下(右边的指示器)或右/下(左边的指示器)似乎引起最少的混乱,同时仍然易于扫描。

+ 和 - 在执行操作方面最清晰,但是在内部扫描中,在快速扫描时,分辨它们的速度较慢。因此,如果扫描速度很重要,我将避免使用这些方法。

颜色和色调

这是最简单的方法,在该方法中,使用颜色(或色相)表示某项已展开是一个好主意。它可能非常微妙,并且可以区分折叠项和展开项。

Google在其Android)设计指南中有些微不足道,但我建议您更清楚地说明一下。

enter image description here

9
JohnGB

我建议结合这些:

  • 人字形在右边(更自然,尤其是在触摸时,但如果将其放在左边则没有冒犯性)-当然,整个条形都应该是可单击的以扩展/收缩-不仅仅是人字形
  • 缩进较低级别
  • 背景颜色(较低的水平则较浅)
  • 阴影(显示较低的级别在较高的级别之后/下方)
  • 可选:在右侧展开/收缩文本

我相信这种组合真的很不错,因此没有必要只选择一种,而所有这些都会使设计对用户更加清晰。

18
Dominik Oslizlo

这是使讨论不断进行的一个。我看到的是有关手风琴菜单中系统状态的最佳表示形式的问题。 Nielsen的10种可用性启发式方法可显示系统状态。以下是我对每种选择的理解:

完全没有符号,只有颜色表示扩展:

颜色表示的状态

最小的设计,适合普通的Web用户(足够聪明的人知道如何在网页上导航的人)。虽然您的第二个示例(网络日志工具)与gmail示例不同。 Gmail使用3种颜色,选择=绿色,主菜单项=深灰色,子菜单项=浅灰色。而该博客仅使用2种颜色。我觉得3色系统比2色系统有更好的号召性。

人字形:

人字形/箭头表示的状态。

就个人而言,我更喜欢left&down而不是right&down和up&down。

p&down需要花费大量时间来理解。上升是否意味着标题上升以显示内容?还是内容在标题中向上滑动?

right&down可以直接理解(IMO),右边指向标题,向下指向标题栏的内容。

left&down是我的首选。它们具有正确的权利和权利,但不一定在您看来。您可以通过浏览右端的V形来查看状态,也可以继续阅读左端的标题。

加号(+)和减号(-):

用符号+/-表示的状态

与人字形相同的论点是I 首选右端放置 +/-符号,因为它们存在,但在外围且不一定需要引起我的注意。


您错过的一种替代方法是:双重强制状态,将颜色与V形符号/正负符号结合使用。

现在,在人字形,+ /-或条形颜色之间进行选择对我来说更像是一个设计决策。但是,我首先要尝试看看双重强制执行是否可用。如果不是这样,我会使用V形符号/减号来创建一个最小的主题(如果您不使用太多颜色),并且如果我想要一个以颜色为中心的最小设计(其中您有很多颜色但图标不多),则选择颜色/符号。

6
rk.

我个人最喜欢的是这些,但并非出于上述任何原因

enter image description hereenter image description here

在第一个中,除了背景色以外,很明显这些项目是从它们上方的项目中放下来的,因为子项目都缩进了

在第二个例子中,很明显该项目和它下面的文本属于一起,这是因为与所有其他示例不同,它们之间没有分隔符。同样,不同的背景色也很重要,表示已选中。

老实说,我什至没有注意到哪个示例的箭头指向上,下或超出屏幕,甚至根本没有箭头。真正重要的是能够一目了然地分辨出哪些项目组合在一起,作为它们上方项目的子菜单。因此,例如,这一个:

enter image description here

太可怕了子项目具有相同的背景,相同的字体,相同的缩进等。

6

+1左和右V形

这是一个常用的UI符号,大多数人会从他们的经验中认识到它。

3
Sohan

我认为向左下方的箭头效果最好,+ s和-s很烦人,会使您的大脑困惑。我喜欢左侧的东西,但我惯用右手,因此可能会产生影响。而且指向下方或对面的箭头都很好,您通常可以轻松理解它们的含义。也应该有一个缩进,颜色应该具有中等的对比度,例如open = white和closed = light grey。

2
pythonlover

来自文章: 在何处放置图标,即手风琴菜单图标

“有两种常用的折叠图标:减号和X图标。用户可能会误解减号图标,因为它通常表示删除或删除。当用户折叠菜单时,用户不应感到丢失了菜单选项。

X图标代表更好的折叠效果,因为它通常用于关闭模式窗口。当用户折叠菜单时,他们是在关闭菜单而不丢失。这更符合用户的行为和他们的期望。”

2
Trebles57

使用将近20年的学习习惯,使用Windows,尤其是Windows资源管理器,并在许多树木中浏览整个网络:左侧[+]和[-]。

您将确保所有用户都能识别这些符合人体工程学的符号。

并注意左侧的箭头,它是移动界面的新功能,用于解释后面是否有页面,因此请保留此行为的箭头。我同意一些著作,上下箭头或上下箭头都感到困惑。 ..so,如果您每个人都需要花一点时间,则可以使用界面。 ...选择不好.

1
pierre lebailly

只需看一下 此UX文章 有关手风琴菜单的位置以及Icon的位置。这将告诉您下一个选择是最好的:

enter image description here

0
Userflow