The decade of smart phone development is a decade of increasing screen size. When Jobs released the first iPhone, he probably didn't think that in the near future, mobile phones would be too big to fit in jeans pockets.
From curved screen to full screen, technology constantly challenges the screen size boundary, and finally folding screen skillfully solves the game between storage and size, and comes to consumers. At the beginning of 20 19, many brands released folding screen mobile phones, among which Samsung and Huawei made clear their listing plans, and Apple could not help but apply for patents.
▲? The era of folding screen is coming.
The folding screen has gone from concept to reality, so how should the APP application on the folding screen be designed?
Design change: adding a second screen
Folding screen, whether "everted" or "folded", is a new screen for users, and this new screen makes 1+ 1 greater than 2, and the mobile phone can be transformed into a flat panel. Designers need to think about how to better design the content of this screen (hereinafter we call it the "second screen" of the folding screen). Next, we will design the folding screen according to its two characteristics:
Feature 1: The big screen is richer in content.
The sliding screen browsing mode of mobile phone makes the page design higher in the vertical direction, and objectively causes the click volume of the page module to decrease in the vertical direction. When users want to slide to the module they are interested in (for example, guess you like the module on Taobao homepage), they need to slide the screen again after refreshing the page every time. This kind of low-exposure content that users want to browse is very suitable for the "second screen" of folding screen.
In the folding screen, the up-and-down navigation component belongs to the common function of the page and adopts an intuitive horizontal stretching adaptation mode; The middle page can display secondary important content on the second screen by using the content filling adaptation method.
▲ Long page folding screen adaptation method: content adaptation.
For example, in the design scene of Taobao, the second screen content on the homepage is to guess your favorite content module, and then you can browse and guess your favorite products directly by entering Taobao.
▲ Folding screen version Taobao homepage demonstration
Tao Wei's second screen content is a recommended content card, which can instantly obtain the recommendation information of merchants.
▲ Taobao micro-amoy page of folding screen
The second screen content of the message is the chat window, which can quickly preview the latest content in the message and improve the efficiency of chat switching.
▲ Fold the Taobao message page on the screen.
The second screen of the baby details page contains graphic details, and the preferential information and graphic contents can be compared at the same time.
▲ Folding screen version of Taobao details page
Feature 2: Multi-task efficiency improvement
In daily life, when using mobile phones to handle main tasks, we often encounter the handling of subtasks such as temporary notification messages, and the frequent switching between main tasks and subtasks brings high operating costs to users.
The "second screen" of the folding screen allows users to easily handle subtasks without leaving the current scene, thus improving the processing efficiency of multi-tasks. Here are some examples on Taobao to help you realize the convenience brought by multitasking.
▲ Multi-tasking mode of the second screen of the folding screen
Watch the live broadcast and stroll around.
Watching Taobao live broadcast can ensure that the live screen is always displayed completely, and it can also make the baby list present larger and more pictures and brief information to help users make preliminary judgments without interfering with each other when watching.
▲? Watch the live broadcast and stroll around.
Look at the details while watching the evaluation.
The product evaluation will be directly displayed on the "second screen" on the right, so that users can have a comprehensive overview of the information at first glance and reduce unnecessary operating costs.
▲? Look at the details of the baby while watching the evaluation.
Baby information comparison
Users can directly drag and drop the alternative baby from the footprint and show it at the same time, and browse the contrast baby at the same time on the same screen, which is very intuitive and convenient.
▲? Baby information comparison
Chatting while shopping
The chat window evoked during shopping can be resident on the second screen, which will not interrupt the user's task of browsing details, and it is more convenient for buyers and sellers to communicate while browsing. When merchants recommend other treasures, they can also keep the chat window resident and view it directly on the left screen. This reduces the switching cost of walking and chatting.
▲? Chatting while shopping
The above design is our imagination of the application design of folding screen APP. Want to know more about brain holes, please continue to pay attention to the official WeChat account designed by Taobao, and reveal more design analysis and cases about folding screens later, so stay tuned.
note:
1. The above design drafts are creative expressions, and Taobao Design Department has the final interpretation right;
2. The materials used in the design draft are only used for creative display, and the actual goods and store information are subject to the online information.
Taobao Design, a design team that serves the experience of hundreds of millions of consumers around the world, is committed to making design move people's hearts and making business beautiful and simple.
If you think this article is helpful
Be sure to share it with friends around you ~
Oh, yes.
Don't forget to set the official account of "Nice Lab" WeChat as a star logo.
About Bubu laboratory
One person can see it? Live, can you watch it? Organization of dry goods. Recommend good global designers regularly? The circle of industry big coffee live sharing. A self-media that shares design dry goods every day. Every article is good.
For you,
"Good-looking" point, save some choices.
?