ui sketch_如何在Sketch中设计Fitness App UI

ui sketch

在本素描教程中，您将学习如何设计健身应用仪表板。

首先，您将学习如何为iOS创建应用仪表板的启动组件。 您将学习：

• 如何创建基本的导航栏
• 如何保存和使用符号
• 以及如何创建智能布局

所有这些小功能将在整个免费健身应用程序模型教程中简化您的工作。

• 接下来，使用简单的形状，路径和矢量形状构建技术，您将学习如何在Fitness App仪表板内部创建和导入图标。
• 使用微妙的阴影技术，符号或嵌套符号以及一些文本，您将学习如何为健身应用程序设计模板添加颜色和振动。
• 最后，您将学习如何轻松地复制对象以及如何创建底部导航菜单。

有关如何调整或改善最终健身UI套件的更多启发，您可以在GraphicRiver中找到大量资源。

免费素描教程

如果您想从头开始学习素描，请尝试我们的免费素描教程 。 您将通过19个易于遵循的视频学习该功能强大的软件的各个方面。

否则，请继续阅读以获取有关在Sketch中设计健身应用程序UI的说明。

您将需要什么

您将需要以下资源才能完成此健身应用程序的仪表板。 这些大多数都可以从Envato Elements中获得，在Envato Elements中，一次订阅即可无限下载。 如果您愿意，也可以找到其他替代方法：

• 旧金山字体
• 14火焰图标包
• 健身标志符号颜色图标集
• 20体育图标（实心）集

1.如何设置画板

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

2.如何在Fitness App设计模板中添加导航栏

第1步

从工具栏或菜单转到插入>形状>矩形 （或按R ）。 单击并拖动以创建414 x 70 px的形状，如下图所示放置它，并确保它保持选中状态。

转到“ 检查器”面板，然后将焦点放在“ 样式”部分。 取消选中“ 边框”复选框以禁用应用于矩形的边框，并保留默认的“ 填充颜色”。

第2步

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

使用X和Y输入框以数字方式放置此新形状。 在Y框中输入在X框35和64以及的形状应该移动到灰色的矩形的左侧，如图所示，下面的图所示。

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

第三步

从工具栏或菜单转到插入>矢量 （或按V ）。 使用三个简单的单击即可创建下图所示的箭头形状。 如下所示放置它，并确保它保持选中状态。

从“ 检查器”面板转到“ 样式”部分，禁用现有的“ 填充”并将“ 边框”颜色更改为＃4B4B87 。

第4步

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

选择San Francisco Compact Rounded字体，将样式更改为Bold ，将大小设置为24 ，将颜色设置为＃4B4B87 ，然后只需键入“ STATS”文本即可。 如下图所示放置它。

3.如何在Fitness App设计模板中添加水平菜单

第1步

转到查看>画布>显示标尺 （或按Command-R ）以激活标尺 。 右键单击您的标尺，然后转到“ 显示所有指南”，因为我们将要添加一些新指南。

专注于水平标尺，然后在其中移动光标。 将光标移至20像素 ，只需单击即可添加新指南。 可以通过在标尺内单击并拖动指南来移动和重新放置指南。 继续关注水平标尺，并使用相同的技术在394处添加第二条指南。 现在已经有了指南，您可以在健身信息中心模板上继续进行工作。

第2步

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

首先，使用X和Y输入框以数字方式放置此新矩形。 在Y框中输入在X盒20和139的形状应该移动到画板上侧，如下面的图所示。

继续关注“ 检查器”面板，将“ 半径”滑块拖动到20 ，然后移至“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃F5F5FF 。

第三步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建一个122 x 36像素的形状。 如下图所示放置它，确保它保持选中状态，并集中在“ 检查器”面板上

将“ 半径”滑块拖动到18 ，然后移动到“ 样式”部分。 将填充颜色更改为＃4B4B87，然后使用“ 垃圾箱”按钮删除现有的边框 。

