UI Specs of Components

下载 (2).png

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

image.png
A Case
image.png

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.

image.png

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.

image.png

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.

image.png
A: While saturation (S) > 75% and brightness (B) < 65%, use white components. Otherwise, use black components.
image.png
                 
B: While brightness (B) > 65%, use black components. And while brightness (B) < 65%, use white components.

image.png
                 
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.
image
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.
image.png

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.
image.png

Middle Components

Dialog

image.png

Toast

image.png

Bottom Components

Bottom Tab Bar

image.png

Action Sheet

image.png

Permission

image.png

Cases

image.png

Resource Download

📎Mini Program UI Kit 1.0.sketch