用户指南 取消(C)

查看和检查设计规范

了解如何查看和检查设计规范中的颜色、文本、度量、组件状态、交互突出显示等属性。

在共享的设计规范链接中,可查看和体验原型、酌情添加评论和反馈以及选择获取设计的测量值和规范信息。

设计规范链接中的选项卡
设计规范链接中的选项卡

默认情况下,设计规范链接在原型模式下打开。要获取属性和规范信息,请单击右边栏中的 图标来切换到“设计规范”选项卡。

切换到“设计规范”选项卡后,可选择元素,并在画布上检查它们以获取多种属性,如颜色、文本、测量值、状态以及在“属性检查器”中显示的其他属性。

单击 {} 图标以切换到“变量”选项卡。当设计人员发布用于 Web 的设计规范链接时,此选项卡可用。当设计人员为设计中的颜色和字符样式定义变量名称时,您可在“变量”选项卡中查看设计令牌信息。

继续阅读以了解如何查看和匹配设计规范中的属性。

屏幕详细信息视图

在画板之外单击时,您将进入其屏幕详细信息视图。在此视图中,您可以检查屏幕和详细信息,例如交互重点。

屏幕详细信息和属性

A. 屏幕详细信息:查看屏幕尺寸。

B. 颜色:查看标为导出的颜色。

C. 版面网格属性:切换到视图网格。

使用“不透明度”滑块控制颜色的透明度。

注意:

如果在 XD 应用程序中标出图层以供导出,则在该图层中使用的颜色将不出现在屏幕详细信息视图中。

叠加

单击“交互突出显示”可查看所应用的叠加的画板详细信息、样式、设计和视口大小、叠加位置、颜色、字符样式和目标信息。 

交互突出显示

按住 Shift 键可查看交互突出显示。要检查它们,请在“交互”部分中单击所显示的伪像,或者按住 Shift 键并单击交互突出显示。 

图层详细信息视图

在画板上选择一个图层后,即切换到该图层的详细信息视图。在属性检查器中,您可以查看图层名称以及尺寸和外观等属性。

文本和外观

A. 文本属性:选择一行文本以查看后面附有默认单位(如 px、pt 和 dp)的文本属性。

B. 外观:在“外观”部分中查看在物体或文本中使用的颜色。

形状

检查形状

选择一个形状以检查其以下属性:

  • 宽度、高度和旋转。
  • 外观属性,例如颜色、边框大小、短划线、间隙、描边和不透明度。

图像

检查图像

选择一个图像以检查其以下属性:

  • 宽度、高度和旋转。
  • 不透明度。

视频

检查视频

选择一个视频以检查其以下属性:

  • 宽度、高度和旋转。
  • 海报图像名称。
  • 自动播放、循环播放和音频设置。
  • 如果要修剪视频,视频会显示视频剪辑应开始和结束的时间。 
  • 不透明度。

Lottie 动画

检查视频

选择一个 Lottie 动画以检查其以下属性:

  • 宽度、高度和旋转。
  • 自动播放和循环播放设置。
  • 不透明度。
  • CSS 属性。
  • 交互。

子范围文本

子范围文本

将光标悬停在文本元素中的子范围上,可突出显示该文本元素中类似的子范围。

超链接

对象超链接

检查对象超链接

  • 当您选择画板上的某个对象时,“属性检查器”的交互分区中将显示该对象的所有超链接。
  • 将鼠标悬停在“交互”分区中的超链接上方可标识画板上的关联对象。
  • 要将超链接 URL 复制到剪贴板,请在对象详细信息分区中单击超链接。
  • 当您单击“交互”分区中的超链接时,该链接将打开。要从“交互”分区复制超链接 URL,请右键单击它。
  • 当您在“交互”分区单击具有除 https 或者 mailto 以外的协议、没有协议,或 URL 具有无效域的超链接时,URL 无法打开,并将在屏幕底部显示一条错误消息。
  • 如果在对象上定义了多个超链接交互,则超链接无法从对象详细信息分区复制。请右键单击“交互”分区中的超链接进行复制。

文本超链接

检查文本超链接

  • 在选择画板上的文本对象时,“属性检查器”(“交互”和“对象详情”分区)将显示为该对象整体定义的所有超链接交互。 
  • 您可以像检查任何对象超链接一样,检查为文本对象定义的超链接交互。
  • 当您在对象中选择文本(子范围文本)并且该文本具有单独的超链接时,对象详细信息部分会反映该超链接 URL。但是,交互分区继续显示为对象定义的超链接和其他交互。
  • 要将子范围文本超链接 URL 复制到剪贴板,请在对象详细信息分区中单击它。

要了解 XD 中的超链接,请参阅“创建超链接”

代码片段

CSS 代码

检查 CSS 代码

  • 要生成 CSS 代码,请在 XD 应用程序“共享”>“开发”中选择“针对 Web 导出”,然后发布设计规范。
  • 可从 CSS 代码片段部分中查看和复制您的设计的 CSS 代码。
  • 要复制并粘贴代码片段,请按住并拖动代码片段,切换到代码编辑器,然后粘贴它。

HTML 代码

检查 Lottie 和视频的 HTML 代码

  • 要为 Lottie 和视频文件生成 HTML 代码,请在 XD 应用程序“共享”>“开发”中选择“针对 Web 导出”,然后发布设计规范。
  • 您可以从属性检查器的 HTML 分区复制 HTML 代码。
  • 要复制并粘贴代码片段,请按住并拖动代码片段,切换到代码编辑器,然后粘贴它。

组件状态

设计规范中的组件状态
设计规范中的组件状态

  • 选择画板中的某个物体,如果所选物体为组件,则可检查它的多个状态。 
  • 要查看画板中所选组件的不同状态,请在“属性检查器”中单击“组件”列表下的选项。  
  • 从“交互”部分中,查看与所选组件的活动状态关联的所有交互。 

  • 从列表中单击该组件的非活动状态以查看画板上的状态及其交互。
  • 如果组件名称较长,因此只能看到其中的一部分,则请在属性检查器中选择该名称以复制它。
注意:

可下载某个可下载的组件的所有状态。在 XD 应用程序中,如果设计人员标出组件的多个实例以供导出,则将仅导出“图层”面板中的最后一个实例。

隐藏的图层

隐藏的图层

  • 将光标悬停在特定区域上并单击右键,可显示图层的列表及其在该像素点的上下文详细信息。 
  • 如果组名称较长,因此只能看到其中的一部分,则请在属性检查器中选择该名称以复制它。

了解详情

要详细了解如何在 XD 中检查设计规范,请观看此视频。
观看时长:8 分钟


接下来学什么?

我们已向您介绍了如何查看和检查设计规范。请继续学习如何审查设计规范从设计规范中提取资源

有疑问或想法?

询问社区

如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。

更快、更轻松地获得帮助

新用户?