有三个核心技能是每个现代产品设计师必须掌握的：产品思维、视觉设计和交互设计。

一般来说，你应该在这三个方面都很擅长，但你应该真正擅长其中两个方面。大多数设计师可以通过在线资源、实践和交付真实产品来自学视觉设计和产品思维。

作为一家 FAANG 公司的产品设计负责人，我已经指导了数百名有抱负的设计师，我发现交互设计往往是设计师自学的最具有挑战性的核心技能。

在本文中，我提供了一个学习和提高交互设计技能的基础和框架。

什么是交互成本？

交互设计背后的基础概念是“交互成本”，它经常被用来衡量一个产品的可用性。Nielsen Norman 将“交互成本”定义为用户为达到其目标而必须付出的精神和体力的总和。

一般来说，我们希望尽可能降低交互成本。但是，这很困难。因为随着你的产品覆盖的用例越多，这将变得困难。

支持更多的用例和功能会增加产品信息架构（IA）和导航的复杂度。一个用例是一连串的步骤，从用户的目标开始，到实现目标后的结果。

更复杂的 IA 本质上会增加完成用户目标所需的点击次数。例如 iOS 时钟应用具有以下闹钟用例目标：开启或关闭闹钟，创建一个新的闹钟和编辑闹钟。

经验法则的重点是减少目标用户的主要用例的交互成本。每当一个产品容纳了太多的用例（例如，有一百万个下拉菜单和功能的企业产品），它就变得更难使用。

为了避免这种过度复杂化，在建立一个全新的产品时，应该选择一个特定的用户和用例来关注。

物理和心理的交互成本

许多初级设计师都有一种误区，认为交互成本等于用户完成一项任务所需的点击次数。

然而，它比这更要更深入。交互成本分为心理交互成本（MIC）和物理交互成本（PIC），我将在下面解释。

如何评估交互成本 - 首先找到关键的用户流程

最佳实践是确定主要用例（即核心任务），并在必要时以牺牲二级和三级用例为代价降低其交互成本。

你可以使用核心任务分析（RRA）评估哪些用例交互流对你对主要用户最重要。

核心任务往往很重要，包括多个步骤的端对端任务、经常使用、为大量使用而构建、提供最大价值，具有明确的成功标准，并与产品指标挂钩。

比如说，在 Uber 应用中，乘客的关键路线是叫车，而他们的正常路线是添加支付方式。

特斯勒定律怎么帮助你降低交互成本

根据特斯勒定律的复杂性守恒定律，所有系统都具有无法消除或隐藏的内在复杂性。

好的设计可以确保尽可能多的复杂性负担在系统上，而不是在用户身上。

你应该首先减低主要用例中的交互成本，并将复杂性负担转移到最不重要的用例上。

Tesler 认为，设计师和工程师应该多花一周时间来降低应用的复杂度，而不是让数百万用户多花一分钟时间。

但是，请注意不要将接口简化到抽象的地步。常见的陷阱是牺牲 MIC 为代价来减少 PIC（就是你，苹果）。

当系统已经尽可能多地处理了固有的复杂性，你应该将其余的复杂性从主要用例转移到第二和第三用例。

大多数的数字产品都有复杂的设置，原因就在于此。在大多数情况下，设置通常是第三级用例，很少使用。

想象一下，如果你总是看到设置屏幕而不是主屏幕，并且需要点击几下才能到达你需要的屏幕。你可能会对这种不合理的交互成本感到沮丧。

心理交互成本（MIC）

心理交互成本（MICs）经常被新的设计师而忽略，他们只关注物理交互成本（PIC）。

你可能已经注意到，在可用性差的产品中，常见的 MIC 包括复杂的导航、密集的指示、非常规的心智模型和交互模式等。

注意力和记忆力

MIC 的两个最重要的组成部分是注意力和记忆力。

当一个任务需要过多的注意力或记忆力完成时，它的 MIC 就会成比例地高 - 降低了可用性。

一些增长注意力成本或转移注意力的常见元素包括弹出式横幅、模型、吸引注意力的视觉效果，以及用户当前任务无关的动作。

用户是容易分心的，确保在他们试图完成一项任务时，你不会把他们的注意力分散到其他地方。

评估注意力

如果你想要评估你的界面有多少注意力，可以考虑做一个眼动追踪研究（ETS）。你不仅可以用 ETS 来推断用户观察的地方，还有推断他们在想些什么。

