Sliding dimension

At the bottom of the iOS interaction model, there is a "space" concept (specific to the iOS space model), while the most basic attributes of space are three dimensions. Sliding depends on the two-dimensional environment of the screen, you can also think from the perspective of the dimension. The most common slide, such as the operation of removing SMS messages in iOS, is that the sliding is the most basic and can be understood as one-dimensional, given the unique function of the operation. But if you think that sliding is that simple, it may overlook the myriad variations that sliding can bring to design.

When the sliding is given function, and interface (information or control) with a strong plasticity, and can effectively improve the operation of ease of use, efficiency, effectiveness. According to the sliding dimension, it can be divided into one-dimensional sliding and two-dimensional sliding, and it can be divided into continuous and discrete by the way of sliding control interface. Some examples are given in detail.

Mailbox a one-dimensional, discrete type of sliding is used when the mailing list operates on a message:

1 slide to the right the mailing list of a mail entry, according to the length of the sliding distance has been read, delete operation, release after execution.

2 slide to the left of the mailing list of a mail item, according to the length of the sliding distance of the occurrence of a to-do item, classified file operation, release after implementation.

(Pictures from Ifanr)

Baidu Browser page Scaling function, the use of one-dimensional continuous sliding:

1 Displays the most common operations by default in the toolbar at the bottom of the interface.

2 when the toolbar slides, the toolbar changes to a page-scaling control;

3 by sliding distance to control the size of the page zoom (the more right the larger), at the same time the top page to the Zoom center on the left, real-time feedback page scaling effect;

4 Release End zoom operation, get the scaled page.

When the function of sliding is increased, or more complex control is needed, one dimension cannot be solved, and the two-dimensional sliding can be Wi Cheng.

iOS default 10244.html "> Video player Video Retreat control, using two-dimensional sliding:

Operation: Slide in the vertical direction after the slide block, according to the sliding distance switch speed, and then slide forward and retreat, after release video progress into effect.

Effect: The following figure Green line for hand actual sliding distance, Purple Line for video advance and retreat range. At different speeds, the same distance between the horizontal sliding, video advance and retreat of different amplitude, the maximum speed, the minimum slow speed.

If the slide operation of the video player is abstracted, it can form a two-dimensional space model with two dimensional sliding speed control video progress, as follows: The vertical slide, and the speed of advance and retreat is chosen by discrete way. Horizontal sliding to control the range of video advance and retreat by continuous means.

Similar to the mammoth browser page speed rolling function:

Action: When scrolling vertically on a page, the page scrolls with the default sliding speed, and if you slide horizontally from the right edge of the screen, you can choose a different scrolling speed (the faster the left), and then slide vertically to scroll the page.

Effect: hand sliding down the same distance, the speed of the page scrolling large (below the Green line to show the actual hand sliding distance, Purple Line to indicate the page scrolling amplitude)

The two-dimensional spatial model of scrolling function is as follows:

The above two two-dimensional sliding examples are to influence another dimension's control of amplitude by changing the velocity in one dimension. Snapseed two-dimensional sliding operation is more simple and easy to use, vertical sliding fixed distance switching function at any position in the interface, horizontal sliding control the parameters of the specific function. If the sliding operation of Snapseed is abstracted, it can form a two-dimensional space model which realizes function switching and parameter adjustment through two-dimensional sliding:

As a result, when two dimensions are free to slide, sliding can become drag. In this case, the function of the drag, to determine the standard of this function in addition to the above mentioned sliding distance, but also can be hand or dragged animal body to reach or leave the area. For example, in launcher, press the apps to enter the level two interface, hand sliding to the corresponding area release activation operation.

The sliding gesture interprets the design idea of "fuzzy precision" and improves the usability of operation effectively:

1 easy to learn and form idioms.

2 use in mobile environment, suitable for single hand operation, high efficiency and easy to control.

3 by direct manipulation of the object or need to appear, instead of toolbars, menus and other commonly used controls, save the interface space for information.

4 easy to become a product killer function and spread point.

When the sliding is given function, and with the interface (information or control), can have strong plasticity, can be from the following aspects as a point of view, combined with product function to think:

1 sliding with simple functions can be one-dimensional; When you need to add a functional category or intensity, you can raise the dimension to form a two-dimensional slide or drag.

2 for the function of sliding, to determine the function category or strength of the standard can be a sliding line distance. When a drag is assigned to a function, the standard can be the area where the hand or dragged animal body arrives or leaves.

3 to use the definition of the controller in human-computer interaction, the sliding can control the interface by two ways, continuous or discrete.

Finally, when designing slides, consider:

1 sliding is not an end but a means of first function after interaction.

2 according to the interactive design from big to small guiding ideology, for the dimension to give function before, first comb the function architecture and priority, the most commonly used functions before or set to the default effect. Such as: The most easily triggered in the maibox to the right to slide the first level, is given the most commonly used read function.

In the video player, the default is to speed up and down when the area of the playing progress bar slides. Precise control is required to pass the vertical sliding speed.

Baidu Browser, the default display of the most commonly used toolbars, sliding to show the page zoom control.

3 in the analysis of specific dynamic interaction effects, you can refer to the design interactions of the mouse drag operation of the analysis table (as shown below), create a sliding table to help clarify the idea (X axis can be a sliding state subdivision, the Y axis can be the sliding process involved in the interface elements and controls).

Pictures from designing web interface

4 Some of the complex sliding operation has a certain cost of learning, can be used as a shortcut, but also the need to have a regular click can also be achieved by operating mode.

Ios Human Interace Guidelines

IOS Wow Factor

Designing the IPhone Apps

Designing Web Interaces

Interaction