Grid design of WAP app

First introduced three nouns: Wap App; Native App; Hybrid app (fusion body, H5 page nested in native), the reason why these three, is that their mutual connection to some extent, to restrict the WAP App grid design. The grid test is detailed below.

Phone grid and PC grid, there is no difference in nature, the same calculation, no outside the size of the screen, but the size of the screen, there are many details need to be combined with mobile phone user habits to judge and choose.

The phone grid we experimented with was a fluid grid, in short, not defining the specific size, but the screen-taking ratio.

When it comes to screen-taking, we need to set a benchmark screen (which can be determined by some specific data, for example, my target user group uses more mobile screen sizes than 1136*640 to locate the benchmark screen), where the benchmark screen is assumed to be 960*640.

Usually the calculation formula of the grid (M+a) *n-a=640-2b (m grid width; a slot width; b leave white width; n grid number)

Test 1

m=40 n=12 a=10 b=25 (we usually define the number of grids n is the integer multiple of the 2,3,4,6, the 12 grid is the simplest grid structure).

Test 1 of the grid is to follow the idea of the PC, but later applied to more and more pages, this grid to do the 2,3,4,6 is OK, but not to do the division, flexibility is very poor, but also a fatal shortcoming, for visual designers have great limitations. Therefore, it is not recommended to use 12 grids on your phone.

Test 2

m=44 n=12 a=8 b=12.

Test 2 and test 1 actually differ little, and the number of grids is 12, also considered relatively early (not yet feel the flexibility of the 12 grid), the equivalent of the Test 1 optimization: One is that both sides of the white width of 25 slightly larger, the second is in a unit grid can be taken to the smallest touch size 44*44. But in fact, the actual application to the interface when the value is not large. Of course, after discovering the ills of the 12 grid, he gave up.

Test 3

M=18 n=24 a=8 b=12.

24 grids are proposed based on the flexibility of the design. In the application, whether the equal, the flexibility, or the front end for the grid base considerations are relatively reasonable, but still did not choose the final grid, this involves the beginning of the hybrid App.

Need to apply the grid system to the H5 page, most are nested into the native app, so try to keep the nested pages consistent with the native interface, and the app has an unwritten grid that any interface size is multiples of 4DP, which is the smallest grid unit 8Px ( Of course, this may not be enough experience, and the last communication with the app team to understand, so to the end of the test grid to use the Grid Test 4 program.

Or suggest that if you design WAP does not need to match native, select 24 Grid is a relatively perfect solution.

Test 4

M=8 n=80 a=8*2 b=8*3.

The whole interface is divided into 80 points according to the size of 8Px, the flexibility is very good, can match native well. But there are not perfect place, the first is whether the visual designer or front-end engineers, the application is not convenient to calculate the relative trouble; the second is not 3 equal and 5 equal interface, need to do special processing in the design and development, of course, users can not see out. However, because we want to maintain the consistency of the terminals, we use Grid 4 for the WAP grid design.