2021.5.10-2021.5.16周报

XD

设计

• 选择工具

“选择”工具是Adobe XD工具栏中的第1个工具，也是绝大多数情况下默认选中的工具，可以通过单击工具栏中的指针图标 ，或者直接按键盘上的V键激活。

激活“选择”工具，用鼠标左键直接在画布上单击任意元素即可选中该元素，可对选中的元素进行拖曳、缩放和旋转等操作

选择图层组中的图层时需要注意以下两点:

第1点：按住键盘上的command键（macOS）或者Ctrl键（Windows）直接选中单个图层是在画布上进行选择，并不是在图层面板中进行选择。

第2点：无论是采用双击的方法还是采用按住键盘上command键（macOS）或者Ctrl键（Windows）的方法进入图层组以后，都可以直接单击鼠标左键选择需要的图层。

• 矩形工具

“矩形”工具是Adobe XD工具栏中的第2个工具，可以通过单击工具栏中的矩形工具图标 ，或者直接按键盘上的R键激活。

1. 绘制矩形

“矩形”工具作为Adobe XD中绘图工具的一种，可以用来绘制各种矩形和圆角矩形。

激活“矩形”工具后，在画板上单击鼠标左键并拖曳，即可绘制一个矩形，如图所示。因为在Adobe XD中默认的填充色为纯白色，所以大家在画板上看到的是一个白色矩形，而非只是一个轮廓。

如果需要选中多个图层，可以按住键盘上的Shift键，然后选择需要选中的多个图层

激活“矩形”工具后，按住键盘上的Shift键，同时拖曳鼠标即可绘制正方形

• 对齐属性

该部分能设置图层的对齐属性，从左到右一共有8种对齐方式，分别是“顶对齐”“居中对齐（垂直）”“底对齐”“水平分布对齐”“左对齐”“居中对齐（水平）”“右对齐”和“垂直分布对齐”，如图所示。

注意，图中的“水平分布对齐”和“垂直分布对齐”的图标是未激活状态，这是因为需要选中3个或3个以上的图层才可以执行分布对齐的操作。如果只选中一个图层，那么该图层对齐的参考为画板本身。

• 椭圆工具

“椭圆”工具是Adobe XD工具栏中的第3个工具，可以通过直接单击工具栏中的椭圆工具图标 ，或者直接按键盘上的E键激活。

“椭圆”工具是Adobe XD中的第2种绘图工具，用于绘制圆形。激活“椭圆”工具后，在画布上单击鼠标左键并拖曳鼠标，即可绘制椭圆，如图所示。

如果在绘制椭圆之前，按住键盘上的Shift键，则可以绘制一个圆。

绘制完椭圆后，可以在右侧的属性检查器中设置椭圆的属性

• 直线工具

“直线”工具是Adobe XD工具栏中的第4个工具，可以用来绘制直线。要使用该工具，只需单击工具栏上的直线工具图标 ，或者直接按键盘上的L键将其激活。

使用“直线”工具绘制直线时，首先在画布上单击鼠标确定直线的起点，然后按住并拖曳鼠标，再在终点处释放鼠标，即可绘制出一条直线

如果在绘制直线的同时按住Shift键，则可以以固定的角度绘制直线；如果鼠标从左往右拖曳，则在水平方向绘制；如果是上下拖曳，则绘制出一条垂直线；如果是往左上、右上、左下、右下等方向拖曳，则会以45° 角的方向绘制直线。

绘制完直线后，可以在右侧的属性检查器中设置直线的各种属性。相对于矩形和椭圆图层的属性检查器，直线图层的属性检查器没有“填充”属性，其他属性的设置方法完全相同，在此不作重复说明。

• 钢笔工具

“钢笔”工具 是Adobe XD工具栏中的第5个工具，可以用该工具绘制各种路径。要使用该工具，只需单击工具栏上的钢笔工具图标，或者直接按键盘上的P键将其激活。

用“钢笔”工具绘制直线路径的方法非常简单。首先激活“钢笔”工具，在画板上单击鼠标左键，创建一个锚点，然后将鼠标移动到另一个位置并单击鼠标左键，创建另一个锚点，这时两个锚点之间会自动出现一条直线路径。

此时可以再移动鼠标添加第3个锚点，则第3个锚点和第2个锚点之间也会出现一条直线路径，如图所示。

从图中可以看出，最后一个锚点总是实心的圆，而之前的锚点是空心的圆。实心的圆表示该锚点是当前选中的锚点，把鼠标移动到该锚点并按住可以修改锚点的位置。

在一个路径上可以添加无数个锚点。如果要结束路径的绘制，可以按下键盘上的Esc键，此时，鼠标便会被释放，并且默认选中第一个锚点，工具会自动变为“选择”工具

提示：在连接两个端点时，如果按住键盘上的command键（macOS系统）或者Ctrl键（Windows系统），就不会闭合路径。

