如何在Adob​​e XD中创建酒店预订应用程序UI设计

在本教程中，您将学习如何在 adobe XD 中创建酒店预订应用程序设计。作为 Adobe XD，我们将能够构建的不仅仅是静态设计；我们将构建一个交互式动画原型。

你需要什么：

您将需要以下资源来创建此酒店预订应用程序设计。如果您不需要优质资产的质量，您还可以找到免费的替代方案：

• 旧金山字体

• 带壁炉的客厅图片

• 有大白色地毯图象的卧室

• 休息室形象的木质设计

• 关于办公室和购物的矢量图标集

• 20 个酒店图标

• 12 地图位置别针图标

1.如何创建画板

启动 Adobe XD 并打开欢迎屏幕上电话图标下方的下拉菜单。选择iphone XR/XS Max/11 (414 x 896)模板以创建414 x 896画板。

2.如何在酒店预订应用程序设计中添加图像滑块

步骤1

下载这个带壁炉的客厅图像并将其拖到您的文档中。确保它保持选中状态并转到属性检查器。

检查锁定图标以限制所选对象的宽度和高度，并将高度更改为370。在X和Y输入框中输入0以将图像放置在画板的顶部，如下图所示。

第2步

选择矩形工具 (R)并创建一个370 x 414 像素的形状。如下图所示放置它，确保它保持选中状态并转到属性检查器。

