如何在Adobe XD中创建酒店预订UI设计

最新推荐文章于 2023-08-20 15:21:49 发布

翻译最新推荐文章于 2023-08-20 15:21:49 发布 · 481 阅读

文章标签：

#java #css #脚本语言 #交互设计 #notepad++

本文详细介绍在Adobe XD中创建酒店预订应用设计的过程，包括构建图标、按钮、文本元素及实现交互原型的方法。

在本教程中，您将学习如何在Adobe XD中创建酒店预订应用程序设计。作为Adobe XD，我们不仅可以构建静态设计，还可以构建更多内容。我们将构建一个交互式的动画原型。

首先，我们将介绍任何酒店预订用户界面设计的一些常见组成部分。那么我们将涵盖什么呢？

使用基本的形状，路径和矢量形状构建技术，您将学习如何创建线形图标和按钮。
使用过渡和动画，您将学习如何将最终设计变成交互式原型。
最后，您将学习如何将库存图像添加到该酒店管理Android项目。

有关如何调整或改善最终酒店预订应用程序设计的更多启发，您可以在GraphicRiver中找到大量资源。

您需要什么：

您将需要以下资源才能创建此酒店预订应用程序设计。这些大多数都可以从Envato Elements中获得，Envato Elements的单个订阅允许您无限下载。如果您不需要优质资产的质量，也可以找到免费的替代方法：

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