Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the types of APP pop-up windows?

2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what APP pop-up window types are there". In daily operation, I believe many people have doubts about which APP pop-up window types. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "what APP pop-up window types are there?" Next, please follow the editor to study!

Pop-up window is an element that can not be bypassed when designing APP. Choosing the appropriate form of pop-up window is where we need to think more to avoid becoming a wireframe artist who can only improve the product prototype.

Pop-up window is a window for us to interact with the machine interface, it is a way for users to talk directly with the product, it can convey information, feedback status and guide users to operate. Pop-up windows can be divided into two types: modal pop-up windows and modeless pop-up windows (some places may be translated as modeless windows).

Modal pop window

The user needs to interact with it before continuing with the operation. In other words, it is mandatory, and users cannot ignore its existence. Make sure people receive critical information and take action when necessary.

Modeless pop-up window

There is a certain time limit, which is usually used for system feedback, and users do not need to respond to it.

Modal pop window

1. Dialog box Dialog / warning box Alerts

When there is a need to interrupt user operations, it can be roughly divided into information distribution (passive), such as version update, message notification, operational advertising, and so on. Information submission (active), such as: modification of information, login registration, etc.

Through the above cases we can also find several features, buttons can guide users to click through differentiated design (for example, Meituan's version update), operational pop-up windows generally pay more attention to visual impact, and deliberately weaken the close button away from the main body of the pop-up window, the background mask is darker, creating a stronger sense of immersion. For the pop-up window that carries the input function, you need to pay attention to the position after the keyboard pops up. Pop-up windows similar to system functions, such as cleaning the cache, can consider calling the platform's system pop-up window directly.

two。 Floating layer Popover / Popup

It usually appears after user interaction, such as common drop-down menus, drop-down windows, etc., with more emphasis on the dependency of pop-up windows. The concepts of modal floating layer and modeless floating layer are used in the article of Tencent ISUX Tencent documentation, which you can take a look at if you are interested.

They are also drop-down windows, but many products have different processing methods. Weibo clearly distinguishes pop-up content from background content through dark pop-up windows, and nails highlight pop-up content by deepening the background mask. Dianping only used a faint projection to remove the background mask, so that the comparison between the pop-up content and the background content can not be pulled apart, which quite affects the recognition efficiency of users in the actual experience.

3. Action Bar Action bar / Action list Action Sheets / Action View Activity Views

Similar to the floating layer, it is also a function menu called out through the active interaction of the user. Usually appears at the bottom of the screen, occupies a high proportion of the screen, in order to facilitate users to use, the bottom will place the cancel function. (Action Sheets and Activity Views are the names in the IOS official website specification.)

The most common scenario of this type of pop-up window is the sharing module, which can carry more and richer functions (mostly options) than other modal pop-up windows. Sharing between Wechat and Alipay is the most standard Alipay. In order to reduce the unnecessary memory burden of users, the height limit of pop-up windows is lower and more background content is exposed to help users remember.

4. Card Sheet

Sheet is a modal window that appears in the IOS human-computer interaction guide in the form of a card that appears from the bottom image, covering almost all of the original pages. But uncovered areas also use dark masks to help users remember paused tasks. Because it supports dragging up and down, it can carry more complex information content than a floating layer, and is often used in complex tasks that tables cannot carry but are not immersive.

Compared with Action Sheets,Sheet, it has higher screen coverage and more often carries the function of information entry. Sheet needs the top title to inform the user of the current step information, and the superposition in the form of a card at the bottom makes the user aware of the current task flow as a branch of the main process.

5. Other supplements

With the continuous development of interactive experience and product technology, today's devices can carry more and more complex and refined modules. So gradually there are more and more special pop-up windows. (the underlying logic is interoperable)

For example, NetEyun music sharing uses immersive modes, multiple pop-up window combinations, and dynamic effects guidance, so as to carry its own rich sharing forms. The IOS desktop uses a focus-type pop-up menu to help users focus visually.

Modeless pop-up window

1. Prompt box Toast

It is commonly used to feedback the results of the operation of the user, and the state of the feedback application changes, which usually lasts about 2 seconds and then automatically disappears, which may appear anywhere. (cannot be closed by active sliding)

At present, the most common scenarios are all kinds of refresh feedback, which generally have a weak sense of existence, such as Zhihu, bilibili and ins in the case. Compared with bilibili and ins, Weibo and Zhihu have incorporated their own brand characteristics: theme color embellishment, although it is only a small detail, but can exert an imperceptible influence on users' brand perception.

two。 Prompt dialog box Snackbar

Snackbar first appeared as a pop-up form of Android, but now it also appears on many IOS products. It is a bit like a derivative of Dialog and Toast, most of the time as interactive as Dialog and sometimes as time-bound as Toast. It usually appears at the bottom of the screen, sliding up from the bottom of the page and disappearing.

Since I don't have an Android phone on hand, I cut off the official case of Material Design to help me understand. Two main points are emphasized: 1. Don't add Icon,2. There can be only one operation item; because snackbar will disappear even if it does not operate in time, it is more common to use tool products and need to maintain the consistency of operations. For example, in mailbox products, if the user deletes the email, snackbar can timely feedback the status of the successful deletion and provide the undo operation.

3. Transparent indicator layer HUD

HUD is a commonly used modeless type in IOS, which first appears in the middle of the screen. Because it is easy to affect the user's immersive experience, HUD has been marginalized in the IOS13 version.

Comparing the HUD on the left with that on the right, you can see why it was complained by so many people in the early days, especially in immersive gaming applications, that it was easy to undermine the user experience.

Attention should be paid to the design of pop-up windows.

1. Presentation form

The core of the presentation form is the sub-scene, some tend to the system error report to consider the use of the simplest system pop-up display form, operation advertising and so on can attract users through special design techniques. But no matter what you do, you must let the user know that this is a pop-up window. Modeless pop-up windows usually appear in the simplest form to avoid interfering with the acquisition of key information when transmitting state information.

two。 Button mode pop-up window usually only places 1-2 buttons, the information tells the type to put a "OK", the major decision type to put a "OK" and "cancel". What is special is the permission request pop-up window, which may have multiple buttons. Now many operational ads put the close button on the edge for exposure, which is quite unfriendly for the user experience, but it may look good for the operational data.

3. Dynamic effect because of the limited amount of text carried by pop-up windows, which is beneficial to the development of equipment technology, now more and more products will use dynamic forms to transmit information in modal pop-up windows, such as the functional guidance of many products. For the modeless pop-up window, due to its weak sense of existence, the dynamic effect is used to reasonably adapt to the visual movement line of the user. For example, after you drop down and refresh, the general refresh feedback pop-up window appears in the user's current visual focus.

4. Timing frequency grasp the timing and frequency of pop-up windows

The modal pop-up window will directly interrupt the user's operation state, usually only in the case of irreversibility, or when the operation will cause serious consequences. But in some special business needs, such as operating advertising, it is necessary to weigh the relationship between users and business interests. Modeless pop-up window then pay more attention to the timing of the emergence, feedback must be timely enough, so that users will not have doubts in the operation.

5. Copywriting expression

Because the information carrying capacity of the pop-up window is very small, be sure to use the most concise and appropriate expression to inform the user or the current status, you can consider using the combination phrase of "verb + noun", such as "delete photo", "cancel order" and so on. In particular, the modeless pop-up window will automatically disappear, the number of copy words should be paid more attention (you can consider adding some general icon color auxiliary expressions, such as the correct use of green ticks).

6. Input content

Many pop-up windows carry the task of form input, but pop-up windows are not suitable for too much form input, especially if there are too many forms to drop down-if you need to fill out a lot of forms, jump to the new page. And the pop-up window itself has interrupted the user's original operation, but also fill in a lot of things. no, no, no. (in addition to IOS's Sheet, it emerged as a way for IOS officials to solve complex but non-immersive situations that are often used for complex tasks that cannot be carried by tables.)

At this point, the study on "what types of APP pop-up windows there are" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report