网站建设之网站设计中伸缩行怎么设计，设计完美手风琴

设计模式。一个几乎是神话般的短语，经常激励着敬畏或愤慨。作为设计师，我们倾向于将设计模式视为通用的现成解决方案，可以几乎机械地应用于各种环境，通常没有适当的考虑。导航？关闭帆布！一天的交易？旋转木马！你得到这个想法

有时我们使用这些模式，甚至没有考虑到这些模式，并且有一个很好的理由：每次遇到界面问题时，都需要一个全新的解决方案，这是耗时且有风险的，因为我们不知道多少需要时间来实施一个新的解决方案，以及在可用性测试中是否会正常成功或惨败。

设计模式可以非常有帮助，网站建设创意互动为你介绍主要是因为它们节省了时间，更快地获得了更好的结果。我们不需要像我们遇到的每一个问题一样使用它们，但是我们可以利用其中的优势，利用我们的经验来告知我们的决定，因为我们知道他们在其他项目中工作相当好。

在过去的几年中，我花了很多时间与各家公司进行了各种尝试，并对可用性测试进行了研究。这一系列文章是对整个时间的观察和实验的总结。拧紧你的安全带：在这个新的SmashingMag系列文章中，我们将从转盘到过滤器，计算器，图表，时间表，地图，多列表，全方位定价计划到座位选择在航空公司和电影院网站。但是，在我们开始复杂的接口问题之前，我们先来看看一些简单明了的手风琴：手风琴。

手风琴的Barebones

手风琴可能是响应式设计中最成熟的主力，这是一个很好的理由。这是一个非常有用的逐步披露模式- 突出显示一个部分的重要细节，并在必要时点击或点击来显示更多详细信息。因此，设计始终保持重点，并首先显示关键信息，而其他一切都易于访问。事实上，如果您遇到任何问题 – 导航选项太多，内容太多，视图太详细 – 一个很好的起点就是探索如何利用手风琴来解决这个问题。通常情况下，它的效果非常好。

网站建设

然而，即使作为手风琴可预测和经常使用的组件也有很多解释和模糊的余地。现在，不要误会我的情况：语境很重要。导航手风琴将需要与“问答”部分不同的方法。但在所有不同的情况下，我们必须彻底地考虑两件事情：手风琴的视觉设计和交互设计，以消除所有的混乱和误解。

现在，如果我们更加关注手风琴的准系统，那就不难看出它所有的原子元素。手风琴总是包含类别标题，扩展和折叠状态，指示展开的图标以及它们之间的间距。扩展类别后，图标应该更改，以指示折叠。但是，如果用户在另一张卡片打开时点击已折叠的卡片怎么办？扩展卡是否自动关闭？如果不是所有的项目可以显示 – 如果用户自动滚动？我们一个接一个地仔细看看这些和相关的问题。

网站建设

网站建设

选择一个图标来指示扩展链接

现在，让我们开始吧。我们知道什么？很明显，在大多数从左到右的界面中，类别名称也将左对齐。假设，就像在许多手风琴中，子项目将在两个部分之间滑动，您将选择什么图标来传达此行为？一个箭头指向下方，一个箭头指向右边，一个V形指向下方，一个加号，一个圆圈的加号 – 也许是完全不一样的东西？

网站建设

根据我的经验，看起来，只要在同一个UI中不会重载各种含义，图标的选择并不重要。例如，您可以使用圆圈加号来表示定价计划中的扩展，缩放和一组两个项目，这可能会引起混淆。然而，在手风琴的背景下，用户似乎明白，如果某些导航项目具有图标，而其他部分则没有，那么点击或点按可以获得更多内容。我们无法发现任何一个图标或多或少可识别的迹象。但是，这并不意味着某些选项可能不会比其他选项引起更多的混乱。

网站建设

例如，Slack使用指向右侧的箭头，尽管手风琴项目在类别标题之间垂直滑动，而不是从右侧滑动。现在，在这一点上，值得问一下图标的方向是什么？它应该可以作为移动方向的指示器，或者更具体地说，当用户的视图被移动到图标被点击或点击时。例如，在iOS上的Apple Mail中，指向右侧的V形图从左到右映射到用户视图的移动。

网站建设

网站建设