网页设计模式的初学者指南

作为网站所有者，您知道您的用户既可以是您最大的资产，也可以是您最艰难的批评家。典型的互联网用户花费每天在线数小时遇到数千个接口。他们知道什么效果很好，他们期望所有网站运行良好，他们对“工作良好”的定义可能与您自己的不同。

Luckily, you’re in good company. Thousands of designers have tinkered for years to perfect the interface components we use every day, leaving us with what we call网页设计模式。您不必依靠自己的直觉来建立出色的体验。相反，请从您之前的那些提示。

在本介绍性指南中，我将解释模式的重要性网站设计, how they aid in the design process, and explore some common but important design patterns that most of us take for granted.

A web design pattern is not a standardized template or a precisely specified design. Rather, it is a collection of best practices that solve a user-centered problem. Let’s look at a simple example of a web design pattern: dropdown menus.

在为用户体验设计时，空间总是有限的。在视觉混乱设置之前，您只能在视口内拟合如此多的页面元素（即网页的可见区域）。这对带有许多页面的较大网站提出了一个挑战。设计人员如何在单页上拟合许多不同站点部分的链接？

一种解决方案是垂直下拉菜单。此设计模式指定了在某些触发器后出现的选项列表，通常是鼠标请事件或鼠标单击。用户可以从此新菜单中选择任何选项。当用户徘徊时，菜单会关闭。

As you can imagine, there’s an endless number of ways one could implement a dropdown on a website. Here’s just one example from theHubSpot.com homepage：

您可以控制特定的选项，功能，美学，甚至对其编程的语言进行控制。但是，下拉菜单的设计模式为实施提供了可用性指南。

那么，为什么网页设计师遵循这些模式？最终，有两个关键原因：

第一的，设计模式可确保良好的UX。网页设计模式指示设计师如何放置和安排页面元素，以最好地满足访问者的需求并建立关键的信任。

想象一下，降落在设计不良的跌倒网站上。您可能会对网站以及它代表的业务形成直接的负面看法，这都是因为它们无法完善基本导航。通过遵守设计模式，可以在很大程度上避免这种情况。

第二，设计模式简化了设计过程。模式解决了跨网站看到的常见UX问题，因此设计师无需一遍又一遍地发明解决同一问题的解决方案。

对于每个下拉菜单的每个网站来说，测试和开发自己的最佳实践都将非常低效。从测试用户从下拉列表中倾向于期望的多年，我们知道他们的偏好在站点之间或多或少保持一致。因此，我们相反分享基于这些见解的最佳实践。

当然，我们自己都是互联网用户。一些网页设计模式可能反映了我们自己的常识，这是我们自己在网络上的经验所影响的。但是，设计师与他们设计的人员不同，因此对于大多数用户来说，合乎逻辑的解决方案可能并不相同。我们需要指南，以确保为尽可能多的用户优化界面。

网页设计模式的示例

在抽象中掌握Web设计模式的概念可能是一项挑战，因此，让我们回顾下面的更多示例。

导航网络设计模式

成功的网页设计需要指甲导航。It’s one of the first things users see on your website, and probably the last if it doesn’t do its job. Here are just a few of the many navigational patterns that work well for getting visitors where they want to go.

Grid Layout

The grid layout is a foundational design component of many modern websites. This design pattern divides the page into a set number of columns of equal width and spacing between them. Page elements are placed based on these column boundaries, so they are aligned vertically, and often horizontally as well.

图像源

网格解决了用户可以轻松遵循的方式提出许多同等重要性的问题的问题。设计师可以完全控制页面元素之间的尺寸和间距，尽管建议至少提供一些空格帮助可见性。

Some websitesbreak the gridfor an alternate take on the grid system that engages visitors, but this should still be done with usability principles in mind.

面包屑

面包屑导航帮助用户了解他们在网站上的位置，通常以水平文本链接的导航栏实现。每个文本链接代表网站层次结构中的一个页面，用户可以通过单击一个页面快速跳到另一个页面。

在下面的示例中，面包屑在H1“非学位学生”上方的橙色中可见：

图像源

The design pattern of breadcrumb navigation also recommends sizing breadcrumbs down to a次要导航功能，在链接之间放置一个类似箭头的符号，例如>或»，以及从最大范围到最小的从左到右订购链接。

向导

A wizard helps users complete a relatively complex series of steps in order to accomplish some greater goal. Wizards break down the process and present each step one at a time, requiring users to complete the current step before advancing. Common applications of this method include creating and/or configuring a user account, completing a checkout, or following a tutorial.

向导设计模式决定，向导中的每个窗口应仅包含一个步骤，并伴有清晰的语言，一个按钮向后和撤消步骤，进度指示器显示了所采取的步骤和剩下的步骤完成，以及一个选择取消向导的选项。任何时候。

