In visual interface design, different from artistic works conveying the designer’s own emotions and sustenance, the focus here is on the conveyed behavior and information, that is, the goal. Among the visual design elements, the following are the key concerns:

  • color
  • The text
  • The size of the
  • The shape of
  • texture
  • scenario
  • location
  • Dynamic effect

How to integrate visual design can be expressed through the following relationships:

Whole + unit — target

The whole represents the hierarchy, while the monomer expresses the information to be conveyed by a single individual. The information to be conveyed by a single individual is integrated with the hierarchy to achieve the final goal. At the same time, the key points mentioned above can be classified. Color, text, size, shape and texture can be put into the unit for thinking, while scene, location, dynamic effect and information level can be put into the whole.

Let’s discuss it from the perspective of monomer:

color

The choice of color is a very important thing, because because of its high resolution, it has a higher impact on the interface than shape, size, etc., and is at the top of the visual attention zone. It’s much easier to find a red square house in a pile of white square houses than a round white square house in a pile of white square houses.

With color, the user’s goals, environment, content, and brand should come first, and the color itself should come second.

For example, the reason why fast food restaurants love red and yellow so much is not because red and yellow are beautiful, but because they represent flame. Flame conveys a warm and urgent feeling, which makes consumers unable to settle down and enjoy themselves slowly, but consume more quickly and then leave. In many business applications, blue is mostly chosen as the main color, because blue conveys a sense of trust and stability.

In interface design, the color choice of a single element depends not only on the information the element conveys, but also on its position in the hierarchy. Like the image below is the calendar in IOS, except the calendar itself, are operating controls, these individual controls, endowed with red, on a white background is particularly outstanding, convey to the user, this is all can click, on the other hand, the use of red to make these controls represent the hierarchy of control layer, It can be clearly distinguished from the content layer.

The use of color should avoid many and miscellaneous, color according to the main tone, auxiliary color, etc., do a good distinction, here is not to do further expansion, and further discussion later.

The text

The properties of a text include the font, size, and color of the word. For fonts, the main consideration is readability, so for most mobile applications, IOS often choose Chinese bold or black Holly, especially black Holly effect is the best, Android often choose Noto or Microsoft Yahei as Chinese font. Because these fonts display better on mobile devices, changing the font size will not affect text recognition too much. Of course, there are some special style apps, such as thepaper.cn, which uses song typeface to convey a rigorous and solemn feeling, because it is an APP focused on political news.

The choice of font size is also very important, which itself has the characteristics of order, different size of the font reflects different levels.

The size of the

Size of this property is an ordered and quantifiable parameters, different sizes of elements arranged together, obviously have more appeal, such as ios game center, one of the most important “game” were among the biggest circle represents, and game related “challenges” in the second round, others in the third round.

For quantified examples, such as wifi signal and battery quantity, the attribute of size is quantified and closely related to the meaning to be represented. However, the wrong use of size can reduce the effect of other attributes. For example, if the element is too small, the shape attribute of the element will not play a great role in the eyes of the user.

The shape of

Shape compared to the size and color mentioned in front, users need a higher level of resolution, simple shape is used for segmentation, will be expressed in part and other parts of the phase separation, such as a button border, it to tell the user, this is a can interact control, attract users to click; For example, the card design commonly used in MD design uses the shape of a card to wrap specific content, which ensures the integrity of the card content and the hierarchy of the overall page, making it easier for users to understand the internal logical relationship during operation.

The complex shape itself has the function of conveying meaning, like an ICON in the shape of a portrait, in order to inform users that this ICON can jump to the page of individual users. Many app ICONS, like Twitter’s bird, Github’s cat, Tumblr’s T, and YouTube’s play switch, come with specific shapes.

The proper use of shapes can convey rich information and hierarchy.

texture

Texture using although today is particularly popular in flat low profile, but it can convey to sex is very strong, can be for sex in the design psychology in the book is so defined – things perceived and actual properties, mainly those who can decide things may be how to use the basic attributes. That is, what do we think this object can do. For example, a surface with a rubbery texture would be seen as something to grasp, or a button with a shadow that protrudes from its interface, as if to tell the user that it is a clickable control.

Talk about design that will be materialized, it clearly has not been too popular, because technology products into everybody’s life, don’t need to pass the quasiphysical way, users can very good understanding of this technology is how to operate, the promotion of flat design not only improve the operation efficiency of the user, and can be more efficient to convey information and content. However, with THE gradual emergence of AR and VR, using the characteristics of higher dimensions, the quasi – physical design may be able to return to people’s vision in a new way.

After discussing the single part, let’s discuss how to integrate visual design at the overall level:

scenario

Scene is one of the elements of visual interface design, which considers what kind of environment users are in to operate your products. Only by taking this dimension into consideration, can the products designed be closer to users and more real and comprehensive. One might not be relevant example, and the interface prior to read an article about uber design of reflection, mentioned a question about Shanghai, because Shanghai viaduct much more special, uber matching users and the driver is matched by distance, this creates a problem, the car in the elevated here under the viaduct, then maybe their distance is very short, But the actual time it takes a driver to drive to the user’s side may be much longer than that. This is an example of not thinking through the real situation.

For another interface design related, such as ios the dial and call interface, the design of each button is very big, the position of the occupying most of the interface, the main is given on the phone or when answering the phone, people may be in a more urgent situation, as well as the environment is different, In order to ensure that users can quickly find the answer button or quickly dial the number, the large size of the button design is understandable.

location

The position here refers to the relative position of each single element, and the thinking of position is often closely related to these factors:

  • Operation habit
  • Visual habit
  • Monomer element relation
  • Product logic

Operation habits refer to the area where the user’s fingers operate. The operation habits of one or two hands and left and right hands are different, but there is a common characteristic that it is much easier to operate the elements at the bottom of the screen than the elements at the top of the screen.

Visual habits refer to the reading and browsing habits of most people. As shown in the figure below, the browsing path when browsing a web page presents an F-shaped trajectory, while the mobile terminal generally has an L-shaped trajectory due to the small screen size.

Monomer element relation refers to the internal connection of each element. For example, common elements in the tag bar, content area and navigation bar are naturally divided into three different parts. Elements in each part have common points because of their functions or meanings conveyed. The combination and connection of elements like other single elements is similar.

Product logic refers to the placement of specific elements in specific locations due to the definition of product requirements or the need for product logic, such as the top area as an attractive banner area to achieve business goals.

Dynamic effect

Dynamic effect has many functions. It has rich connotation than static page. It can convey information, express the relationship between different parts, attract attention, ease the transition between different modes and confirm the effect of the command. For example, dynamic Loading animations ease the anxiety of users and inform them that Loading is underway.

However, design with specific images can convey brand culture. For example, some applications integrate their own brand logo through loading dynamic design to achieve the effect of revealing the brand logo. There are also dynamic effects like sliding in and out when switching between different interfaces, which not only visually make users better understand how these pages come from, but also logically explain the hierarchy of these pages.

This article was originally published by @Thor. Renren is a product manager.