设计模式：这是一个神秘的词，总会引起敬畏感或怨恨感。作为设计师，我们倾向于将设计模式视为一种多功能且随时可用的解决方案，可以机械地应用于各种环境，但这通常没有得到适当的考虑。导航怎么办？只需使用Off-canvas！ （ps。离开画布是指抽屉滑动导航设计模式）如何做金盒特价商品？使用轮播！ （ps。Carousel用于内容循环显示）jQuery Carousel插件）你很尴尬。有时甚至我们不想使用这些设计模式。这种情况有充分的理由：每当我们遇到接口问题时，我们都必须提出既耗时又有风险的新解决方案。因为我们真的不知道实施新解决方案需要多长时间，以及它是否会在可用性测试中成功或惨败。设计模式可能非常有用，主要是因为它们可以节省时间并更快地获得更好的结果。我们不必将它们应用于我们遇到的每个问题，但我们可以在它们的基础上进行构建，并利用过去的经验来做出更明智的决策，因为我们知道这些设计模式已经在其他项目中使用过。非常好。在过去的几年里，我花了很多时间与许多不同的公司合作，尝试各种方法并在可用性测试中进行研究。本系列文章是在整个观察和实验期间撰写的摘要。女士们，先生们，请坐下来：在SmashingMag代购源码网站上的一系列新文章中，我们将从旋转木马，过滤器，计算器，图表，时间表，地图，多列表，全方位定价计划转向航空公司。案例研究涉及各方面，例如在电影代购源码网站上选择座位。在让我们看一下这些复杂的界面问题之前，让我们从一个看似简单而平淡的手风琴折叠面板开始吧！

手风琴折叠面板结构

有充分理由认为手风琴折叠面板可能是响应式设计中最成熟的主要设计模式。这是一种非常有用的模式，可以逐步扩展信息，&m​​dash;—突出显示部分的重要细节，并在必要时点击或点击以显示更多细节。因此，当所有其他内容都易于访问时，设计应首先关注于显示关键信息。事实上，如果你遇到任何问题——太多的导航选项，太多的内容，太详细的视图，那么一个好的起点就是探索如何使用排序的折叠式折叠面板来解决这些问题。

设计手风琴折叠面板有多难？好吧，你必须考虑很多事情。这是Schoolfinder的一个很好的例子。

然而，即使是预见并经常使用的这种手风琴折叠面板组件也存在大量的模糊和解释。现在，不要误解我的意思。:环境很重要。用于导航的折叠式折叠面板需要与Q&A会话不同的设计方法。但是在所有不同的环境中，为了消除所有的混淆和误解，我们必须仔细考虑:手风琴折叠面板的视觉设计和交互设计。现在，如果我们更仔细地观察手风琴折叠面板的结构，就不难看出它的所有元素。手风琴折叠面板通常包含分拣标题，展开状态和折叠状态，可扩展图标的提醒以及它们彼此之间的间距。扩展分类后，图标会更改以指示可折叠状态。但是，如果用户在卡打开时单击以展开另一张折叠卡，会发生什么？扩展卡是否应自动关闭？或者不是吗？如果不能显示所有项目，那么如果用户想要查看更多信息，他应该让它自动向上滚动吗？让我们逐一仔细研究这些相关问题。

Nsb.no上挪威旅行计划中的经典折叠式面板表壳，带有与条形右边缘对齐的图标和一个用于触发展开功能的条带。

选择一个图标来表示扩展名

现在让我们开始吧！我们知道什么？很明显，在大多数从左到右的布局中，类别名称也将是左对齐的。假设儿童入口在两个部分之间滑动，就像许多手风琴折叠面板一样，您会选择用什么图标来表达这种行为？它是向下箭头吗？还是右箭头？是一个向下的V形图标？还是一个加号？或带圆圈的加号？ ——也许不是全部？

