Mobile Internet product Design: Functional design of sliding gesture

Article Description: Explore the sliding gestures.

Nokia N9 just released, sliding gestures take on more functional operations. From the button phone to the iphone's home button, people can not help but Lenovo, the realization of full touch screen mobile phone is already in sight.

The IPhone home button has undertaken too much operation, single repulse out of the program, double-click into multitasking, custom three-click to show the auxiliary operation, combined power-on key screen, I am afraid this is the most frequently used in all mobile phone keys. But more and more functions, either continue to press the button, or dig new gestures to exercise, responsibility naturally falls on the click and slide of the two most basic gestures operation.

Compared to the computer mouse, touch-click there is a problem, but at the same time interactive design can be taken in a variety of optimization measures.

Touch screen form itself single, there is no key to click on the points. For the mobile phone system, you can get the touch area and time, based on the touch target and the length of time derived from the long press operation, the equivalent of the right mouse button click, derived from the touch of time interval double-click, but with the mouse double-click there is a difference. With the mouse on the desktop to open the application as an example, the mouse pause after the first click to select the target focus, the second is equivalent to confirm the target, touch screen click without the mouse to stop the effect and select the target focus of the concept, in contrast to simplify the operation, but the necessary rich interactive effect, such

The mouse can be accurate to 1 pixels, touch screen Click Area is recommended to 29 pixels, and the user clicks on the touch screen target area when there is no real point, there is a certain deviation. This kind of flaw is especially obvious in the key-intensive input method, and frequent delay will affect the user's operation flow.

The slide gesture can be combined with a long press to drag, except to stay in the sliding page display area only. Sliding simulation of physical motion law, slow sliding when the page scrolling is equal to the area of the finger movement, fast sliding when the range of scrolling to calculate the inertia of the finger movement, the page moving speed from fast to slow. Mobile phone parameters are: Touch point coordinates and time, but the coordinate point and time relationship is not one-dimensional, touch point coordinates with time changes will also change, from this can be analyzed finger movement starting point, terminal, moving speed, acceleration and sliding curve, etc.

Compared with the click and Operation buttons, the sliding advantage has many advantages:

1. There is no clear target area. For example, any location on the browser page can perform sliding operations. N9 Shing up to show multitasking, slide right to display the message push and function list, the ipad version of Maven browser to limit page scrolling to specific areas, but it will affect the efficiency of the page, bookmarks and else-mobile like the original level of click operation into sliding operation, User handheld devices are different in the same way, will also encounter operational efficiency and the single stage of the limited functionality of the problem, the advantage of its form occupies a small space.

2. More options can be accommodated within a small area. Baidu Mobile Input method of pinyin thumb input, "2abc" at the same time displayed in a button, the key on the sliding number "2", using the direction of the slide to choose a different letter or number. There are also MIUI's newest hundred-variable Shing, which are also taking advantage of the same starting point but the direction of different sliding differentiation operations.

3. Faster than continuous clicks. Swype Input method is fast, the click into a sliding operation, eliminating the continuous input process of the fingers repeatedly raised and pressed.

4. Make up for the difficulty of accurate clicks. the iphone and WP7 use a sliding operation to adjust the text cursor to slide the displacement instead of clicking the insertion cursor.

The touch area outside the N9 screen is just a transition program in the development of the full touch screen handset. In fact, there is no touch area can be competent to the existing sliding, guess the system in determining the sliding start point can use the edge of the screen as the benchmark, increase the concept of touch area is simply "deceive" the user, reduce misoperation. The slide operation does not respond as quickly as clicked, and can be canceled if the error is detected halfway through. Sliding from the screen to the screen should allow for sliding within the page because the system cannot predict whether the endpoint will be outside the screen at the beginning of the slide.

(Pictures from Ifanr)

Three main screen left and right sliding switch, the form and operation effect conforms to the physical law. In the application, if it was previously entered from multiple tasks, sliding from the touch area in four directions can return multitasking, the shadow of the boundary from the application returning multi-task can be seen as the front and back of the two interface, the application in the three main screen ahead. When multitasking enters the application, the application slides from the right side to the display area, instead of zooming in on the multitasking interface, where the relationship between the interfaces lacks a sense of direction.

Perhaps affected by the iphone, this operation takes time to adapt, when the video was seen from the top of the slide will show the message notification bar, sliding from the bottom is to return or show multitasking. N9 's multitasking is mistaken for Safari's multiple windows, multitasking as a three-master screen and displaying the thumbnail of the application, with no advantage over the icon-type multitasking except to increase the click area. Safari uses page thumbnails to display multiple windows, because thumbnails are more efficient than site headers, and they can also display the loading status of a Web page. N9 Multi-task interface long according to the operation of the "delete" button, why many times, not directly on the thumbnail display "delete" icon.

N9 's sliding operations do have innovations that are far more than the iphone, but not perfect.

What happens when the iphone removes the home button? The existing system interface structure completely conforms to the condition.