APP design specification refers to the APP interface style unity, the interface elements of the style, color and size of the set of unified norms and principles of use. It is important to agree on a unified design specification with the design and front-end. Agreeing on a design specification can reduce the cost of communication between the product, design, and front-end; it can make the interface design neat and unified, and reduce the repetitive design of the interface elements; and it can reduce the design material and control the size of the installation package.
APP design specifications mainly include the interface layout, background color, font color size, interface element spacing, pop-up layer, loading, icons, buttons constant click state, etc. to carry out a unified sorting and specification.
Page layout and interaction specifications on the proposed Android, ios try to unify, so that you can avoid Android and ios respectively design a set of scripts. Of course, the tycoon company can ignore this suggestion, android and ios respectively do specialized design of course better. In terms of small and medium-sized projects, if the design resources are tight, you can consider using the same script for Android and ios, and do the corresponding fine-tuning after the output applies to different size requirements for Android and ios.
We recommend using the mac vector design tool "sketch". The size of iPhone5 on ios platform is 640*1136px as the standard size design. After the interface design is completed, you can do the corresponding fine-tuning to export the manuscript for ios and Android sizes. Here we can first unify the design output specification:
Android (720*1280px): interface preview, interface coordinate chart, standard interface icon png file
IOS (640*1136px): interface preview, interface coordinate chart, 1-3 times the figure of the vector icon pdf file
PS: interface coordinate chart refers to the interface preview chart in the design Has been finalized on the interface preview map marked: interface elements of the spacing, text color, font size of the text, the size of the icons, buttons in different states of the color, button size, etc.
Standard color specifications: important, general, weak. Standard color important: important color in general no more than 3 kinds, here's an example of one of the important color red need to be used in a small area, for special need to emphasize and highlight the text, buttons and icons; and black for important text information such as titles, text and so on. Standard color general: are similar colors, and to be weaker than the important colors, commonly used for general information, guide words such as prompt copy or secondary text information. Standard color is weak: commonly used for background color and edge information that does not need to be conspicuous.
The text is the performance of the main information of the APP, especially news reading, community APP, etc. It is important to develop standard design specifications and good typography, and users also feel no fatigue when using the APP. Standard word specification is important, general and weak. Here mainly standardize the size of the standard word, the standard word should pay attention to the standard color with the above combination to highlight the APP important information and weaken the secondary information. Standard word is important: large font size is commonly used in large title, top navigation, smaller font size is used in the title of the partition module. Standard word general: mainly used in most of the text, such as the main text. Standard word weak: commonly used in weak combination with standard color for auxiliary text such as some minor copy instructions.
APP interface to give people a simple and neat, clear sense of organization, relying on the interface elements of the layout and spacing design. Here, the spacing design should also take into account to adapt to different screen resolutions. The general solution is to zoom in and out according to the screen isometric spacing, or to fix the spacing of certain interface elements, so that the other space to leave space to stretch. In order to meet the screen resolution of the larger devices, sometimes even need to change the APP interface page layout.
Fifth, the pop-up layer specification
The pop-up layer specification should pay attention to the design of the pop-up layer of Android and ios respectively, for example, ios most of the operation pop-up layer pop-up layer from the bottom, and Android directly display operation and then the center of the page, so that the interaction should be done in accordance with the design requirements of the respective platforms. The popup layer needs to be designed in different styles according to different functions. For example, operational pop-up layer - more buttons in the upper right corner of the trigger; prompt pop-up layer: weak prompting the application of the system's token floating word prompts can be; the need for strong prompting can be used to cancel the module to determine the pop-up layer; stronger prompting and the pop-up layer needs to carry a certain number of operations to use the strong lead to the missile layer, the upper right corner of the operation to provide a shutdown operation or you can click on the non-bouncing area to close the pop-up layer.
The page loading animation is an essential element of the APP interface, increasing the loading can give the user clear feedback that the function is loading, reducing the user to wait for the function to respond to the sense of irritation caused by. In addition loading animation in addition to the conventional chrysanthemum can also consider the use of npc, so that the APP more vivid, lively; or the use of logo slogans to strengthen the brand image of APP.
The icon specification should pay attention to the Android and ios platforms require different sizes and different file formats: for example, Android needs 720*1280px standard page png icon format; ios needs 3 sizes 320*(1-3) times the size of the icon pdf file. Icons should also be designed according to different functional requirements of different states: such as normal, selected state, click state and so on.
Button specification by state: normal, click state, non-clickable state. Button specifications for different functions and scenarios require the design of different styles and colors, and in size: long, medium, short; and according to different mobile platforms, long, medium and short sizes are also noted to be different.
Page load failure, page is empty can be unified specification for NPC, text, buttons. Be careful to display different NPCs and texts according to different scenarios.
......
...
The design specification is mainly combed by the design children, but it is necessary to reach a **** knowledge with the front-end development, product managers, and strictly comply with the agreed specifications, otherwise this design specification is meaningless. In the process of developing design specifications, the product manager should take the initiative to act as a bridge role in organizing designers, front-end developers to work together to develop design specifications to ensure that the design specifications are considered more realistic, more comprehensive and more complete.