Touch Target

The "hot zone" refers to the areas on the screen that the user clicks or touches, and it usually needs to extend beyond the visual range of the element.

Design Principles

Ensure that users can easily and accurately interact with the application, enhancing the user experience.

Standard scenario

Scene 1: Independent Hot Zone (such as pure icon, pure text, icon + text)

1, icon:

General default: Generally, the icon size is 24*24px, in which case the default hot zone is 44*44px.

Minimum value: When the icon is smaller than 24px, the hot zone is at its minimum of 28*28px (to avoid hot zone overlap in extreme cases, the hot zone of a 24px icon can also be reduced to 28px).

Notes for custom icon sizes: When 24px ≤ icon ≤ 44px, the hot zone size is fixed at 44px; when the icon size > 44px, the hot zone does not need to be additionally expanded and can just match the icon size.

Icon size:

Hot zone size:

12px

28px

16px

28px

24px

2. Text:

The minimum height of the click hot area for a text/text link is 28px, and the width extends according to the visual width (an extra 12px can be added to the left and right, provided that the left and right hot areas of the text do not overlap with the hot areas of other elements).

Scene 2: The entire module acts as a click area, so the whole module is clickable.

Scene 3: A single row/column acts as a click area, so the individual row/column can be clicked.

Scenario 4: When multiple functions are evenly distributed on the same line, the hot zone is equally divided.

Notes: The requirements involve marking the development when clicking on the scene.

Note example

The effective area of the icon size must be designed according to the standard specifications of the icon library, and generally, the safe area cannot be expanded. If there are scenarios for expansion, please communicate with the DS colleagues.

Don't

Hot zones generally do not overlap, and overlapping should be avoided as much as possible (if overlapping occurs, it should be handled according to hierarchy). When designing, if hot zone overlap occurs, manual adjustments are needed to avoid overlap.