iOS navigation mode for mobile product design

Navigation is always the play of product design, often 90% of the things in product design is doing navigation. The iphone has 3 out-of-the-box navigation modes, tile lists, tabs, and tree structures, each with different toolbars and controls. Three navigation modes can be used independently or blended to allow your users to navigate gracefully through your application.

Write in the front: when you first touch the design of mobile products, the design Guide is not aware of the perception, but still very little. The recent reading of "Touching the heart" found that the author's summary of the navigation patterns of iOS was fantastic, so he wrote down this reading note.

Navigation is always the play of product design, often 90% of the things in product design is doing navigation. The iphone has 3 out-of-the-box navigation modes, tile lists, tabs, and tree structures, each with different toolbars and controls. Three navigation modes can be used independently or blended to allow your users to navigate gracefully through your application.

(Photo source: tapworthy)

Tile List

This method is mainly used for simple applications with only one main screen. This is a good way to browse and discover the application of a class, because his information architecture is simple to the extreme, no information level or organizational structure, like a stack of cards. The main message in the card's "front" show, "reverse" is a simple setting, sliding to the left and right to the page, typical applications such as built-in weather applications.

Of course, tile-list navigation can also be random to your needs to add, delete cards. In a sense, his extensibility is better than tabbed navigation because the class and order are fixed in the tab-page pattern.

Page pagination controls are added to the bottom of the page in tile list mode, which behaves as a row of small dots. The number of small dots represents the number of tiled pages, while the highlighted dots are another form of navigation, showing the location of the current page. At the same time, the page paging control can also be manipulated, click on the left half of the control or the right half or slide directly around can switch to the previous/next page, however, the page paging control can only turn one page at a time, rather than jump directly to a page. In general, page paging is optimal for no more than 10, and more than 20 will overflow the screen ....

In addition, in order to better express the "card heap" metaphor, it is best not to design a number of different sliding gestures in the tile mode. On the touch screen everyone can roll in a single direction, but the 2-direction scrolling requires better accuracy, which some challenges ergonomics.

Label page

The tabs on iOS are generally attached to the bottom of the screen, the tab bar will use the function one by one category, click a tab to jump to the corresponding page, and then the label in the form of highlighting your current position. In tab-page mode, each label page can have its own interface style and specific content and functionality, and looks like it is running an independent application.

The height of the tab bar is 49 pixels, each button will contain a text label and an icon, the width of the button depends on the number of drop buttons, the label bar limit can be put up to 5 icons, more than after the 5th button in the position of "more" label.

Of course, the label bar to 49 pixel height exists in fact occupy a lot of screen space, so in some cases can be appropriate to remove the label bar, the typical book is the application of Full-screen reading mode.

Tree-like structure

The pattern is simply to classify hierarchical information on an inverted branch of the tree. This navigation mode is good for the list, click on one of the list to see the new list, the list can be split again until the details of the entry into the project. A variant of the tree structure is the table view, which we often call "9 Sudoku", which is more graphical.

Of course, depending on the information, labels in the tree pattern can also be grouped. A tree pattern can be grouped into groups, and each group can contain any number of rows.

Comparison of Class 3 navigation modes

Combination application of Navigation mode

Tile lists, tabs, tree structures 3 navigation modes are not mutually exclusive and can be mixed in one application. This mashup can help us overcome the shortcomings of a single navigation pattern.

Modal view

We often encounter situations where you slide a single screen in a path, edit, view information, and manipulate the content on the interface. This is a specific form of application behavior, generally with the process of the interface changes occur, such as a page temporarily replaced the entire application of the display, we call this processing mode "modal view." By default, the mode view slides from the bottom edge of the screen and cuts through half of the current entire screen, and the modal view completes the independent task that is related to the main function of the program, especially for the multi-level subtasks that are missing from the main function interface. This operation will temporarily bypass the normal operation of the application.

Modal views are often used to edit or add content, and when you need it, the modal view usually slides out from the bottom of the screen and then obscures the previous page, and the page that slides out after you finish the task shrinks back, and then you can continue with the previous process. Some controls and interface elements are only occasionally used in secondary tasks, the modal view is a good way to hide them temporarily, and when needed, effectively saves screen space.

Modal view is a bit like a dead end in the navigation, in order to allow users can also easily return to the normal flow, modal view in addition to normal operation and generally have a "finish" button, or "Cancel" button.

Finally, a mobile product design etiquette problem:

When the user jumps from one place you apply to another place to return to the original road, the application should take the initiative to restore the appearance of his last leave (do not reload, you understand!). This is called state recovery, and this constant etiquette is important for the experience of mobile products!

Article Source: ikent.me/blog/3798 reprint Please indicate the source link.