Ali Mobile version of the demo design and UE analysis

Ali mobile Version List page graphic typesetting case

Basic Background Introduction

1 According to the "Shenzhen Mobile" survey, the current Ali customers mainstream mobile phone screen resolution is usually 176x220 and 240x320, taking into account the current mobile phone development of the actual trend, it is proposed to 240x320 as the main design platform;

2 176x220 screen, usually in our general sense of featurephone, font size is generally 16px, a small portion of 12px and 14px;

3 240x320 screen, usually as we call the midrange phone, the mainstream font size is 20px (Featurephone) and 12px (SmartPhone), a small portion of 14px and 16px;

Restriction condition setting

1) Product design should pay attention to the use of mobile phone users, such as the overall left alignment of the page, screen level, vertical two-way switching and so on;

2 after a rough test, in the existing network conditions, a single page download 10k time in 1.6s, one-page download 6k time in 1s; generally speaking, download page waiting times in 1s, users will not feel irritable and dissatisfied;

3) After the calculation, 40x40 picture size in 0.71k,50x50 picture size of 1.11k,60x60 picture size of 1.6k. In addition, 500 of the text needs to occupy 1k space. To sum up, false order page text in 300 or so, if you consider the control page size of 6k, the page can host the number of pictures are: 7 40x40 pictures or 5 50x50 pictures or 3 60x60 pictures;

4 in the use of Alibaba's search, usually, search results list page of the number of results entries, to search the product keyword "Mp3″, as an example, the number of entries to 24,226 (2008.06.18-19:48 search results), if each page to display 20, a total of more than 1200 pages ；

Demo DESIGN and UE analysis

1 176x220 screen, according to the actual situation of Ali products, we assume that the basis of the design principle is: 1 pictures with 3 lines of text, between the picture, between the text or between the pictures must have at least 2px interval; design demo as follows:

From the arrangement of aesthetic perspective, 40x40 pictures, in 12px and 14px text with the effect is better, and in the 16px and 20px text, the overall relatively sparse, the effect is general; 50x50 Pictures, in the 14px and 16px text with the effect is better, In the 12px and 20px text, the effect is general, but the separation is also considered as a whole; 60x60 pictures, in 16x16 and 20x20 text with the effect is better, and in the 12px and 14px text, the effect is relatively poor, feeling very sparse;

From a practical point of view of text display, 40x40 of the layout, four types of text can be displayed in the number of characters 33, 27, 24, 18;50x50 layout, four size text can be displayed in the number of characters 30, 24, 21, 18;60x60 the layout of the way, Four sizes of text can be displayed in the number of text is 27, 24, 21, 15; It should be said that three size of the picture for the mainstream 16px fonts, the text displayed in the vertical screen in terms of the number of small difference.

In terms of space utilization, in a screen space, 40x40 can display up to 5 content, 50x50 can display up to 4 content, and 60x60 can display up to 3 content;

So we can come to the conclusion that in the 176x220 screen, if the selection of 40x40 pictures, in the mainstream of the 16px text, at most a page can display 7 pictures, including the page and tail, probably occupy 2 screen space; in conjunction with 12px text, you can display 7 pictures, including page and tail , 1.5-screen space;

If you choose 50x50 Pictures, in 16px text, can display up to 5 pictures, including the page and tail, occupy 1.5 screen space, with 12px text, you can display 5 pictures, including the page and tail, occupy 1.5 screen space;

If you choose 60x60 Pictures, in 16px text, you can display 3 pictures, including the page and tail, occupy 1.5 screen space; In the 12px text, you can display 3 pictures, including the page and tail, occupy 1.5 screen space;

To sum up, taking into account the user paging efficiency, the balance of the number of display per page and the arrangement of aesthetic aspects, in the 176x220 screen size, 40x40 and 50x50 pictures are more appropriate, at the same time, with the mainstream 16px font, 50x50 the best picture effect;

2 ) 240x320 under the screen, reference similar to the above analysis method, we can from demo It is easy to draw a conclusion;

In the 240x320 resolution screen, if the selection of 40x40 pictures, in 12px text, you can display 7 pictures, including the page and tail, probably occupy 1 screen space; in the 20px text, you can display 7 pictures, including the page and tail, occupy 1.5 screen space;

If you choose 50x50 Pictures, in 12px text, you can display 5 pictures, including the page and tail, occupy 1 screen space; in the 20px text, you can display 5 pictures, including the page and tail, occupy 1.5 screen space;

If you choose 60x60 Pictures, in 12px text, you can display 3 pictures, including the page and tail, occupy 0.8 screen space; In the 20px text, you can display 3 pictures, including the page and tail, occupy 0.8 screen space;

To sum up, taking into account the user paging efficiency, the balance of the number of display per page and the arrangement of aesthetics, in the 240x320 screen size, 50x50 picture is more appropriate;

Conclusion and reference comparison pair

Considering the efficiency of the mobile users to download the page, we recommend a single page download capacity of about 0.6k, at the same time because the results of the Alibaba list page is usually very large, each page 3 of information display obviously does not meet our expectations to provide users with a good experience of the original intention. So, 60x60 's picture is excluded; (the size of the picture used on the ebay phone version, only 3 messages per page, the following image for the 220px width of the ebay phone version effect)

40x40 and 50x50 pictures from the number of shows, there is no magnitude gap. But 40x40 's picture on 240x320 screen effect is relatively weak, especially for the horizontal axis ratio, the page 1/6 picture display effect from the poor sharpness (especially in the high-precision screen phone, 40x40 pictures occupy the actual physical area is small, not suitable for identification). In addition, in view of the possible 90° flip of the mobile screen, the picture display of page 1/8 in the horizontal screen is more weakening. (40x40 is Taobao Mobile version of the use of picture size, the following figure for the 220px width of the Taobao mobile version of the effect)

Therefore, we suggest that in the current mainstream mobile phone platform, we use 50x50 picture as the chart size of the list page. In view of the actual security needs of the project, the actual layout effect of the list page is temporarily not open, please forgive me.