跳到主要内容

如何将数据添加到Sketch设计中

在过去几年中,屏幕设计已经走过了漫长的道路。哎呀,几年前我们甚至没有说'屏幕设计'。随着大量的图形设计师和插图画家逐渐发展到解决屏幕设计问题,我们的工具集也必须如此。我们不再创造静态的,奇特的艺术品 - 我们正在计划生活,呼吸的设计系统,必须适用于各种环境。

这一新的需求催生了大量灵活,专注的新工具。我最喜欢的是Sketch,这是Bohemian Coding团队的后起之秀。

Sketch让我比我梦想的更快地工作,同时让我尽我所能去做:设计。当我准备就绪时,它足够轻便,可以快速进行原型设计,强度足以保证高保真度。 Sketch最大的优势之一是其不断发展的社区,它创建了大量插件,可以将Sketch扩展到您想要的任何方向。

手艺来自InVision LABS,旨在为未来的设计工作流程提供动力。它提供了越来越多的工具,所有这些工具都是为了节省时间并在设计时增加真实感而构建的时间来自无数保存的步骤(再见复制和粘贴!),现实主义来自快速访问真实数据和内容(再见lorem ipsum!)。

在本课中,我们将介绍使用Craft中的三个关键工具:照片,类型和复制,为联系人列表创建完整逼真的屏幕设计。

01.设置你的画板

让我们首先在Sketch中创建一个新文档,然后设置一个在其中工作的画板。在一个新文档中,点击插入>画板或者只是一个键激活画板工具。

在右侧窗格中,您将看到一个填充了预定义画板大小的菜单(创建以匹配常用设备和方案)。选择iPhone 6,将在画布中心为您创建一个画板。

02.画一个标题

