Design sharing of the download page of the Pengyou.com mobile client (picture and text)
Let's first look at some simple data:  ① 97% of Chinese cities have mobile phones, of which 35% have smartphones; ② Between TV and smartphone, 50% of the respondents said they would rather give up TV than smartphone; ③ Chinese urban smartphone users use their smartphones anytime and anywhere, with home (66%), travel (59%), public transportation (52%), restaurants (38%) and shopping malls (30%) being the most frequent places for smartphone use; (Data source: China Urban Smartphone Data Survey Report; http://www.dianru.com/news-56) It is foreseeable that in the future Internet field, mobile platform construction will gradually become the development core of Internet companies. With the increasing number of mobile devices at home and abroad, users' demand for mobile services has also increased. No matter when and where, users are happy to obtain Internet information through mobile phones; Currently, 75% of urban smartphone users in China use their smartphones for social networking every week, which is approaching the proportion of social networking through traditional networks (84%). As the mobile Internet becomes more mature, obtaining Internet information through handheld mobile devices is expected to become the mainstream network access point in the near future.  Of course, there is already a relatively mature product called Pengyou.com on the web. Under this premise, what we need to do in this design is to attract users to download the APP by enhancing the web design. 1 Preliminary discussion After receiving the demand form, we first start from our own products and analyze them in combination with excellent APP download pages at home and abroad.  1.1 Thin and light In the literal sense, thin and light means "less"; By simplifying and refining the copywriting, pictures and other elements to ensure that the viewers have sufficient understanding of the page and the client, and paying attention to details, we can achieve the effect of "less is more"; without losing the user's cognition and fully expressing it, this is our definition of "lightweight" in this page design; 1.2 Page Space Sense In fact, browsing information on a page is similar to browsing in a real library; No one likes to be constrained in a small space to browse information, and we try our best to provide users with a breathable and comfortable sense of page space to ensure that users are willing to stay on this page for a longer time, because at least it is not too crowded. In this area, we mainly focus on the processing of page design elements. There is no need to pile up too much material, but to grasp the core content that can best express the functional characteristics of the client. 1.3 Browsing comfort Users browse text information on a page just like using a computer, and too much text information is like useless deposited files in a computer system, which will affect browsing speed and comprehension; Regarding the browsing of copy information, our definition of comfort is: quickly browsing the copy information and easily grasping the main idea of the copy; therefore, we discussed the copy repeatedly, simplified it again and again, and tried to describe the functions of the Friend Network mobile client in one or two sentences as much as possible while ensuring that the information is expressed completely. 2 Design process We believe that design is about finding a critical point that is recognized by most people and visually beautiful; The design process is an iterative process from nothing to something, and from something to excellence. 2.1 The design process of this page is tortuous  This is a process of exploration and progress. Although there are some twists and turns, through repeated discussions, constantly overturning the existing design and rethinking it, we finally found that the direction we envisioned was correct. Everyone just wanted to make a better page design. Regarding the product and design itself, our most basic wish is that when users see this page, it will not be too ugly. Of course we also believe that we can do better. 2.2 We persisted in the design and came up with a total of 4 design plans. While continuously optimizing the design, we are also continuously optimizing and refining the elements in the design; however, the most basic bottom line is to ensure the lightness and thinness of the page, the sense of space of the page and the comfort of browsing. This is the key point determined in the early discussion. During the entire process of page design, the central design points of each version are retained and optimized in the next version; regardless of whether it is simplified or extended, the initial three key points are set as the most basic insistence in page design.  With the general page style and graphic elements already decided, the next step is to work on the details; everything from the color gradient of the buttons to the punctuation marks in the text are repeatedly considered. It doesn’t mean that we blindly focus on details, but we don’t want to make mistakes in the details. Therefore, when adjusting the copy, how to make it the most concise and easy for users to understand is the main part of our final design work. 3. Review of design points  These common scenes in daily life are actually our scenario positioning for the users of the Friends Network mobile client. And the users' use of the client's functions in the corresponding scenes is also included in the picture. For example, when you are shopping with your bestie, you can immediately share your selfies with your friends through the WeChat Moments network. When you are traveling together, we hope that you will be happy to share your happiness through the WeChat Moments network. We hope to emotionally position users by simulating usage scenarios. 3.2 Contextual objects to assist in greeting, such as cameras, paper airplanes, coffee cups, and paper cup beverages; The picture represents the client's usage scenario, and the auxiliary items in the picture contain two meanings: the scene's implication and the client's function. This is our original intention for adding these situational items to highlight the scene's theme and assist the client's function. It's like "When chatting face to face, maybe you need two drinks to quench your thirst, because chatting on Pengyou.com is so direct, so there is too much to talk about." This is a signal we want to convey to users. We want users to know that the Pengyou.com mobile client is actually very interesting. 3.3 Keep the copy simple and focus on the theme, highlight the content you want to express most, and reduce unnecessary visual interference. You don’t need too much copy. Too much copy will make it difficult to read and the main idea will be lost. Therefore, we emphasize browsing comfort, which means constantly streamlining and refining the copy. We strive to let users hear what we want to say in the shortest time possible. 4 The first draft and the final draft of the closing statement are different, and they are constantly adjusted and optimized during the process, from the page style and visual elements to the punctuation marks and background transparency. Although a relatively satisfactory design result was achieved in the end, there are still some issues that cannot be ignored, such as the overall feeling of multiple shadows in the picture, the handling of auxiliary objects, the integration of background and theme, and other design issues that have not been fully addressed. In the follow-up, we have been gradually adjusting and optimizing. Although these are only minor adjustments, everyone is really putting their heart into this. Source: Tencent ISUX |
<<: Sharing several methods to disable page caching
>>: SQL implements LeetCode (180. Continuous numbers)
Recommend
Analyze the problem of pulling down the Oracle 11g image configuration in Docker
1. Pull the image docker pull registry.cn-hangzho...
Summary of the use of MySQL date and time functions
This article is based on MySQL 8.0 This article i...
Python Flask WeChat applet login process and login api implementation code
1. Let’s take a look at the effect first Data ret...
How to change the system language of centos7 to simplified Chinese
illustrate When you install the system yourself, ...
How to get the height of MySQL innodb B+tree
Preface The reason why MySQL's innodb engine ...
More popular and creative dark background web design examples
Dark background style page design is very popular...
Vue implements mobile phone verification code login
This article shares the specific code of Vue to i...
Detailed explanation of JavaScript stack and copy
Table of contents 1. Definition of stack 2. JS st...
Solution to the problem of adaptive height and width of css display table
Definition and Usage The display property specifi...
Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging
Copy code The code is as follows: <!-- Prevent...
Common tags in XHTML
What are XHTML tags? XHTML tag elements are the b...
JavaScript Basics Operators
Table of contents 1. Operators Summarize 1. Opera...
Detailed explanation of the setting of background-image attribute in HTML
When it comes to pictures, the first thing we thi...
Vue3+el-table realizes row and column conversion
Table of contents Row-Column Conversion Analyze t...
Details of various font formats in HTML web pages
This section starts with the details of text modi...