Essential for UI designers: Golden cut in Apple Design

If you study or do not study, the beauty is there, not biased; if you discover or do not discover, the golden split is there, not many. Knowing about him and discovering the beauty of him also gives him a wonderful experience, and there is no foundation for good works.

Unveil

0.618 or 1.618. Do you think this number is familiar. This is actually a mathematical proportional relationship (when it comes to mathematics, don't worry about it first, knowing that we are not designed to be sensitive to computing, huh, huh), that is, dividing a line segment into two parts, at this time, the ratio of the short segment to the long segment is exactly equal to the ratio of the long segment to the whole line, and the value ratio is. 618 or 0.618: 1.

This is the golden division law, which was discovered by the ancient Greek mathematician bidaras in the sixth century BC. Later, Plato, an ancient Greek aesthetic scientist, called the golden division. Before gold division is discovered, it exists in the objective world. It is only after people reveal this secret that they have a clear understanding of it. When people observe the natural world again according to this rule, they are surprised to find that they can see it in many beautiful things in the natural world, such as the leaves, flowers, snow, pentagram ...... In the body structure of many animals and insects, especially the human body, there are abundant golden ratios.

Golden cut in plant leaves

The ratio of each radius of the curve to the next is a golden ratio, and it is the most beautiful in nature.

These mathematical miracles of animals and plants are not accidental coincidences, but the best solutions to adapt to their own growth during the long-term evolution of years.

Closer

As an important form of beautiful Law, the golden division law has become a classic aesthetic law passed down from generation to generation! Here I would like to recommend you a Golden Rectangle, an aesthetic tool ). The ratio of length to width is 0.618, and the ratio can be continuously divided.

Gold rectangle:

The golden split rate and the golden rectangle can bring beauty and pleasure to the screen. It can be found in many works of art and architecture. The pyramid of Egypt, the Buddhist temple of Butte in Athens, the Taj Mahal in India, all of these great masterpieces have a Golden Shadow.

The multi-layout structure of the Taj Mahal shows the golden division.

The face of the Mona Lisa in Da Vinci's Mona Lisa is also in line with the golden rectangle (many pictures on the Internet are not mentioned here, haha ), this proportional layout is also applied to final dinner.

There is a subtle relationship between the back wall and the window, as well as the foreground table and the disciple's feet in the last dinner.

Why do people instinctively feel the beauty of such proportions? In fact, this is closely related to human evolution and normal human development. According to research, from ape to human evolution, the largest change in the skull and leg bone in the skeleton, the smallest change in the shape of the body due to the approximate gold and the rectangle, there are many proportions of Human Body Structure close to 0.618, this makes the human body beauty fixed in the History accumulation of several hundred years. Human beings are most familiar with themselves, and are bound to regard human body beauty as the highest aesthetic standard. people and things, people and things, are widely promoted. Any object similar to human body will like it and feel beautiful.

The ancient Greek mathematician bidaras has a famous saying: "Anything beautiful has a common feature. This is the coordination between parts and the whole ."

Let's get married. Apple and gold have now lived a happy life.

Apple logo

The ratio of the height of small leaves to the Gap Height of the Apple logo is 0.6, and the gap position is closely related to the Golden split. Maybe there are more gold-separated passwords here, so you need to discover them by yourself ~

Golden split in the interface

Taking iPhone 4 as an example, the main interface's Icon size is 114PX * 114PX, and its ratio to the total number of icons and line spacing (176PX) is approximately 0.6, the aspect ratio of screen resolution is close to the Golden split of 640/960.

On the text message page, the proportion of information block width to the entire screen is also very close to the proportion of gold. The dial is a collection of small gold rectangles. It is a very important factor to consider when we don't know how to allocate the proportions of each element on the page.

Let's look at the following examples:

The proportion of the address bar and the search bar in Safari is also separated by gold. The space is allocated reasonably, which can fully display the current address and make it easier for users to choose "Search ".

The 26-key keyboard is the most frequently used keyboard in the mobile phone. The ratio of the key height to the key height of the entire line is very close to the Golden Section, and each key is also a small golden rectangle. The ratios here are similar but not identical to those of Huang Yu. This is also important because the design is not only aesthetic, but also takes into account the accuracy of user touch keys, the carrying capacity of information, and many other factors.

The golden ratio can also be used for Color comparison, such as brightness comparison, the ratio of the brightness of the dark and light keys on the same height on the keyboard is very easy to identify and distinguish between the key functions when it is close to the golden style, and it will not feel too eye-catching.

Web Applications

This is a screenshot of the homepage of apple's official website. Unlike many websites that use gold to split left and right columns, it fully uses the golden rectangle, arrange the layout reasonably, and demonstrate the atmospheric style.

Gold division in Id Design

Nowadays, the wide-screen display is a mainstream trend. The ratio of and is close to gold division, and they are fully applied to the design of products. The classic Apple Mac book pro also uses a screen design similar to the golden ratio of 16: 10.

They are very happy. What should we do?

After talking so much, will everyone be a little dizzy. Haha, you know that you are not a math student and are not good at arithmetic. I will summarize it for you.

Apple's design has a golden shadow everywhere (it is estimated that there are many bright lights in the office that are not easy to find. Come and find out ), is it possible to use gold to split the elements of pages that you don't know how to arrange without considering other necessary factors. For example, table design and web page partitioning require two parts in the UI with a focus.

The banner, who uses the golden split layout, has a reasonable proportional relationship between the text and the image, and does not lose its luster on the basis of highlighting the text to the greatest extent.

At the same time, there is another important thing here, that is, the other factors mentioned above. This requires clever application and global thinking before we can make a real "golden" work, it is not just a failure that applies the golden rate but is not satisfied.

In actual use, we should not simply copy it. If we use the golden splitting ratio, the overall effect will be poor, which requires us to continuously accumulate experience in the actual creation process, to achieve the freedom of application, we should try to create in a variety of forms as much as possible, and we should not make these patterns that are useful for our creation become obstacles to restrained creation.