Designing an APP from scratch: Android design specifications

The article series "Designing an App from Scratch" consists of 6 parts. We have already discussed the first 5 parts. Today, I will also introduce the design specifications to you. Let’s learn it quickly.

U sister listed a small catalogue:

• Basic Concepts
• Android interface design specifications
• Android cut icon annotation
• Android Development Unit Conversion
• Summarize

1. Basic Concepts

1. What is DPI?

DPI (Dots Per Inch): dots per inch, refers to screen density. It is a unit for measuring spatial dot density. It was originally used in printing technology. It indicates the number of ink droplets that can be printed per inch. A smaller DPI will produce unclear images.

Later, the concept of DPI was also applied to computer screens. Computer screens generally use PPI (Pixels Per Inch) to indicate the number of pixels displayed on a one-inch screen. Now DPI has also been introduced.

The default PPI for Windows computers is 96, and for Macs it's 72, although that hasn't been very accurate since the 80s. Generally speaking, non-retina desktops (including Macs) should be set between 72-120 PPI, as this ensures your work will maintain roughly the same proportions everywhere.

Here is an application example: The PPI of a 27" Mac Cinema Display is 109, which means that 109 pixels are displayed per inch of the screen. The bevel length is 25.7 inches (65cm), and the actual screen width is about 23.5 inches. 23.5109 is approximately equal to 2560, so the native screen resolution is 2560x1440px.

• Screen density calculation formula:

• 1080x1920px screen density:

2. What is PPI?

PPI (Pixels Per Inch): Image resolution; it is the number of pixels per inch in an image. The unit of resolution is ppi, usually called pixels per inch. Image resolution is generally used in PS to change the clarity of an image.

2. Android interface design specifications

1. Screen density of Android devices

There are many Android sizes, and it is definitely unrealistic to adapt to each screen.

So in order to solve this problem, Android phone screens have their own initial fixed density, and Android will adapt itself according to the different densities of these screens. It is enough to master this content to meet your own design work needs...

The following are Android's density classifications and the resolutions they represent. Here you can see that they are already linked to the design draft size and cut image output.

• Android screen densities

U sister will show you how the screen density of each iPhone device is:

iphone 4/4S/5/5S/SE/6/7≈320DPI

2. Android development units DP and SP

DP: Android-specific unit of length. Taking a 160 DPI screen as an example, 1DP=1PX

Calculation formula: dp x dpi/160=px

Example: Taking 720x1280px (320dpi) as an example, calculate 1dp x 320 dpi/=2px

SP: Android-specific font unit. Taking 160 DPI screen as an example, 1SP=1PX

Calculation formula: sp x dpi/160 = px

Example: Taking 720x1280px (320dpi) as an example, calculate 1sp x 320 dpi/=2px

3. Design size

Judging from the current mainstream device sizes in the market, we should use 1080 x 1920 PX for the Android design draft size.

The reason for using 1080x1920px as the standard size for design drafts:

① When adapting upward and downward from the middle size, the interface adjustment is the smallest and it is most convenient to adapt.

② In the era of big screens, small sizes are still used as design dimensions, which will limit the designer's design perspective.

③ Using mainstream sizes for design draft sizes greatly improves visual restoration and compatibility with other models.

So when making Android design drafts, please make them in 1080x1920px

(Sketch users use 540 x 960 to make designs)

• Interface design control size:

4. Android Icon Size

Android icons are relatively fewer than iOS icons, so we only need to provide the following sizes, but we need to provide two sets, one set for rounded corners and one for right angles, because they will be used in some places.

512x512px, 192x192px, 144x144px, 96x96px, 72x72px, 48x48px

Because there are many Android models, the icon sizes corresponding to phones with different screen densities are also different, so U sister here cannot give you the location where the corresponding icon is applied.

5. Android design fonts

The English font is Roboto, and the Chinese font is Source Han Sans. After Android 5.0, Source Han Sans is used, and the font file has two names, "source han sans" and "noto sans CJK".

Source Han Sans is an open source font developed by Adobe and Google. It supports Traditional, Simplified, Japanese, and Korean, and has 7 font weights.

6. Common mainstream mobile phone sizes and resolutions

3. Android icon cutout annotation

1. When marking a design, should I use px, dp or sp?

