那么，所有这一切对设计师来说意味着什么呢？首先，如果折叠面板的项目应该从左到右水平滑动，那么使用指向右侧的箭头则是安全的。其次，如果折叠面板的项目应该从上到下垂直滑动，则指向下面（不是箭头）或带加号图标的V字形会很好地工作。

考虑到这一点，图标的选择应该是一个非常简单明确的决定。但是，根据该图标与分类标题的接近程度，也可能会导致混淆。那么现在在选择该图标的位置时，我们需要考虑什么选择？

选择图标的位置

选项！不要选择你已经选择的图标，你可以选择将其放置在分类名称a）左侧，或b）右侧，或c）沿着整个导航项目栏的右边缘对齐图标，输出图标的间距和分类名称。

有时点击一个文本标签会导致一个单独的分类页面，点击空白处起不了什么作用。这就是为什么当希望展开时，一些用户会尝试点击图标，而不是分类或空白区域。Research by Viget.com.Large view.

这个位置是否重要？其实根据Viget的“Testing Accordion Menu Designs and Iconography”，一些用户倾向专注于点击明确的图标，而不是整个导航栏。这会发生的一个简单的原因是：以前一些用户可能用“burned”替代实现折叠面板。在一些网站上，分类标题不会触发展开，而是直接进入该分类。在其他实现中，点击导航栏不会触发展开，也不会进入该分类——它不起任何作用。

即使我们将整个区域设计成一个命中目标，但不是每一个导航都有这一行为，一些用户本不知道你的导航是“好的”还是“坏的”，直到他们实际在上面点击（或悬停在它上面）。由于悬停不总是可用的，点击图标似乎是一个更安全的赌注——点击图标将几乎总是触发预期的行为。这是设计折叠面板时需要知道的重要细节。

在各界面实施方面，似乎将图标放置在分类标题的右侧，用户通常选择把更多的图标放在左边（用户点击分类标题或空白栏）。但是，有些用户仍然倾向于选择图标。因此，使图标足够大以适应点击是一个很好的决定，以防万一——尺寸至少为44×44像素。

左对齐，右倾斜还是右对齐？这似乎并不重要。但是，如果你有一组折叠面板（可能会在导航菜单中），分类标题的长度变化很多，需要稍微更多的关注在多个部分间切换折叠面板的状态，而不仅仅是沿着导航栏从上到下移动。只是鼠标指针或手指必须重新定位，才能点击这个花哨的图标！此外，如果图标是右倾斜的，则在狭窄的屏幕上，手指需要穿过导航区域，模糊视图。当图标位于栏的右边缘时，此问题将被解决。

但是，如果图标是对齐右边缘栏，我们仍然需要注意，不要将其放在距离分类名称太远的位置。从视觉上看，展开与这一分类是显而易见的; 所以，在不同的观察框中，图标的位置可能会改变，以保持视觉连接的显着。此外，在更宽的屏幕上的图标可能会变得更大。对于一组折叠面板来说，这个选项似乎更为可取，但对于单个折叠面板来说不会有很大的不同——除非你有其它的数据可以来证明。

设计折叠面板的界面交互

尽管这些细节都没有解决，交互还是引起了一些问题。让我们假设分类标题保持左对齐，图标对齐到右边缘栏。跟随上面讨论，当用户点击分类名称或图标或两者之间的空白空间时应该怎么办？它们是否应该触发扩张，还是有不同的目的？

那么，我们可以确定一件事情：当用户点击图标时，他们可能会期待某种展开，所以点击图标就会提示展开。但分类标题可以点击直接跳到该分类，或旨达到展开的目的。

如果分类标题触碰展开，我们绝对需要在子下拉菜单中提供一个分类链接，让用户跳到该部分（例如“所有项目”）。这意味着用户从首页到分类旅程可能会引发混乱，因为他们不希望在点击分类标题时还有额外的点击。但在这种情况下的恢复是显而易见的，并不会强迫用户恢复以前的状态，他们可以继续。

如果折叠面板中的链接显而易见，就不会让人感到混乱，而不是跳到一个分类展开完导航项，然后返回更可能会让人感到混乱。这就是为什么同时使图标和分类标题触发展开更合理。这样就不那么突兀了。这种互动是否会在分类标题和图标之间发生？一些设计师认为，当用户在浏览网站时点击该区域，他们可能不希望展开，而是“锁定”鼠标指针以开始在页面上滚动，因此感觉到破混乱。当然，这是有可能的，但如果用户选择打开导航菜单来浏览导航选项，就不太有可能发生。

点击越靠近图标，用户越有可能期望展开。但并不意味着点击越接近分类标题，他们越有可能跳转到分类。(View large version)