Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Designing

在Adobe Illustrator中为iOS创建天气APP设计

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Vector Mobile App Design.
Create a Tic Tac Toe Mobile App Icon in Adobe Illustrator
Quick Tip: How to Create iOS Map Indicators With Graphic Styles

Chinese (Simplified) (中文(简体)) translation by Yushine (you can also view the original English article)

此设计与我们的合作伙伴网站 Mobiletuts + 结合使用。 Bart Jacobs,能力成熟的开发人员,已经采用了这个UI,并创建了运行的 APP,对你来讲最好的的就是跟随教程来学习如何创建自己的!你可以在这里找到他的系列:第1部分第2部分第3部分

在本教程中,我想向你展示如何为天气 APP 创建一个显示屏下的用户界面。我们将使用多个画板和排版来创建一个非常小的界面。

在这里下载字体资源:

当为 APP 或出于任何原因使用字体时,请务必查看许可协议。因为这只是一个教程,APP本身不会出售,我们可以使用上述的字体。但是,如果你打算创建自己的并希望获得商业许可,请按照字体设计师的说明进行操作。 但是,如果你打算创建自己的并希望获得商业许可,请按照字体设计师的说明进行操作。


1.设置文件

我们将在 APP 的不同视图中使用多个画板,一旦我们从开发人员的帮助中决定了这一点,我们可以继续创建我们的文档。

步骤 1

开始前,我们需要创建一个移动设备大小的文档。由于我们在iOS平台上工作,所以我们将为iPhone 5 设计一款屏幕尺寸比 iPhone 以前更高的屏幕尺寸。 我发现用更大的尺寸,很容易缩小到其他设备。由于所有设计都是如此之小,所以稍后移除空间将比较容易,而不是尝试放大。为此,我们的文档将是640 x 1136 pts(而不是像素)。

在与开发人员进行头脑风暴的同时,决定将会有一个主屏幕向左或向右滑动以显示更多信息。考虑到这一点,我们也将在此时设置多个画板。一个将出现的每个窗口。请仔细查看屏幕截图。

chris-weather-1-1

步骤 2

创建文档后,我们需要调整颜色配置文件。因此,请转到 编辑 > 指定配置文件,并确保不对此文档进行颜色管理。 当 XCode 准备你的资源与 APP 捆绑时,它将完全剥离与资源相关联的任何颜色配置文件。 因此,最好从文档中删除任何的颜色配置文件,并定期在移动屏幕上测试你的设计,以确保正确的颜色输出。

chris-weather-1-2

2.创建背景

步骤1

我们的背景相当简单。因为我们正在或多或少使用扁平化设计,我们将使用纯色和混合来实现我们的效果。

我们将使用中间的画板来代表我们的 APP 的主页。左边的一个将是当你选中这个位置时会发生什么。当你选中日期时,会出现右边的一个。首先绘制一个与中间相同高度和宽度的画板的矩形,然后用基础颜色填充。

chris-weather-2-1

步骤 2

接下来,创建一个正好为 30 x 30pt 的圆圈,并填写下面列出的颜色。

chris-weather-2-2

步骤 3

复制这个新创建的圆圈并将其粘贴到另一个后一层。现在调整大小为 2300 x 2300 pt,并将不透明度降至 0%

chris-weather-2-3

步骤 4

现在前往 对象>混合>混合选项... 并选择指定的步数,然后将其设置为 30。然后创建(对象>混合>建立)混合。

chris-weather-2-4

步骤 5

当混合物仍然选择与画板中心水平对齐,然后将圆圈居中在画板的最上方,如下所示。

chris-weather-2-5

步骤 6

复制扁平化的背景矩形并将其粘贴到我们刚创建的混合物上方。现在从图层调色板中选择矩形和混合,然后选择 对象 > 剪切蒙版 > 创建。 这样我们就不用担心相当大的混合流入我们的其他画板。

chris-weather-2-6

步骤 7

一个灵活的特征,我们认为给 APP 添加一些气质使背景颜色改变取决于温度。所以当我们刚才所说的背景时它是 热的,我们现在将复制这些元素,调整颜色和位置来代表一个更 冷 的感觉。

