创建超链接

上次更新日期: 2022年3月21日

了解如何从 Adobe XD 原型链接到外部网页。

您设计中的任何文本、对象或组件都可以链接到外部网页或电子邮件地址。 创建超链接后,您可以预览它,并与利益相关者共享设计规范。

创建文本超链接

要将文本超链接到网页或电子邮件地址,请执行以下步骤:

设计模式下,请在文本对象中选择要为其创建超链接的文本。

请在“属性检查器”的“文本”分区的“在此处插入 URL”字段中,执行以下操作:

链接到安全的网页

链接到安全的网页
链接到安全的网页

要链接到一个安全的网页 (https),请键入该网页的 URL。 示例:https://www.adobe.com

链接到电子邮件地址

链接到电子邮件地址
链接到电子邮件地址

要链接到电子邮件地址,请键入 mailto:,后跟收件人的电子邮件地址。 示例:mailto:john@xyz.com

在设计模式下定义文本超链接后:

  • 在画布上,超链接的文本带有下划线。
  • 如果只有部分文本超链接,当您在画布上选择文本对象时,您会看到“在此处插入 URL”字段显示破折号 (—)。
  • 在原型模式下,如果选择了包含超链接的文本对象,超链接将显示在“属性检查器”中。
  • 您可以在设计或原型模式下编辑文本超链接。
部分文本对象是带有超链接的(设计模式)
部分文本对象是超链接的(设计模式)

文本对象内超链接的两个文本部分(原型模式)
文本对象内超链接的两个文本部分(原型模式)

在发布和共享设计规范链接时,利益相关者可以检查超链接。

创建对象或组件超链接

要将对象或组件超链接到网页或电子邮件地址,请执行以下步骤:

切换到原型模式,然后选择要为其创建超链接的对象或组件。

单击对象上的蓝色箭头,然后在属性检查器中,将触发器设置为点击按键和游戏手柄语音

操作类型设置为超链接

目标字段中,执行以下操作:

链接到安全的网页

链接到网页
链接到安全的网页

要链接到一个安全的网页 (https),请键入该网页的 URL。 示例:https://www.adobe.com

链接到电子邮件地址

链接到电子邮件地址
链接到电子邮件地址

要链接到电子邮件地址,请键入 mailto:,后跟收件人的电子邮件地址。 示例:mailto:john@xyz.com

要预览超链接,请单击   桌面预览。

单击超链接时,它将始终在单独的浏览器选项卡中打开。 

在发布和共享设计规范链接时,利益相关者可以检查超链接。

设计和原型模式下的超链接文本

除了在设计模式下为文本定义超链接外,您还可以在原型模式下为其文本对象定义超链接。 在设计模式下定义的超链接优先于原型模式下的超链接。 在桌面预览或原型链接中:

  • 当您单击没有定义超链接的文本部分时,会打开在原型模式下定义的超链接。
  • 如果您在设计模式下超链接文本对象中的整个文本,并在原型模式下使用 Tap 触发器超链接文本对象,则原型模式超链接将失效。
对象超链接继承
对象超链接继承

在设计和原型模式下完全超链接的文本
在设计和原型模式下文本完全超链接

注意事项

XD 应用程序:

  • 如果您添加的 URL 具有 httpsmailto 之外的协议,或不带协议,或 URL 的域无效时,则您将收到警告。 请更正 URL。
不使用 https 或 mailto 协议时显示的警告
不使用 https 或 mailto 协议时显示的警告

桌面预览及原型链接:

  • 当您单击具有除 https 或者 mailto 以外的协议、没有协议,或 URL 具有无效域的超链接时,URL 无法打开, 并将在屏幕底部显示一条错误消息。
  • 当您单击具有有效域的超链接时,XD 会在链接的网站上强制执行安全检查。 如果安全检查失败,您会收到安全警告。 您可以选择继续或退出 URL。
不支持的协议和无效域的错误消息
不支持的协议和无效域的错误消息

针对未通过安全检查的网站的安全警告
针对未通过安全检查的网站的安全警告

了解详情

要详细了解如何在 XD 中使用超链接,请观看此视频(时长 3 分钟)。

相关资源

有疑问或想法?

咨询社区

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