Design insights of Metro UI

Metro is the meaning of the train. This UI draws on the train station signboard idea, that is, it hopes to provide a concise information to the user.

However, metro is definitely not an easy-to-use information. Simplification will make the UI look simple. How to create a simple enough UI in a blank space is not too simple. This is important for Metro.

I. Extract central words and variables

It is impossible to display complete information in a small grid. This requires us to provide users with the most meaningful and identifiable information.

2. design the interface and plan the content and process first.

Beauty includes many elements, but efficiency is a key aspect of user interface aesthetics, including user experience engineering aspects such as ease of identification, ease of searching, and quick decision making. The first point is to first divide the content layers. The title and content should be differentiated. The content of different groups should be differentiated from left to right, from top to bottom, similar content remains consistent in design, and there is a sufficient contrast between different types of content.

3. Make good use of gaps

Blank is not redundant. We need to consider it as an aesthetic and design element. For example, titles and content can be separated by spaces.

4. Make good use of alignment

Alignment is invisible. If you want to associate similar elements, alignment them.

5. Use graphic elements instead of text elements

Images can be well recognized in a limited space. If a pile of text is used, it may be difficult to extract the content that users need.

6. Extraction of content elements

A significant difference between the user interface and content is that the content is descriptive, while the user interface is identification and operational, and the user interface cannot express specific details, it cannot even tell you what this button means, but it is the easiest way to identify and operate people with a certain operation foundation. This requires the use of the backbone extraction method, and the second is to establish a unified operation mode, so that users can draw a different picture.

7. Reduce Incorrect Design

The design should make the user understand that it is strictly consistent. If you do 10 things, but there are two errors, the impact on the user will be much greater than the proportion of the two things. If an image cannot represent text, do not use it. If the title and content should be differentiated, do not occasionally stick them together. Do not make different content use the same style, do not make different content use the same alignment, do not leave a lot of blank for no reason, do not design psoriasis. The poor design is much better than the fancy and disordered design.

8. Try to add more stuff in a limited space

Eyes are always faster than hands. A page can display enough things to users, which is much better than two pages. Do not be afraid to use a small font, do not be afraid that users can not see clearly, do not be afraid of too much content. Although many people criticize portal websites for being too bloated, they are actually friendly to users. It is inappropriate to ignore user needs simply for the sake of aesthetic design.

9. The square icon is not beautiful

People like curves and smooth things. The square lines really do not favor users. The square is used to create an area and a group for good separation and alignment of the content (because of the boundary, and the circle does not have obvious boundary). If you use this icon to create an area, instead of displaying real-time and interactive content, it is a waste. Real-time information must be provided on the basis of sufficient discrimination (icons. The design in the square is a difficult problem.

10. decoration and background

There is no way to highlight "taste" above. To make your UI tasteful, you must study the decoration and background. Some people like wood grain, some people like twill, some people like pattern, some people like gradient color, some people like metal words, mirror words, crystal words, these decorative effects play, immediately show your unique artistic taste. However, no matter what your taste is, you should follow the above design principles.