chris-weather-2-7

3.添加主要信息文本

因为我们的混合圆圈效果有这么多的步骤,当你在继续制作APP设计时可能会注意到一些滞后。由于这只是为了审美的目的,我们现在可以先禁用混合图层,只留下扁平化的背景颜色。 在移动设备上进行测试时,请务必重新使用混合图层,以便你可以看到文字与背景的一致性。

步骤 1

我们将严格依赖文字来获取天气信息。因此,我选择了一些漂亮、干净、易于阅读的字体,真正给 APP 一些个性。 我会坚持使用两个字体系列,并使用不同的宽度来创建所看到的元素。

首先,我们需要显示某种日期。选择文字工具(T)并输入一周中的某一天。我将使用 星期二 ,我们的 Mission Gothic 字体的粗细设置为 Thin。 文本本身将是白色的,我们将添加一个投影来帮助它从背景中突出来。那么我们就把它放在画板的中心位置,距离顶部 20px。 要做到这一点,只需将其对准边框碰到画板边缘的顶部,然后按住 Shift 键并按下键盘上的向下箭头键两次。

chris-weather-3-1

步骤 2

再次选择文字工具(T),并创建我们的温度计。我喜欢数字本身作为中心,而 度 符号是偏右的。 所以,不将文字放在 段落 面板中,我把它保持一致,只输入我们将用于占位符的数字。 我将使用 86 和 Maven Pro 字体,并在下面的屏幕截图中看到以下信息。

创建后,将其与画板的中心对齐,然后与顶部对齐。一旦与顶部对齐,右键单击文本,进入 变换 > 移动... 下移为 210pt。现在选择文字并添加度数符号。

chris-weather-3-2
提示:一定要告诉开发人员这个细节,以便他们能够解决如何在 APP 中创建不同的元素。

步骤 3

现在我们有了温度,让我们添加一个位置。输出你的位置,对我而言, Nassau, BAH 可以随意使用自己的。给城市和国家一些对比,我们将使用两个不同的权重。城市将 Mission Gothic 设定为 Regular,国家将 Mission Gothic 设定为 Thin。

至于放置,我以前说过,我喜欢温度数字居中的想法,但是对于所有其他文字,我希望它根据温度数据的宽度与左对齐。所以现在我将手动将这个地址放在温度的左边,从底部放置约20pt。随意调整这个距离,你认为合适就行。确保始终检查移动设备上的元素。

chris-weather-3-3

步骤 4

如果我们想,我们可以在这里停下来,但是开发者想要添加一些其他信息。所以我们将创建三行单独的文本。一个为当前时间,一个为风速,另一个为湿度。确保单独创建它们,因为我们将使用不同的字体大小和权重,并且这可以抛弃这些元素的行高。

我喜欢我们的 Maven Pro 字体的数字形式,所以我将继续使用这个字体给这些元素中的数字只有我们将使用 Medium 粗细,并将其与 Mission Gothic 字体设置为 Thin,而对于这种较细的字体,我们还将其设置为小型大写字母。 你可以通过突出显示相应的字体并单击 字符 面板右上角的菜单图标,然后选择 小型大写字母 来设置。

chris-weather-3-4

4.添加主信息图标

我们的排版方式很好地获得了我们的信息,但是我们仍然需要创建图标来表示不同的数字,并在 APP 中指定菜单。我爱上了我们的 Maven Pro 字体的象征形状,所以我想我会通过重新使用这个形状来创建图标来将图标元素与文字结合在一起。

步骤 1

使用文字工具(T)键入度数符号。在这一点上,确切的大小并不重要,因为我们将调整它以适合我们的图标大小。然后右键单击并选择 创建轮廓,以便将文字转换为可编辑的形状。 现在使用直接选择工具(A)并选择较小的内部路径并将其删除。稍后我们将使用描边获取适合我们图标的小部件。一旦你有弯曲的正方形,一定要调整高度/宽度,使它们完全相同。他们将稍微偏离,我们需要确保在稍后添加元素时精确。

chris-weather-4-1

步骤 2

