Adobe XD是由Adobe公司推出的一款专业的图形化UI、UX设计工具,将原型、交互以及设计功能集于一体,实现了从网站以及移动应用上程序到语音的交互设计,并且软件为用户提供了很多优秀实用的工具组,这大大提高了前端设计师们的效率,另外还能节省很多的时间。拥有视觉设计、原型制作、线框稿、以及互动设计多个功能组,轻松实现用户的需求。在该软件的最新版本中,还开启了全新维度的设计历程,拥有更加直观、强大的设计功能以及简洁明了的界面,为用户们带来的是3D的全新UX平面,可以在3维的立体空间中进行物体的旋转、移动以及查看,更加深度的现实,并且还能利用透视图将作品展现出来,更加直观的工具集打造一个沉浸式的维度体验。在与之前的旧版本相比,其各项功能都得到了优化,变得更加稳定和全面,其次还新增了很多功能,例如插件以及集成的功能,对用户来说兼容性更高并且接触的范围更加广泛。其利用Asana等插件可以帮助用户在工作中保持流畅的运转。这里带来的是
Adobe XD 42中文破解版,需要的朋友快来下载吧。
新功能
1、3D变换
3D变换是本次更新最大的亮点,使用3D变换可以让文本、形状、组在3D空间旋转移动,只需要选择内容之后点击属性检查器中的3D图标即可创建,可以在属性检查器中的直接输入X、Y、Z轴的值也可以在对象上直接拖动旋转或移动。
3D变换还可以与滚动组、堆叠、重复网格、自动动画搭配使用,创建全新的交互体验,下图是官方在物理空间图片上实现的交互动画效果。
2、设计规范支持组件状态
本次更新中软件生成的标注链接支持了组件状态的标注。
3、组件嵌套
之前在组件状态中使用组件并设置组件状态是不生效的,在本次更新中,它支持了组件状态的嵌套,可以实现如鼠标经过菜单展开二级子菜单,然后鼠标经过子菜单再展开三级子菜单的效果,前提是设计触发的对象不能重叠,否则不生效。
4、状态提示
在启动界面最近使用项和云文档列表等地方添加了状态提醒,提示文件是否可离线使用、正在同步...等
5、自动高度文本
点文本可以设置自动高度或自动宽度,宽或高会根据文本的内容自动调整,选择点击文本之后,在属性检查器中可开启。
6、全新的库
此次更新中官方将CC库与资源面板整合,并进行重新设计,资源面板可以一键生成链接,链接可以用来生成Design System Package(DSP),同时也正式发布了for VS Code插件,实现让设计与开发更高效的协作。
7、功能提示
从34.0.12版本开始,界面中很多地方增加了功能提示,鼠标经过会动画提示该功能的使用方法部分还有教程链接,功能提示也可以在“菜单”-“帮助”-“禁用功能提示”中关闭。
adobe xd教程
1.初始界面
当你看到下面的图片时,不要惊慌,做设计的,因该可以看出来下面图片可以分为4个部分#下面有标注#
第一部分,Start a New Design,开始新的设计。在Start a New Design下面,有几个图标,分别是手机,平板电脑,PC电脑以及一个灰色的框
在图标的下面有可选的尺寸,分别对应上面的图标,通过简单的分析,可见这款软件是为界面而生。为了工作效率,该软件在开始界面提供选项,
让用户更快的创建自己所需要的画布,创建的方式很简单,只需要更具需求,选择尺寸,单击对应的图标即可#举个例子,如果想新建一个Iphone6尺
寸的画布,直接点击手机图标即可# 最后一个图标为自定义尺寸。
该软件在新建画布有俩种方法:
1.几乎所有软件都相同的快捷键 Ctrl+N
2.选择尺寸,单击图标即可
第二部分,RECENT FILES,最近文件。大多数软件都有这个功能,打开历史文件,因为我这是新安装的软件,所以是空的。打开历史文件也有俩种方法:
1.command+o
2.单击下面的圆角矩形图标
第三部分,官方出的一个基础操作教程,可以直接略过
第四部分,为了提供方便,该软件将一些做好的UI界面模版置入软件中,使用方法很简单,只需要单击你所需要的模版就打开了。
2.新建后界面(我选择的是iPhone6的尺寸)
1.界面设计/交互设计:请大家牢记一点:几乎所有软件最重要的功能都在界面的左上角。该软件也不例外,他的俩大核心功能界面设计/交互设计,最厉害的就是可以无缝衔接!
2.工具栏:观察工具栏的基本属性后可以确定这款软件是专业的是矢量原型图制作。
3.其它工具见下图即可,具体使用方法会在实例中讲解
软件功能
一、设计令人惊叹的体验。
立即实现从基本的线框到精美的设计的转变。使用矢量绘图工具、颜色、字符样式、网格、参考线等定义用户界面的外观。
1、组件
创建在整个 XD 文档内或多个文档之间重复使用的设计元素。将更改从主组件推送到所有实例,并覆盖任何单个实例的属性。
2、状态
通过创建组件的变体来映射到不同类型的用户交互(例如,悬停、按下、禁用和成功),避免重复工作,并更好地传达您的意图。
3、在 Photoshop 中编辑
直接通过该软件在Photoshop 中打开和编辑图像。右键单击图像,在 Photoshop 中打开并编辑图像,然后单击“保存”,所做的更改将在该软件中自动更新。
4、重复网格
选择一个设计元素,然后根据需要多次快速复制该元素。更新一个元素以修改整个网格,调整元素之间的填充,放置一个 .TXT 文件以将数据导入到网格中。
5、矢量绘图工具
使用一组绘图和形状工具、布尔值运算符、混合模式和其他矢量编辑功能,创建线框、图标、组件和其他设计元素。
6、响应式调整大小
根据不同的屏幕大小轻松调整对象组或组件大小,同时保持对象之间的相对位置和比例不变。
7、 Fonts 集成
不会再有缺失字体的情况。打开该软件文档时,Fonts 便会自动激活。
8、精确设计工具
利用画板参考线、布局网格、微移和重新调整大小快捷方式,以及相对测量功能,设计体验的布局并进行对齐。
9、Sketch、Photoshop 和 Illustrator 文件导入
在该软件中导入并使用来自其他 Adobe 设计工具的文件。文件会自动转换为该软件文件,因此您无需从头开始。
10、资源导出
快速标记要导出的元素,针对您的目标平台选择批量导出元素,或者将其添加到设计规范中以供开发人员下载。
二、创建能够使体验变得生动的原型
将静态设计转变为丰富的用户体验。添加交互、动作、动画等。
1、交互
通过连接画板交流用户体验的流程和感受。借助一系列的触发器和操作来定义您希望创建和共享的体验。
2、状态
触发器
使用该软件,您可以为任何类型的体验创建逼真的原型,包括移动设备上的常见触摸手势、键盘输入、基于时间的过渡、语音命令和游戏控制器。
3、预览
借助适用于 iOS 和 Android 的该软件移动应用程序预览在真实设备上的体验。在桌面应用程序上进行更改,然后在您的设备上测试这些更改,确保保真度和可用性。
4、自动生成动画
创建画板之间的微交互。复制一个元素并更改其属性(例如大小、位置或颜色),该软件便会自动根据所做的更改生成动画。
5、叠加支持
快速添加对叠加在内容上的菜单、对话框、虚拟键盘和其他可视元素的支持。
6、保留滚动位置
让元素始终处于同一位置,在查看者进行滚动操作时,使其位置保持不变。这种全新的原型创建功能非常适合固定的页眉、页脚等内容。
7、导出到 After Effects
利用行业领先的动画工具After Effects 导出设计,并让您的动画更上一层楼。
三、与团队中的每个人共享和无缝协作。
无论是团队内部的概念设计,利益相关者的反馈收集,还是与开发人员的合作,在创作过程的每一步,该软件都支持协作。
1、共同编辑
整个团队同时在同一文档中协作,避免任何重复性工作。在您处理文档时,可以清楚地看到其他人同时在处理文档的哪部分。
状态
2、文档历史记录
查看设计的整个演变过程:XD 在您工作时自动保存历史记录,因此您可以随时返回以前的版本。标记里程碑版本,确保始终可访问设计流程中的关键阶段。
3、共享以供审阅
通过生成可共享的链接来征集设计反馈,或者将链接嵌入 Behance 或网页中。审阅者可通过 Web 或移动设备直接在您的原型上添加评论。
4、应用程序集成
该软件已与更多您喜爱的协作应用程序和高效工作应用程序进行集成,其中包括 Jira、Airtable、Slack 和 Microsoft Teams。
5、录制预览内容
在点击浏览预览内容时,录制 MP4 文件以便与您的团队或利益相关人共享。(仅限 macOS)
四、随需而变的可扩展平台。
该软件是一个开放平台,因此可与您喜欢的工具无缝集成。您还可以访问数百个插件或构建自己的插件来增强该应用程序的功能。
应用程序集成
无需再在应用程序之间跳转。该软件集成了您所喜爱的 Slack、Jira、Microsoft Teams 和 Zeplin 等应用程序,可加快您的创意工作流程。
五、以更适合您的方式工作。
该软件是跨平台的程序,并且支持多种语言,因此您可以跨操作系统进行协作、跨设备预览体验并以您喜欢的语言工作。
1、适用于 MacOS 和 Windows
该软件适用于 Windows 10(通用 Windows 平台)和 macOS。
2、配套移动应用程序
使用适用于 iOS 和 Android 的配套应用程序来体验移动设计的实时交互式原型。
3、多语言支持
支持的语言包括英语、法语、德语、日语、中文、韩语、巴西葡萄牙语和西班牙语。
软件特色
一、更快地从线框转向体验。
该软件提供直观的工具,让您可以快速为布局建模,添加对象、组件和导航,以及连接多个画板来制作交互式原型,从而简化了线框的绘制。这是将您的低保真线框转变为高保真成型设计的最快速方法,一切都在一个应用程序中完成。
1、通过省时的工具,简化屏幕设计。
现在,不能再仅针对一种设备或屏幕尺寸进行设计。使用 Adobe XD 创建在台式机、平板电脑、iOS 和 Android 设备上均可完美显示的设计。利用包含模板、组件和常用功能且针对不同屏幕尺寸自定义的 UI 套件,快速启动设计和线框。生成设计规范,快速交付给开发人员,从而简化设计过程。然后,切换到原型模式以打造体验。
使用不会拖慢速度的工具来设计。
使用 Repeat Grid 等工具,在画板之间即时复制列表、照片库和其他元素,快速启动您的线框并运行。即使在处理数百个画板,您也可以在没有任何延迟的情况下缩放画布。
将低保真线框转变为高保真预览。
将低保真线框转变为高保真预览。
使用图形、组件和文本填充基本线框,并通过拉线定义用户体验。共享模型的预览链接,或者通过几次单击录制视频,从而演示项目流程。
使用有效的协作功能。
利用 Creative Cloud,您可以轻松地与队友协作处理设计。只需单击几次,即可共享线框和模型。发送给利益相关者以获取其评论,以便您根据反馈快速地进行迭代。
预览设计,并快速迭代。
在桌面或移动设备上与应用程序或网站的实时预览进行交互。做出调整,接着就会看到预览实时进行更新,然后将最终的设计规范发送给开发人员。
2、只需几步即可创建高保真设计。
使用链接组件、响应式调整大小以及 UI 套件等功能加快流程,从而将您的设计用于生产中。
“资源”面板
集中管理您的模型资源和组件。通过“资源”面板进行拖放以重复使用和编辑您的资源。创建组件,这样对一个实例所做的编辑便会反映到整个项目中。
轻松编辑资源
直接在该软件界面中编辑图形或图标。在该软件中打开 Photoshop 文件,或通过 Creative Cloud Libraries 从 Illustrator 和 Photoshop 导入图稿。
设计规范
通过向开发人员发送自动生成的设计规范(其中包括画板的顺序和流程、颜色、字符样式和度量值)的链接,加快生产速度。开发人员可以提取、注释并以自己需要的文件格式下载所有资源。
免费的 UI 和线框套件
利用适用于移动应用程序和 Web 的免费 UI 和线框套件,为智能手表、旅行应用程序、Amazon Alexa 等内容设计体验。每个套件都包含模板、画板、屏幕,以及创造独特用户体验所需的一切。
布局网格
通过制作自定义布局网格,在设计中营造一致的感觉。对齐对象,并定义设计在不同尺寸的屏幕中的显示方式。
响应式调整大小
您可以根据不同的屏幕大小轻松调整画板上的对象组大小,同时保持位置和可扩展性不变。该软件会根据各个元素的距离自动计算位置。
3、设计和线框工具在 Mac 和 Windows 上均可执行。
跨操作系统进行协作。在您选择的平台上工作,并与使用其他系统的同事共享工作流程。在两种平台上,该软件均可顺畅运行,并且文件也完全兼容。
二、用于 UI 和 UX 设计的快速、灵活的原型创建工具。
借助一体式 UX/UI 设计工具,快速地将创意转变为原型并进行开发。打造适用于移动应用程序、网站、语音等内容的体验。发布和共享交互式原型,从而快速地征集反馈并进行迭代。
1、几乎随时随地创建、预览和共享原型。
只需单击一下,即可从设计模式转为原型模式。通过在不同屏幕上预览来测试交互。与团队共享原型以发表评论,这样您可以快速更新和发布。
快速地将线框转化为实时原型。
通过在画板和对象之间拉线,在设计中添加交互关系。通过“资源”面板拖放资源。实时预览来观看原型并做出微调。
自动生成画板过渡的动画。
创建具有沉浸式动画的高保真原型,例如拖动手势、模糊、缩放和定时过渡。只需复制画板,修改对象属性,然后应用自动生成动画操作。
在任何设备上预览和测试您的原型。
借助该软件,您可以在 Web、iOS 或 Android 上预览您的设计和原型。做出更改,并立即查看实际效果。录制并共享视频,突出体现用户体验。快速地对设计进行迭代,并将包含流程、度量值和样式的设计规范提交给开发人员。
让协作变得更简单。
发送链接或私密邀请来与团队分享您的原型。留下注释并快速征集反馈。您所做的任何更改将在所有位置进行更新。
2、通过更少的步骤更快地创建原型。
它是一款功能强大的原型创建工具,利用该工具,您可以更快地将您的设计投入开发并简化设计流程。
更快实现从设计到原型创建的方式
只需单击一下,即可从设计模式切换为原型模式,并可选择对象来拖动线条,将它们连接到其他屏幕上。只需通过线条连接画板,即可创建点击式原型。
语音原型创建
使用语音触发器与原型交互,为智能助手和其他语音驱动的体验创建 UX。
缓动和动画
使用推动、拉动和叠化等选项设计屏幕过渡的原型。该软件 还支持缓动函数,例如,缓入/缓出、回弹、对齐和终结。
基于时间触发
使用点击和拖动等触发操作与原型进行交互。使用定时过渡来设计入门培训流程、进度屏幕和决策流程的原型。
随时随地查看原型
使用 Creative Cloud,您可随时随地使用原型。将其导入桌面、手机或平板电脑。随时随地进行预览,从而更快、更有效地进行迭代。
3、原型创建工具在 Mac 和 Windows 上均可执行。
跨操作系统进行协作。在您选择的平台上工作,并与使用其他系统的同事共享工作流程。在两种平台上,该软件均可顺畅运行,并且文件也完全兼容。
adobe xd使用技巧
创建交互式原型:
完成屏幕设计后,您可以将各屏幕互相连接,以便直观地了解用户如何体验您的应用程序或网站。
该软件允许您创建交互式原型,直观地展示如何在屏幕或线框之间导航。您可以预览交互,验证用户体验并对设计进行迭代,从而节省开发时间。您还可以录制交互过程并与利益相关者分享,以获取他们的反馈。放大/缩小并查看原型特定部分的细节。
1、设置“主页”屏幕:
“主页”屏幕是您的应用程序或网站的第一个屏幕。您的用户会通过“主页”屏幕开始在应用程序或网站中进行导航。
此外,如果您在预览原型时并没有选择任何内容,预览将从“主页”屏幕开始。也就是说,默认情况下,您的“主页”屏幕会被设置为第一个添加连线的画板。
切换到“原型”模式。
单击要设置为“主页”屏幕的画板。左上角会出现一个灰色的主页图标。
点击“主页”图标。它会变成蓝色,提示该画板或屏幕现已成功设置为“主页”屏幕。
如需将另一画板设为“主页”屏幕,只需单击与该画板关联的主页图标即可。要在发布后查看所有画板,请务必链接所有相关的画板。
2、连接屏幕
要链接屏幕以呈现交互式原型,可以通过将交互式元素连接到目标对象或画板来连接画板。在链接画板或屏幕之前,请适当地命名画板。这样做有助于您确定要链接到哪个屏幕。
切换到“原型”模式。
单击要链接的对象。对象上出现带箭头的连接手柄。将鼠标悬停在手柄上,光标会变为连接器。
将交互式元素链接到目标屏幕
单击并开始拖动鼠标,可以看到连接器。在目标画板或屏幕上释放鼠标。
当您连接第一个元素时,该元素所在的画板将设为主画板。
为了使原型更具吸引力,您可能需要引入触发器和操作。为此,请在画布上单击“+”按钮,或在“属性检查器”中单击“+”,并设置以下选项:
触发器和操作:
触发器:选择“点击”、“拖动”、“悬停”、“时间”、“按键和游戏手柄”或“语音”选项中的任何一项。
操作:选择“过渡”、“自动制作动画”、“叠加”或“语音播放”选项中的任何一项。
目标:如果您在步骤3中选择了画板,并且想要对其进行更改,则可以执行此操作。
延迟:开始过渡的时间延迟。可接受的范围是0.2-5秒。
缓动:选择要在源画板上应用的缓动效果。
持续时间:输入持续时间值,以表明缓动效果的持续时间。可接受的范围是0.2-5秒。
您还可以组合多个触发器来创建高级交互,而无需在画板上的不同对象之间分配触发器。
为此,请使用画布上的“+”按钮,或在“属性检查器”中单击“+”,然后选择“触发器”、“操作”和“目标”(如步骤4所示)。
请记住,您可以应用一次点击、拖动、悬停和时间触发器,而应用多次语音、按键和游戏手柄
组合多个触发器
如需预览您的原型,请单击“设备预览”。
示例:
以下是多个交互的一些示例。
提示
在“原型”模式下如何更快地创建交互:
您可以在不同画板之间复制和粘贴对象。对象及其交互会一同被复制和粘贴。
您也可以单独复制和粘贴交互。复制一个对象,右键单击另一个对象,然后选择“粘贴交互”。只有交互会被粘贴。
如需将元素指向另一屏幕,请再次单击手柄并将其拖至所需的屏幕。
如需查看特定画板的连接,请选择画板标题。
如需删除交互,请将连接器的目标手柄从目标画板拖到草稿区域。
要编辑或删除连线,请选择要编辑或删除的连线。还可以从“属性检查器”中选择一个交互,然后编辑其交互。
使用CMD+C即可翻转触发器并查看相关工具提示。
翻转连线可以看到一个数字,该数字显示您有多少交互。
将鼠标悬停在连线上可以查看工具提示,该工具提示将显示迭代次数及其类型。
要将定义的交互应用于其他对象,请选择对象或画板,选择“复制”,单击目标对象或画板,然后在右侧菜单中选择“粘贴交互”。
3、与上一个画板链接
在“原型”模式下,选择要链接的元素。出现小箭头时,单击箭头,它会自动将操作设置为上一个画板。您还可以将元素链接到画板,然后选择“操作”>“上一个画板”。
选择上一个画板
当“操作”设置为“上一个画板”时,图标会发生变化。
设置目标:
使用预览窗口预览链接。
4、取消与画板的链接
在“原型”模式下,选择“目标”>“无”。
您也可以将连线从画板拖到草稿区域(画板之间的灰色空间)。
取消与画板的链接
注意:
只有在画板被链接到某一目标时,“无”选项才可用。
在浏览器中预览链接。先前从元素设置的所有目标链接都将被删除。要在发布后查看所有画板,请务必链接或取消链接相关的画板。
5、预览和录制交互
注意:
Windows上的Adobe XD不支持录制原型。但是,有一种变通方法。按Windows+G键并使用原生录制程序录制“预览”窗口。
您可以预览原型,以便测试原型和交互。您还可以录制预览,并将录制内容保存为.mp4文件。然后,您可以选择与您的利益相关者共享这个.mp4文件,他们可以查看(或审阅)原型的演练并提供反馈。
单击“桌面预览”图标。此时会出现“预览”窗口并突出显示画板。
如需测试屏幕之间的导航,请单击交互式元素。
在“预览”窗口中预览时,可以编辑原型的设计和交互。可以立即预览这些更改。
如需录制交互,请单击“预览”窗口中的“录制”图标。如需结束录制,请按Esc,或者再次单击“录制”图标。
推荐评语
好用的软件