ui sketch

在本素描教程中，您将学习如何设计汽车应用程序UI。

首先，您将学习如何创建任何汽车应用程序设计的起始组件。 您将学习

• 如何创建基本的导航栏，
• 如何保存和使用符号
• 如何在汽车应用程序中合并图像，图标和文本

所有这些小功能将简化整个iOS应用的工作。

• 使用基本的形状，路径和矢量形状构建技术，您将学习如何创建平面图标和按钮。
• 使用微妙的阴影技术和一些文字，您将学习如何使任何汽车应用程序设计脱颖而出。
• 最后，您将学习如何向此iOS应用添加股票图片。

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

您需要什么：

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

• 旧金山字体
• 橙色轿车的工作室照片在一个空白背景镜象中

1.如何设置画板

从工具栏或菜单转到插入>画板 （或按A ）， 检查器将显示画板模板的列表。 单击iPhone 11模板以创建414 x 896 px画板。 完成后，点击Escape取消选择画板。 现在，让我们开始在这个汽车应用程序上进行工作。

2.如何在汽车应用程序设计中添加导航栏

第1步

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

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

继续关注“ 检查器”面板，移至“ 样式”部分，只需禁用现有的Border即可 。

第2步

从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 按住Shift键可创建一个完美的12像素圆圈，确保其保持选中状态，然后将焦点放在“ 检查器”面板上。

使用X ＆ Y输入框将选择内容数字地移动到该灰色矩形的左侧，如下图所示。

继续关注“ 检查器”面板，然后移至“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃2C2E43 。

第三步

确保仍选中您的圈子，然后双击它以激活“ 编辑”模式。 选择底点并双击以将其变成直线，然后将其向下拖动4 px ，如第三幅图所示。

第4步

转到“ 插入”>“形状”>“椭圆” （ O ），创建一个完美的12 px圆并将其放置在第一张图片中。

选择此新形状以及背面的形状，然后从工具栏中单击“ 减去”按钮。

第5步

将焦点放在灰色矩形的右侧。 转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建一个12 x 2 px的形状。 使用X和Y输入框以数字方式定位此矩形，如下图所示。

确保此形状保持选中状态，并集中在“ 检查器”面板的“ 样式”部分。 禁用边框并将填充颜色更改为＃2C2E43 。

第6步

确保上一步中制作的小矩形仍处于选中状态。 按住Option键，只需拖动选定的形状即可复制它。 按住Shift键的同时拖动副本，以将其移动限制在一个方向（水平或垂直）上。 向下拖动副本，并在两个形状之间留出3 px的间隙。 对这个新添加的矩形重复相同的技术。

步骤7

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

选择San Francisco Compact Display字体，并确保将样式设置为Regular 。 将大小设置为20 ，颜色设置为＃2C2E43 ，将文本对齐方式更改为Center ，然后键入“ Available Car”文本。 如下图所示放置它。

3.如何在iOS应用中添加图像

第1步

在白色背景照片中下载橙色轿车的工作室照片。 将其拖到您的Sketch文档中，确保它保持选中状态，并集中在“ 检查器”面板上。 将宽度降低到350像素，然后使用X和Y输入框以数字方式定位照片，如下图所示。

随意用汽车线框，汽车草图或其他图像替换汽车图像，您可能会拥有。 如果您有兴趣学习如何绘制汽车草图，则可能对如何从头开始绘制汽车有所帮助。

第2步

从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个120 x 30 px的形状并将其放置，如下图所示（ X：148 Y：256 ）。

继续关注“ 检查器”面板，将“ 半径”滑块拖动到15 ，然后移至“ 样式”部分。 禁用现有的Border并使用该微小的垃圾桶图标将其删除，然后将Fill颜色更改为＃373737 。

第三步

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

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

第4步

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

使用San Francisco Compact Display字体并将其样式更改为Semibold 。 将大小设置为12 ，字符间距设置为1.2 ，颜色设置为白色（ #FFFFFF ），并确保文本对齐方式仍设置为Center 。

4.如何在汽车应用程序设计中添加上拉菜单框

第1步

转到“ 插入”>“形状”>“矩形 （ R ）”，创建一个414 x 555 px的形状并将其放置，如下图所示（ X：0 Y：341 ）。

将“ 半径”滑块拖动到45 ，然后移动到“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃99EB99 。

第2步

使用相同的工具，创建一个50 x 3 px的形状并将其放置，如下图所示（ X：182 Y：350 ）。

将“ 半径”滑块拖动到1.5 ，然后移到“ 样式”部分。 禁用现有的边框并将填充颜色更改为白色。

5.如何在汽车应用程序设计中保存和使用符号

第1步

使用相同的工具，创建120 x 50 px的形状并将其放置，如下图所示（ X：20 Y：391 ）。

将“ 半径”滑块拖动到25，然后移至“ 样式”部分。 禁用现有的边框并将填充颜色更改为白色。

第2步

使用相同的工具，创建188 x 51 px的形状并将其放置，如下图所示（ X：20 Y：391 ）。

将“ 半径”滑块拖动到25，然后移至“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃4CDC4C 。

第三步

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

使用San Francisco Compact Display字体，并将其样式更改为Light 。 将大小设置为18 ，将颜色设置为白色，并确保文本对齐方式仍设置为Center 。

第4步

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

使用San Francisco Compact Display字体并将其样式更改为Thin 。 将大小设置为14并将颜色设置为白色＃005000 ，然后将文本对齐方式切换为左 。

第5步

选择下图中突出显示的两个矩形和两个文本，然后从工具栏单击“ 创建符号”按钮，或在菜单中选择“ 图层”>“创建符号 ”。

