作者：文家齐
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Adobe XD界面设计与原型制作教程(全彩)试读：
开始
到现在，四年来一直在国内推广XD的使用，并持续分享相关素材、资讯和教程。笔者结合XD中文网四年的实际运营经验为读者带来这本书，本书是初学者快速自学XD 2019的教程，全书从实用角度出发，全面系统地讲解了XD 2019的所有应用功能，涵盖了XD 2019的全部工具、面板和菜单命令，同时安排了实战性的案例、详细的制作步骤，还包含了第三方插件和集成的使用方法。
本书共分为8章，按照实际工作中设计的流程，从基础知识开始逐步深入，按照“认识—了解—掌握—实战”的过程，让你从入门到精通全面掌握XD。
第1章为XD的基础理论知识，主要讲解XD相关的基础知识、安装与卸载、界面与工具等内容。通过本章学习，读者可以对XD有一个基本的了解。
第2章为XD的基本操作知识，帮助读者掌握XD的文件、视图、图层面板及资源面板的管理等知识，详细讲解各种工具的操作方式，以及辅助功能中的距离测量、智能参考线、自动吸附功能的使用方法。
第3章为属性检查器的使用知识。通过属性检查器，根据选择的对象，用户可以利用不同的选项来定义其不同的属性，如使用矢量运算工具可对多个对象进行不同的组合来创建新的对象，修改对象的宽高、位置、尺寸、颜色、边框及阴影；使用加、减、乘、除等数学计算可创建精确的数学设计等。
第4章为导入和导出资源的知识。通过合理地使用外部资源，读者可更快、更高效地完成设计工作。本章还包含导出、切图的内容。
第5章为创建可交互式原型的知识。能创建可交互式原型是XD的一大亮点，将设计与原型集成在同一个软件中，用户在设计的基础上就可以轻松完成交互设计。
第6章为预览和共享的知识。通过XD提供的预览和共享功能，用户可以预览原型查看实际效果，通过共享给同事、客户来快速获得反馈。
第7章为插件和第三方工具的知识，详细讲解XD插件的安装和管理，选取了一些常用的插件和第三方工具进行讲解，这些插件和第三方工具可以用来简化、加快甚至自动完成一些复杂重复的设计工作。
第8章为商业实战知识，详细演示网页设计、微信小程序设计及移动界面设计的实战步骤的同时，也让读者了解并掌握一些必要的设计规范，为实际工作打下扎实的基础。
本书旨在编写一本对读者真正有帮助的界面设计教程，让读者在阅读本书以后可以轻松地掌握XD设计界面和制作原型的方法，在实际设计过程中使用XD能起到事半功倍的作用。
同时，感谢我爱的人和爱我的人，感谢所有支持和帮助过我的人。另外，特别感谢电子工业出版社的编辑田振宇，没有他的帮助，本书不可能完成。
由于笔者水平有限，书中难免存在错误和不妥之处，希望广大读者批评指正。在学习过程中如果发现问题或有更好的建议，欢迎通过微信公众号“XD资源库”或邮箱s@94xy.com与笔者取得联系。第1章 初识Adobe XD
Adobe XD是一款由Adobe公司为设计人员构建的界面设计工具。为了让大家更好地学习XD，本章首先对XD软件做一个大致的介绍。1.1 XD的基本介绍
本书关于XD的介绍以XD 2019为例。XD是由Adobe公司开发的一款矢量设计软件，能够轻松地完成移动应用界面、网页设计及简单的交互设计，在Mac OS和Windows系统上都能获得比较好的体验，支持在iOS和Android设备上实时预览。其更重要的是除云服务外，XD的其他功能完全免费，并且能够与Photoshop、Illustrator及After Effects无缝衔接，甚至能够打开Sketch文件，打通设计全流程。
XD主要用于设计移动应用界面和网页，并且能够制作可交互式原型。本书中有关XD的操作使用的软件版本均是XD 2019的17.0.12.11。目前XD保持每月更新一次，且每更新一次都会增加一些新的功能。
XD支持一键切换“设计模式”和“原型模式”，在原型模式下通过“单击”和“拖动”操作能创建交互（图中蓝色的线条为交互调整线条），并支持在桌面端和手机端实时预览交互效果。
XD中的“重复网格”功能能大大减少设计人员的工作量。在交互设计中，绝大部分需要重复的设计工作都能通过“重复网格”功能来完成。以往，在设计一个文章列表页时，需要先制作好一组元素，然后通过复制、粘贴及修改等多重操作才能完成整个列表页的制作，枯燥、重复又耗时。有了“重复网格”功能，在完成一组元素的制作后，只需要开启“重复网格”功能，拖动重复网格的“控制”按钮，然后批量拖入准备好的元素，在几秒钟内就可以制作出一个完整的文章列表。
XD支持一键打开PSD、SKETCH及AI格式的文件，在Windows上也支持打开SKETCH格式的文件进行编辑，使得从其他软件切换到XD完全无障碍，也能够直接导出设计文件到After Effects进行动效设计。
同时，XD支持使用插件，据说为此官方曾拿出1000万美元作为投资和奖励，来鼓励和支持第三方开发XD相关的插件，增强XD生态系统。下图为部分已发布的XD插件，在管理器中就能直接下载和使用。1.1.1 XD与同类软件的区别
与XD同类的软件有Photoshop、Sketch及Axure RP等，下面主要来说明一下XD与这3款软件的使用区别。
1.与Photoshop的区别
Photoshop是一款位图图像处理软件，诞生至今已经将近30年，包含图像处理、图形处理、文字处理及印刷处理等多种功能，是设计师必备的设计软件之一，主要用于平面设计、网页设计、美工及影楼后期处理等领域。尽管Photoshop是一款强大且好用的图像处理软件，但在笔者看来，其在UI界面设计和网页设计上使用起来并不是那么顺手。随着版本的升级及功能的不断增加，Photoshop越发成为一款重量级的软件，但与此同时也出现了占用内存越来越高、越用越卡及保存的文档非常大等问题。
XD是一款矢量设计软件，专注于界面设计，有着简洁的操作界面，功能清晰，无弹窗，启动速度和运行速度快，且非常轻量化。同时它可以直接打开PSD文档进行编辑，旧有的素材也可以直接拿到 XD中进行编辑。此外，XD除云服务外的其他功能都完全免费，且云服务每月只收服务费9.99美元，与动辄单价数千元的Photoshop相比更具优势。
2.与Sketch的区别
近年来一款名为Sketch的矢量设计软件成为了设计圈的新贵，也被冠以“Photoshop杀手”的称号。Sketch在UI界面设计和网页设计上相比Photoshop有无可比拟的优势。据相关数据显示，Sketch在UI设计行业的市场占有率已超过老牌的Photoshop。但遗憾的是，Sketch不支持Windows操作系统使用。
XD与Photoshop一样，都是由Adobe Systems开发和发行的软件。XD开发和发行的目的便是与Sketch直接竞争。XD作为一款专注于UI界面设计和网页设计的矢量设计软件，XD的操作界面比Sketch更加简洁，并且在发布之初就推出了“重复网格”“原型模式”等比Sketch更具有优势的功能。相比Sketch，XD最大的优势便是同时支持Mac OS和Windows操作系统，而且XD还能直接打开PSD和SKETCH格式文件进行编辑，而Sketch不能打开XD格式文件进行编辑。
3.与Axure RP的区别
在笔者接触的一些有关XD的交流群中，经常都会看到有群友问道：“原型设计用Axure RP更合适，还是用XD更合适？”
Axure RP是一款专业的快速原型设计工具，使用人群更多的是产品经理。通过搜索引擎搜索关键词“Axure RP”，在图片结果中显示使用Axure RP完成的更多是简易线框图、流程图。
而通过搜索引擎搜索关键词“Adobe XD”，在图片结果中显示更多的是UI界面图，由此可知XD主要面对的是UI设计师。基于以上描述，笔者认为这两款软件侧重点不同，比较的意义不大（尽管XD也能制作线框图、流程图），因此这里不再做过多分析和描述。1.1.2 位图与矢量图的区别
计算机的数字化图像分为两种类型，即位图和矢量图。它们各有各的优缺点，应用领域也不尽相同。
位图图像也被称为点阵图像或绘制图像，由被称作像素的单个点组成。将这些点进行不同形式的排列和染色，可以构成不同的图像，但图像放大后会模糊。制作位图图像的软件主要是Photoshop。
矢量图像根据几何特性来绘制图形，用线段和曲线描述图像，矢量可以是一个点或一条线。矢量图像只能靠软件生成，矢量图像文件占用内存空间较小。因为这种类型的图像文件包含独立的分离图像，可以自由无限制地重新组合，特点是放大后图像不会失真，图像清晰度和分辨率无关。制作矢量图像的软件主要有XD和Illustrator。
位图图像和矢量图像的基本区别是位图图像表现出来的色彩较丰富，颜色信息较多，所占空间也较大；矢量图形表现出来的色彩较单一，所占空间也较小。1.1.3 关于XD的一些其他使用说明
XD目前只能部分替代Photoshop和Illustrator的工作，但是XD可以做到与Photoshop、Illustrator互联互通。需要处理位图图像的部分，可以在Photoshop中完成后再导入到XD 中来完成。针对一些复杂的插画绘制或UI图标绘制，可以在Illustrator中完成后直接复制粘贴到XD中。
从网络上下载任何PSD、XD、SKETCH、AI格式的素材，都可以用XD打开后通过复制粘贴来使用。
完成设计工作后，可以直接在XD中切换到“原型模式”制作交互。制作的交互可以直接预览、在手机端预览或生成在线链接，将在线链接发给同事、领导来获得反馈。
设计获得认可后，可以一键切图、生成标注给开发，或者将文件导出到After Effects进行动效设计，当然，XD也支持将文件导出到其他第三方集成软件，如ProtoPie。1.2 XD的安装与卸载
XD的安装方法与其他软件不同。XD 正式版没有独立的安装包，需要先安装Adobe桌面创意应用程序Adobe Creative Cloud，后再通过Adobe Creative Cloud安装XD。
技巧提示
Adobe Creative Cloud是Adobe 桌面创意应用程序，使用Adobe Creative Cloud可以安装包含XD在内的Adobe系列的所有软件。1.2.1 系统要求
要安装XD需要使用Windows 101703及以上版本或Mac OS 10.12及以上版本的操作系统。如果系统不满足要求，将无法安装XD，只能先换系统或更新系统，再进行安装。1.2.2 安装和卸载
XD只能通过Adobe Creative Cloud安装或XD安装器安装，事实上XD安装器的运行方式也是先安装Adobe Creative Cloud，再安装XD。目前所有的直接安装包、破解版及纯净版均为测试版，非正式版，不建议安装。观看在线教学视频
安装流程
01通过浏览器打开XD官网，然后单击导航栏中的“下载”按钮，单击后页面会自动跳转到“登录/注册”页面。XD的基本功能使用完全免费，但必须先注册或登录才能正常使用，如果需要使用云服务可以购买付费计划。
02在已有XD账号的情况下可以直接登录，没有账号可以单击“注册”按钮去注册一个账号。登录后会自动弹出软件下载确认对话框，下载安装后会自动安装Adobe Creative Cloud，再自动安装XD。若已安装Adobe Creative Cloud，则会自动打开Adobe Creative Cloud并安装XD，同时页面会自动跳转至“正在安装 XD...”页面。
03安装完成后可在Adobe Creative Cloud的“Apps”栏中看到XD已安装。在此界面中，可以直接安装、打开、更新及卸载XD和Adobe系列的其他软件。1.3 XD的工作界面介绍
XD的工作界面分为启动界面和设计界面，了解工作界面是学习XD的基础。观看在线教学视频1.3.1 启动界面
打开XD，首先看到的是启动界面。启动界面分为左右两栏，左侧为导航，右侧为导航所对应的内容。启动界面默认打开的是主页，此时右侧对应的内容为“预设画板”“自定义大小”“了解基础知识”和“最近打开的文件”等。
预设画板包含16个默认画板，分为移动端、平板电脑端及桌面电脑网页端3组。移动端默认为iPhone X/XS 375×812px画板，平板电脑端默认为iPad 768×1024px画板，桌面电脑网页端默认为Web 1920 1920×1080px画板，单击面板名称旁的下拉箭头可以切换画板，鼠标指针经过移动端、平板电脑端、桌面电脑网页端图标时，对应图标会变为灰色，选择好画板后单击图标，可以创建一个XD 文件。
如果预设画板不能满足需求，可以使用“自定义大小”，自定义画板中W代表的是宽度Weight、H代表的是高度Height。例如假设需要创建一个宽为800px、高为600px的画板，在自定义大小中，在“W”栏中输入800、在“H”栏中输入600，然后单击画板图标，即可完成设置。
在启动页面的左侧导航中单击“附加设备”选项，即可进入XD附加设备页面。附加设备页面中展示了插件、用户界面套件、应用程序集成等信息，鼠标指针经过会显示可下载或可打开链接，单击相应图标可以下载或通过浏览器打开详细链接。插件可以扩展XD的能力，提高工作效率，用户界面套件可以让用户更快地开始设计，第三方集成可以让XD与其他软件互通。在后面的章节中，笔者会详细讲解插件、用户界面套件及应用程序集成的使用方法。
下面，笔者将对左侧导航中的其他选项内容做一下补充解释。“云文档”选项：展示存储在Adobe云中的XD文件。“已与您共享”选项：展示其他用户共享的XD 文件。“管理链接...”选项：通过浏览器打开在XD中共享链接的管理页面，可以进行查看和删除。“已删除”选项：展示已删除的XD 文件，在该页面可执行永久删除操作。“您的计算机...”选项：单击可选择计算机中的文件用XD 打开。1.3.2 设计界面
XD必须新建或打开一个文件才能进入到设计界面。在1.3.1节中提到，选择合适的画板后单击相应图标可以新建一个文件。使用移动端默认设置，然后单击移动端图标，创建一个包含iPhone X/XS 375×812px画板的XD文件，进入到设计界面。XD设计界面包含导航栏、设计模式、原型模式、工具栏、画布和画板及属性检查器。1.3.3 菜单栏
XD在Mac OS操作系统中使用的是系统菜单栏。这个菜单栏包含“XD”“文件”“编辑”“对象” “插件”“视图”“窗口”及“帮助”等多个菜单命令。“XD”菜单：包含XD的“关于”“隐藏”“显示”及“退出”等操作命令。“文件”菜单：包含各种文件的操作命令。“编辑”菜单：包含各种编辑文件的操作命令。“对象”菜单：包含“编组”“对齐”等对XD中对象进行操作的命令。“插件”菜单：包含“使用”“查看”“管理”及“开发”等对XD插件进行操作的命令。“视图”菜单：包含“放大”“缩小”等对视图进行设置的操作命令。“窗口”菜单：包含“最小化”“缩放”等对界面进行操作的命令。“帮助”菜单：包含各种帮助信息的链接。
XD在Windows中的菜单被折叠，需要单击设计界面左上角的“菜单”图标来执行打开或关闭菜单操作。打开后，在这个菜单中基本包含了XD在Mac OS中的所有菜单操作命令。如左图所示为XD在Windows操作系统中的菜单截图，尽管其与mac OS操作系统中不完全一样，但在Windows操作系统中都能找到相同或类似的菜单内容，并不影响学习。1.3.4 导航栏
导航栏在设计界面的最上方，包含“首页”按钮、模式切换区、文件命名区、视图大小区、原型预览区及共享区等导航命令。“首页”按钮：单击“首页”按钮，可以打开启动界面。
模式切换区：可对“设计”和“原型”模式进行切换。
文件命名区：显示文件名称。单击文件名称后的下拉箭头可重命名文件、修改文件的保存位置。
试读结束[说明：试读内容隐藏了图片]