Zvv.ch结合了两层手风琴折叠面板，带有相同的图标（带圆圈加），其中一个表示行程选项，另一个表示起点和终点之间的站点，两者都用于相同的用途（展开），看起来非常相似。它们清楚地表达了预期行为的图标和预期用途。

根据我的经验，图标的选择并不重要，只要它在同一界面中不包含不同的含义即可。例如，您可以使用带圆圈的加号来指示定价计划中一组事务中的扩展，缩放和两个项目，这可能会造成混淆。然而，在手风琴折叠面板的情况下，如果一些导航项目具有图标而其他导航项目没有图标，则用户似乎理解这是指示在点击或点击时呈现更多内容的符号。 。我们没有发现任何迹象表明图标比其他图标更容易识别。但是，这并不意味着某些选项可能不会引起比其他选项更多的混淆。

Ableton.com使用加号来表示一组交易（上图）和一个扩展（如果您向下滚动页面）。面对图标的这些多重含义，您会感到有些困惑，因为用户要么在单击上面的图标时实际扩展功能（实际上没有发生），要么会认为单击加号时没有下面的符号交互（实际上是扩展功能）。例如，Slack使用指向右侧的箭头，尽管手风琴折叠面板项目垂直于类别标题滑动，而不是从右侧滑动。现在，有必要问一下图标的方向应该是什么？它应该用作移动方向的指示器，或者更具体地说，用于在点击或轻击图标时移动用户的视线的位置。例如，在iOS上的Apple Mail中，V形图标正确地将用户的移动从左向右映射。

在Slack中，定价计划在手机上显示为手风琴折叠面板，V形图标指向右侧并收起，此动作从上到下进行。

例如，在iOS上的Apple Mail中，V形图标正确地将用户的移动从左向右映射。

在图标的指向和用户视线的移动之间进行映射似乎是合理的，但由于不同的界面表现不同（一些神秘的图标经常与用户一起玩智力游戏），不是每个人都期望这种行为。所以最后，作为设计师你做什么并不重要。无论如何，你无法达到一些用户的期望。在设计时，我们倾向于关注我们正在设计的内容，即使我们在ui设计规范中保持一致，我们的用户也会受到他们在我们以前从未见过的代购源码网站上的体验影响的期望。 。因此，关键是要保持尽可能灵活，并提供一种简单，直接的方法来从期望中恢复。

加号图标可能具有不同的含义。在Leica上，加号会触发一个显示产品图像的弹出窗口。有些用户可能不会期望这种行为。在这里，使用放大镜缩放图标的表达可能不那么模糊。

所以回顾一下图标选择的问题。如果手风琴折叠面板项目垂直滑动，看起来很直观，除了指向右侧的图标外，上面提到的任何图标都是安全的。这里要考虑的唯一问题是，如果您选择的图标在另一个环境中已被赋予另一种含义——例如，如果您使用加号图标突出显示定价计划中的一组交易的一部分内容（此处的加号不可点击），然后恰好在手风琴折叠面板上使用相同的加号图标。在这种情况下，最好避免使用完全相同的图标用于不同目的，因为它可能导致混淆。然后所有的疑惑都解决了？嗯，实际上并非如此。然后让我们考虑预期的交互行为。通常使用箭头和V形符号作为提示来指示方向变化，而加号则用于指示添加和扩展。在这两种情况下，更改都将以不同的方式发生。:单击图标将导致覆盖内容的导航项目或垂直滑动（非水平）的项目。到目前为止还可以。

用户在tifwe.org的导航菜单中看到箭头时会有什么期望？显然，导航项右侧的图标代表一个子菜单，设计利用了可用空间。类别标题是直接跳转到类别页面的链接，箭头提示展开子菜单。

但是，当用户登录页面时，他们一开始并不知道他们是在长滚动页面上登录的，其中链接可以跳转到页面的某些部分，或者只是一个单独的部分。单独的页面。 ;一般”的代购源码网站。通常，指向下方的箭头会触发跳转到页面部分的行为，而不是扩展导航选项。用户很可能在过去失去方向，因为它将被带到长页面的某个部分，然后返回到页面顶部并从那里继续。

