Teach you how to quickly summarize and summarize mobile terminal UI design specification

On the case of mobile terminal UI design specifications, 25 schools also share a lot of, as long as you in the 25 school official website search box input “design specifications”, at least 20 different APP mature cases of UI design and design specifications case.

Recently, in the APP design exchange group, a lot of small partners react to read these APP design specifications, they still do not know how to tidy up, or there are some wooden routines to get.

Let’s take a look at the simplest, most effective, teaching you to quickly summarize and summarize the mobile end of the UI design specification information chart reference.




But after reading the above summary of mobile terminal UI design specification information diagram case,

25 school Xiaobian or want to follow you, a good review of the mobile terminal UI design specification detailed process.




First, the object and scene of UI design specification

1. Product and design teams refer to shared design specifications.

Whether it is with the external user experience design company, or internal design team implementation design, UI design specifications are used to reflect the product design communication after the unanimous confirmation of the program output, and provide a reference for the subsequent product iteration.

2 provide support for project related technical colleagues (such as front-end engineers, iOS / Android Engineers) for practical development and reconstruction.

In the actual product development, technology often likes to model, because the development of the tool language often has library, class such modular thinking. The UI design specification can not only connect with product development and implementation, but also be easy for engineers to understand through the specific specification of a series of element modules.


Two, when output UI design specifications?

Generally, the product high fidelity interface is confirmed by product, design and technology. If the high fidelity interface products OK, while internal design resources are relatively abundant, the corresponding product designer can make a first edition of the UI design specifications, and back filling optimization.


Three, three types of UI design specifications

1, platform (system) nature, mainly for its platform ecological design guidelines,

For example, Google Material DesignApple Watch Human Interface GuidelinesUbuntu Design;

2, brand materials, mainly to the media, the third party companies for public relations reporting and design

(PS: I rarely see the domestic consolidation, resulted in some media reports, such as the Dribbble logo pictures of all sorts of strange things) – Logo Downloads & Brand GuidelinesLinkedIn Brand GuidelinesHttps://www.facebookbrand.com/

3, product business related, mainly product design and implementation level of the program, Web products are mostly, and many are combined with the front-end technology results,

For example, Starbucks Style GuideAtlassian Design Guidelines, Overview |;


Four, UI design specifications of the specific content of the division:

UpBrand Logo and related material specification;

Up typography (Typography), namely the interface layout design;

Up color (Color) specification, the main product color library;

Up Icon Library (Icon);

Up control library (UI Toolkit), Web and APP products form may be different;

Up vision framework (Visual Hierarchy), the interaction framework structure of the product, and information architecture;


The above four points are to summarize and summarize the knowledge points of UI design specifications. Hope to be helpful to you

Leave a Reply