XD中文用户手册:查看发布的设计规范

“设计规范”功能是一项旨在改进设计人员与开发人员之间的沟通的初步尝试。设计人员可以通过在 XD 中生成一个公共 URL 来与开发人员进行共享。访问该链接时,开发人员可以检查并评论流程、测量值和设计样式。

在开始之前

如需查看设计规范,您需要具备:

- 指向设计规范的链接(由设计人员发送给您)

- 桌面浏览器和 Internet 连接。如需更多有关收支持的浏览器版本的信息,请参阅系统要求

注意:不支持/建议使用移动浏览器来查看设计规范。

注意:

设计规范链接是公开的,任何具备该链接的人员都可以进行访问。为使用户能够更无缝地访问设计规范,自 2018 年 3 月 21 日起,查看发布的设计规范时,不再要求使用 Adobe ID 进行登录。

如需更多信息,请参阅对 Adobe XD 设计规范做出的更改

查看最终用户体验工作流程

开发人员可以在 UX 流程视图中查看画板的顺序和流程。

这一包含设计规范中所有屏幕的视图非常有用。它使开发人员能够了解:

- 需要开发的屏幕的数量(对于规划开发工作非常有用)。

- 设计规范中的顺序和流程(对于了解最终用户工作流程非常有用)。

- 设计规范的上次更新日期。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
为您提供项目概述的 UX 流程视图

在这一视图中,您可以执行以下操作:

- 使用名称搜索特定屏幕并进行查看。如果屏幕在视口内,则屏幕会突出显示。如果屏幕不在视口内,则设计规范会滚动到屏幕。

- 将鼠标悬停在各个屏幕上,即可查看其彼此间的连接方式。

- 缩放并平移,即可查看特定的详细信息。在 UX 流程视图中,在设计规范中的所有屏幕均在视口中显示后,您便无法再进行平移。
缩放键盘快捷键:

  • CMD/Ctrl + 滚动鼠标滚轮
  • CMD/Ctrl + +/- 键,可进行缩放
  • CMD+0,可重置缩放

平移键盘快捷键:
空格键 + 单击并拖动,或 Shift 键 + 箭头键(用于更快的平移)。

- 您可使用的其他键盘快捷键:

  • 在屏幕上设置焦点,并使用向左和向右箭头键来浏览 UX 流程视图中的屏幕。
  • 按 Enter 键可转到规范视图。按 Esc 键可返回 UX 流程视图。

- 单击画板可查看画板的详细视图。

- 单击“查看评论”,即可查看设计规范屏幕上的用户评论。

应用程序内帮助可在您使用设计规范时为您提供指导。在屏幕底部显示的通知会提供有关平移和缩放、单击复制和保留连接功能的提示。

检查设计规范

默认视图会显示屏幕详细信息,以及屏幕上使用的颜色、字符样式和目标。您可以使用折叠箭头展开和折叠各个部分。

您还可以通过单击画板,查看画板尺寸。

在位于屏幕右侧的“属性”面板中,您可以看到屏幕详细信息,在该屏幕上使用的独特颜色和字符样式,及其链接的目标画板。您可以展开或折叠“属性”面板中列出的选项。在将鼠标悬停在右侧的颜色或字符样式上时,您会看到屏幕上使用这些颜色或字符样式的实例。

您可以通过单击“查看评论”,查看与该画板相关的评论。

如需复制颜色或字符样式,请单击它。

审查和评论设计规范

从 XD 10.0 版本开始,设计规范会具备与原型相同的评论功能。您可以评论设计规范,使用评论图钉来将评论固定在特定位置,并在必要时移动图钉。导航链接时,评论及其回复将保留在上下文中。发送给作者的评论通知电子邮件提供了指向画板的直接上下文链接。刷新浏览器后,开发人员便会看到您的回复。

您还可以将评论固定或移动到画板中的特定区域。如需固定评论,请单击“放置图钉”,然后单击画板上的特定位置。然后输入您的评论,并单击“提交”,提交评论。

您还可以从常规评论切换到固定的评论。评论通知电子邮件会提供指向带有评论的画板(而不仅仅是主页画板)的直达链接。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
评论选项

 

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
评论选项

XD 会为每个固定的评论分配一个编号。评论面板中的评论也具有相应编号,这样,设计师便能够轻松确定评论的上下文。

作者可以查看评论,并在处理完毕后将其标记为“已解决”。如需查看已解决的评论,请单击“查看已解决的评论”。如果您认为您的评论被错误地标记为“已解决”,您可以通过单击“移至未解决”,使该评论继续处于待处理状态。

