Visual guidance in Mobile terminals

In traditional web design and graphic design, a large number of information planning needs the designer to use reasonable typesetting, convey the information smoothly to the user, the continuous line of sight moving reading will give people a comfortable feeling, on the contrary, the sight is guided by the full screen jump to jump, will let the user at a loss, give a disorderly feeling, Unable to receive information better.

When reading information, often by the surrounding text and image interference, not so smooth, according to the human eye visual psychology, there will be several easy to guide or interfere with the direction of visual movement characteristics.

In the top left picture, the first sight is not the red color block? In the right picture, is it the feeling that the red color block is protruding forward, and the gray color block is receding? This is caused by visual psychology, long wavelength of color than the short wavelength of color more easily recognized by the human eye, that is, warm, bright than cool, dim color More "Jump" some, when a page, "more jump" elements of the arrangement, the eyes of the human eye will be with these attractive small elements also jump to jump, feel "Page Flower" There is this reason, the rational use of this rule, you can achieve the purpose of enhancing the smooth transmission of information.

People's pictures can lock the user's eyes, traction the user's line of sight, reasonable use can foil the atmosphere, improve the interest of visitors, leaving a deep impression.

Most people will have such experience, when you see 1 when you want to find 2 in there, the visual some of the digital sensitivity, many design in need of sight traction, with numbers when the head, so that the line of sight in even colorful pages will be a reasonable jump.

&http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp;

Visual path in Mobile terminals

Mobile terminals with light, small screen, single screen content and so on, the performance of space than the Web a lot less, but the visual rules are interlinked, many in the plane, the Web application of the rules in the mobile terminal also apply as usual.

The left image is the iphone platform QQ2010 interface, vision through the vivid color of the Avatar picture traction line of sight down.
On the right is the iphone platform time MOBILE interface, the bright red title bar shows the type of news, and the line of sight jumps quickly across the red headlines, helping users find the type of news they need faster.

At first glance on this screen, you will find that the sight is quickly being caught by the orange text, and then unconsciously jumping between the orange text, and looking at these paragraphs is really not very important news date information ... Relative to the main information headlines are ignored, users will hesitate to find the white ignored news headlines, resulting in the line of sight confusion and information transmission is not smooth.

A large, crisp color for the title bar, attract the user's view, bring affinity to the feeling, the main content area with small area color block or colored text to traction sight, extremely cherish the cautious use of icon and colored text, to achieve a user to see the bottom from the beginning, Fei zhi 3,000 feet of smooth feeling, get no extra interference comfort experience.

In the design process, the product Manager proposed "XX link is very important to emphasize, can you add rough to red?" "" The color is monotonous, want rich color collocation "and so on opinion, after communication denied these views, in the design of typesetting information is the most important and the most basic requirements, and then rich and beautiful picture processing layout to interfere with the smooth transmission of information is also undesirable, especially in the terminal small screen situation, compared to the big screen pc , each element and the word processing will greatly affect the whole screen to the big feeling, affect the normal movement of sight.

For a few examples on the mobile terminal design attention to the problem of eye movement, mobile terminal design and PC-side design has a lot of similarities, especially in high-end models and large-screen models, I hope these in the Web, graphic design experience can be used in a large number of mobile terminal equipment, Guide us to make more and better user experience products.

(This article originates from Tencent WSD Blog, please indicate the source when reprint)