第2章 Adobe XD的设计模式

第2章Adobe XD设计模式2.1 Adobe XD的软件界面布局Adobe XD 设计和原型构建界面◼在Adobe XD 中，您可以使用各种元素（例如，工具栏和“属性检查器”）来创建和控制您的设计和原型。

这些元素构成了Adobe XD 的工作区。

了解Adobe XD 中的设计和原型构建界面。

◼主页屏幕◼启动Adobe XD 时，您会看到“主页”屏幕。

◼通过“主页”屏幕，您可以快速访问画板预设、加载项、云文档、与您共享的文件，并可以管理链接、删除的文件以及存储在计算机中的文件。

您还可以访问最近访问的XD 文件、XD 的新增功能、学习和支持文章、内置教程和产品反馈选项。

◼工作区概述◼MAC工作界面◼Mac 上的Adobe XD 工作区◼A. 主菜单B. 设计模式C. 原型模式D. 在移动设备上查看E. 预览F. 在线共享G. 属性检查器H. 粘贴板I. 画板J. 插件K. 图层L. 资源M. 工具栏◼工作区概述◼MAC工作界面◼在macOS 上◼云文档会自动保存，窗口会关闭。

◼您将收到一条弹出消息，以查看更改。

◼单击“查看更改”。

◼工作区概述◼Windows工作界面◼Windows 10 上的XD 界面与Mac 界面类似，但有一些细微差别：◼在Windows 上，没有顶级菜单和“对象”菜单。

不过，您只需右键单击一个对象，即可使用上下文菜单。

◼Windows 上的XD 的左上角有一个汉堡菜单，使用该菜单，您可以创建或打开文件、保存和导出资源。

◼Windows 上的Adobe XD 工作区◼ A. 设计模式B. 原型模式C. 缩放级别D. 在线共享E.属性检查器F. 粘贴板G. 画板H. 工具栏I. 弹出菜单◼当您从XD 应用程序或Creative Cloud 或任何其他Creative Cloud 应用程序注销时，如果有任何文档在Adobe XD 中处于打开状态，请按照以下说明在Windows 和macOS 中处理该文档：◼工作区概述◼Windows工作界面◼云文档会自动保存，窗口会关闭。

◼如果是本地文档，会出现“保存”或“不保存”对话框。

将文件保存到计算机上的所需位置。

第2章Adobe XD设计模式2.2Adobe XD工具应用Adobe XD 绘图和文本工具◼绘图工具◼绘制矩形和方形◼选择矩形工具。

◼执行以下操作之一：◼若要绘制一个矩形，向对角线方向拖动直到矩形达到所需大小。

◼若要绘制一个方形，在按住Shift 键的同时向对角线方向拖动直到方形达到所需大小。

◼要绘制一个圆角矩形，请绘制一个矩形，然后单击它以查看半径编辑手柄。

单击任何手柄并将其拖向矩形的中心。

您还可以使用“属性检查器”为一个或多个角的半径输入特定的值。

◼要进一步自定义您的方形或矩形，您可以编辑圆角半径。

◼要仅调整单个角的半径，请执行以下操作之一：◼或Alt 键(Win)，单击圆角手柄，然后拖动鼠标。

◼在“属性检查器”中选择后，分别编辑每个圆角半径值。

◼要同时调整所有角的半径，请执行以下操作之一：◼单击圆角半径并拖动鼠标。

◼在“属性检查器”中选择后，编辑半径的值。

◼绘图工具◼绘制椭圆和圆形◼执行以下操作之一：◼向对角线方向拖动直到椭圆达到所需大小。

◼如需创建圆形，请按住Shift 键并拖动鼠标。

◼绘图工具◼绘制线条◼选择直线工具。

◼将指针定位到希望线段开始的地方，然后拖动到希望线段终止的地方。

◼绘图工具◼用钢笔工具绘图◼选择钢笔工具。

◼将钢笔工具定位到所需的直线段起点并单击，以定义第一个锚点。

