On the standard of "distance between page elements" in business-to-business websites

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

This chapter is about the distance between the elements of the Business-to-business Web site. Related to the distance between text and pictures, content and border distance, page and screen distance, and so on, this part is actually simple and simple, said complex and complex, because in our usual browsing of web pages, newspapers, books, periodicals, television and other media, There is also a basic understanding of the distance between text and pictures, content and borders. If you give everyone a Web page, the distance between the various elements of the page is too wide or too tight, we can also understand, and can propose changes. But for professional product managers, page designers, corporate management, we need to be highly concerned about the details of each element of the page, the distance between the wrong place, are highly sensitive to propose the correct plan.

1 basics of distance between various elements of a Web page

This section is a good cushion for the distance between the elements below, so that you can essentially understand the page design standards.

A certain distance between the elements can be conducive to reading: this to be considered from the user's reading behavior, we look at the different content of the page, the various elements of a certain distance, in order to reasonably distinguish and identify the different elements of the differences, a better reading experience.

B general distance between the various elements: this is difficult to have a unified standard, but according to my analysis of various Web page layout, generally in the 8px-20px between, such as: page title bar and the distance between the title bar, generally 10PX, navigation page information links and information map between the distance, Generally between 8px-12px, navigation page Information link and the distance between the border, generally not less than 10PX. Specific in the back to do detailed explanation, at least not less than 5PX, otherwise read very tired.

C leave White is the design needs: open a Web page, users want to see some space to leave white, white is not refers to white, but to show the background color, if the back color is white, white refers to white. White can let the reader notice the focus of the content, more layered sense, such as the recommended information title, around the blank than the general recommendations of the content around the space to more, this is the designer deliberately for it, the purpose is to remind users, this is the focus of content.

D the same distance between various logically identical elements: for example, a Web page, the first screen text and the distance of the border is 15PX, the second screen is still the same, can not be 8PX below, the same form input box, from the left to prompt input content of the text of the same distance, such as 10PX, Can not have some input box distance is bigger, this creates the alignment, causes the page to look disorderly, lacks the esthetic sense.

2 general standard of distance between text and pictures

The distance between the text and the picture is divided into several situations, one is the distance between the navigation page picture and the Information link or the guide, the second is the distance between the content page picture and the information text, the third is the distance between the navigation page product picture or the character picture and the information title. The general standard is as follows:

A navigation page picture and Information link or guide the distance between: 8px-10px more reasonable, this distance can not be too large, more than 10PX feel too wide.

B content page content picture and the distance between the text: This distance can generally be relatively wide, general empty line, 20px-25px can be, because there are a lot of space can be used.

C Navigation page product picture or the distance between the character picture and the information title: This distance is generally narrower, especially when the vertical arrangement, can be narrower, 5PX is also possible, if the title is divided into two lines, line spacing is generally narrower, between 110%-120% is the most ideal.

3 general criteria for distance between content and border

Whether it is a picture, or text, and borders must have a certain distance, in the "Business-to-business Industry portal design and development of combat Research Report", I will be divided into navigation page, content page, function page Three kinds of pages, different pages and the distance between the border has a certain difference.

A navigation page content and border distance: because the navigation page space is relatively small, each place to distribute different content, the more on the left side of the content more important, content and the distance of the border generally in 10px-15px more reasonable.

B content page content and border distance: This distance can be relatively wide, from the 20px-40px can be, because there is enough space, Sina, Alibaba's news content page content from the border is 4OPX, Tencent for 30PX, China Apparel Network for 20PX, this research report that 20px-30px is the most reasonable.

C function page action hint or the distance between the input box and the border: because this kind of page content is not much, take the user operation as the main, have more space, for example: User registers the page, the information publishes the page and so on, such distance is indefinite, if the space is too many, can center alignment, the distance of all is same, according to the actual situation depends.

Alibaba home Merchant Community screenshot (screenshot date: 2012-09-23)

As shown in figure (103) is the screenshot of Alibaba home page (this is the writing report is written, now revised), the content and the left border, the top title bar distance is: 15PX, from the following distance of 20PX, content picture and left text distance is: 15PX, the recommended title and the distance below the guidance of 20PX. Basically meet the standards I'm talking about. If I were to design, the content from the bottom of the border should be as high as the distance from the top border.

4 The distance between the text on the title bar and the border of the title bar

The title bar generally by the picture and the text composition, the picture generally is the background, the text will add the link, divides into the title name, as well as "more >>" the link, the text in the title bar generally is the upper and lower center alignment, the title column name from the left distance generally is: 15px-20px The distance from the right is generally: 15px-20px, and of course there are exceptions, but most of the cases are like this.

The entire page of the title bar text away from the left and right to unify, the formation of norms, can not be messy. There is a situation can be different, that is, the title bar design is completely different, in order to typesetting needs, distance to be set to different.

5 The distance between the top, bottom and left side of the page

A and the top distance: can be zero, also can be 5PX, can be, this report is considered not to have the best distance, the highest no more than 5PX.

B and about the distance: Although the current computer is widescreen, especially the new computer, but we design a Web page or to 1024 of the main resolution (this, I am in the "Business-to-business Industry portal Planning Combat Research Report" also introduced), page width can be up to 1002, that is, about 10PX width, This allows you to have no scroll bars. I think the page is the most suitable for 995PX, leaving about 13PX distance. For widescreen displays with more than 1024 resolutions, the distance between the left and right sides varies with the display width.

C and the bottom of the distance: the bottom of the text and page at the bottom of the distance between the 18px-30px more reasonable, too high, too rough, too low to affect reading, this research report that 18PX is the most appropriate, just the article's standard line spacing, you can get the best reading experience.

This chapter is about here, although very simple, but the details are very important, although it is technical knowledge, but you do not need to understand the technology, you can see the understanding, you can guide the technology in accordance with the requirements of this article design and production of business-to-business industry website.

This article original author: Xuejiang, welcome the Exchange guidance consultation, the Exchange qq:1580658565.