图标通常含糊不清。在Qso.com上，用户如何确定单击屏幕底部的按钮是否会将区域扩展为手风琴折叠面板或向下滚动页面？在这种情况下，用户的视线将在页面上向下滚动。这可能是一个问题，因为V形图标通常表示扩展。

因此，如果您选择使用箭头，您最终会看到相当多的用户希望能够将页面滚动到某个部分，而不是看到子条目在类别之间滑动。因此，V形图标似乎是一种更安全，更可预测的选择;如果您选择使用它，请将其指向折叠状态并将其指向展开状态。对于加号图标，您可以选择并匹配减号图标或关闭图标。

Papillons De Nuit上的箭头。当您单击页面顶部的箭头和页面右侧的箭头时，您希望发生什么？顶部箭头用作提示（点击不做任何事情），而右箭头将用户的视线滚动到页面的各个部分。并非每个用户都期望这种行为。

那么，这对我们作为设计师意味着什么呢？首先，如果手风琴折叠面板的项目是从左向右水平滑动，使用指向右侧的箭头是安全的。其次，如果手风琴折叠面板项目要从上到下垂直滑动，请选择指向下方的V形图标（不是箭头！），或选择加号图标以获得良好效果。考虑到这一点，选择一个图标应该是一个相当直接的决定。但它也取决于图标和类别标题的位置关系，因为这也可能导致混淆。现在，有哪些选项可以确定图标的位置？

选择图标的位置

选择！无论您使用哪个图标，都可以进行以下选择：a）将其放在类名的左侧，或b）将其放在右侧，或c）沿整个导航栏的右边缘对齐图标。将图标与类别名称分开。

有时，单击文本标签将导致单独的类别页面，并且不会单击空白区域。这就是为什么当你想扩展时，一些用户试图点击图标而不是类别名称或空白区域。

这与位置有关吗？这确实是事实。根据Viget的“测试手风琴折叠菜单设计和图标”，大多数用户倾向于专注于点击图标而不是整个导航栏。原因很简单:过去，一些用户可能对手风琴折叠面板的其他实现感到恼火。在某些代购源码网站上，类别名称不会触发展开操作，而是直接指向类别页面。在其他实现中，导航栏上的单击不会触发扩展，也不会跳转到类别页面——一切都没有发生。虽然我们当然会将整个区域设计为点击目标区域，但并不是所有导航都有这种行为，直到它们实际点击它（或将鼠标悬停在它上面），大多数用户都不知道你的导航是“坏的”是还好”。由于悬停并不总是可用，点击图标似乎是一个更安全的选择——单击该图标几乎总是会触发预期的行为。手风琴折叠面板的设计是一个重要的细节。在不同的界面和实现中，似乎图标位于类别标题的右侧，而不是将图标放在左侧（用户单击类别标题或空格的位置），用户选择按照图标更频繁。但是，有些用户仍然喜欢选择图标。因此，使图标足够大以获得舒适的点击体验是一个很好的决定，以防万一——至少44次; 44像素大小。标签文本左对齐，右对齐还是右对齐？这似乎并不重要。但是，如果您有一套手风琴折叠面板（可能在导航菜单中），类别名称的长度变化很大，那么在许多区域之间切换手风琴折叠面板将不仅仅是从导航栏从顶部到底部。移动切换的情况需要更多的关注。只要认为必须重新定位鼠标指针或手指才能点击奇怪的图标！另外，如果图标位于标签文本的右侧，则在狭窄的屏幕上，手指需要穿过导航区域，这将使视线无序。如果图标位于导航栏的右边缘，则问题得以解决。但是如果图标与列的右边缘对齐，我们仍然需要注意不要将它放在距离类别名称太远的位置。从视觉上看，扩展与类别之间的关系应该是显而易见的;因此，在不同的视图规格中，可以改变图标的​​位置以保持视觉上明显的连接。此外，在更大的屏幕上，此图标可能会略大。对于一组手风琴折叠面板来说，这种位置选择似乎更为可取，但对于手风琴折叠面板而言并没有多大区别 - ——除非你的数据证明不是这样。

