AI配图

作为设计师，我们首先是用户的拥护者。

在用户遇到我们的设计之前，我们需要了解他们想要什么和需要什么。一旦他们遇到它，他们必须首先感到安全和舒适。这有时与我们对创新的渴望形成反差——这就是为什么我们必须将这种渴望与用户目标结合起来。

要做到这一点，我们需要了解用户的大脑是如何工作的——他们创建的帮助他们浏览网络的心智模型。这种理解为我们提供了一个平台来进行创作，这个过程被称为神经设计(neurodesign, 2012年推出)。

通过仔细的研究和可用性测试，我们可以更好地了解当用户或客户面对一个好的(或坏的)体验时，他们的大脑是如何运作的。我们可以利用这些知识来创造更好的体验。

在这篇文章中，我将解释如何利用模式进行更好的Web设计，以及何时打破这些模式才能给用户留下持久的印象。

模式识别是一个认知过程，在这个过程中，我们看到一个刺激物，并试图将它与我们已知的相匹配。

这是我们用来解决问题的一种启发式或捷径。启发法构成了Gerd Gigerenzer最初所说的“适应性工具箱”——在时间、资源或信息有限的情况下，我们用来做出决策的一组规则。

图片来源:Vinoth Chandar。知识共享。

如果一种情况对我们来说是新的，我们会打开adaptive toolbox看看我们以前是否遇到过类似的情况。

作为用户和设计师，我们通过与网络的交互学习各种模式。因此，当我们与网络互动时，我们试图将我们所看到的与我们已知的相匹配——例如，如果我们在一家商店中寻找特定的商品，之前的经验告诉我们，我们可以(也应该)能够以一种非常特定的方式搜索它。

这种认知和学习使我们能够使用启发式快速有效地浏览网络，而不是每次都从头开始思考交互。我们寻找过去通过最小化时间和最大化回报而成功的互动模式。如果我们找不到这些模式，我们通常会寻找另一页可以提供熟悉和方便的内容。

这些捷径有时确实会让我们误入歧途，但它们往往奏效。正如Web UI最佳实践中所解释的，如果您希望您的网站成功，您必须非常熟悉这些模式和期望。

设计模式是一种记录设计问题的通用解决方案的方法。

这里有许多优秀的模式库——ui模式，Yahoo的模式库，和PatternTap等等，但这里有一些常见的设计和用户界面模式的例子，以及它们解决的问题:

汉堡菜单:这段时间备受争议，人们开始质疑这到底是一种设计模式，还是一种糟糕的设计。无论如何，它无处不在，允许移动设备上有更多的空间。

在Web UI模式中可以找到更多的UI模式示例，其中包括63种以问题/解决方案格式描述的有用模式。

这就是我们可以开始使用这些神经科学基础知识使我们的工作更容易(或更复杂，取决于你怎么看它)的地方。我们还必须记住，用户对网络的感知与创建网络的人是不同的。

当我们为Web构建时，我们会在发现各种设计问题的过程中使用设计模式。我们经常从下到上进行这样的旅行:我们从我们面前的问题和它的各种元素开始，然后尝试创造一个有凝聚力的体验。当我们将接口分解为原子组件时，我们将自己沉浸在子问题、目标、任务以及信息架构和流中。

这就是为什么过了一段时间，我们就会对设计中的问题视而不见——我们不能把它看作一个整体。

但正如我在“使用模式设计更好的用户体验”一文中所描述的，用户不会以这种方式与界面交互。他们是自上而下的。

用户看到的不是部分，而是它们的总和，并使用对规则的先验知识来指导他们的交互。他们在我们所建立的模式中寻找与过去类似产品或网站的经验相匹配的模式(称为外部一致性)，以帮助他们浏览得更快。这种处理方法是快速的，但有时是错误的-特别是当接口在某种程度上偏离了现状。

因此，我们应该确保网站的界面符合用户的期望，也符合网站本身。例如，如果您选择一个cards UI模式，由于该模式非常流行，大多数用户知道如何导航内容。为了防止混淆，您还必须在整个站点中一致地实现该模式。

我们的工作是引导用户，使这个过程尽可能简单和令人满意，并确保他们在我们的界面中识别出足够的模式，让他们感到舒适。外部一致性(与竞争对手或其他网站相似)并不总是必要的，但是内部一致性——产品内部的一致性——是最重要的。

您将建立用户的信心、信任和安全。

用户对每次交互都有一个期望，不管交互是多么平常。

每一次眼睛对内容的轻弹，每一次鼠标的点击，每一次按键的按下——所有这些都是由以前的经验和交互指导的，用户将期望从每一次操作中得到一定的结果。我们喜欢图案——它们让我们感到安全和快乐。

