在本教程中，您将学习如何在Adobe XD中创建酒店预订应用程序设计。 作为Adobe XD，我们不仅可以构建静态设计，还可以构建更多内容。 我们将构建一个交互式的动画原型。
首先，我们将介绍任何酒店预订用户界面设计的一些常见组成部分。 那么我们将涵盖什么呢？
- 使用基本的形状，路径和矢量形状构建技术，您将学习如何创建线形图标和按钮。
- 使用过渡和动画，您将学习如何将最终设计变成交互式原型。
- 最后，您将学习如何将库存图像添加到该酒店管理Android项目。
有关如何调整或改善最终酒店预订应用程序设计的更多启发，您可以在GraphicRiver中找到大量资源。
您需要什么：
您将需要以下资源才能创建此酒店预订应用程序设计。 这些大多数都可以从Envato Elements中获得，Envato Elements的单个订阅允许您无限下载。 如果您不需要优质资产的质量，也可以找到免费的替代方法：
- 旧金山字体
- 带壁炉的客厅
- 大白地毯形象的卧室
- 休息室形象的木制设计
- 关于办公室和购物的矢量图标集
- 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 ）。
第三步
使用选择工具（V） ，选择图像以及黑色矩形，右键单击选择内容内部，然后转到遮罩此形状（Shift-Command-M） 。
第4步
选择矩形工具（R）并按住Shift键，轻松创建一个30像素的正方形。 确保它保持选中状态，然后转到“ 属性”检查器。
首先，在Y框中输入在X箱20以及69到你选择的对象如图所示，将如下图所示，然后转到外观属性。 将拐角半径设置为2 ，禁用“边框”并将“ 填充颜色”更改为＃223065 。
第5步
转到“ 视图”>“显示方形网格”（Command-'）以激活画板上的网格。 将焦点放在画板的顶部，然后单击名称以在“ 属性”检查器中获得“ 网格”设置。 在该输入框中输入1 ，然后单击适当的颜色。 将颜色更改为＃C7C7C7并将不透明度降低到50％ 。
回到画板上，专注于圆角正方形。 选择“ 线”工具（L），然后创建9像素的垂直路径。 确保它保持选中状态，然后转到“ 属性”检查器。 禁用填充并将边框颜色更改为白色（ #FFFFFF ）。 返回画板并双击垂直路径以进入编辑模式。 只需选择底部锚点，然后将其向右拖动9 px，如第二幅图像所示。
第6步
转到“ 视图”>“显示方形网格（Command-'）”以禁用网格。 确保仍选择上一步中创建的垂直路径并复制它（ Command-C> Command-V ）。 选择此副本，转到“ 属性”检查器，然后单击“ 水平翻转”按钮。
按住Shift键，选择组成您的X符号的两个白色路径，并将它们放置在第三张图像中。
步骤7
选择圆角正方形并复制它（Command-C> Command-V） 。 选择此副本，按住Shift键，然后将新形状拖到右侧，如下图所示。
从有关办公室和购物的“矢量图标集”中复制心脏图标，并将其粘贴到文档中。 将其宽度设置为10 ，并将填充颜色更改为白色，然后将其放置在最终图像中。
步骤8
选择“ 椭圆”工具（E）并按住Shift键可轻松创建30像素的圆圈。 确保它保持选中状态，然后转到“ 属性”检查器。
首先，在Y框中输入在X箱20以及319到您选择的对象如图所示，将如下图所示，然后转到外观属性。 禁用边框并将填充颜色更改为#EBEFFC 。
步骤9
转到“ 视图”>“显示方形网格”（Command-'）以激活网格。
选择“ 线条”工具（L） ，创建一个8像素的垂直路径并将其放置，如下图所示。 确保它保持选中状态，然后转到“ 属性”检查器。 禁用“填充”并将“ 边框”颜色更改为＃223065 。
单击此路径中间的某处以添加新的锚点，并将其向左拖动4 px ，如下图所示。
第10步
选择下图中突出显示的圆圈和箭头路径，并将其分组 （ Command-G ）。
添加该组的副本（ Command-C> Command-V ），将其放置在第三张图像（ X 364 Y 319 ）中，然后水平翻转。
3.如何在酒店预订用户界面设计中添加文本和评论框
第1步
选择“ 文字”工具（T） ，在画板上单击并添加“ Cozy Central Apartment”文字。 确保它保持选中状态，然后转到“ 属性”检查器。
选择San Francisco Compact Display字体 ，将大小设置为24 ，将样式设置为Semibold ，然后将“ 填充颜色”更改为＃223065 。
第2步
复制此关于Office和Shopping的矢量图标集中的星形图标，并将其粘贴到文档中。 将其宽度设置为20并将填充颜色更改为＃FFC800 ，然后将其放置在最终图像中。
第三步
使用文本工具（T）添加“ 4.8”文本。 确保它保持选中状态，然后转到“ 属性”检查器。
选择San Francisco Compact Display字体 ，将大小设置为18 ，将样式设置为Medium ，然后将“ 填充颜色”更改为＃FEC82E 。
第4步
选择矩形工具（R） ，创建374 x 30 px的形状并将其放置，如下图所示。 将拐角半径设置为5 ，禁用“边框”并将“ 填充颜色”更改为＃F5F7FD 。
第5步
使用文本工具（T） ，添加“ 1083评论”文本。 确保它保持选中状态，然后转到“ 属性”检查器。
选择San Francisco Compact Display字体 ，将大小设置为16 ，将样式设置为Light ，然后将“ 填充颜色”更改为＃223065 。
第6步
用圆圈和箭头路径集中在正确的组上。 双击它仅选择箭头路径并复制它（ Command-C ）。 粘贴副本（ Command-V ）并将其放置在第二个图像中。
4.如何在我们的酒店预订应用程序设计中创建和导入图标
第1步
选择矩形工具（R） ，创建一个60像素的正方形并将其放置，如下图所示。 将拐角半径设置为5 ，禁用“边框”并将“ 填充颜色”更改为＃F5F7FD 。
第2步
选择椭圆工具（E ）并创建一个22像素的圆圈。 禁用“填充”，将“ 边框”颜色更改为＃223065，然后选中“ 内部描边”按钮。
第三步
使用矩形工具（R）创建3 x 12 px的形状并将其放置，如下图所示。 确保它保持选中状态，然后转到“ 属性”检查器。
单击每个角的不同半径按钮，然后输入以下所示的数字。 禁用“填充”，将“ 边框”颜色更改为＃223065，然后选中“ 内部描边”按钮。
第4步
使用矩形工具（R）创建一个7像素的正方形并将其放置，如下图所示。 确保它保持选中状态，然后转到“ 属性”检查器。
单击每个角的不同半径按钮，然后输入以下所示的数字。 禁用“填充”，将“ 边框”颜色更改为＃223065，然后选中“ 内部描边”按钮。
第5步
选择第一个图像中突出显示的两个形状，转到“ 属性”检查器，然后单击“ 添加”按钮。
使用矩形工具（R）创建一个3像素的正方形，并将其放置，如下图所示。 确保它保持选中状态，然后转到“ 属性”检查器。
单击每个角的不同半径按钮，然后输入以下所示的数字。 禁用“填充”，将“ 边框”颜色更改为＃223065，然后选中“ 内部描边”按钮。
第6步
选择第一个图像中突出显示的三个形状并将其分组 （ Command-G ）。 选择该组并将其放置，如第三个图像所示。
步骤7
使用文本工具（T）添加“停车”文本。 确保它保持选中状态，然后转到“ 属性”检查器。
选择San Francisco Compact Display字体 ，将大小设置为10 ，将样式设置为Thin ，然后将“ 填充颜色”更改为＃223065 。
步骤8
选择文本图标和下图中突出显示的圆角正方形。 按住Option键和Shift键，然后将所选内容的副本拖到右侧，如下图所示。 确保在原件和副本之间留出20像素的间距。 专注于副本，将文本更改为“ Gym”，然后将这20个酒店图标包中的停车图标替换为哑铃形图标。
再重复三遍此技术。 始终记得在每组形状之间留出20像素 ，并替换文本和图标，如下图所示。 所有图标都可以在这20个酒店图标包中找到。
5.如何在我们的酒店预订用户界面设计中添加文本和小按钮
第1步
复制这12个地图位置图钉图标中的箭头图标，并将其粘贴到文档中。 将其宽度设置为16并将其放置在第一个图像中。
使用文字工具（T） ，添加 下图显示了几段文字。 使用San Francisco Compact Display字体 ，将大小设置为16 ，将样式设置为Light ，然后将“ 填充颜色”更改为＃223065 。
第2步
选择“ 椭圆”工具（E） ，创建三个4 px的圆圈并将其放置，如下图所示。 禁用边框并将填充颜色更改为＃223065 。
第三步
选择矩形工具（R） ，创建一个374 x 2 px的形状并将其放置，如下图所示。 禁用边框并将填充颜色更改为＃F5F7FD 。
第4步
选择“ 椭圆”工具（E） ，创建一个10像素的圆圈并将其放置，如下图所示。 禁用边框并将填充颜色更改为＃F5F7FD 。
第5步
选择钢笔工具（P）并创建一个简单的箭头路径，如下图所示。 确保它保持选中状态，然后转到“ 属性”检查器。 禁用填充并将边框颜色更改为白色。
6.如何添加输入按钮
第1步
选择“ 矩形”工具（R） ，创建177 x 30 px的形状并将其放置，如下图所示。 将拐角半径设置为5 ，禁用“边框”并将“ 填充颜色”更改为#EBEFFC 。
第2步
选择“ 椭圆”工具（E） ，创建一个12像素的圆圈并将其放置在第一张图片中。 禁用边框并将填充颜色更改为＃5E78FB 。 使用相同的工具，创建一个8像素的圆圈并将其放置，如第二个图像所示。 禁用边框并将填充颜色更改为黑色。
选择在此步骤中制作的两个圆，然后单击“ 属性”检查器中的“ 减”按钮。
第三步
使用矩形工具（R）创建一个12 x 8 px的形状并将其放置在第一个图像中。 选择此黑色矩形以及上一步中制作的形状，然后从“ 属性”检查器中单击“ 减法”按钮。
选择椭圆工具（E ）并创建一个8像素的圆圈。 禁用“填充”，将“ 边框”颜色更改为＃5E78FB ，选中“ 内部描边”按钮，并且不要忘记将“ 大小”增加到2 。
第4步
选择“ 矩形”工具（R） ，创建一个14 px的正方形并将其放置，如下图所示。 将拐角半径设置为2 ，禁用“边框”并将“ 填充颜色”更改为白色。
第5步
选择“ 线条”工具（L ） ，创建一条8像素的水平线，并将其放置在第一张图片中。 禁用填充，将边框颜色更改为＃5E78FB并确保将大小设置为1 。
复制此路径（ Command-C> Command-V ），选择副本，转到“ 属性”检查器，然后将旋转角度设置为90度 。
第6步
选择圆角正方形和组成加号的两条路径。 按住Option键和Shift键，然后将所选内容的副本拖到左侧，如下图所示。 在原件和副本之间留出8像素的间距。 专注于副本，选择垂直路径并将其删除。
步骤7
使用文本工具（T） ，添加“ 2 ADULTS”文本。 使用San Francisco Compact Display字体 ，将大小设置为14 ，将样式设置为Light ，然后将“ 填充颜色”更改为＃5E78FB 。
步骤8
复制下图所示的文本和形状。 如下所示放置副本，并将“ 2 ADULTS”文本替换为“ 0 CHILDREN” 。
7.将按钮添加到我们的UI设计
第1步
选择矩形工具（R） ，创建一个110 x 100 px的形状并将其放置，如下图所示。 将拐角半径设置为5 ，禁用“边框”并将“ 填充颜色”更改为#EBEFFC 。
第2步
选择矩形工具（R） ，创建一个110 x 40 px的形状并将其放置，如下图所示。 禁用边框并将填充颜色更改为白色。
第三步
使用文本工具（T）添加“ CHECK IN”文本。 使用San Francisco Compact Display字体 ，将大小设置为12 ，将样式设置为Semibold ，然后将“ 填充颜色”更改为＃5E78FB 。
第4步
使用文本工具（T） ，添加“ 21”文本。 使用San Francisco Compact Display字体 ，将大小设置为32 ，将样式设置为粗体 。
使用相同的工具，添加“ FEBRUARY”文本。 使用San Francisco Compact Display字体 ，将大小设置为12 ，将样式设置为Light 。
第5步
选择“ 矩形”工具（R） ，创建两个2 x 10 px的形状并将其放置，如下图所示。 禁用边框并将填充颜色更改为#EBEFFC 。
第6步
复制下图所示的文本和形状。 如下所示放置副本，并将文本信息替换为第二个图像中显示的文本信息。
步骤7
选择矩形工具（R） ，创建一个110 x 100 px的形状并将其放置，如下图所示。 将拐角半径设置为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 px的形状并将其放置，如下图所示。 禁用边框并将填充颜色更改为白色。
第2步
确保在上一步中制作的矩形仍处于选中状态，并将焦点放在“ 属性”检查器上。
使用微小的复选框激活阴影 ，输入下图所示的数字，然后单击此效果的颜色。 将颜色更改为＃5E78FB并将不透明度降低到4％ 。
第三步
选择矩形工具（R） ，创建一个374 x 60 px的形状并将其放置，如下图所示。 将拐角半径设置为5 ，禁用“边框”并将“ 填充颜色”更改为＃FD6C88 。
第4步
确保仍然选择粉红色的圆角矩形，然后将其放在“ 属性”检查器上。
激活阴影 ，输入下图所示的数字，然后单击此效果的颜色。 将颜色更改为＃FD6C88并将不透明度降低到30％ 。
第5步
使用文本工具（T） ，添加“立即预订”文本并将其放置，如下图所示。 使用San Francisco Compact Text字体 ，将大小设置为20 ，字符间距设置为100 ，样式设置为粗体 ，然后将填充颜色更改为白色。
第6步
选择白色矩形，粉红色的圆角矩形和“立即预订”文本，然后将它们分组 （ Command-G ）。
确保已选择它，转到“ 属性”检查器，然后检查“ 滚动时固定位置” 。 当您的原型最终设计时，此小选项将有帮助。 每当您滚动浏览设计时，该组就会显示在屏幕上。
9.如何乘以画板
第1步
单击画板的名称以激活尺寸手柄。 向下拖动底部手柄，并将artbaord的高度增加到1020 px 。
第2步
确保您的画板仍处于选中状态，然后将其复制（ Command-C> Command-V ）。
第三步
专注于第二个画板，并用以下一个替换蒙版图像： 铺着白色大地毯的卧室 。
第4步
复制第二个画板（ Command-C> Command-V ）。 专注于第三个画板，并用以下一个替换蒙版图像： 休息室的木制设计 。
10.如何将您的酒店预订用户界面设计转变为交互式原型
第1步
从设计模式切换到原型模式 。
将焦点放在第一个画板上的图像上，然后单击右箭头组。 单击蓝色箭头按钮并将其拖动到第二个画板上方，以连接两个画板。 转到属性检查器以设置交互行为。 将Tap设置为触发器，选择Transition和Dissolve动画，并保留默认的Easing和Duration属性。
完成后，您可以单击“ 预览”按钮来查看原型。
第2步
让我们继续制作原型。 专注于第二个画板，单击右箭头组，然后将其与第三个画板连接。 移至第三个画板，单击右箭头组，并将其与第一个画板连接。
第三步
- 将重点放在第一个画板上，单击左箭头组，然后将其与第三个画板连接。
- 转到第二个画板，单击左箭头组，并将其与第一个画板连接。
- 移至第三个画板，单击左箭头组，然后将其与第二个画板连接。
11.如何扩展原型
第1步
选择Shift键，然后单击三个画板的名称以选择它们。 按住Shift和Option键，然后复制您的画板，如下图所示。
第2步
重点关注在先前步骤中添加的三个画板。 选择位于心脏图标后面的圆角正方形，然后将“ 填充颜色”更改为＃FD6C88 。
第三步
专注于第一个画板，单击带有圆角的右上角正方形并将其与下面的画板连接。
第4步
专注于第二个画板，单击带有圆角的右上角正方形并将其与下面的画板连接。 移至第三个画板，然后执行相同的操作。
第5步
最后，将粉红色的圆角正方形与这些形状上方的画板连接起来。
完成后，单击“ 预览”按钮并测试您的原型，如最终产品视频中所示。
您的酒店预订应用模板已完成！
这是它的外观。 希望您喜欢这个酒店设计应用，并可以将这些技术应用到未来的项目中。 不要在评论部分中分享您的最终结果！
随时调整最终酒店预订应用程序的设计，并自行设计。 您可以在GraphicRiver上找到出色的酒店设计应用程序灵感，并提供有趣的解决方案来创建最佳的android酒店应用程序。
想更多地了解Adobe XD？
翻译自: https://webdesign.tutsplus.com/tutorials/hotel-booking-ui-design-adobe-xd--cms-34745