将符号命名为“汽车信息” ，然后点击创建 。 这将创建一个独立于画板的主符号 。 如果您更改了母版，则它还将显示在文档中该符号的任何实例中。

第6步

转到视图>画布>显示所有参考线以启用智能参考线，这将使您更容易在Sketch中对齐形状。 按住Option键和Shift键，然后在符号实例内部单击，然后将一个副本拖到其下方。 在两个符号实例之间留出20 px的间距。 这是Smart Guides简化您工作的地方。

选择此新添加的符号实例，然后从“ 检查器”面板中的“ 符号”部分集中。 编辑这些覆盖将更改所选符号实例的内容和外观，而不会影响主实例或其他实例。 在顶部输入框中键入“ 87％” ，在第二个输入框中键入“充电状态” 。 最后，您的符号实例应类似于第二个图像。

步骤7

复制上一步中添加的符号实例。 如下所示放置副本，然后如下图所示编辑覆盖 。

步骤8

转到“ 插入”>“形状”>“矩形 （ R ）”。 创建一个414 x 1 px的形状并将其放置，如下图所示（ X：0 Y：600 ）。

从“ 检查器”面板移至“ 样式”部分，禁用现有的“ 边框” ，将“ 填充颜色”更改为白色，并将其“ 不透明度”降低至30％ 。

步骤9

转到“ 插入”>“形状”>“矩形 （ R ）”，创建374 x 50 px的形状并将其放置，如下图所示（ X：20 Y：621 ）。

将“ 半径”滑块拖动到25 ，然后移动到“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃24B424 。

第10步

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

单击该边框部分以重新激活边框。 确保将Width设置为1 ，将对齐方式更改为Outside ，然后单击该边框的颜色。 将颜色更改为白色，并将Alpha降低为30 。

步骤11

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

单击该阴影部分以激活阴影效果。 输入下图所示的数字，然后单击此效果的颜色。 将颜色更改为＃069606，并确保将Alpha设置为100 。

步骤12

转到“ 插入”>“形状”>“矩形 （ R ）”，创建一个100 x 40 px的形状并将其放置，如下图所示（ X：289 Y：626 ）。

将“ 半径”滑块拖动到25 ，然后移动到“ 样式”部分。 禁用现有的边框并将填充颜色更改为白色。

步骤13

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

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

步骤14

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

使用San Francisco Compact Display字体，并将其样式更改为Light 。 将大小设置为16 ，将颜色设置为＃005000 ，并确保文本对齐方式仍设置为Center 。

步骤15

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

使用San Francisco Compact Display字体并将其样式更改为Thin 。 将大小设置为14并将颜色设置为白色白色，然后将文本对齐方式切换为Left 。

步骤16

选择下图中突出显示的两个矩形和两个文本，然后从工具栏单击“ 创建符号”按钮，或在菜单中选择“ 图层”>“创建符号 ”。 将此新符号命名为“支付信息” ，然后点击创建 。

步骤17

复制上一步中添加的符号实例。 如下所示放置副本，然后如下图所示编辑覆盖 。

步骤18

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

使用San Francisco Compact Display字体，并将其样式更改为Light 。 将大小设置为12并将颜色设置为＃006E00 ，并确保文本对齐方式仍设置为Center 。

6.如何在您的汽车应用程序中添加两个简单的按钮

第1步

转到“ 插入”>“形状”>“矩形 （ R ）”，创建一个177 x 57 px的形状并将其放置，如下图所示（ X：20 Y：799 ）。

将“ 半径”滑块拖动到28.5 ，然后移动到“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃004C28 。

第2步

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

使用San Francisco Compact Display字体并将其样式更改为Semibold 。 将大小设置为20 ，将字符间距设置为2 ，将颜色设置为白色，并确保文本对齐方式仍设置为Center 。

第三步

复制那个深绿色的圆角矩形。 选择副本，如下图所示将其放置（ X：217 Y：799 ），然后将填充颜色更改为＃FAFF00 。

第4步

复制该“书”文本。 选择副本，将文本替换为“ UNLOCK” ，如下图所示放置它，并将颜色更改为＃004C28 。

7.如何添加小图标

第1步

转到“ 插入”>“形状”>“矩形 （ R ）”，创建一个11 x 8 px的形状并将其放置，如下图所示（ X：360 Y：826 ）。

将“ 半径”滑块拖动到2 ，然后移到“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃004C28 。

第2步

使用相同的工具，创建7 x 8 px的形状并将其放置，如下图所示（ X：362 Y：821 ）。

将“ 半径”滑块拖动到3 ，然后移到“ 样式”部分。 禁用现有的“ 填充”并将焦点放在“ 边框”上 。 将“ 宽度”设置为2 ，将文本对齐方式设置为“ 内部” ，然后将颜色更改为＃004C28 。

第三步

使用相同的工具，创建一个1 x 2 px的形状并将其放置，如下图所示（ X：365 Y：829 ）。

将“ 半径”滑块拖动到0.5 ，然后移到“ 样式”部分。 禁用现有的Border并将Fill color更改为＃FAFF00 。

您的汽车应用程序设计已完成！

这是它的外观。 我希望您喜欢这个iOS应用程序，并可以在未来的项目中应用这些技术。 请不要在评论部分分享您的最终结果。

随意调整最终的汽车应用程序，并自行制作。 您可以在GraphicRiver上找到一些很棒的汽车应用程序设计灵感，并提供有趣的解决方案来改善任何汽车应用程序设计。

想了解更多？

翻译自: https://webdesign.tutsplus.com/tutorials/sketch-design-car-app--cms-34616

ui sketch