如何使用设计模式进行 Web 设计

设计模式是良好网站可用性的基础，也是网站构建的基础。 它们是网页设计师为确保良好的用户体验而做出的战略设计决策。 设计师的工作是解决常见的可用性问题并创建用户最直观的解决方案，而模式会创建可预测、直观和优化的用户体验。 无论您是设计新手还是经验丰富的专业人士，您都必须了解常见的 UI 设计模式并跟上模式的发展。

设计模式的例子

您可能听说过组件； 按钮、表单字段、搜索栏等都是它们的例子。 要使用它们，您可以通过在设计中创建模式来充分利用它们。

需要注意的一件事：有时术语“组件”和“设计模式”可以互换使用。 就本文而言，组件是网站的构建块，而模式是用户用来执行任务的既定方式。

正如您将看到的，模式比单个组件“更大”。 模式是您如何优化对单个组件所做的事情。 传统的设计模式有很多，比如：

• 链接到网站标题中主页的徽标
• 移动网站上的汉堡包导航
• 带有“重置密码”链接的登录表单
• 允许用户跟踪他们在网站上的位置的面包屑
• 带有物品计数器的手推车

设计师为什么要关注设计模式？

使用设计模式有很多优点。 它们不仅使您作为设计师的工作更有效率，而且更重要的是，模式使您的用户体验更轻松。

设计模式建立信任

用户在到达您的网站时会做出快速假设。 在一瞬间，他们会确定是否值得与内容进行交互，或者他们是否应该寻找其他选择。

您的网站易于浏览吗？ 是否容易找到您的用户正在寻找的信息？ 他们没有耐心四处点击并排除故障。 留下良好的第一印象并与用户建立信任绝对至关重要。

在网络的历史中，某些模式已经变得司空见惯。 设计师已经依赖这些既定的用户界面元素来设计网站，用户也已经习惯于看到这些设计模式。 他们认识到站点之间的共性并相信熟悉的内容。

让我们以电子商务网站上已建立的设计模式为例。 用户习惯于在网格中查看小产品预览，然后单击以了解有关单个项目的更多信息。 通过在您的设计中使用既定模式并创造易于使用的体验，您正在与用户建立信任，而且他们更有可能成为回头客。

设计模式是直观的

当用户与您的站点交互时，可预测性因素变得非常重要。 [twitter_link]可预测的模式允许最直观的体验。[/twitter_link]拥有熟悉的模式是关键，但确保一致地使用这些模式也很重要。

一种常见的、可预测的模式示例是在表单上找到的。 具体来说，所有表单都提供验证和错误消息。 您网站上的所有表格是否始终如一地执行此操作？ 所有消息都在同一个地方吗？ 提交按钮怎么样？ 是否有消息表明表格已发送？

从设计的角度来看，用户之前已经多次遇到过这些模式。 通过有用的消息提供表单验证向用户指出问题所在，并且有一条消息表明表单已发送是一个有用的指示器，表明已采取行动。

当您听说模式和可预测性对于良好的用户体验是必要的时，这似乎是常识。 但是，不难遇到打破常见模式的网站，这可能会导致沮丧或困惑。 考虑到这一点，请继续使用有用的 UI 模式进行设计。 用户越熟悉他们，他们就越知道会发生什么行为。 模式和约定可以防止用户感到困惑，坚持模式可以创造可预测的体验。

设计模式为设计师提供了一种通用语言

[twitter_link]出色的体验始于有效的设计。[/twitter_link]

在许多情况下，设计师在团队中工作。 当有既定的设计模式时，它可以帮助团队更有效地工作。 如果问题已经解决，就没有必要重新发明轮子。

将所有模式保存在一个中央前端风格指南中是保持库存的好地方。 作为全球资源，它是所有团队成员了解每种模式用例的快速指南。 即使您是单独工作，跟踪您正在使用的设计模式也会让您更有效地工作并在将来回顾它们。

规划阶段

