雅虎用户界面博客（YUIBlog）

结果手风琴模式调查

几个月前我们共同拥有的“导航组件我们目前的想法在”手风琴 ，并要求社区的做法Web开发人员和设计师谁看了我的博客采取的一项调查，以帮助我们确定违约，电流和其他准则将其纳入一手风琴模式，并提供深入手风琴锐元件输入。

我有一些时间来审查和研究的结果，我想和大家分享，因为我们的社区写了一个“测试”模式的版本，准备分享它所以没有进一步再见，这里有结果（请注意，这项调查不应被视为严格的科学）。

谁回答

受访者确定自己以下方式：

• 设计师21.4％
• 开发者32.1％
• 杂交（两个设计师和开发人员）42.3％
• 无上述4.2％

术语的区别

在所有受访者以压倒多数同意，

• 手风琴和手风琴菜单意味着同样的事情（73％）
• 手风琴和树控件有两个（89％）不同的事情

许多评论者所描述的手风琴和树木之间沿着这些路线有所不同：“树控件通常意味着一个层次深度一般不与手风琴礼物。”

较小的多数说，手风琴和可折叠面板指的是同一事物（60％）。

这些多数是跨作用相一致。

介绍手风琴

一个稳固的多数（68％），可以说，手风琴的布局水平以及垂直（实际上是很好的模式在网络上证明）。 人们认为，在水平手风琴的标签应当书面垂直和/或旋转。

一个更大的大部分（72％）说，手风琴只能有两个级别（与手风琴和树木之间的区别这个对齐）：

一个微弱多数（53％）表示可能会在其他手风琴手风琴嵌套。 的书面意见建议，问题的措辞使一些人回答，这当然可以，但不一定可取，提出建议，如“如果你充分水沟他们，这将是可能的，但一般一个可怕的想法 - 种喜欢使用有太多的标签和他们分成多个行换行。“

这是在自我的描述的设计和开发了敌对双方的问题之一。 开发商和杂交种57％同意手风琴可以嵌套，而64％的人表示他们的设计师未必。 （无分裂的Aboves 50/50！）

如果要我猜，我会说，开发人员（和杂交种），更密切的联系比用多么的原因可能是表达他，“你能做到这一点...”的角度更多，而设计者可能已经表达更多的一“...但你不应该”的观点。

如何手风琴应该做的

一个微弱的多数（54％）认为，应该为手风琴多于一个事务委员会在允许同时打开。 这两种行为都可以在网上找到，所以我们的印象是，这种行为可能取决于设计空间的限制以及比上一毯子规则的一种方式或另手风琴的目的了。

这个问题也分裂线沿线的身份，但在一个暧昧的方式。 由一个小杂种的首选之一多数面板在给时间的规则，而设计师和开发商和Aboves都不同意，由多个面板稍大多数是好的。

一个更大的大部分（73％）认为，手风琴可以有一个完全封闭的状态（即，它并不总是必要的，有一个面板中打开）。 唯一的异常是，没有突破的Aboves 60％的位置必须始终有一个面板打开。

若干评论者认为，这是一个很好的做法有一个面板默认打开的，为此，要么小组第一位的，一个最最近使用。

另一大部分（76％）认为一个手风琴的整体大小可根据需要更改，而不是被限制在一个一致的大小。 （当然，还有如移动设备，其中可能是一个有效的选择，甚至是设计约束，手风琴保持一致的大小的屏幕背景。）

一个很轻微的，大部分（51％）认为，手风琴应打开点击（而不是悬停）和一个几乎同样大的少数民族（45％）说，它依赖。 有趣的是，只有不到4％的人愿意说出手风琴应开放作为一项规则悬停。

在这个问题上提出的书面意见在思想，好足够的食物，如：

打开一个明确的行动小组应当要求。 如果有多个面板手风琴，悬停开放可能会是一个不和谐的经验。 相反，使用工具提示来传达什么在面板摘要详细信息，并有明确的用户“点击”打开该面板。

取决于每个手风琴配置。

我把这些例子起来[ 多 ， 翻转 ]，因此开发人员可以实际使用“为每个用例的”最合适的。

此外，应选择使用不同的规则与过渡：（一大部分是开放的）或（内容应仅在鼠标悬停打开）。

对于高级用法，一架手风琴，应打开悬停在拖放操作。 在任何其他情况下，你可以不相信悬停是故意的。

无障碍

最后，我们问一个手风琴任何已知的可访问性问题开放式问题捕鱼，获得了很大的很多答案。 （对于我们的例子中的问题，大多数人同意，使得整个标签可以点击的，不只是一个小图标很重要。）

下面是关于与手风琴访问其他Insight取样：

我认为这是安全的假设，手风琴的相互作用是一种先进的互动。 无障碍可能会出现很多问题。

1. 内容是隐藏在面板所以人们可能无法找到它。
2. 对可点击区域的大小或触发打开/关闭面板可能有灵巧的手动问题需要。

手风琴应打开所有面板如果JavaScript不可用（尽管这可能会产生一个“闪烁”，用于JavaScript的除外）。

这取决于是否隐藏面板的内容是在DOM中存在或为在打开的面板检索。 如果被检索，重点需要在新开张的面板上。

嗯，我真的相信标题应点击，特别是如果该元素的内容将被加载使用（就像一个TabView方法）Ajax，但实际情况是，有时开发商（应该有）/（希望）的控制自定义的行为。 这里是清单的例子 ，我2.x中创建一个手风琴锐部件的实现，有可能延长一锐从冒泡的最常用的组件。

我们已经有这样的情况的'标签'的手风琴是一个完整的博客文章的链接，因此无法手风琴点击。 在这种情况下，我们说用JS源成一个图标来进行工作。 提供足够大的图标和/或用快速键后，我没有看到一个大难题...

手风琴控制服务器上的内容很多装修成更小的空间的目的。 由于这是一种视觉的关注，这将是罚款只是一个屏幕阅读器读取的所有内容，而忽略了它是作为一个手风琴显示直观的事实。 这是足够的图标被点击展开一个面板。 有可能是一个配置选项，让整个标签扩展面板，也可以留给了开发人员实施监听器附加到标签，调用一个公共的“开放”或“扩展”功能来添加该功能。

试想，作为一个标签窗口手风琴。 整个面板标签区应是可点击的，但如果它包含其他控件（例如：“罢免”或“关闭”按钮），我建议只标签（文字）是可点击的，或者至少是clikable面积仅扩大到互动控件（包含一个按钮，上面的面积，下面和“之后”按钮标题即应点击）。

释放模式草案

一位评论者质疑调查的人为限制（一个公平的警察，如果你问我）：

我不喜欢这个调查。 这些问题是不够灵活。 作为一名设计师/开发者，我相信所有的界面元素需要进行调整以适应特定的网站或Web应用程序。 黑与白的问题，要求不留项目之间的明显差异的空间。 有些项目需要一个硬性规定，而同样的规则可能对其他应用程序是完全不恰当的。 在大多数情况下，我的回答可能是“看情况”的结果每一个问题。

请放心，该模式将只轻轻建议和锐代码将灵活和强大。 这项调查是不是为了限制人民的选择，而是要收集意见和喜好，因此，即使没有关于硬件和快速的规则反馈是有用的。

我们已经发布了测试版的手风琴模式在雅虎设计模式库。 如果你想给的格局进一步反馈，在一个自由格式的方式，请下降或浏览相关论坛的讨论。

查找谈话： bloglines | Technorati的

共享和扩展： 书签和书签 | Digg它！ | reddit！