作者：林富荣
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
零基础学Adobe XD产品设计试读：
前言
Adobe XD软件是为设计师设计的一款软件，它可以用来进行移动应用和网页的设计与原型制作。本书讲述使用Adobe XD软件进行设计的方法、工具和过程。完成设计视图和交互视图各项任务的设计方法。●方法：为方法的运用提供的自动的或半自动的软件支撑环境，如●工具：设计素材和插件。为获得高质量的设计所需要完成的一系列任务的步骤。●过程：
本书介绍了实际项目的全流程，包括流程图、原型界面图、交互图、图标设计、高保真软件界面图、交付开发、测试和验收、上线。通过学习使用Adobe XD软件，读者可以做出图标、名片、简历、路线图、产品网站页面、预订酒店页面等。读者使用Adobe XD这一款软件可以做出多款软件才能实现的效果，因此既提高了工作效率，又减少了学习成本。■本书特色
本书内容丰富，涉及Adobe XD软件产品设计全流程讲解。通过学习本书，读者将掌握产品原型设计和交互设计的基本内容。●夯实基础知识
笔者基于在学校学习的软件工程和项目管理等科目及互联网行业和金融设计行业的从业经验，整理出产品经理和设计师必备的学习内容。掌握这些知识后，读者便能规划出移动端和PC端的软件产品，还可以制作出简历、路线图、名片、产品界面等效果图，从而带领团队开发出优秀的软件产品。●与互联网产品接轨
本书将介绍大量实际操作时用到的软件工具和常用方法，这些工具和方法是专门为互联网产品的相关设计人员准备的。产品经理和互联网产品设计师的工作充满了变化，但万变不离其宗。只要读者对互联网产品感兴趣，熟悉Adobe XD软件的使用工具和方法，逐渐培养出互联网产品思维，就能够成为一名符合时代要求的设计师。●提供广阔视野
一本书无法描述所有细节和思维，Adobe XD软件的基础知识和实操只是第一步。本书在介绍产品设计的内容之余，还涉及流程图、原型界面图、交互图、图标设计、高保真软件界面图、交付开发、测试和验收、上线等内容。读者可以通过这些内容了解XD软件在项目中能够完成什么工作，了解团队其他成员的工作内容，便于进一步学习和沟通交流。●关注综合能力
产品经理和设计师不仅要懂技术、懂业务和懂设计，还要懂拒绝。懂技术，能够把软件产品做得流畅、底层可拓展性高；懂业务，能够把技术能力转为企业的赢利能力，在为企业做好软件产品的基础上取得收益；懂设计，能够把用户体验做到极致，使用户用得舒适，自愿消费；懂拒绝，能够拒绝不合理的产品功能和设计。产品经理和设计师要能够站在不同的角度看待软件产品，做到对所有用户公平、公开、公正。■本书面向的读者群体
交互设计师；
界面设计师；
用户体验设计师；（软件）产品经理；
需求分析师；
前端工程师；
开发工程师；
测试工程师；
运维工程师；
运营人员；
企业管理人员、产品总监和业务人员；
项目经理；
互联网风险投资人员；
互联网爱好者；
相关培训机构的老师和学生。■勘误与联系方式
互联网是一个变化很快的行业，希望本书能够帮助读者应对互联网软件快速变化的设计需求，快速学习和解决使用问题，并学会实际操作，提高理论和实操水平。
无论是编写人员还是出版人员，都为本书的出版做出了贡献，为了全面提升本书的品质，如果您发现了本书的不足，欢迎指正，联系邮件地址为189394@qq.com。■鸣谢
本书已经是我出版的第三本书了。在此，特别感谢人民邮电出版社的编辑老师以及支持我的读者朋友。也希望自己能够继续坚持，写出更多好书。作者2020年4月资源与支持
本书由“数艺设”出品，“数艺设”社区平台（www.shuyishe.com）为您提供后续服务。■配套资源
书中所有案例效果源文件
同步PPT课件
同步在线教学视频■资源获取请扫码
“数艺设”社区平台，为艺术设计从业者提供专业的教育产品。■与我们联系
我们的联系邮箱是szys@ptpress.com.cn。如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名及ISBN，以便我们更高效地做出反馈。
如果您有兴趣出版图书、录制教学课程，或者参与技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到“数艺设”社区平台在线投稿（直接访问www.shuyishe.com即可）。如果学校、培训机构或企业想批量购买本书或“数艺设”出版的其他图书，也可以发邮件联系我们。
如果您在网上发现针对“数艺设”出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接通过邮件发给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。■关于“数艺设”
人民邮电出版社有限公司旗下品牌“数艺设”，专注于专业艺术设计类图书出版，为艺术设计从业者提供专业的图书、U书、课程等教育产品。出版领域涉及平面、三维、影视、摄影与后期等数字艺术门类，字体设计、品牌设计、色彩设计等设计理论与应用门类，UI设计、电商设计、新媒体设计、游戏设计、交互设计、原型设计等互联网设计门类，环艺设计手绘、插画设计手绘、工业设计手绘等设计手绘门类。更多服务请访问“数艺设”社区平台www.shuyishe.com。我们将提供及时、准确、专业的学习服务。第1章 简述Adobe XD软件
Adobe XD软件是一款专为设计师打造的用于原型设计、界面设计和交互设计的软件，它能够设计任何用户体验界面、创建原型和共享文档。从计算机端网站和手机端移动应用程序设计到语音交互等，Adobe XD软件都能全面覆盖和实现。
Adobe XD软件目前非常适合在互联网行业工作的人员使用，如设计师、产品经理、运营管理等。设计师可以用它来做高保真设计图，产品经理可以做原型设计，运营管理人员可以做流程图。由此可见，Adobe XD软件确实能够为企业、社会创造价值，从而节省时间和人力成本。
知识要点
熟悉Adobe XD软件的概念和特色
熟悉软件项目的流程，以及该软件能够为项目实现的内容
熟悉安装Adobe XD官方软件的过程1.1 概念1.1.1 Adobe XD软件来源
2016年以前，Adobe XD软件被称为Project Comet，2016年才改名为Adobe XD。据说初创时，Project Comet被计划设计为Photoshop的照片编辑插件，没有想到后来竟然变成了优秀的网页与移动应用的UX设计工具软件。1.1.2 共同协作
Adobe XD软件功能结合了原型设计、界面设计和交互设计。过去，产品经理需要使用Photoshop、Visio、Axure等软件才能完成图片美化、流程图设计及原型设计。现在，产品经理仅仅使用XD软件就能实现这些功能，并且还可以直接共享给设计师使用，使设计师、产品经理和运营管理员能共同使用和编辑修改同一个文件。
产品设计的完整流程是：产品经理先绘制出流程图和基本原型；交互设计师可以继续使用产品经理的XD源文件，在交互视图做出交互；UI设计师可以直接在产品经理和交互设计师的XD源文件上设计出图标并整合视觉效果，让界面更加适合用户体验，并且XD还提供了一些模板供设计师参考；最终将产品经理、交互设计师、UI设计师共同确认过的XD源文件交到开发工程师手中进入开发流程。
这样会使软件产品规划和软件成品基本相同，而且如果软件设计项目中的所有人员能统一使用XD软件工作，那么沟通将更加到位，资源共享和协作将更加便捷。1.1.3 未来发展方向
Adobe XD软件是一个基于矢量的工具软件，拥有点线框、视觉设计、交互设计、原型设计视图、预览和共享的功能，而且功能和功能之间很容易切换。
未来Adobe XD软件会推动企业在用户体验设计方面的发展，给设计师提供更好的数字体验平台，设计师们也能给企业创造更多价值。1.如何体现出体验设计
什么是用户体验呢？就是用户在使用商品或产品的过程中，对商品或产品的一种主观感觉。
通俗地说，用户去商店准备购买一件衣服，如果用户不穿在身上，是体验不出衣服的效果的，因为用户不知道是否适合自己的风格。只有用户亲身穿上衣服，才能感受到是否适合，这就是用户体验。
同理，企业要做一款适合自己的移动应用程序，在没有做出移动应用程序前，如果有界面设计和原型设计可直观地体验，那么决策者就可以优先体验出真实的软件是否适合自己的企业，从而判断是否要大量投入资金和人员研发该软件项目。
目前来说，Adobe XD软件可以帮助设计师将想法和界面设计图形图像制作同步，即“想+做=实现梦想”，从而解决软件用户体验的问题。由此可见，用户体验设计是可以达到与预先体验实体软件产品一样的效果的。2.统一使用软件是否有优势
在软件项目中，如果各环节人员都使用XD软件，那么可以减少在设计过程中遇到的阻碍，尤其是在沟通方面。当产品经理、设计师、运营经理、开发等人员沟通时，使用XD软件可以提高沟通效率。
就像现在企业统一用的办公软件都是Office系列一样，员工沟通的方式是传递Word、Excel文件，接收到文件的员工可以轻松查看到里面的内容。同理，如果企业的项目人员都统一使用XD软件，他们在软件中看到的原型设计视图和交互视图等同于最后开发工程师开发出来的应用软件的功能和界面，那么就能保证当时规划的软件和实际开发出来的软件大体相同。这就能避免规划设计了小船的软件，开发了轮船的软件；或者规划设计了轮船的软件，开发了小船的软件。
项目人员统一使用同一款软件，是需要时间过渡和磨合的，相信未来一些中小企业可以优先实施成功。3.未来的改进
目前，XD软件的功能已经足够使用，但是在使用Adobe XD软件的过程中，偶尔会出现白屏、闪退的现象，笔者使用的16.0.2.8版本已经优化解决了这些错误。未来除了功能上的改进，还需要改进软件死机的问题。1.2 特色
Adobe XD软件有如下的四大特色。
●体验设计；
●界面设计、创建原型、共享文档；
●插件支持；
●Adobe公司官方改进。1.2.1 体验设计
Adobe XD软件与Photoshop、After Effects和Sketch软件有相似的界面，设计师如果学习过这些软件，那么就可以快速学会Adobe XD软件。它们的功能都是即拖即用，就是将圆形、矩形和正方形等图形拖动到艺术板上即可使用，快速直观。
设计师如果想修改设计图的内容，可以选择重新设计，也可以选择在原有的基础上改造设计。
设计师可以在原型中使用语音功能，使原型更加具有感染力、用户更易懂、工作更加高效。
设计界面可以自动调整元素大小，使内容适应不同的屏幕（包括手机屏幕和计算机屏幕）。
制作动画的软件Flash和AE都需要有时间轴，才能有动画。而XD软件无需时间轴，在交互视图模式下就可以在设计画板之间创建动画。
设计师使用XD软件规划出来的原型设计、交互设计和界面设计，均可以让管理人员、业务人员优先体验到未来自己公司做出来的软件是怎样的，然后提前规划运营模式。相当于开发完成前，项目以外的人员就可以体验到项目完成后的效果。1.2.2 界面设计、创建原型、共享文档
设计师只需单击“”选项，即可从设计视图模式切换到交互视图模式，或者从交互视图模式切换到设计视图模式。
在设计视图模式下，设计师可以做原型设计、界面设计和撰写文档。
在交互视图模式下，设计师可以看到在设计视图模式下做的设计，然后在画板之间拖动线条，就可以让两个及以上的艺术板进行交互。如果设计师做交互时需要更改内容，那么必须切换回“设计视图模式”。
设计师可以使用手机软件与计算机同步，实时查看所做的设计图。在计算机上设计，在手机上查看效果，非常方便快捷。
设计师可随时随地地将设计文件保存在云文档，并与项目团队共享，甚至可以离线编辑文档。
设计师也可以将整个交互一边操作一边录制视频，然后输出*.mp4视频文件，如图1-1所示。用户浏览视频，就像在真实的App上操作，可以提前预览软件成品的呈现效果。图1-11.2.3 插件支持1.插件的作用
我们使用的智能手机，如果不安装插件，就只有打电话和发短信的功能。只有安装了插件，才能购物、查看新闻、社交沟通，可见插件是多么有用。
同样，XD软件也有插件，这些插件大部分是由其他企业的开发人员开发的。如果你有兴趣开发插件，也可在XD软件开发人员社区学习，然后开发一款好用的插件给XD软件的设计师们使用。
XD软件正处于一个萌芽阶段，以后它的功能会越来越完善，底层会越来越稳固，使用它的产品经理和设计师会越来越多，插件会越来越出色并且更简单易用。
设计师可以使用XD软件的插件，进一步提升XD软件的体验。例如Slack、Jira、Microsoft Teams和其他更多插件程序。
设计师使用插件，通常是为了提升工作效率和用户体验。那么此时，XD软件最大的优势是什么呢？
设计师可以在XD软件中直接使用所有已安装的附加插件，如图1-2所示，这能解决大部分的问题。图1-22.插件的种类
官方将插件分为3类：插件（Plugins）、获取用户界面套件（UI Kits）和App第三方应用接口类插件（App Intergrations）。
Plugins类插件：设计师可以直接应用到设计图上。
UI Kits类插件：设计师可以使用整套设计界面，组合成自己想要的界面。
App Intergrations类插件：设计师需要安装第三方的应用程序集成软件，这样XD软件就可以与其他第三方应用程序互动，以此互补不足。1.2.4 Adobe公司官方改进
XD软件是Adobe Creative Cloud的一部分，它集成了许多设计师熟悉和喜欢的Adobe应用程序，如Photoshop、Illustrator和After Effects等，使得XD软件可以与其他应用程序互动。
XD软件能够在Mac和Windows系统中使用，设计师无须担心切换平台无法设计。XD软件能为设计师提供出色的性能，为企业工作并创造价值。设计师和企业都可以通过简单的安装部署、轻松的管理和便捷的沟通协作功能，完成日常工作，进而输出高质量的原型设计、交互设计和界面设计。
目前90%的设计师都使用Adobe系列软件做设计。由于XD软件是Adobe旗下的一款免费软件，所以日后XD软件能够与其他Adobe软件互补不足，形成一个设计界生态链。
如果设计师追求极致的设计，就可以使用Adobe系列的多款软件，做出完美的设计，同时也保证各软件制作出来的图形图像能互相兼容，可供同系列的其他软件进行编辑和优化。1.3 项目流程1.3.1 开发App软件的8个步骤（瀑布式）
①规划：规划出业务流程图，并将业务流程图转换为系统流程图、系统功能说明等，这一步由产品经理完成。
②交互设计：按照流程图、功能说明制作人机交互的App交互界面（点线框交互图）。
③UI设计：将原型和交互图的界面做成UI设计图（高保真设计图）。
④App开发：按UI设计图、交互图和流程图编码。
⑤开发：开发架构和底层，并提供数据库和接口给App开发人员。
⑥测试：按产品经理、交互设计、UI设计相关人员的文档内容分别进行测试。
⑦验收：项目组人员和上线后需要使用系统的人员验收软件。
⑧上线：程序上传至服务器，代表软件正式可运作。1.3.2 Adobe XD软件的作用
Adobe XD软件虽然没有Visio绘制流程图那么好用，但也是可以绘制出流程图的。所以说，XD软件也能够满足产品经理和业务人员的使用需求。1.插件
安装Polygons插件后，可使用快捷键创建三角形、多边形、星形、五角星、菱形等，用于绘制流程图，如图1-3和图1-4所示。图1-3图1-42.交互
XD软件使用Prototype交互视图模式时，交互设计师就可以在多个设计图之间快速做交互，如图1-5所示。图1-53.设计
在设计上，XD软件可以做图标、高保真的软件设计，最终将设计图应用在实际的软件系统上。图标设计如图1-6所示。图1-64.代码生成
在App开发上，XD软件是不可以编写代码的，所以App开发人员暂时用不上此软件。未来可能会有一款插件，能一键将XD软件设计图生成iOS系统代码和Android系统代码。5.测试
测试人员可以按照XD软件的交互图和流程图，在开发完成的软件上测试。6.提升工作效率
XD软件可以帮助产品经理、交互设计师、UI设计师快速地工作。如果一台计算机需要打开多款软件工作，那么计算机可能会运作得很慢或死机。试着只使用1～2款软件，可能会有不错的效果。
如果产品经理、交互设计师、UI设计师统一使用XD软件输出文档和文件，受益人可能就是开发人员，开发人员不再需要打开Word文档、Visio流程图、Axure原型图、*.Psd设计图、开发软件等一系列文件。此时，后续开发人员只需要打开XD软件和开发软件就足够完成工作了。最后，企业开发周期缩短，项目上线时间变快了，获得的利润自然也多了。1.4 Adobe XD软件的安装
Adobe XD软件安装步骤分为3步：系统要求、准备材料、安装过程。1.4.1 系统要求
想要安装和使用Adobe XD，用户的操作系统需要为Windows10（64位）【版本1703（内部版本10.0.15063）或更高版本】或macOS10.12及其更高版本，如图1-7所示。图1-71.4.2 准备材料
01进入Adobe官方网站，下载XD安装程序文件。在Adobe官方网站中单击“下载”按钮，即可下载，如图1-8所示。图1-8
02下载成功后，可见获取到的XD安装文件，如图1-9所示。图1-9 文件大小：约1.99MB（2,088,688字节）1.4.3 安装过程知识要点读者需要具备满足要求的系统并下载好XD软件安装文件，才能够成功安装软件。软件是工具，要想学习和使用工具，就必须学会软件的安装。学懂本节知识，读者就能够正式开始学习和使用Adobe XD软件做设计。
下面详细介绍如何安装Adobe XD软件，跟随以下5个步骤即可成功安装。
01双击安装：双击“XD_Set_Up.exe”文件即可安装XD软件，安装的过程中会显示进度条，如图1-10所示。
进度从0到100%，约需要2分钟。具体完成安装时间根据用户与XD CC服务器的网络情况而定。
02安装后：安装完成后，可见“XD CC”栏目里显示“打开”按钮，如图1-11所示。提示如果安装速度很慢，建议检查网络。图1-10图1-11
03加载数据：单击“打开”按钮后，由于是首次打开，界面可能显示白屏，需要时间加载数据内容，此时请不要关闭窗口，如图1-12所示。
04加载完成：稍等数秒后，Adobe XD软件已经成功加载，如图1-13所示。
05享受使用：此时已经成功安装Adobe XD软件，下面就可以尽情地学习和使用软件了。图1-12图1-13◆章小结
本章简单介绍了Adobe XD软件及其安装方法。想要学习Adobe XD软件，安装软件是第一步，请按步骤完成安装。第2章 入口页功能使用技巧
在正式使用Adobe XD软件前，必须进到入口界面，因此读者必须懂得尺寸详细介绍（Home）、附加功能说明（Add-ons）、从本地计算机导入文件（Your Computer）的功能和使用方法。本章将为读者详细讲解入口界面功能使用技巧，并在最后使用案例分析，目的是要读者实际操作以至学懂。
初学者必须熟悉Adobe XD软件的入口界面功能，至少要懂得如何创建一个iPhone X/XS、iPad页面，这样设计的工作才能正式开始。
知识要点
了解各种尺寸
学会插件的安装、查看、删除和使用
从本地计算机导入文件
软件安装完成后，双击桌面上的“”图标，进到入口界面。入口界面的功能包括Home、Add-ons、Your Computer，如图2-1所示。图2-12.1 尺寸详细介绍（Home）
在Home功能页面里，用户可以开始一个新的设计，创建的设计界面尺寸包括iPhone设备、iPad设备、Web设备、自定义设计图尺寸。
详细尺寸如下所示。
如果选择“iPhone XR/XS Max（414×896）”尺寸，那么主界面艺术板就会显示为选择的尺寸，如图2-2所示。图2-22.2 附加功能说明（Add-ons）
Add-ons中可以安装并应用Plugins类、UI Kits类和App Intergrations类插件，如图2-3所示。图2-32.2.1 Plugins类插件1.安装插件
01找到Plugins：找到“Plugins”选项，如图2-4所示。图2-4
02选择插件：单击“Add-ons”→“Plugins”选项，会显示所有的插件“ALL Plugins”，需要安装的插件如图2-5所示。
03安装插件：单击“Install”按钮，程序会自动安装该插件，如图2-6所示。图2-5图2-62.查看已安装插件
插件安装完成后，将显示在已安装插件“Installed Plugins”栏里，如图2-7所示。3.删除插件
准备删除：单击“…”按钮，弹出下拉菜单，再单击“Uninstall”按钮，如图2-8所示。图2-7图2-8
删除：需要再次确认是否删除该插件，单击“Uninstall”按钮后，会真正删除该插件，如图2-9所示。
删除后：删除插件后，“Installed Plugins”栏目里已经无法查看刚刚删除的插件了，如图2-10所示。
试读结束[说明：试读内容隐藏了图片]