这种快乐发生在神经化学水平上。每次我们成功地识别出一种模式，我们就会得到一股多巴胺——一种与快乐和奖励有关的神经化学物质。然后，当相互作用成功时，我们又得到一次颠簸。

当某些东西是“直觉的”时，这本质上意味着一个模式已经被遵循，并且用户的期望已经被满足——当他们看到一个模式时，他们会很高兴，当模式按照预期运行时，他们也会很高兴。然而，如果这种模式被打破，多巴胺就不会出现，我们就会感到不满足。当然，用户会将这种不满与站点或产品联系起来。

除了模式，我们还需要了解与之相关的期望，以便最大化多巴胺和最小化不满。我们想给人们他们想要和期待的东西。

但我们也想成为创新者和创造者——毕竟，很少有客户来找我们要求一个“符合期望”的网站，或者看起来像他们的竞争对手。这是一个艰难的平衡，但我们并没有失去一切——我们只是需要更深入地挖掘。

在我们对创新的渴望中，我们希望开发新的、新颖的做事方式。然而，我们的尝试也会疏远用户。

例如，在我的博客中，我提到了Ello的设计，这是一个旨在最小化和创新的社交网络，但却打破了太多的模式。

例如，一个按钮应该看起来是可点击的。如果他们没有，最好有一个很好的理由(以及让用户学习的方法)。每次我们打破一种模式时，我们都想确保我们在问自己几个困难的问题:

这些都不是容易回答的问题，所以在决定打破一种既定的模式之前要好好想想——这样做值得吗?

当然，我们不应该放弃所有的创新，只坚持我们所知道的——设计模式并不是一切。它们只是你自己创造力分层的基线。人们有能力学习和识别新的模式，特别是当这些模式带来回报的时候。

例如，考虑一下我们刚刚讨论的多巴胺奖励系统。我们提到，如果用户期望得到奖励并得到了奖励，这就满足了期望。如果他们期望得到回报却没有得到，这就会滋生不满。

图片来源:交互设计最佳实践

但是，如果他们不期待奖励呢?更好的是，如果他们不期待奖励，但我们给了他们奖励呢?

是的，我们打破了一种模式，但我们可以在用户不需要的地方这样做，我们可以赢得他们。我们可以通过在用户不期望的情况下给予奖励来强化新的模式，从而强化新的互动方式。在我们看来，这快乐的一刻是创新的关键，是成功打破常规和现状的关键。

图片来源:MailChimp的

当然，在用户没有预料到的情况下，我们很难找到让他们高兴的机会——毕竟，如果用户还没有意识到，我们怎么能知道他们什么时候会特别高兴呢?这就是测试的用武之地。

我们能找到何时打破哪种模式的唯一方法就是去尝试，去实验，看看结果。

这些实验都是以经过深思熟虑、构思良好的用户测试的形式进行的。我们需要意识到我们试图打破的模式，以及用户如何看待它，为什么我们试图打破它，以及如何打破它。有了原型，我们可以严格地控制和测试模式本身，即使用户没有意识到这种控制。

图片来源:快速原型通过UXPin

例如，在UXPin中，我们可以使用现有的UI库创建一个快速原型。然后，我们可以通过启动远程可用性测试会话来验证这些模式(以及总体设计功能)的有效性。写下核心任务，邀请用户，然后开始体验真实时刻。

原型设计(和测试)之所以如此有用，是因为人们常常无法清楚地表达自己的需求。用户测试允许他们向我们展示。用户行为正常，而我们观察和倾听他们的反应。

下面是一个改进现有web模式的示例流程:

没有必要太过努力——当用户期望得到奖励时，我们应该给他们一个奖励(或者至少提供一个不这样做的绝佳理由)。然而，我们当然可以探索打破模式的机会，创造新的令人愉快的互动方式。

当谈到改进旧模式时;研究潜在的问题，问问为什么这种模式如此有用。正如世界著名设计师杰弗里·泽尔德曼曾经说过的那样，考虑打败了模式。以前成功的设计模式，如果不加以考虑，只会损害你的网站。

亨利·福特曾说过一句可能被过度使用到陈词滥调的名言:“如果我问我的客户他们想要什么，他们会说是一匹更快的马。”

说到网页设计，我们可以也应该以一种经过深思熟虑的方式遵循模式。因为各种各样的理由，它非常好，而且经常是人们的首选。毕竟，我们接受这种模式是有原因的。

但当我们不努力创新，只坚持模式时，我们只是在打造更快的马。

免费的电子书Web UI设计最佳实践包括更多关于模式和其他技术的建议。这本109页的电子书包括了一些实践技巧，这些技巧是基于对30多家公司案例的分析。