Pop-up window is a common way of interaction in App, which mainly has two functions: "transmitting information" and "obtaining feedback". Divided by categories, it can be divided into two categories: "modal pop-up windows" and "non-modal pop-up windows".
Modal pop-up window:
The user's current operation behavior is forcibly interrupted, and information is passed to the user. At the same time, the user must respond to the operation, otherwise other functions cannot be used.
Contains: Dialog/Alerts (alert box, dialog box); Actionbar, Action Sheets, Acitivity View (action bar, operation list, active view); Popover/Popup (pop-up box, floating layer)
Non-modal pop-up window:
It does not affect the user's current operation behavior, and the information is transmitted to the user, and the user does not need to respond to it. It usually disappears after a few seconds.
Contains: Toast / HUD (hint box); Snackbar (bottom pop-up window)
Pop-up design principles
(1) Streamlined copywriting
(2) Straightforward
Common misunderstandings:
1. Dialog (warning box) and Action Sheets (action list)
(1) Dialog focuses on conveying information, so the priority of copy content is higher. Action Sheets focuses on functional options, so buttons representing different functional options have higher priority.
(2) When there are 2 buttons or less, Dialog is generally used. When there are more than two buttons, Action Sheets are generally used. (Only refer to the general situation, special treatment for special scenes)
(3) For scenes that need to be interrupted forcibly, use Dialog. Such as: no network, version upgrade.
The pop-up window design examples brought by SOOUI will definitely give you inspiration.