May 21, 2021 WeChat Mini Program Development Document
From the physical keyboard mouse of the PC era to the mobile finger, although the input device is greatly streamlined, but the accuracy of finger operation is much less accurate than the keyboard mouse. In order to adapt to this change, developers need to make full use of the features of mobile phones in the design process, so that users can easily and elegantly manipulate the interface.
Because the phone keyboard area is small and dense, input difficulties are also prone to input errors, so in the design of small program pages to minimize user input, the use of existing interfaces or other easy-to-operate selection controls to improve the user input experience.
For example, in the figure below, when the bank card is added, the camera identification interface is used to help the user input.In addition, the WeChat team also opens a variety of WeChat small program interfaces such as geographic interface, such as geographic interface, and makes full use of these interfaces will greatly improve user input efficiency and accuracy, and then optimize the experience.
In addition to using the interface, you should try to make the user to choose instead of keyboard input when you use an interface.On the one hand, memories are easy to remember, allowing users to choose to choose from in limited options, it is easy to completely rely on memory input; on the other hand, it is still considering that the mobile phone keyboard intensive single key input is easy to enable input errors.For example, in the figure, the search history shortcuts when the user searches will help users quickly search, and reduce or avoid unnecessary keyboard inputs.
Because on the phone we use our fingers to touch the screen to manipulate the interface, the click accuracy of the finger is far less accurate than the mouse, so in the design page to click on the control, need to take full account of its hot area area, to avoid the clickable area is too small or too dense and cause misoperation. T his is often the case when you simply port an interface that was originally used on a computer screen without any fit directly to your phone. B ecause the screen resolution of the phone varies, the pixel sizes that are most suitable for clicking are not exactly the same, but when converted to physical sizes, they are roughly between 7mm and 9mm. In weChat's standard component library, various control elements take into account page clicks and the fit of different screens, so it is again recommended to design using or imitating standard control sizes.
WeChat Design Center has launched a set of web page standard control library,
including sketch
design control library and
Photoshop
design control library, and will be followed by the improvement of small program components, these controls have fully taken into account the characteristics of mobile pages, to ensure its availability and operational performance on mobile pages;