Sketch中响应式设计过程的提示和技巧

在本教程中，我将带您完成我在 sketch 中创建响应式设计的设计过程。为了保持重点，我将谈谈我为旅行应用程序设计的响应式登录页面。

如果您想为网页设计师学习 Sketch 的各个方面，请尝试我们的免费Sketch 教程，它为您提供了 19 个视频，专门用于教授您有效使用该软件所需的所有知识。

否则，让我们直接在 Sketch 中创建响应式设计！

基本设置

每个设计项目都有某种设置。对于这个特定的，在进入 Sketch 中的响应式设计过程之前，我将简要讨论内容和线框图。 

首先，内容

在开始设计项目之前掌握内容通常是一种很好的做法。这正是我开始我所有项目的方式（因为它的价值，它是我合同的一部分——我建议你也付诸实践）。本教程侧重于 UI 方面，省略了重要的 UX 问题，例如为什么选择某些内容、页面目标等。

在与您的客户或您的团队讨论内容时，您需要考虑小屏幕和大屏幕上的内容。我建议先为移动设备编写内容，然后将所有内容都写在 Google Doc 中。接下来，在手机上打开文档，确定它是否正确或是否太多。如果您在手机上滚动浏览一页又一页的书面内容，您知道您需要立即解决这个问题。 

无论如何，始终要大幅削减您的内容。

“每页去掉一半的字，然后去掉剩下的一半。” ——史蒂夫·克鲁格，  别让我思考

一旦您对移动内容感到满意，欢迎您向平板电脑和桌面版本添加更多内容。更大的屏幕有更多的屏幕空间来处理更详细的信息。 

当然，您将经历修订。在这个阶段不要太执着于它。内容应该接近最终版本，但不必一成不变。

同意所有网站版本的内容是设置设计的第一步。你现在知道会发生什么了。始终保持内容相同是绝对可以的，就像根据屏幕大小使某些内容出现或消失一样。

您在寻找什么样的内容？

网络上最常见的内容类型是书面文本。但是，还有其他内容，包括图像和图形（即照片或插图）、视频、报价、音频文件（即播客）、游戏甚至通过 iframe 嵌入的内容。

您不必确定所有视频和播客剧集。至少有一个视觉或听觉内容的描述。这就是我为这个客户所做的。我大致知道每个部分想要什么样的图形来进一步解释每个部分的价值主张。但是，在讨论内容时我没有实际的图形。我只是描述了它。

线框图

下一步是直观地表示内容。在这个项目中，我选择制作简单的低保真线框。我想快速而直观地绘制出内容。我制作了两个线框，一个移动设备和一个桌面，因为它们每个都有不同的内容要求。它们都可以让您大致了解登录页面的视觉结构。 

你可以使用任何你最熟悉的工具来制作线框，但我在这里使用了 Sketch。您也可以创建低保真笔和纸线框。没关系。您甚至可以使用本教程后面讨论的技术来创建响应式线框。 

让我们开始使用 Sketch 进行响应式 UI 设计。

响应式 UI 设计

如果我们首先确定所有变体中相同的内容和特定屏幕独有的内容，这将使我们的生活更轻松。

在此设计中，所有屏幕中都存在以下元素：

• 标题，包括 h1 和 h2（尽管它们出现在所有屏幕上，但它们是响应式的）

• 纽扣

• 链接

• 引号

• 背景

不同屏幕尺寸独有的元素：

• 图形（图形也会响应）

• 文本段落

完美的。现在我们可以开始适当地创建这些元素了。

设计基本用户界面

我的台式机和平板电脑的基本按钮是一个 352 像素 x 40 像素的矩形，边框半径为 5 像素。背景是#7455FF。在调整大小属性中，选择将对象固定在其左右边缘并设置固定高度。 

接下来是文本层，按钮的副本，带有 Note Sans UI 字体、粗体和 16px 字体大小。它是白色或#ffffff。它的对齐宽度设置为自动，文本层上没有设置其他设置。如果你愿意，你可以把按钮变成一个符号，虽然这个特定的设计没有必要，因为按钮在整个页面中只出现一次。

当您将这两个元素组合成一个组（或一个符号）时，您应该能够毫无问题地调整按钮的宽度，无论按钮的宽度如何，文本都会保持在中心。

您可以做的另一件事是使用Sketch 的 Anima 插件。它允许您创建可调整大小的流体屏幕，同时将它们的属性（例如间距、填充或高度）保持在一起。它非常适合带有表单的布局。 

我们可以使用 Anima 将不同的标题元素粘在一起，同时将其从移动设备调整到桌面设备。它还将为我们提供一个很好的指示，即这些元素在其他屏幕尺寸（而不是我们设计的屏幕尺寸）中的相互关系如何——介于两者之间的尺寸，如更大的手机或平板电脑。

但是，对于我们今天所做的事情，这个插件并没有添加太多。

Sketch 中的响应式排版

这种登陆页面设计需要一些大而漂亮的标题。在桌面版本中，h1 是 72px，而 h2 是 32px。72px 对于移动设备来说太过分了。我们需要使 h1 标题响应。它不像css中的流体排版那么简单，但它是可行的。

我们需要为每个 h1 标题创建一个样式，然后将其保存为具有正确命名约定或语法的文本样式。这将允许我们稍后在设计页面的其余部分时根据需要选择必要的 h1 。它不是完美的和漂亮的手册，但它就是这样。

对于 h1，这些样式如下：Noto Sans UI、粗体、72 号（桌面）、48 号（平板电脑）和 32 号（手机）。

相同的语法也可以应用于组织符号。例如：样式名称/子名称/特定样式 

因此，为了组织我们的排版，我们可以对台式机的大 h1 使用以下语法：Headings/H1/Desktop，平板电脑：Headings/H1/Tablet和手机：Headings/H1/Phone。