第4步

确保上一步中制作的圆角矩形仍处于选中状态，并集中在“ 检查器”面板的“ 样式”部分。

单击阴影按钮可添加阴影以供选择。 输入下图所示的数字，然后单击颜色。 将颜色更改为＃4B4B87 ，然后将Alpha降低至80 。

第5步

转到“ 插入”>“文本” （ T ），添加“日”文本并将其放置，如下图所示。 使用San Francisco Compact Rounded字体并将样式更改为Semibold 。 将大小设置为16 ，颜色设置为白色（ #FFFFFF ），并且不要忘记将Alignment更改为Center 。

第6步

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

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

步骤7

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建一个新的122 x 36 px形状。 如下图所示，在Smart Guides的帮助下放置它。 确保它保持选中状态，并集中在“ 检查器”面板上

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

步骤8

转到插入>文本 （ T ），添加“周”文本并将其放置，如下图所示。 使用San Francisco Compact Rounded字体并将样式更改为Semibold 。 将大小设置为16 ，将“ 对齐方式”设置为Center ，然后单击颜色。 将颜色设置为＃4B4B87并将Alpha降低至50 。

步骤9

选择下图所示的圆角矩形和一段文本，然后创建一个新符号（从工具栏或菜单中的图层>创建符号中创建符号按钮）。 将此新符号命名为“ Button.Inactive” ，选择“从左到右” 布局 ，然后单击“ 确定” 。

第10步

确保上一步中制作的符号仍处于选中状态。 按住Option键，只需拖动选定的符号即可将其复制。 要将副本的移动方向限制为一个方向，请在拖动时按住Shift键。 将此副本拖到右侧，直到Smart Guides向您显示副本和原始符号之间有2 px的间距。

选择此副本，然后将焦点放在“ 检查器”面板中的“ 符号”部分。 在“ 替代”框中，只需输入“月”即可更改符号副本中的文本。

步骤11

选择三个符号以及位于背面的圆角矩形，并将其另存为新符号。 将其命名为“ Horizo​​ntalMenu” ，不要忘记选择“ 从左到右”布局 。

现在，这是从左到右布局简化您工作的地方。 假设您决定删除其中一个按钮。 您所要做的就是选择它，从“ 检查器”面板转到“ 符号”部分，然后从“ 替代”菜单中选择“ 无符号 ”。 这将立即删除不需要的按钮及其所覆盖的空间。 将“ 布局”设置为“ 无”，而不是“ 从左到右”将删除该按钮，但保留其覆盖的空间为空。

步骤12

使用相同的“ 替代”菜单，您可以轻松更改按钮的外观。 这些是非常基本的更改，但是您将在以下步骤中学习更强大的技术。

4.如何为Fitness App仪表板创建符号

第1步

转到“ 插入”>“形状”>“矩形 （ R ）”，创建一个30像素的正方形并将其放置在画板底部的某个位置。 确保已选中它，然后转到排列>生成网格 。 输入下图所示的属性，然后单击“ 制作网格”按钮。 如第二张图片所示，这将在均匀分布的行中添加五个正方形的副本。

第2步

专注于最左边的灰色方块。 转到“ 插入”>“形状”>“椭圆” （ O ）并创建一个28像素的圆圈。 用白色填充它，然后将其放置在第一个图像中。 创建一个34像素的圆圈，将其填充为白色，然后将其放置在第二个图像中。

选择在此步骤中制作的两个圆，然后从工具栏中单击“ 减”按钮。

第三步

确保仍选择上一步中制作的形状，然后从“ 检查器”面板转到“ 样式”部分。 确保将“ 填充颜色”设置为白色，然后将其聚焦在“ 边框”上 。 将颜色更改为白色，将“ 对齐方式”设置为“ 居中” ，将“ 宽度”设置为2 ，不要忘了选中“ 圆形连接”按钮。

第4步

