How to Design Mobile Reports with the App Design Thinking

Top Tab Bar:

The navigation bar remains visible, highlights the selected tab, and allows you to switch between tab pages instantly.

You can click tabs at the top to switch between views, which meets the need for an immersive reading experience.

Advantages:

1. The content of the most important page is directly displayed.

2. The category positions are fixed, clearly indicating the current entry.

3. The navigation depth is reduced, which enables easy and frequent switching between different entries.

Disadvantage:

If too many functional entries exist, this pattern becomes cumbersome and less practical.

Bottom Tab Bar:

Compared to the top tab bar, the bottom tab bar is closer to the natural thumb zone, offering better ergonomics in human-computer interaction.

Advantages:

The bottom tab bar is more convenient for your operation.

Disadvantage:

If a tab contains too many or overly long components, you need to scroll down to the bottom of the page to find the tab bar.

Side Tab Bar:

The tab bar can be positioned on the left or right side.

Advantages:

1. It is easy to find with good visibility.

2. It is convenient for your operation.

Disadvantage:

It is less visually pleasing compared to the top/bottom tab bar.

Tab Arrow:

Tab arrows, compared to tab bars, can help maintain a clean page and complete content, allowing you to switch tab pages conveniently by simply clicking the left or right icons.

Advantages:

The content of a single page is highly coherent and well-focused.

Disadvantages:

You cannot jump to non-adjacent pages; you can only view adjacent pages sequentially.

Grid:

A nine-grid layout is a common functional navigation pattern that organizes features for you to select.

Advantages:

All entries are displayed clearly, enabling you to quickly locate and access the entries.

Disadvantages:

1. You need to return to the starting point when navigating between menus.

2. Excessively long titles are not suitable for this pattern.

Card:

Cards provide quick and relevant information in a condensed format.

A card is a small rectangular module containing images and text, serving as an entry for you to access more detailed information.

Advantages:

Operations in each section are relatively independent, without being disturbed by information from other sections, which reduces clutter and provides a better browsing experience.

Disadvantages:

Too much information cannot be accommodated.

List:

When the types of information on the page are relatively uniform, or when the information serves merely as an entry for more detailed information, you can use a list structure. This structure can efficiently and clearly present information and accommodate a large volume of content. You can click the list, and other linked charts will respond accordingly.

Advantages:

1. The vertical length of the list is unlimited. You can scroll up and down to view as much content as needed.

2. Lists are visually organized and pleasing, which makes lists highly acceptable for users.

3. Lists can display long titles with secondary text.

Disadvantages:

1. After you jump to a page, the content always starts from the top.

2. Displaying too much content on one page can increase user fatigue.

3. The key content on the page lacks emphasis.

Accordion:

More details can be displayed on a single screen, with no need to navigate between pages.

Advantages:

1. A two-level structure can accommodate a large amount of information while maintaining a clean and simple page.

2. Page jumping is reduced, and operational efficiency is improved.

Disadvantages:

The category positions are not fixed. If too many items are expanded, the page layout can be easily disrupted.

Radial Layout:

The content is partially hidden to guide you to swipe left and right to view it.

Dropdown List：

It is a transient navigation method, which means that the list items only appear when needed. It enables you to perform more actions within the limited screen space and can be used to filter information from different categories of information within the same list.