The ease of writing layout

In the visual design work, we always used to focus on the icon and color. But in fact, as a reading app, thinking about how to make the article easier to read is the same as the graphic, http://www.aliyun.com/zixun/aggregation/18132.html "> Color processing is even more important.

In the design work, if 100 people will have 100 kinds of design theory, I think it can not sum up a completely correct theory. However, if there is no design theory at all, it seems that the design will look weird. For example, you will often see this kind of book (Figure 1). The long lines of one and the blank of the mouth are not handled properly. As long as you see such a design, you will immediately think of "There seems to be no rules here," but also give rise to the feeling that "this book designers do not seem to read books." Even if only a few parts of the reading process are difficult to understand, it can also make people feel less focused and can not completely pay attention to the article itself. If you are a book reader, he himself look at this design, they will feel this way is not easy to read ah. So I think the e-book reading experience is the same, to make the ideal layout, as designers need to stand reader point of view, should find for their own easy to read typesetting. Therefore, also take this opportunity to sort out the NetEase cloud reading products, books, text typesetting rules.

Set the content area

First, in the book layout process, set the margin around the page to arrange page layout. The size of the margin is different, and the impressions that the typesetting effect will bring to the reader will change as well, so it needs to be handled properly. Although paper books already have the layout theory advocated by Morris, these theories are not suitable for display on hardware devices. Therefore, we need to deal with different media characteristics. As shown in Figure (2) is the layout of the color section, abcd layout standard setting is usually in accordance with the ratio of 1: 1.2: 1: 1.7 to design.

Font size setting

Followed by the font size of the text, the title of the font size should be large, explaining the font size of the note to be small, the size of the text according to its role in the flexibility to set. In the layout, we must first determine the size of the body of the font, only to determine the size of the body of the text in order to adjust the balance according to it, determine the title, subtitle and comment text size. The figure below is an example of text size suitable for general articles. Even the same size of the text, different fonts look the same size. And select the text size, you need to consider the article reading, for example, is in the big screen machine or a small screen. (Figure 3-4)

Line alignment

An important part of typesetting is to align the parts that should be aligned. For example, aligning the lines of each paragraph means aligning the positions of the lines to make them consistent. Alignment is the first line of alignment in all the ways (Figure 5) Although this usage makes the end of the line is not neat, but to facilitate the pause part of the article wrap, apply to prose, poetry and other text style display charm. However, for the arrangement of long articles, the choice of left and right alignment better reflect the rational. Due to the same position for the newline, line of sight or line breaks when reading the line can move smoothly and smoothly.

Leave text blank

Make the article easy to read typesetting methods varied, the following simple way to talk about "Leave blank" is to leave blank space in the layout. When arranging an article, the smallest white space is the space in the text. According to the shape of the text, there are many small blank spaces in the text. The size of the blank space varies according to the font or the content of the Chinese and English. Other blank spaces, which are larger than the blank space in the text, are the spaces between the words and the text, and the space between the lines and the blank space between the paragraphs and the paragraphs. The area of ​​the blank area should follow the above sequence. If the order is reversed or confused in the article, it becomes less readable. Sort the order in order, and then check the layout of the text is strictly in accordance with this order design. However, in the actual typesetting is not necessary to measure their size separately. It is important to observe the appearance with the eye to determine the size of the leaving white is appropriate.

Line spacing settings

Row height, the size of the line spacing on the legibility of the article has a great impact. Between the line and the line too far, from the end of the line to move to the beginning of the next line, the sight of the moving distance is too long to increase the reading difficulty. On the other hand, the line between the lines is too tight and the line is too tight, which affects the movement of the line of sight and leaves the line unreadable (Figure 12). The most appropriate height of the body of the text, the basic should be set to twice the size of the text in the article. For example, an article with a text size of 8px should set the height of the line to 16px (Figure 13). However, depending on the font used in the article, the values ​​used by the line height will also change. For example, the height of Arial articles is higher than that of a bold face. On the contrary, the height of a black body is slightly smaller. This setting is easier to read

In addition to the main text outside the main title, sub-headings and introductory language short article, the general line height should be set slightly narrower. Title or part of the title, because the larger size, if the words are too loose too much will affect the reading. Because if the guide line height set too wide, this text is difficult to be considered as a whole. Therefore need to cooperate with the text layout, squeeze the gap between the word and the word, this will make the layout look compact and solid.

In our design work, we often have some standard in mind, and we will use it as a standard for typesetting work. However, there are always some specific situations in practical work. For example, for original bookcases with a lot of dialogues, it is ok to have a slightly smaller line spacing. For such articles in publishing bookcases as more passages or the more obscure articles as the essay, Larger spacing will be easier to read. Of course, the reader's age is also a very important issue. A view like this is directly related to your own reading experience.

Maintain a sufficient distance between segments

There must be a certain distance between the paragraph and the paragraph. If this distance is not enough, then the reader will be folded back from the end of the line, moving to the next line of sight will collide with the line of sight of moving to the next paragraph, resulting in the reading can not be carried out smoothly. Moreover, if the distance between the paragraphs is too far, there will be drawbacks that the relationship between the paragraphs is not strong, so it is very important to set the proper interval between paragraphs. As a standard to ensure legibility of articles, it is common practice to set the segment spacing to about two text sizes. In other words, when the text of paragraph 12p text layout, paragraph spacing is 24px. Of course, this standard is not absolute, and sometimes you can deliberately set a narrow segment spacing, giving readers a compact impression. Our book layout is displayed in pixel size on the hardware device. So we want to make sure that the text we design is as easy to read as possible, regardless of the space the reader is in. We need to understand as thoroughly as possible, make informed decisions, and establish normative design rules.

Special symbol processing

Compared with the simple Western word processing in Chinese characters, many "symbols" are irregularly mixed together in Chinese characters, which is very complicated. Therefore, to make these complicated elements neat and beautiful, you need to pre-set the "paragraph style" design layout rules before starting to typesetting. For example, Chinese and English mixed-race articles, in order to make the Chinese and English harmonized naturally, need to set the English font size larger than the Chinese font size. There are also left and right alignment of the article, you must decide whether the punctuation "hanging" within the alignment line. There are punctuation, marks, if the line or line end, the article will become difficult to read. In order to prevent these occurrences, head-tail settings must be made. Formulate the above detailed rules, the article will be arranged beautifully coordinated.

Layout will also change with the times.

Sometimes even with the same theory of the layout design, there will be "looks good" and "is just a simple arrangement only" such two cases. Design or will reflect the requirements of the times. Of course, the reader's age is also a very important factor.

NetEase cloud page elements to read the use of style, the use of font styles and other issues, there are already some fixed rules. However, these conventional fonts undergo some changes from time to time. Although the magnitude is not quite obvious, they are still changing gradually. Because, as a condition of the layout, it does not work if there is nothing visually new. There are infinite possibilities for correct handling of the subtle changes in the colors used and the way in which texts are assembled. There are always ways to do this, so we are always looking for the most comfortable and readable reading arrangement.

Source: http://uedc.163.com/11553.html