创建交互式原型

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    5. 工作区基础知识
    6. 在 Adobe XD 中更改应用程序语言
    7. 访问 UI 设计套件
    8. Adobe XD 中的辅助功能
    9. 键盘快捷键
    10. 提示和技巧
    11. XD 入门计划的更改
  3. 设计
    1. 画板、参考线和图层
      1. 开始使用画板
      2. 使用参考线和网格
      3. 创建可滚动画板
      4. 使用图层
      5. 创建滚动组
    2. 形状、对象和路径
      1. 选择对象、调整对象的大小和旋转对象
      2. 移动、对齐、分布和排列对象
      3. 对对象进行编组、锁定、复制、拷贝和翻转
      4. 为对象设置描边、填充和投影
      5. 创建重复元素
      6. 使用 3D 变换创建透视设计
      7. 使用布尔运算编辑对象
    3. 文本和字体
      1. 使用绘图和文本工具
      2. Adobe XD 中的字体
    4. 组件和状态
      1. 使用组件
      2. 使用嵌套组件
      3. 向组件添加多个状态
    5. 蒙版和效果
      1. 创建一个形状蒙版
      2. 使用模糊效果
      3. 创建和修改渐变
      4. 应用混合效果
    6. 版面
      1. 响应式调整大小和约束
      2. 为组件和组设置固定的内边距
      3. 使用堆叠创建动态设计
    7. 视频和 Lottie 动画
      1. 使用视频
      2. 使用 Lottie 动画
  4. 原型
    1. 创建交互式原型
    2. 制作原型动画
    3. 自动制作动画支持的对象属性
    4. 使用键盘和游戏手柄创建原型
    5. 使用语音命令和播放创建原型
    6. 创建定时过渡
    7. 添加叠加
    8. 设计语音原型
    9. 创建锚点链接
    10. 预览设计和原型
    11. 使用视频创建原型
  5. 共享、导出和审阅
    1. 共享选定的画板
    2. 共享设计和原型
    3. 为链接设置访问权限
    4. 使用原型
    5. 审阅原型
    6. 使用设计规范
    7. 共享设计规范
    8. 检查设计规范
    9. 设计规范导航
    10. 审查和评论设计规范
    11. 导出设计资源
    12. 导出和下载设计规范中的资源
  6. 设计系统
    1. 带 Creative Cloud Libraries 的设计系统
    2. 在 Adobe XD 中使用文档资源
    3. 在 Adobe XD 中使用 Creative Cloud Libraries
    4. 从链接资源迁移到 Creative Cloud Libraries
    5. 使用设计令牌
    6. 使用 Creative Cloud Libraries 中的资源
  7. 云文档
    1. Adobe XD 中的云文档
    2. 协作与协同编辑设计
    3. 协同编辑与您共享的文档
  8. 集成和插件
    1. 使用外部资源
    2. 使用 Photoshop 中的设计资源
    3. 从 Photoshop 中复制和粘贴资源
    4. 导入或打开 Photoshop 设计
    5. 在 Adobe XD 中使用 Illustrator 资源
    6. 打开或导入 Illustrator 设计
    7. 将矢量从 Illustrator 复制到 XD
    8. 用于 Adobe XD 的插件
    9. 创建和管理插件
    10. XD 的 Jira 集成
    11. XD 的 Slack 插件
    12. XD 的 Zoom 插件
    13. 将设计从 XD 发布到 Behance
  9. iOS 和 Android 版 XD
    1. 在移动设备上预览
    2. 适用于移动设备的 Adobe XD 常见问题解答
  10. 故障排除
    1. 已知问题和已修复问题
      1. 已知问题
      2. 已修复的问题
    2. 安装和更新
      1. XD 似乎与 Windows 不兼容
      2. 错误代码 191
      3. 错误代码 183
      4. 安装 XD 插件时出现问题
      5. Windows 10 上提示卸载并重新安装 XD
      6. 迁移首选项有问题
    3. 启动和崩溃
      1. XD 在 Windows 10 上启动时崩溃
      2. XD 在您注销 Creative Cloud 时退出
      3. Windows 上订阅状态相关问题
      4. 在 Windows 上启动 XD 时出现“应用程序被阻止”警告
      5. 在 Windows 中生成故障转储
      6. 崩溃日志收集和共享
    4. 云文档
      1. XD 云文档相关问题
    5. 创建原型、发布和预览
      1. 无法在 macOS Catalina 上录制原型交互
      2. 工作流程发布相关问题
      3. 浏览器中未显示发布的链接
      4. 浏览器中的原型呈现不正确
      5. 共享链接上意外出现评论面板
      6. 无法发布库
    6. 导入、导出和使用其他应用程序
      1. 在 XD 中导入和导出
      2. XD 中的 Photoshop 文件
      3. XD 中的 Illustrator 文件
      4. 从 XD 导出到 After Effects
      5. XD 中的 Sketch 文件
      6. 第三方应用程序在导出中不可见

