UI Angle Analysis Web page Picture Carousel Control Carousel Controls

Source: Internet
Author: User
Tags manual reference require time interval

• Definition of nouns:

Picture

The literal meaning is the picture ﹑ photograph ﹑ rubbings and so on collectively. In the current Internet industry, from the formal perspective, can be simply divided into static and dynamic two kinds;

-Carousel:

Chinese literal: "Carousel", as the name suggests, means to play in turn;

English literal: "Carousel" contains the interpretation of "rotating conveyor belt";

In the current Internet industry, "carousel" is often used to refer to "ad carousel", that is, in a certain ad bit at the same time there will be N ads in turn play, the first occurrence of the ad is random, each refresh will change an advertisement, and so on, so as to ensure that each of the ads appear the same number of times.

-Picture-Carousel Control:

From the UI point of view, the picture Carousel control refers to a screen interface interaction object in a specific region, with some kind of convention rule or mechanism, to achieve multiple pictures playing in turn.

-Our proposal: in the page design, for considering the reference picture area, if the designer has achieved the following goals, you can consider the use of picture-carousel control:

1 increase the utilization rate of unit area;

2) Enrich the display information under the unit area;

3 Increase user's interest in operation;

• Presentation form:

from the perspective of manifestation, the current mainstream picture Carousel control can be divided into the following categories:

1 Slide Mode: In the control area, in the style of similar slides in turn play the picture, only show or highlight a picture;

(Reference site http://m.www.yahoo.com/)

(Reference site http://www.amazon.cn/)

2 Long Tape mode: The current control area, similar to pull strip tape effect, to carry out a lot of pictures at the same time display;

(Reference site http://go.taobao.com/)

(Reference site http://co.youa.baidu.com/content/promo/sxq/index.html)

• Interactive form:

From the interactive level, the current mainstream picture-carousel control is roughly divided into the following:

1) Fully automatic display: No artificial control is needed, which is played by the system according to the set display logic sequence.

(Reference site http://www.qq.com/)

Advantages: Completely According to the designer's idea, will need the information according to the ideal order to sell to the user, without the user control, the user learning cost is very low;

Disadvantage: The user belongs to passively accept object, control power of control is very weak, very possibility will exist current display information and user needs mismatch situation, cause control use efficiency reduce.

Considering that this kind of interactive form to the user's unfriendly, at present in the Internet application has been very few, a small number of existing applications are basically ads to promote the position;

2 Full Manual display: Completely by the user manual operation, realize the user's free control;

(Reference site http://go.taobao.com/)

Advantages: In addition to the default display page, the right to choose to the user, so that users feel more controllable, improve the interface to the user's friendliness; usually provide the user's control original has "page break", "grab drag character", "anchor point locator", etc.

Disadvantage: When the content of the carousel contains rules or sequences, the display efficiency of this control is not controllable;

3 Automatic and manual display: By default, the control automatically plays in accordance with the existing logic, while providing the user with the right to operate effectively, both the advantages of automatic and manual, is the most common picture of the current Carousel control display form;

(Reference site http://space.live.com/)

-Our proposal: in the area that has the tendency of information promotion, such as advertisement display, product detail display, and so on, it is preferred to choose the interactive style of automatic and manual display; In some more emphasis on the user subjective operation of the page, the choice of the full manual display of the interactive style;

• Interval control principles:

For the automatic playback of the single picture display time control, and no accurate time data. However, from the experience, the current mainstream approach is based on the actual rotation of the picture information capacity to determine. In the actual application of this control, it is not recommended to carry too much information on a single picture, so that the efficiency of the carousel control can be reduced because of the long time interval of the carousel;

-Our proposal: in the automatic display stage, in principle, the page switch control in the 2s, in the manual display phase, in principle, require immediate feedback, that is, the fastest response to the user's operation;

• Cycle Control principles:

1 Fully automatic mode: In this mode, in principle, it is required to be able to play the loop effect, in the case of possible, it is recommended to describe the end and start of a cycle by the difference of time interval;

2 Full Manual mode: In this mode, it is recommended not to do the cycle, that is, in one-dimensional direction, there is a terminal state, in order to facilitate user understanding, control;

3 Automatic and Manual mode: In this mode, in principle, it is required to maintain the unity of automatic and manual mode, that is, if the display of the automatic mode is a loop, the manual mode also provides a matching loop control, and vice versa; In general, it is recommended that this mode be used to display and control the

• Page-changing control principle:

1 linear paging: In this mode, usually adopted by one-way or multi-directional page break, to provide user control of the next round of the transfer of pictures, such controls, the requirements of the relative directional character with traceability, the use of linear rotation page, user-friendly memory and operation;

2 Reel Roll Screen: In this mode, usually use directional control keys to operate the scroll of the picture scrolling playback, to achieve the rotation of the picture; In general, we require scroll-type of the latest scrolling display bit and the focus of the user's line of sight, in order to facilitate the user's attention and operation; Scroll rolling mode is the superposition form of linear paging mode;

3 Accurate positioning: In this mode, usually using a locator, provide users with accurate positioning, accurate playback of the operation experience, its commonly used locators include thumbnails, content profiles, small icons and other indicators with indicative functions of the elements;

4 Manual drag and drop: In this mode, the control of the operation of the simulation hand drag and drop map of the feeling, usually, we hand-type cursor position for the user's visual focus, that is, users focus on the direction and mouse drag the direction of the opposite;



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.