使用复选框禁用现有边框，然后单击填充颜色池并将颜色更改为黑色 ( #000000 )。

第 3 步

使用选择工具 (V)选择您的图像以及黑色矩形，在您的选择内单击鼠标右键，然后转到蒙版此形状 (Shift-Command-M)。

第4步

选择矩形工具 (R)并按住Shift键轻松创建一个30 像素的正方形。确保它保持选中状态并转到属性检查器。

首先，在X框中输入20 ，在Y框中输入69以放置您选择的对象，如下图所示，然后转到外观属性。将圆角半径设置为2，禁用边框并将填充颜色更改为#223065。

第 5 步

转到查看>显示方形网格（Command-'）以激活画板上的网格。专注于画板的顶部，然后单击名称以在属性检查器中获取网格设置。在该输入框中输入1，然后单击颜色池。将颜色更改为#C7C7C7并将不透明度降低到50%。

回到你的画板并专注于圆角正方形。选择线条工具 (L)并创建一个9 px的垂直路径。确保它保持选中状态并转到属性检查器。禁用填充并将边框颜色更改为白色（#FFFFFF）。返回您的画板并双击您的垂直路径以进入编辑模式。只需选择底部锚点并将其向右拖动 9 px，如第二张图像所示。

第 6 步

转到查看>显示方形网格（Command-'）以禁用网格。确保仍选中上一步中创建的垂直路径并复制它（Command-C > Command-V）。选择这个副本，转到属性检查器并单击水平翻转按钮。

按住Shift键，选择构成 X 符号的两条白色路径，并将它们放置在第三张图像中。

第 7 步

选择您的圆角正方形并复制它（Command-C > Command-V）。选择此副本，按住Shift键并将新形状向右拖动，如下图所示。

从此矢量图标集中复制关于办公室和购物的心形图标并将其粘贴到您的文档中。将其宽度设置为10并将填充颜色更改为白色，然后将其放置在最终图像中。

第 8 步

选择椭圆工具 (E)并按住Shift键轻松创建一个30 px的圆圈。确保它保持选中状态并转到属性检查器。

首先，在X框中输入20 ，在Y框中输入319以放置您选择的对象，如下图所示，然后转到外观属性。禁用边框并将填充颜色更改为#EBEFFC。

第 9 步

转到查看>显示方形网格（Command-'）以激活网格。

选择线条工具 (L)，创建一个8 px垂直路径并将其放置如下图所示。确保它保持选中状态并转到属性检查器。禁用填充并将边框颜色更改为#223065。

单击此路径中间的某处以添加新的锚点并将其向左拖动4 px，如下图所示。

第 10 步

选择下图中突出显示的圆圈和箭头路径并将它们分组（Command-G）。

添加该组的副本（Command-C > Command-V），如第三张图像所示放置它（X 364 Y 319），然后将其水平翻转。

3.如何在酒店预订 UI 设计中添加文本和评论框

步骤1

选择文本工具 (T)，在画板内部单击并添加“Cozy Central Apartment” 文本。确保它保持选中状态并转到属性检查器。

选择San Francisco Compact Display 字体，将大小设置为24，将样式设置为Semibold，然后将填充颜色更改为#223065。

第2步

从这个关于办公室和购物的矢量图标集中复制星形图标并将其粘贴到您的文档中。将其宽度设置为20并将填充颜色更改为#FFC800，然后将其放置在最终图像中

第 3 步

使用文本工具 (T)添加“4.8” 文本。确保它保持选中状态并转到属性检查器。

选择San Francisco Compact Display 字体，将大小设置为18，将样式设置为Medium，然后将填充颜色更改为#FEC82E。

第4步

选择矩形工具 (R)，创建一个374 x 30 像素的形状并将其放置如下图所示。将圆角半径设置为5，禁用边框并将填充颜色更改为#F5F7FD。

第 5 步

使用文本工具 (T)添加“1083 评论” 一段文本。确保它保持选中状态并转到属性检查器。

选择San Francisco Compact Display 字体，将大小设置为16，将样式设置为Light，然后将填充颜色更改为#223065。

第 6 步

用圆圈和箭头路径将注意力集中在正确的组上。双击它只选择箭头路径并复制它（Command-C）。粘贴副本（Command-V）并将其放置在第二张图像中。

4.如何在我们的酒店预订应用程序设计中创建和导入图标

步骤1

选择矩形工具 (R)，创建一个60 px的正方形，如下图所示放置。将圆角半径设置为5，禁用边框并将填充颜色更改为#F5F7FD。

第2步

选择椭圆工具 (E )并创建一个22 像素的圆圈。禁用填充，将边框颜色更改为#223065并检查内部描边按钮

第 3 步

使用矩形工具 (R)创建一个3 x 12 像素的形状并将其放置如下图所示。确保它保持选中状态并转到属性检查器。

单击每个角的不同半径按钮并输入如下所示的数字。禁用填充，将边框颜色更改为#223065并检查内部描边按钮。

第4步

使用矩形工具 (R)创建一个7 px的正方形并将其放置如下图所示。确保它保持选中状态并转到属性检查器。

单击每个角的不同半径按钮并输入如下所示的数字。禁用填充，将边框颜色更改为#223065并检查内部描边按钮。

第 5 步

选择第一张图片中突出显示的两个形状，转到属性检查器并单击添加按钮。

使用矩形工具 (R)创建一个3 px的正方形并将其放置如下图所示。确保它保持选中状态并转到属性检查器。

单击每个角的不同半径按钮并输入如下所示的数字。禁用填充，将边框颜色更改为#223065并检查内部描边按钮。

第 6 步

选择第一个图像中突出显示的三个形状并将它们分组（Command-G）。选择此组并将其放置，如第三张图像所示。

第 7 步

使用文本工具 (T)添加“停车” 文本。确保它保持选中状态并转到属性检查器。

选择San Francisco Compact Display 字体，将大小设置为10，将样式设置为Thin，然后将填充颜色更改为#223065。

第 8 步

选择下图中突出显示的文本图标和圆角正方形。按住Option和Shift键并将所选内容的副本向右拖动，如下图所示。确保在原件和副本之间留出20 像素的间隙。专注于副本，将文本更改为“健身房”  ，并用这20 个酒店图标包中的哑铃图标替换停车图标。

再重复此技术三遍。永远记住在每组形状之间留出20 px的距离，并替换文本和图标，如下图所示。所有图标都可以在这20 个酒店图标包中找到。

5.如何在我们的酒店预订 UI 设计中添加文本和小按钮

步骤1

从这12 个地图位置图钉图标中复制箭头图标并将其粘贴到您的文档中。将其宽度设置为16并将其放置在第一张图像中。

使用文本工具 (T)添加 下图中显示的文本片段。使用San Francisco Compact Display 字体，将大小设置为16，将样式设置为Light，然后将填充颜色更改为#223065。

第2步

选择椭圆工具 (E)，创建三个4 px的圆圈并将它们放置如下图所示。禁用边框并将填充颜色更改为#223065。

第 3 步

选择矩形工具 (R)，创建一个374 x 2 px的形状并将其放置如下图所示。禁用边框并将填充颜色更改为#F5F7FD。

第4步

选择椭圆工具 (E)，创建一个10 px的圆圈并将其放置如下图所示。禁用边框并将填充颜色更改为#F5F7FD

第 5 步

选择钢笔工具 (P)并创建一个简单的箭头路径，如下图所示。确保它保持选中状态并转到属性检查器。禁用填充并将边框颜色更改为白色。

6.如何添加输入按钮

步骤1

选择矩形工具 (R)，创建一个177 x 30 像素的形状并将其放置如下图所示。将圆角半径设置为5，禁用边框并将填充颜色更改为#EBEFFC。

第2步

选择椭圆工具 (E)，创建一个12 px的圆圈并将其放置在第一张图像中。禁用边框并将填充颜色更改为#5E78FB。使用相同的工具，创建一个 8 px 的圆圈并将其放置在第二张图像中。禁用边框并将填充颜色更改为黑色。

选择在此步骤中创建的两个圆圈，然后单击属性检查器中的减去按钮。

第 3 步

使用矩形工具 (R)创建一个12 x 8 像素的形状并将其放置在第一张图片中。选择这个黑色矩形以及上一步中制作的形状，然后单击属性检查器中的减去按钮。

选择椭圆工具 (E )并创建一个8 px的圆圈。禁用填充，将边框颜色更改为#5E78FB，检查Inner Stroke按钮，不要忘记将Size增加到2。

第4步

选择矩形工具 (R)，创建一个14 px的正方形，如下图所示放置。将圆角半径设置为2，禁用边框并将填充颜色更改为白色。

第 5 步

选择线条工具 (L )，创建一条8 px的水平线并将其放置在第一张图片中。禁用填充，将边框颜色更改为#5E78FB并确保将大小设置为1。

复制此路径（Command-C > Command-V），选择副本，转到属性检查器并将旋转角度设置为90 度。

第 6 步

选择圆角正方形和构成加号的两条路径。按住Option和Shift键，只需将所选内容的副本拖到左侧，如下图所示。在原件和副本之间留出8 px的间隙。专注于副本，选择垂直路径并将其删除。

第 7 步

使用文本工具 (T)添加“ 2 ADULTS” 一段文本。使用San Francisco Compact Display 字体，将大小设置为14，将样式设置为Light，然后将填充颜色更改为#5E78FB。

第 8 步

复制下图中显示的文本和形状。如下所示放置副本，并将“ 2 ADULTS” 文本替换为“ 0 CHILDREN”。

7. 在我们的 UI 设计中添加按钮

步骤1

选择矩形工具 (R)，创建一个110 x 100 像素的形状并将其放置如下图所示。将圆角半径设置为5，禁用边框并将填充颜色更改为#EBEFFC。

第2步

选择矩形工具 (R)，创建一个110 x 40 像素的形状并将其放置如下图所示。禁用边框并将填充颜色更改为白色。

第 3 步

使用文本工具 (T)添加“签入” 文本。使用San Francisco Compact Display 字体，将大小设置为12，将样式设置为Semibold，然后将填充颜色更改为#5E78FB

第4步

使用文本工具 (T)添加“ 21” 文本。使用San Francisco Compact Display 字体，将大小设置为32，将样式设置为Bold。

使用相同的工具，添加“FEBRUARY” 文本。使用San Francisco Compact Display 字体，将大小设置为12，将样式设置为Light。

第 5 步

选择矩形工具 (R)，创建两个2 x 10 像素的形状并将它们放置如下图所示。禁用边框并将填充颜色更改为#EBEFFC。

第 6 步

复制下图中显示的文本和形状。如下所示放置副本，并将文本信息替换为第二张图像中显示的信息。

第 7 步

选择矩形工具 (R)，创建一个110 x 100 像素的形状并将其放置如下图所示。将圆角半径设置为5，禁用边框并将填充颜色更改为#5E78FB。

第 8 步

使用文本工具 (T)添加“8 NIGHTS” 一段文本。使用San Francisco Compact Display 字体，将大小设置为12，将样式设置为Semibold，然后将填充颜色更改为白色。

使用相同的工具，添加“$504” 的文本。将大小设置为32并将样式设置为Bold。添加“$63/NIGHT” 一段文字。将大小设置为12并将样式设置为Light。

8. 为交互式原型添加一个固定按钮

步骤1

选择矩形工具 (R)，创建一个414 x 124 像素的形状并将其放置如下图所示。禁用边框并将填充颜色更改为白色。

第2步

确保上一步中制作的矩形仍处于选中状态，并将焦点放在属性检查器上。

使用小复选框激活阴影，输入下图中显示的数字，然后单击此效果的颜色池。将颜色更改为#5E78FB并将不透明度降低到4%。

第 3 步

选择矩形工具 (R)，创建一个374 x 60 像素的形状并将其放置如下图所示。将圆角半径设置为5，禁用边框并将填充颜色更改为#FD6C88。

第4步

确保您的粉红色圆角矩形仍处于选中状态，并专注于属性检查器。

激活阴影，输入下图所示的数字，然后单击此效果的颜色池。将颜色更改为#FD6C88并将不透明度降低到30%。

第 5 步

使用文本工具 (T)，添加“BOOK NOW” 一段文本并将其放置如下图所示。使用San Francisco Compact Text 字体，将大小设置为20，将字符间距设置为100，将样式设置为Bold，然后将填充颜色更改为白色。

第 6 步

选择白色矩形、粉红色圆角矩形和“立即预订” 文本并将它们分组（Command-G）。 

确保它被选中，转到属性检查器并检查Fix position When Scrolling。这个小选项将在您的原型进行最终设计时有所帮助。每当您滚动浏览您的设计时，该组就会显示在屏幕上。

9.如何将画板相乘

步骤1

单击画板的名称以激活大小手柄。向下拖动底部手柄并将 artbaord 的高度增加到1020 px。

第2步

确保您的画板仍处于选中状态并复制它（Command-C > Command-V）。

第 3 步

专注于第二个画板，并用这个替换蒙版图像：带大白地毯的卧室。

第4步

复制第二个画板（Command-C > Command-V）。专注于第三个画板，并用这个替换蒙版图像：休息室的木制设计。

10.如何将您的酒店预订 UI 设计转变为交互式原型

步骤1

从 设计模式切换到 原型模式。

专注于第一个画板中的图像，然后单击右箭头组。单击蓝色箭头按钮并将其拖动到第二个画板上方以连接两个画板。转到属性检查器以设置交互的行为。将Tap设置为触发器，选择Transition和Dissolve动画并保留默认的Easing和Duration属性。

完成后，您可以单击“预览”按钮查看您的原型。

第2步

让我们继续原型设计。关注第二个画板，单击右箭头组并将其与第三个画板连接。移动到第三个画板，单击右箭头组并将其与第一个画板连接。

第 3 步

1. 关注第一个画板，单击左箭头组并将其与第三个画板连接。 

2. 转到第二个画板，单击左箭头组并将其与第一个画板连接。 

3. 移动到第三个画板，单击左箭头组并将其与第二个画板连接。

11.如何扩展原型

步骤1

选择Shift键并单击三个画板的名称以选择它们。按住Shift和Option键并复制您的画板，如下图所示。

第2步

专注于前面步骤中添加的三个画板。选择位于心形图标后面的圆角正方形并将填充颜色更改为#FD6C88。

第 3 步

专注于第一个画板，单击右上角的圆角正方形并将其与下方的画板连接。

第4步

专注于第二个画板，单击右上角的圆角正方形并将其与下方的画板连接起来。移动到第三个画板并做同样的事情。

第 5 步

最后，将粉红色的圆形正方形与位于每个形状上方的画板连接起来。

完成后，单击预览按钮并测试您的原型，如最终产品视频所示。

恭喜！您的酒店预订应用程序模板已完成！

这是它的外观。我希望您喜欢这款酒店设计应用程序，并且可以在您未来的项目中应用这些技术。不要犹豫，在评论部分分享您的最终结果！