App Design specification: Icon and button visual design specification

Mobile phone app Design code refers to the entire app interface for visual design UI style unification, the interface elements of the style, color, icon button and size set the uniform norms and use principles. Facilitate future coordination and collaboration and app Vision iterations.

The first part: the icon design Code of App interface

We are drawing the icon inside the app UI design, in Photoshop, as much as possible with shapes. Make sure the icons and buttons are vector graphs. The format of the Chettu is PNG. And the size of the icons and buttons must be even.

APP icon should also be based on different functional requirements of the design of different states: such as the normal, selected state, click State and so on. and each icon in addition to the name of English thought, also need a Chinese name of the note under the icon represented by the meaning. Let development and other colleagues understand. This is also the ultimate goal of our app Vision specification.

Each mobile app designer's own app icon is not the same as the visual specification. 25 School with you recommend 2 kinds of icons visual design norms classification methods.

1, according to the interface position and module to classify. The following figure:

2, according to functional modules to classify: functional-type icon and schematic icon. The following figure

Of course you can also have your own app icon visual code rules. As long as you can see it yourself.

The above 2 kinds of App interface icons (icon) Design Standard Classification method, for reference only.

Part II: Design Code for buttons (button) Inside app interface

The button in the APP has 4 attributes: Separate for general, click, can't click, select

button specifications for different functions and scenes need to design different styles and colors, also in the dimensions are: long, medium and short, and according to different mobile phone platform long medium and short size also notice different.

The button-cut diagram is typically 9.png-cut with the best of both iOS and Andorid platforms. Remember

Common icons and buttons visual design specification information is shown below:

App buttons are also divided into: Important buttons, general buttons, and weak buttons.

Important button: Generally refers to the overall interface in the larger, eye-catching position, usually refers to the implementation of important operations and adsorption at the bottom of the button. such as order, search, identify, submit, and so on.

General buttons: Buttons that are not particularly important to operate. such as empty, exit, descriptive, such as buttons.

Important buttons and general buttons are text that is on the button and occupies a larger area.

Weak button: This refers to the lowest priority of a button, such cases are mainly text and icons with the appearance. such as filtering, sorting and other buttons.