ui sketch_如何在Sketch中设计食品订购iPad App UI-优快云博客

ui sketch

在本素描教程中，您将学习如何设计食品订购应用程序UI。

首先，您将学习如何创建任何食品移动应用程序的起始组件。您将学习：

如何创建基本的导航栏，
如何保存和使用符号和嵌套符号，
如何在食品移动应用程序中合并图像，图标和文本，
以及如何创建智能布局。

所有这些小功能将简化整个餐厅应用程序UI教程的工作。

使用基本的形状，路径和矢量形状构建技术，您将学习如何创建平面图标和按钮。
使用微妙的阴影技巧和一些文字，您将学习如何使任何食品应用程序设计脱颖而出。
最后，您将学习如何在此食品应用程序设计中添加库存图像。

GraphicRiver上的UI模板

有关如何调整或改善最终餐厅应用程序UI的更多启发，您可以在GraphicRiver中找到大量资源。

您需要什么：

您需要以下资源才能完成此餐厅菜单应用程序设计。这些大多数都可以从Envato Elements中获得，Envato Elements的单个订阅允许您无限下载。如果您愿意，也可以找到其他替代方法：

1.如何设置画板并更改其颜色

从工具栏或菜单转到插入>画板 （或按A ）， 检查器将显示画板模板的列表。

单击12.9“ iPad Pro模板以创建1366 x 1024 px的画板，然后转到面板顶部，从纵向模式切换为横向模式。现在，让我们开始在此食品订购应用程序UI上进行工作。

第2步

确保您的画板仍处于选中状态，或通过单击其名称来进行重新选择。

转到“ 检查器”面板，然后选中“ 背景颜色”框。单击该颜色，然后将现有颜色替换为＃F7D4A6 。完成后，按Escape取消选择画板。

2.如何在食品订购应用程序界面中添加导航栏

第1步

从工具栏或菜单转到插入>形状>矩形 （或按R ）。单击并拖动以创建1366 x 100 px的形状，确保其保持选中状态，然后将焦点放在“ 检查器”面板上。

使用X ＆ Y输入框以数字方式放置此新形状，如下图所示。在Y框中输入在X框中输入0和50，你的形状将移动到画板上侧，如下图所示。

继续关注“ 检查器”面板，然后移至“ 样式”部分。禁用现有的边框并将填充颜色更改为白色（ #FFFFFF ）

第2步

从工具栏或菜单转到插入>形状>矩形 （或按R ）。按住Shift键可以轻松创建一个50像素的正方形并将其放置，如下图所示（ X：50 Y：75 ）。您可以转到视图>画布>显示所有参考线以启用智能参考线，这将使您更容易在Sketch中对齐形状。

继续关注“ 检查器”面板，将“ 半径”滑块拖至10 ，然后移至“ 样式”部分。禁用现有边框并将填充颜色更改为＃EDCA9C 。

第三步

专注于上一步中制作的圆角正方形。转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建10 x 16像素的形状。如下图所示放置它，确保它保持选中状态，然后从“ 检查器”面板转到“ 样式”部分。将填充颜色更改为＃644032并禁用边框。

返回您的形状并双击以激活“ 编辑”模式。选择左上角的点并将其向下拖动8像素 ，然后选择左下角的点并将其删除。如第四个图像所示，这将使您的矩形变成三角形。

第4步

从工具栏或菜单转到插入>文本 （或按T ）。在画板上单击一次，然后在“ 检查器”面板中的“ 文本”部分上聚焦。

选择San Francisco Compact Display字体，将样式更改为Light ，将大小设置为30 ，将颜色设置为＃644032 ，然后只需键入“ Back”文本即可。如下图所示放置它。

第5步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建一个50像素的正方形。如下图所示放置它，将Radius滑块拖动到10 ，然后从“ 检查器”面板转到“ 样式”部分。将填充颜色更改为＃4DCA5D ，禁用边框，然后使用该垃圾箱按钮将其删除。

第6步

确保仍然选择了绿色的圆角正方形，并继续关注“ 检查器”面板中的“ 样式”部分。

单击该阴影部分以激活阴影效果。输入下图所示的数字，然后单击此效果的颜色。将颜色更改为＃46CC57并将Alpha降低为50 。

步骤7

转到“ 插入”>“文本” （ T ），添加“ 2”个文本并将其放置，如下图所示。

使用相同的San Francisco Compact Display字体，并将其样式更改为Semibold 。将大小设置为30 ，将颜色设置为白色，并将文本对齐方式设置为Center 。

步骤8

选择浅褐色的圆角正方形并复制它（ Command-C> Command-V ）。将副本拖到画板的右侧，然后将其放置，如下图所示。

步骤9

继续关注上一步中制作的圆角正方形。

从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。按住Shift键可轻松创建一个24像素的圆圈，如下所示放置它（ X：1204 Y：102 ）并确保其保持选中状态。禁用现有的“ 填充” ，将“ 边框”颜色更改为＃644032并将“ 宽度”设置为4 。