ETS 特别研究了两个相关的眼球运动：“注视”和“扫视”。

当用户的瞳孔在界面元素上停留足够长的时间以处理它，就会发生注视。当眼睛处于运动状态——在界面中的不同区域之间游走时，就会发生扫视。

如果你的 ETS 显示许多与任务无关的扫视移动，这可能是由于一个分散注意力的界面。你的 ETS 结果能帮助你了解用户是否遗漏了界面中的关键元素，哪些是分散注意力的，哪些是不必要的。

工作记忆

所有不同类型的记忆，都有一个广泛的分类。

对于设计师而言，工作记忆（短期记忆的一部分）是最相关的。最短的记忆类型被称为工作类型，这在一个任务中通常只持续几秒钟的时间。

换句话说，我们的工作记忆负责在我们参与其他认知过程时，我们可以在脑海中保存信息。

米勒定律 指出，一般人在工作记忆中一次只能保留 5-11 个项目。在你的产品中完成一项任务所需的工作记忆与你强加给用户的 MIC 负担成正比。

反过来说，在任何时候，你的任务都不应该要求用户在工作记忆中保留七个以上的项目。

在极少数情况下，如果你要求用户在他们的记忆中持有超过 11 个项目，可以使用“分块”来减少他们的心理负担。分块是指将一个信息集的单个片段分解，然后归纳为一个有意义的整体。

例如，我们记住电话号码是 XXX-XXXX，而不是 XXXXXX。把数字分成两块，而不是一系列的七个独立单位，这样更容易记住。

另一个需要考虑的因素是注意力和记忆相关的是特斯勒定律。该定律指出，随着决策的时间随着选择的数量和复杂性增加。

避免过多的选择压倒用户，尽可能突出最适合他们的选项。将复杂的任务分解成较小的步骤，也就是在适当的时候使用渐进式披露。

物理交互成本（PIC）

我不会详细介绍 PIC，因为多数的设计师都非常了解它们。

常见的 PIC 因素包含到达距离和目标宽度（费茨法则），完成一项任务所需要的用户输入和操作的数量等等。

费茨法则指出，击中目标（即点击按钮）的时间是与你的输入设备的距离和目标的击中框宽度的函数

例如，如果你的鼠标光标离得很远，而按钮又很小，那么点击桌面上的一个按钮就需要更长的时间。

评估 PIC 的一个很好的方法就是任务分析和检查可用性指标，如“任务时间（TT）”。

TT 的根源是查看完成用户目标所需要的任务数量、频率、物理要求以及任务时间。

TT 和可用性指标是进阶话题，完全可以另起篇章，所以我把它留到下次再讲。

避免常见的陷阱

根据 Nielsen Norman Group 的调查，产品中最常见的导致交互成本增加的一些方面包括以下内容：

• 过度的阅读和滚动
• 四处寻找相关信息的用户
• 理解呈现给用户的信息
• 用户的物理输入
• 页面加载和等待时间
• 注意力切换
• 记忆负荷

情景交互成本

根据用户的不同，上述陷阱可能或多或少是严重的。例如，有阅读障碍的用户认为阅读比普通用户更有挑战性（建议：使用对阅读障碍者友好的字体，如 Dyslexie）。

来源

有运动障碍的用户可能会发现点击比阅读难得多，甚至用户的设备也可能发挥重要作用。例如，如果手机的网速很慢，在移动设备上加载页面可能需要很长时间。

交互路径与动机

在某些情况下，用户可以采取多种可能的路径来完成他们的目标。用户根据“预期效用”的概念来决定采取哪条路径，其定义为：预期效用 = 预期收益 - 预期互动成本。

换句话说，用户会权衡每个动作的收益和成本，并选择收益与成本最平衡的路径。

用户会倾向于具有最低预期交互成本的路径。即使有一个成本较低的路径，如果这个路径不直观或不熟悉，他们最终会选择他们更熟悉的路径，因为 MIC 较低。

具有高动机的用户（例如，由于你的营销或品牌推广）更有可能为完成他们的目标付出高昂的互动成本。 例如，如果苹果公司的网站有很高的交互成本，但用户可能仍然有足够的动力来完成他们的任务。

苹果是世界上最有价值的品牌是有原因的。

但是，如果用户想购买一个普通产品，并且结账过程有很高的交互成本，他们就会改从竞争对手那里购买。

有关更多详细信息，请查看 Nielsen Norman Group 的如何评估用例的交互成本的示例，找出“仪式”一词的来源。

