功能摘要 | Adobe XD | 2019 版

2019 年 8 月版、2019 年 10 月版和 2019 年 11 月版 Adobe XD

xd-mnemonic

Adobe XD 是一款基于矢量的工具,用于设计 Web 和移动应用程序用户体验以及为其构建原型。轻松地在线框、视觉设计、交互设计、原型构建、预览和共享功能间进行切换 — 均可在一个功能强大的工具中实现。

XD 适合所有类型的创作者 — UX/UI 设计人员、交互设计人员、体验设计人员、产品设计人员、Web 设计人员、应用程序设计人员、视觉设计人员、创业者等等。

Adobe XD 24 的新增功能

2019 年 11 月版的 XD 拥有以下增强功能:

使用“协同编辑”功能(测试版)进行实时协作

借助“协同编辑”功能(测试版),您可以与其他设计师进行实时协作,从而加快工作流程,并消除重复或冲突的工作。您可以看到在编辑同一文档的其他用户的头像,而所有用户都可实时查看编辑内容。

借助“协同编辑”,您的设计团队可以更快地工作,并维护整个设计项目的单一真实来源。

Beta 功能是指供 XD 用户试用的新增功能,这一功能方便我们在准备推出新功能时收集相关反馈。Beta 功能可能存在一些质量和性能问题。

1

如需更多信息,请参阅协作和协同编辑设计

添加具有组件状态的交互式元素

您现在可以使用“组件状态”为不同的用户交互设计变体了。例如,您可以设计按钮组件,然后创建不同状态(例如:悬停在按钮上和按下按钮)。 

不再需要创建和连接多个画板来展示复杂的交互! 

当您的组件具有状态时,您可以通过“原型”模式下的“悬停”触发器指定当您将光标悬停在特定设计元素上时应用悬停效果。

请继续操作,将您原型的交互水平提升一个层次!

使用“文档历史记录”管理设计修订

您现在可以使用“文档历史记录”在处理云文档时浏览保存的文档历史记录了。有时,您还可能想恢复到以前的版本,并还原 XD 文档最新的更改内容。 

要恢复到以前的版本,您可以通过“文档历史记录”打开相应版本的文档、复制内容,并将其粘贴至当前版本。

请继续操作,与设计人员进行协作,并查看文档随时间的变化!

有关详细信息,请参阅管理设计修订。

使用多种交互方式创建高保真原型

现在,在“原型”模式下,您可以为单个设计元素或对象指定多个交互。

请继续操作,从单个元素拖出多条连线,并为不同触发器(例如“点击”或“拖动”)添加交互,而无需复制对象或画板。

交互不再分散! 

有关更多信息,请参阅创建交互式原型 | 概述

标题:多个交互

观看时长:4 分钟

通过重新设计的插件管理器访问插件

借助重新设计的插件管理器,您可以浏览、搜索和安装 XD 插件。浏览不同类别和系列的插件、搜索特定插件或术语,并查看每个插件的详细配置文件列表、说明和语言支持等。

插件管理器
重新设计的插件管理器

有关更多信息,请参阅 XD 中的插件

标题:重新设计的插件管理器

观看时长:2 分钟

用重新设计的共享体验共享和协作

新的“共享”模式将几种不同的共享功能整合到一个集中的位置,可以帮助您轻松共享自己的设计并与其他设计人员进行协作。与基于内置方案的预设(例如“设计审阅”“开发”)相结合,即可完全控制管理或更新共享链接的方式。

继续阅读,详细了解经过重新设计的共享模式的优势。

  • 管理多个已发布的链接:从 URL 选取器查看所有已发布的链接。请继续操作,轻松修改链接甚至更新您现有的设计链接!
  • 发布时有预设可供选择:“视图设置”菜单中访问便捷、基于方案的预设,如“设计审阅”、“开发”、“演示”、“用户测试”“自定义”。无需再选中多个选项或复选框即可创建设计链接!XD 让您轻松完成这些操作!
  • 为多个预设和迭代保留同一 URL:创建一个一次性 URL,即可多次迭代或切换您的预设!
  • 轻松找到画板:在设计画布中轻松找到突出显示的待发布画板。所发布的链接中不再会缺少连线或屏幕!
共享模式
重新设计的共享模式

有关更多信息,请参阅共享设计和原型

标题:共享模式

观看时长:3 分钟

通过增强型 Creative Cloud Libraries 集成共享资源

现在可访问和浏览 Creative Cloud Libraries、将资源(例如组件、图形、颜色、渐变和字符样式)从 XD 添加到 Creative Cloud Libraries,并可直接从 XD 内部,即直接从 XD 项目中使用这些资源。

还可将 XD 资源添加到 CC Libraries 并在其他 Creative Cloud 应用程序中使用这些资源。

用共享的资源(如品牌颜色、图形和徽标等)将您所在组织的各个创意团队联系在一起!

Creative Cloud Libraries
XD 中的 Creative Cloud Libraries

有关更多信息,请参阅适用于 XD 的 Creative Cloud Libraries

将 Sketch 库转换为链接的资源

目前,在创作设计系统时,无需重新创建任何 Sketch 资源,即可导入和重用它们。

不仅可将 Sketch 符号和元素转换为 XD 组件,还可将其用作链接的资源。

1

有关详细信息,请参阅转换 Sketch 库

