Grid specification Making

As the business continues to advance, now we have more and more backstage projects. However, because of the complexity of the front-end and background connections, the project is often postponed. In order to optimize the project flow, improve the development efficiency. The interaction and the front end decide to do a set of DPL together, make a series of specifications out. This can reduce the interaction, front-end, backstage communication costs, and can precipitate under this period of time everyone's harvest.

In the interactive DPL, we mainly do grid system, control system, visual system, and I'll share it with you. Design of grid system in DPL

Grid

Before researching a web grid system, look at a set of data:

Web site	home page width px
ya Hoo!	950
Taobao	950
960
Sina	950
NetEase	960
958
Sohu	950
> Youku	aol	960

Listed above are the Alexa Global Top 100 sites, their home page width of 950px/960px. In addition to Microsoft's live Search, these sites have a common feature: the page structure is more complex, can be considered a portal site.

Then look at Google, YouTube, Facebook, flickr!, ebay and other well-known sites, their home page width is not fixed rules, the common feature is: functional specificity, relatively simple page structure.

According to the above simple analysis can be considered: when building a complex page structure portal site, development engineers invariably choose to set the width of the page as 950px/960px.

This is a very interesting thing, why choose this width? What is the magic of this width value?

The above "nature" appears, the scrutiny of nature is not convincing. The designers chose 960 without being drunk, but not anything else, such as 1000, which is another mystery.

So how do you design a grid system? Next we will pass the example, detailed introduction Web page grid system principle and the application:

In web design, we divide a page with a width of "W" into N grid units "a", and the gap between units and units is set to "I", at which point we define "A+i" as "a". The relationship between them is as follows:

W = (AXN) + (n-1) I

Because of A+i=a,

Available: (AXN) – I = W

Note: 960 is added the length of the last I (i=10), 950 is not plus the length of I

In order to reduce the 1.0 version of the changes, we maintain the I=10XP

Our n is how much, a is how much? How much is W?

N Characteristics: is 3 times times the number, we need to have a row of three columns, and do not want to have important information at the end (our system has a grid in the inner page, so 1280 can show the full, but 1024 not necessarily all show), so it is best that the entire grid can be divided into 3 columns on average

A's characteristics: is a multiple of 5, in the design control, etc. are very convenient

W Features: It is best to conform to the popular

Got: 3x*5y-10=w where X,y is an integer

15x*y-10=w

Listed above are the Alexa Global Top 100 sites, their home page width of 950px/960px. In addition to Microsoft's live Search, these sites have a common feature: the page structure is more complex, can be considered a portal site.

List the grid of the site now

Web site	Home page width (XP)	a*b (XP)
Yahoo!	950	,
Taobao	950
NetEase	950	,
Live Search	9	64.5222
good-infinite system	1000	66.1333

conclusion, the existing Web site under the characteristics of N and a, x*y is only 64 of integers.

Many mature sites are 12 or 24 grids.

When the grid is 12 (that is, 3x=12):

4y=64

Y=16 is a=80

When the grid is 24 (that is, 3x=24):

8y=64

Y=8 is a=40

Considering that 1.0 of the control changes as little as possible, the background system layout structure is more uniform. We're using 24 grids.

That

Our grids are:

(80x12)-10 = 950

Baseline

When the grid is set up, it only controls the vertical trim, and the horizontal needs to be controlled by a baseline.

Before we describe the baseline, we need to understand the structure of the bottom front for the input box.

If we set a 12th-word input box, then the front end will set the structure of the input box. Text Area (blue) He's a base, pading (inside the white part) he is the text area and box stroke space, border (yellow part) is the stroke width of the box, margin (yellow dotted box range) He is the mouse across the hover state of the extension. Our number 12th is in the text area. For example, our text area sets the row height is 18 pixels, the word height 12 pixels, centered, up and down each have 3 pixel spacing.

Based on this, we consider the input box elements in the form and the grid elements, setting the effect of each control in the grid:

(where the blue part is the contents of the text area)

Many people wonder why the title section is three positions, and some are still in front of the space? Our system has defined this effect early on, because the fields of the business side are of varying lengths. If you make the left alignment, the user is very difficult to see (we can appear in a row of three columns), so in the form page and query page we all unified colon alignment, so that we can ensure that the output box is more neat. Easy for users to browse.

Here's our focus: baseline. Look at the picture first

Feedback and input boxes are bundled, after the user fills out the content will give him the first time feedback, then if the position in the back, will cause the second column content is not good, we will put the feedback below the input box, and feedback will only be error feedback, lest the user browsing difficulties. We set the baseline spacing to 20 pixels, and the text area is aligned with the below, so that the two input boxes are exactly 18 pixels, just a text area.

In this logic, we make the page of all the controls.

Note: Action buttons are colon aligned to ensure consistency of operation

Wait until the front end of the communication, after the program is passed, we start making Details page and query page

After the grid specification is done, it lays a good foundation for the color specification and the control specification.

Of course, there are many ways to make a grid system. As designers, especially web designers/interaction designers, we should not simply rely on the feeling, should focus on pixel level, rigorous design, while maintaining and front-end communication, open-minded to accept their guidance. In fact, we did not think of the grid system to do so complex, are the front-end siege engineers in the design of the time found that our delivery is not rigorous, constantly challenged, only slowly at night. So I at the end of the article, want to give you two words: "rigorous, communication."

Article Source: lpued.com