Interactive design of mobile phone Interface: Reasonable navigation method design

Article Description: Mobile interface commonly used navigation design analysis.

The so-called interactive design, in fact, is the design of how people send instructions to the machine, how the machine to convey information to people, Shilai is for interaction. When there is little information to convey, it's good to do it, just like Google's search box, just put it on a white bottom. But when the information is massive and difficult to render all on a screen, it is necessary to organize the information effectively, hide some of the information first, and then lead the user to it when they need it. In the interface design, broadly speaking, the process of transferring a group of information to another group of information is called navigation.

Clearly defined, we should know that a good navigation design should let users understand:

1. Where is it now?

2. Where have you been before?

3, in the future should/can go where

4, How to

5, how to return

To determine whether a navigation design is reasonable, you can also use a few of these to compare. Now, let's take a look at the commonly used navigation methods in the mobile interface.

One, drag

definition: the finger is pressed on the screen and translated in a certain direction.

applicable scenario: to render the information beyond the scope of a screen can be accommodated, in accordance with the user's psychological model, can be content in one-dimensional or two-D direction of the layout, drag the screen content to browse all the information.

For example, a very long article, ebook, list (vertical one-dimensional), one-year detailed price line chart (horizontal one-dimensional), maps, 1:1 displayed pages and pictures (two-dimensional)

discussion: Yes, you're right, it's the simplest and most basic gesture on the touch screen phone. According to the definition of navigation, this is really a way of navigating, the user can drag a screen in a direction to browse information outside the current screen. It is easy for users to learn to use this kind of navigation, that is, the contents of the block outside the frame to see. The simplest way is often the most effective.

Perfect Endless:

Although this is the most popular way to navigate, there are still a lot of ideas to play in order to design a navigation that conforms to the 5 basic principles listed just now.

Knotguide on the same page shows the schematic and explanation of the knot. Too long narration text needs to hide a part first, drag to browse all. In order to let users know where to go in the future (3), it gives the bottom of the text a half-through effect, to imply that there is still a part of the show, you can continue to look down. Also, when you first enter the page, the scrollbar on the right side of the text area will be displayed for a short period of 2-3 seconds, and then disappear, which can have the same hint effect (this may be the default effect built into the Android platform).

The acurrency will be horizontally arranged across the screen for a variety of rates that cannot be displayed temporarily. To show where to go in the future (3), it leaks a bit of the hidden part and folds behind the current page. If you remember correctly, this design should be inspired by the Mac's files and album browsing.

The most classic drag-and-drop navigation should be the iphone's homescreen. On the homescreen, Apple designed a position indicator. This can help users to easily understand where (1) is currently, and where to go (3). At the same time, when dragging the screen, Apple also designed a translation of the transition animation, which is good to help users understand how to go (4), How to return (5).

When the content of the Web page is larger than the screen display, the Android built-in browser displays two gray scrollbar on the lower and right sides of the screen when the user drags the page, hinting at the current position of the user (1) and where it can be moved (2).

Two or one-D entry

definition: each piece of information is listed as a single item, displayed in a vertical entry.

Applicable scenario:

Information can be combed into many projects, the project and the project has no conceptual intersection, the total number of 15 or less, and then have to consider more than one level.

It is very suitable for the display hierarchy of hierarchical structure, a layer of drilldown down, clear and orderly.

discussion: One-dimension entry is a simple and common navigation method in mobile phone interface design. Each item can go to the next level after clicking. But the display of the project should not be too much, in the ocean of information dangling to find what you want is very annoying. If there are too many items on the first level, you can consider doing a classification, and then a level down.

Perfect Endless:

In order for the user to know which item to choose (3), the entry will display the title with the largest size. At the same time, there will be some ancillary content to help users determine, such as what the item contains, the current status of the item, the item is not read under the subproject, icon.

If you have too many projects and don't want to be graded, you can group items, add names, and visually process them.

Since there is no "back" on the iphone, it has designed a unified navigation rule. The key to the table "back" is always in the top corner of the screen (5), and the key to the table "Finish" is always in the upper-right corner. At the same time, the key will also write "back to where."

The project is distinguished from the items that have been entered, and the user can know where to go (2) and Where to go (3).

The piano simulator can also be viewed as a vertical one-dimensional entry. This position indicator on the right can be viewed as a personalized scrollbar, which can be dragged to change the current position (4,5) or to display the current position (1).

Sorting list items by a rule and showing the sorted headings increases the user's tolerance for long lists, as well as hinting at the user's current position (1) and how to go next (3) to find the appropriate item.

[1] [2] [3] [4] Next page