Android 应用开发-从设计到实现 3-2 前期准备

Posted 2020-09-05 anddlecn

前期准备

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

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

收集素材

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

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

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

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

   

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

   

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

   

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

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

矢量图

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

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

<?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，选择对应的颜色，

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

颜色项目	颜色名称	颜色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

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。