双击此新形状以激活“ 编辑”模式，选择底点并简单地将其删除。

第10步

确保仍选择上一步中制作的形状，然后按Command-Option-C复制其样式。

转到“ 插入”>“形状”>“椭圆形 （ O ）”，创建一个14 px的圆并将其放置如下所示（ X：1209 Y：88 ）。确保已选择此新形状，然后按Command-Option-V应用该复制的样式。

3.如何在食品订购应用程序UI中使用符号和嵌套符号

第1步

转到插入>文本 （ T ），添加“ Standard BBQ Angus”文本并将其放置，如下图所示。

使用Odudo Mono字体并将其样式更改为Bold 。将大小设置为60 ，颜色设置为＃644032 ，文本对齐方式设置为Left 。

第2步

转到“ 插入”>“文本” （ T ），添加“ SIZE”文本并将其放置，如下图所示。

使用San Francisco Mono字体，将其样式更改为Bold ，将大小设置为15并将颜色设置为＃BB986A 。

第三步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建一个92 x 50像素的形状。如下图所示放置它，并将焦点放在“ 检查器”面板上。将“ 半径”滑块拖动到10 ，将“ 填充颜色”更改为＃EDCA9C并禁用“ 边框” 。

第4步

按住Option键，只需拖动上一步中制作的圆角矩形即可添加副本。此外，您可以在按住Shift键的同时拖动副本以将其移动限制在一个方向（水平或垂直）上。将副本拖到右侧，并在两个形状之间留出10像素的间距。这是Smart Guides简化您工作的地方。

第5步

选择左侧的圆角矩形，然后从工具栏单击“ 创建符号”按钮，或在菜单中选择“ 图层”>“创建符号 ”。

将符号命名为“ Button.Inactive” ，选择“从左到右” 布局，然后单击“ 创建” 。这将创建一个独立于画板的主符号 。如果您更改了母版，则它还将显示在文档中该符号的任何实例中。 从左到右的布局将在以后帮助您创建智能布局。

第6步

选择另一个圆角矩形，然后从“ 检查器”面板中的“ 样式”部分集中。将填充颜色更改为白色并添加阴影。输入下图所示的数字，然后单击颜色。将颜色更改为＃644032并将Alpha降低为25 。

步骤7

确保仍选择白色的圆角矩形，然后从工具栏单击“ 创建符号”按钮，或在菜单中选择“ 图层”>“创建符号 ”。

将此新符号命名为“ Button.Active” ，选择“从左到右” 布局，然后单击“ 创建” 。

步骤8

转到插入>文本 （ T ），添加“小”文本并将其放置，如下图所示。

使用San Francisco Compact Display字体，并将其样式更改为Light 。将大小设置为20 ，将颜色设置为＃2A2A2A ，然后确保将文本对齐方式设置为Left 。

步骤9

选择该“小”文本以及位于背面的圆角矩形，然后单击“ 创建符号”按钮。

将此新符号命名为“按钮” ，选择从左到右的布局 ，然后单击创建。

第10步

右键单击您的白色圆角矩形，然后转到“ 替换为”> “按钮” ，以使用上一步中保存的“按钮”符号快速替换您的选择。确保它保持选中状态，并集中在“ 检查器”面板的“ 符号”部分。

让我们编辑这些替代以更改此符号实例的内容和外观，而不影响主实例或其他实例。在该输入框中输入“ MEDIUM” ，然后从下拉菜单中选择“ Button.Inactive” 。最后，您的符号实例应类似于第二个图像。

步骤11

转到“ 插入”>“文档”> “按钮”以添加“按钮”符号的新实例。如下图所示放置它，然后如下图所示编辑覆盖。

步骤12

选择“按钮”符号的三个实例，然后创建一个新符号。将其命名为“按钮” ，不要忘记从下拉菜单中选择“从左到右的布局 ”。

4.如何创建智能布局

第1步

转到“ 插入”>“文本” （ T ），添加“ BUN”文本并将其放置，如下图所示。

使用San Francisco Mono字体，将其样式更改为Bold ，将大小设置为15并将颜色设置为＃BB986A 。

第2步

转到“ 插入”>“文档”> “按钮”以添加“按钮”符号的新实例。如下图所示放置它，并如下图所示编辑那些覆盖。

第三步

转到“ 插入”>“文本” （ T ），添加“ TOPPINGS”文本并将其放置，如下图所示。

使用San Francisco Mono字体，将其样式更改为Bold ，将大小设置为15并将颜色设置为＃BB986A 。

第4步

转到“ 插入”>“文档”> “按钮”以添加“按钮”符号的新实例。如下图所示放置它，并如下图所示编辑那些覆盖。

第5步

添加一个新的“按钮”符号实例。如下图所示放置它，并如下图所示编辑那些覆盖。

第6步

添加一个新的“按钮”符号实例。如下图所示放置它，并如下图所示编辑那些覆盖。

