数据

使用变量来存储和管理常用的样式。

数据可让您存储尺寸、色调和文本格式,以便您可以重复使用它们以获得统一的设计体验。修改变量值时,此更改将反映在网站上使用它的所有地方。此外,它们可以在中心位置访问,以增强对网站布局的可见性。

在本讲座中,您将发现:

  1. 数据元素到底是什么?
  2. 生成、修改和删除数据元素的过程
  3. 如何在画布上应用数据元素
  4. 将变量从项目中分离出来的方法
  5. 如何将数据元素组织成簇
  6. 有效地使用代表其他术语的术语
  7. 在交互中实现数据元素

定义数据元素

存在 3 种数据元素:

  • 测量数据元素
  • 颜色数据元素
  • 文本样式数据元素

测量数据元素

您可以为以下内容指定测量数据元素:

  • 周围和内部的空间——顶部、底部、左侧、右侧
  • 位置 — 顶部、底部、左侧、右侧
  • 展览配置和快速堆叠的列和行分隔
  • 高度和宽度尺寸(也涉及最小和最大)
  • 网格列和行的比例
  • 印刷特征——字体大小、行距、字母间距
  • 边界曲率和宽度
  • 滤镜和背景滤镜雾霾半径

颜色数据元素

您可以为以下内容指定颜色数据元素:

  • 文字色调
  • 背景色调
  • 边框和文本轮廓色调
  • 渐变色调终止
警告: 色样已移至颜色数据元素。之前创建的色样可在数据元素面板中找到。

文本样式数据元素

  • 字体 category

建立、修改和删除数据元素的过程

要启动数据元素,请导航至 数据元素面板, 按 新数据元素,然后选择要建立的数据元素类型(例如, 色调, 措施, 或者 字体系列).

要更改默认数据元素标题,请将鼠标悬停在名称上,然后单击配置“齿轮“ 图标。

您可以通过单击内容来修改数据元素的内容。色调数据元素允许您从选择器中选择色调。测量数据元素允许您选择数值和单位。文本样式数据元素允许您从下拉列表中选择字体 category。选择字体系列数据元素时,上传到您的站点或工作区的任何自定义字体(包括来自 Google 和 Adobe 的字体)均可访问。

一旦数据元素的值在 数据元素面板,任何链接的项目都将自动更新。

笔记: 数据元素的名称和值也可以直接在 格式面板。将鼠标悬停在当前与数据元素绑定的部分上,然后单击“编辑”图标启动数据元素编辑模式。

如果数据元素值在 数据元素面板 或者 格式面板,任何链接的项目都会自动反映修改。

可以通过移动到 数据元素面板,将鼠标悬停在名称上,然后点击配置“齿轮”图标。然后,选择 删除.

利用画布上的数据元素

在数据元素面板中建立数据元素后,您可以在设计时使用这些元素。数据元素可以在格式面板和交互面板中使用。

  • 申请 色调 数据元素 - 点击色板左上角的紫色圆点
  • 申请 测量 数据元素 - 点击测量输入字段左上角的紫色圆点
  • 实现 字体 数据元素 — 点击 字体 字段内的 印刷 部分
警告: 当在格式面板中使用数据元素时,该元素的值将以紫色突出显示。
专业推荐: 您还可以直接合并来自 格式面板选择一个项目,点击数据元素输入字段(例如色板、测量输入字段、字体字段)左上角的紫色圆点,点击“”图标,使用 标题内容,然后点击 节省。如果您希望将值绑定到现有数据元素,请单击 内容 字段并选择一个现有元素进行链接。

从项目中分离数据元素的方法

要取消色调或字体数据元素与项目的链接,请按下格式面板中当前链接到元素的内容(例如背景色调、字体等)。然后,点击 解除链接.

要取消测量数据元素与项目的链接,请在格式面板中选择当前链接到数据元素的内容,按下菜单中的数据元素标题,然后点击 解除链接.

管理集群中的数据元素

您有能力将数据元素排列成簇。这可以让您更深入地了解团队的设计选择和系统。

要对数据元素进行聚类,请提供具有以下结构的标题:组标题/元素标题。例如,如果您想要一个标记为“Shades”的聚类,则可以建立名为“Shades/Scarlet”和“Shades/Sapphire”的两个元素。它们将分组显示在“Shades”片段中 数据元素面板.

要从群集中分离元素,请从元素标题中删除组标题(例如“阴影”)。

使用别名

备用名称可让您生成引用现有元素值的新元素。 随后,如果其中一个关联元素发生更改,则所有备用名称将自动更新。 要设置备用名称,请点击“”图标。将出现一个列表,其中列出了您可以选择引用的现有元素。

警告: 只有同一类型的元素才可用于生成备用名称(例如,可以利用颜色元素来创建颜色元素的备用名称,但不能使用指向测量元素的颜色元素)。

要取消链接备用名称,请点击要分离的元素值,然后按 解除链接.

在交互中利用数据元素

色调、测量和字体数据元素可应用于自定义动画。在为自定义动画选择操作时,您可以选择 设置数据元素值。这允许您使用现有数据元素在交互中修改项目色调、测量值或字体样式。

要在动画中设置数据元素值,请继续 设置数据元素值 > 元素 并从列表中选择数据元素值。

麦宜云
Ewan Mak 的最新帖子 (查看全部)