Excellent APP designer development plan: thorough understanding of UI design specifications

This article gives you a comprehensive understanding of what specifications APP design, including what knowledge points in the end. APP also plans to develop excellent designers must know the dry cargo. Let us have a deep understanding of the nature of APP design specifications



[icon Specification]

Many designers think that UI design is a design icon. Although this is not the case, icon design is a relatively basic part of the whole UI design.

The icon and logo, do proper subtraction are needed in the design, should try to express its meaning with simple lines, should try to avoid the design of line structure is too complex, and the overall icons need to maintain consistent style, such as the icon of the line thickness, edge curvature, height width ratio, style icon etc..


Especially for new people, so let’s all take a look at the specifications of icon design:

(1) pixel alignment

Strict pixel alignment is required, especially when you do smaller icons, and if you don’t strictly follow pixel alignment, the final display is going to be a problem.


(2) Boolean operations with multiple uses

When you do icons, you can’t use a pen when you can do Boolean operations with basic graphics:

Make your icons more standardized

The understanding of graphic structure is more profound

Late change shape is more convenient


(3) unique style

When making a series of icons, you must set a style and principle to the icon in the early stage to make it look different.

It is worth mentioning here, we do linear icon, we must ensure that the same thickness, the same stroke if not rounded, follow these basic rules, the unified, nor the style of innovation.


(4) visual size unification

In the icon design, we will use the grid auxiliary line to help us more strict and cautious, but must not be trapped by the auxiliary line, learn to use flexibly, keep visual size unity.

In today’s APP design environment, the 25 school and some APP design Daniel have always stressed that designers should have a brand awareness. Then, in the icon design, we must also emphasize “brand”, simply speaking is the brand in the abstract concept into concrete graphics, the brand main and sub tone applies to icon design. At the same time, it is recommended that you complete a theme work every week to improve your graphic design ability.


[annotation Specification]

How to clear up the idea of annotation — the structural thinking is disassembled, and the big problem is disassembled into small problem!

Tagging is mainly the following four different attributes: size, text, spacing, color.

Automatic APP design tagging artifact

When tagging, we first remove the navigation bar and tab bar, because these controls are very versatile, need to be taken out for unified tagging, here we only to the content area to mark examples.

(1) dimensions

We need to mark things on the page that need to be told, such as icons, pictures, heads, and so on. What we need to pay attention to is the dimensioning of dimensions:

There’s a fillet where you need to mark the fillet radius.

For some controls, such as button, list, you must always ask yourself whether there is a special state, such as press state, invalid state, selected state and so on, if you do not indicate, the meeting will default, without these effects.

In general, the size of the picture needs to tell the proportion, rather than the fixed size, so that development can be better adaptation, the proportion of commonly used pictures are 4:3, 16:9 and so on.

Many inexperienced designers do not understand the principle of adaptation, so it is easy to be given some control fixed size, if you use this button width and height are marked, the development will be the size of the button to write dead, once encountered the screen (white area) when wide, or fixed button the size will affect the visual effects. So the correct annotation method is to give the buttons on both sides of the spacing, so that the entire width of the button adaptive (of course, high or fixed), so no matter what kind of resolution size, can maintain the same visual effect, scalability is very strong.

(2) characters

Text, you need to mark the size of the text, font, color, transparency, line height, etc., of course, can also communicate with development, to cut some content. Note on the text note: the text has a very special attribute, in some cases, the text is dynamic, so at this time, you need to consider the limit situation clearly.

On the surface, we will mark the title of the size, color, these contents can be clear, but if the title of the text too much, how to deal with it? So you have to give a specification of the limit, such as how many characters are displayed at most, and the character exceeds the limit and is dealt with by dot.

(3) spacing

Some people may think that space and size are similar, but in fact, they are very different, we can understand that size is to describe the size of the container, and the distance is to describe the distance between the containers. Spacing is relatively simple, as long as the marking is clear, there will not be too much problem.

(4) color

Need to mark the color content of the line color, background color, button color and so on. Note on the color should pay attention to: remember that the color of the text has been classified into the text attributes inside, do not repeat tagging, ideas must be kept clear.


[naming Specification]

A lot of UI designers don’t have any idea about naming, and they’re literally naming pages with random letters, and I don’t think that’s good. Because I think, unified, standardized naming for our own file arrangement has a lot of help, the later to modify the file layer is more convenient and fast, and the standard naming also appear our own more professional. Moreover, if the naming is not uniform, it is difficult for the members of the team to reach a consensus, and the task transfer requires a great deal of learning cost.

