跳过导航
A conceptual illustration showing a 3D version of Sketch’s Data icon floating in a box, on a green background
学习设计

深度探索:使用链接数据快速创建有组织的数据集并将其应用于您的设计

通过使用链接数据向您的设计添加结构化 JSON 数据集,使您的工作更具代表性和包容性

无论您是在制作新的组件还是创建整个网站,使用真实数据一直是优秀设计的核心。它不仅可以帮助团队测试其布局的灵活性,还可以帮助设计师考虑更广泛的用户选择,并创建适合每个人的东西。

在设计中使用有组织的数据有什么好处?

使用数据可以轻松地向您的文档添加不同的内容,例如头像和姓名。但是,您也可以在 Sketch 中使用您自己的数据,方法是将纯文本文件或图像文件夹添加为数据源。最近,我们添加了链接数据,它支持 JSON 文件以帮助您更进一步。

例如,您不希望将纽约市天际线的照片与“东京”的位置匹配。这不仅看起来像您设计中的一个错误,而且还可能会分散查看您的模型或测试您的原型的人们的注意力,并阻止他们专注于您真正想从中学到的东西。

使用 JSON 文件的链接数据支持解决了这些问题。它允许您以有组织的组应用数据——因此属于一起的数据始终在您的设计中保持在一起。

创建您自己有组织的 JSON 数据集

对于上面的示例,它使用了有关世界各地城市的信息,数据集可能看起来像这样

[
  {
    "City": "Tokyo",
    "Country": "Japan",
    "Image": "/Skylines/Tokyo.jpg",
    "Population": "37,400,068",
    "Description": "Tokyo, Japan's busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples."
  },
  {
    "City": "New York City",
    "Country": "United States",
    "Image": "/Skylines/NewYorkCity.jpg",
    "Population": "18,819,000",
    "Description": "New York City sits where the Hudson River meets the Atlantic Ocean. Its iconic sites include the Empire State Building and sprawling Central Park."
  },
]

想要使用这个平面数据集创建一些东西吗?下载完整的 JSON 文件和相关图像,并将其添加到您的 Sketch 文档中。

像这样格式化数据可以保证所有数据都被管理并一起替换,无论您在设计中使用相同的结构在哪里。因此,名称“东京”始终会与其天际线和人口的照片相匹配。

将链接数据应用于文档中的图层

您可以将链接数据应用于组以更新其文本和图像图层,以及覆盖组和符号实例中的值——就像您可以将文本数据应用于文本图层和文本覆盖一样。

但是请记住:Sketch 需要知道它应该匹配到您的组的条目(CityCountry 等)。Mac 应用程序将使用图层名称来匹配事物,因此您的图层名称和结构应与 JSON 文件中的键和结构相同

A screenshot showing how to organize a group within a Sketch document when applying a specific set of JSON data.

您可以创建中间组来组织您的图层,即使它们在 JSON 文件中没有直接等价物。例如,在此文档中,有一个“Skyline”组,它没有出现在 JSON 中。

当您即将应用数据时,会出现一个工具提示,向您显示 Sketch 希望匹配的图层名称——从而更容易记住数据集包含的内容。

An image showing the Data menu in Sketch, with a cursor hovering over one of the Linked Data sets. A tooltip shows the different attributes within the JSON data file.

在侧边栏中 Control-click 您的组,然后从菜单中选择数据以查看您的数据集。将鼠标悬停在您想要使用的组上,工具提示会显示您需要的图层名称。

从插入菜单快速添加预先组织的链接数据

好的,所以我们知道正确命名组中的每个图层可能很乏味。因此,您可以简单地使用“插入”菜单直接从您的数据源插入组,而不是创建您需要的每个文本图层,然后将数据应用到它们。

这适用于各个数据点,但使用链接数据时,此功能确实会发光。您的组将充满正确命名的图层,并且每个图层将自动与 JSON 中的条目匹配。从那里,您只需要应用您想要的样式即可。

从菜单中插入数据后,您可以以您想要的任何方式格式化它,并在您喜欢的时候使用新数据刷新它。

仅应用您集合中选定的数据