我们将多次重复使用此形状,确保你有一个副本,放置在工作时松开原稿。现在我们将创建一个图标来表示位置菜单。

圆角矩形形状的副本缩小为 32 x 32pt,添加内部描边 3px

chris-weather-4-2

步骤 3

使用圆角矩形工具并创建一个 3 x 12pt 的矩形,并增加圆角,使末端完全圆形。现在重复这个形状三次,旋转它,使它形成十字形,然后将所有对象编组在一起。 最后,选择该组,添加一个投影 ,并放置在距离画板的顶部和左侧 30pt 的位置。确保检查移动设备上的间距,并进行相应调整。

chris-weather-4-3

步骤 4

让我们从我们的位置图标复制我们的圆角正方形,因为其他图标将基于相同的形状和大小。将圆角矩形的位置调整到 时间 元素旁边。 很像温度元素的实际度数符号,我想要这些额外的细节的图标在温度元素之外,显然是在这个元素的左边。

可以想像,对于 Time 元素,我们将创建一个 Clock 图标。我们圆角正方形将是时钟面,现在我们需要制造时钟。 选择圆角矩形工具并创建一个 10 x 4pt 的矩形,并将其与时钟面的中心对齐。这个过程只能复制 4 x 12pt。一旦你将时钟指针放在一个合适的地方,编组在一起,并添加一个影。

chris-weather-4-4

步骤 5

再次从先前的图标中复制圆角正方形,并将其与 Wind 元素对齐。对于这个图标,我们将尝试并实现一个很好的效果,提供一个箭头来指示风向,即让图标本身帮助提示风向信息。所以你可以猜到我们将创建一个箭头在这个特殊图标的中心。首先创建一个 4 x 9pt圆角矩形,并将其围绕在圆角正方形中。 接下来,使用圆角矩形工具创建一个完整的正方形,即 12 x 12pt,并移除其中一个角。 现在关闭开放路径并旋转它,就创建了箭头的向上的点,然后将其与箭杆中心对齐,确保完全隐藏顶部圆角。

随着我们的箭头完成,将箭杆和箭头编组在一起,然后再创建七个副本。以四分之一增量来旋转这些副本,你就得到一个向上箭头,一个指向右上角的箭头,另一个指向右侧的箭头,依此类推。 因为我们的主要形状不是一个完整的圆圈,只是旋转箭头形状不起作用,所以我们需要有一个箭头图标,给每个可能的风向。 创建后,你可以隐藏不需要的箭头,然后将箭头和圆角正方形编组在一起并应用 投影

chris-weather-4-5

步骤 6

最后一次粘贴我们圆角正方形的副本,并将其与我们的 湿度 元素对齐。现在创建一个 8 x 8pt 的圆,并与主要形状中心对齐,放在底部。 使用直接选择工具(A),从圆圈中选择最上方的锚点,并将其向上拖动以创建一个下落的形状,给这个控件带来更合适的雨滴相撞。 重复这个雨滴形状两次,并减小尺寸,并将它们放置在大雨滴的顶部两侧。最后把元素编组(Control + G)在一起并添加一个投影

chris-weather-4-6

步骤 7

对于这个主要部分的最后一个图标,我们需要一些代表日期的东西。我们想出了一个日历图标,显示当月的日期。

开始创建一个 40 x 36pt 圆角矩形,并给出 3pt 的内部描边。现在转到 对象> 扩展外观 将描边转换为实际形状。 使用直接选择工具(A)后,使用键盘上的箭头按键选择顶部的内部锚点并将其向下推动 9px。 使用圆角矩形工具创建两个圆角的药丸形状,9pt 宽,高度为你想要的任意高度,然后将它们放在更大的圆角正方形上,使它们的底部在大的白色区域之间的一半。 然后进入路径查找器面板从正方形减去这些新形状。再创建两个药丸形状,为 3 x 8pt,并将其排列在被剪切的部分。 最后,我们将添加以下设置的占位符日期,然后我们将这些元素编组并添加一个 投影

chris-weather-4-7

5.小时的 Widgets

开发人员希望在应用主页底部安装一组可滚动的 widgets,显示这一天日子的小时天气。所以为了完成我们的 APP 的主页,现在我们来创建它们。

