AdobeXD软件是一款专为设计师打造的用于原型设计、界面设计和交互设计的软件，它能够设计任何用户体验界面、创建原型和共享文档。

（设计视图案例）

此外，在互联网行业当中，AdobeXD也被设计师、产品经理、运营管理等青睐。设计师可以用它来做高保真设计图，产品经理可以做原型设计，运营管理人员可以做流程图。

（原型界面图）

从一开始被大家质疑鸡肋，到现在的真香，XD受到了相当一部分人群的追捧，简洁易懂的操作，更是让它的学习成本大大降低。

而今天，数艺君就要给大家讲讲XD软件的核心——视图栏，它的最主要的模式是设计视图和原型交互视图，所有的功能都是基于这两种视图模式设计。

视图栏位于XD软件的上方，如图所示。

1

设计视图

进入设计视图模式后，用户可以在艺术板上任意绘制设计图形。

打开“*.XD”文件后，通常默认在“设计视图”模式下，如图所示。

2

原型交互视图

设计师不可以在原型交互视图下设计图形图像，只能将已经有的设计视图用于做原型交互。

原型交互视图下，设计师可以拖出线条连接两个艺术板页面、艺术板页面中的某个功能，或是艺术板页面与某个功能，从而形成交互，如图所示。

3

文件名显示

文件名显示就是显示的文件名称，即设计师当前设计的图形图像名称，如图所示。

文件状态通常有以下3种。

第1种：仅打开文件，未作任何操作。

第2种：已编辑，但未保存。

第3种：已编辑，已保存。

第1种和第3种情况将不显示标记，如图所示。

第2种情况会显示“Edited”，即已编辑的标记，如图所示。

4

缩放视图

缩放视图就是缩小和放大设计视图。缩放的比例目前有25%、50%、%、%、%、%、%、ZoomIn、ZoomOut、ZoomtoSelection、ZoomtoFitAll，如图所示。

1.?Zoom?In使用前和使用后的效果

打开名为“iPhone背景图”的xd文件后，显示缩放比例为38.5%，效果如图所示。

单击“ZoomIn”选项后，缩放比例由38.5%自动放大至50%，如图所示。

2.?Zoom?Out使用前和使用后的效果

打开名为“iPhone背景图”的xd文件后，显示缩放比例为38.5%，如图所示。

单击“ZoomOut”选项后，缩放比例由38.5%自动缩小至33%，如图所示。

5

手机预览

目前应用商店无法下载XD官方软件，所以暂时无法使用官方软件在手机上预览。

iOS系统的手机和计算机连接后，会显示iOS设备已经连接，如图所示。

6

计算机预览

在软件界面的右上角找到计算机预览按钮“”，如图所示。

单击“”按钮，便可在计算机上预览设计视图或交互视图，如图所示。

AdobeXD软件除了做网页的设计和交互之外，还可以用来设计智能手表应用软件、平板电脑应用软件、手机应用软件等。

这里以一个“手表天气应用设计”的案例，展示一下XD的设计过程。

案例：手表天气应用设计

手表应用程序越来越火，很多企业都有做手表应用程序的需求。学会做手表应用的设计，读者可以提高自己的就业竞争力。

使用AdobeXD软件做出的手表天气设计效果如图所示。

手表天气是常见的应用程序，也是比较经典的应用程序。本案例使用矩形工具、文本工具、椭圆工具和填充颜色工具，来完成手表天气的界面设计。

01创建艺术板：使用“”艺术板工具创建一个艺术板，将W值和H值分别设置为“”和“”，取消勾选“Fill”按钮之前的复选框，如图所示。

02命名艺术板：双击标题“iPhoneX/XS-1”，将艺术板的名称改为“天气”，如图1和图2所示。

03创建矩形：使用“”矩形工具创建一个矩形，如图所示。

04设置颜色：单击“Fill”按钮，弹出颜色板，将填充颜色设置为“#AC”，如图所示。

05设置矩形：在矩形里用鼠标左键按住“”按钮，将矩形的直角拖至圆角，松开鼠标即完成，如图所示。

06复制粘贴：单击选中此矩形，按Ctrl+C组合键复制，再按Ctrl+V组合键4次，粘贴出4个同样的矩形，如图所示。

07设置小矩形：将复制出来的4个矩形的W值和H值分别设置为“”和“”，如图所示。

08设置小矩形颜色：将复制出来的4个矩形填充颜色分别设置为“#7C93FA”“#F97EAF”“#EAC”“#FFD”，并选中4个小矩形，按住鼠标左键拖动4个矩形到“天气”艺术板里面，松开鼠标左键即完成，如图所示。

09输入文本：使用“T”文本工具创建多个文本框，输入“”“返回”“10:27”“10:27AM”“晴”“28℃”“深圳”等文本内容，完成后的效果如图所示。

10创建底部图形：使用“O”椭圆工具创建7个小圆点，如图1所示。选中所有圆点，按住鼠标左键拖动到页面的底部，如图2所示。

图1

图2

11设置图形颜色：将第4个小圆点的颜色设置为白色，颜色值为“#FFFFFF”，其余小圆点的颜色设置为黑色，颜色值为“#”，如图所示。

12完成：手表天气应用程序设计的界面制作完成，最终效果如图所示。

新书推荐

《零基础学AdobeXD产品设计》

本书通过图文并茂的方式，

借助实际操作讲解

AdobeXD软件的使用技巧，

简洁明了，通俗易懂。

本书共10章，内容由浅入深，

首先简述基本概念，

然后讲解使用技巧，

最后讲解各种场合的实际操作。

讲书节直播预告

人邮大咖讲书节

百场直播活动即将开启，

近百位作者大咖莅临

直播间为您推荐好书。

6月16日~科技新知专场，

今天17:00点到22:00点，

人邮社全媒体直播平台

（天猫、京东、当当、知乎、

头条、快手、抖音、微博）

准时为您荐书！

大咖推荐，不容错过，

优惠多多，就在人邮直播间~

欢迎