跳到主要内容

使用Craft完善您的UI - 免费的Photoshop插件

Perfect your UIs with Craft

另一个晚上,我看了一部电影,主角一遍又一遍地重温同样的事件。它让这个角色疯狂 - 而且看起来非常累人。没有人愿意看到同样的事情一遍又一遍地发生。这与我尝试从设计工作流程中删除重复步骤的原因相同。

我可以越快地完成咕噜咕噜的工作,我就要花更多的时间来做我来这里做的事情:解决问题。这就是我听到Craft的原因,Craft是一种设计工作流程工具,用于将强大的数据直接带入Sketch(或Photoshop)。 Craft是InVision LABS的最新版本,这是一个旨在创造未来设计工具的新孵化器。 Craft附带三个工具:

  • 重复:克隆并以闪电速度排列任何元素。如此长的复制粘贴!
  • 照片:轻松添加美丽的高分辨率照片到您的布局
  • 键入:永远杀死填充文本和lorem Ipsum。它甚至可以从网络上提取实时数据!

在本文中,我们将看看Craft闪耀的五个真实用例。我们将在各种情况下混合和匹配所有三种工具,从模型到高保真将永远不会相同。

安装工艺

在我们开始之前,您需要安装Craft。它是免费提供的labs.invisionapp.com/craft。您还需要Sketch或Photoshop。对于这篇文章,我已经使用了Sketch来获取所有样本,但是我在Photoshop中展示的所有内容都是相同的。让我们开始吧!

01.创建逼真的用户

Free Photoshop plugin - Craft

提出一个供真人使用的设计需要看起来像真人一样

构建以用户为中心的产品有时涉及实际将用户构建到产品中。他们的脸。他们的名字。联系人列表。社交流。

提出一个供真人使用的设计需要看起来像真人一样。我们需要名称,位置,联系信息和头像等元数据。

Craft使创建逼真的用户变得轻而易举。只需点击几下,我们就可以插入带有名称和面孔的真实替身。要插入我们需要的内容,我们将在Craft中使用2个模块:相片类型

Free Photoshop plugin - Craft

Craft使创建逼真的用户变得轻而易举
  1. 首先,让我们添加用户头像。选择所有灰色圆圈,然后打开相片工艺工具栏中的面板。选择一个包含用户照片的文件夹(我在网上找到了这个套装),然后点击放置照片
  2. 要添加实名,请选择所有占位符“联系人姓名”文本图层,然后转到“工艺”工具栏中的“类型”面板。选择样品>名称>两者用名称填充布局。
  3. 要添加电子邮件地址,我们将遵循相同的基本步骤。选择要填充的所有图层,打开类型面板,选择样品>电子邮件

在构建文件时,有能力插入现实用户而不花时间停止和收集数据集是一个巨大的推动力。跳过步骤看起来更现实?是的,请!

02.摆脱lorem Ipsum

Free Photoshop plugin - Craft

使用Craft避免使用非感性填料

如果你已经做到这一点,我可能不需要告诉你为什么我们想要摆脱lorem Ipsum填充文本。无数之后'为什么这个页面用希腊语?'在会议期间,我做了一个承诺,永远避免非感性的填充内容。

Craft使用简单的真实单词填充布局。我们只使用一个模块:类型

Free Photoshop plugin - Craft

永远不要陷入一个不合时宜的看起来像希腊的会议室事件
  1. 要插入真实标题,请选择文本图层并打开类型工艺工具栏中的面板。选择样品>头条新闻>技术(或任何你想要的类别)。
  2. 要替换整个乱码文章,请选择文本图层并前往“类型”面板。挑样品>文章>技术

加分点:如果您需要插入特定文本,例如预先写好的标题集合,您可以轻松创建自己的自定义操作。随着类型面板打开,选择添加操作>添加自定义操作

由于能够轻松地将占位符文本交换为具有真实肉类的东西,因此您再也不会陷入看似不合时宜的希腊式会议室事件中。

03.在几秒钟内制作网格

Free Photoshop plugin - Craft

Craft有一个工具,用于创建元素并将其放入可管理的网格中

一遍又一遍地做同样的工作是件苦差事。这就是我们开始设计和编程事物的原因 - 巧妙地跳过可以自动化的步骤。因此具有讽刺意味的是,我的大部分屏幕设计过程都包括生产工作:make元素,复制元素,粘贴元素,放置元素。有时跨越数十个屏幕。它似乎是机器人助手的完美候选者。

输入Craft,它有一个工具,用于创建元素并将其放入可管理的网格中。它被称为重复

Free Photoshop plugin - Craft

