sketch web组件

在本教程中，我将教您如何在Sketch中为移动设备和台式机设计一个简单而复杂的网络日记应用程序。 我们将以VSCO美学为灵感，在本教程的最后，您将了解Sketch的许多最重要的功能。

除了这些特定于应用程序的技能之外，您还将通过模块化比例尺对设置字体和布局有更深入的了解。 我们将在Sketch中使用一些基本和中间技术。 让我们开始吧！

教程资产

您需要以下资产才能继续进行：

• Unsplash中的图片（对于英雄图片，您可以下载我最近拍摄的一张）
• Google字体中的Merriweather字体
• Google字体的Montserrat字体
• The Noun Project中的图标
• Facebook徽标
• Twitter徽标
• Instagram徽标
• Google Plus徽标

快速免责声明

在打开Sketch并创建一个新文档之前，我应该指出，这个概念完全是理论上的。 在将其转变为真正的可用产品之前，需要进行更深入的市场分析。 我一直热衷于使用精美的照片进行在线故事讲述，因此我创建了这个概念，以教会您如何从设计师的角度了解网络趋势。

版式

当我开始一个项目时，我总是从排版开始，因为我坚信排版是通信设计师可以使用的最重要的工具。

对于正文和较大的标题，我选择了Merriweather，这是一种衬线字体，灵感来自旧书的面Kong，非常适合讲述故事和旅途。 在高分辨率显示器上，它给人以真实，印刷的日记的感觉。

另一方面，对于常见的UI元素（例如按钮和标签），我想要一些现代的东西，因此我选择了Montserrat，这是一种干净，简单的sans-serif字体。

设置画板

首先，我想写一些关于如何处理布局和版式设置的信息。 Adobe Typekit的类型管理器Tim Brown创建了一个名为Modular Scale的出色工具。 这个工具很棒：我们定义了理想的文字大小并建议了一个重要数字后，会将这些数字除以并乘以数学上熟悉的值，例如黄金分割率或完美的五分之一。 稍后，当我们设置印刷层次结构和布局的基本元素时，我将始终参考这些数字。

注意 ：显然，在某些情况下，我们需要打破此规则，但这将使我们在布局和版式中达到自然的平衡，这令人赏心悦目。

我将理想的文字大小设置为18px，并将670px定义为一个重要数字，因为这将是我们移动版式的实际可用宽度。

第1步

打开草图后，让我们在“ 插入”菜单中选择“ 画板（A）”选项。

对于我们的移动视图，我建议您选择iPhone 6尺寸，但是如果您使用其他型号的iPhone，则最好选择该尺寸。 使用Sketch具有一个巨大的优势，它使您可以使用Sketch Mirror将工作实时镜像到iOS设备，而无需导出或传输图像。 Mirror是设计工作流程的重要组成部分，因为有了它，我可以立即看到手中的工作最终结果。

要激活此功能，您将需要App Store中的Sketch Mirror应用程序。 然后在Sketch中单击“ 镜像”图标（确保您的设备位于同一网络或通过USB电缆连接）。

对于桌面视图，我选择了1440px宽的Desktop HD画布。

提示：以后我们可以通过更改检查器面板上的数字来修改画板的高度。

第2步

有了合适的画板之后，该设置一些参考线了，以便我们的布局具有足够的空间并看上去平衡。 要打开标尺和基本指南，请转到查看>显示标尺（⌃ R） 。 然后选择移动画布的中间位置，该位置将为375px，并在第一个和最后一个40px处添加一个标记，以便它可以与水平40px的填充一起使用。

要创建准则，请在标尺上单击40px，375px和710px点。

在桌面视图的情况下，我们还设置了中间参考线（720px）和100px填充。

创建顶部导航区域

注意：如果您想使用原始的Safari菜单栏创建逼真的模型，则可以创建屏幕截图并粘贴到裁剪的图像中，也可以下载由（前）Teehan创建的iPhone 6 GUI模板（iOS 8） +松懈的团队。