手风琴折叠面板的交互设计

但是，即使您密切关注这些良好的细节，交互仍然会导致一些问题。假设类别标题左对齐，图标与列的右边缘对齐。在上面的讨论之后，当用户点击类别名称或图标或中间的空白区域时会发生什么？它们应该触发扩展，还是应该用于不同的目的？好吧，我们可以确定当用户点击图标时会出现某种情况下会发生某种展开行为，然后点击该图标当然会触发展开行为。但是，单击类别标题可用于直接跳转到类别页面或用于扩展目的。如果类别标题触发了扩展行为，我们肯定需要在下拉菜单中提供指向类别页面的链接，允许用户直接跳转到该部分（例如“所有项目””）。这意味着用户从主页到类别页面的过程可能会令人困惑，因为当他们点击类别标题时，他们不希望额外的点击进入类别页面。如果手风琴折叠面板的类别页面的链接很明显，那么您不会感到困惑，但跳转到类别页面而不是扩展导航项目然后返回到该过程可能会令人困惑。这就是为什么让图标和类别标题触发扩展更合理的原因。这不是那么尴尬。这种互动应该发生在类别标题和图标之间的区域吗？有些设计师可能会说，当用户浏览代购源码网站并点击该区域时，他们可能不想扩展，但“并锚定”鼠标指针开始在页面上滚动，因此感觉很混乱。当然，这是可能的，但如果用户选择打开导航菜单以浏览导航选项，则不太可能发生混淆。

点击越靠近图标，用户就越有可能展开。但是，这并不意味着点击越接近类别标题，他们就越有可能跳入此类别。

手风琴折叠面板通常用于卡接口。根据窗口的宽度，卡可以非常宽。因此，当一些用户迫切想要点击图标时，其他用户习惯于点击空白区域以关闭和扩展卡。其他用户习惯于认为空白区域完全没有目标并且会忽略它。只有少数人希望该栏成为类别页面的链接。在我们的测试中，证明了几乎没有可以触发扩展的空白，而不是——坦率地说，这就是我们选择使用的东西。

折叠式折叠面板不必仅提供导航项目。它还可以显示更多或更少的详细信息，例如PremierLeague.com上的表格或排行榜。

但是如果要将类别名称直接链接到类别页面怎么办？有一个想法可以导致明确暗示——通过在元素的边界上设计两个视觉上不同的元素;例如，对于图标和类别标题，使用不同的背景颜色（参见上面的示例）。在我们的实验中，我们没有注意到行为和期望的任何变化——有些人仍然点击类别名称，对发生的事情很奇怪。同样，为扩展的手风琴折叠面板添加链接区域似乎是一个更安全的决定。它够好吗？好吧，我们还没有做到。如果用户单击图标以展开但屏幕上没有足够的空间来显示所有孩子，该怎么办？团队中的某个人可能会建议自动向上滚动页面，以确保扩展区域显示在屏幕的最顶部。这是一个好主意吗？每当我们试图控制用户时，必须对此决定进行全面测试和考虑。也许用户有兴趣同时查看多个部分，并希望快速跳转到这些部分的内容。但只要事情保持不变，它们可能就不会那么尴尬，而不是让用户对自动滚动或跳跃行为感到奇怪，然后向后滚动以恢复以前的状态，如有必要，将决定留给用户，他们可以向下滚动。没有多少用户会期望跳到顶端——不要打断浏览过程，或添加固定链接到一个部分（如果它真的很长），这似乎是一个更好的选择。

在Sony.com上，如果某个部分已展开且用户点击了另一部分，则展开的部分会自动折叠。这种行为在代购源码网站上是不一致的，因此用户不能依赖它，也不能指望在任何地方看到它。