转到“ 插入”>“文本” （ T ），添加“ Z”文本并将其放置在第一张图像中。 使用San Francisco Compact Rounded字体并将样式更改为Semibold 。 将大小设置为16 ，颜色设置为白色（ #FFFFFF ）。

复制这段文本（ Command-C> Command-V ）。 选择此副本并将字体大小减小到12 ，然后将其放置在第二个图像中。

选择在此步骤中添加的两条文本，然后转到“ 图层”>“转换为轮廓”将文本转换为可编辑的矢量路径。

第5步

从这14个Flame图标包中导入Flame图标，并从此Fitness Glyph Color Icon Set中导入其他四个图标。 将其颜色更改为白色，并调整其大小以适合灰色方块，如下图所示。 确保这些图标的宽度和高度均不超过30像素 。

第6步

为了使您更容易理解下一步，我们来更改画板的颜色。 单击画板的名称以快速选择它，将其聚焦在“ 检查器”面板上，并将背景颜色更改为黑色（ ＃000000 ）。

步骤7

专注于最左边的灰色方块。 选择它，将焦点放在“ 检查器”面板上，并禁用“ 填充”以基本上使所选形状不可见。

选择此不可见的形状及其上方的图标，创建一个新符号，并将其命名为“ Sleep” 。

步骤8

移动到下一个灰色正方形，使其不可见。 选择它以及它上方的图标，创建一个新符号，并将其命名为“ Hear Rate” 。

继续其他四个图标，并使用相同的技术来创建“能量消耗” ， “步骤” ， “运行”和“循环”符号。

5.如何为健身应用程序设计模板创建复杂的符号

第1步

将画板的颜色更改回白色。 转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建177 x 180 px的形状。 如下图所示放置它，确保它保持选中状态，并集中在“ 检查器”面板上

将“ 半径”滑块拖动到20 ，然后移至“ 样式”部分。 将填充颜色更改为＃FF6967并使用“ 垃圾箱”按钮删除现有的边框 。

第2步

确保红色圆形矩形保持选中状态，从“ 检查器”面板中的“ 样式”部分集中，然后激活“ 阴影” 。 输入下图所示的数字，然后单击颜色。 将颜色更改为＃FF6863 ，然后将Alpha降低至80 。

第三步

添加一个红色圆角矩形的副本，并将其放置在第一张图片中。 选择此副本，然后将焦点放在“ 检查器”面板中的“ 样式”部分。 将“ 填充”颜色更改为＃7954FF ，对“ 阴影”使用相同的颜色并将Alpha保持在80 。

将这个新的圆角矩形变成一个符号，并将其命名为“ purple” 。

第4步

添加另外两个红色圆角矩形副本，并将它们放置如下图所示。 选择左侧的副本，将“ 填充”颜色更改为＃FF8E61 ，对“ 阴影”使用相同的颜色并将Alpha保持在80 。 将此圆角矩形变成一个符号，并将其命名为“ orange” 。

选择正确的副本，将“ 填充”颜色更改为＃2AC2FF ，对“ 阴影”使用相同的颜色，并将Alpha保持在80 。 将这个新的圆角矩形变成一个符号，并将其命名为“ blue” 。

第5步

添加另外两个红色圆角矩形副本，并将它们放置如下图所示。 选择左侧的副本，将“ 填充”颜色更改为＃5964FF ，对“ 阴影”使用相同的颜色，并将Alpha保持在80 。 将这个圆角矩形变成一个符号，并将其命名为“ indigo” 。

选择正确的副本，将“ 填充”颜色更改为＃95DA45 ，对“ 阴影”使用相同的颜色并将Alpha保持在80 。 将这个新的圆角矩形变成一个符号，并将其命名为“ green” 。

第6步

选择红色的圆角矩形，将其变成一个符号，并将其命名为“ red” 。

步骤7

将焦点放在红色圆角矩形的右上角。 转到“ 插入”>“形状”>“矩形 （ R ）”，创建一个70像素的正方形并将其放置在第一张图像中。 保留默认的填充颜色，但禁用边框。