提示：很高兴知道Sketch也具有内置的iOS模板，您可以在“ 文件”>“从模板中新建”>“ iOS UI设计”下找到该模板。

第1步

要创建顶部导航栏，请选择“ 矩形（R）”工具。

提示：我真的建议您学习最重要的快捷方式，因为它们易于使用。 在大多数情况下，快捷键是我们工具的第一个字母，因此对于Rectangle，它是R ；对于椭圆形，它是O ；对于Line，它是L。

使用矩形工具创建一个750px宽，120px高的矩形，其背景颜色为#F9F9F9 。

提示：在颜色方面，我总是使用HSBA（色调，饱和度，亮度，Alpha）数字，因为修改它们和预先想象结果很容易。

第2步

让我们选择椭圆（O）工具，然后按Shift + Alt键，绘制一个完美的80px圆。 在右侧的“检查器”面板中，单击“ 填充”按钮，然后在第四个选项卡下上传个人资料图片。

提示：如果按Alt键并移动光标，则可以看到所选元素之间的距离（以像素为单位）。

第三步

选择文本工具（T） ，然后在配置文件图片旁边放置一个名称，并向左填充20px。 将字体大小设置为22px，将字体颜色设置为#9E846E 。 您可以在“ 类型”>“大写”菜单中设置大写字母。

将具有相同设置的“新故事”文本放置在画板的右侧，并使用20px右填充。

第4步

现在，我们将创建我们的第一个图标，它将是一个“ +”图标。

让我们用矩形（R）工具创建一个36x6px的矩形，它的颜色与文本相同。 完成后，复制结果形状。

选择第二个，然后在检查器面板（右侧）上将其旋转90度。

将矩形完美地放置在一起之后，将第一个矩形拖放到图层面板上的第二个矩形中。 为此，我们将两个单独的图层合并为一个36x36px图标。

第5步

对于我们的桌面视图，我们还具有相同的全宽导航矩形，高度为70px，不透明度为80％。

菜单按钮的文本大小略小； 14像素，内边距为40 #CCCCCC并使用#CCCCCC分隔线。

设计固定底部导航

对于移动视图，我们将创建一个固定的底部导航栏，用户可以在其中选择网格，收藏夹位置，搜索和配置文件页面。

第1步

就像顶部导航一样，我们将以100％高的全幅#FFFFFF矩形（不透明度为90％）开始。 让我们在此矩形的顶部放置一条1px #E6E6E6线，并将其分成四个相等的列。

我们所有的图标都高50像素，颜色为#666666 。

提示：您可以通过排列9个14x14px矩形（填充4px）来创建自己的“网格”图标。

创建标题

第1步

对于英雄图像，让我们创建一个全幅，850px高的矩形，并用照片填充它，就像个人资料照片一样。 为了确保文本仍然可读，我在图像上放置了黑色层，不透明度为20％。

如果是桌面英雄图像，建议高度为1000px。 另外，请确保图像在导航栏下方。

第2步

对于标题和副标题，字体大小分别为60px和24px。 标题字体为Merriweather Bold，字幕字体为Montserrat Regular。

第三步

我们的英雄图片上的最后一个元素是“获取灵感”按钮，其中字体大小为24px，字母间距为1.33px。 按钮本身为338x89px，带有3px的白色边框。 让我们将按钮放置在图片底部70px处。

对于桌面视图，我建议使用较小的18px字体。

创建商品卡

第1步

在这一步中，我们将为最受欢迎的故事创建一个特殊的地方。 为此，请以670x480px的图像填充矩形开始，该矩形的右上角带有一个特殊图标。 每个人都可以使用此图标在网站上标记自己喜欢的旅程。

此图标有一个80x80px的白色圆圈，内部厚度为2px。 “图钉”图标的宽度为12像素，我们使用18像素的蒙特塞拉特常规编号。 整个图标的不透明度为70％，顶部和右侧填充为15px。

在桌面视图中，此图片为1240x750px，“收藏夹位置”图标为50x50px。

