Android app development-from design to implementation 3-2 preparation

Pre-preparation

The designer first outlines the static in the mind, the draft,

After that, you need to collect the various materials needed for the production and determine the color scheme of the interface.

Collect material

The interface requires a variety of weather icons: sunny, rainy, foggy, snowy, rainy, cloudy and so on, as well as wind, wind, and so on in weather information.

We can use the Sketch tool to complete the free creation from scratch, or we can apply the existing material to reduce the workload of the design.

Here is not going to talk about how 画出 a perfect graphics, I think as a designer, this basic artistic skills should still have some. So I decided to 资源池 look for the right icon for the-iconfont website I've introduced.

1. Enter the keywords for each icon to see the various icons, for example 多云 ,

2. Click on the desired icon, ready to download,

3. You can select the icon's color, size, and download icon format. Here we choose SVG下载 , that is, download vector icon (vector image we will believe in the next section). As for color and size, it doesn't matter, because we will make adjustments when we use them later.

In this way, we then download the necessary icons for all designs, including: Wind, wind direction, humidity, air quality, motion, ultraviolet, sunny, rainy, cloudy, cloudy, fog, snow.

If your time is precious and you do not want to focus on downloading, then I have provided you with all the available material to pack, so download it now.

Vector diagram

矢量图Is the type of image that is often used in the design. When the designer enlarges the image, 矢量图 it zooms in, but the lines of the graphic do not blur the jagged shape. So this is the designer's favorite. So in front of the download vector icon, I said not in the size of the intention, that is the truth.

Vector graphics are usually used in manual mapping, the disk space is very small, it is actually a stroke description of the text file, open with a text editor, you can see his text content, for example,

<?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 1024x768"  version  = "1.1"   P-id  = "2794"  width  =  "18.8125"  height  = "+" ;   <defs>    <style type="Text/css"/></defs> <Path D="M882. 526316286. 796992Q-17. 32330817. 323308-42. 34586517. 323308t-42. 345865-17. 323308q-18. 285714-18. 285714-18. 285714-42. 827068t18. 285714-42. 827068l42. 345865-42. 345865q17. 323308-17. 32330842. 345865-17. 323308t42. 34586517. 323308q18. 28571417. 32330818. 28571442. 345865t-18. 28571443. 308271zm250. 225564611. 12782q-3. 849624-16. 360902-6. 255639-33. 684211t-2. 406015-35. 609023q0-61. 59398523. 578947-116. 451128t64. 481203-95. 27819595. 278195-64"/></svg>

This is the description language of the vector diagram. In the design of the Android application, we also have the opportunity to deal with the vector graph further.

The graphics resources of the Android app are for developers to use vector graphics directly, and the tint features that start with Android 5.0 often need to be used in conjunction with vector diagrams.

Color scheme

天气预报Overall color, I decided to choose from a palette provided by Google Material Design .

天气预报Speaking of the story of the sky, referring to the sky, the first feeling is blue, so I decided to set the color scheme Indigo 500 , gold represents the sun, as a match with it Accent Color .

Open the Color Scheme tool website Material palette, select the corresponding color,

We get the corresponding color values below,

Color Items	Color name	Color RGB Values
Primary Color	Indigo 500	3f51b5
Primary Dark Color	Indigo 700	303f9f
Accent Color	Amber 500	FFC107

The picture Light Primary Color and Divider Color We are not used here for the time being.

The picture Primary Text and Secondary Text is the color of the text we mentioned earlier. In the bright background, the colors you see here are the same as #212121 #757575 . To be precise, they should be:

the scene used	Transparency	Color
Primary text	87%	000000
Secondary text	54%	000000

If the background is white, then the transparency of the black after removing the alpha value, the corresponding #212121 and respectively #757575 .

The color of the icon should be:

Color Transparency	Color
54%	000000

This article is part of a series of documents from design to implementation-hands-on Android app development. Thank you for your reading and feedback, any comments and suggestions for this article, please leave a message, I will try to reply.

If you think this article is helpful to you, please recommend to more friends, or join our QQ group 348702074 and more small partners to discuss together, but also hope that you can give me advice, so that these documents can speak better, can maximize the help to the partners who want to learn and develop.

In addition to the articles published by CSDN, the newest articles in this series will be published first to my dedicated blog book.anddle.com. You can go there and sneak a peek.

Android app development-from design to implementation 3-2 preparation