The relationship between screen resolution and page layout and user experience

The content outline of the 4.18 Book Club in Guangzhou is written by oneself, and also participates in organizing and chairing. Through this in-depth participation, I found Hu Xiao students can stick down more difficult, first praise. As a result of weather, scheduled to spring outing group discussion form can not be implemented, only 30th people to participate in, including a variety of discomfort you can see Hu Xiao classmate's outing Back (UCD Guangzhou BOOK CLUB SEVENTH Review) description, the following start our theme.

1. Definition of screen resolution and layout

1) Resolution
Resolution (resolution)-a measure of the sharpness or concentration of the image. For example, the resolution represents the number of dots per inch (dpi) that appear vertically and horizontally. BitWare can send and receive fax documents in normal or standard (100 dpi) and fine resolution (200 dpi). Resolution is a concept that represents the fineness of a planar image, usually measured in terms of the number of horizontal and vertical points, represented as horizontal point x vertical points. In a fixed plane, the higher the resolution, meaning the more points you can use, the more detailed the image. There are a variety of resolutions, on the display display accuracy of the display resolution, on the printer has a printing accuracy of the printing resolution, on the scanner has a scan resolution to indicate the accuracy of scanning.

Here we have more discussion about our daily visual perception of CRT and LCD monitors.

Discussion here we discuss a key point, is that the monitor has its own best resolution, people like the large size, high resolution, but not the higher the display resolution is better. We also have to consider a factor, that is, whether the human eye can recognize. For example, in a 14-inch high resolution 1024x768 display, 800x600 is the highest resolution (we call it the best resolution), and the monitor can accurately display the image at 1024x768, but the human eye is unable to accurately identify the screen information. On screens of the same size, the higher the resolution, the smaller the display. This gives us the product design need to take into account this factor, such as the whole station should be the size of the big point and so on.

2) Layout

The layout of a Web page does not have a uniform definition in the strictest sense.

The page layout can be broadly divided into "country" font, corner type, title body type, left-right frame type, upper and lower frame type, comprehensive frame type, cover type, flash type, changeable type.

About the first screen

The first screen is the part that we can see when we reach a Web site without dragging the scroll bar. So how big is the first screen? In fact, this is unknown. Generally speaking, for example, in the 1024*768 screen display mode (which is also the most commonly used), under IE after the installation of the default state (that is, the toolbar address bar, etc.), the IE window can see the part of the 1002px*645px. Generally speaking, we can use this size as the standard. After all, we can only take the majority into account in situations that are not suitable for everyone.

2. The relationship between the screen resolution and layout and the user experience that are currently in mainstream use

With the size of the display now being used, desktop PCs are increasingly using 19-to-22-inch displays. Our own laptops, which are 10 inches to 14.1 inches in size, are mostly in 1280x800. The mainstream development trend is widescreen + high resolution. It can be said that the development of computer monitors to 30-inch can be considered the ultimate size, and then the big is not suitable for use as a monitor.

How small is the font of widescreen flat panel displays? Pixel and font size is the corresponding, small pixel, the text will become smaller. Widescreen panel resolution is generally much higher than the same size of the PU panel, so widescreen fonts are much smaller, not good for vision.

How small is a widescreen font (take a notebook for example)?

Pixel height (proportional to font size):
15′ Pu 0.298mm
15.4′ (width) 0.259mm
14.1′ Pu 0.280mm
14.1′ (width) 0.237mm
13′ (width) 0.219mm
12′ Pu 0.238mm
12′ (wide) will not say, that font small to abnormal ...

Now the popular web page layout (for example), the Web page layout is mostly adopted "country" font, 960 (also has the use of 950) of the fixed layout. Now the layout of the Web page is becoming more and more important, and visitors are unwilling to see content-focused sites. Although the content is very important, but only when the page layout and the content of the Web page successfully joined, this kind of Web page to the user experience is the best, for everyone like.

A classmate of NetEase talked about the principle of using the golden ratio in the page layout. The concept of golden ratio is known to all. Here I quote a very professional explanation: "The golden section was first found in ancient Greece and Egypt." Gold Division is also called the gold rate, foreign and Chinese ratio, that is, a segment is divided into length of a, b two, so that the ratio of the long line (ie a+b) is equal to the short segment B on the long segment a ratio, the column is a: (a+b) =b:a, the ratio is 0.6180339 ... This proportion is pleasing to the eye in modelling, therefore, 0.618 is also called the Gold Division rate. "We also see what is called Golden Division.

We also have a concept like this in China called Nine Sudoku. This may be some friends are not clear, this is a temporary writing rubbing from of a grid paper. The basic shape is a rectangular nine square. In the middle part of the nine lattice there are four intersections, and the four intersections are the visual center points.

Pconline's classmates specifically mentioned the recent more popular web grid system design, which mentioned the theory that we can look at the Web grid system design, at the same time have the interest to buy this book to see grid system and layout design.

3. Screen resolution and layout of the browser, display terminal relationship

The screen resolution and layout are different in different browsers and display terminals. Thousand Birds Write "page page adapt to different client browser and resolution" You can look at, especially mentioned in the actual design of the operation there are usually three kinds of situations: layout adaptive, visual adaptive, Content adaptive. All of this is to accommodate the results of the high resolution of the display widescreen now.

In particular, electronic digital products in recent years the rapid development of hardware and software equipment, PC, handheld devices, television and so on display terminals have become our target terminal browsing the web. Different terminals have different requirements for the layout of web design. In this discussion, 3g.cn's classmates specifically mentioned some of their ideas about designing products on their phones. Because of the time I deserted to here, did not listen carefully, can not recall the record down, I hope 3g.cn students can write out. Our heart students have provided some information about mobile screens abroad: Mobile screen size trends and more on mobile screensaver trends, you can see.

4. Screen resolution and layout of the front-end development, product design impact

After we fully understand the screen resolution and layout of the spear and shield, for our future work has more guiding significance. Product design needs to consider from different angles to adapt to different screen resolution of the Web page rendering, at the same time the front-end development is also a challenge, front-end development needs to do a lot of work, from the framework of the planning to the specific page implementation should take into account these.

5. Summary

This time, although the UCD book will be in the rain, affecting the effect of the discussion, but to participate in the students are very consciously involved in it, is gratified. A business trip to Guangzhou Pconline classmate to Canton this UCD book friends will atmosphere affirmation, how much is the recognition of our organization work, he also participated in Shanghai before UCD Book CLUB. Hope that more exchanges and sharing for everyone's daily work and learning to bring convenience.