bzdww

Get answers and suggestions for various questions from here

Zhihu Web redesigning ideas and personal page design process

cms
In our daily design process, we will always encounter problems that are difficult to solve at one time: this function seems to be not quite right here, but other locations are even worse; when fixing some experience problems, we find that the page structure is made after long-term iteration. The cost of this modification is too great; everything is placed in an important position, where should the really important thing be? When a user comes to a page, what does he really want to do? ... When these problems are getting more and more, we start to think: Should we reconsider what the web version should look like?

And when we had a heated discussion inside, we also heard the call of many friends: Your website has not been changed for 10,000 years, when are you going to change it? Later, there was even the question of "What do front-end engineers know? " How can this pot make us spicy and powerful front-end teachers back! So we decided to move this faster: upgrade our personal page! (.•ˇ‸ˇ•.) (Advertising time: If you have a reliable front end, please be sure to recommend him to join us !)

Before the open beta of the new personal page, I will share our design ideas with our friends, and I look forward to hearing your feedback and working with us to improve and improve the page design.


In the several discussions before the start of the design, we gradually clarified the basic principle of this optimization: the user's time is precious, we should help them save time and improve efficiency through better design. Based on this principle, we define the core strategy of this redesign as: fast . By designing things that users want to do every time they become simple and efficient, important and easy to find using high-frequency features and content. Not only that, but the speed of access knowing needs to be faster, and don't waste time waiting. Based on this, we have sorted out the following points to be modified:

  • Combing the information structure of the personal page, let the content you are looking for better
  • Combine the priority of the content action bar to highlight more important operations
  • Content action bar should be accessible at any time
  • Details should be viewable in place without jumping pages
  • Viewing new private messages should be faster and smoother
  • Optimize layout, using more readable fonts and font sizes to improve reading efficiency
  • ......

For the main functional modules of personal pages, we have tried different layout forms and design solutions. Let's take a few representative intermediate solutions as an example to share our main redesign process.

Card style

As the complexity of the page has escalated, the old version of the line drawing card has gradually exposed its limitations, such as the lack of clear boundaries between content, the lack of clear relationship between modules, etc. (Figure 1). To solve these problems, we optimized the card style to make important content stand out from the page (Figure 2). Compared to the old version, the new card style makes the page content more centralized, regular and clear. We have re-designed the card usage strategy, hoping to use the card in a controlled manner to create a proper page order and browsing rhythm, and the gradient distinguishes the primary and secondary relationships of the modules. In addition, the new card style makes the page level richer, and the page can have more flexible changes in the future.

Head Figure

The head of the personal page is the display of user attributes and personal traits. It is the most important part of the page. We have done a lot of design attempts in this part. Following the old version of the structure, the left and right columns are completely split, resulting in a weak overall page, and the visual center of gravity is too far left, the effect is not ideal (Figure 1). In order to reduce the sense of splitting within the page, we tried to break the frame, let the head span two columns, highlight the most important part of the page, making the page structure more stable (Figure 2). In the latest update, we further broke the left and right constraints of the head card, using the width of the page to make the overall visual perception more open, but also more fully display the user's personality and characteristics (Figure 3 ).

Two columns vs. three columns

In order to display more information on one screen and improve page space utilization, we initially considered using a three-column structure to organize personal pages, but the actual application effect is not satisfactory (Figure 1). The three columns do carry more content, but they can lead to overcrowding and visual lack of primary and secondary. Although it may improve the page space utilization, it also sacrifices the efficiency of users browsing and filtering information. In contrast, the two columns are clear and concise, and the information density is better controlled (Figure 2). Moreover, the two columns can take care of most of the pages that are known, and it is a more reasonable choice considering the layout consistency and core principles within the product.

The following are other layout and design attempts in addition to the above representative solutions.

After a lot of discussion, experimentation, and adjustment, we got the final plan for the personal page:

The above is the overall idea of ​​the webpage redesign and the design process of the personal page. The improvement design of other pages is also in progress. If you have better suggestions and feedback, please write down the comments. In the testing process, we will gradually Improve the important issues that you mentioned ୧(๑•̀⌄•́๑)૭