iOS 设计课堂 | 如何设计与Apple Watch 匹配的 iOS App
UI设计
Daniel
著名网页设计师
5人收藏 2291次学习

iOS 设计课堂 | 如何设计与Apple Watch 匹配的 iOS App

原文地址:http://webdesign.tutsplus.com/tutorials/designing-an-ios-fitness-application-with-apple-watch-compatibility--cms-23613

在这篇教程中,我将教你如何设计一个简单易用的iOS健身App,它可以用来跟踪你的户外运动情况并分析,另外,我还将展示如何为Apple Watch界面设计这个App。

学完这篇教程后,你将能够用Sketch这个软件设计出一个自己想要的iOS应用程序,所以让我们开始吧!

设置Artboards

Sketch这个软件已经成为近年来为iOS系统设计App最为快捷和简单的方式了,所以我们用这个软件来教大家如何设计App。

Step 1

我们打开Sketch后,在插入选项中选择Artboard(A)。

Sketch Mirror

在右侧面板中,大家可以选择自己的 iPhone或iPad型号,在Sketch Mirror的帮助下我们可以随时从我们的手机上看到我们设计的App怎么样。

我们先从app Store上下载Sketch Mirror应用程序,下载完后打开它 (确保你的电脑和手机或iPad在相同的无线网络中或通过一个USB线连接)。

 

创建标签栏

如果你用的是iPhone 6或6 Plus,大多数用户无法用一只手按到左上角隐藏的导航按钮。所以我们把导航放在主屏幕的底部,这对用户来说更方便。

Step 1

我们在屏幕的底部创建一个100 px高的矩形。

现在我们把这矩形分成五个相同大小的矩形,后面我们将用它们放置导航图标。我建议你给每个矩形设置不同的颜色,这样可以个更清楚地分清每一个。

Step 2

我们要创建一个50 x50px正方形用来放置图标。下面我们可以在上面添加不同的标签,如:Activities、Challenges、Go、Friends、Profile。这些标签,我设置了Avenir Next Regular 24px字体大小和24 px行距。

Step 3

现在我们可以将图标放进这些小方块中。确保每个图标都是50 px高或50 px宽。比如在标签Profile上,我用椭圆工具Oval Tool(O)和填充面板(Fills panel)中的插入图片(image fill) 创建了一个50 x50px的圆并且插入了一张图片作为图标。

Step 4

点击左侧的眼睛图标隐藏底部的矩形。

我选择了白色作为标签栏的背景,透明度为70%。我还用Line tool(L)添加了一条线将标签栏与顶部分离。

 

设计开始(Go)界面

大多数的用户打开应用程序之前,他们已经开始要运动了。所以他们要做的第一件事就是用应用程序开始跟踪他们的训练。所以我们先设计开始(Go)界面。

出门运动前,我总是会查看以下天气,包括风强和日落时间。所以我在开始界面中设计了天气板块,这样用户不需要每次打开我们的健身App之前先查看天气App。

Step 1

首先打开File>New from template> iOS UI Design。

提示:我们要先用Scale tool将iOS UI设计模板默认的1 x分辨率改成我们需要的2 x分辨率。

Step 2

我选择了一个比较鲜艳的红色作为背景颜色,它可以吸引到用户的注意力。

对于GPS强度指标,我从右下角的颜色中使用两个形成了一个简单的梯度。我还在右侧放置了一个自行车图标,点击它可以方便地在骑单车、跑步和其他运动模式模式之间切换。

Step 3

现在,我们屏幕的顶部创建天气预报。因为大部分的运动通常不会超过3小时,所以我们将提供一个三小时的天气预报,包含风强和日落时间等额外信息。

Step 4

我绘制了一个54 px高度的矩形作为不同板块之间的分隔,并且给它填充了灰色。

Step 5

在运动开始之前,如果设置一个目标将更有激励作用,它可以是运动的路程、时间和平均速度等。我先创建了270 x270px 和230x230px的两个圆圈。

将第一个圆拖到第二个圆中间,我们点击“Subtract”删除中间的重合部分,创建出一个环形图案。

这个环的背景颜色我采用了一个线性渐变并设置透明度为20%,这将是未激活时这个环的状态。

在激活时,我们通过选择面板上的形状>右键>复制(或者⌘- c和⌘- v)来复制一个环累加到上面。

现在我们需要Vector tool(V)在我们的激活环上创建蒙版。

提示: 在使用矢量工具时按下Shift键可以创建完美的直线。

我们可以在激活环下移动这一层,然后把它设置为蒙版。

细节上,我们还可以在蒙版上添加两个额外的20 x20px的圆,这样环上的激活部分的边缘就是一个漂亮的弧形。

现在Go界面唯一缺少的就是Go的按钮了,我们把它设置成120 px高的矩形,并用鲜艳的红色填充。

 

创建活动(Activities)界面

在Activities界面上,我们可以快速浏览我们的朋友或自己的锻炼成果。点击后,我们还可以看到详细的数据。

Step 1

像之前一样,我们先从导航栏开始。在右侧增加一个 “+”图标,用来让用户手动添加锻炼情况。

Step 1

为了在朋友和自己的锻炼成果之间切换,我们需要创建一个二级导航栏。选择Rectangle tool (R),并创建一个90 px高的矩形,并用深蓝色填充。

再创建另一个22 x22px的正方形并旋转45度。

接下来,像之前做环一样操作。但是要确保你选择Subtract选项而不是Union。

Step 3

创建另一个高度为387 px的矩形,填充相同的深蓝色的背景,并使用Line tool来画出导航线。

Step 4

我们需要用Vector too(V)创建一个自定义形状来直观地看出运动程度。

Step 5

除了高度差异,我们也可以用不同的颜色来显示运动速度的变化。绿色意味着比平均速度快,而红色意味着更慢。

Step 6

用Sketch上的内容生成插件(Content Generator Sketch plugin),我们还可以添加不同的图片。

这样Activities界面就完成了。

用类似的方法,我们还可以创建其他的界面。

 

Apple Watch

为Apple Watch设计App也是类似的过程,我为这个App创建了四个不同手表界面。我做了一个可滑动的界面,用户可以根据自己的兴趣选择想要的界面。另外,绿色意味着用户几乎完成了运动目标,而红色意味着还需再接再厉。

恭喜你!

我们已经完成了iOS健身应用程序的设计。学完这篇教程后,我希望你在使用Sketch设计移动应用程序时更有信心。

如果这篇教程对你有帮助,那么请关注我哦,也欢迎随时与我的中国助手私聊。

更多内容尽在:http://1ke.co/

微信公众号:wow1KE

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部