可以在 XD 中的画板上设计快速简单的设计。然后,将画板连接在一起以创建可与利益相关者共享和迭代的交互式原型。

Adobe XD 已与 Photoshop 和 Illustrator 良好集成。您仍可继续在您喜欢的应用程序中进行设计,将这些资源导入 XD 中,然后使用 XD 创建和共享原型。XD 支持 SVG 和位图文件,且不会降低保真度。之后,您可以在 Adobe XD 中进一步增强这些资源,或使用它们开发交互式原型。

一般工作流程

利用 Adobe XD 进行设计、创建原型和共享

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

设计:创建设计布局元素、添加画板以及从其他应用程序(如 Adobe Illustrator 和 Adobe Photoshop)中导入资源。

创建原型:选择设计中的对象或画板,并在画板之间创建交互。

共享:一旦项目可供审阅,您便能与利益相关者共享原型或设计规范,或导出项目或资源。

继续阅读,了解有关在 XD 中进行设计、创建原型和共享的更多详细信息。您也可以观看以下视频教程,快速了解使用 Adobe XD 可以处理哪些工作。

规划和设计应用程序或网站

创建和预览交互式原型

设计

启动 Adobe XD。

此时会显示“开始”屏幕。

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

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

使用 Adobe XD 的设计工具从头开始设计您的资源。如需更多信息,请参阅绘图工具和文本工具。

从 Photoshop、Sketch 或 Illustrator 中复制您的设计,然后将其粘贴到 Adobe XD 中的画板中。还可以通过以下工具导入、拖动或复制并粘贴 JPG、SVG、PDF、PNG 或 GIF 文件:

- 文件资源管理器(在 Windows 上)

- Finder(在 Mac 上)

- Web 浏览器

- OS 剪贴板

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

改进设计中的对象。例如,组合或遮盖对象、更改描边和填充属性、使用叠加将内容堆叠在基本画板上以及移动或旋转对象。

如需更多信息,请参阅:

选择对象、调整对象的大小和旋转对象

使用布尔运算组合对象和使用形状遮盖对象

锁定、复制对象以及为其编组

移动、对齐、分布和排列对象

设置对象的描边、填充和投影

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

为原型中需要的每个屏幕添加其他画板。如需更多信息,请参阅使用画板。

原型

可以通过链接画板来创建交互式原型。可以预览原型中的交互性并在预览时将交互录制为 MP4 文件。

链接画板:

如需链接画板或设置交互性,请选择画板或对象,然后单击右侧的箭头。此时会显示一条线。只需拖动此连线并将它连接到另一个对象或画板。在出现的弹出窗口中,指定过渡选项和过渡持续时间。

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

如需详细信息,请参阅创建交互式原型。

预览和录制原型:

单击应用程序右上角的“预览”图标。XD 会显示一个预览屏幕,使用此屏幕,您可以查看不同的页面并在不同的页面间进行导航。“预览”屏幕具备一个“录制”图标,使用此图标,您可以录制页面之间的流程并将其保存为 MP4 格式。

如需更多信息,请参阅预览和录制交互。

注意:

Windows 上的 Adobe XD 不支持录制原型。但是,有一种变通方法。按 Windows + G 键并使用原生录制程序录制“预览”窗口。

共享

您可以使用下列方法之一来与项目利益相关者共享原型:

将原型发布到 Web,并为利益相关者提供 Web 链接或私人邀请,以供其查看或评论您的原型。还可以生成可用于将原型嵌入任何支持 iFrame 的网站中的嵌入代码。如需更多信息,请参阅发布原型。

发布设计规范并为开发人员提供 Web 链接或私人邀请。开发人员可以检查测量值、颜色和字符样式的设计规范,并进行复制。如需更多信息,请参阅为开发人员发布设计规范。