双击该新形状以激活矢量编辑模式。 选择右上角的点，转到“ 检查器”面板，然后将“ 半径”滑块拖动到20 。 选择其他三个点，返回到“ 检查器”面板，这次将“ 半径”滑块拖动到35 。

步骤8

确保仍选择上一步中制作的形状，然后将焦点放在“ 检查器”面板的“ 样式”部分。 将填充颜色更改为白色，将不透明度降低至40％ ，并将混合模式更改为柔光 。

步骤9

转到“ 插入”>“文档”>“心率”，然后将您的符号实例放置如下图所示。 再次， 智能指南将派上用场。

第10步

转到“ 插入”>“形状”>“矩形 （ R ）”，然后创建137 x 140像素的形状。 如下图所示放置它，并确保它保持选中状态。

在“ 检查器”面板上，集中在“ 样式”部分。 禁用边框 ，将填充颜色更改为黑色，并将其不透明度降低到大约30％ 。 这种形状不会成为最终设计的一部分，在以下步骤中，仅需要一些形状即可使文本完美对齐。

步骤11

转到“ 插入”>“文本” （ T ），添加“心率”文本并将其放置在第一张图像中。 使用San Francisco Compact Rounded字体并将样式更改为Light 。 将大小设置为16并将颜色设置为白色，并且不要忘记将文本对齐方式更改为Left 。

添加“ 124 bpm”文本并将其放置在第二个图像中所示的位置。 使用相同的字体并将样式更改为Semibold 。 选择“ 124”部分并将字体大小设置为30 ，然后选择“ bpm”部分并将字体大小设置为20 。

添加“健康”和“ 80-120”文本，然后将它们放置在最后两个图像中所示的位置。 使用相同的字体，但将样式更改为Light ，并将文本对齐方式更改为Right 。

步骤12

现在，您不再需要黑色矩形，将其选中并删除。

选择红色的圆角矩形以及位于其上方的所有对象，将其变为新符号，并将其命名为“ BOX” 。

步骤13

右键单击您的紫色圆形矩形，然后转到替换为>框 。 这基本上将您的选择替换为上一步中保存的“ BOX”符号。

确保您的选择保持活动状态，然后从“ 检查器”面板转到“ 样式”部分。 在这里，您应该找到六个可能的替代。 让我们从底部开始。 打开红色覆盖，并用紫色符号代替。 这将立即用紫色背景替换红色背景。 向上移动下一个优先选项，并将“心率”图标替换为“睡眠”图标。 最后，移至其他四个替代并将下一个文本替换为现有文本。

使用相同的技术来编辑其余的彩色框，如下图所示。

6.如何在健身仪表板模板中添加底部导航栏

第1步

转到“ 插入”>“形状”>“矩形 （ R ）”。 创建一个414 x 97 px的形状，如下图所示放置它，并禁用Border 。

第2步

转到“ 插入”>“形状”>“矩形 （ R ）”，创建一个28像素的正方形并将其放置，如下图所示。 确保已选中它，然后转到排列>生成网格 。 输入下图所示的属性，然后单击“ 制作网格”按钮。

第三步

从这20个运动图标（实心）集中导入四个图标。 将其颜色更改为＃A5A5C3和＃4B4B87 ，并调整其大小以适合白色正方形，如下图所示。 完成后，删除白色方块。

第4步

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

第5步

最后，删除这两个灰色矩形，iOS的应用程序仪表板已完成。 这是健身UI套件的良好起点。 随意创建自己的资产和页面。

您的Fitness App仪表板已完成！

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

随意调整最终的健身仪表板模板，并自行制作。 您可以在GraphicRiver上找到一些很好的灵感来源，并提供有趣的解决方案来改善您的健身UI套件。

想了解更多？

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-design-a-fitness-app-ui-in-sketch--cms-34500

ui sketch