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.
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.
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).
NoteNote: The main button can only appear once in a page.
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.
Example
The button and page content should be displayed together to make sense.
Checkbox
The multi-select control allows users to select multiple elements at the same time.
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.
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.
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.
Selector
The selector provides a group of preset data that allows the user to complete the input or settings by selecting the data.
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.
Radio button
Radio buttons allow the users to select one option from a range of options.
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.
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.