虽然我们在本课中专门创建了一个联系人列表,但我们需要一些额外的接口位来完成这种错觉。使用矩形工具(插入>矩形要么[R),在画板顶部画出一个标题。插入标题“联系人”和一些图标以便进行衡量,例如分别在画板左右角的“菜单”和“搜索”操作。

Add a tabbed footer, with a floating action button for adding a new contact

添加选项卡式页脚,使用浮动操作按钮添加新联系人

在我们获取数据之前,让我们构建一个快速选项卡式页脚,其中包含一个用于添加新联系人的FAB(浮动操作按钮)。使用矩形工具,绘制一个白色矩形并将其放置在画板的底部。使用椭圆工具(插入>椭圆形要么Ø),为FAB画一个圆圈。

04.插入图标

接下来,插入一些图标以显示用户点击的位置:FAB内部的“加号”,左侧选项卡中的“用户”图标和右侧的“历史记录”图标。我们还将添加一个指示器 - 一条简单的黑线 - 以显示该指示器往来视图已被选中。现在也是设置画板背景颜色(黑色)的好时机,您可以通过选择画板然后在检查器中选择颜色来完成。

05.创建联系人项目

通过我们的舞台设置,是时候创建一个联系人项目了。这是将填充数据,复制并排列到网格中以完成联系人完整列表的项目。让我们从一个简单的圆圈开始,它将作为头像的占位符(代表每个用户的照片)。

06.制作一些文字图层

Add text layers where the names and addresses of your contacts will sit

添加联系人姓名和地址所在的文本图层

在椭圆旁边,我们还插入一对文本图层。同插入>文字或者只是Ť键,使用“文本”工具插入一个“名称在此处”的图层,另一个图层则显示“在此处发送电子邮件”。这些是我们用Craft中的Type面板填充数据的图层。

07.选一个名字

Using the Type panel, populate the design with some random names

使用“类型”面板,使用一些随机名称填充设计

是时候制作香肠了!我们首先插入一个真实姓名和一个真实的电子邮件地址。首先,选择“在此处命名”的图层,然后打开“类型”面板(位于“检查器”旁边的“工艺”栏中)。您将看到一个可供选择的数据菜单。选择“姓名”,然后从男性,女性或两者中选择。您的文本图层将自动填充真实姓名。

08.填写电子邮件文本图层

我们将以与创建名称相同的方式填充电子邮件文本层。选择“在此处发送电子邮件”图层,打开“类型”面板,然后选择“电子邮件地址”以快速插入实际的电子邮件地址。

09.随意的脸

Select a source from which headshots can be pulled

选择可以拉动爆头的来源

接下来我们要用真正的照片头像填充那个灰色圆圈,我们将使用照片面板。首先选择圆形图层,然后从“工艺”窗格中打开“照片”。在这里,您有一些选择,例如从本地文件夹,Dropbox或整个网络采购。

在这里,我选择了一个本地文件夹,里面装满了我从网站uifaces.com下载的图片。点击“放置照片”,Craft将从您的收藏中随机挑选一张脸。

10.创建联系人列表

只需填写一个联系人,就可以创建完整的联系人列表了。在我们这样做之前,让我们在刚刚创建的图层下面插入一条小分界线。

11.重复

要将我们的单个联系人元素重复到一个完整的列表中,我们将使用Craft的Duplicate面板。选择您的组后,打开“复制”面板并查看选项。

我们有两个选择:内部选择和特定计数。第一个允许您选择您想要列表的区域,然后填充适合的许多项目。第二个允许您定义确切的计数('我希望网格X项宽和Y项高')。

12.使用内部选择

我们将使用Inside Selection选项,我发现它非常适合屏幕设计。由于这是一个垂直列表,而不是网格,我们只会检查垂直选项。点击重复内容,您会看到一些事情会发生。

首先,您的单个联系人组已经增加了两倍。其次,每次Duplicate发挥其魔力,您的字段都会重新填充,因此每个新组都使用新数据。第三,在您的联系人组下创建了一个新图层,我们将使用它来定义我们希望用联系人填充的区域。

13.调整图层大小

Resize the Duplicate Control layer, and the contacts will multiply to fill the space

调整复制控制图层的大小,并且联系人将相乘以填充空间

为了使联系人列表填满整个屏幕,我们将调整大小重复控制层。只需抓住形状的底部手柄并将其向下拖动到画板的底部即可。

一旦放手,Duplicate将自动创建更多联系人组以填充新空间,再次使用新数据填充每个新组。

14.固定间距

现在我们的列表已经到位,您可能会注意到间距不太合适。使用Craft,调整排水沟非常简单。选择“复制控制”图层后,再次打开“复制”面板,注意该按钮现在显示“调整装订线”。不要在画布周围轻推每个新图层,只需将Vertical Gutter选项更改为20,然后点击Adjust Gutters按钮。您的列表将自动捕捉到正确的间距。

15.添加一个很酷的标题

随着我们的列表完成并填充了真实的人,让我们双重回到界面并插入一些天赋,可能是一个完整的照片标题的形式。我们首先选择使用矩形工具绘制的原始“header-bg”形状,然后向下调整列表中的第一个接触面。标题应该可以从第一个项目停止大约20px,因为那是我们在列表中使用的同一个排水沟。

16.找到合适的图像

Unsplash is an impressive online photo resource

Unsplash是一个令人印象深刻的在线照片资源

选择新尺寸的形状后,让我们打开“照片”面板,然后前往“Unsplash”选项卡。 Unsplash是一个惊人的在线资源,充满了免版税,高品质的照片。

Craft允许您按颜色和类别进行过滤,因此可以比以往更轻松地为任何场合找到完美的照片。使用我们的深色配色方案,我认为Space类别会做得很好。单击“放置照片”,您的新照片将会放置到位。

17.调整颜色

由于Craft根据我们的过滤器放置了一张随机照片,因此可以一次又一次地对图像进行随机播放,直到找到您喜欢的图像为止。只需一直点击地方照片,直到你喜欢你所看到的。

我喜欢的照片有点亮,所以我要通过在图像顶部添加一个黑色的半透明填充将其向下调整。 Sketch允许您在单个形状上“堆叠”填充,因此我们需要做的就是单击Inspector的“填充”部分中的小“+”图标。我在图像顶部添加了50%的黑色图层,现在看起来恰到好处。

做完了!

There you have it – a realistic mockup full of data

你有它 - 一个充满数据的现实模型

这里的所有都是它的!寻找内容的正常疯狂通常包括搜索,复制,粘贴和重复 - 不再是。只需点击几下即可用实际数据填充整个布局,您甚至不必离开自己喜欢的设计程序。



翻译字数超限