xd怎么制作年月日选项_XD中文用户手册:如何用AdobeXD制作交互原型相关推荐

  1. xd怎么制作年月日选项_XD教程| 如何使用Adobe XD CC制作动画原型

    原标题:XD教程| 如何使用Adobe XD CC制作动画原型 前几期,我们教大家如何使用Photoshop将一系列静止图像合成简单的GIF动画图像.常言道,温故而知新,学会了也要记得勤加练习和复习! ...

  2. xd怎么制作年月日选项_Adobe XD从入门到精通(上)

    原标题:Adobe XD从入门到精通(上) Adobe XD是一款免费的轻量级的原型制作软件,功能大致分为"设计"(静态界面设计)和"原型"(实现动态交互),他 ...

  3. xd怎么制作年月日选项_Adobe XD 入门教程-如何在 Adobe XD 中创建交互式原型?

    完成屏幕设计后,您可以将各屏幕互相连接,以便直观地了解用户如何体验您的应用程序或网站.Adobe XD 允许您创建交互式原型,直观地展示如何在屏幕或线框之间导航.您可以预览交互,验证用户体验并对设计进 ...

  4. 如何制作python检查小软件_如何用Python制作整蛊小程序

    原标题:如何用Python制作整蛊小程序 下面的整蛊程序,千万不要发代码,否则就实现不了你整蛊的目的了.完成后一定要打包成一个exe程序,再发给朋友使用 . 1. 使用 pip install pyi ...

  5. 怎樣制作线段动画_教你如何用Maya制作类似线条生长的动画

    在片头制作过程中大家应该经常会看到类似线条生长的动画,本篇教程将讲解在Maya中如何用路径动画制作类似效果.这效果用AE等后期软件可以很容易的完成,但是要让物体拥有空间与立体感就不是一件容易的事.解决 ...

  6. dw如何制作图片自动切换效果_如何用Dreamweaver制作出图片切换的效果

    QQ图片切换 body{margin: 0px;} A {COLOR: #313131;font-size: 9pt; TEXT-DECORATION: none} A:hover {COLOR: # ...

  7. ae破碎效果在哪_AE制作破碎效果的详细方法_如何使用AE制作碎片效果_碎片效果怎么使用_AE制作碎片爆炸效果2019完整版教程_9号资讯...

    第 2 页 AE制作破碎效果的详细方法 如何用AE制作破碎的效果? 1.首先,打开我们的软件,AE,小编用的是CS6版本的,不过即使版本不同,其中的操作也都是大同小异哦. 2.打开之后,我们需要新建一 ...

  8. xd怎么做页面滑动_XD教程 | 如何在XD中制作拖拽手势”

    原标题:XD教程 | 如何在XD中制作"拖拽手势" 今日主题:设计一个滑动交互 使用工具:Adobe XD 预计时长:1-2分钟 实用指数:★★★★★ 难度系数:★ 本期教程,我们 ...

  9. 制作一张支持中文的Knoppix CD

    制作一张支持中文的Knoppix CD 还有不少问题,欢迎提出改进建议 (mailto:imaq%20at%2021cn.com QQ:15704509) 这篇文章的中间一部分也可以用于Knoppix ...

最新文章

  1. Linux下设置mysql和tomcat开机启动
  2. SQL Server 数据库表的统计信息的更新
  3. 12日疯人认证百度云_百度云智峰会12月17日召开,央视财经对话现场要做一场高端访谈...
  4. 机器学习数据集划分-训练集,验证集,测试集
  5. Python 之列表的常用方法
  6. Docker之Linux Cgroups
  7. 常用的位操作:置位、清零与测试
  8. linux 目录大小是12288,为什么有些目录数的引用超过3,为什么很多目录的大小都是4096...
  9. Qt 生成bin文件
  10. 非maven项目转成maven后pom.xml解决方法
  11. 谁拿了最多奖学金(洛谷-P1051)
  12. [转载] 简易Python代码---购物清单
  13. 【原创】Kakfa log包源代码分析(一)
  14. 为什么要分层?数据仓库分层架构深度讲解
  15. golang的优劣与前景分析
  16. 使用html打开电脑前置摄像头并拍照
  17. 黑苹果安装各种问题解决办法
  18. 不谋一时不足以谋一域_不谋万世者不足谋一时,不谋全局者不足谋一域是什么意思...
  19. layui表格宽度自适应
  20. 指数函数和正弦函数相乘

热门文章

  1. 儿童书写台灯哪个牌子比较好?盘点护眼学生用台灯品牌排行
  2. allegro SPMHDB-225 The maximum number of text sizes has been reached.错误解决办法
  3. 他们不是配角--罗惠   文 / 王芥(转的)
  4. Python实现人机对话
  5. 数据库JDBC驱动下载大全
  6. c语言编程26个字母,菜鸟求助,写一个随机输出26个英文字母的程序
  7. 防火墙——网络攻击防范
  8. Autofac Circular component dependency detected 错误解决
  9. 深度学习与中文短文本分析总结与梳理
  10. 腾讯云GT4 GPU服务器NVIDIA A100显卡AMD ROME平台支持PCIe 4.0技术