第2步

现在我们可以创建我们的第一张卡。 第一步，制作一个670x522px的图像填充矩形，然后制作另一个670x435px #FFFFFF矩形。 将第二个矩形放在第一个矩形的顶部。

创建第三个670x744px矩形，并用前两个矩形覆盖。 将此层放置在先前的层之下。 给该层阴影一点，使其弹出一点。

边框半径在我们的卡片设计中至关重要，因此请将其设置为5px。 为了在每个图层上看到此半径，请单击此阴影图层并将其用作遮罩。

由于在移动设备上我们没有悬停状态，因此我们将悬停视图用作标准视图，因此所有信息都将立即可见。

后，我们选择连接到该卡的设计每一层，我们可以集团（⌘-G）在一起，那么我们可以很容易地复制它们的同时按下Alt键和移动所述原始组向下（或者我们可以与⌘-C和重复⌘ -V方法。）

提示：在这样的大型项目中，将各层组织成组非常有用。

在桌面视图中，我们可以使用相同的卡。 对于更复杂的结果，我建议稍微调整比例和字体大小。

别忘了我们在桌面上有一个悬停视图，因此我们可以默认创建一个更简单的卡版本，当用户将光标悬停在卡上方时，会显示更复杂的版本。

使用旅程集合设计地图部分

借助此地图部分，可以按位置过滤和搜索旅程。 结果将显示为多位作者撰写的合集。

第1步

创建一个750x850px的矩形，并用简单的Google Maps屏幕截图填充。 对于搜索栏，在该矩形的顶部放置另一个具有80％不透明度的矩形。

提示：为便于对齐，请在搜索栏的左侧创建一个正方形。 之后，我们可以将搜索图标放置在正确的位置。

我选择#B3483E作为我的地图UI的主要颜色。 此颜色的灵感来自Pantone Marsala （2015年Pantone色彩）。

第2步

当某人搜索特定位置时，结果将显示为小型日记本。 每本日记本都是一个320x414px的图片填充矩形，上面带有阴影。

第三步

在桌面视图中，几乎所有内容都是相同的，只是我们将日志放置在地图旁边而不是地图下方。

设计小型商品卡

第1步

设计小商品卡类似于创建较大的商品卡，只是我们删除了故事的描述和摘要部分。 这样，我们可以在同一空间中显示更多信息，因此用户可以同时浏览更多内容。

在桌面视图中，除了减小卡的大小外，我们还将它们按三列网格排序。 我相信这将为我们提供一种方便快捷的发现和探索新内容的方法。

呼吁采取行动

在用页脚完成项目之前，不可避免地要提供一个号召性用语部分。

第1步

与往常一样，我们需要一个750x1000px的图片填充矩形。 为了使文本可读，我们在图片中添加了白色渐变层。 我们的渐变是从#FFFFFF不透明度30％到#FFFFFF不透明度70％ ，因此我们只需要修改不透明度的数量即可。

提示：提高文字清晰度的一个小技巧 ，但有时还是很重要的技巧是在其上添加阴影。 在这种情况下，我在标题和段落文本上应用了柔和的阴影。

创建页脚区域

对于页脚区域，我们将结合使用社交媒体图标和文本按钮。

确保我们的社交媒体图标在小型手机屏幕上保持可触摸的状态。 让我们使它们至少高或宽44像素。

对于桌面视图，我们可以再创建一种导航样式，但是我们必须对此谨慎，并且只能在1440px宽度以上使用。 它等效于移动视图中的固定底部导航。

恭喜你！

我们已经完成了漂亮的期刊Web应用程序设计。 遵循了本教程，我希望您对在大型项目中使用Sketch更有信心。 让我们看一下最终产品的混搭：

我很想知道您是如何找到该过程的，所以请不要在评论中留下反馈和问题。

翻译自: https://webdesign.tutsplus.com/tutorials/designing-a-vsco-inspired-web-journal-in-sketch--cms-23146

sketch web组件