All Products
Search
Document Center

Enter information

Last Updated: Feb 05, 2021

In the interaction between user and application, users often need to input, edit, and delete some information. Diversified and tailored input components can help users complete tasks quickly and clearly to improve the user experience.

Button

The button is used to start an instant operation and submit a set of input data in the form.

1

2

Definition and principle

The button acts as the main action point in the page, guiding the user to perform corresponding main actions. The action button should be prominently displayed and easily accessible to attract user to tap, and provide feedback after the user taps it.

The buttons are divided into main button, secondary button, and auxiliary button.

  • Main button: Only one main button can appear in a page, indicating the most important user conversion point.
  • Secondary button: There may be multiple secondary buttons in a page, which can be used for supplementary operations under the current scene.
  • Auxiliary button: An action button located on the right side of the list that guides the user to tap the list.

Visual style

Big button

The main purpose of the big button is to encourage the user to perform operation. The big button’s usage specifications are as follows:

  • The button text needs to be centered in all directions.
  • The button height is fixed at 94px (47pt) and the fillet is 10px (5pt).

    Note: The main button can only appear once in a page.

3

Small button

The small button is used for the operation/selection of an item or option within a page and can be used multiple times. The small button’s usage specifications are as follows:

  • The button text needs to be centered in all directions.
  • The button height is fixed at 60px (30pt), the minimum width is 112px (56pt), the border thickness is 2px (1pt), and the fillet is 6px (3pt).
  • The spacing between the text and the border of the button is 30px (15pt). If there is no enough space available for the text, you can extend the left and right sides.

4

Example

The button and page content should be displayed together to make sense.

Main button:

5

Auxiliary button:

6

Checkbox

The multi-select control allows users to select multiple elements at the same time.

7

Definition and principle

The multi-select control typically appears in an editable list. After the user completes the selection, the selected element will be edited and processed simultaneously. It has two states, i.e. selected and unselected.

Text input box

The text input box is the simplest input component that allows users to enter a single line data through components such as keyboards, selectors, etc.

8

Definition and principle

The single-line text input box has a 15-character limit. You can also limit the types of information that can be entered in the input box, such as Chinese, English, number, email address, and so on.

When activating different types of input boxes, it is necessary to pop up a corresponding type of keyboard: text keyboard, English keyboard, number pad, mailbox keyboard, etc., which will help users to improve their input efficiency.

The input box is typically composed of label area, input area, and auxiliary operation area. The label area has a limit of up to 8 characters; The input area is configured with a grey input hint; An operation button for auxiliary input or a detailed input description button can be placed in the auxiliary operation area.

If the data entered is sensitive, such as password, mobile phone number, etc., data masking should be performed.

Visual style

Labels, icons, and auxiliary input buttons together form a variety of input boxes.

9

10

Example

Call the keyboard based on the input data type. Both iOS and Android system have keyboards for different types of data input, which helps to improve user input efficiency and thus enhance the user experience.

Text keyboard example:

11

Number pad example:

12

Selector

The selector provides a group of preset data that allows the user to complete the input or settings by selecting the data.

13

Definition and principle

The selector is triggered by tapping an input box on the page. When the selector appears, the page should be covered with a semi-transparent mask to allow the user to focus on the selector.

The data in the selector preferably has certain logical relationship and meets the expectations of the user. Because the selector may not be able to display all data at the same time, the user needs to swipe through items, therefore a logic order that meets user expectation enables the user to quickly find the desired item.

The selector can be configured with a combination of data in multiple columns (up to four columns), but the text of the longest column cannot exceed the width limit.

Date selector

The time selector enables the user to quickly select a time ranging from year, month, day, hour, minute and second.

14

Radio button

Radio buttons allow the users to select one option from a range of options.

15

Definition and principle

Radio buttons typically appear on the right side of the list. When a tick appears, it indicates the option has been selected.

Search bar

The search bar allows users to quickly reach the desired content from a large amount of information.

16

Definition and principle

The search bar is typically located below the navigation bar. The touch keyboard is called when the user taps on an input field and activates it. Tap the Cancel button to exit the activation state.

If the input box is displayed by default, you can provide a grey hint text (such as a keyword) to help the user input data. Below the search bar, useful labels are provided for users to complete the input by tapping them, such as: recently searched content.

Slide switch

A switch is a type of control that visualizes two states.

Definition and principle

The switch control can only be used in list, so switches can only appear in the list to represent two mutually exclusive options.

17