在 Adobe XD 中创建锚点链接

上次更新日期: 2023年2月10日

了解如何创建锚点链接以改善画板中的导航体验。

通过 Adobe XD,您可以在创建原型时创建锚点链接,可帮助滚动到画板上的特定部分。 在设计长页面表单或长文本文章时,使用锚点链接可加速导航并提升可用性。

锚点链接
改进了画板中的导航体验

是否想通过快速导航到画板上的特定部分来模拟滚动体验? 按照以下步骤操作快速入门。

切换到“原型”模式。 在画板上选择要添加锚点链接的对象。

在画板上向下拖动原型构建线,直到到达要链接到的点。

单击原型构建线以查看属性检查器中显示的“交互”面板,并设置以下选项:

  • 触发器:设置为“点击”
  • 操作类型设置为“滚动至”。 是否要为单个触发器分配多个操作? 有关更多信息,请阅读此文章
  • 目标 选择目标图层。
  • Y 偏移:输入相对于连线对象顶部的 y 偏移值。 将 y 偏移控制滑块拖到画板左侧,并观察 y 偏移值是否发生变化。 连线对象上方的任何值均表示负偏移,下方的任何值均表示正偏移。
  • 缓动:选择一个选项来模拟缓动效果。 例如,选择“渐出”可实现从原型渐出的动画效果。
  • 持续时间:设置持续时间。 您可以在两个过渡画板之间设置的最长持续时间为五秒。
创建锚点链接

A. 选择触发器类型 B. 选择要“滚动至”的操作类型 C. 选择目标画板 D. 输入 Y 偏移值 E. 选择缓动效果 F. 输入持续时间 

要在画板上预览滚动效果,请选择 。 

了解详情

“使用锚点链接为动物类书籍创建可爱的登陆页,并实现返回页首互动功能。” Adobe 资深 XD 宣讲师 Howard Pinksy 表示。

观看此视频,了解更多信息。 

观看时长:3 分钟

现在您已知道如何创建锚点链接,请下载包含多个单页 Web 设计示例的示例 UI 套件,并亲自尝试。

示例文件


接下来学什么?

我们已帮助您开始在设计中添加导航链接。 再向前一步,学习如何使用语音命令和播放向设计中添加多个交互。

有疑问或想法?

询问社区

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