ui sketch
在此Sketch应用程序教程中，您将学习如何创建资金管理移动用户界面设计。 看一下最终设计，看看我们将朝着什么方向努力。 也可以免费下载源文件。
我们将学到什么
首先，您将学习如何设置自定义画板以及如何使用标尺，参考线和智能参考线简化工作流程。 所有这些小功能将帮助您在此Sketch应用程序教程中更快地工作（虽然有更多的乐趣）。
接下来，使用简单的形状和路径，您将学习如何创建Sketch UI设计的主要部分。 接下来，您将学习如何样式化这些形状和路径以及如何创建三行图标。 最后，您将学习如何创建文本内容并将其添加到移动应用程序设计中。
Envato Elements上的UI素描套件
有关如何调整或改善最终Sketch UI设计的更多灵感，您可以通过单个Envato Elements订阅下载数以千计的资源。
综上所述，让我们进入教程吧！
1.如何设置画板
打开草图 。 从工具栏或菜单转到插入>画板 （或按A ）。 检查器将显示一个预设列表，但我们将创建一个自定义尺寸的artbaord。 在画布内单击并拖动以创建一个新的画板。
确保您的画板保持活动状态，并专注于右侧的Inspector 。 用数字将“ 宽度”设置为828 ，将“ 高度”设置为1792 。 完成后，点击Escape取消选择画板。
第2步
转到查看›画布›显示标尺 （或按Control-R ）以激活标尺 。 右键单击您的标尺，然后转到“ 显示所有指南”，因为我们将要添加一些新指南。
专注于垂直标尺，然后将光标移到垂直标尺内。 只需单击一下即可在94 px处添加水平参考线。 可以通过在标尺内单击并拖动指南来移动和重新放置指南。 继续关注垂直标尺，并使用相同的技术在244 px处添加第二个参考线，在274 px处添加第三个参考线。 现在已经准备就绪，您可以开始进行此移动应用程序设计的工作。
2.如何将顶部栏添加到您的Sketch UI设计
第1步
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 专注于画板上，创建828 x 150 px的形状并将其放置，如下图所示。 使用水平参考线完美对齐矩形。
确保其保持选中状态，然后转到“ 检查器”面板。 专注于“ 样式”部分，然后取消选中“ 边框”复选框以禁用应用于矩形的边框。
第2步
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个40 x 8像素的形状，确保其保持选中状态，然后转到“ 检查器”面板
首先，使用X和Y输入字段对形状进行数字定位。 将X位置设置为55 ，将Y位置设置为149 。 将“ 半径”滑块拖动到4 ，然后移到“ 样式”部分。 禁用边框 ，然后将填充颜色设置为＃5E72EF 。
第三步
选择上一步中制作的圆角矩形。 按住Shift和Option键，单击您的选择，然后简单地拖动即可创建副本。 如图所示，将副本拖到原始形状下方8像素处。 精明的指南将为您提供帮助。 重复此技术，并添加第二个矩形，如第二幅图像所示。
第4步
选择灰色矩形，将焦点放在“ 检查器”面板的“ 样式”部分，然后将“ 填充颜色”更改为白色（ ＃ffffff ）。
3.如何将水平滚动菜单添加到您的移动UI设计
第1步
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个180 x 72 px的形状，并将其准确放置，如下图所示。 当您的选择垂直于画板居中时，智能指南将通知您。 确保此新形状保持选中状态，并集中在“ 检查器”面板上。
将“ 半径”设置为10 ，禁用边框并将“ 填充颜色”设置为＃5E72EF 。
第2步
选择上一步中制作的形状，然后在同一位置添加一个副本（ Command-C> Command-Shift-V ）。 按住Shift键，将副本拖到左侧，并在形状之间留出20 px的间距。
确保仍然选择在此步骤中添加的副本，将焦点放在“ 检查器”面板中的“样式”部分，并将“ 不透明度”降低到5％ 。
第三步
选择上一步中制作的透明圆角矩形。 添加一个副本，将其拖动到左侧，并在副本和原始形状之间留出20 px的间隙，如第一张图片所示。
添加一个新副本，将其拖动到右侧，并在副本和蓝色圆角矩形的右边缘之间留出20 px的间隙，如第二幅图像所示。 添加最后一个副本，将其拖到右侧，然后在副本和左侧形状之间留出20 px的间隙，如第三幅图像所示。
4.如何将图表添加到草图UI设计
第1步
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个828 x 86 px的形状并将其放置，如下图所示。 确保它保持选中状态，并集中在“ 检查器”面板的“ 样式”部分。 禁用边框并将填充颜色设置为＃FFB800 。
第2步
确保仍然选择您的黄色矩形，然后转到“ 排列”>“制作网格” 。 输入下图所示的属性，然后单击“ 制作网格”按钮。 这将在一个完美的列中添加六个黄色矩形副本，并且它们之间没有间距。
专注于底部黄色矩形的左下角。 转到垂直标尺，并在1008添加新指南。
第三步
选择顶部的黄色矩形，然后从“ 检查器”面板中的“ 样式”部分集中。 将填充颜色更改为＃5E72EF并将不透明度降低到3％ 。
第4步
向下移动到下一个黄色矩形并选择它。 从“ 检查器”面板中的“ 样式”部分集中，然后将“ 填充颜色”更改为白色。
第5步
重新选择顶部矩形，然后单击Option-Command-C以复制所选内容的样式属性。 选择第二个图像中突出显示的两个矩形，然后按Option-Command-V粘贴样式属性。
第6步
选择其余的黄色矩形，将焦点放在“ 检查器”面板的“ 样式”部分，然后将“ 填充颜色”更改为白色。
步骤7
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个138 x 516像素的形状并将其放置，如下图所示。 确保此新矩形保持选中状态，然后转到“ 排列”>“制作网格” 。 输入下图所示的属性，然后单击“ 制作网格”按钮。
步骤8
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个14 x 167 px的形状，确保其保持选中状态，然后将焦点放在“ 检查器”面板上。 将“ 半径”设置为7，然后移至“ 样式”部分。 禁用边框并将填充颜色更改为＃5E72EF 。
步骤9
选择上一步中制作的形状，然后将其放置在第一张图像中。 使用智能向导将选择内容垂直居中放置在最左边的灰色矩形中，如下所示。
复制此细圆角矩形（ Command-C> Command -V ）。 选择副本，将其高度增加到234 px ，然后将其居中到下一个灰色矩形，如第二幅图像所示。
添加您的细圆角矩形的另一个副本（ Command-C> Command -V ）。 选择它并将其高度增加到约405 px 。 将“ 填充颜色”更改为白色，然后将所选内容居中放置在第三个灰色矩形中，如第三个图像所示。
继续，并为其余的灰色圆角矩形添加一个细圆角矩形，如第四幅图像所示。 不要忘记将这些形状完美居中。
第10步
选择第三个灰色矩形，然后使用底部手柄将形状拉伸到602像素 ，如第一幅图像所示。 确保其保持选中状态，然后移至“ 检查器”面板。 将“ 半径”设置为15并将“ 填充颜色”更改为＃5E72EF 。
步骤11
确保仍选择在上一步中编辑的圆角矩形，并将焦点放在“ 检查器”面板的“ 样式”部分。
单击阴影按钮可为您的形状添加微妙的阴影。 改变颜色为＃5E72EF和降低阿尔法 〜20，在Y框中输入在X框0和10中，然后将模糊至20和传播至5。 最后，情况应如下图所示。
步骤12
选择所有灰色矩形，然后从“ 检查器”面板中的“ 样式”部分集中。
禁用填充并启用边框 。 将边框颜色更改为＃5E72EF并将Alpha降低为10 ，确保边框与中心对齐并将Width设置为2 。
步骤13
继续关注在上一步中编辑的一组描边矩形。
选择最左侧的矩形，然后转到“ 图层”>“路径”>“剪刀” 。 只需单击一下即可删除所选形状的顶部和底部。 默认情况下，其余两个路径被分组。 只需单击工具栏上的“ 取消 组合”按钮即可将这两个路径取消组合 。
5.如何将统计按钮添加到您的移动UI设计
第1步
着重于垂直标尺并在1068添加新指南。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个618 x 136 px的形状并将其放置，如下图所示。 确保其居中，然后将焦点放在“ 检查器”面板上。 将“ 半径”设置为15 ，禁用边框并将“填充颜色”更改为＃5E72EF 。
第2步
添加一个圆角矩形的副本（ Command-C> Command-V ），使其与原始形状对齐，并在这两个形状之间留出30 px的间距。
添加此形状的第二个副本（ Command-C> Command-V ），使其与原始形状对齐，并在此新副本和第一个副本之间留出30像素的间距 。
第三步
继续关注三个圆角矩形。 选择中间的一个将其填充颜色更改为＃EF5E5E ，然后选择底部的一个并将填充颜色更改为＃5DD06C 。
放大绿色圆形矩形的左下角。 着重于垂直标尺，并在1536年添加新指南。
第4步
放大您的蓝色圆形矩形的右侧。 着重于水平尺并在685添加新的指南。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个60像素的正方形并将其放置，如下图所示。 拖动时按住Shift键可轻松创建完美的正方形。 确保它保持选中状态，并集中在“ 检查器”面板的“ 样式”部分。 禁用边框 ，将填充颜色更改为黑色（ ＃000000 ）并将其不透明度降低到30％ 。
第5步
复制该黑色正方形（ Commad-C> Command-V ），然后将副本放置在第一张图像中。 添加该黑色正方形的第二个副本，并将其放置在第二个图像中所示的位置。
第6步
让我们回到第一个黑色方块。 从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。
创建一个56像素的圆圈并将其放置，如下图所示。 拖动时按住Shift键可轻松创建一个完美的圆。 确保此新形状保持选中状态，并集中在“ 检查器”面板的“ 样式”部分。 禁用“ 填充”并专注于边框 。 将其颜色更改为白色，确保已选中“ 中心”按钮，并将“ 宽度”设置为4 。
专注于垂直标尺，并添加新的指南，该指南基本上可以将圆切成两半。
步骤7
从工具栏或菜单转到插入>矢量 （或按R ）。 使用三个简单的单击添加一个路径，如下图所示。 确保它保持选中状态，并集中在“ 检查器”面板的“ 样式”部分。
禁用“ 填充”并专注于边框 。 将颜色更改为白色，并将“ 宽度”设置为4 ，然后选中“ 圆帽”和“ 圆角连接”按钮。
步骤8
确保仍选择上一步中添加的路径，然后转到“ 图层”>“路径”>“旋转副本” 。 拖动该点手柄并将其放置在原始路径和副本之间2 px ，如下图所示，然后按Enter 。
步骤9
向下移动到下一个黑色正方形。 从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。
创建一个56 x 48像素的形状，将其填充为黄色，并将其放置在第一个图像中。 切换到Rectangle（R） ，创建56 x 8 px的形状，用橙色填充并将其放置在第二个图像中。
选择该工序中添加这两种形状，从工具栏单击按钮联盟 ，然后单击拼合按钮。
第10步
确保仍选择上一步中制作的形状，然后将焦点放在“ 检查器”面板的“ 样式”部分。 禁用“ 填充”并专注于边框 。 将颜色更改为白色，并将“ 宽度”设置为4 ，然后选中“ 圆帽”和“ 圆角连接”按钮。
步骤11
在上一步中继续关注路径，然后转到“ 图层”>“路径”>“剪刀” 。 使用简单的单击即可删除前三个图像中突出显示的四个侧面。 最后，您的路径应类似于第四个图像。 完成后，复制此路径的样式（ Option-Command-C ）。
步骤12
从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 创建一个56 x 48像素的形状，如下图所示放置它，然后简单地粘贴样式（ Option-Command-V ）。
步骤13
确保仍选择上一步中添加的椭圆形，然后转到“ 图层”>“路径”>“剪刀” 。 只需单击一下即可删除第一个图像中突出显示的一面。
步骤14
从工具栏或菜单转到插入>矢量 （或按V ）。 添加一个20像素的垂直路径，如下图所示放置它并粘贴样式（ Option-Command-V ）。
使用相同的工具，创建第二个图像中所示的路径。 选择它并粘贴样式（ Option-Command-V ）。
步骤15
从工具栏或菜单转到插入>文本 （或按T ）。 在画板上单击一次，然后在“ 检查器”面板中的“ 文本”部分上聚焦。 选择Baloo字体，将大小设置为30 ，颜色设置为白色，然后只需键入美元符号（$）。 如下图所示放置它。
步骤16
选择组成图标的所有形状（在第一个图像中突出显示）并复制它们（ Command-C ）。 移动到第三个黑色正方形，将其粘贴（ Command-V ）并将其放置，如第二个图像所示。
仅选择组成箭头的两条路径，然后从工具栏中单击“ 旋转”按钮。 如第三张图片所示，将箭头旋转180度 ，然后按Enter 。
步骤17
选择三个黑色正方形并删除它们。
6.如何将类别按钮添加到草图UI设计
第1步
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个132像素的正方形并将其放置，如下图所示。 确保它保持选中状态，并集中在“ 检查器”面板上。
将“ 半径”设置为15 ，然后转到“ 样式”部分。 禁用边框 ，将填充颜色更改为＃5E72EF并将其不透明度降低到70％ 。
着重于垂直标尺并在1566年添加新指南。
第2步
继续关注圆角正方形。 添加三个副本，使其与原始形状对齐，并在每个这些形状之间留出30像素的间距。
第三步
选择上一步中添加的圆角正方形，然后更改“ 填充颜色”，如下所示。
第4步
从“ 矢量图标集”中导入所需的四个图标。 调整它们的大小，将颜色更改为白色，然后如下图所示放置它们。 再次，智能指南将帮助您完美地将这些形状居中。
7.如何将文本添加到您的移动应用程序UI设计
第1步
我们将为大多数正文使用系统字体，并为标题使用非默认字体。
“系统字体将使您的应用程序设计与操作系统更加一致。 但是，仅使用系统字体会阻止您为您的应用获得独特的外观。” – 安德烈·朱利丁 （ Andrey Zhulidin）
专注于顶部菜单。 从工具栏或菜单转到插入>文本 （或按T ）。 单击您的画板，然后从“ 检查器”面板中的“ 文本”部分集中。 选择Odudo Mono字体 ，将样式设置为Bold ，将大小设置为40 。 将字符间距增加到10 ，并将颜色更改为＃5E72EF ，然后添加“ PORTFOLIO”文本。 选择它并将其放置，如下图所示。
第2步
向下移动到水平滚动菜单。 从工具栏或菜单转到插入>文本 （或按T ）。 单击您的画板，然后从“ 检查器”面板中的“ 文本”部分集中。
选择San Francisco Pro字体 ，将样式设置为Bold ，将大小设置为20 。 将字符间距增加到2 ，并将颜色更改为白色，然后添加“ OCT 2019”文本。 选择它并如下图所示放置它。
使用相同的文本属性，添加下图所示的其他四段文本。 唯一需要更改的是文本颜色，从白色到＃5E72EF 。
第三步
向下移动到图表的底部。 从工具栏或菜单转到插入>文本 （或按T ）。 单击您的画板，然后从“ 检查器”面板中的“ 文本”部分集中。
选择San Francisco Pro字体 ，将样式设置为Heavy ，将大小设置为30 。 确保将字符间距设置为“ 自动”并将颜色更改为＃CBD1FA ，然后添加“ 23”文本。 选择它并如下图所示放置它。
添加此文本的五个副本，将数字更改为“ 24” ， “ 25” ， “ 26” ， “ 27”和“ 28” ，然后如下图所示放置它们。
第4步
向下移至统计按钮。 首先，在143处添加垂直参考线，在1101处添加水平参考线。 从工具栏或菜单转到插入>文本 （或按T ）。 单击您的画板，然后从“ 检查器”面板中的“ 文本”部分集中。
选择Odudo Mono字体 ，将样式设置为Bold ，将大小设置为40 。 将颜色更改为白色，然后添加“ 16”文本。 选择它并如下图所示放置它。
取消选择此文本，然后重新选择“ 文本”工具。 单击您的画板，然后从“ 检查器”面板中的“ 文本”部分集中。
选择San Francisco Pro字体 ，将样式设置为Semibold ，将大小设置为20 。 确保颜色设置为白色，然后添加文本“ Transactions October 2019” 。 在1171年添加水平参考线，然后将新文本放置，如第二幅图像所示。
第5步
添加下图所示的水平参考线（ 1267和1337 ），然后复制在上一步中添加的文本。 编辑文本，然后如下所示放置它。
第6步
添加下图所示的水平参考线（ 1433和1503 ），然后复制在上一步中添加的文本。 编辑文本，如下所示放置文本，您的Sketch UI设计完成。
您的Sketch UI设计已完成！
这是它的外观。 我希望您喜欢这个Sketch应用程序教程，并可以将这些技术应用到将来的项目中。 请不要在评论部分分享您的最终结果。
随意调整最终的移动用户界面设计，并自行制作。 别忘了，您可以在Envato Elements上找到一些很棒的UI灵感来源，并提供有趣的解决方案来提高您的移动应用程序UI设计技能。
ui sketch
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