◼再次单击希望线段结束的位置（按住Shift 键并单击以将线段的角度限制为45 度的倍数）。

◼继续单击，为更多直线段设置锚点。

◼注意:◼如需将锚点从直线转换为曲线（或执行相反操作），请双击锚点。

◼最后添加的锚点总是会显示为实心圆形，这表示其已被选中。

当添加更多的锚点时，以前定义的锚点会变成空心并被取消选择。

◼通过执行下列操作之一来完成路径：◼要使路径保持打开状态，请单击Esc。

◼要闭合路径，请将“钢笔”工具定位在第一个（空心）锚点上。

单击或拖动以闭合路径。

◼如需选择并拖动起点而不闭合路径，请按住Cmd/Ctrl 键。

◼绘制直线◼绘图工具◼绘制跟有曲线的直线◼使用“钢笔”工具()，单击两个位置的角点以创建直线段。

◼将“钢笔”工具定位在所选端点上。

若要设置将要创建的下一条曲线段的斜度，单击锚点并拖动显示的方向线。

◼将钢笔定位到所需的下一个锚点位置，然后单击（在需要时还可拖动）这个新锚点以完成曲线。

◼绘制跟有直线的曲线◼使用钢笔工具()，拖动创建曲线段的第一个平滑点，然后松开鼠标按钮。

◼在需要曲线段结束的位置重新定位“钢笔”工具，拖动以完成曲线，然后松开鼠标按钮。

◼将“钢笔”工具定位在所选端点上。

◼将钢笔工具重新定位到所需的直线段终点，然后单击以完成直线段的绘制。

◼绘图工具◼绘制多边形◼多边形工具可帮助您创建各种新形状，例如三角形、菱形、五边形或多达100 条边的任何多边形。

◼要开始绘制多边形，请单击键盘上的“Y”，或从工具栏中选择三角形图标。

◼在画板或画布上，单击并拖动以绘制所需大小的形状。

您会注意到默认形状是三角形。

◼在绘制时按住Shift 键可创建等边形。

◼在绘制时使用键盘上的向上和向下箭头键，可增加或减少多边形的边数。

◼创建完形状后，您可以通过“属性检查器”更改多边形的边数。

选择形状，在“属性检查器”中单击“边计数”字段，然后键入所需的边数。

◼绘图工具◼测量工具◼测量距离◼通过单击对象并按下Option 键（在Mac 上）或Alt 键（在Windows 上），测量对象与画板之间的距离或对象与其他周围对象之间的距离。

◼测量对象到画板边缘的距离：◼只需单击对象并按Option 键（在Mac 上）或Alt 键（在Windows 上）。

◼只要按下Option 键或Alt 键，Adobe XD 就会测量距离并显示测量值。

◼测量工具◼测量对象与画板中其他对象的距离：◼单击对象，按Option 键（在Mac 上）或Alt 键（在Windows 上），然后将鼠标悬停在其他对象上。

◼只要按下Option 键或Alt 键，Adobe XD 就会测量两个对象的邻近边界之间的距离并显示测量值。

◼文本工具◼在某个点输入文本◼单击“文本”工具，然后单击您希望文字开始的位置。

输入文本，然后按Esc 键提交文本更改，或者按Return 键转到下一行。

◼当您通过选择画布上的某个点来键入文本时，将会出现一个水平文本行，该文本在您单击的位置开始，并在您输入字符时展开。

每行文本都是独立的；对其进行编辑时，该行将扩展或缩短，但不会换行。

这种方式非常适用于在图稿中输入少量文本的情形。

◼文本工具◼在区域中输入文本◼单击“文本”工具，在您想要文本出现在画布上的位置处单击并拖动以定义文本区域。

然后，在该区域内单击以开始键入文本。

◼定义文本区域时，对象的边界将控制字符流（水平或垂直）。

当文本触及边界时，会自动换行，以落在所定义区域的外框内。

当您想要创建一个或多个段落（比如为宣传手册创建）时，采用这种方式输入文本十分有用。

了解Adobe XD 中的设计和原型构建界面。