为什么要使用设计模式已经很清楚了，但是网页设计师在为网络设计时如何真正将这些应用到位呢？ 这里有一些技巧可以帮助简化设计过程。

使用你已经知道的开始

如果您正在设计一个完整的重新设计或站点“扩展”，那么盘点并查看您已经知道的内容会很有帮助。 获得一个好的起点是关键。 如果它是一个全新的项目，那么考虑这些事情并预料到一些问题一开始是未知的是很重要的。 对于这种情况，利用过去的设计经验来着手是一个很好的开端。 这会告知最初的决定，因为他们已经在其他项目上工作过。

开始研究

研究是坚实项目基础的关键。 如您所知，用户总是会寻找最简单的方法来完成网站上的特定操作。 了解手头的问题和任务将确保您设计的是正确的东西。 首先，考虑以下项目：

• 目前的用户是谁？ （他们的目标、人口统计等）
• 关于这些用户，您还想了解什么？
• 他们与哪些模式互动最多？
• 这些用户是否有任何问题？
• 可以做哪些改进？
• 正在设计哪些新功能？
• 任何当前建立的模式都可以工作吗？

研究阶段是确定用户在与您的网站交互时需要完成什么的时候。 例如搜索内容、注册时事通讯、购买等。面对熟悉的元素，用户将需要更少的时间思考并有更多的理由进行转换。 将设计重点放在根据用户在 Web 上体验到的现有知识，以用户感觉熟悉的方式创建模式。

在解决设计问题时，时间和预算始终是一个因素，但要尽可能多地进行研究。 是时候发现用户的主要痛点并研究现有的设计模式了。 网络上常见的是什么？ 您过去成功使用过哪些模式？ 一旦定义了需要解决的问题，就可以探索具有针对相同用户目标的模式的站点。 这将为该项目提供良好的灵感。 没有必要“复制”它们，但记下其中的内容会很有帮助。

到目前为止，我建议您保持一致和可预测。 值得一提的是，可以修改现有模式，并且可能会有做新事情的情况。 只要确保如果您要引入一种新模式，它就会被用户数据证明是合理的并且经过良好测试。

使用设计模式进行 Web 设计

原型和测试

在研究阶段之后，是时候开始充分利用您所学的知识了。 这就是通过原型设计使设计栩栩如生的地方。 根据您的流程，原型可以是简单的低保真线框或更复杂的高保真设计。

从您研究中的现有模式作为基线开始。 在你完成这个过程时，确保原型涵盖了你需要的所有功能，并且它说明了所有用户目标。 可能需要进行一些修改和微调才能达到一个好的起点。

一旦您确信所有需求都包含在原型中，就可以进行一些测试以深入了解设计的可用性。 您将在这里验证设计模式的有效性以及整体功能。

测试在原型阶段如此重要的原因是，在某些情况下，客户无法清楚地表达或完全预测他们的想法和需求。 用户测试允许他们展示而不是讲述。 参与者展示他们实际使用网站的方式，而您则观察他们的行为并从中学习。 这对参与者和作为设计师的你都有用。

在进行测试时，务必记下核心用户目标，以保持专注。 邀请测试参与者后，将设计展示给尽可能多的用户。 如果时间紧迫，请确保至少对五个用户进行测试。

用户测试的主题本身就是一个完整的主题。 根据您的时间和预算选择最合理的方法。 总是有足够的时间会很好，但这并不总是可能的。 在紧要关头，“走廊”或“自助餐厅式”可用性测试可能很有用（在人流量大的区域设置可用性测试，利用路过的人来测试您的产品）。 即使让几个同事参与也总比没有测试好。

很有可能，您的设计模式一开始就不是完美的。 需要进行更改，并且需要进行更多测试以验证更新后的设计。 但是，您将从每个测试阶段获得更多洞察力，并能够结合您所学的内容继续迭代和测试，直到设计得到优化。

Web 设计模式确保一致的用户体验。 以下是提供更多入门信息的有用链接：

• 用户测试综合指南
• 史蒂夫克鲁格的火箭手术变得简单
• 风格指南示例