Let's do the most beautiful Android interface together!

Let's do the most beautiful Android interface together! Androidios Product Design Summary:How do you tailor your Android device to create the perfect app? This is a headache for many developers. Different from the Ios,android device category, screen resolution, dynamic scaling, fonts and other different. The United States self-taught Ui/ux designer Meng to combine their own learning and practical walkthrough of the Android Application design conducted in-depth analysis of each side.

Compared with Apple's iOS family, the Android family is obviously much bigger, but the saying goes, "What birds have Big Woods", Android device category, interface is not very coordinated, coupled with its consistent free and open style, directly led to the application of extreme lack of unity. The openness of Android has greatly boosted the autonomy of the application, but for developers, it is really a headache in the application development process, large to the interface design, small to screen resolution, dynamic scaling and fonts, which is why the more responsive design in recent years has become increasingly popular One of the reasons. To this, from the United States self-taught Ui/ux designer Meng to combine their own learning and actual combat process of Android application design carried out in-depth and detailed analysis.

In the past I have never been in the guidelines for Android app Development, because I believe that the practice of knowledge, not to mention the Android platform is too broad, application development is difficult to unify, but now the Android platform is maturing, this is a very happy thing.

Back button

For a long time, the back button will never be part of the user interface because of the same hardware problem. Now that the hardware buttons have faded away, as early as the early 2012, Google officially stated that "in order to bring the most intuitive and seamless experience to the user's use of the app, developers need to stop using hardware-style buttons when designing." "Now, when users are browsing content hierarchically, there is a very popular practice of having an arrow that says" back "next to the app's logo. The Back button of the user interface (the so-called "up Button") is slightly different than the hardware-style return button, and when the up button simply returns the interface content to the previous page, the Back button can be returned directly to any previously used app or content.

Screen resolution

On the Android platform, all screen resolutions are quite confusing, from xhdpi (2x), hdpi (1.5x) to MDPI (1x), which sounds very technical. Almost a year ago when I first started learning Android app Development design, great program apes didn't even explain to me exactly how much each of them was, and of course I understand it might not be a problem for them, but for the rookie, it's a really annoying big problem, but if you don't know it, In the classroom of the students ' time, the teacher didn't say that.

Figure: Android Screen resolution

For applications, the screen resolution of 720x1280, 540x960, and 360x640 must be designed to ensure that the hardware-style buttons and the design of the high-fidelity solid model (prototype) have a status bar on the ground.

Starter Kit

In most Android apps, the action Bar is the most visible UI element. If you're tired of using the default style, you can try using the online tool Android Action Bar style Generator to generate dazzling action bars. Using this page application, select the color of each part, you can automatically generate all the corresponding resource files and packaged in a ZIP format compressed package for download, containing 720x1280, 540x960 and 360x640 three kinds of resolution resources.

Figure: Three different resolutions

Jeremy Sallée, a designer from telly , also made a very useful visual document showing the differences between the three resolutions.

9-slice Scaling (9-grid scaling)

There is a very unique graphical resource management method on Android that is very different from CSS, 9-slicing allows developers to specify whether or not to scale, even if the interface is adjusted, the fillet can remain unchanged.

Figure: 9-Grid Zoom

The so-called 9 lattice, that is, the Middle 5 area is the content area, normal scaling, 1, 3, 7, 9 is the angle, does not scale, 2, 8 horizontal scale, 4, 6 vertical scaling. 9-Grid scaling is useful in UI design.

Figure: Android 9-slice

Action Bar

Unlike the iphone app title often located in the middle of the top of the page, on the Android platform, the app title is normally located in the upper left side near the logo, which also causes if you click on the app icon, you may be directed to a menu or back to the previous screen.

In some cases the title bar will have a small triangular arrow below it, indicating that the content directory is browsable, as it is on a PC, and it is common to use drop-down menus on Android devices.

In addition, all other actions should be relative to the upper right, including refresh (not common on Android devices via pull-down refresh), search and other functions such as return buttons, in the action Bar, the use of too many function buttons is not appropriate, that is, the so-called extremes meet, so it is appropriate to good.

Font

But the responsive effect is important in terms of fonts, but unfortunately fonts are specific, which also leads directly to the "sad" display on some devices. Although the smartphone update iteration is fast, it is normal to have to be insured in the old phone to test, as for the browser, or use IE6 better. The most popular font on Android is the Droid Sans, which is free to download , and now Roboto is becoming more popular on new devices, with a lot of impact.

Figure: Droid Sans vs. Roboto

Catalog size

In Android xhdpi (2x), the pixel minimum is body 28px, menu and Page top 96px, footer 116px, only slightly longer than iOS (24px, 88px and 100px), Android and iOS ratio is 116%.

Design Test

• On the Android phone

Roman Nurik, from Google, released a new product called Android Design PreviewA fairly practical tool that allows developers to design tests on their Android devices to showcase desktop views or design images in very perfect pixel values, without the need for Dropbox (a networked storage online app that provides synchronization of local files), or compression of images.

• On the Mac

Testing on a Mac must be done by setting the system parameters for security privacy to ensure that apps other than the App store can be downloaded.

Figure: System parameter settings

Figure: Android Design Demo

After you have completed the above settings, connect to the device via the USB cable, click Install app, and you can then perform the demo test.

Let's do the most beautiful Android interface together!