◼工作区概述◼MAC工作界面◼Mac 上的Adobe XD 工作区◼A. 主菜单B. 设计模式C. 原型模式D. 在移动设备上查看E. 预览F. 在线共享G. 属性检查器H. 粘贴板I. 画板J. 插件K. 图层L. 资源M. 工具栏◼文本工具◼拼写检查◼从“编辑”菜单中，选择“打开拼写检查”。

拼写检查功能仅适用于文本容器中的错误文本。

拼写错误的词带红色下划线，自动更正的词带蓝色下划线。

语法错误以绿色下划线突出显示。

◼文本工具◼点文本和区域文本之间切换◼只需单击一下，即可在点和区域文本之间切换。

◼选择文本对象并在“属性检查器”中的“点文本”和“区域文本”选项之间切换。

◼文本工具◼从文本文件导入文本◼您可以使用以下方法之一轻松地将预先写好的文本包含到画板中：◼将文本文件拖到画板上。

◼只需将纯文本文件拖到画板上，即可轻松地将预先编写的文本添加到设计中。

此操作会使用文本文件的内容在画板上创建区域文本。

◼将文本文件拖动到重复网格上。

◼您还可以将一个文本文件（带有换行符）拖动到重复网格中的文本组件上。

所有文本元素都会使用该文件中的文本进行填充。

◼将文本复制并粘贴到画板上。

◼您还可以通过将文本复制并粘贴到画板上，创建可在Adobe XD 中轻松移动和编辑的区域文本元素◼文本工具◼调整文本区域的大小◼单击文本并拖动手柄以更改字体的大小。

此功能仅可用于点文本。

◼拖动手柄可调整文本大小。

◼文本工具◼设置文本格式◼单击文本，然后使用“属性检查器”指定文本的类型、字体大小和文本对齐方式。

◼您还可以选择文本块中的单个单词或字符，并单独设置这些部分的格式。

◼更改字符、行和段落间距◼如需更改字符间距，请单击文本对象并使用“属性检查器”中的“字符间距”选项指定字符间距。

◼要更改文本子集中的字符间距，请使用“属性检查器”选择文本并修改字符间距（以毫ems 为单位）。

文本工具◼◼文本变换◼要应用任何文本变换，请选择要更改的文本。

从“属性检查器”中选择以下任一选项：◼大写图标(TT)，用于将文本设置为大写。

◼小写图标(tt)，用于将文本设置为小写。

◼词首大写图标(Tt)，用于将文本设置为词首大写。

◼文本上标图标，用于将文本设置为上标。

◼文本下标图标，用于将文本设置为下标。

第2章Adobe XD设计模式2.3管理资源与组件◼添加和删除资源◼要集中管理您项目中使用的资源（例如颜色、渐变和字符样式），您可以将这些资源添加到“资源”面板。

◼“资源”面板还会自动显示您在XD 中创建的所有组件。

有关组件的更多信息，请参阅组件。

◼如需打开“资源”面板，请单击工具栏中的，或按Cmd+ Shift + Y（在Mac 上）或Ctrl + Shift + Y（在Windows 上）。

◼添加和删除资源◼将颜色和渐变（线性或径向）添加到“资源”面板：在画板上选择一个对象或一组对象，然后单击“资源”面板中“颜色”旁边的+ 图标。

◼将字符样式添加到“资源”面板：在画板上选择文本或文本框，然后单击“资源”面板中的“字符样式”旁边的+ 图标。

◼从“资源”面板中删除资源：在“资源”面板中选择资源，右键单击（在Windows 上）或在按住Ctrl 键的同时单击（在Mac 上），然后从上下文菜单选择“删除”。

◼您也可以选择一个画板或一组画板，然后单击+ 图标，将所有颜色和字符样式从画板添加到“资源”面板。

◼将颜色添加为资源并使用◼从“属性检查器”中选择画布上的相关对象并应用所需的颜色。

◼要将颜色添加为资源，请选择以上对象并单击“资源”面板中“颜色”旁边的+ 图标。