A: This question needs to be discussed with Android engineers. It is recommended to use dp and sp for annotation (here it refers to the premise of Android design draft). However, many designers do not understand the units of dp and sp, so some designers still use px for annotation when providing Android design drafts. You can discuss this with your partner engineer. If it does not affect his development and he can convert clearly, you can consider using Px, but I do not recommend it.

Here are some things to remember (you only need to remember what helps you work):

• When the screen density is MDPI (160DPI), 1dp=1px
• When the screen density is MDPI (160DPI), 1sp=1px

Pixel font size = screen density / 160 * sp font size. You can use this to calculate the pixel font size marked as sp in the design draft. For example, under xHDPI, a 36px font marked as sp is 18sp, and so on.

According to different screen densities, this means as shown in the figure below:

2. How many sets of cutting resources do you need to provide?

A: In theory, if you want to take into account all the existing models, you should provide slices of different sizes for different densities.

But this will undoubtedly increase the workload enormously, and may also waste a lot of resources and space. In fact, many models no longer occupy the mainstream market, and there is no need to consider adapting to many strange resolutions. Therefore, the specific number of output sets depends on the company's product needs.

This is what I usually do:

Select the best size and provide a set of image cutting resources, which will be handed over to the development engineer to adapt to each screen density.

Please note that this "optimal size" does not refer to the optimal size that has appeared on the Android phones on the market, but refers to the optimal size of the popular mainstream models. This can save a lot of resource space. You need to communicate with your Android engineer about the optimal size. Each Android engineer has different conclusions on this issue. (My Android partner asked me to provide XXHDPI image cutting resources. The image cutting tool I use is Cutterman, which can cut images with one click)

3. What size does Android's image cutout resources provide to developers?

A: iOS image cutting has @2x and @3x. Android image cutting is based on different dpi. It is actually similar to iOS, except that the resource folders are named according to dpi, as shown below:

The slices are categorized according to different resolutions, but you see, if there are a lot of slices, wouldn’t it be exhausting to provide 5 sets of slices?

Generally speaking, we only need to provide 3 sets of image cutting resources to meet the adaptation needs of Android engineers, namely HDPI, XHDPI, and XXHDPI.

The method I use now is to only provide the cut images of the largest size, and let the Android engineers scale them to adapt to other resolutions, so communicate with your partner.

In fact, most companies nowadays are limited by human and material resources and do not have such a strict working method. Basically, it is just a folder that is named and provided to engineers.

Here I would like to remind you that there is no fixed way or method of working. Any method is to improve work efficiency.

4. The most common problems we encounter when making design drafts

① What size should be used for the design draft?

• iOS: Use 750x1334px for your designs.
• Android: As far as the current market is concerned, XXHDPI belongs to the mainstream models; this way, both labeling and mainstream models can be taken into account, so it is recommended to use 1080x1920px as the design draft size, so that even if you mark it in px, engineers can easily convert it.

② How to adapt iOS design draft to Android (highlight the key points)

There is a situation that is very common nowadays, that is, one draft is used for two purposes; designers are making design drafts for the iOS version to adapt to Android, and now they want to use it for Android, what should they do?

The screen density of iPhone has reached xHDPI, so use the size of 750x1334px for design drafts.

In fact, the 750×1334 @3x image resource is exactly the Android XXhdpi (1080x1920px) image resource; Android developers can use the iOS design draft to convert it themselves, provided that you must communicate with Android engineers.

Another situation: you can proportionally resize the 750×1334 design to the Android 1080×1920 size, fine-tune each control, and re-provide annotations (in dp). In other words, you need to provide two sets of annotations, one for iOS and one for Android.

③ You may have another question, that is, when I use cutterman to cut Android pictures, the output has two folders: drawable and mipmap. Which one should I give to the development engineer?

Answer: The development tools used before only had drawables but no mipmaps. Later, the new development tools had a mipmap folder, which was specifically used to store png format images. However, png images can still be placed in drawables.

So now we only need to give the Android engineers slice output files starting with the prefix mipmap-.

4. Android development unit conversion

1. The correspondence between PX, DP and SP for various sizes of Android models

2. Correspondence between font units SP and PX

3. Correspondence between distance units DP and PX

V. Conclusion

What I am talking about here is just a working method. A good working method can achieve twice the result with half the effort. It should be applied flexibly in specific work. You must communicate more with developers. Good communication is the only way to solve problems.