UI设计之设计模式 UI Design Patterns

3. UI设计之设计模式 UI Design Patterns

本文章属于《跟我学线框图》系列教程，转载请注明出处。

什么是设计模式？

设计模式是针对常见问题的可重用解决方案。正如烹饪食谱提供了组成一道可识别菜肴的原料和结构一样，设计模式也为界面设计问题提供了可识别和可预测的解决方案。

设计模式的想法最初来自于架构和编程，这个想法是为了优化已知在特定环境下工作良好的解决方案。

模式的结构和行为特征是用户所熟悉的。您的团队可以利用这一知识，而不是重新发明轮子，以提供更大的易用性和他们的产品。不过，值得指出的是，虽然设计模式有助于为特定问题的设计决策提供信息，但您可能需要根据用户和业务的需求修改它们。

我们将首先研究一个设计模式，研究一些正在使用的模式示例，并解构它们的实现。然后，我们将列出一些用于界面设计的常见模式，您可以深入探讨它们。

烹饪的类比：

在烹饪过程中，我们把各种原料混合在一起来准备一道菜。比如说，我们计划做一个鱼肉玉米卷。如果你熟悉这道菜，你知道你通常会准备一个片状的鱼，也许像鳕鱼，玉米饼，不同的调味料，油等。有很多不同的制作方法这道菜中，使它成为你的独特口味，但是基本的配料组合就能制作一个很漂亮的鱼肉玉米卷。

这很像使用设计模式。我们有一个通用的模型，如何创建这个菜，使其可识别。我们可以添加或减少这些成分，以及如何把它们放在一起，使其独一无二。

设计模式的元素

设计模式通常使用一组常见的属性编写，如下所示:

属性	描述
模式名称	一个标签，提供了一种清晰的方式来传达和引用此模式，尤其是在与同事讨论时。
问题	描述这个模式解决了什么问题以及为什么会存在这个模式
描述	描述何时使用此解决方案
解决方案	详细描述解决方案
推荐	提供进一步的建议。
实例	实际使用样例

设计模式示例

让我们探索如何将网站购物车组件的设计模式编写到这个模型中。这似乎是对一个非常熟悉的组件的描述。

当你在阅读的时候，想想这和其他购买体验如一键式购买的比较，或者和类似的购买服务如预订或预订体验的比较。举个例子，想想这在移动电话上会有什么不同。


模式名称	电子商务网站购物车
说明	购物车组件包括 ①一个“添加到购物车”按钮购买一个项目和 ②一个伴随的购物车图标用来表明该项目是持有购买，并提供一个链接，以查看项目和开始结帐。
问题	用户想在电子商务网站上购买商品。
使用环境	①当在线商店允许浏览商品、有多个商品需要购买、或者需要在完成购买之前查看订单时，使用此模式。 ②在网上商店购物时，用户可能会选择要购买的商品，但是想继续浏览，并且可能想在开始结账之前查看和编辑他们选择的商品。这类似于在现实世界中将物品放在购物车中。
解决方案
一	1.查看产品和添加一个项目到 Cart ①出现带有产品的按钮，以将商品添加到购物车。
二	2.更新和预览购物车 ①用户选择“添加到购物车”操作后，请提供有关已添加商品的反馈。在购物车图标旁边的数字指示器中显示增加的物品计数。 ②（可选）显示带有该项目和所选选项的购物车预览 ③提供有关后续步骤的反馈，例如，编辑购物车，查看完整的购物车，继续购物或开始结帐以完成购买
三	3.显示购物车 ①提供添加到购物车的商品的单独购物车视图，以便用户可以修改或完成其订单。 ②提供编辑数量，删除项目的操作。 ③提供“结帐”或完成购买的操作。
建议	①添加到购物车可以提供选项，例如数量选择器，样式选择器等。如果项目需要选择选项，则提供条件逻辑; 如果没有选择样式或大小，则禁用“添加到购物车”按钮 ②考虑为登录用户提供一次单击选项，或者如果商店提供单项购买，则直接导航到结帐过程
例子	Nike 耐克、Shopify

例子

让我们看看上面列出的两个购物车示例，并进一步解构它们是如何解决这个特定需求的，以及这是如何反映模式的。

我们将在两个站点上考察客户决定使用“购物车”购买产品的时机：Nike Store和Shopify的Tatt.ly。

Nike.com cart.

用于电子商务的 Tattly 购物车

Comparison 比较

在这两个示例中，设计模式都是基于将购物车作为一个比喻来临时保存您要购买的东西。已经建立了一个共同的图标，通常有一个被持有的物品数量的指示器，并假设下一步是“结账” ，就像人们在实体世界中在商店里做的那样。

这些体验之间只有细微的差别。

① 耐克提供了一个很好的行为来预览购物车，而不用离开产品页面，这可能使用户更容易返回购物。在另一个与耐克有类似对话框的网站Crate and Barrel上，使用了同样的预览购物车的想法。耐克在购物车视图上推广其他产品，促进了消费者可能购买基于他们的购物车推荐的商品。
② Shopify 指引用户在添加产品到购物车后立即到购物车

在 Nike 和 Tatt.ly (Shopify)中，体验的一般行为和结构都是相同的。在大多数情况下，这两个网站都依赖于可预测的惯例，而不是重新创建体验，这些惯例构成了常见的购物车模式。

使用和创建你自己的模式

您看到的许多界面很可能是在设计时考虑了一个通用的设计模式。Cart 购物车例子是一个经常被复制的例子，因为它基于对这个模式的可识别性的理解。它让用户放松，因为他们对网上购物的工作原理有所预期，而且它满足了商业需求，使用户体验尽可能的无摩擦，同时也寻找有价值的附加销售机会。

当你开始使用设计模式时，请记住，当你解决一个常见的用户界面问题时，设计模式可以很好地帮助你做出设计决策，但是如果不考虑用户和产品的特殊需求，它们是不会被复制的。

Jennifer Tidwell 写过一本名为《界面设计》的优秀界面设计书籍，她在“关于模式”一节中给出了关于使用模式的建议

“它们不是现成的组件; 模式的每个实现都有一点不同。它们也不是简单的规则或启发式。而且他们也不会带领你完成一整套设计决策… … ”

在 balsamiq 的设计模式和用户界面库中，您将找到许多潜在的解决方案，以解决您自己的设计问题。您还可以在 Wireframes to Go 中找到许多这些模式的预构建界面。