总结

了解交互成本是任何现代产品设计师的一项重要技能。我们鼓励你超越表面的交互设计考虑，深入研究众多的 PIC 和 MIC 因素。

当然，我们应该努力尽可能地减少交互成本。但在必不得已的情况下，我们应该做出权衡，以确保主要用例的摩擦最小。

一个很好的第一步是建立一个准则、框架和测试的心理模型，以评估你的设计的交互成本。

如果你喜欢这篇文章，加入我的免费订阅邮件“雄心勃勃的设计师”，以获得更多职业和设计方面的见解。

我还在 Facebook 上运营一个私人指导小组和一个设计 Instagram 账户。

作为一名新的开发者，最困难的事情之一就是组建一个在线作品集。

• 我应该说什么？
• 我应该包括什么？
• 我应该省略什么？

其实这个过程没有那么难。

如果你遇到困难，请查看这 15 个 Web 开发者作品集示例以获取灵感。（如果你想获得更多关于建立你的作品集的指导，请看这里。）

1. Matt Farley

mattfarley.ca

他的工作：用户体验（UX）设计/用户界面（UI）设计和前端开发

2. Dejan Markovic

dejan.works

他的工作：UX 和 UI 设计

3. Rafael Caferati

caferati.me

他的工作：前端开发、后端开发和 UX 设计

4. Emily Ridge

www.emilyridge.ie

他的工作：WordPress 开发和设计

5. Ian Lunn

ianlunn.co.uk

他的工作：Web 设计和前端开发

6. Pierre Nel

pierre.io

他的工作：设计、前端开发、后端开发等等

7. Timmy O’Mahony

timmyomahony.com

他的工作：Django 开发者

8. Denise Chandler

www.denisechandler.com

他的工作：Web 设计、开发等等

9. Ben Adam

benadam.me

他的工作：UX/UI 设计和前端开发

10. Daniel Fischer

www.danielfischer.com

他的工作：前端开发、后端开发（Ruby on Rails）等等

11. Seb Kay

sebkay.com

他的工作：Web 设计和 WordPress 开发

12. Jonny MacEachern

www.jonny.me

他的工作：前端开发

13. Kathryn McClintock

www.kathrynmcclintock.com

他的工作：Drupal 开发者

14. Jack Jeznach

jacekjeznach.com

他的工作：前端和 WordPress 开发

15. 哪些开发者制作了你喜欢的作品集？

到处都有灵感——希望这篇文章能帮助你找到灵感！

想要了解更多如何创建一流的作品集？单击此处获取我的免费的 7 步备忘单，用于制作出色的作品集。

通过学习使用 Figma，你将迈出用户界面设计和用户体验设计的第一步。在你为自己或者为你自己的公司创建一个优秀的作品时，这些技能将非常有用。

在这个 Figma 入门教程中，我将使用来自 Frontend Mentor 的真实项目网站，我们将在 Figma 中重新创建该网站。通过构建项目来学习是巩固知识的好方法，因此我建议你下载素材并跟着教程动手创建。Figma 入门教程视频版本。

在我们探索 Figma 的不同功能时，我将把这个教程分成很多部分，包括：

• 帐户设置
• 设计文件
• 设计素材
• 如何开始——基础知识
• 框架
• 网格列和行
• 形状
• 导入图像
• 标记和分组
• 文本
• 导航栏
• 按钮设计
• 标题和缩放
• 附加文本设置
• 主页横幅和 Figma 层
• 组和部分
• 字体和 Figma 颜色
• 文本行高和间距
• 对齐和捕捉
• 使用形状和图像进行遮罩
• 复制组和节
• 更新部分
• 颜色选择器和复制部分（续）
• 颜色选择和选择正确的色调
• 推荐区
• 自动布局
• 自动布局选项
• 自动布局对齐
• 自动布局内容
• 图库图片
• 调整图像大小
• 页脚
• SVG 颜色和叠加编辑
• 自动布局菜单页脚
• 图层工具栏、隐藏和锁定
• 原型查看器
• 框架和页面
• 原型交互
• 原型交互导航到页面
• 共享测试和预览原型
• 导出页面
• 导出组或部分

在本文中，我将简要概述本教程的一些主要部分，以便你可以开始在 Figma 中进行设计。

介绍

让我们首先在 Figma 网站上创建一个帐户。你可以在 Figma.com 执行此操作。