Adobe XD 23 的新增功能

2019 年 10 月版的 XD 拥有以下增强功能:

混合效果

从 XD 23.0 开始,您可以应用非破坏性混合效果来设计图像或图形资源的样式。

使用混合效果改变对象及其底层对象的颜色混合方式,提升设计并让设计栩栩如生!

混合模式

有关应用混合效果的更多信息,请参阅应用混合效果。

轻移和轻移调整大小

从 XD 23.0 开始,您可以将这些键盘快捷键与箭头键组合在一起,以网格大小为增量精确控制 UI 元素的位置和大小。

  • Shift + 箭头键: 以 10 像素为增量移动选区。
  • Cmd + 箭头键: 以 1 像素为增量调整选区大小(元素固定在左上角)。
  • Cmd + Shift + 箭头键 (Mac) 和 Alt + Shift + 箭头键 (Win): 以 10 像素为增量调整选区大小(元素固定在左上角)。

启用方形网格时:

  • Shift + 箭头键: 首先移动选区与网格对齐,然后以网格大小为增量移动选区。
  • Cmd+Shift+箭头键 (Mac) 和 Alt+Shift+箭头键 (Win): 调整选区大小以与网格对齐,然后以网格大小为增量调整选区大小(元素固定在左上角)。
轻推调整大小
轻推调整大小

通过重叠图层选择

设计模式

XD 23.0 扩展了键盘快捷键的操作: 按住 Cmd 并单击按住 Ctrl 键并单击,可以向下钻取设计画布上的对象的叠置顺序以及设计规范。到达所需的图层后,可以使用键盘进行轻推,或右键单击以调出相应的上下文菜单。

如果有多个图层堆叠在一起,按住 Cmd 并单击按住 Ctrl 键并单击可选择所选图层下方的下一个对象。到达下方的最后一个图层后,使用相同的键盘快捷键遍历回到最顶层图层。 

选择重叠图层
通过重叠图层选择

设计规范

要查看并检查隐藏在设计规范中重叠图层下方的图层,请将鼠标悬停在画板上的特定区域并右键单击。该像素点会显示图层列表及其上下文详细信息。您还可以按住 Cmd 并单击,按顺序向下钻取并查看图层属性。

有关访问重叠图层的更多信息,请参阅调整对象的大小和旋转对象。

Adobe XD 22 的新增功能

在 Photoshop 中编辑

在 Photoshop 中编辑

XD 增强了与 Adobe Photoshop 的集成,允许您直接在 Photoshop 中打开和编辑 XD 图像并实时更新它们。当您在 Photoshop 中编辑和保存图像时,XD 会保存平面文件,将位图(而不是编辑后的文件)放置到 XD 中。 

如需更多信息,请参阅使用外部资源

观看时长:3.20 分钟。

改进了“插件”面板

“插件”面板

使用最新版本的 XD,您可在 XD 用户体验中,随设计画布一起启动 XD 插件并与之交互。新的“插件”面板与“图层和资源”面板类似,可让用户在 XD 中轻松查看和修改插件。这可帮助您在处理 XD 设计时维护创意流程。 

有关更多信息,请参阅查看和安装插件

观看时长:4.30 分钟。

设计规范中的 CSS 代码片段

为了帮助将设计转换为可供使用的网站,您可以从设计规范中复制 CSS 代码片段并将其粘贴到代码中。

发布设计规范时,如果您在“共享以开发”窗口中选择“Web”作为输出目标,则 CSS 代码将自动生成。发布设计规范时,XD 会自动显示所选图层的 CSS 代码片段。

CSS 代码片段
CSS 代码片段

如需更多信息,请参阅在 XD 中检查设计规范

观看时长:2.58 分钟。

组件边界的改进

组件支持各种覆盖,并可针对不同屏幕大小无缝调整尺寸,但在应用效果或重新组织对象时可能难以使用。在以前的 XD 版本中,如果您添加的对象超出其原始主组件的边界,则内容会被剪切。

要修复组件边界的问题,请选择主组件,右键单击以选择“调整边界以适应内容”。通过调整组件边界来显示主组件和实例中的所有剪切对象。

如果您创建新组件:

  • 在组件定界框之外渲染阴影和模糊,并且
  • 边界区域会适应组件中的所有内容。
调整边界以适应内容
调整边界以适应内容

观看时长:4 分钟。

减少小数像素

针对 HiDPI 屏幕设计时,小数像素会导致内容扭曲。从 XD 22.0 开始,为了消除设计摩擦和图像失真,XD 在调整对象组、组件和图像蒙版的大小时会舍入像素值。但是,XD 会保留在 XD 22.0 之前版本中所创建内容的小数值。  

减少小数像素
减少小数像素

观看时长:3.20 分钟。

在网格视图和流程视图之间切换

若要全面了解设计流程以及画板布局信息,请单击屏幕左上角的原型名称或设计规范。在默认网格视图中,您也可以选择在网格流程视图之间切换以显示以下内容:

  • 网格视图显示所有采用网格格式布局的画板,您可以检查或导航到画板。
  • 流程视图将画板的设计和布局层次结构展现出来。
网格视图
网格视图

流程视图
流程视图

有关更多信息,请参阅在 XD 中的设计规范之间导航

Adobe, Inc.

更快、更轻松地获得帮助

新用户?