ios apple语音性别
在本教程中，我将教您如何设计一个简单易用的iOS健身应用程序以跟踪户外跑步和骑自行车。 除了iOS应用程序之外，我还将为您提供Apple Watch界面的设计示例。
在本教程的最后，您将能够在Sketch中设计具有不同屏幕和视图的iOS应用程序。 我们将在Sketch中使用一些基本和中间技术，让我们开始吧！
教程资产
您将需要这些资产，以便进行以下操作：
- The Noun Project中的图标
- 从用户头像用户间的面Kong或内容生成素描插件
- Avenir Next字体，这是iOS和Mac OS X中的系统字体
快速免责声明
在开始之前，我应该指出，这个概念完全是理论上的。 对于真实项目，在将其转变为实际可用的移动应用程序之前，需要进行更深入的市场和用户行为分析。 我已经定期跑步和骑车四年了，所以我创建了这个概念，以从我的角度展示健身应用程序的外观。
设置画板
我们正在使用Sketch，这是最初为设计界面而创建的设计应用程序，如今是最快最简单的iOS设计方法。
第1步
打开草图后，让我们在“ 插入”菜单中选择“ 画板（A）”选项。
素描镜子
我建议在左侧面板上选择iPhone 6尺寸，但是如果您使用其他iPhone，则最好选择该尺寸。 这很重要，因为借助Sketch Mirror，我们可以在iOS设备上实时实时查看我们的工作，而无需导出或传输图像。 Sketch Mirror是设计工作流程的关键部分，因为它使我可以在几秒钟内看到并感觉到工作的最终结果。
要激活Sketch Mirror，您必须从App Store下载Sketch Mirror应用，然后单击Sketch中的Mirror图标（确保您的设备位于同一Wi-Fi网络或通过USB电缆连接）。
创建标签栏
自从iPhone 6和6 Plus推出以来，几乎不可能使用左上角的隐藏导航按钮，因为大多数用户将无法用一只手来接触它。 因此，我将主导航置于屏幕底部。 始终可见并且容易到达。
第1步
让我们在屏幕底部创建一个100 像素高的全宽度矩形。
现在，让我们划分这个矩形，以便有五个相等的矩形，以后可以在其中放置导航图标。 我建议您为每个矩形提供略有不同的颜色，以便清楚地看到每个矩形的边框。
第2步
让我们为图标创建另一个50x50px的正方形。 在下面，我们可以为不同屏幕添加标签：“活动”，“挑战”，“开始”，“朋友”和“个人资料”。 对于这些标签，我将Avenir Next Regular设置为24px字体大小和24px行高。
第三步
现在，我们可以将图标放入这些小方块中。 确保每个图标的高度均为50px或50px。 对于配置文件图标，让我们使用椭圆工具（O）创建一个50x50px的圆圈，然后在“ 填充”面板上选择图像 填充 。
第4步
通过单击图层旁边的小眼睛图标隐藏隐藏矩形。
对于标签栏的背景，我选择了全白#FFFFFF颜色，具有70％的不透明度和8px背景模糊。 我还使用“ 线”工具（L）在选项卡栏顶部添加了1px #B4B4B4线作为可视分隔符。
对于非活动的标签图标和标签，我建议使用灰色的#666666而不是简单的黑色，对于活动的部分，让我们将鲜艳的红色设置为#FF3B30 。
设计GO屏幕
我们的大多数用户会在准备运行或骑车之前打开应用程序，因此，他们要使用该应用程序做的第一件事就是开始跟踪其锻炼情况。 这就是为什么我们首先开始设计GO屏幕，允许用户立即开始培训的原因。
在进行任何户外活动之前，我总是提前检查天气，以了解我的期望值，包括风强度和日落时间。 我认为，如果您在户外，这些细节是必不可少的，因此我在GO屏幕上设计了一个内置天气部分。 这样，用户不必在每次打开健身应用程序之前都检查天气应用程序。
第1步
首先，我们需要Sketch iOS UI设计模板中的白色iOS状态和导航栏，您可以在File> New From Template> iOS UI Design下找到它。
提示：由于Sketch iOS UI设计模板为我们提供了1倍的资源，因此我们需要将其转换为2倍的分辨率。 使用“ 缩放”工具可以轻松完成此操作。
第2步
对于导航栏的背景颜色，我想选择一种生动逼真的颜色，以激发用户立即移动并采取行动。 因此，我选择了平坦但仍鲜艳的红色#FF3B30 ，意在第一次看到它时就引起您的注意。
对于GPS强度指示器，我在圆角矩形中使用了从#15FF00到#15FF00的简单渐变。
在另一侧，我放置了一个自行车图标，可以轻松地在跑步和骑车模式之间切换。
第三步
现在，让我们在屏幕顶部创建天气预报。 因为我们的大多数锻炼通常不会持续超过3个小时，所以我们将提供3个小时的预报以及有关风强度和日落时间的其他信息。 对于这种类型的信息，我建议使用#ACACAC类的浅灰色，因为我们不想过分强调天气预报。
第4步
作为界面不同种类部分之间的可视分隔符，让我们绘制一个高度为#ECECEC ，宽度为100％的#ECECEC矩形。
第5步
在锻炼开始之前，可能要激发目标。 这可以是距离，时间或新的平均速度记录的形式。 为了显示这些目标，让我们创建两个具有以下尺寸的圆： 270x270px和230x230px 。
放置圆圈之后，将第一个圆圈拖放到图层面板上的第二个圆圈中。 为了创建环形形状，请选择“减”选项。
对于此环的背景色，我们创建一个从#AAFFA9到#11FFBD的线性渐变，并将不透明度设置为20％。 这将是我们环的非活动状态。
对于活动部件，让我们通过在图层面板上选择形状>右键单击>复制来复制形状 （或者，也可以使用⌘-C和⌘-V进行复制）。
现在，我们将需要矢量工具（V）在活动圆上创建蒙版。
提示：在使用“ 矢量”工具的同时按下Shift键可帮助我们创建完美的直线。
让我们将该层移动到活动圆下，然后将其设置为蒙版层。 不要忘记关闭矢量形状的边框填充。
为了获得更好的细节，让我们在蒙版形状中添加两个额外的20x20px圆，以便在活动环的末端给我们一个圆滑的边缘。
专家提示：对于圆环中心的文本，让我们设置少量的内部阴影。
现在，我们的“转到”屏幕上唯一缺少的是“转到”按钮，它将是一个120px高的矩形，带有#FF3B30红色。
创建活动视图
在“活动”屏幕上，我们可以快速浏览朋友或我们自己的锻炼。 点击这些锻炼之一后，我们可以获得更详细的外观，包括一个交互式图表。
在此详细视图的底部，我们将显示所选锻炼的总体结果，而在顶部，您可以看到具体的结果，具体取决于我们触摸图形的位置（竖线表示为浅色）。
第1步
像以前一样，我们将从导航栏开始，添加一个额外的“加号”图标，以允许用户手动添加锻炼。
第2步
为了在朋友的锻炼和我们的锻炼之间进行切换，我们需要创建一个辅助导航栏。 让我们选择Rectangle工具（R）并创建一个90px高的矩形，并用深蓝色#1F2033颜色填充。
现在创建另一个22x22px的正方形并将其旋转45度。
我们可以像对目标环一样对这两层进行分组。 确保您使用的是Subtract选项而不是Union 。
提示：请注意，活动和不活动的辅助导航项目之间的不透明度都有细微的变化。
第三步
对于详细外观，我们将创建另一个具有相同深蓝色背景的矩形。 但是这次，高度将为387px。 有关指导原则，请使用“ 线”工具（L） 。
第4步
为了在锻炼过程中直观显示海拔差异，我们需要使用“ 矢量”工具（V）创建自定义形状。 没有用于创建此图的特定技术，因此让我们调整贝塞尔曲线，直到感觉正确为止。
第5步
除了水平差异外，我们还可以通过彩色曲线显示锻炼过程中的速度变化，其中红色和绿色区域表示步伐。
该方法与之前使用“ 矢量”工具和贝塞尔曲线的方法相同。 对于填充颜色，我将#FF3B30用作红色，将#22EA05用作绿色（绿色表示比平均速度快，红色表示较慢。）
第6步
借助Content Generator Sketch插件，我们可以轻松地将不同的个人资料图片添加到头像圈子中。
现在，我们也可以使用“活动”屏幕了！
设计挑战屏幕
在“挑战”屏幕上，我们可以看到我们参与的特定挑战。在此屏幕的设计过程中，我将受Apple Watch启发的圆形设计与卡片式设计结合在一起，以便用户可以根据其重要性重新排列挑战。
第1步
在设计完之前的屏幕之后，创建该屏幕会容易得多，因为我们已经设计了大部分屏幕。 首先，让我们创建一个新的画板（A） ，然后从“活动”屏幕中复制导航栏和辅助导航栏。
第2步
要创建卡片，我们需要一个355x400px的矩形。
第三步
作为背景色，我使用了简单的白色，但是为了在视觉上将卡片与背景分开，我添加了一点黑色阴影（ 不透明度为20％） 。
第4步
为了在整个应用程序中保持一致和一致，以相同的方式向用户显示相同类型的信息非常重要。 您可能还记得，我们已经设计了一个小环，用于在GO屏幕上指示目标，因此现在我们可以在此处使用相同的技术。
提示：如果您想从精美的UI渐变中获得更多灵感，建议您访问uigradients.com 。
第5步
最后一个仍缺少的元素是屏幕底部的标签栏，因此让我们从上一个屏幕中复制该元素，并确保我们修改了标签的活动状态。
创建浏览挑战部分
在“浏览挑战”屏幕上，我们可以快速滚动浏览最流行和最近的挑战，我们可以在其中看到完成特定挑战还有多少天，以及有多少成员参与其中。
第1步
与往常一样，我们可以从以前的屏幕中复制熟悉的设计元素，但不要忘记修改辅助导航栏。
第2步
让我们创建有关挑战的基本信息，并添加自定义徽章作为动机。 当有人完成挑战时，这将是奖励。
注意：在本教程中，我仅创建了一个简单的徽章，但是在一个现实世界的项目中，我将花费更多的时间来设计不同的，高度抛光的徽章。
提示：请注意文本大小和颜色上的细微差异，有助于我们创建清晰的层次结构。
第三步
为了直观地显示剩余时间，我们创建一个时间线。 此栏将具有40px的圆角和#F5F5F5背景色。
第4步
对于此栏的活动部分，让我们复制之前的矩形，使其更短一些，并设置从#44FF30到#FFDA30的线性渐变。
第5步
复制完此部分并从上一屏幕复制了标签栏后，我们就可以使用“浏览挑战”部分了！
还有一件事：Apple Watch
最后但并非最不重要的一点是，我为应用程序创建了Apple Watch界面。 此设计概念基于Apple Watch人机界面指南 。 Apple为开发人员和设计人员提供了这些准则，以使他们对这个新平台的可能性有更好的了解。
我为健身应用程序创建了四个不同的手表界面。 在第一个概念的情况下，我制作了一个高度可定制的屏幕，您可以在其中根据自己的兴趣重新排列信息。 此外，最重要（最大）数据的颜色始终在变化，具体取决于您离初始目标有多远。 在这种情况下，绿色表示您几乎完成了距离目标。
恭喜你！
我们已经完成了iOS Fitness应用程序设计。 遵循了本教程，我希望您对使用Sketch进行移动应用程序设计更有信心。
随时下载完整的Sketch文件 ，以更详细地了解我们使用的设计技术。 我很想知道您是如何找到该过程的，所以请不要在评论中留下反馈和问题。
ios apple语音性别
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
