The significance and process of the standardization of graphic language in products

Now with the development of Internet enterprises and business expansion, over time, a company's products may become more and more rich and diverse, the same product with the continuous function of improving and expanding, with a product "grow up" products need to use the icon will be more and more, at this time the appearance of a number of product images, The performance of visual primitives such as product icons, how to adapt to the whole product or company's strategic plan, at this time in the visual presentation of graphic language, semantic expression, recognition and other aspects of the need to make a comprehensive and meticulous consideration.

Let's take a look at a few typical examples and review the growth process of the http://www.aliyun.com/zixun/aggregation/9084.html ">adobe product line" from 2005 Adobe After acquiring the former largest competitor, Macromedia, its product line was greatly enriched, and after Adobe established the Creative Suite concept in 2002, subsequent new products continued to be launched, The huge product line is presented in front of the user in a kind of display way is a very important topic. In the figure below I have outlined an evolutionary transformation of the Adobe product logo:

Product lineup of the powerful Adobe Empire in the Creativesuite 3 when the release of all of its products logo for a color loop map, very good showing the color of each product logo relationship and a complete color system.

Let's take another example, Apple in 2010 and 2011 has the itunes and the App Store logo made a more significant adjustment, to the Max OS Lion version, the two platform-level product new image at the same time displayed in the user Mac dock. Without accurate official answers, but from one of the two commercially available products of the entire Apple product resource application and a source of entertainment content, they are clearly expected by Apple, in a sense that they are being endowed with a more thick, atmospheric image of this change, Be able to serve the company's business strategy well.

In addition, after the release of itunes 10, the sidebar icons all become monochrome, the change I think is to highlight the store's core resource area, emphasizing the platform of the product, and the above analysis, the same visual performance level of the adjustment for the entire product of the resource business strategy services.

Now back to our own products, now "My Ali" as a network business users of the right-hand man, user's home, "My Ali" content and application in the growing, the system is more and more huge, the same site visual graphic language collation, solve the original accumulated long visual performance "chaos" is also increasingly urgent.

In the "My Ali" visual elements of the first step, many application icons are the first entry point, we from the meaning of the icon, classification, size specifications, design rules, style performance and other aspects of a overall direction of planning, summed up a set of design guidelines.

In the category of icons, we divide the site icons into the following three categories:

A product icon (Logo)

It is a product in the brand level definition, refers to a product system image, positioning and appeal of the centralized graphical performance, product icon (Logo) to the product or company to identify the promotion role, through the image of the graphic logo so that users know, remember and familiar with a product.

Product Icon Design principles:

1 can be a good interpretation of the products carried by the functions and to the user to convey the value and image of the product;

2 graphics are easily remembered and well known by the user, and have strong exclusive (not easy to confuse with other icons).

Function and tool icon in product interface

In a product interface, using a generalized refined image to represent a certain type of function or operation set of functional graphic identification, often have a group of regular in a functional module appears. Color modeling performance can be exquisite and expressive, but also simple and clear, pure texture.

Features, tool icon design principles:

1 The table meaning is clear, uses the element graph which everybody has accepted the specific meaning;

2 visual experience Unified, visual language from the system;

A function module inside the icon size to have a better visual balance;

A functional module or even the entire product icon texture, color saturation to be unified;

A set of multiple icons, graphic semantics to have a better consistency.

3 need to pay attention to the various aspects of the icon in the sense of inheritance problems, to avoid the user caused the difficulty of identification.

Three graphic symbols

The general performance of the direct operation of the button or marked the operation of the auxiliary logo symbol, the graphic performance of concise and clear, with a simple color, flat.

In the whole station icon size specifications, although the Web page icon does not need to be like the operating system or client software, the icon size has

Strict size limit, but for the site's visual experience of the normative and uniformity, "My Ali" icon in the specification according to the previous icons of the size of the

Use the case to contract 3 common sizes: 48x48 pix, 32x32 pix, 16x16 pix,

After the entire station icon according to their respective position and needs, will be ordered according to the rules of the corresponding size of the icon, so that the site in the icon symbol display layer

Will leave the user with a normative, professional impression.

The following issues need to be noted during the design of icons:

The 4 icons in the first row of the image above appear to be of uneven size this is because although the size can be the same, but the full outline of the solid shape in the visual perception of the amplification effect, and the second row of dark 4 icons will look more consistent size. As can be seen in the following figure, the contour of the full figure has a certain edge contraction to achieve a visual balance with other graphics.

This requires the design icon in line with the agreed icon size, you need to pay attention to the visual balance of multiple icons, in the production of complete sets of icons, according to this rule to choose to stay white space ratio.

In addition, a single icon to be very good grasp of the external contour and shape of the balanced relationship between the graphic form of the icon to be as close as possible to a square, so that the graphic full, balanced.

In my Ali application icon style performance in order to make the original business, application icons and future new icons to achieve a very good uniformity, we have made including the icon perspective, composition elements, light source texture, chamfer these constraints:

The drawing angle of the icon is a forward view of the object, and can have a certain angle overlooking angle if necessary. This is not only in the big principle to ensure the unity of the whole, but the rules are not too rigid, there is still considerable space for designers to play creative.

The entire icon element is 3 below, consisting of up to 3 elements, combined with one (up to two) auxiliary elements in one BODY element. Avoid numerous icons, their respective graphical symbols are different, to avoid in the form of graphic combination of the resulting disunity.

The icon's light direction is directly above the icon color gradient direction is a vertical linear gradient, the color from top to bottom from shallow to deep. The color gradient of the icon is small, flat sense, gradient not too large and too much texture.

The size of the chamfer of the three different sizes icon conventions is applied so that the detail expenditure is still well consistent when the display is concentrated.

After such a set of design guidelines for the specification, the agreement can be as far as possible to ensure that the original old icons and new additions to the later can have a rule can be found on the entire site the quality of the entire product, user-friendly aspects can play a positive role.

Here only from the point of view of the application of the icon to introduce the unity of visual elements of the solution, of course, the site has other types of control modules, also need to achieve a similar standardized unified experience, there is still a lot of work to be carried out.

Source: http://www.aliued.cn