is the UI design of an application qualified, how to judge?

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M00/85/77/wKioL1ekReaBiJm-AALi-heQCT0894.jpg-wh_500x0-wm_3 -wmp_4-s_562885886.jpg "title=" 1.jpg "alt=" Wkiol1ekreabijm-aali-heqct0894.jpg-wh_50 "/>

The UI, or user Interface, refers to the overall design of the human-computer interaction, the operation logic and the beautiful interface of the software. In app development, UI design is a very important link. Excellent UI design not only can make the software more personality and taste, but also make the operation of the software comfortable and simple free, fully embodies the positioning and characteristics of the software, more importantly, can improve the user stickiness of the product.

So in the product development process, how to define a product UI design is qualified? In general, UI design auditing is difficult to have a uniform standard, this article is used in the Programmer's Inn (www.proginn.com) UI acceptance of a few criteria for reference: Follow the prototype, theme color collocation, the resolution of the adaptation, detailed labeling, meticulous transduction.

Design follows prototypes

UI design work needs to be done under the framework of the prototype constraint, and cannot contradict the prototype. This is very easy to understand, do not repeat it.

Theme Color collocation

The theme color collocation effect can fully embody the UI designer's aesthetic level. But have to admit that each person's aesthetic is different, here through the specific case more easily realize the importance of theme color collocation.

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M01/85/77/wKioL1ekRfSwoPDsAAHPnxAobZ8671.jpg-wh_500x0-wm_3 -wmp_4-s_1020243081.jpg "title=" 2.jpg "alt=" Wkiol1ekrfswopdsaahpnxaobz8671.jpg-wh_50 "/>

In the case of the design, the text and background color contrast is not clear, marked by the number of words too close, color and text do not match, the overall visual sense is not clear enough, lack of beauty, need to redefine the theme color.

Case Two

650) this.width=650; "Src=" Http://s4.51cto.com/wyfs02/M00/85/77/wKiom1ekRgPShDRQAAOtjgdTZEI929.jpg-wh_500x0-wm_3 -wmp_4-s_1758416511.jpg "title=" 3.jpg "alt=" Wkiom1ekrgpshdrqaaotjgdtzei929.jpg-wh_50 "/>

Compared with the case, the case of the two gives the feeling is completely different, the text and background contrast, the overall clear and not dazzling, looks very comfortable.

The resolution of the adaptation

Now there are many kinds of Android models in the market, the interface size is different. The most popular Android interface sizes are 480*800, 720*1280 and 1080*1920. In order to reduce the size of the resolution to adapt to the difficulty, it is recommended that the uniform use of 720*1280 this size, in the 1080*1920 display is also very clear, and the size of the cut chart is also moderate.

The iphone includes iphone 4s, iphone 5 and 5s, iphone 6 and 6s, iphone 6 Plus, but people use the iphone 5s (640 *1136), iphone 6 and 6s (750 *1334), iPh One 6 Plus (1080 *1920). In terms of interface size adaptation, it is recommended to use the *1334 (IPhone 6 and 6s), one is to adapt to the mainstream of mobile phone large screen, the second is that it has gradually become a more suitable choice for people, plus the adaptation effect is also very good.

Detailed labeling

The contents of the callout mainly include color, font, and size.

Color labels include the color of the font and the color of the module, and are labeled according to the actual color values. Android generally uses hexadecimal notation (such as #970545), some designers of iOS will use 16, but mostly in the form of RGB (such as 12,34,56).

Dimension of the font, in addition to the color, but also size. The appropriate size of the font is affected by many factors, such as whether the mobile phone system is Android or ios,android its own resolution, the length of the text and so on. Generally in high-resolution Android, the text font size is 27px more comfortable, iOS Chinese font size is 32-34px more comfortable.

Dimensions require buttons, margins, and icons to be labeled. The labeling example is as follows.

650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M02/85/77/wKiom1ekRg_Qwy2sAAGXRQLJj-o747.jpg-wh_500x0-wm_3 -wmp_4-s_3272152354.jpg "title=" 4.jpg "alt=" Wkiom1ekrg_qwy2saagxrqljj-o747.jpg-wh_50 "/>

A special labeling tool Marketch is also recommended.

Meticulous transduction.

In many cases, some UI designers think that transduction is the front-end thing, and the front end and feel that the cut should be done by the designer, the results of both sides push. In fact, the work of the graph should be done by the designer. The designer needs to cut out the graphic elements that appear in the design to the front-end engineers as required by the basic requirements.

transduction to use PNG format uniformly. Generally, Android uses icon, [email protected] and [email protected]; iOS uses icon, [email protected] and [email protected]. A detailed transduction example is listed below.

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M02/85/77/wKioL1ekRhuQSSCAAAQTqUwEk9g985.jpg-wh_500x0-wm_3 -wmp_4-s_3025437443.jpg "title=" 5.jpg "alt=" Wkiol1ekrhuqsscaaaqtquwek9g985.jpg-wh_50 "/>

In product development, the UI design is based on the prototype, the product is further optimized, according to the interface size adaptation resolution, at the same time select the appropriate theme color, improve the overall interface aesthetics. Since the development of the app is important for the development of the process management, in order to follow up the development, detailed labeling and meticulous transduction is also an excellent UI designer's responsibility.

This article is from the "first to a cup of Java press yajing" blog, please be sure to keep this source http://maybeone.blog.51cto.com/11734094/1834772

is the UI design of an application qualified, how to judge?