UI Specs of Components
Overview
This chapter defines the style and adaptability of the base components used in Mini Programs.
- Components are the basic building blocks of the view layer.
- Components come with some functions as well as the styles of Mini Programs.
Spatial Relations
Spatial Relations Between Components and Page Content
A Case
Color Schemes
Choice of Scheme
Some base components are divided into two forms: components with a white background and components with a transparent background. Among them, the components with transparent backgrounds are divided into black components and white components. Developers can choose components according to their needs. The use of components with a transparent background must follow the adaptation rules.
Contrast is the most important consideration when it comes to making the navigation bar recognizable and user-friendly. A contrast ratio of 3:1 is the minimum level recommended according to the standard text and normal vision defined by Web Content Accessibility Guidelines (WCAG). This color scheme is also applicable to the bottom navigation bar.
- In order to expand color palettes more reasonably and keep them in line with technological development, the HSB color system is used to output colors.
- HSB uses three attributes of color to represent color, namely Hue (H), Saturation (S), and Brightness (B). This color system quantifies the three attributes of color, with the saturation and brightness expressed as percentage values ranging from 0% to 100%, and hue expressed as angle varying from 0° to 360°.
- HSB and RGB can be directly converted to each other. Developers can apply formulas or tools for conversion.
Adaptation Rules
Hue is the primary variable for adaptation and is divided into two regions, region A and region B, based on the features of hue.
A: While saturation (S) > 75% and brightness (B) < 65%, use white components. Otherwise, use black components.
B: While brightness (B) > 65%, use black components. And while brightness (B) < 65%, use white components.
Case 1:
Case 2：When scrolling the page, it is recommended to adopt the white component instead of transparent component to ensure readability:
Top Components
Navigation Bar
The navigation bar is the must-have component for Mini Program. There are various styles could be implemented for different product purposes.
Basic Styles
There is a default height for the navigation bar in basic style. If functional components are added, the location of the title shall be accordingly adjusted, or the title shall be hidden. 
The preceding figure is a navigation bar container in the basic style.
Custom Styles
Except for the control components of Mini Programs in the upper-right corner, all the other contents can be configured for custom designs. If interactive elements need to be set near the control components of Mini Programs, the developer shall note that whether the interaction area will conflict with the control components, and whether the operation is easy. 
When configuring the navigation bar for iPhone X and subsequent phone models with all-screen designs, the developers shall also consider the height of the status bar. The status bar of iOS system will automatically change colors along with the elements in the top navigation bar and the container background. 
Middle Components
Dialog
Toast
Bottom Components
Bottom Tab Bar
Action Sheet
Permission
Cases
