The five key words of brand DNA are: trust, professionalism, convenience, safety and imagination.
According to the principle of "visual cognition" in gestalt psychology, in a gestalt (that is, a single field of vision), the eye's ability can only accept several unrelated whole units. If a gestalt contains too many irrelevant units, the eyes and brain can't simplify it, and the overall image will continue to be disordered or confused, so it can't be recognized correctly. [1] Therefore, in a field of vision, elements can be better perceived by eyes and brain, so as to read more conveniently. This neatness and order also enhances the reliability of information. The orderly arrangement created by scientific calculation methods can withstand scrutiny and reflect the professionalism of design. Therefore, if the layout wants to bring trust, professionalism, convenience and security to the audience, we must first follow the principle of order.
In aesthetic theory, rhythm is the basic form that separates production, life and different objects from their concrete forms, and makes them equal and homogeneous, thus establishing order. A sense of rhythm in line with visual laws can make people feel happy and exciting. [2] Therefore, the use of contrast in the layout creates a certain sense of rhythm, which can make the audience more convenient to obtain information and create a certain imagination space.
The concept of continuity rate is put forward in the theory of visual perception: in the process of perception, people tend to keep the straight line of the perceived object as a straight line and the curve as a curve. [3] In layout design, alignment elements conform to the cognitive characteristics of the audience, thus bringing a sense of security and reliability.
Visual weight theory points out that blank space is empty and has no visual weight. Therefore, the contrast between the objects placed in the blank space and the surrounding environment is heavier. The theory of visual direction points out that there is also a force field in the blank position, which can guide the audience's line of sight. [4] Therefore, the rational use of blank space can highlight the theme, guide the audience to read, and generate a certain imagination.
To sum up, the key words of Alipay layout design can be refined into order, contrast, alignment and blank space.
Methods: 1. Use regular arrangement and distribution to create a sense of order on the layout, such as typesetting in numerical order.
2. Group information by proximity, similarity and closeness.
Methods: Scientific calculation method was used to create a reasonable leaping layout.
Method: Use grids or guides to ensure the alignment of elements in the layout.
Methods: Scientific calculation method was adopted to create a reasonable blank rate in the layout.
Under the guidance of these four principles, in the actual design, we will use the calculation of sequence to control the arrangement and combination of visual elements. Scientific calculation methods can create a compact, clear, clean and orderly design, which also enhances the reliability of information. When typesetting, presenting the main title, subtitle, text, illustrations and notes clearly and logically can not only make reading faster and easier, but also make information easier to understand and remember.
The application of sequence in typesetting means:
1, systematization and clarity
2. Replace subjectivity with objectivity.
3. Look at the design process rationally.
Arithmetic series: the jump rate is low, the information level can not be clearly opened, and it is difficult for the audience to understand the information quickly and clearly. Contrary to the brand "convenient" DNA; (10)
Geometric series: the bounce rate is too high, the layout is suppressed too much, and the audience's psychological ups and downs are greater. Contrary to the brand "safe" DNA; (10)
Fibonacci sequence: the jumping rate is moderate, and the audience will feel more comfortable when reading, which can open the key and non-key points, improve the readability of the page, and correspond to the brand DNA. (○)
Fibonacci series (golden section number): The golden ratio is considered as "the ratio prescribed by God". Fechner, a German experimental aesthetician, found in the last century that there was a coincidence between people's choice of art form and the brain wave oscillation of healthy people. The golden ratio is an "internal scale", which refers to people's mental map. [5]
Fibonacci sequence
1、 1、2、3、5、8、 13、2 1、34……
The formula F(0)=0, F( 1)= 1, f (n) = f (n-1)+f (n-2) (n >; =2，n∈N*)
Golden rectangle
With the increase of Fibonacci series, the ratio of the former term to the latter term approaches the golden section value of 0.6 18039887. ...
At present, offline materials are divided into basic materials, active materials and industrial materials. This paper mainly discusses the layout of active materials and industrial materials. Title, supplementary elements, detailed rules and brand display area are the basic contents of the material, and the proportion of these contents will be adjusted according to different material types. There are many kinds of offline data. This paper mainly selects three representative materials: posters, exhibition stands and floor stickers to explore. The process of exploration is as follows:
1. Determine the height of the brand display area.
2, determine the version heart
3. Determine the layout of elements
4. Determine the alignment of elements
5. Determine the text typesetting form (please refer to the font usage specification document for this part).
The height of the material brand display area is based on the height of a golden rectangle with the same width.
When the height of the material remains the same, the height of the brand display area remains the same. When the material height changes, the height of the brand display area is adjusted in proportion. This ratio is calculated according to the ratio of the original height of the material to the height of a golden rectangle with the same width.
Calculation formula:
Material height =H 1
Material brand display area height =H2
Height of a golden rectangle with the same width as the material =h 1
The height of the golden rectangular brand exhibition area with the same width as the material =h2.
H2=h2*(H 1/h 1)
Special circumstances:
In the process of offline active material design, when the aspect ratio exceeds 1:2, the brand display area will be placed on the right.
Assuming the width of the material is w, according to Fibonacci series, it is suggested that the brand display area should be 2/8w when the aspect ratio is 1:4≤ 1:2, and 1/5w when the aspect ratio is < 1:4, as shown in the following figure:
The regional layout of brand display is divided according to Fibonacci series.
Divide the height of brand display area into 5:3, the upper and lower spaces are 5/ 16, and the height of logo is 3/8. The logo is in the middle. The height of the connector between logos is 3/8 of the height of Alipay logos. The distance between the connector and logo is equal to the height of the connector. As shown in the figure below:
The center of the material is set according to the width of the material, and the blank area around it is calculated by Fibonacci series.
Edit Center Settings-Vertical Poster
Let the width of the poster be w, and calculate the width of the blank space a= 1/8w according to the sequence. The width-height ratio of the golden rectangle is 8: 5, so the height of the top margin is 5/8a. The content at the top of the poster needs to be prominent, so it needs more white space to set off, while there is a brand display area with more white space at the bottom, so the height of white space at the bottom is set to 3/8a. As shown in the figure below:
Editing Center Settings-Exhibition Framework
The setting method of the exhibition center is the same as that of the vertical poster. Let the width of the display stand be w, the blank width a= 1/8w, the blank height of the upper edge 5/8a and the blank height of the lower edge 3/8a.
Edit Center Settings-Horizontal Poster
Because the width of the horizontal poster is longer. Therefore, the width of the horizontal poster is set to w, the blank width is a =113w, the blank height of the upper edge is 5/8a, and the blank height of the lower edge is 3/8a.
Edit Center Settings-Floor Sticker
Let the diameter of the floor tile be r, the blank width a= 1/8R, the blank height of the top edge 5/8a, and the blank height of the bottom edge 3/8a.
Calculation of blank width
The width of the blank depends on the width of the material. Let the blank width be a, the material width be w, and the value of a = n * w a = n * w will change with the change of the material aspect ratio. When the length-width ratio of the material is greater than 1: 1, n =1/8; When the aspect ratio is between 5:8 and 1: 1, n =113; When the aspect ratio is less than 5:.
Calculation of visual blind zone of landing materials
In the actual design process, there will be some visual blind spots at the bottom of materials such as floor stand. If the visual style is the same as the poster, the brand display part will be ignored. Therefore, we specify the height of the visual blind zone of the landing material. Taking the average height of the audience as 160cm and the viewing distance of the landing booth as 500cm, according to my perspective, it can be concluded that the height of the blind spot is 30cm.
For such materials with visual blind spots, the placement position of logo in brand display area is adjusted from center alignment to bottom alignment.
Fibonacci series is used to divide the height of the plate center, thus specifying the layout of elements in the material.
Element Layout-Vertical Poster 1 (Activity Poster)
The height of the core is h, which is divided into 16 small parts, and divided into three large parts according to the ratio of 5/ 16, 8/ 16, 3/ 16. When the main picture is large, the title accounts for 5/ 16, and the main picture accounts for 8/ 16. As shown in the figure below:
Element Layout-Vertical Poster 2 (Active Poster)
The height of the core is h, which is divided into 16 small parts and three large parts according to the ratio of 5/ 16, 8/ 16 and 3/ 16. When there are many titles, the title accounts for 8/ 16, and the main picture accounts for 5/ 16.
Element Layout-Vertical Poster (Industry Material)
The height of the core is h, which is divided into 16 small parts, and divided into three large parts according to the ratio of 5/ 16, 8/ 16, 3/ 16. The topic content of industrial materials is relatively simple, without too much visual decoration, but there are many guiding details. So the title accounts for 3/ 16, the main picture accounts for 8/ 16, and the detailed rules account for 5/ 16.
Element Layout-Exhibition Framework (Industrial Materials)
The height of the plate center is h, which is divided into 16 parts and divided into three parts according to the ratio of 5/ 16, 8/ 16, 3/ 16. The booth is slender in size, and the detailed rules can be arranged vertically. So the title accounts for 3/ 16, the main picture accounts for 5/ 16, and the detailed rules account for 8/ 16.
Element Layout-Horizontal Activity Poster
The width of the core is w, and it is divided into eight small parts, which are divided into two parts according to the ratio of 5/8 and 3/8, with the title area accounting for 5/8 and the main picture accounting for 3/8.
Element Layout-Floor Sticker
The height of the core is h, and it is divided into 16 small parts, which are divided into three large parts according to the ratio of 5/ 16, 8/ 16, 3/ 16, with the title accounting for 8/ 16 and the main picture accounting for 5//kloc-.
In order to make the whole layout present a regular visual effect, the elements are typeset in a left-right alignment way.
At present, in Alipay wallet, the element spacing of different pages is varied and the element layout is irregular. Therefore, when we compare multiple layouts together, we will find it confusing, so we unify the element spacing here and give some suggestions on the layout ratio.
The minimum click area of ios is 44px. That's because apple takes 1 1px as the basic unit in the vertical dimension, and the height of the smallest space in the physical dimension is 1 1*4=88px, which is the minimum height that a finger can touch. At the same time, all component specifications of ios are multiples of 4, so the elements and spacing in ios should be multiples of 4. General pages will use 2, 4 and 8 as the basis of the grid. Considering the small granularity of 2, the page layout will appear fine, while the granularity of 8 is too large to be flexible enough. To sum up, we stipulate that the spacing between elements in the page is a multiple of 4.
1, the interval between elements is a multiple of 4.
Choose multiples of 4px for the custom spacing between elements in the page, and so on.
2. The distance between the page content and the screen edge is 32px( 18dp).
Note: Special pages can use 24px( 12dp).
3. The spacing between the card and the list is 16px(8dp) and 32px (16pp) respectively.
Element aspect ratio (called aspect ratio) can be applied to UI elements and screen size. According to Fibonacci sequence, the recommended aspect ratio is:
8:5 ,? 8:3 , 4: 1 , 8: 1
(1, the height calculated in proportion, taking the approximate value of 4 divisible; 2. When the following proportions can't meet the requirements of the page, you can adjust the size by increasing its multiple based on 4px, such as increasing the height by 20px, 32px, 36px, etc. )
According to Fibonacci sequence, the width-height ratio of banner bit is recommended to be 8: 3 and 4: 1 (the scaled height is an approximate value divisible by 4). There are two kinds of element layout: left and right arrangement and center arrangement.
There are seven main styles of life box cards, and the information structure and layout of the cards are standardized here, as shown in the following figure:
There are five main card styles on the home page of the message center. The information structure and layout of cards are standardized here, as shown in the following figure:
refer to
Kurt Kaufka. Principles of Gestalt Psychology [M]. Zhejiang: Zhejiang Education Press,1997.13-16, 1 19.
[2] Li Zehou. Four lectures on aesthetics [M]. Beijing: Sanlian Bookstore,1999,74
[3][4] Rudolf arnheim. Art and vision [M]. Sichuan: Sichuan People's Publishing House, 200 1, 20-28.
[5] Mao Xiong Chunshan, Takemura Kenichi, Xiao Zhiqiang (translated). Revolutionary activities in the brain [M]. Taipei: Starlight Publishing House, 1998, 1 13.
Original link: /design. Alipay /design. advance/ format