The pop-up window system in APP development should not be ignored by UI designers.

The pop-up window system in APP development should not be ignored by UI designers.
 1. pop-up window Definition

Pop-up windows can be divided into modal pop-up windows and non-modal pop-up windows.

Pop-up window category

 

Modal pop-up window: it is easy to interrupt the user's operation behavior. The user must respond; otherwise, no other operation can be performed.

Non-modal pop-up window: it does not affect user operations, and users can not respond to it. Non-modal pop-up windows usually have time restrictions and will automatically disappear after a period of time.

Pop-up window: A non-modal pop-up window is generally designed to tell the user information content, while a modal pop-up window also requires the user to perform function operations in addition to telling the user information content.

2. pop-up window Introduction

2.1 Dialog (Alerts)

Get, calendar

 

You must perform operations on the Dialog box before you can continue to execute other tasks.

The warning box is called Alerts in iOS. The Alerts (warning box) in iOS is mainly used to convey important information and users are often required to perform operations.

When using Dialog, it is better to be cautious and try not to bring a bad experience to users.

2.2 Popover

Daily calendar, Weibo

 

Popover: a semi-transparent temporary view that appears when a user clicks a widget or an area on a page.

Popovers are commonly used to present some additional information folded in the page, or to present some quick portals for common operations on the home page.

 

2.3 Actionbar (Action Sheets, aciti?views)

Album, Momo, zhihu,

If too many buttons are selected, you can refer to the pop-up window to organize the buttons and scroll the display, but you must have enough visual clues.

Ele. Me, zhihu, iOS

 

Actoinbar generally provides users with more functions to choose from. Generally, you can use official controls. If you have special functions, you can design them yourself. Generally, there is a default "cancel" function button, you can close the pop-up window by clicking this button or clicking the window that appears. Action sheet and activity view are unique forms of interaction on iOS.

 

2.4 Toast/HUD

Lines, Enjoy, instant, Weibo

Pocket, snapshot up, iOS

 

Toast is a control term for Android systems. It is also applied to iOS systems. Toast is a lightweight feedback that often appears in the form of a small bullet box. Generally, it disappears automatically in 1 to 2 seconds and can appear anywhere on the screen, however, the same product module tries its best to use the same location, so that users can have a unified understanding. The Toast information is provided to users in a timely manner to ensure that users know their own status and take appropriate measures.

Considering that the display time of the Toast prompt box is short (several seconds) and the occupied area is small, it is easy to be ignored by users. Therefore, Toast is not suitable for carrying too much text and important information.

Transparent indicator layer (HUD): the iOS platform does not have Toasts, but only HUD. (IOS volume)

In iOS, it is recommended to design a method that is eye-catching but consistent with the style of your app to display information. (Weibo refresh)

 

Toasts and HUD are different:

 

1. Toasts usually appears below the screen, and HUD appears in the middle of the screen.

2. Toasts is generally Gray-black or black translucent, and HUD is generally transparent.

3. the Toasts content generated each time cannot be changed, and the HUD content can be changed (for example, the HUD content displayed when the volume is adjusted)

 

2.5 Snackbar

Snackbar is a unique form of interaction on the Android platform and is often applied to iOS systems. It is also used to provide feedback to users, but the degree of interruption is between the dialog box and Toast. Generally, 1 to 2 seconds will automatically disappear, but unlike toast, it is interactive, it must appear at the bottom.

Snackbar usage scenario: When you delete a task in the collection box, you can see the Snackbar at the bottom of the screen, prompting "the task has been deleted successfully", with the Undo operation included. When you click "undo, the task can be recovered. If you do not perform the Snackbar operation, the task disappears and is deleted successfully.

 

Summary

Alert: when the prompt information is crucial and the user must make a decision to continue, use Alert. Alert is generally used for non-user initiation (that is, automatic initiation by the system.

Action Sheet: when it is less important than Alert, use Action Sheet when you need to select more features. Generally, you can use Action Sheet to initiate a task.

Toast: when the prompt message only tells the user that something has happened and the user does not need to respond to it, use Toast.

Snackbar: Snackbar may be your best choice in any other scenario.

Reprinted, please note: This article is from zizhu Cloud technology, a development APP company in Changzhou!