然后出现另一个问题:如果某个部件已经展开，那么用户点击另一部分，第一部分是折叠还是保持不变？如果第一部分是自动折叠的，但这不是用户想要的，它们总是可以再次打开它，但它们不会同时浏览或比较两个类别。如果该部分保持扩展，则必须主动关闭不需要的类别。两种选择似乎都有合理的用例。手风琴折叠面板的性质需要自动折叠，但在可用性方面可能不是最佳选择。对于具有许多物品的手风琴折叠板，我们倾向于将先前展开的部件保持在伸展状态，因为与自动关闭和同时打开的面板发生的跳跃太混乱。因此，作为一个选项，您可以提供“全部折叠”按钮来展开所有“按钮”，这在设计时间轴或详细表格时非常有用。如果没有那么多项目，则默认情况下该部分可能会自动折叠，因为跳转不大。（请注意，水平手风琴折叠面板的展开肯定会自动缩回——保持展开是没有意义的。）

在《卫报》代购源码网站上，左侧是一个V形图标，后面是一个类别标题和一个空白区域。整个条形触发扩展，分类的主页条目整齐地显示为手风琴折叠面板项目中的第一个选项。

还有其他事情要提。不关心图标或其位置的选择。当手风琴扩展时，应该很容易立即折叠。此交互不需要对鼠标指针或手指进行任何额外操作——就像任何其他隐藏和显示的交互一样。这意味着折叠和展开的图标当然会在激活时改变，但考虑到手风琴折叠面板的状态可以立即切换，它们的位置应保持完全相同。

总结

这是对看似明显的设计模式的长期回顾。我们选择一个图标来表示扩展名（v图标指向下方或加号图标），这样它就足够大，可以轻松点击并将其放在栏的右边缘。整个导航栏触发扩展——栏周围有足够的地方来切换状态，并且类别主页的链接被添加到手风琴折叠面板目录中。如果我们选择使用V形图标，则单击时其方向应更改。如果它是一个加号图标，它应该很容易转换为“ - ”或者“x”意味着它可以被收起来。为了使交互更清晰，我们可以使用微妙的过渡或动画来反映幻灯片的进出类别。当然，您的解决方案可能会有很大差异，因为您的应用程序环境可能非常不同，因此如果您正在寻找另一种解决方案，下面您会发现在设计手风琴折叠面板时我们总会提出的一些问题。问题。

手风琴设计清单1.您会选择哪些图标来表示扩展？ 2.您会选择哪些图标来表示收藏？你把图标放在哪里？ 4.您如何设计类别名称？ 5. How do you表示装载和扩展的状态（图标除外）？ 6.如果用户点击类别名称会怎样？ 7.手风琴折叠面板是否包含指向类别主页的链接？ 8.如果用户点击空白区会发生什么？ 9.选择其他部件后，展开的部件是否会自动折叠？ 10.如果没有足够的空间显示所有项目？ 11.你应该加上“全部收集/全部扩展”吗？链接或按钮？

对已经可预测且可预测的手风琴折叠面板组件的考虑几乎是关于设计实验和可用性讨论的永无止境的故事，因为只有少数关于该组件外观的既定指南。和互动。虽然制作可达到的手风琴折叠面板并不困难，但设计一种广为人知的手风琴折叠面板并不容易。结果，用户经常感到迷茫，因为他们的期望不匹配，或者因为交互中断了他们的过程。我们的工作是减少摩擦并确保这种情况很少发生。通过包容和灵活的设计，我们可以做到这一点。也许你的经历与文章中提到的完全不同？请在评论中告诉我们！另外，如果你想到另一个你很乐意谈论的组件，请告诉我们，我们会看到我们能做些什么！

« Qibo cms最新SQL注入代购源码网站漏洞远程可执行代码解除权限 | 代购源码网站优化过程中页面抓取过程的简要说明 »