First, the difference between the startup page and the splash screen
First of all, we need to know that the startup page of the APP and the splash screen are not the same thing. The startup page is the first page that the user sees when opening the product, and the splash screen is the page that appears after the startup page.
1. Startup page
The startup page is an indispensable page for an APP. In the iOS specification, the AppStore must have a startup page, and the Android system will have a white screen for 1-2 seconds, so both sides need a startup page. Apple's official explanation is that in order to increase the user experience when the APP is launched, it is true that when a product is opened, the home page content needs a certain amount of time to load.
The design angle of the startup page is generally the transmission of brand information and the establishment of user and product awareness, usually within 2s (see network speed and mobile phone performance). The design of the startup page generally does not do animation effects, because as long as it is an animation, it will make the user feel that the waiting time is longer.
2. Splash screen
The splash screen is the page that appears immediately after the startup page. Of course, many products do not have a splash screen, such as WeChat, Taobao, etc., because the positioning and operation modes of the products are different. The splash screen is different from the startup page. The splash screen is used for operations, such as daily advertisements, consumer email list event operations, festivals, etc. The time for most product splash screens to appear is 3s or 5s, and a "skip" button is generally provided.
The design of the splash screen is for operation, so it can be appropriately animated or video, the purpose is to attract users more, deepen the impression or increase the click rate.
3. Why can't the startup page be used for operation?
The startup page is a program written in the installation package. If it is replaced, it must be released. The program design of the splash screen is configured from the background, so it can meet the daily replacement.
2. How to reduce user waiting perception
For users, the shorter the time for displaying the startup page and the splash screen, the better. If the time cannot be reduced, the user's perception of time can be reduced through design, thereby improving the experience. Looking at the picture below, the two pictures are over-smoothed, giving the user the feeling that one picture is changing, so that the user's perception of time is faster.
User wait perception short
Of course, for different products, the design tendencies are different. For example, NetEase Cloud Music, the startup page is a strong red, and then bluntly switches to a splash screen that has no visual association with the startup page. In such a design form, users wait for a page and wait for another page, which will give users a longer perception of time.
Strong brand perception
However, for a music product, rendering the product tonality to convey the brand is far greater than the experience of reducing the user's waiting time. Therefore, from this point of view, the design form of NetEase Cloud Music is also very appropriate. The design should be based on the positioning of the product to determine the tendency of the design.
Knock on the blackboard and draw the key points! The following content is the focus of this article!
3. Define the splash screen design size
With so many sizes of mobile phones, how should the design size of the splash screen be defined? The solution for many APPs is to use two splash screens with different proportions, and there are some APPs that distinguish the system, one picture for iOS and one picture for Android.
Below, I will take the revision of the Xiaomi Mall splash screen as an example to share how to use one splash screen size to fit all models, and introduce the principle of adaptation in detail. The following picture is the splash screen before the revision. You need to upload two pictures, one is 1080*2070 (without the bottom logo), and the other is 720*1280 (with the bottom logo).
The old version splash screen needs to upload two size images
For two pictures, the designer needs to design the layout on the two templates. The replacement frequency of the splash screen in Xiaomi Mall is very high, which will actually cost a lot of time. Therefore, our team tried to use one image to fit all models. The difficulty is to find a suitable size to fit all mobile phones, and the content of the splash screen should be properly displayed on any mobile phone, and the content cannot be cropped.
First, let's popularize the design draft size of Xiaomi's APP. Because Xiaomi mobile phone is an Android system, the UI design draft will be preferentially adapted to mainstream Android mobile phones, that is, 1080*2340. This size is close to the proportion and size of iPhone12, and the cuts are quite similar. in 3x figure.
Therefore, the splash screen width must be set to 1080px, and then the height is divided into two parts, one is the content operation area (the splash screen content design area), and the other is the logo position, as shown in the following figure.