Page Components and Style Usage Methods
1. Overview
When multiple pieces of data appear in the same field of vision, we are better able to discover the connections and differences between them. However, when these data are randomly arranged and placed without reasonable classification, hierarchical structure, and emphasis, it will instead affect our judgment and use of the data.
Therefore, this document mainly introduces how to use page layout and component-related functions to make data information display in an organized, clear, and accurate manner, while also making page layout design more beautiful and pleasing to the eye.
2. Design Principles
Organization:
Logically define layout and organize content arrangement. Usually use top-to-bottom and left-to-right structural arrangements, or progressive interactive forms, to highlight common analytical thinking: overview first, focus filtering, then view details as needed.
Highlight Key Points:
Place the most important views and key indicators at the top or upper left of this type of page.
Information Accuracy:
Ensure data accuracy, clarity, and completeness: use correct chart types, and explain data definitions when necessary.
3. Dashboard Components and Styles
3.1 Page Layout
Generally, before adjusting dashboard page styles, we need to first determine the page layout of the dashboard. Common page layouts include:
By default, the page will adopt a "card" layout. At the same time, to adapt to various different scenarios, we can adjust the styles of these layouts (such as: card spacing, background color), continuously try effects, thus creating more combination matches.
3.1.1 Card Style
3.1.1.1 Default Card Style
Universal dashboard layout mode, relatively universal and usable, with obvious grouping and strong information organization relationships, one card presents a small amount of information.
Adjustment Items:
-
Card spacing: 6~20px
-
Page background color: Close to card color (if you want to enhance the effect, you can enhance the contrast relative to the default background color)
-
e.g., 12px, #EAEEF5 (Ibis White theme)
3.1.1.2 Enhanced Card Style
Based on the default card style, you can highlight the card effect by increasing card spacing and enhancing the contrast between card background and page background.
Note: It is recommended to use with card groups to reflect the organization of information.
3.1.2 Line Separation
When you need to save page space, you can use separator lines (1-2px card spacing) instead of large spacing settings.
Adjustment Items:
-
Card spacing: 1~2px
-
Page background color: Close to card color (compared to card style, the contrast with cards is slightly larger)
-
e.g., 1px, #DBDFE7 (Ibis White theme)
Note:
-
Separator lines should not be too obvious, saturation should not be too high, brightness should be moderate.
-
Separator lines should be as continuous and transparent as possible, extend length, reduce quantity, making the page appear clean.
-
When the visual organization relationship is obvious enough, separator lines are not needed
-
Try to use with card groups
-
Maintain alignment
-
3.1.3 Document Style
For analytical reports, daily reports and other report documents, as well as when exporting to PDF documents, document-style page layout mode can be adopted.
3.1.3.1 Title Background Partitioning
In document-style layout, all content is laid out flat on the page, with high content area density, weak page separation, and more integrity. At this time, if you want to show the hierarchy and priority of content, you can perform rhythmic partition layout by filling title background color and setting white space intervals.
Adjustment Points:
-
Card spacing: >2px
-
Page background color: Same as card color
-
e.g., 4px, #FFF (white, Ibis White theme)
3.1.3.2 Chart Form Partitioning
In document-style layout, some cards or chart forms within card groups can also make the page present a partitioning effect.
3.2 Tab Pages
Tab pages in dashboards can be used to contain peer and related content, thus keeping the interface clean.
Usage Notes:
-
Tab page names should be concise and clear, colors should match the theme color as much as possible
-
Tab page quantity should not exceed 5, when exceeded, consider grouping and splitting again
-
Choose appropriate styles according to scenarios, default styles are more concise to let users focus on chart content, new styles can make the overall page richer
3.3 Card Groups
Dashboard card groups can be used to combine content of the same series, making the page more organized and improving reading efficiency.
Usage Notes:
-
Cards within card groups also need to pay attention to layout neatness, specifically refer to the page layout above
-
Theme titles can be highlighted by setting color, background color, font size, symbols, etc.
-
Title alignment should be consistent with elements within the group
-
Separator lines within card groups are the same as in the page, try to keep length long and quantity small
4. Mobile Components and Styles
4.1 Page Header Component
The page header component in mobile light applications can be used as a page title or to highlight key indicators.
Usage Notes:
-
When the page header component displays indicators, the page background color needs to be distinguished from cards to avoid irregular partitioning;
-
When using page components with tab labels, pay attention to choosing matching colors and styles;
-
Page components are recommended to be used only on the first screen, not continuously;
-
Avoid scroll bars.
4.2 Tab Labels
Mobile light applications support setting three-level tab labels, thus forming an information architecture.
Usage Notes:
-
Hierarchical structure settings need to conform to user mental models:
-
First-level bottom tabs: Generally different functional levels, such as "Sales, Inventory, Management"
-
Second-level top tabs: Generally flat layout of similar concepts, such as "Daily Report, Weekly Report, Monthly Report"
-
Evaluation indicator for whether the hierarchy is reasonable: when users want to find "Sales-Daily Report", there should be a trace to follow
-
-
Names of each tab page should be concise and clear
-
Tab content within pages should not be too much (can be displayed on one screen), when too much, consider splitting into second-level top tabs
-
Bottom tab quantity is recommended to be 3
5, top tab quantity is recommended to be 24, in-page tab quantity is recommended to be 2~3
4.3 Card Groups
4.3.1 Large Card Groups
Similar to desktop card groups, large card groups in mobile light applications mainly serve to combine content of the same theme.
Usage Notes:
-
Unlike desktop, mobile screens are smaller, card group content should not be too much, should not exceed the length of one screen
-
Need to set card group title
-
Avoid using separator lines
4.3.2 Small Card Groups
For small card combinations in mobile light applications, related information can be directly displayed by combining with charts.
Usage Notes:
-
Pay attention to highlighting key information/indicators and alignment methods
-
Charts are only auxiliary and decorative, cannot only have charts, and avoid unclear icons
-
Ensure each text is clearly visible (clever use of text cards)
-
Micro charts (Sparkline) were proposed by Edward R. Tuft, and can also refer to Fiori Micro Chart
4.4 Indicator Card Groups
Indicator card groups in mobile light applications can unify indicator styles and neatly contain multiple indicators together.
Usage Notes:
-
Try to keep the number of sub-indicators in comparison indicator card groups consistent
-
When the number in comparison indicator card groups exceeds 5, it is recommended to split into multiple indicator card groups
-
Avoid parallel single-line indicator card groups and pages full of indicator card groups
-
When higher style requirements are needed, indicator cards can be placed in card combinations
When there are too many indicators on the page, how to optimize the page and clearly display information:
- Place important indicators at the top of the page header and set background color
- Can refer to card group usage, by adding charts, changing text arrangement
