原型设计工具——Adobe XD

发布时间 2023-05-22 16:56:02作者: x_sky_u

介绍:

Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是一款结合设计与建立原型功能,并同时提供工业级性能的跨平台设计产品。设计师使用Adobe XD可以高效准确的完成静态编译或者框架图到交互原型的转变。

主要功能:

  • 设计与原型制作:用户能够使用XD制作框架图,创建保真度可高可低的视觉设计,定义画板之间的导航流程和转换,预览原型并导出资源供制作使用。
  • 重新定义现代化工作流程:定义重复元素、遮盖图像、管理色彩、风格与符号,以及规范图层的操作都比以往更加直观和迅速。
  • 集成现有工作流程:用户可以导入笔画和图像效果,更快速的将Photoshop文件导入Adobe XD,此外,在导入Sketch文件时多次转化的保真度也有所提升。
  • 卓越的质量与性能:XD的两大特性就是速度与稳定性——从瞬间启动到光速缩放和平移(即使一个项目中包含数百个画板),在Windows和Mac平台都具有稳定性。
  • 跨平台原型设计:用户可以在Mac或Windows 10系统中进行设计,并在浏览器中预览原型。

核心特点如下

  • 交互设计:Adobe XD 可以轻松地创建复杂的动画和交互效果,为用户提供更好的体验。
  • 设计规范和样式库:Adobe XD 提供了团队协作所需的设计规范和样式库,这些都可以被整个团队共享,从而确保设计的一致性。
  • 原型测试:Adobe XD 可以通过 Cloud Documents 实时在线预览和测试原型,方便设计师和团队之间的协作。
  • 多平台支持:Adobe XD 可以在 Mac 和 Windows 平台上运行,并且与其他 Adobe 软件高度兼容。

一般工作流程:

用 Adobe XD 进行设计、制作原型和共享

简单地说,此工作流程可用以下几个步骤来描述:

  • 设计:创建设计布局元素、添加画板以及从其他应用程序(如 Adobe Illustrator、Adobe Photoshop 和 Adobe After Effects)中导入资源。还可以使用插件,自动执行重复操作或一部分繁琐、复杂或重复的设计工作流程。
  • 创建原型:选择设计中的对象或画板,并在画板之间创建交互。
  • 共享:一旦项目可供审阅,您便能与利益相关者共享原型或设计规范,或导出项目或资源。

设计

为画板选择预设大小。如果您想使用自定义大小,请在自定义选项下的文本字段中输入宽度和高度(以像素为单位)。

也可以指定自定义大小。

通过下列方法之一收集资源:

  • 使用 Adobe XD 的设计工具从头开始设计您的资源。
  • 从 Photoshop、Sketch、After Effects 或 Illustrator 中复制您的设计,然后将其粘贴到 Adobe XD 中的画板中。还可以通过以下工具导入、拖动或复制并粘贴 JPG、SVG、PNG 或 GIF 文件:
    • 文件资源管理器(在 Windows 上)
    • Finder(在 Mac 上)
    • Web 浏览器
    • OS 剪贴板

改进设计中的对象。例如,组合或遮盖对象、更改笔触和填充属性、使用叠加将内容堆叠在基本画板顶部以及移动或旋转对象,或者对多种屏幕尺寸和布局使用响应式调整大小来设计资源。

使用链接的资源可创建并维护单一版本的 UI 套件、贴图纸或样式指南,以一致的设计可扩展性和插件进行跨文档分享,并自动执行重复操作或一部分单调、复杂或重复性的设计工作流程。

使用“重复网格”功能轻松地位重复元素构建布局,基于现有内容创建网格,而无需手动复制它们

使用插件自动执行重复操作或一部分繁琐、复杂或重复的设计工作流程。

为原型中需要的每个屏幕添加更多画板。

原型

可以使用语音功能、自动制作动画、拖动手势和定时转换来创建交互式原型。

可以预览原型中的交互性并在预览时将交互录制为 MP4 文件。

如需链接画板或设置交互性,请选择画板或对象,然后单击右侧的箭头。

此时会显示一条线。只需拖动此连线并将它连接到另一个对象或画板。在出现的弹出窗口中,指定过渡选项和过渡持续时间。

还可以使用叠加模拟过渡概念,而无需跨多个画板复制内容。

单击应用程序右上角的“预览”图标。

XD 会显示一个预览屏幕,使用此屏幕,您可以查看不同的页面并在不同的页面间进行导航。

“预览”屏幕具备一个“录制”图标,使用此图标,您可以录制页面之间的流程并将其保存为 MP4 格式。 

共享

共享原型以进行设计审查、演示或用户测试。还可以发布用于开发的原型和设计规范,或者根据自己的偏好自定义查看体验

优点:

Adobe XD日益受到用户的青睐的两个最大原因可能是由于它可以在Mac或PC环境中运行,并且对Creative Cloud用户免费。

  • 专为设计而设计,并拥有坚实的基础架构。 你可以使用可重复使用的元素进行设计(和编辑),快速调整组和对象的大小,并创建通用的元素和结构,样式或网格
  • 可以使用Adobe XD打开其他Adobe工具(Photoshop和Illustrator)以及Sketch中的文件
  • 具有精确设计功能的矢量编辑
  • 使用流程,动画,语音原型,游戏支持和移动预览创建交互式原型
  • 文件协作或以查看模式共享的能力
  • 能够通过链接保存在云中
  • 与大量插件和应用程序集成一起使用
  • 包括移动应用版本,因此你可以跨设备使用
  • 它的外观和感觉与其他Adobe产品类似,因此已经通过其他程序熟悉Adobe工具的用户不用再花上很多的时间来熟悉
  • 不断更新,因此你将拥有一个具有可使用功能的工具

缺点:

 

  • 收费,价钱较贵
  • 可以绘制基本形状,但不能选择自定义形状
  • 可以导出设计,但是如果没有插件就无法获得CSS
  • 不断更新。 虽然这也是一个优点,但进行大量更新可能会有些麻烦,而且每次更新并非总是没有错误