了解如何创建他人可用于测试、优化和完善用户体验的交互式原型。

您在设计完屏幕后,可通过构建交互式原型,设想用户可如何体验您的应用程序或网站。

可按所需的导航顺序连接各个屏幕以及整理多个流,将 2 个或更多画板连接在一起。设置屏幕后,您可以每个流作为 可共享的链接共享以供审阅、收集反馈,同时可在各个目标表面上发布它们。

设置“主页”屏幕

“主页”屏幕是您的应用程序或网站的第一个屏幕。您的用户会通过“主页”屏幕开始在应用程序或网站中进行导航。

此外,如果您在预览原型时并没有选择任何内容,预览将从“主页”屏幕开始。也就是说,默认情况下,您的“主页”屏幕会被设置为第一个添加连线的画板。

  1. 切换到“原型”模式。

  2. 单击要设置为“主页”屏幕的画板。左上角会出现一个灰色的主页图标。

  3. 单击“主页”图标。它会变成蓝色,表示该画板现已成功设置为“主页”屏幕。

    “设置为主页屏幕”选项

    “主页”屏幕已设置

    如需将另一画板设为“主页”屏幕,只需单击与该画板关联的主页图标即可。要在发布后查看所有画板,请务必链接所有相关的画板。

在项目中设置多个流

通过多个流,可从同一文档或在同一文件中创建和共享一个设计的多个版本,并在许多原型或设计规范间利用同一组画板。每个流均保留自己的一组连线和共享详细信息,这样无需每次都撤消再重新进行所有设置,即可作出更改并重新发布。

如果要创建设计的多个版本,请另外设置一个“主页”画板,将它们连接在一起,并共享每组的唯一链接。“主页”画板作为设计的起点,可以从中拖动连线将不同的屏幕连接在一起。
无需复制作品,即可在多个原型间使用同一组画板。在同一页面中更改设计并更新链接。

设置不同流的另一个示例是,在设计面向多种平台(如移动设备、桌面设备、平板电脑等等)的网站时,可定义并创作多个交互流,其中的每个流都描述用户旅程,然后与利益相关方共享每个流以收集反馈。

继续阅读以了解如何设置一个或多个“主页”画板和定义多个流。

将交互式元素链接到目标屏幕
设置多个流

  1. 切换到“原型”模式。
  2. 设置“主页”画板以定义设计的起点.
  3. 输入每个流的名称以更好地组织它们。
  4. 如果设计由多个流构成,则为其中每个流都设置“主页”画板。
  5. 单击希望链接的下一个对象或画板。对象或画板中出现带箭头的连接手柄。单击并拖动以释放目标物体或画板上的手柄。

为对象和画板添加交互

