Revealing the icon design of Apple's latest operating system YOSEMITE (1)

Revealing the icon design of Apple's latest operating system YOSEMITE (1)

Last month, Apple released a preview version of the latest OS OSX Yosemite. The visual design of the interface is closer to the design language of iOS7. Those familiar fuzzy backgrounds and translucent materials are added to the UI, with more concise and beautiful interface layout and brand new icons and fonts also appearing in the new version of the system.

The change in Yosemite is gratifying. I am going to talk about the icon design in Yosemite in this article. Before the release of Yosemite, Apple's icon design specifications on Mac systems were not clear, but a rough List was proposed, and the official man-machine interaction interface principle HIG was introduced). After the release of Yosemite, the design specifications were more accurate and consistent, but the new HIG still did not involve much details about the design.

To fully compare the icon design between Mavericks and Yosemite, there are many items to be compared. When we discuss the design of a new icon from the beginning, we always start with the outside view and the feelings it gives. In contrast, the Yosemita icons are more clean and tidy, removing highlights, higher color saturation, and retaining many elements that are quasi-materialized, especially skeuomorphic.

Let's take a look. These icons do not just optimize the appearance. In fact, designers are far more than just exploring this visual language. After the official release in autumn, you can enjoy Yosemite. With its simple comment icon, I prefer to analyze the new version of the system concept, design language, and small details that make Yosemite amazing. Over the past few weeks, I spent a lot of time studying Yosemite, trying to understand its new design and deconstruct its visual language. Here is my findings.

Dock

Before talking about the icon on the Dock, you may want to know about the Dock design. The earliest design of the Dock is actually a 2D style, and then evolved into 3D with the development of the quasi-materialized design promoted by Apple, and today's Yosemite is back to the 2D Dock.

Compared with the previous icons, the Yosemite icon looks more rhythmic on the screen. This group of icons has not been released on the Internet before. To achieve visual consistency, there must be a grid system to ensure this. Let's first look at the shape of the new layout.

When you look at the Duck of the old version system, these OSX icons added in different periods have different styles, different shapes and colors, and different sizes, your eyes will catch the differences and inconsistencies between them, so the old OSX system is very compatible. In the new Yosemite version, the Icon size is more consistent, the color is more consistent, and the style is more unified.

Icon shape and grid

The raster System of iOS7 icon design has been widely used in the icon design circle, but few people will notice the relationship between it and the Yosemite icon. Andreas Wendker is just a simple introduction to the uniformity of icon design.

In fact, Apple's designers have used this raster system to design a new map for Yosemite. A more accurate description is that they have created a new icon design system. Note: These are based on the Beta version of the system and the recently released icon design. This grid is very helpful to understand the design concept of Yosemite designers .)

The Yosemite icon system can be divided into three basic shapes: Circle, square, and skewed rectangle. Unlike iOS on the Mobile End, Apple is still very cautious about maintaining the icon personality in MacOSX. Only a few icons are designed out of this pattern.

To give you a clearer picture of the rule, I will overwrite the iOS7 raster system on the Yosemite icon. The raster size is 1024 × 1024. Obviously, icons are very regular.

Undoubtedly, these basic shapes correspond very well to the raster system. Next we will try the real icon.

The iBooks circle icon corresponds to the raster system. The system setting icon and the raster system are not completely fit but very close to each other. Because the text editor is skewed, the center of the draft in the icon overlaps with the center of the grid, and the tilted automatic pencil is inserted almost with the gap between the two circles in the internal test. If you carefully observe the icon set by the system, you will find that it is not a square, but a rectangle with a slightly larger width than the height. The square in Yosemite is actually divided into two types: one is like the system setting icon, the width is only slightly greater than the height, and both the Finder and the system setting icon are like this. The other is the terminal and activity monitor icons, whose width is significantly greater than the height.

Looking at the App Store icon, inside is A composed of A pen and ruler, slightly beyond the edge of the circular grid, this is not the same as the iBooks icon strictly following the grid, this is mainly because the visual elements of A are not as full as the books in the iBooks icon, so such adjustments will make them look more consistent. The size of the Finder icon is very standard. Compared with the previous Finder icon, the smiling face of the Finder in Yosemite looks happier and more natural.

The icon of the skewed rectangle deserves special attention because it is the most common type of third-party icons.

Take the contact icon as an example. The left side is the old version of the skewed rectangle icon. It is more like a three-dimensional space, which conforms to the perspective pattern and has disappeared points. The whole looks naturally skewed. In other words, when you create an icon like this, you need to adjust the edge angle according to the perspective rule after you select a rectangle of 11 degrees counterclockwise.

Although the Yosemite icon retains the normal projection similar to the old version, it does not have perspective or depth. Therefore, when creating a Yosemite icon, you can create a new rectangular contour. After rotating 11 degrees counter-clockwise, you can start to create details. You don't need to draw extremely realistic textures as before. You can easily see this difference.

Obviously, the icon design in Yosemite has a set of visual specifications, especially the circle and square icons. This set of icons are evenly and regularly distributed on two-dimensional planes, so that the Dock does not need to be made into 3D.

Therefore, this raster is a criterion, and your eyes can be clearly identified.

Many people have speculated that the plenary session of the Yosemite icon has become a circle of rules. Fortunately, Apple does not. It seems that many wonderful analysts like to make various extreme guesses about Apple ). I think Apple's designers have made a flexible system that retains the clean and refreshing appearance and gives third-party designers sufficient flexibility and freedom.

Based on the Yosemite icon design, I developed a new grid system that complies with the Yosemite icon design specifications on the basis of the iOS7 icon grid system:

You don't need it at last, but you need to know its existence.