现在，它在下拉列表中显示 Headings/h1 的原因是因为我们没有添加任何其他样式。因此，让我们转到 h2 并在文本样式中添加另一层层次结构。

对于 h2，我使用以下样式：Noto Sans UI、粗体、73 号（台式机和平板电脑）和 18 号（手机）。让我们在电话上对 h2 使用以下语法：  Headings/H2/Phone。对于平板电脑，我们可以在这里做两件事，我们可以将它与桌面结合起来，称之为 Headings/H1/Desktop + Tablet ，或者我们可以有两种不同的样式，它们完全一样。我是在完成这个设计后写的，所以有点偏颇。我想说让我们将平板电脑与桌面分开，因为这是一种更好的设计实践。 

使用 Sketch 中的排版样式，您可以通过它们的语法规则真正获得详细和组织。然而，在撰写本文时，Sketch 中没有任何功能或插件可以为您调整字体大小，就像流体字体通过 CSS 工作的方式一样。截至目前，这仍然是一个手动过程。

• 使用和重用符号 

接下来，我们将创建可重复使用的符号，让我们的生活更轻松一些。在这个设计中，我们有很多来自过去用户的推荐和报价；他们需要做出反应。 

值得庆幸的是，推荐的格式在整个页面中都是相同的，所以我们只需要为他们做一次。首先，我们有这个人的名字，然后是他们的报价。然而，两者是不同的风格。让我们首先对源进行样式设置。我将文本样式命名为Testimonial/Source。这个元素的实际样式是：Noto Sans UI，粗体，大小 14，行高 24。接下来，我们有实际的证明。我将文本样式命名为Testimonial/Quote。它的样式是：Noto Serif，常规，大小 14，行高 24。 

要创建符号，请选择两个文本元素并单击工具栏左上角的创建符号图标。我将符号命名为Testimonial。

现在，我们需要编辑交易品种，以使其能够很好地适应不同的屏幕尺寸和不同的报价尺寸。双击新制作的符号进行编辑。 

首先，我们需要重命名符号中的元素。默认情况下，文本图层的名称是根据其自己的文本内容创建的。我分别将它们重命名为Source 的名称和Quote。 

接下来，我们需要调整两个文本元素的大小调整设置。它们将具有相同的调整大小属性。两者都没有固定的宽度或高度。但是，它们都会从左边缘和上边缘调整大小。这将确保在您调整符号大小时，文本元素将保留在它们所属的位置。 

要重复使用该符号，请单击工具栏左上角的“插入”下拉菜单并导航到“推荐”符号。然后单击画板上的任意位置以放置它。将文本粘贴内容更改为我们之前重命名的适当覆盖输入。根据需要调整大小。

响应式图形

我在这里使用的术语“响应式图形”略有不同。这个想法是图形将根据屏幕大小而变化。但是，我仍然需要为每个屏幕手动制作图形。除非它们是流动的，例如输入元素或按钮，否则它们不能自动生成。 

为了更好地理解什么是响应式图形，这里是我写的一篇关于响应式图标的文章的链接，但是对于所有类型的图形和图像，这个想法是完全相同的。 

重用图形元素

我们可以将行程卡变成符号，也可以将登陆页面社交部分下方的卡片变成符号。让我们使用第 3 天图形周围的社交卡片来代替（它更有趣一点）。 

再次选择卡片并将其变成符号。双击它以编辑符号。我们要确保它在垂直和水平方向上都能很好地调整大小。

从背景开始，我们想给它调整大小的属性，使对象固定在顶部和左侧。两个文本层也是如此。但是，我们希望将图像或头像固定在右上角。最后，当我们覆盖其内容时，不要忘记将这些元素的标题更改为更合适的名称。

瞧！

小细节也很重要

最后，我们还要处理小的设计细节。在这个特定的设计中，我大量使用了带有点的紫色小线。我也在把这个紫色指示器变成一个符号。

此符号由一个 8 像素 x 8 像素的圆圈组成，背景为 #7455FF。线条的宽度无关紧要，但默认值为 122px。它的高度是2px。同样，使用 #7455FF 背景。

在符号内，我们需要再次进行一些调整大小设置。对于圆圈，我们需要它保持相同的大小和相同的位置。我们将给它一个固定的宽度和高度，并将其固定在右上角。对于线条，我们也会给它一个固定的高度，但不是固定的宽度，因为我们需要它来扩大宽度。调整大小时，我们还将它固定在右边缘。 

这样，当我们调整这个符号的大小时，它只会改变线条的宽度。

一个快速的背景技巧

我们可以做的另一件事是将背景也设置为流动的。移动和桌面布局之间的部分高度确实不同；这意味着您必须将背景元素上下移动到正确的位置。

在这里，UI 需要 16 像素的白色边框。这意味着背景层需要距离画板边缘 16 像素。您所要做的就是选择背景层，然后使用 Anima 插件或使用调整大小属性，固定背景层的所有边缘。因此，将其固定在顶部、底部、左侧和右侧。现在，当您调整画板大小时，背景也会随之变化！

还有其他一切？

既然我们已经处理了大部分可以响应式、流动性或可重用符号的设计元素，现在是时候讨论此页面上的其余设计元素了。

简而言之，这是您卷起袖子并手动进行设计的地方。设计地图图形将不得不手工完成，因为它是独一无二的。这同样适用于布局和挑选颜色，以及决定排版。 

结论

遗憾的是，在 Sketch 中设计响应式界面还不是小菜一碟。但是有一些技术，甚至是插件，可以让你作为一名在 Sketch 中工作的设计师的生活变得更加轻松。我希望本教程能够让您很好地了解我自己的设计过程。设计响应式 UI 不必很乏味，其中很多也可以自动化。