Adobe XD 是一款基于矢量的工具,用于设计 Web 和移动应用程序用户体验以及为其构建原型。轻松地在线框、视觉设计、交互设计、原型构建、预览和共享功能间进行切换 — 均可在一个功能强大的工具中实现。
XD 适合所有类型的创作者 — UX/UI 设计人员、交互设计人员、体验设计人员、产品设计人员、Web 设计人员、应用程序设计人员、视觉设计人员、创业者等等。
2019 年 8 月版、2019 年 10 月版和 2019 年 11 月版 Adobe XD
Adobe XD 是一款基于矢量的工具,用于设计 Web 和移动应用程序用户体验以及为其构建原型。轻松地在线框、视觉设计、交互设计、原型构建、预览和共享功能间进行切换 — 均可在一个功能强大的工具中实现。
XD 适合所有类型的创作者 — UX/UI 设计人员、交互设计人员、体验设计人员、产品设计人员、Web 设计人员、应用程序设计人员、视觉设计人员、创业者等等。
2019 年 11 月版的 XD 拥有以下增强功能:
借助“协同编辑”功能(测试版),您可以与其他设计师进行实时协作,从而加快工作流程,并消除重复或冲突的工作。您可以看到在编辑同一文档的其他用户的头像,而所有用户都可实时查看编辑内容。
借助“协同编辑”,您的设计团队可以更快地工作,并维护整个设计项目的单一真实来源。
Beta 功能是指供 XD 用户试用的新增功能,这一功能方便我们在准备推出新功能时收集相关反馈。Beta 功能可能存在一些质量和性能问题。
如需更多信息,请参阅协作和协同编辑设计。
您现在可以使用“组件状态”为不同的用户交互设计变体了。例如,您可以设计按钮组件,然后创建不同状态(例如:悬停在按钮上和按下按钮)。
不再需要创建和连接多个画板来展示复杂的交互!
当您的组件具有状态时,您可以通过“原型”模式下的“悬停”触发器指定当您将光标悬停在特定设计元素上时应用悬停效果。
请继续操作,将您原型的交互水平提升一个层次!
您现在可以使用“文档历史记录”在处理云文档时浏览保存的文档历史记录了。有时,您还可能想恢复到以前的版本,并还原 XD 文档最新的更改内容。
要恢复到以前的版本,您可以通过“文档历史记录”打开相应版本的文档、复制内容,并将其粘贴至当前版本。
请继续操作,与设计人员进行协作,并查看文档随时间的变化!
有关详细信息,请参阅管理设计修订。
现在,在“原型”模式下,您可以为单个设计元素或对象指定多个交互。
请继续操作,从单个元素拖出多条连线,并为不同触发器(例如“点击”或“拖动”)添加交互,而无需复制对象或画板。
交互不再分散!
有关更多信息,请参阅创建交互式原型 | 概述。
标题:多个交互
观看时长:4 分钟
借助重新设计的插件管理器,您可以浏览、搜索和安装 XD 插件。浏览不同类别和系列的插件、搜索特定插件或术语,并查看每个插件的详细配置文件列表、说明和语言支持等。
有关更多信息,请参阅 XD 中的插件。
标题:重新设计的插件管理器
观看时长:2 分钟
新的“共享”模式将几种不同的共享功能整合到一个集中的位置,可以帮助您轻松共享自己的设计并与其他设计人员进行协作。与基于内置方案的预设(例如“设计审阅”和“开发”)相结合,即可完全控制管理或更新共享链接的方式。
继续阅读,详细了解经过重新设计的共享模式的优势。
有关更多信息,请参阅共享设计和原型。
标题:共享模式
观看时长:3 分钟
现在可访问和浏览 Creative Cloud Libraries、将资源(例如组件、图形、颜色、渐变和字符样式)从 XD 添加到 Creative Cloud Libraries,并可直接从 XD 内部,即直接从 XD 项目中使用这些资源。
还可将 XD 资源添加到 CC Libraries 并在其他 Creative Cloud 应用程序中使用这些资源。
用共享的资源(如品牌颜色、图形和徽标等)将您所在组织的各个创意团队联系在一起!
有关更多信息,请参阅适用于 XD 的 Creative Cloud Libraries。
目前,在创作设计系统时,无需重新创建任何 Sketch 资源,即可导入和重用它们。
不仅可将 Sketch 符号和元素转换为 XD 组件,还可将其用作链接的资源。
有关详细信息,请参阅转换 Sketch 库。
2019 年 10 月版的 XD 拥有以下增强功能:
从 XD 23.0 开始,您可以应用非破坏性混合效果来设计图像或图形资源的样式。
使用混合效果改变对象及其底层对象的颜色混合方式,提升设计并让设计栩栩如生!
有关应用混合效果的更多信息,请参阅应用混合效果。
从 XD 23.0 开始,您可以将这些键盘快捷键与箭头键组合在一起,以网格大小为增量精确控制 UI 元素的位置和大小。
启用方形网格时:
设计模式
XD 23.0 扩展了键盘快捷键的操作: 按住 Cmd 并单击或按住 Ctrl 键并单击,可以向下钻取设计画布上的对象的叠置顺序以及设计规范。到达所需的图层后,可以使用键盘进行轻推,或右键单击以调出相应的上下文菜单。
如果有多个图层堆叠在一起,按住 Cmd 并单击或按住 Ctrl 键并单击可选择所选图层下方的下一个对象。到达下方的最后一个图层后,使用相同的键盘快捷键遍历回到最顶层图层。
设计规范
要查看并检查隐藏在设计规范中重叠图层下方的图层,请将鼠标悬停在画板上的特定区域并右键单击。该像素点会显示图层列表及其上下文详细信息。您还可以按住 Cmd 并单击,按顺序向下钻取并查看图层属性。
有关访问重叠图层的更多信息,请参阅调整对象的大小和旋转对象。
2019 年 8 月版的 XD 拥有以下增强功能:
XD 增强了与 Adobe Photoshop 的集成,允许您直接在 Photoshop 中打开和编辑 XD 图像并实时更新它们。当您在 Photoshop 中编辑和保存图像时,XD 会保存平面文件,将位图(而不是编辑后的文件)放置到 XD 中。
如需更多信息,请参阅使用外部资源
观看时长:3.20 分钟。
使用最新版本的 XD,您可在 XD 用户体验中,随设计画布一起启动 XD 插件并与之交互。新的“插件”面板与“图层和资源”面板类似,可让用户在 XD 中轻松查看和修改插件。这可帮助您在处理 XD 设计时维护创意流程。
有关更多信息,请参阅查看和安装插件。
观看时长:4.30 分钟。
为了帮助将设计转换为可供使用的网站,您可以从设计规范中复制 CSS 代码片段并将其粘贴到代码中。
发布设计规范时,如果您在“共享以开发”窗口中选择“Web”作为输出目标,则 CSS 代码将自动生成。发布设计规范时,XD 会自动显示所选图层的 CSS 代码片段。
如需更多信息,请参阅在 XD 中检查设计规范。
观看时长:2.58 分钟。
组件支持各种覆盖,并可针对不同屏幕大小无缝调整尺寸,但在应用效果或重新组织对象时可能难以使用。在以前的 XD 版本中,如果您添加的对象超出其原始主组件的边界,则内容会被剪切。
要修复组件边界的问题,请选择主组件,右键单击以选择“调整边界以适应内容”。通过调整组件边界来显示主组件和实例中的所有剪切对象。
如果您创建新组件:
观看时长:4 分钟。
针对 HiDPI 屏幕设计时,小数像素会导致内容扭曲。从 XD 22.0 开始,为了消除设计摩擦和图像失真,XD 在调整对象组、组件和图像蒙版的大小时会舍入像素值。但是,XD 会保留在 XD 22.0 之前版本中所创建内容的小数值。
观看时长:3.20 分钟。
若要全面了解设计流程以及画板布局信息,请单击屏幕左上角的原型名称或设计规范。在默认网格视图中,您也可以选择在网格和流程视图之间切换以显示以下内容:
有关更多信息,请参阅在 XD 中的设计规范之间导航。