步骤 1

使用圆角矩形工具并创建一个165 x 250pt的白色矩形,将其与画板对齐,并将其从画板底部放置40px

复制这个矩形并用黑色填充。再次复制一次,然后将其向下移动 4px,然后在路径查找器面板中的 Minus Front(减去后方对象)。然后,你可以将不透明度下降到 15%

chris-weather-5-1

步骤 2

再次复制我们的白色矩形,并填充黑色,减少到 15%不透明度。在该高度上绘制另一个矩形,其高度为 79pt,任意宽度,并将其排放到底层矩形形状的顶部。 选择这个新矩形,并在填充较大的黑色,然后从 路径查找器 面板中选择 交集

chris-weather-5-2

步骤 3

使用文字工具(T)并输入你选择的温度。我想确保我有足够的空间来扩展,所以我选择了数字 100 。为此,我将使用 黑色 的粗细 Missing Gothic 字体。 文本本身也将是一个平淡的黑色,不透明度下降到 15%。然后我们将它放在我们的容器的白色部分顶部的附近。

chris-weather-5-3

步骤 4

由于这应该是预测的天气,所以不会那么准确,所以我们也会包括可能的低和高。 文字工具(T)再次创建输出你的估计值,而不是使用 Black 的粗细,我们将改为使用 Thin。将其对准底部,确保有足够的留白空间。

chris-weather-5-4

步骤 5

最暗部的栏将是我们的时间指标。复制我们先前在本教程中创建的时钟图标,并将其放置在该较暗的区域的左侧。你也可以从之前复制时间文字。确保从这些元素中删除投影,因为不需要。

chris-weather-5-5

步骤 6

最后,将一个投影添加到主要的白色矩形,然后将这些元素编组在一起。你现在可以复制此编组,并将它们放置在中心元素两边的 20px 处,确保调整每个新副本的时间。作为一个额外的方案,我把时间 widget 放在页面以外,并将其高度缩小到 235pt。如果你在调整高度大小时有约束锁定,则小部件(widget)将会随之相称。这会让它出现小数点,所以它不精确。由于这些是离开页面来使用或者掩盖我们之前创建的来隐藏屏幕上的元素。

这样我们的主页就完成了。确保打开混合背景并进行测试,以了解你的移动设备的外观。

chris-weather-5-6

6.创建位置菜单

步骤 1

现在我们开始在菜单上工作。我发现最简单的是复制带所有元素的主页的图层,然后在主页左侧选择画板,然后粘贴到复制图层中。 定位它,以便只有位置图标在画板的最右侧可见。现在创建一个与我们的画板相同尺寸的蒙版【译者注,此处作者写的比较模糊,译者的实现方式是:将复制的主页页面编组,在菜单页面建立画板尺寸的矩形,将此矩形与编组的主页一起选中,使用剪切蒙版即可,具体要参考AI的剪切蒙版功能哦~】,隐藏多出页面上的元素。

chris-weather-6-1

步骤 2

由于我们的整体设计是扁平化的而不是用渐变的阴影,所以,为了表示主页超出了菜单元素,我们将使用一个扁平化的黑色填充矩形,设置为 10% 不透明度,宽度为 4pt,高度与我们的画板相同。

chris-weather-6-2

步骤 3

在此菜单中,我们需要一个区域来添加新的位置,并列出我们的设置位置和开关来使用/禁用自动位置检测以及显示温度的单位。我们先来创建新的位置部分。

选择矩形工具(M)并创建一个 640 x 100pt 的矩形,并将其与画板顶部对齐,然后添加 投影

现在使用圆角矩形工具并创建一个 8 x 32pt 的矩形,填充为黑色。复制此矩形并旋转它,使其与先前的 “+” 符号的形状相交。 选择两个矩形,并从路径查找器面板中将它们联集。将不透明度降低到 25%,并和之前创建的带投影的矩形元素垂直居中对齐。 一旦垂直向中心移动,它和左侧的距离与到顶部和底部的距离是相同的。

最后选择文字工具(T)并输入句子“ Add new location ... ”,使用 Mission Gothic 字体, 设置为 Thin ,不透明度降至15%