只需注册一个新帐户（电子邮件或 Google 登录）——完全免费。

接下来，我们需要获取要用于该项目的设计素材，我们将从 Frontend Mentor 获取这些素材。 你可以在这里下载它们。

我们将构建第一个草稿页面。看看我们将在下面使用的默认设计布局。选择 +，或在右侧创建一个新的设计页面。

如何在 Figma 中制作框架

首先，我们将创建一个框架，就是一个页面，我们在其上进行设计。你可以根据需要调整框架的大小。

此示例将是一个网站，因此我们将选择桌面框架——但你也可以创建移动应用程序框架，甚至自定义框架。

• 从顶部菜单中选择框架工具
• 在右侧面板上选择框架大小

如何在 Figma 中添加网格和列

在我们开始设计之前，你需要添加网格来帮助你保持页面内容对齐的一致性。

你可以向框架添加网格并对其进行自定义。例如，我通常更喜欢 12 个网格，因为这是网站开发的默认设置。

• 选择要网格化的框架
• 选择右侧面板上的布局网格
• 选择列和 12 个单位

如何在 Figma 中使用形状

使用 Figma 中的形状和元素创建正方形、圆形、线条等。这些是在页面上创建设计的基础。

我将从一个简单的矩形开始。我们将使用它来创建主页顶部的横幅部分。

• 选择方形工具
• 创建一个正方形
• 开始塑造和调整它的大小

如何在 Figma 中添加图片

你可以将在线资源或本地的图像添加到你的页面。图片是设计网站的重要组成部分，尤其是对于横幅部分。

让我们添加一个 logo 作为我们将添加到屏幕左上角的第一个图像。

• 从本地计算机拖放图像
• 从形状图像上传选项导入图像
• 调整图像大小并将其放置在设计上

如何在 Figma 中为设计添加文本

要向设计添加文本，请选择文本工具并将其放置在页面上。字体将默认为 Roboto，但你可以在任何阶段更改字体系列、大小和颜色。

在本例中，我们将使用右侧面板来更改字体的颜色和大小，以及稍后的字体系列。

• 选择文本工具
• 添加“关于”文本作为导航的开始
• 确保尺寸和颜色为 24 和白色

如何在 Figma 中标记元素和创建组

在 Figma 中处理大量图层可能会让人感到困惑，因此在创建元素后立即标记所有元素。更好的是使用标签（例如“横幅背景”或“导航栏”）对不同的部分和形状进行分组。

• 选择元素并右键单击以进行分组，或按 Ctrl + G
• 为组命名
• 将页面的每个部分放在相应的组内，以在页面变大时提高可读性

总结

Figma 入门很容易，但要充分发挥它的潜力，还有很多东西需要学习。有了形状、图像和文本的基础知识，你就可以轻松开始制作网站原型、设计移动应用程序等等。

如果你想更深入地了解这些基础知识，我建议你观看并关注整个视频教程，该教程更深入地介绍各个方面。

你可以在这里查看设计的完整效果。

这整个过程是我在自己的频道上尝试教授的内容的一部分，也是我正在编写的名为 Enhance UI 的设计课程/书籍的一部分。我的目标是帮助开发人员了解设计的基本原理。在这里查看我的书籍。

我希望你喜欢这篇文章。如果你不知道我是谁，我是来自澳大利亚的 Adrian。我在 Twitter 和 YouTube 上有一个频道，所以如果你想更多地了解我或喜欢我的内容，请随时查看。😉

• YouTube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

原文：What is Figma? A Design Crash Course [2021 Tutorial]，作者：Adrian Twarog

让我来介绍一下新的设计趋势：毛玻璃效果。经历了去年饱受争议、缺乏可用性的新拟物设计（neumorphism design trend）之后，这种设计似乎更有前景。

什么是毛玻璃效果

基本上，它的主要特征就是半透明的背景，以及阴影和边框。

同时还要为背景加上模糊效果，使得背景之后的元素根据自身内容产生漂亮的“变形”效果。

示例：

这是一个应用毛玻璃效果的真实示例，可以在 ui.glass 网站上查看（它是一个即将推出的 UI 库）。

你可以在上图中右侧代码后面看到我所说的模糊效果，后方的内容产生了漂亮的变形效果，同时还保持了可读性，赏心悦目。

这就是本教程要构建出的效果。我们将看到如何仅用 HTML 和 CSS 来实现它。

开始

