Industry News

Differences and usages of 6 groups of common components in App Design

Views : 168
Author : Hannah
Update time : 2021-04-30 17:01:00
Differences and usages of 6 groups of common components in App Design

There are many components involved in the process of designing apps for IOS and Android. Different scenarios use different components. This article describes the differences and usage of 6 groups of common similar components.
Alert and Action Sheet

Ab bar and Tool Bar
Bottom Sheets and Menus
Selector and Action Sheet
Drop-down Menu、Action Sheet and Activity View Controller

Snackbar and Toast 
Alert and Action Sheet at the bottom
Warning box is to convey some information of application or device status, and it often needs users to click to operate.
The action list at the bottom shows a series of options directly related to the actions triggered by the user, including two or more buttons.
Generally, there are more than three operations using the bottom operation list, and one or two operations using the warning box or bottom operation list.
Alert and action sheet are mostly used for secondary confirmation.
The differences between alert and action sheet are as follows:
The warning box focuses on the prompt text; Then it indicates that the content priority of prompt text is higher;
The bottom operation list focuses on the selection button; It further indicates that the function priority of the selection button is higher;
When the number of buttons is 0-2, it is recommended to use the warning box;
When there are 2-N buttons, it is recommended to use the bottom operation list;
Of course, some scenarios need strong blocking operation, such as prompt that there is no network, version upgrade, which needs to use the warning box;
The specific situation can be treated according to the product. For example, wechat log out with the bottom operation list, blocking is not strong, the degree of interference to users is low.
Tab Bar and Tool Bar
Tab Bar: allows users to switch between different subtasks, views and modes.
Tool bar: the components used to operate the objects in the current screen are placed. On the iPhone, the toolbar is always at the bottom of the screen. On the iPad, it may appear at the top.
For example, the Tab Bar at the bottom of the app store and Tool bar at the bottom of IOS native email details.
Difference between Tab Bar and Tool Bar:
The Tab Bar allows users to switch between different views. For example, the app store clicks the game tab to enter the game content interface. Therefore, the Tab Bar is involved in view switching.
Tool Bar is the operation of the current interface content, such as IOS native mail. Click delete in the toolbar to delete the current mail. So the operation related to the current page is the Tool Bar.
Bottom Sheets and Menus
Bottom Sheets: a panel that slides up from the bottom edge of the screen to present a set of functions to the user in this way. Bottom Sheets provides three or more operations that need to be chosen by the user without additional explanation.

Bottom Sheets can be a list style or a grid style.
Difference between Bottom sheets and Menus:
Menu: Menu is a temporary piece of paper, which is triggered by buttons, actions, points or other controls containing at least two menu items.
Each Menu item is a discrete option or action, and can affect the application, view or the button chosen in the view.

Difference between Bottom Sheets and Menus:
If there are only two or fewer operations, or detailed description is needed, you can consider using the menu.
Long press operation, mostly using the menu
Selector and Action Sheet
For exclusive single choice, use a Selector. The advantage of the Selector is that it can be switched back and forth. At the same time, because the content in the selector scrolls, it can hold a lot of options.
Drop Down Menu, Action Sheet and Activity View Controller
Drop Down Menu: commonly used to provide quick access. Guide users to do other operation tasks.
Action Sheet: displays a series of options directly related to the user triggered action, including two or more buttons.
Activity View Controller: it is a temporary view, which lists a series of system services and customized services for specific content of the page.
Difference between Drop Down Menu, Action Sheet and Activity View Controller:
If the operation option is to provide the next operation task entry, use the Drop Down Menu;
If it is the sharing of the current operation, Activity View Controller is used;
If it is an operation on the current page content, use Action Sheet.
Snapbar and Toast
SnackBar is a lightweight feedback mechanism for operation, which often appears in the form of a small pop-up box at the bottom of the screen or the left bottom of the desktop. They appear at the top of all the layers of the screen, including the floating action buttons.
They will automatically disappear after a timeout or after the user touches it elsewhere on the screen. The snackBar can be swiped off in other areas of the screen. When they appear, they don't block the user's input on the screen, and they don't support input.
At most one snackBar can be displayed on the screen at the same time.
Toast is mainly used to prompt system messages. Toast is very similar to snackBar, but Toast doesn't include operations, and it can't slide off from other areas of the screen, and the text content is left aligned.
Toast and Snapbar discussed in this article are mainly for Android. Of course, Toast is used in IOS design specifications, and I have only seen Snapbar in Gmail.
Difference between  Snapbar and Toast:
1. Toast, as a feedback cue of information, can carry more cues. It is suggested to use Taost and Snapbar when the hint is very long. The copywriting must be very strict.
2. If the operation is embedded in the prompt message, using Snapbar.

Related News
How do app store ratings and comments affect app store optimization? How do app store ratings and comments affect app store optimization?
May .06.2022
Research shows that application name,  icon and user rating are the most important factors to promote new users to download applications.
How to fill in keywords to get millions of Downloads ? How to fill in keywords to get millions of Downloads ?
Apr .29.2022
If an app is released in the app store market, how to add keywords to attract users? Here are some rules about keyword optimization in ASO.
Detailed App Development Process Detailed App Development Process
Apr .22.2022
Today, let's check a detailed app development process guide for junior developers.
5 skills to optimize the keywords in app promotion 5 skills to optimize the keywords in app promotion
Apr .15.2022
Nowadays many mobile phone users download apps through active search. Therefore, optimizing the keywords of applications is a must for promoters.
Boost Apps Rankings
Subscribe us you won't MISS—Monthly APP Marketing tips, Discounted Pricing Proposal, Promotions, Team Announcements and more!