APP interface design analysis - Douyin, Kuaishou

APP interface design

1. Desktop icon:

Douyin: with a light and dark gradient gray as the base, and a dark gray-based musical note in the middle In terms of shape, red and blue are used around the notes to create a three-dimensional feel, and the overall feel is very low-key.

Kuaishou: It has an orange base with a hand shape in the middle. In the middle of the hand there is a triangular symbol for pausing video playback. The whole thing is more eye-catching.

2. Start page:

Douyin: The whole is mainly black, the middle LOGO adopts a musical note shape similar to the desktop icon, and the color is white with one layer and red with the other two layers. , two colors are stacked together to create a multi-layered blue, white, and red color to express a three-dimensional feeling. There is the word "Douyin" below the icon.

Kuaishou: The whole thing is mainly white, and the orange 8 in the middle is combined with the camera graphics up and down, giving people the feeling of an old-fashioned projector.

3. Home page:

Douyin: Open the short video to play directly. The Tab bar at the top of the page has more, World Cup (hot news category), nearby, follow, and mall. , recommendation, search. On this main page, we can see the author's avatar, red heart, comments, shares, author name, work slogan, screen information, etc. On this page, you can do whatever you want, such as liking, commenting, sharing, following, etc. Nearby: It usually appears in the video list, that is, the background distributes and recommends the works of users in the same region based on the information you fill in.

Follow: Assuming you have an author you follow on the home page, you can directly see the followers’ dynamic news, work updates, etc. on this page, and you can also browse and taste them for the first time. You can also see live broadcasts of bloggers you follow.

Recommendation: Generally based on the categories of videos that are frequently liked and commented on, and then based on such videos to recommend videos of the same category to the audience.

Kuaishou: The Tab bar at the top of the page has more, discovery, city, screening room, live broadcast, and search. You need to select the videos on the entire page and click to enter. On the cover of each video, you can see the author and the number of likes, and it will also indicate whether you are a friend or have followed.

Follow: Assuming you have an author you follow on the home page, you can directly see the followers’ dynamic news, work updates, etc. on this page, and you can also browse and taste them for the first time.

Discovery: Generally, videos of the same category are recommended to the audience based on the category of videos that are frequently liked and commented on. In the same city: The backend performs regional distribution and recommendation based on the information you fill in, and recommends the works of users in the same region to you. Screening Hall: You can watch TV series, movies, cartoons, and Kuaishou short plays. Some of them require the purchase of a viewing card (same as VIP).

4. Content items:

Douyin: There are five contents at the bottom: homepage, friends, production, news, and me. Friends: Two people who follow each other are called friends. Douyin moments, short videos, live broadcasts, and pictures and texts posted by friends can be collected here to facilitate users to watch the content posted by friends. Production: You can shoot and publish videos or graphics. Message: @, or private message, online status, etc. are all displayed on this page. Me: Display personal information displayed by the audience, publish completed works, etc.

Kuaishou: There are five contents at the bottom: homepage, selection, production, news and me. Selection: Generally based on the category of videos that are frequently liked and commented on, and then recommend videos of the same category to the audience based on such videos. Production: You can shoot and publish videos or graphics. Message: @, or private message can be seen. Me: Display personal information displayed by the audience, publish completed works, etc.

5. Login page:

Douyin: The ways to log in are: mobile phone number login, Toutiao login, QQ login, WeChat login, and Weibo login.

Kuaishou: The ways to log in are: mobile phone number login, password login, WeChat login, QQ login, Weibo login, and email login.