想要创建几个不同的视图和布局,但仍然使用您的 JSON 数据?没问题。如果您不希望数据条目出现在特定视图中,只需不要将其包含在您的组中即可。Sketch 会忽略无法匹配到图层名称的条目。

这意味着您可以使用相同的 JSON 文件来为文档中的不同视图供电。例如,您可以创建一个仅显示高级信息的列表视图,以及一个在同一文档中包含更多详细信息的详细视图。

An image showing two different Artboards in a Sketch document. One uses only a few parts of the JSON data set, while the other uses every attribute.

您可以使用一组数据来创建列表视图和详细视图——只需省略任何包含您不需要的数据的图层。

小技巧: 将数据应用于组后,您可以选择插入 > 数据 > 刷新数据,或者按 D 以使用 JSON 文件中的另一个随机条目刷新组。

创建组后,您可以将其转换为符号以在您的设计中使用。该符号将记住从中创建它的数据集,因此您可以创建新的符号实例,并在您喜欢的时候使用 JSON 集中的新数据刷新它们。

将复杂数据添加到嵌套符号

想要创建您自己的链接数据?Sketch 现在支持 JSON 文件中的嵌套。这些嵌套条目将根据其名称匹配到嵌套组或嵌套符号实例。

这意味着您可以在符号中使用链接数据,或者由一组复杂的嵌套符号组成的组中使用链接数据。我们知道很多人在符号本身中包含文本图层的处理方式——特别是如果您有支持内容,例如您希望每次插入标题时都遵守的可选图标或安全区域。在这种情况下,您的图层结构可能如下所示

An image showing how to structure layers in a Sketch document in order to support nested data in a JSON file. There are several Symbols nested within another Symbol, and each one contains a text layer with the same name.

在此示例中,城市、国家和人口都是同一符号的实例,每个符号都包含一个名为 ↳ Cell Text 的图层。从 Sketch 72 开始,您可以编写支持此结构的 JSON 字典

[
  {
    "City": {
      "↳ Cell Text": "Tokyo"
    },
    "Country": {
      "↳ Cell Text": "Japan"
    },
    "Skyline": "/Skylines/Tokyo.jpg",
    "Population": {
      "↳ Cell Text": "37,400,068"
    },
    "City Definition": {
      "↳ Cell Text": "Metropolis prefecture"
    },
    "City Population": {
      "↳ Cell Text": "13,515,271"
    }
  }
]

想要使用这个嵌套数据集创建一些东西吗?下载完整的 JSON 文件和相关图像,并将其添加到您的 Sketch 文档中。

请记住,在你的 Symbol 和数据文件中引入的嵌套越多,两者需要匹配的程度就越高。你可能需要考虑使用共享样式、色调和颜色变量来处理一些你通常会包含在嵌套 Symbol 中的属性。

选择有序或随机数据

现在,你可以选择是按照文本文件或文件夹(按字母顺序)中定义的顺序应用数据,还是坚持默认的随机选项。只需在“数据”菜单中取消选中或选中“随机插入数据”复选框。

小技巧: 你只需单击一下即可从检查器中应用和刷新图像和文本图层中的数据。无需再在菜单中搜寻来找到正确的数据集!

当你只需要一个快速头像或一个真实的用户名称时,随机应用数据非常有用。但是,如果你正在处理诸如搜索结果屏幕之类的东西,你可能已经以特定的方式组织了你的数据以适应该布局。同样,如果你希望在设计的不同部分保持一致性,随机应用的数据可能会妨碍你。

如果取消选中此框,无论你刷新多少次,你的数据将始终保持与数据集中相同的顺序。


我们希望这些新增功能使你可以更轻松地在 Sketch 中使用真实数据。使用你认为其他人可能会觉得有用的数据集吗?在我们的社交渠道上告诉我们,我们将分享最好的示例。如果你对使用数据进行设计有任何想法或反馈,请联系我们

您可能还喜欢

免费试用 Sketch

无论你是 Sketch 的新手,还是回来看看有什么新功能,我们都会让你在几分钟内完成设置并准备好做到最好。

免费开始
免费开始