current position:Home>Of App Design Pattern - Navigation Design

Of App Design Pattern - Navigation Design

2022-05-07 21:14:04Qingdeng ancient temple


Editor's Guide : Clear navigation design can help users quickly get the information they need , Let users focus their attention effectively . however , Navigation design needs to be planned for different scenes and purposes . In this article , The author of APP One of the design patterns —— The navigation design is summarized and analyzed in detail , Let's take a look .

APP Design pattern —— Navigation design


One 、 Primary navigation / Main navigation

1. Tag navigation


Tag navigation is also called Tab Mobile navigation , It is the most widely used navigation design in the mobile terminal market . Tag navigation is usually divided into bottom , Top , The top 、 Bottom mix uses these three modes .

1) Bottom navigation

Use text and icon to show . Generally speaking, there are 3~5 A label , It is suitable for frequent switching among several types of relevant information . This kind of information has higher priority 、 Users use it frequently , They are independent of each other , Guided by tabbed navigation , Users can quickly switch between pages without losing their way , Simple and efficient .

Its disadvantage is that it will occupy a certain height of space , If the user is a small screen mobile phone , The visual experience is not very good .

The following applications are WeChat Facebook

APP Design pattern —— Navigation design


2) Top navigation

When there are more content categories , The user's opening rate of different content doesn't vary greatly , Need to switch quickly / When you call it out , Top navigation design pattern is often used , Common in tools APP in , Such as Wave Analytics Drop taxi

APP Design pattern —— Navigation design


3) Top 、 Bottom double Tab Navigation

Tabbed navigation except at the top and bottom , In addition, some products with more content will adopt the top 、 The bottom mix uses tabbed navigation , Such as Simple books Netease cloud reading

APP Design pattern —— Navigation design


2. Drawer navigation


Drawer navigation refers to some function menu buttons hidden behind the current page , Click the entry or slide to pull out the menu like a drawer .

This navigation design is more suitable for secondary functions that do not need frequent switching , For example, for settings 、 About 、 members 、 Hide functions such as skin settings . The pictures below are Wave AnalyticsGadgets NewsMy Rolls and Perisfind

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


The advantage of drawer navigation is to save page display space , Make the main page more concise and beautiful , Let users focus more on the current page .

The disadvantage is that the secondary function entrance is relatively hidden , It's not easy for users to find ; To use the secondary function, you need to click , Increase user cost .

3. Desktop navigation


Desktop navigation is similar to the operating system or launch control panel , Its feature is that the home page consists of multiple buttons . When balancing the layout , Buttons are usually the same size , With 3*3、2*3、2*2 and 1*2 And other forms are arranged on the desktop . When you click the button , Jump to other internal subsystems / Sub module .

Pictured ,Strides and Finance A balanced layout based on circular buttons is adopted :

APP Design pattern —— Navigation design


and 360 and Japanese fifty tone chart A balanced layout based on rounded rectangular buttons is adopted :

APP Design pattern —— Navigation design


notes : The rounded corners of the rectangle are getting smaller and smaller , Even disappear into a square , The buttons are often separated by a square grid , Make the best visual effect , This pattern can be found in the next section “ Palace format navigation ” in .

There are still a few applications on the market , Their internal ecology is complicated , Provide ( Own or from third-party services ) See things in a blur 、 Numerous service items , Some service items are carried out alone , Make an app , Can rival a small Internet company , Even medium-sized Internet companies .

But for business integration 、 Platform building 、 System building 、 Service flattening , They will be stuffed into a “ the outer surface ” in , formation “ Super service platform class ”APP, For example, Ali department Alipay and Qianniu worktable

APP Design pattern —— Navigation design


The service items on the homepage of Alipay , Can be in “ All ” Personalized configuration in the page ; Three party service on the front page of Qianniu workbench , Can be in “ Set up ” Personalized configuration in the page . Two APP Support users according to their actual needs and frequency of use , Optimize the display order of service items , Optimize the entrance .

APP Design pattern —— Navigation design


