sketch放入app组件
在本教程中，我们将逐步设计移动应用程序的入门过程。 具体来说，我们将在Sketch中设计一个财务应用程序登录屏幕。
我们需要的东西
要遵循，您需要：
- 带有专业感和现代感的纯色字体对。 这是财务申请的入职流程，因此我们需要值得信赖的要素。 为此可以选择一些好的字体：Aeonik，Proxima Nova，Roboto或Maison Neue。 使用本地Apple字体，旧金山始终是一个安全的选择。
- 由于我们将在此界面中使用的图标数量最少（我们仅使用检查图标和汉堡包图标），因此此处使用的图标包没有太大区别，因为几乎所有图标包都包含这些图标。 由于其简单性，它们也可以很容易地从头开始设计。
- 我们在登机屏幕上设计这些工具的首选工具是Sketch，但在Adobe XD或Figma中进行后续操作不会有太大不同。
1.设置工作区
首先创建画板。 您可以在应用程序内部使用这些预设。 单击A，我们将访问允许您创建画板的面板，从而为我们提供了可以使用的各种画布尺寸。
2.添加最重要的元素
为了简化我们的项目的工作，我建议您创建一个小的样式指南，并设置最重要的元素，例如颜色，按钮，文本样式和其他基本元素。
不要太着急，并尽量减少基本要素。 通过在Sketch中创建符号（“ 图层”>“创建符号” ），您将在“ 组件”选项卡下侧边栏的左侧找到准备好的所有内容。
为了演示，让我们创建一个常用按钮，我们将经常在入门屏幕中使用它。
第1步
添加一个矩形，将其作为按钮的基础。 转到“ 插入”>“形状”>“矩形”或单击“ R” 。 绘制一个合适大小的矩形，然后修改形状的半径（圆角）。
第2步
转到“ 插入”>“文本”，或单击“ T”字符并添加必要的文本。 我们将在按钮内添加“下一步”文本字符串，然后选择正确的字体，大小和样式。
第三步
最后，单击CMD / CTRL并选择文本和矩形。 通过使用“ 创建符号”按钮，我们将创建一个可在整个页面中重复使用的组件，从而无需更改样式即可更改其宽度，高度或其中的文本。 学习如何使用组件的不同交互状态时， 本教程应该会有所帮助。
3.设置您的现场样式
设置字段样式将从创建白色矩形和边框颜色开始，以使字段从背景中脱颖而出。 为了保持一致性并保持设计中的图案，请使场高等于按钮。 拐角的半径也一样。
我们将继续为该字段设置文本样式，并通过添加标签来完成该样式。 用户确定字段类型和预期输入的一种方法。 在场上添加微妙的阴影效果有时也是一种不错的视觉效果。
4.构建价格范围栏
我们将从充当该范围栏基础的矩形开始。 它必须比背景稍暗，以使其既可见又微妙，并且不会因太亮而打扰眼睛。
重要的是给它的拐角处最大半径-范围滑块通常有一个不错的圆角端。 我们将向其添加褪色以代表所选范围。 我们将在界面上使用亮绿色，因此，在这里我们使用了该绿色的褪色版本。
下一步是添加两个小圆圈，以定义所选范围。
下一步是在标签中添加定义范围条类型和圆圈下方的数量的标签，以使我们对所选范围数量更加清楚。
5.添加徽标
在此阶段，我们将为我们的应用程序添加徽标。 出于本教程的目的，我快速创建了一个模拟徽标，我认为这是用于说明目的的不错选择。
在SVG中使用徽标始终是一个好主意，因为它可以根据您的大小需要进行自定义。 将徽标添加到符号列表中，以便以后需要时可以使用它。
到目前为止，我们有：
6.导航和样式
导航必须简单，干净且直观。 我们已经包含徽标用于品牌宣传，因此让我们在其左侧添加一个汉堡菜单图标以触发滑出式导航面板。
确保为该导航定义图标提供一种颜色，使其从背景中脱颖而出，并且其大小与徽标成正比。 我们希望让它易于访问和观察，但又不要太麻烦。
7.版式
下一步是设置将在我们的应用程序中显示的字体大小。 文字必须突出且易于阅读，但不能太大或太过分。 我们将使用预定义的颜色，并在段落中使用30px和16px的标题。
这些概述的大小似乎是正确的，以便在画布大小，标题和段落大小以及可见性之间保持良好的比例。
8.添加头像
我们将创建一个适当大小的圆形并将其转换为蒙版。 将所选的头像图像导入或拖放到“素描”，并将其放置在圆形上方。
为了使圆上的蒙版不会抓住其下面的其他图层，请为圆和导入的头像图像创建一个单独的组。
9.底层步骤
对于显示总体进度的UI下部，我们将创建一个具有白色背景色的矩形，并且像顶部一样，为它提供一个1-2px边框的分隔线。 这将是显示入职进度的底部的基础。
然后，我们将创建一个圆圈以指示状态。 为此，我们将创建一个绿色的圆（这是我们的活动/对比色），具有较低的不透明度（淡入淡出）。 这是因为我们然后将复制该圆圈并为其提供100％的透明度。 这将与背景中的圆圈产生令人赏心悦目的对比效果。 通过在圆上添加一个附加的矢量点（使用“ V”热键），然后使用剪刀工具，我们将根据下图选择需要切除的部分。
最后，为了使所有角都圆角，我们将选择Border Settings ，然后选择Rounded Ends 。
到目前为止，我们有：
9.所选字段
值得一提的是，入职屏幕上可见的大多数UI元素都是重复的且彼此相似。 这就是为什么由于现有已建立的样式而易于创建下一页的原因。
我们已经为各个领域设置了样式和大小。 选中的单选按钮还将以2px轮廓的形式通过字段上的轮廓突出显示其选定的状态，该轮廓具有与我们在其他UI元素上使用的相同的重音（活动）绿色。
该页面上的下拉菜单再次使用相同的字段表单样式，但脱字号/箭头图标除外，它提供了视觉提示，用户可以选择其他选项。
到目前为止的结果：
10.最后的触摸
入职流程的最后一页将需要插图，一段文字，一个指示分页的用户界面元素和一个按钮。 我们将使用按钮的现有样式。 我们还将使用一种已建立的文本样式，在导航中，我们将使用三个小形状来表示内容可以左右滑动的事实。
对于插图，我们将使用从Envato Elements中获取的插图。 特定插图的重要性并不在于存在一个抽象视觉元素来丰富UI的存在这一事实。
某些选择可能是：
这是完整的UI设计！
那就是民间！
这样就结束了我们的教程，该教程介绍了如何在Sketch中设计财务入门应用程序。 我们希望您觉得它有用，如果有任何疑问，请随时在下面的评论部分中告诉我们！
通过Tuts +课程学习素描
sketch放入app组件
扫一扫
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
