Android 應用開發-從設計到實現 3-2 前期準備

標籤：conf   tty   href   天氣   藝術   nes   背景   應用開發   ati   

前期準備

設計師首先在頭腦中、草稿中勾勒出靜態，

之後就需要收集製作時需要的各種素材、確定介面的色彩配置。

收集素材

介面中需要使用各種天氣表徵圖：晴天、雨天、大霧、下雪、下雨、多雲等等；還有天氣資訊中的風力、風向等等。

我們可以使用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。大家可以去那裡先睹為快。

Android 應用開發-從設計到實現 3-2 前期準備