But more importantly, a standard naming can greatly save development time and cost, reducing the probability of a lot of unnecessary communication and repeated that the name of the programmer can be used directly without changing our slice slice, we only want to replace that later, section name change, do not look directly at the development you can replace.

Slice naming rules of iOS


(1) all names are lowercase English letters

In the programmer’s code, there are only lowercase English letters, and if you give them all Chinese names, then they are sure to change, so naming all lowercase letters is the most basic rule. Some people think that writing so much English is too difficult, but in fact, for the improvement of their professional ability, this standard naming method is a process that must be experienced. When you get used to this naming method, your sense of achievement will arise.

(2) named format

A large project will be divided into many modules, each module designed by different designers to complete independence, there will be specialized management of public components, such as tabbar, navbar and so on, this case will be divided into two kinds of map, is a common type of map, there is a unique map of each module.

General slice naming format:

The component _ _ function _ @2x.png category

For example: tabbar_icon_home_default@2x.png (corresponding Chinese: _ tab icon _ page _ default @2x.png)

The special module map naming rules:

_ module category _ function _ state @2x.png

For example: mail_icon_search_pressed@2x.png (_ default @2x.png corresponding Chinese: search the mail icon _ _)

Our principle is to clearly express the details of the slice and have no duplicate name. (notice that spaces cannot be included in a name)


(3) commonly used English word lists

If all of the names are written as full names, the names will be very long, so we can abbreviate some commonly used English words to reduce the cost of work and develop code resources. As for how to abbreviate, as long as the whole team can reach a consensus and output an abbreviated list, any abbreviation rule is ok.

Here are some lists of English words that are commonly used in naming:

BG (backgrond background)

NAV (navbar navigation bar)

Tab (tabbar tab bar)

BTN (button button)

IMG (image pictures)

Del (delete deletion)

MSG (message prompt information)

Pop (pop up pop up)

Icon (icon)

Selected (selected)

Disabled (not clickable)

Default (default)

Pressed (press)

Back (return)

Edit (Edit)

Content (content)

Left/center/right (left / middle / right)

Logo (logo)

Login (login)

Refresh (refresh)

Banner (advertising)

Link (link)

User (user)

Download (download)

Note (note)



[interaction Specification]

APP interactive dynamic efficiency of left and right handoff 2

Here are some common facts:

Simplified operationThere are two steps that can be done in one step.

User habitsMost users have solidified thinking, we as a designer should respect data, respect user choice.

Reduce interferenceTo reduce the uncertainty of interface elements, it is convenient for users to find what they want.

quick responseTo speed up the speed of the user read, to avoid from the remote data acquisition, as far as possible to avoid.

friendly interfaceIn addition to providing visual solutions based on requirements, it is the designer’s responsibility to add small details into the design process to make the interface more friendly.


[picture processing specification]


First, the unity of pictures: 

1) picture tone color temperature should be unified, such as a baby product’s home page, the whole need to match the warm tone of the picture, so that looks like the whole is more unified and comfortable.

2) proportion of pictures needs unity, such as a the product details page, in the same section of the screen (page) the proportion of products or characters, need to have a uniform size ratio, so that it looks more comfortable uniform.


Two, details of the picture processing:

(1) the picture accuracy is not mentioned here is not to say that the accuracy of DPI resolution 300 Oh, that is the only need to do high precision printing output, while in the computer and mobile phone pictures on DPI resolution of 72 can also be a proper picture output compression image size), CR filter is too complicated you can use the built-in PS.

2) picture size is recommended as a even value, which is convenient for front end technicians to develop.

3) the edge of the image avoids merging with the white background, and can add color at the edge position.

4) in order to match the title font, the picture can be partially lit or dimmed.


[dynamic efficiency specification]

Whether it is now often see corporate / brand publicity H5 page, the mobile terminal start page, or the page once popular animation, need to use dynamic effect. We can do a little bit more, especially if we do some animation, which is what we often meet.

Feedback dynamic design in 12 APP designs

When doing dynamic effect, we need to pay attention to the following points:

1) no matter how attractive and attractive your animation is, if the cost is too high or too complex to be landed, so we must follow the simple and practical principle to design, don’t over design.

2) any interaction caused by the state should take into account the normal state and abnormal state. For load animation, we need to consider the feedback of loading success and the failure of loading, and mark it in the output specification.

3) the use of dynamic tools: PS can do some dynamic expression, using AE to do some loading animation, interactive effect between pages, you can use Flinto, Principle and so on.

Leave a Reply