将项目填入选区非常方便
  1. 选择要复制的组(在这种情况下,我们将收集一篇文章并创建完整的流)。
  2. 打开“工艺”工具栏中的“复制”面板,并记下2个主要切换选项:A)内部选择:此选项将允许您定义要填充重复项的区域。当您使用滚动和溢出区域定义布局时,它会很有用。添加许多将填补此空间。B)具体数量:此选项将允许您定义要复制的项目的确切数量。当您知道所需的大小和特定布局时,它很方便。特别是添加2x3网格。两个选项允许您垂直或水平复制,以及设置装订线(项目之间的间距)。我们正在使用内部选择>垂直
  3. 单击时重复内容按钮,Craft会自动将选择蒙版插入到包含您内容的组中。调整此选择的大小定义您想要填充重复内容的区域。当你有它的大小,点击重复内容按钮再次完成操作。

加分点:如果您复制的图层之前由Craft填充(使用照片或类型),您将为每个创建的项目获取一组新内容。除了保存手动复制和粘贴的额外步骤之外,Duplicate还为我节省了大量计算。让物品填入选择是非常方便的 - 我很惊讶它直到现在才存在。

Free Photoshop plugin - Craft

在一周的任何一天,使用真实照片击败一个无聊的灰色方块

如果你还没有看到这种模式,这里有一个简单的例子,说明数据的混乱是多么容易。照片库,特别是用户生成的内容(您的用户上传自己的照片),就像一个变色龙。

随着照片的添加,每次看时它都会有所不同。我们可以让Craft完成繁重的工作,而不是收集大量的照片来实现这种效果。使用时填写图片相片模块,从Unsplash,Dropbox,本地文件夹或网络上很容易看到漂亮的图像。

Free Photoshop plugin - Craft

使用“照片”模块填充图片时,可以轻松打开漂亮的图像
  1. 要用实际照片替换占位符形状,首先选择要填充的形状(在这种情况下,一组灰色方块可用于照片)
  2. 打开相片“工艺”工具栏中的面板,然后选择要从中加载照片的位置。您可以使用本地文件夹,Dropbox文件夹,从Unsplash获取或使用Web(使用内置浏览器)。点击放置照片使用所选来源的照片填充您的布局。

加分点:您可以继续单击“放置照片”以随机播放并替换所选照片。这就像是你设计过程中的随机按钮!

使用真实照片会在一周中的任何一天击败一个无聊的灰色方块,特别是当您准备演示文稿或试图签字时。你可以杀死的填充物越多,你就越好。就此而言......

05.使用实时数据进行设计

Free Photoshop plugin - Craft

Craft允许您通过内置于工具中的迷你浏览器直接从网络上提取照片和类型

在开发新设计时,您会开始添加真实内容,这是您在设计中所做的假设选择得到测试的最佳点和压力点。

很多时候,在最终的扩建期间,在设计完成很久之后。最近,为了避免这种不确定的感觉,我一直在早期和早期将实际内容提取到我的设计中。

Craft让你拉相片类型通过内置于工具中的迷你浏览器直接从网络上获取。现在,您可以直接从实时网络源获取最新的博客文章内容或本周的热门专辑。

Free Photoshop plugin - Craft

您可以直接从实时网络源获取最新的博客文章内容或本周的热门专辑。
  1. 让我们首先选择我们想用实时内容替换的占位符标题。从“工艺”工具栏中打开“类型”面板。从顶部切换选择Web。
  2. 浏览到包含您要导入的标题的网站(我们在此处使用InVision博客)。只需滚动到标题并单击它即可将其插入到布局中。 Craft将自动找到兄弟元素(其他标题)以确保每个标题是唯一的。
  3. 要从Web插入图像,请选择占位符图层(灰色框),然后打开“照片”面板。
  4. 浏览到网站并选择图像。就像以前一样,Craft将找到兄弟姐妹并用新图像填充您选择的每个图层。

加分点:使用内置浏览器时,单击标题或图像会自动将该内容插入到文档中。如果您需要在内置浏览器中导航,请在单击链接以导航到该页面时按住Command(或Ctrl)。

从重新设计现有属性到压力测试具有实时内容的布局,只需简单地下拉最新照片,使用数据进行设计是为您的工作流程添加大量现实的快速方法。

从网上抓取实时数据并直接进入设计工具的含义是非常疯狂的考虑因素,所以我要把一些梦想留给你们。

包起来

我只有很短的时间玩Craft,但它已经在我的工作流程中掀起波澜。从收集样本内容到从网络上下载实时数据,既节省时间又保持忠诚度,这种组合通常不会一起到达。你可以免费下载CraftInVision LABS

Clark Wimberly

Clark Wimberly是InVision的内容设计师。

像这样?阅读这些:

话题



翻译字数超限