无限滚动

在无限滚动提要，当用户滚动到窗口底部时，新内容会不断加载。这给人以“无尽的内容”的幻想，保持参与度高和交互作用低。

图像源

无限卷动opposite of分页，将内容分为网站的多个页面。

Infinite滚动在用户倾向于探索的网站上最有效，而无需考虑特定内容，并且只能在这些情况下实施。无限滚动机制还可能包括一个动画图标，以表明正在加载更多内容。

另外，一些无限滚动的迭代显示Lightbox元素如果单击一块内容，而不是将用户引导到新页面。这样可以防止用户在滚动中失去自己的位置。

响应式网络设计模式

智能手机和其他消费者触摸屏设备的兴起改变了可用性游戏。屏幕不仅较小，而且人们与触摸屏的互动方式与台式机差异很大 - 网站设计师需要记住这一点。

Here are some examples of web design patterns that foster a better mobile UX:

汉堡按钮

有限空间的另一个解决方案hamburger button将网站的主要导航置于三个水平堆叠线的图标中。按下时，出现导航链接菜单：

图像源

由于移动设备，汉堡按钮已经变得司空见惯，尽管您也会在一些桌面布局上看到它们。但是，在为移动设备设计时，请确保图标足够大，以至于可见且可按压，将菜单项放置得足够远，因此用户不会无意中按错误的链接。另外，允许用户在不选择菜单选项的情况下关闭菜单。

拉力到消除

The concept of pull-to-refresh is...well, it’s in the name. To load new content on a mobile feed or refresh a page, pull downward with your finger, then release.

图像源

由于拉力到删除非常方便，并使用户可以更多地控制其供稿，因此此方法在移动网站和应用程序中得到了广泛的实现。

有效使用此方法需要以文本，图标或动画的形式显示“刷新指标”。另外，用户必须向下拉出内容，以触发刷新，否则，内容应在没有刷新的情况下恢复原状。

单指移动布局

这种移动网络设计模式不是指导特定功能的设计，而是适用于移动网站的布局。它鼓励设计师考虑用户用一只手抓住其移动设备的用户。

Essentially, the higher on the screen an element is on the screen, the harder it is to reach with one’s thumb. For convenience and accessibility reasons, be mindful when placing interactive elements at the very top of mobile web pages. Prevent it if possible.

图像源

And yes, I know thumbs aren’t technically fingers, but you get the idea.

其他常见的网页设计模式

我们在我们访问的每个网页上看到设计模式的迭代，实际上应用于任何用户目标。您可能还经历了更多您的经历：

购物车

Shopping carts are a staple of ecommerce. If your online store allows customers to purchase multiple products at a time and save their selected items to be purchased later, this is a design pattern to follow.

要将项目添加到购物车中，用户只需按产品页面上的“添加到购物车”按钮即可。可以通过任何页面访问购物车本身，可以通过手推车链接（通常是购物车图标）在页面顶部访问。购物车设计还应使用户能够更改购物车内的物品（例如更改数量或从购物车中取出），并且购物车中的每个项目都应包括回到原始产品页面的链接。

拖放式上传

每当网站要求我从计算机上传文件时，我总是会在他们提供拖放选项时始终感谢它。这为我多次单击了文件上传的任务。

图像源

The drag-and-drop interface should designate a large page region for easily “dropping” files with visual feedback of a successful upload. Importantly, remember to also provide a file search and upload method for users who can’t complete the drag-and-drop action, as seen in the example above.

Modal Window

有时，您想将用户的整个焦点引导到页面上的单个元素 - 这是模式窗口（也称为模式）的目的。在前面显示一个模态窗口，并停用所有其他页面内容，例如：

图像源

模态更改用户与网页的互动方式（或“模式”）。要返回主页，您必须在模态窗口内完成操作，或者通过手动关闭窗口来将其删除。

Modals are intended to steal attention, if only temporarily. So, they should be used carefully and sparingly. To learn about modal window design best practices, see our模式指南。

在您的网站上使用网页设计模式

These are just a handful of the numerous patterns at your disposal. Whether you’re adding a new feature to your website or building one from the ground up, chances are there’s a design pattern out there that will help guide your design process.

UI-Patterns.com是了解更多有关不同UI模式以及何时使用它们的绝佳参考。它列出了有关导航，用户输入等方面的可用性挑战的解决方案。另外，请查看其他网站的设计选择 - 成功的网站倾向于遵循这些约定。

最后，请记住，网页设计模式最终是指南，而不是法律。即使遵守图案，您的设计仍然可能无法完美地为您的用户服务，这是可以预料的。执行用户测试在引入接口可用性的更改时，请相应地调整UI元素以提高易用性。用户可能不会注意到这些好处，但是您的网站的增长会显示出来。