8 Kinds of application of "grey tune" in Web Interactive design

In the interactive design of the web, the transmission of color information is an indispensable part. We often find many "gray" applications, their appearance is always calm and appropriate, maintaining the entire page of balance and unity. Based on some practical cases, this paper expounds 8 kinds of applications of "grey" in Web Interactive design.

First let Mr.gray a simple self-introduction:

The narrow sense of mr.gray

Narrow sense of mr.gray, refers to the absence of hue and purity, only lightness, will be black and white mixed into a middle color. According to different classification methods can be roughly divided into light gray and dark gray two, can be divided into warm ash and cold ash.

Relatively speaking, its characteristics are not high recognition, prolonged engaging, not because of the sharp and dazzling, neutral and mild.

Legend warm ash and cold ash

The generalized Mr.gray

The generalized Mr.gray refers to all the phenomena and things which are neutral, mild and not distinct. The mr.gray referred to in the following paragraphs refer to the generalized mr.gray.

If you mix all the colors together, what color would it be? In fact, Mr.gray is not alone.

Mr.gray is a very attractive gentleman. The more you experience, the more you can understand his value.

Mr.gray is like a rounded corner in a shape that can reconcile some contradictions and make them no longer sharp.

Now let's take a look at the impression of Mr.gray:

Application of Mr.gray in web Interaction design in 8 classes

Mr.gray's modesty and introversion characteristics determine that he spends most of his career playing the role of assistant foil. The following are some examples of actual cases to be described in detail.

1. Disabled or not operable under current scene

The advantage of this kind of design processing is to avoid the invalid operation of the user, improve the user's usage efficiency, and give some information hint. The following illustration is a legend that is disabled, not operable, or has no permissions:

2. Imply a certain order, impending steps, things

This type of design allows users to have a clear overview of upcoming tasks, with fewer and clearer steps that do not put psychological pressure on the user, and instead promote the user to complete the task. The steps in the following figure to create a QQ group are foreshadowed.

3. Weak hints, auxiliary information (including color information)

This kind of application is more extensive, such as a large section of auxiliary information text, some hint information, minor foil information, not commonly used function operation, "gray" processing will make the page harmonious unification, and highlight the most important user experience operation. As shown in Figure 1 below, browsing the photos is the most important experience, and the toolbar for the photo operation is "Gray" and mouseover and rich.

Some additional instructions and operational information in the login and search:

4. Indicates a "hidden" state that is not activated

In web design, it is often necessary to consider the current state, inactive state and other styles. The common way is to gray processing is not activated, in contrast, use a vivid color to tell the user the current position or state.

The following figure is the igoogle contact is not currently in the line scene, using the gray icon to differentiate, this type of design in the Instant messaging products are more common.

5. Secondary link Information

The dark underline will bring a little disharmony to the refreshing page, the "gray" processing can reconcile this contradiction, not only can convey the information that needs to be conveyed accurately, but also can make the page overall harmonious unification.

Apple's web design here has a consistent simplicity, with a simple little underline that conveys a wealth of information.

6. Negative or dangerous actions not encouraged by the user

The "block" operation of Flickr in the image below will stop the friend from exchanging and interacting with you, and the "grey" processing of the operation can help to express the implied meaning of this layer.

Also such as the deletion of the entire label icon.

Stored and canceled operations, one for the bright color of the other "gray" processing, such applications in the Web interaction design is widely used.

This kind of application and disable the use of the scene of some differences, in the mouse when the mouseover, 3lian material, there will be responses, such as the mouse to change hands, object color, and so on.

7. Information separation

Common in the following map of the zebra, dotted line, color block, etc. to distinguish between different information areas.

Zebra crossing

Dotted line separation

Light blocks distinguish between headings and content areas

　

8. The relativity of Mr.gray

Because of the obvious relativity of color, and some web design to maintain the consistency of the overall style, and even the main navigation "gray" processing, however, these processes are relatively, but also can be done prioritize. The main navigation of WordPress in the following figure. Although the current state of the navigation text is gray, but rely on a light background, relatively still more prominent. Just hold on to the relativity of the Mr.gray and use it more freely.

The above content is the individual viewpoint and summary, has the question to welcome the common discussion and the exchange, if has the insufficiency also please not hesitate to enlighten.