2019 年 8 月和 10 月版的 Adobe XD。

有关 Adobe XD 早期版本中推出的功能摘要,请参阅功能摘要 | 早期版本

xd-mnemonic

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

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


Overview

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 中的设计规范之间导航

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略