更改颜色格式

您可以更改颜色格式。例如,如果您喜欢以 HSLA 格式进行处理,请使用下拉列表以将颜色格式转换为 HSLA。此更改会在整个会话中保持不变 — 在查看其他屏幕时也会使用相同的颜色格式。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
将颜色从一种格式转换为另一种格式

检查测量值

您可以检查屏幕上元素的测量值。在屏幕上选择一个元素,然后查看其高度和宽度坐标。

如需查看对象之间的间距,请选择该元素,然后将鼠标悬停在屏幕上的其他元素上,以查看其相对距离。

检查对象的测量值

检查文本属性

您也可以检查屏幕上文本的属性。选择一行文本,然后查看其字符样式。您也可以从设计规范中复制字符样式、颜色值和内容。

Adobe XD 不带单位,它关注的是元素之间的关系。例如,如果您设计的 iPhone 6/7 画板的尺寸是 375 x 667 个单位,并且它使用的字体大小为 10 个单位 — 无论您的设计被缩放到怎样的实际大小,此关系都保持不变。

但是,设计规范会根据平台为基础的无单位测量值添加默认单位(如 px、pt 和 dp),使您能够更好地了解您的目标平台的测量值。您也可以在设计规范中将一种测量单位从一种单位更改为另一种单位。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
更改测量单位

查看和检查布局网格属性

如果设计人员选择在设计中使用布局网格,则在设计规范中查看屏幕时,您可以查看和检查布局网格。

列出的值是由设计人员设置的值。如果将鼠标悬停在属性标签上,它们会在显示的屏幕上突出显示。

如需查看布局网格,请将布局网格滑块移到右侧。此选项将为设计规范中的所有屏幕启用布局网格。如需关闭布局网格,请将该滑块移到左侧。您也可以通过移动“不透明度”滑块来控制布局网格的透明度。

发布设计规范链接之前,请确保在您希望开发人员看到布局网格的画板中启用布局网格。默认情况下,如果您未在设计中使用布局网格,则其不会在设计规范链接中出现。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
检查设计规范中的布局网格

检查叠加

在设计规范视图中,开发人员可以检查 UX 流程屏幕中的叠加连接,并调用源屏幕或画板顶部的叠加。

将鼠标悬停在画板上或在按下 Shift 的同时单击画板或屏幕时,UX 流程中会出现一个点线连接,这表示已应用叠加。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
检查叠加

 

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
用于标识叠加的点线连接

如需检查应用的叠加,请导航到“属性”面板中的“叠加”部分,然后单击“叠加”部分中的缩略图,或在按下 Shift 的同时单击设计规范中的热点。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
已应用叠加

您可以检查和推断已应用的特定叠加的屏幕详细信息、样式和目标信息:

  • 视口大小:显示可见区域尺寸,该尺寸会基于用于访问页面的设备的大小发生变化。
  • 设计大小:显示屏幕的设计尺寸。
  • 叠加位置:基于源屏幕,以 px、pt 和 dp 格式在基础画板上显示叠加的位置。
  • 颜色:以 RGBA、Hex 和 HSLA 格式显示使用的颜色。
  • 字符样式:以 px、pt 和 dp 大小显示字符样式。叠加位置的格式会基于设置的字符样式发生变化。
  • 目标:显示有关目标画板的信息。

按 Esc 键或“关闭叠加”,即可恢复为基础画板。

检查固定元素

如需检查设计中的固定元素,请单击设计规范左上角的图钉图标。此图标表示已将设计元素固定在画板上。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
检查固定元素
XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
固定位置

查看和检查热点

如需检查设计规范中的热点,请单击“叠加”“目标”部分中显示的内容,或在按下 Shift 键的同时单击设计规范中的热点。

在屏幕间进行导航

在 UX 流程视图中,您可以查看规范中所有屏幕的概述。您可以从此处单击各个屏幕并在各个屏幕间进行导航。

XD中文用户手册:查看发布的设计规范 - US - UI设计素材库
在屏幕间进行导航

单击屏幕底部的“主页”图标可转到主屏幕。您可以通过单击向左箭头和向右箭头,从一个屏幕移至另一个屏幕。

如果您单击屏幕上的链接对象,则右侧会显示目标屏幕。如需导航到目标屏幕,请单击该屏幕。

如需从规范视图返回到 UX 流程视图,请按键盘上的 Esc 键。

499