定义屏幕并为其连线后,通过为对象和画板引入触发器和操作,可让原型更加引人注目。操作方法:

  1. 选择某个对象,然后在它旁边单击 +,或在“属性检查器”中单击 + 。设置“触发器”“操作类型”。选择操作类型后,请设置该操作类型的具体选项,包括“目标”(如适用)。

    例如,如果要增强原型的导航体验,则可选择通过将“滚动至”设置为操作类型而添加锚点链接。有关此操作的更多信息,请参阅在画板中创建导航链接。

    原型制作选项
    原型制作选项

    A. 设置为“点击”、“拖动”、“悬停”、“时间”、“按键和游戏手柄”、“声音”或“播放结束”。 B. 以秒为单位设置时间延迟。 C. 设置为“过渡”、“自动制作动画”、“叠加”、“滚动至”、“上一个画板”、“音频播放”、“语音播放”、“视频播放”或“Lottie 播放”。 D. 如果需要,请更改目标画板。 E. 设置为“溶解”或“无”。 F. 选择缓动效果。 G. 以秒为单位输入持续时间. 

  2. 如果选择“点击”作为触发器,则现在可将过渡与非过渡性操作(如“语音播放”或“音频播放”)结合在一起。要添加第二个操作,请将“属性检查器”中的第一个“操作” + 按钮设置为“过渡”“自动制作动画”“叠加”滚动至“上一个画板”,然后将第二个“操作” + 按钮设置为“音频播放”“语音播放”

    如果选择“音频播放”“语音播放”作为第一个操作,则无法添加第二个操作。

  3. 还可组合多个触发器以创建高级交互,而无需在画板上的不同对象之间分配触发器。为此,请使用画布上的“+”按钮,或在“属性检查器”中单击“+”,然后选择“触发器”“操作”“目标”

    请记住,点击拖动悬停时间触发器只能应用一次,而语音按键和游戏手柄可应用多次。

    组合多个触发器
    组合多个触发器


    可在设计中逼真地模拟滚动。要将设计元素钉在某个固定位置,请在“属性检查器”中选择“滚动时固定位置”

  4. 如需预览您的原型,请单击“桌面预览”

可以将每个流作为可共享的链接进行管理和发布,以供审阅和收集反馈。有关如何共享多个流的详细信息,请参阅共享设计和原型

提示

要编辑或删除连线,请选择要编辑或删除的连线。还可从“属性检查器”中选择一个交互,然后编辑它的各种交互。

要在“原型”模式下临时隐藏连线,请按住 Option (macOS) 或 Alt (Windows) 键。

将鼠标悬停在连线上可以查看工具提示,该工具提示将显示迭代次数及其类型。 

要将所定义的交互应用于另一对象,请选择该对象或画板,选择“复制”,单击目标对象或画板,然后在右键单击上下文菜单中选择“粘贴交互”。

与上一个画板链接

  1. “原型”模式下,选择要链接的元素或画板。出现小箭头时,单击并将箭头拖动到上一个画板,或者选择“操作”>“上一个画板”

    选择上一个画板
    选择上一个画板

  2. “操作”设置为“上一个画板”时,连线的尾部会显示一个尾巴图标。

    设置目标
    设置目标

    如果要断开线与画板的链接,请单击线上的任意位置并将其拖离目标画板。

  3. 使用预览窗口预览链接。

取消与画板的链接

  1. “原型”模式下,选择“目标”>“无”

    您也可以单击线上的任意位置,将其拖离目标画板。

    取消与画板的链接
    取消与画板的链接

    只有在画板被链接到某一目标时,“无”选项才可用。

  2. 在浏览器中预览链接。先前从元素设置的所有目标链接都将被删除。

预览和录制交互

Windows 上的 Adobe XD 不支持录制原型。但是,有一种解决方法。按 Windows + G 键并使用原生录制程序录制“预览”窗口。

您可以预览原型,以便测试原型和交互。您还可以录制预览,并将录制内容保存为 .mp4 文件。然后,您可以选择与您的利益相关者共享这个 .mp4 文件,他们可以查看(或审阅)原型的演练并提供反馈。

  1. 单击“桌面预览”图标。此时会出现“预览”窗口并突出显示画板。

    如需测试屏幕之间的导航,请单击交互式元素。

    在“预览”窗口中预览时,可以编辑原型的设计和交互。可以立即预览这些更改。

  2. 如需录制交互,请单击“预览”窗口中的“录制”图标。如需结束录制,请按 Esc,或者再次单击“录制”图标。

    。
    录制原型交互

  3. 指定名称和保存录制内容的位置。录制内容会被保存为 .mp4 文件。

了解详情

以下视频可帮助您开始进行交互:

Adobe 徽标

登录到您的帐户