All Products
Search
Document Center

Navigation

Last Updated: Feb 05, 2021

Navigation is the most critical factor in ensuring that users don’t get lost when browsing through web pages. Navigation needs to tell the users where they are, where to go, and how to go back. The mPaaS MINI provides several navigation components, including navigation bar, segmentation control, and tab bar.

Navigation bar

Your page is required to embed the navigation framework of mPaaS MINI before being displayed to user. The mPaaS MINI navigation bar directly inherits from the client, so you don’t need to or can’t customize the content within it. However, you still need to define the jump relationship between the pages so that the navigation system can work properly.

The mPaaS MINI navigation bar is divided into a navigation area, a title area, and an operation area.

  • Navigation area

The navigation area controls the process of program page. As shown below, it appears different on iOS and Android clients:

1

In the navigation area, there is usually only one operation, that is, moving up one level. You can only define its contents. When the user enters into more than three levels of your page, both Back and Close buttons will be displayed; Click Close button will leave the current page and return to the mPaaS MINI.

  • Title area

You can define a title for each page, the text display area of the title is fixed, and the excess length will be omitted. If you use default setting, the name of your service or app is displayed by default.

  • Operation area

The operation area displays More icon by default, and tapping the icon opens an action menu. You can also customize the operation area, defining up to two icon-type action buttons or one text-type (four characters) action button.

Custom color

The mPaaS MINI navigation bar supports for custom basic background color. If satisfied with usability requirements, the selected color needs to be harmoniously matched with three sets of main navigation bar icons provided by the mPaaS MINI. The title color will be automatically adjusted to white or black to match the background color. When you choose colors, it is recommended to refer to the following color schemes:

2

Segmented control

The segmented control typically appears at the top of or within the page, allowing users to quickly switch between different contents within the page.

Design principles:

  • Highlight the current option to let the users know where they are. You can set up to 5 options, and use a swipe for excess options.

    3

  • The color of top segmentation control can be customized. When choosing a custom color, pay careful attention to the usability, visibility, and operability of the page tab bar.

    4

Wrong example:

5

Tab bar

The tab bar is used to organize the page with information structure in one level. It allows you to design a more flat application information hierarchy, which helps users explore more content.

The tab bar is at the bottom of the page, allowing users to quickly switch between different pages.

6

Design principles:

  • Set up to 5 tabs. When you have 6 or more tabs, use the More tab for the last one. The More tab can show more navigation options.

  • Custom icon and text are supported for the tab bar, but the color cannot be modified. Only the standard link color provided by the mPaaS MINI can be used.

  • When switching between pages, you should switch within the current page instead of opening a new page.