选择“选择”工具，用鼠标左键双击路径上的锚点，可以把直线路径变为曲线路径，如图所示，路径左右会出现曲柄，拖曳曲柄可以对曲线进行调整。如果再次双击锚点，则会变为直线路径。

如果希望一开始就绘制曲线，那么先要激活“钢笔”工具，然后在起点处单击鼠标左键，并拖曳鼠标到目的地位置后释放，即可设置曲线的斜度，此时会生成一条相应斜度的曲线

若要绘制C形曲线，可以向前一条方向线的相反方向拖曳鼠标，然后再释放；如果要绘制S形曲线，则可以按照与前一条方向线相同的方向拖曳鼠标，然后再释放。

如果最后一个锚点与第一个锚点重合，则会自动闭合路径，退出“钢笔”工具；如果不希望闭合路径，可以按下Esc键退出路径的绘制。

当完成路径的绘制后，再次按下Esc键，则退出路径的编辑模式，此时再选中该路径，路径四周会出现一个矩形的选框。

原型

当切换到原型界面，最左侧的功能键简化到只有选择和缩放，也就是说在“原型”工作区只能编辑界面交互动效，不能修改界面的设计。

在XD中通过选择交互入口（可以是文字，图案，图片，一个编组以及一个页面），拖拽出一条曲线，链接到目标页面上，并且选择切换动效，从而实现动态交互。

XD中的动态效果有两类，一类是界面之间的跳转，一类是页面内的交互。其中“过度”功能就是实现界面之间的切换跳转。它的操作比较简单，只要选择目标物体，拖拽出一条曲线链接到目标页面上即可完成。

在动效设置中有“过渡”和“缓动”的设定，“过渡”有无过渡，溶解，左右上下滑出以及向左右上下推出。“缓动”有渐入，渐出，渐入渐出和无缓动。

叠加是用来制作在页面中的交互，它的使用方法是在连接到目标物体之后，选择“叠加”，之后会出现一个绿色的框在原页面上，被连接的页面底色会变成透明，然后选择动态效果即可完成页面内的交互。

• 创建交互式原型

1.切换到“原型”模式。
2.单击要链接的对象。
对象上出现带箭头的连接手柄。将鼠标悬停在手柄上，光标会变为连接器。

3.单击并开始拖动鼠标，可以看到连接器。在目标画板或屏幕上释放鼠标。

当您连接第一个元素时，该元素所在的画板将设为主画板。

4.在出现的弹出窗口中，您可以指定以下内容：

过渡选项和过渡持续时间：如果您想要在过渡到另一个画板时让滚动位置保持不变，请选择“保留滚动位置”。这个选项对于导航栏或固定页脚的原型设计非常有用。如果用户在原始画板中滚动，下一个画板会识别原始画板中的滚动位置。通过单击画板或画板中的任何元素，您可以控制滚动位置，从而在从一个屏幕切换到下一个屏幕时保留原始位置。此控件可防止在项目文件中反复来回滚动。例如，如果用户在画板 A 上向下滚动到 y=1,000，那么过渡到画板 B 后，默认位置也会是 y=1,000。如果未在原始画板中定义滚动，则“保留滚动位置”选项处于非活动状态。

5.重复上述步骤，链接项目中的所有交互式元素。

提示：
在“原型”模式下如何更快地创建交互：
您可以在不同画板之间复制和粘贴对象。对象及其交互会一同被复制和粘贴。
您也可以单独复制和粘贴交互。复制一个对象，右键单击另一个对象，然后选择“粘贴交互”。只有交互会被粘贴。

如需将元素指向另一屏幕，请再次单击手柄并将其拖至所需的屏幕。

如需查看特定画板的连接，请选择画板标题。

如需删除交互，请将连接器的目标手柄从目标画板拖到草稿区域。

注意:灰色链接指示传出连接，蓝色链接显示传入连接。

• 预览和录制交互

XD内有演示原型和录屏的功能，可以快速预览和交互并且录制视频。此外还可以设备上预览，这就需要下载XD的app，然后通过链接数据线或者登陆Creative Cloud账号同步项目来实现预览。

注意:Windows 上的 Adobe XD 不支持录制原型。但是，有一种变通方法。按 Windows + G 键并使用原生录制程序录制“预览”窗口。
您可以预览原型，以便测试原型和交互。您还可以录制预览，并将录制内容保存为 .mp4 文件。然后，您可以选择与您的利益相关者共享这个 .mp4 文件，他们可以查看（或审阅）原型的演练并提供反馈。

1.单击“桌面预览”图标。此时会出现“预览”窗口并突出显示画板。
如需测试屏幕之间的导航，请单击交互式元素。
在“预览”窗口中预览时，可以编辑原型的设计和交互。可以立即预览这些更改。

2.如需录制交互，请单击“预览”窗口中的“录制”图标。如需结束录制，请按 Esc，或者再次单击“录制”图标。

3.指定名称和保存录制内容的位置。录制内容会被保存为 .mp4 文件。