学习本教程，你只需要一个浏览器和一个代码编辑器，因为我们只会用到 HTML 和 CSS。

我们将要构建的元素的最终效果如下：

毛玻璃效果示例

首先，创建一个 HTML 文件，写入如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect</title>
</head>
<body>
    <!-- code goes here -->
</body>
</html>

我不太喜欢默认的字体，让我们使用更好看的 Google Fonts 字体。我很喜欢 Inter 字体，在 head 标签中将其引入：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Google Fonts

现在，为 body 标签添加一些样式，并使用鲜艳的颜色和渐变作为背景：

body {
  padding: 4.5rem;
  margin: 0;
  background: #edc0bf;
  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
  font-family: 'Inter', sans-serif;
}

很好！现在基本的标签和样式做好了，接下来在 body 标签里创建一个卡片元素：

<div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
    <a href="https://ui.glass">Read more</a>
</div>

卡片中的内容是什么无关紧要——你可以加入一些按钮、图标或者其他元素。

在卡片上应用毛玻璃效果之前，先添加一些排版样式，加入以下 CSS：

.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}

很好！接下来将会演示如何应用这个特殊的效果。

如何使用 CSS 制作毛玻璃效果

你要做的只是设置一个半透明背景颜色，并使用 backdrop-filter 属性设置模糊效果。在 .card 元素的样式中加入以下 CSS：

