前期准备

设计师首先在头脑中、草稿中勾勒出静态效果图，

sketch_weather_app_static_effect_complete

之后就需要收集制作时需要的各种素材、确定界面的配色方案。

收集素材

界面中需要使用各种天气图标：晴天、雨天、大雾、下雪、下雨、多云等等；还有天气信息中的风力、风向等等。

我们可以使用Sketch工具进行完全的从无到有的自由创作，也可以适用现有的素材，减少设计的工作量。

这里并不打算讲如何画出一个完美的图形，我想作为一名设计师，这点基本的艺术功底应该还是有的。因此我决定去之前介绍过的资源池-iconfont网站寻找合适的图标。

  1. 输入各种图标的关键字，就能看到各种图标，例如多云，

    cloudy_icon_search_result

  2. 点击希望的图标，准备下载，

    cloudy_icon_download1

  3. 可以选择图标的颜色、尺寸和下载的图标格式。这里我们选择SVG下载，也就是下载矢量图标（矢量图我们将在后一小节相信介绍）。至于颜色和尺寸就都无所谓了，因为后面我们使用的时候都会做出调整的。

    cloudy_icon_download2

以此方法，我们接着下载完成所有设计中需要使用到的图标，它们包括：风力、风向、湿度、空气质量、运动、紫外线、晴天、雨天、多云、多云间晴、雾、雪。

如果你的时间很宝贵不想把精力放到挨个下载上，那么我这里为你提供了打包好的所有可用素材，快去下载吧。

矢量图

矢量图是设计当中经常使用到的图片类型。当设计师放大图片的时候，矢量图会跟着放大，但是图形的线条并不会变的模糊出现锯齿的形状。所以这是设计师的最爱。因此在前面下载矢量图标的时候，我说不用在意图标的尺寸，就是这个道理。

矢量图通常用在手动制图当中，占用的磁盘空间很小，它其实就是一个对笔划进行描述的文本文件，用文本编辑器打开的话，可以看到他的文本内容，例如，

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1484009234652" class="icon" style="" viewBox="0 0 1204 1024" version="1.1" p-id="2794" width="18.8125" height="16">
  <defs>
    <style type="text/css"/>
  </defs>
  <path d="M882.526316 286.796992q-17.323308 17.323308-42.345865 17.323308t-42.345865-17.323308q-18.285714-18.285714-18.285714-42.827068t18.285714-42.827068l42.345865-42.345865q17.323308-17.323308
  42.345865-17.323308t42.345865 17.323308q18.285714 17.323308 18.285714 42.345865t-18.285714 43.308271zM250.225564 
611.12782q-3.849624-16.360902-6.255639-33.684211t-2.406015-35.609023q0-61.593985 
23.578947-116.451128t64.481203-95.278195 95.278195-64"/>
</svg>

这就是矢量图的描述语言。在安卓应用的设计当中，我们也有机会与矢量图进一步的打交道。

安卓应用的图形资源是支持开发者直接使用矢量图形的，安卓5.0开始的tint功能就经常需要和矢量图配合着使用。

配色方案

天气预报的整体配色，我决定从Google提供的Material Design调色板中进行选择。

天气预报讲的是天空的故事，提到天空，第一感觉就是蓝色，因此我决定将配色方案定调成Indigo 500，金色代表太阳，作为与之配合的Accent Color。

打开配色方案的工具网站material palette，选择对应的颜色，

weather_app_color_solution

我们就得到了下面对应的颜色值，

颜色项目 颜色名称 颜色RGB值
Primary Color Indigo 500 #3F51B5
Primary Dark Color Indigo 700 #303F9F
Accent Color Amber 500 #FFC107

图中的Light Primary Color和Divider Color我们这里暂时用不到。

图中的Primary Text和Secondary Text 就是我们前面提到的文字颜色。亮色背景下，这里看到的颜色分别是#212121和#757575。准确的讲，它们应该是：

使用的场景 透明度 颜色
Primary text 87% #000000
Secondary text 54% #000000

假如背景是白色，那么这个透明度的黑色在去除了alpha值以后，就分别对应#212121和#757575了。

图标的颜色应该是：

颜色透明度 颜色
54% #000000