Analysis of dribbble APP revision user experience design

Analyze the differences between versions 1.0 to 2.0 to 2.1.4

1. The bottom navigation bar has been deleted but restored

1. In just a few versions of the dribble, the tab bar at the bottom has been removed and added
2. The bottom pop is folded to the top and displayed by a two-layer tab
3. From removing the user avatar hamburger software package display menu bar to the avatar full-screen menu bar
4. Strengthen the brand elements, deepen the auxiliary color cylinder and the background color at the bottom, change the homepage icon to DribbleLOGO, the bottom function order is more reasonable, homepage, notification, upload, message, and more. To facilitate users to upload their own works.

v2.0 switching content interaction process

v2.1.4 switching content interaction process

Personal Center Interactive Revamp

2.0 changed to drawer-type sidebar navigation, the main content is an account, homepage, messages, notifications, work, uploading works, and settings. 2.1.4 The login page is greatly changed. The page is no longer a drawer interaction, but a full-screen headline left-aligned information design, which is unified with the web site. Btn is a brand color. The Twitter login is preferred, followed by the password login of the email account. The page functions are concise and clear. Remove a series of system functions and move to the bottom navigation bar.

Obviously there Issuu nothing on the unlogged homepage of 2.0, but there Issuu still a web-side consistent loading dynamic effect when 2.1.4 Issuu has not logged inVision. After loading, YouTube can still see popular work recommendations, that Issuu, add a different logic, Users do not need to log inVision to a dribble account to browse works, attract users to register and log inVision through content.

Strangely 1.0 is a round avatar entering the personal center, while 2.0 is changed to hamburger navigation, 2.1.4 is changed back to the round avatar design — What is dribble going to do … But I think this design is more in line with the operating logic, top left Click on the avatar or login to enter the personal center, it is very smooth. It can be seen that the page consistency of 2.1.4 is much higher than 2.0, the redundant frosted glass effect is removed, the white card design of the banner and the personal center is centered right.

2.Designer homepage design changes

In 1.0, it was still the center-aligned designer homepage. 2.0 was changed to the left-aligned title, and 2.1.4 was changed back, but the information level and UI vision were more clear and clear, and it was no longer a direct web transplant.
Version 1.0: The designer information is distributed in the center, the attention at the top is too inconspicuous, and the conversion rate is estimated to be very low. Looking for a long time, I thought at first glance that there was no attention button. The work was displayed in two columns of small cards. It is very inconvenient to browse the big picture. You must click on the picture to see the details clearly and increase the user interaction burden.
The 2.0 version seems to find this problem. Therefore, the display of the work is designed as a large picture banner display, and the attention button has been moved down. However, the information has no primary and secondary information, and the main color is used too much.
Version 2.1.4: Display information in the center, highlight attention and private message functions, guide users to pay more attention, remove unnecessary external chain names, and the main color is only displayed on the ProtoPie label display. Highlight the title of the work rather than the name of the person. The font size has been adjusted, the color patches on the head have been removed, and the information level is much clearer.

3.Work details page information adjustment

The name of the author’s name of the project is 1.0 at the bottom of the work, 2.0 is changed to the top, and 2.1.4 comments are resident at the bottom.

1.Works interactive zone

2.Tags

3.Palette

4.Comment

5.Text link

6.User comment

Summary

The functional design is more reasonable, the common functions do not need to be found, the consistency of the web and mobile experience is enhanced, the brand sense is improved, the interaction design is optimized and reasonable, the subtraction and modularization are visually performed, and the visual level and the information level are more clear.