chris-weather-6-3

步骤 4

复制上一个矩形并将其与前一个矩形的底部对齐,然后调整 投影

复制我们之前用于图标的圆角正方形,而不是描边,用扁平化的黑色填充,然后将不透明度降低到 15%。复制上一步中制作的+符号并旋转它,使其形成一个X并将其置于圆角正方形内,然后从 路径查找器 面板中选择 按前置对象剪裁 选项。

现在从我们的主页复制 位置 元素文本,并删除投影并将字体颜色设置为黑色,将不透明度缩小到25%。随意添加多个实例,以便我们可以看到添加新项目时列表将如何填充。

chris-weather-6-4

步骤 5

我们来处理这个菜单的开关元素。无论位置列表获得多长时间,此元素都将停留在此菜单的底部。首先创建一个 640 x 200pt 的矩形并添加一个投影

使用文字工具(T),输入我们将要进行的开关的标签。一个将用于自动位置检测,另一个将设置温度是以华氏或摄氏度显示。由于这些开关所在的主要元件在 200pt 的高度的空间里。

我们在这两个标签之间添加一个分隔符。使用线段工具(\),创建一个长为 476pt 的直线,并给出 2pt 的描边。这个描边将是黑色,不透明度降低到 10pt

chris-weather-6-5

步骤 6

为了创建开关本身,我们再次利用之前创造的圆角正方形。复制此形状并将其调整为 50pt,填充为黑色。 右键单击此形状,然后选择 变换 > 移动... ,然后水平移动 80pt,然后单击复制,而不是确定。你现在应该有两个相邻的圆角正方形。

选择矩形工具(M)并绘制与我们圆角正方形相同高度的矩形,并在中间直接相连接。 选中这三个元素,并在路径查找器面板中联集。将此形状的不透明度降低到 15%,并将其正确放在我们的标签旁边。

chris-weather-6-6

步骤 7

再次将我们的圆形方块贴上白色,并将尺寸调整为 40 x 40pt。将其对准左侧或右侧,使边缘周围有距离。你现在可以复制这些形状并水平翻转以指示相反的开关状态。接下来添加你的文本来表示开关状态。作为打开和关闭。

最后,你也可以为单位选择器复制此元素。并且我们的位置菜单是完整的。我们转到我们的日期菜单。

chris-weather-6-7

7.添加日期菜单

步骤 1

此日期菜单将显示即将到来的天气。让我们从位置菜单 中重复先前的几个步骤,然后复制整个主页面层,屏蔽超出页面的元素,并添加一个矩形来表示菜单阴影。

chris-weather-7-1

步骤 2

现在创建一个 640 x 160pt 的矩形,并将其与该画板的顶部对齐,然后给它一个投影

chris-weather-7-2

步骤 3

我们需要一些代表日期和日期的东西,就像之前让我们创建一个日历图标一样。创建一个 120 x 120pt 的圆角矩形,并添加一个 8px的内部描边。现在转到 对象>扩展外观 将描边转换为实际形状。使用直接选择工具(A)后,使用键盘上的箭头键选择顶部内部锚定点并将其向下推动 30px。然后将不透明度降低到 15%

chris-weather-7-3

步骤4

现在将文本添加到图标。我们希望顶部操作是一周中的一天。这将是白色的文本。日期本身将是黑色,不透明度下降到15%。两者都使用 Maven Pro 粗细为 Medium。

chris-weather-7-4

步骤5

最后加入预期的温度。数字的字体将是 Mission Gothic,度数符号的字体是 Maven Pro。我们还会在元素的右下角添加一个 高/低 选项。

如果你想你可以复制此元素并调整本周剩余时间的日期/日期。

chris-weather-7-5

这里有三个屏幕

请注意元素之间的间距和你可以想到的任何确切的位置数字,以使开发人员的工作更轻松。你提供的信息越多,开发人员就越容易对产品进行编码以匹配设计。我也不能强调,在设计时总是要测试多么重要,所以你应该知道你的设计会转化为移动屏幕。祝你的APP设计顺利!

chris-weather-600
关注我们的公众号
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.