现在，这就是“ 从左到右”布局选项将如何为您提供帮助。假设您决定从符号中删除按钮之一。您所要做的就是转到“ 替代”部分，找到要删除的按钮，然后从下拉菜单中选择“ 无符号 ”。这将立即删除不需要的按钮及其所覆盖的空间。将“ 布局”设置为“ 无”，而不是“ 从左到右”将删除该按钮，但保留其覆盖的空间为空。

5.如何在Food App设计中添加几个独立按钮

第1步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建一个50像素的正方形。如下图所示放置它，将Radius滑块拖动到10 ，然后从“ 检查器”面板转到“ 样式”部分。将填充颜色更改为＃EDCA9C并禁用边框。

第2步

继续关注上一步中制作的圆角正方形，并确保“ 矩形”工具仍处于活动状态。创建一个2 x 20 px的形状，并将其放置在第一个图像中。将其填充颜色设置为＃2A2A2A并禁用边框。

复制此细矩形（ Command-C> Command-V ）并选择副本。单击工具栏中的“ 旋转”按钮，然后将选择项旋转90度 ，如下图所示。

第三步

转到“ 插入”>“文档”> “按钮”以添加“按钮”符号的新实例。如下图所示放置它，然后如下图所示编辑覆盖。

第4步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建140 x 80 px的形状。如下图所示放置它，将Radius滑块拖动到10 ，然后从“ 检查器”面板转到“ 样式”部分。将填充颜色更改为白色，然后禁用边框。

第5步

转到“ 插入”>“文本” （ T ），添加“ $ 8.99”文本并将其放置，如下图所示。

使用San Francisco Compact Display字体并将其样式更改为Semibold 。将大小设置为30 ，将颜色设置为＃2A2A2A ，将文本对齐方式设置为Center 。

第6步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建100 x 80像素的形状。如下图所示放置它，将Radius滑块拖动到10 ，然后从“ 检查器”面板转到“ 样式”部分。将填充颜色更改为＃EDCA9C并禁用边框。

步骤7

转到“ 插入”>“文本” （ T ），添加“ 1”文本并将其放置，如下图所示。

使用San Francisco Compact Display字体并将其样式更改为Semibold 。将大小设置为30 ，将颜色设置为＃2A2A2A ，将文本对齐方式设置为Center 。

步骤8

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建两个14 x 2 px的形状。如下图所示放置这些细矩形，然后从“ 检查器”面板转到“ 样式”部分。将填充颜色更改为＃644032并禁用边框。

仅选择右矩形并复制它（ Command-C> Command-V ）。选择副本并将其旋转90度 ，如下图所示。

步骤9

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建一个220 x 80像素的形状。如下图所示放置它，将Radius滑块拖动到10 ，然后从“ 检查器”面板转到“ 样式”部分。将填充颜色更改为＃4DCA5D ，禁用边框，然后将其删除。

第10步

确保仍然选择了绿色的圆角矩形，并继续关注“ 检查器”面板中的“ 样式”部分。

激活现有的阴影，输入下图所示的数字，然后单击此效果的颜色。将颜色更改为＃46CC57并将Alpha降低为50 。

步骤11

转到“ 插入”>“文本” （ T ），添加“ ORDER”文本并将其放置，如下图所示。

使用相同的San Francisco Compact Display字体，并将其样式更改为Semibold 。将大小设置为30 ，将颜色设置为白色，并将文本对齐方式设置为Center 。

6.如何在食品应用程序设计中添加图像

第1步

专注于画板的顶部，选择该白色矩形，然后将其删除。

第2步

在此步骤中，您将需要带有奶酪和培根的汉堡图片。在Photoshop中将其打开，使用简单的图层蒙版裁剪该白色背景，然后将您的汉堡图像另存为PNG文件。

第三步

将汉堡图像拖动到Sketch文档中，将其缩小到955像素，然后将其放置，如下图所示。

7.如何在食品订购应用程序用户界面中添加简单的功能区

第1步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建170 x 80 px的形状。如下图所示放置它，将填充颜色更改为＃F93232并禁用边框。

第2步

双击您的红色矩形以激活编辑模式。如左图所示，将焦点对准左侧并单击一下即可添加新点。选择此新点，并将其向右拖动约20像素 ，如第二幅图像所示。

第三步

转到“ 插入”>“文本” （ T ），添加“ NEW”文本，如下所示放置并使用下图所示的文本属性。

您的食品订购应用程序用户界面已完成！

这是它的外观。我希望您喜欢这个以食物为灵感的应用程序教程，并且可以将这些技术应用到将来的项目中。请不要在评论部分分享您的最终结果。

随意调整最终餐厅菜单应用程序的设计，并自行制作。您可以在GraphicRiver上找到一些很棒的美食应用灵感，并提供有趣的解决方案来改善任何餐馆应用的用户界面。

想了解更多？

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-design-a-food-ordering-ipad-app-ui-in-sketch--cms-34555

ui sketch