Code for interactive design of app interface

Code for design of interface interaction in planning 007-appwords 1805 read 3544 comments 154
Code of Interaction Design

After the "Planning 006-app Interface Design style" was determined, the product Manager (and interactive design) didn't have to worry about throwing all the interactive drafts to the designer for a detailed interface design. Before the detail design starts, pull on the designer and Android front-end development, iOS front-end development together to determine the design specifications first!

App design specification refers to the application interface style unified, the interface elements of the style, color and size of the unified specification and use of principles. and design, the front-end agreement is very important design norms, agreed design norms can reduce the product, design, the front-end communication costs, can make the interface design neat, unified, reduce the interface elements of repetitive design, you can reduce the design material, control the size of the installation package.

App design specifications mainly include the interface layout, background color, font color size, interface element spacing, shells, loading, icons, button normal Click state and other unified combing and specification.

First, page layout specification
Page layout

The page layout and interaction specifications suggest that Android and iOS should be as uniform as possible, so that Android and iOS can be avoided by designing a script. Of course local tyrants company can ignore this suggestion, it is certainly better for Android and iOS to do special design separately. In small and medium-sized projects, the design of resource constraints can be considered Android and iOS with the same manuscript, respectively, the corresponding fine-tuned output for Android and iOS different size requirements can be.

It is recommended to use the Mac vector design Tool "sketch". The IPhone5 size 640*1136px of the iOS platform is designed as a standard size. After the completion of the interface design, you can make appropriate adjustments to export the script for iOS and Android size. Here you can first unify the design output specification:

Android (720*1280px): interface Preview, interface map, standard interface icon PNG file

IOS (640*1136px): interface Preview, interface map, 1-3 times diagram vector icon PDF file

PS: interface map refers to the design of the finalized interface on the preview map: The spacing of the interface elements, the color of the text, the size of the text, the size of the icon, button different state color, button size and so on

Interface coordinate diagram example two, standard color specification
Standard color Specification

Standard color Specification: Important, general, weak. Standard color IMPORTANT: not more than 3 important colors, here the example of one of the important colors of red need to use a small area, for special needs to emphasize and highlight the text, buttons and icon, and black for important text information such as title, text, etc. Standard color general: are similar colors, and more than the important color is weak, commonly used for general level information, guide words such as suggestive copy or secondary text messages. The standard color is weaker: it is commonly used for background color and does not require conspicuous corner information.

Standard color example three, standard word specification
Standard Word specification

Text is the main information of the performance of the app, especially news reading, community apps, such as the development of standard design norms and good typography, users use the app also feel no fatigue, this is very important. Standard word specification is important, general and weak. Here the main specification of the size of the standard Word, the standard Word should pay attention to the above standard color combination to highlight the app important information and weaken the secondary information. Standard words are important: large font sizes are commonly used for large headings, top navigation, and smaller font sizes used in the header of the split module. Standard word general: Mainly used in most text, such as the text. Standard word weak: Generally weaker combinations of standard colors are used for auxiliary text such as some minor copywriting instructions.

Standard Word instance four, interface element spacing
interface element Spacing

The app interface should be simple, neat and clear, relying on the layout and spacing design of the interface elements. Here the spacing design should also consider adapting to different screen resolutions. The general solution is to reduce the spacing by zooming in on the screen, or to fix the spacing of some interface elements, leaving the rest of the space stretched. To accommodate devices with large screen resolutions, it is sometimes necessary to change the page layout of the app interface.

ipad version Vsiphone version

Five, the bomb layer specification

Specification of projectile layer

The missile layer specification should pay attention to the design of Android and iOS layer, such as iOS most of the operation of the bomb layer from the bottom pop-up, and Android directly display the operation of the page center, such interaction should follow the design requirements of the respective platform. The layer needs to design different styles according to different functions. For example, the operational layer-upper right corner of more buttons trigger, suggestive shells: weak hint of the application system token fluttering word hint, you need strong hints can be used to cancel, determine the module shells, stronger hints and shells need to carry a certain operation of the use of strong guided shells, The upper right corner provides a close operation or you can click the non-elastic layer area to close the layer.

VI. Specification of loading
Loading specification

Page loading animation is an essential element of the app interface, adding loading can give users a clear feedback function is loading, reduce the user waiting for the response of the function caused by irritability. In addition to the conventional chrysanthemum loading animation can also consider using NPC, make the app more vivid, lively, or use the logo slogan to enhance the brand image of the app.

Dimensional society, Girlfriends Circle Loading Seven, Icon/button specification
Icon Button Specification

Icon Specification Note that the Android and iOS platforms require different sizes and different file formats: For example, Android requires a PNG icon format for 720*1280px standard pages, and iOS requires 3 size 320* (1-3) times the icon PDF file. The icon should also be designed according to the different functional requirements of different states: such as normal, selected state, click State and so on.

Button specifications are divided by state: Normal, click State, non-clickable state. button specifications for different functions and scene needs, the design of different styles and colors, in the dimensions are also divided into: long, medium and short, and according to different mobile phone platform long medium and short size also pay attention to different.

Eight, page loading failure, the page is empty display
Load failed, page is empty

Page loading failed, the page is empty can be unified specification for NPC, Copy, button. Be aware that different NPCs and copywriting are displayed depending on the scene.

......

...

Design specifications mainly by the design of children's shoes to comb, but must be with the front-end development, product managers to reach a consensus, strictly abide by the agreed specifications, otherwise this design code is meaningless. In the process of formulating the design specification, the Product manager should actively act as the Bridge Role organization designer and the front-end development together to develop the design norms to ensure that the design specifications are considered more realistic, more comprehensive and more complete.

Transfer from: Link

Code for interactive design of app interface