All Products
Document Center

Display information

Last Updated: Feb 05, 2021

Properly organized and displayed information helps users better understand and find content, making your application easy to use. The mPaaS MINI provides different information display components, and you can select the appropriate components to display different types of information according to the page requirements.


The list is a common form of information organization. It divides the content into a number of rows. Each row can jump to the corresponding details page to display more information.



In the list, you can use a slide to show the information out of view, and group the information.

Visual style

The list consists of a title, a subtitle, and an icon. Icon is optional based on your needs



Take a simple function list page as an example. It uses a list to display various functions on a single page, and the user can find different function items by navigating through the list.

Settings page:


Personal hub page:


Notice bar

The top notice bar is inserted between the navigation bar and the page content to inform the user of important information and announcements.

Definition and principle

The notice bar is used to display relatively important anomalies and announcements, such as the product is about to be maintained, and a bank channel will be unavailable during certain period.

  • Do not use the notice bar to display product operation information, otherwise it will reduce the credibility of the announcement.
  • The length of the announcement copy should not exceed the screen width, and the portion exceeding the screen width should be omitted by using “…” instead of using the line break.
  • After the user taps to view or closes the announcement, the same information should not be appeared again to disturb the user.

If you have more detailed content, they can be displayed on the details page by tapping the announcement, which should be disappeared after returning.


Visual style

You can add an arrow to view details or a button to close the announcement.

Below is the arrow to view details. After the user taps it and enters into the details page, the announcement disappears.


Below is the button to close the announcement. After the user taps Close button, the announcement disappears.


Step bar

The step bar shows the number of steps and the current step.


Definition and principle

The step bar shows the user that a task can be split into several steps, and the order of these steps. If these tasks are split into several different pages to display, the step bar can also be used to navigate through these pages.


Taking credit card repayment and transferring to Yu’E Bao as an example, after the user finishes, these two tasks still take some time to complete. Therefore, you need to inform the user to wait through the step bar on the result page.

Result page of credit card repayment:


Result page of transferring to Yu’E Bao: