Commonly used interactive feedback operations in WeChat applets, study notes
1. Common interactive feedback design
When the user interacts with the applet, some operations may be time-consuming, and we should give timely feedback to alleviate the user's bad mood of waiting.
Warnings must be given for some dangerous operations. When an error occurs, tell the user the cause of the error and how to correct it. These are issues that need to be considered in the development process of the front end, and also reflect our professionalism.
touch feedback
Usually, some buttons or view areas will be placed on the page, and the next operation will be triggered after the user touches the button. In this case, we need to give the user some response to the touch.
operation feedback
Responding to user operations in a timely manner is a very good experience. Sometimes when clicking the button button to process more time-consuming operations, we will also use the loading attribute of the button component, and a Loading will appear in front of the text of the button, so that the user has a clear feeling However, this operation will be time-consuming and you will need to wait for a short period of time.
Toasts and modal dialogs
After completing an operation successfully, we want to tell the user that the operation was successful without interrupting the user's next operation. The pop-up prompt Toast is used in such a scene, and the Toast prompt will automatically disappear after 1.5 seconds by default.
Page({
onLoad: function() {
wx.showToast({ // 显示Toast
title: '已发送',
icon: 'success',
duration: 1500
})
// wx.hideToast() // 隐藏Toast
}
})In particular, we should not use Toast to prompt for error messages, because the error prompt needs to clearly inform the user of the specific reason, so it is not suitable to use this kind of flashing Toast pop-up prompt. Generally, if the user needs to clearly know the status of the operation result, a modal dialog box will be used to prompt, and the next step operation guide will be attached.
Page({
onLoad: function() {
wx.showModal({
title: '标题',
content: '告知当前状态，信息和解决方法',
confirmText: '主操作',
cancelText: '次要操作',
success: function(res) {
if (res.confirm) {
console.log('用户点击主操作')
} else if (res.cancel) {
console.log('用户点击次要操作')
}
}
})
}
})