App temporary box design, all here… Jane the book –

Yesterday, the iPhone7 was released. Better industrial design (compared to the 6S), more colors, higher specs, and so on? It seems that there is no and then, holding the 6s in the hand, can not find the reason to change the machine. Since Lord Joe’s departure, there has been no more eye-catching product in the smartphone world, and you can think for yourself why. Still, the iPhone is the most useful smartphone on the planet without, well, a small sigh.

As interaction designers and UI designers, we still focus on the release of iOS10, September 13 push, you can download the experience, see the official website about iOS10 introduction, summary: “more interesting micro interaction, more intuitive information display form”.

There is a special design form in iOS and Android: temporary box, which is transplanted from the PC era. For UE designers, what kind of temporary box to use in what situation is one of the basic skills, and it plays a pivotal role in the user experience of the final product.

According to different design goals, temporary frames can be divided into the following five categories.

Alert View

What was your reaction when you heard shocking news? Most people are like, “What?” “Or” Excuse me? Your subconscious is asking the person to say it again. Why is that? Because this information is so unexpected, you need to double check that it’s true!

Also, how does the App react when you hit the delete button? Delete operation is too sensitive, so I need you to confirm again, this is the Alert View in the App. The App needs to get location information; Access albums and cameras; So you can upgrade your App and so on, and all of those things are going to use the warning view.

As you can see from the figure above, the warning view consists of three parts: title; The text; Button. Some of the text’s simple warning views only have titles and buttons, and do not require text to explain them.

Action Sheet

One day, you are listening to a song in a music App, and you look at the screen. At this time, you want to check the artist’s information, the album’s information, and also want to save the song… To meet these requirements on the current page, use the Action Sheet. There are so many actions the user wants to perform on the current page that it is impossible to put them all out, so the page is full of densely packed ICONS and buttons. This problem is solved perfectly by placing these buttons in a temporary box in the form of a list of actions. Perfect.

The above three images, they look completely different, but the principle is what I said above, everything is the same, just change the UI style. They all belong to the action list.

Modal View

Now that you have fully mastered the principles of the two temporary frames, don’t stop until you’re hot.

Open the email App of iPhone and click “Write Email”. At this time, the bottom of the page pops up and occupies the whole screen of the phone. When you finish writing the email, click “Send” or click “Cancel” to return to the original page. This page is called a Modal View

Thinking people might ask, why is this page called a temporary box when it takes up the entire screen? Isn’t it the same as the secondary page? That’s a good question, ha ha, let me answer it. The temporary box is not defined by how much space it takes up on the phone’s screen, but by how much time it takes away from the main task. The second level page is directly separated from the main task to execute the next task, but the modal knowledge suspends the main task, and will automatically return to the main task after completing the operations in the mode. So you may have been wrong about the concept of temporary frames, and you will be able to move as fast as possible by understanding the nature of a design form.

Model view has the following characteristics (compared to the above three images will be easier to understand) :

① Occupy the entire screen, or the entire area of the superview.

② Contains the text and controls needed to complete the current task.

③ It usually also contains a complete button and a cancel button.

Toast

Toast, I did not find the corresponding Chinese, so I had to use English (friends who know the proper translation can visit the public account: UE Tuantuan, leave me a message), at that time it did not prevent understanding it.

All three views have one thing in common: you have to do something (click Finish or cancel) to make the temporary box disappear. At that time, Toast was special. It would disappear automatically and generally lasted for 1 to 1.5 seconds. If the time is too short for the user to perceive, if the time is too long, it is unnecessary.

The composition of the Toast temporary box is relatively simple, with a color as the base and the text to be prompted displayed on it.

So when do you use Toast? (1) Due to the complex usage scenarios of mobile terminals, when a user performs an operation, the App often fails to give immediate feedback to the user about the operation result. At this time, a Toast pops up to remind the user that the operation has been performed, which is very humanized. This is the user experience. ② If an invalid operation is performed, a message is displayed indicating that the operation is incorrect. Imagine if on the third page in the above picture, the App does not tell the user that the system account cannot be deleted. The user will be confused because there is no response after clicking the delete button, and the user is not sure why there is no response. ③ Prompt user operation error or correct, such as App often prompt user: login success, download failure, password input error.

To sum up, today we talked about the functions, usage scenarios and design rules of different temporary boxes:

① Alert View

② Action Sheet

③ Modal View

Make a Toast

Remembering the names of these temporary boxes doesn’t help at all. It’s important to understand how each temporary box is designed. This way you can choose the appropriate temporary box for different scenarios and user goals.