.card {
	/* other styles */
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

使用 CSS 制作毛玻璃效果

现在我们已经为卡片加上了毛玻璃效果的样式，可是为什么看起来没效果？

我们还需要在卡片后面加上一些元素，如一些形状或者图片，以便看到它的实际效果。

后方没有形状时的效果

让我们使用 img 标签在 body 起始标签之后加入一个形状图片：

<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">

并为 .shape 元素添加以下样式，将其定位在页面的合适位置：

.shape {
  position: absolute;
  width: 150px;
  top: .5rem;
  left: .5rem;
}

现在你应该能看到完整的毛玻璃效果了，恭喜！

毛玻璃效果示例

可以在这里查看本教程的完整代码。

浏览器支持

毛玻璃效果的主要缺点之一就是 backdrop-filter 属性在 Internet Explorer 11 上不被支持，而且 Firefox 默认禁用了这个属性。

backdrop-filter 的浏览器支持情况

然而，根据 caniuse.com 网站的数据，全世界超过 88.2% 的浏览器支持这个样式。如果 Firefox 决定默认启用这个属性，并且随着过时浏览器（如 IE 11）的使用率下降，我相信未来几年毛玻璃效果会得到更广泛的应用。

在此之前，尽管在你的个人项目中使用它吧，或者使用这个神奇的设计来创建一些页面玩一玩。

总结

希望这个教程能帮助你了解毛玻璃效果这个新设计趋势。

如果你想更进一步地探索，可以了解一下我和朋友一直在做的一个项目。

它叫作 Glassmorphism UI，是一个基于这个新设计趋势的开源 CSS UI 库。欢迎使用你的邮件地址注册，以便第一时间获取开发进度信息以及正式发布的通知。

这个库未来将能够通过 NPM 下载，同时也会发布在 Github 上（基于 MIT 协议）。

原文：What is Glassmorphism? Create This New Design Effect Using Only HTML and CSS，作者：Zoltán Szőgyényi

如果你打算建设一个网站，你可以简单快速地绘制一个线框图，即使你不是平面设计师。

只需一支铅笔和一些白纸就可以动手实践了。如果想要玩点花哨的，也可以像我一样用 iPad 和 iPencil 来做。

我将展示如何快速创建一个可交互的线框图文档，我们可以用它给客户做演示，也可以把它用在开发过程中——先评估设计，再决定是否编码实现。

步骤如下：

1. 规划网站地图
2. 创建主页的线框图
3. 在线框图中使用标记
4. 创建其他组件的线框图（页眉，菜单，页脚）
5. 创建功能介绍页面和联系方式页面的线框图
6. 创建响应式线框图

步骤 #1: 规划网站地图

构建线框图，首先要规划好网站地图。在绘制页面之前，网站地图能让你了解网站结构、需要构建哪些页面以及页面之间的关系。

大部分小型网站也许不需要网站地图，它们通常只有一个登录页或者一些常见页面，如“功能介绍”、“关于我们”、“联系我们”等。

也就是说，一旦网站或者应用变得庞大复杂，就需要有一个网站地图。

网站地图提供了站点内容和功能的概览。

在示例中，我们将会创建一个包含主页、功能介绍页面、联系方式页面的站点地图。

不必为此花费太多时间，只需要画几个框表示不同页面（下面几行表示子页面）就行了。

步骤 #2：创建主页线框图

开始创建第一个页面。过程很简单，我们使用简单的几何图形来表示页面元素，如：

• 带有对角线的方框表示图像
• 横线表示文本段落
• 中间有一个 L 的圆圈表示 logo

我们在主页中添加了图片轮播、菜单和 logo，以及一些说明标签。

将每个版块的相关元素包含在一个矩形框中对于之后复用这些版块很有帮助（尤其是 header 和 footer 部分）。

创建公司介绍版块和赞助商版块（包含赞助商的 logo 或图片），即“关于我们”页面。

随着设计的进展，我们还可以按需在主页中添加一些其他元素，例如在合适的位置加上“立即体验”按钮。

最后再加上 Footer 版块，其中包含了用户信息表单、企业联系方式，并且这里再次复用了 logo。

步骤 #3：在线框图中使用标注

线框图不仅仅是给设计师看的，通常开发者、客户和管理者也可能会查看。所以，为各部分内容添加适当的标注是很有用的，能够为初次查看这个线框图的读者提供一些指引。我通常在即将完成一个页面时为其添加标注。

在示例中，我们标注出主页并使用红色字体标记其中的各部分内容。

这些内容可能需要标注：各个版块、标题、表单以及图片内容。

注意，标注不必指定最终展示的准确内容，只要说明它表示什么就行了。所以，比起标注准确内容，你更应该使用概括性文字来做标注。

步骤 #4：创建其他组件的线框图，如页眉、菜单、页脚等

我们已经创建了页眉和页脚，所以可以在新增的页面中复用它们。如果你用的是电子设备，可以用复制粘贴的方式在新页面中复用元素。（如果你用的是纸和笔，那你可以用小刀和复印机来达到同样的效果）

这样能让你的设计保持一致性。像 Figma 这样的工具允许你创建通用组件，这些组件可以在整个设计中重复使用。通过配置，这些组件实例甚至能够随着源组件的变化动态更新。

示例中，我们将通过复用组件来创建一个“功能介绍”页面。创建一个“功能描述”组件，再将它复制粘贴几次，这样就可以在几分钟时间里构建整个页面结构了。

步骤 #5：“功能介绍”和“联系我们”页面

构建好一些通用组件之后，再构建其他页面就变得越来越简单了。“功能介绍”页面完成之后，可以开始创建“联系我们”页面，我们只需要在其中添加一些通用组件，比如 Google 地图、“联系我们”表单和一些联系方式。

示例中，我给电话号码和邮件地址加上了小图标，用一大块区域来展示访问者所处的地理位置。

“联系我们”表单放在了下方（没有边框），Google 地图放在了右边。

步骤 #6：创建响应式线框图

如今，设计良好的线框图一定要兼容移动端，因为很多人都在移动设备上浏览网页。

最好了解一下如何适配小屏设备，如果有时间的话，你还可以构建一个平板电脑版本的响应式线框图。

示例中，我们逐段地构建主页内容，大部分行和列的内容都折叠起来了，而且由于我们是在移动视口上，很多图片、文字和区块都会缩小。

因此，可能有一些区域的高度还是跟桌面版本的一样。另一方面，一些包含很多图片的区域（比如赞助商列表）的滚动高度会变得很大。

因此，我经常会添加一些额外的标注来说明桌面版本和移动端版本的元素之间的对应关系。

总结

线框图是一个能够让你快速了解网站或应用的视觉效果的方式。建议你在开发下一个项目的时候试试线框图，它能帮你更好地规划功能、设计外观。

绘制线框图是前期规划的理想方式，因为比起让设计师做出一个完整的界面原型，它能够节省许多时间。

作为一个开发者，我为自己的网站构建线框图好多年了，我几乎从来不会在勾画出网站的视觉效果之前就投入开发。

希望你喜欢这篇文章。可能你还不了解我，我是来自澳大利亚的 Adrian。我在 Twitter 和 YouTube 上有个小频道，如果你想了解我的更多信息或者喜欢我创作的内容，欢迎来我的频道看看。

• Youtube
• Twitter

原文：What is a Wireframe? This UX Design Tutorial Will Show You，作者：Adrian Twarog