such “ Super service platform class ”APP, At present, I have only seen in Alibaba products , Its characteristics are :
  1. high frequency / UHF use , User stickiness is very high , Applications are in a market monopoly , Almost irreplaceable products ( The advantages of ecological greatness );
  2. There are many kinds of application services and they are flat ( Make the parallel desktop layout mode a must );
  3. It can be used as enterprise mobile background ( Alipay's services include basic necessities of life , It can be regarded as an enterprise or an individual ), I call it “ Walking ERP”;
  4. Strong business atmosphere .

Best practices : There is no primary or secondary menu , Each menu takes up the same amount of space . The menu is divided into primary and secondary , The main ones occupy a large space , The rest take up less space . When using desktop navigation layout , Give full consideration to providing customers with personalized and customized functions .

4. Palace format navigation


Palace grid navigation is to aggregate all the main entrances in the main page ( Because its layout is more like traditional PC The icons on the desktop are arranged , Also known as “ Desktop navigation ”), Each palace is independent of each other , There is no intersection between their information , Can't jump to each other .

Because of this trait , Palace navigation is widely used in the center page of various platform systems . This is the first way that users can't see content in the first place , Choice pressure is high , So now we use this kind of navigation APP Less and less , It is often used in secondary pages as a graphical form of content list , Or aggregation as an entry point for a series of tools . The following applications are nailing and epocrates

APP Design pattern —— Navigation design


Palace format navigation as secondary navigation :

APP Design pattern —— Navigation design


5. Rudder navigation


In some cases , Simple bottom tab Navigation is difficult to meet more operating functions , At this time, we need some extension forms to meet the requirements , Sina weibo 、lofter、 The bottom of idle fish adopts rudder navigation , Rudder navigation ( I've seen others call me that before, so I'll call it that ).

Compared with tabbed navigation , The difference is that the rudder navigation puts the main function button similar to the production content in the middle , The label is more prominent , At the same time, the main function label has been expanded , Therefore, it adds some personalized highlights to the design . Such as Sina weibo and Education Park

APP Design pattern —— Navigation design


6. Metaphorical navigation


The feature of this mode is to use one page to reflect the whole application . Often used in games app, Such as Air Supremacy and 2020:My country.

APP Design pattern —— Navigation design


Besides , Sorting items ( Such as all kinds of notes 、 Books 、 decorum in drinking ) application , And other single function applications can often see metaphorical Tab. Such as DAKA Graphite document Jigsaw sauce and Moment:

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


Best practices : Be careful when using metaphors , A metaphor that is not clearly implemented , It's counterproductive .

Two 、 Secondary navigation


Secondary navigation is used to navigate in pages and modules , Therefore, this application usually has at least 3 Layer information structure , The most common is the vast majority of domestic APP All have “ my ” Function menu .

1. List navigation


List navigation as an information organization framework , It is an essential information bearing mode in product design .

List navigation is similar to grid navigation , Often used in secondary pages , It will not show any substance by default , So usually app Don't use it on the home page . This navigation structure is clear , Easy for users to understand , Can help users quickly locate to the corresponding page . The following applications are WeChat and Strides

APP Design pattern —— Navigation design


Each list in the list menu navigation points to the corresponding function / Content options , It has many derived forms , Including personalized menu list 、 Group menu list and enhanced menu list . The enhanced menu list is based on a simple list , With additional search 、 Browsing and filtering functions .

The following applications are :QQ Youdao cloud notes Retrica and Strides:

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


Best practices : List menu navigation is suitable for long titles or subtitle descriptions , Using the class table menu navigation should provide a way to return to the class table page from the sub page , Usually add a button with menu words in the title bar as the return button .

2. Tabbed


The bottom tab is now almost IOS and Android Two systems ( Blackberry and webOS It is also more extensive , But because it is no longer the mainstream system , So let's not talk about ) Camp , Standard configuration for most applications . Such as FacebookTwitter WeChat and Sina weibo

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


There are also many applications , take Tab The label setting is under the navigation bar , Top navigation , A bit similar to traditional website navigation , Such as 360 Cloud disk Scallop words 、 douban and Facebook etc. .

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


Best practices : When using tab navigation, pay attention to visually distinguish between selected and unselected options .

3. Gallery


The gallery interface is divided into content blocks for navigation . The content area usually contains separate articles 、 title 、 Photo 、 Products and others can be placed in the content area 、 What is shown in a grid or slide . Such as TED、BBC NEWS、Bilibili、 Sohu Video, etc .

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


Sometimes if the content area is arranged in groups , The content of the group should be designed to be easily browsed by users , If the side is used Tab form ( Also known as drawer navigation ) To manage group content , Let users be able to Tab Middle switch , View different groups , The following applications are My Rolls and Perisfind

APP Design pattern —— Navigation design


Best practices : The design pattern of gallery interface is suitable for the users who want to browse 、 Frequently updated content .

4. Page rotation


The common mode of page rotation is to use the left-right sliding gesture to quickly switch between pages , When the user swipes, the next page will be displayed . Page indicator (IOS Small points under the system ) Displays the total number of pages available for switching . The following applications are tapas and ConnectID

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


Page rotation navigation mode has certain limitations , When the page exceeds 8 Time , Consider using list navigation .

Best practices :
  1. Page rotation navigation is suitable for a small number of pages ;
  2. Use indicators to reflect the number of pages and the current page ;
  3. Sliding left and right gesture is the most common rotation navigation gesture .


5. Picture rotation


Common forms of image rotation , Is similar to the 2D Carousel form , The picture can slide left and right , And slide all the way in any direction to return to the original picture . The following figures are from the application TEDBBC NEWSIMOB

APP Design pattern —— Navigation design

APP Design pattern —— Navigation design


3、 ... and 、 Other types

Instrument panel


The dashboard summarizes some key indicators . After entering each measurement method , Can learn more additional information . This main navigation mode is often used in financial applications 、 Analysis tools 、 Sales and marketing applications , Such as Statistics of the Alliance

APP Design pattern —— Navigation design


Best practices : The dashboard only needs to load the key data confirmed by the research , Don't need too much content .

author : Silver haired Chicago

Link to the original text :https://zhuanlan.zhihu.com/p/27382083

This paper is written by @ Silver haired Chicago Authorization is released when everyone is a product manager . Unauthorized , Prohibited reproduced .

Title map from Unsplash, be based on CC0 agreement

copyright notice
author[Qingdeng ancient temple],Please bring the original link to reprint, thank you.
https://en.fheadline.com/2022/127/202205072037507624.html

Random recommended