Revealing Apple's latest operating system Yosemite icon Design

@ Chen Zimu last month Apple released a preview of the latest OS OS X Yosemite, and the visual design of the interface was closer to the iOS7 design language. Those familiar fuzzy backgrounds and translucent materials are added to the UI, more concise and beautiful interface layout, and new icons and fonts also appear in the new version of the system.

The change of Yosemite is gratifying. I'm going to talk about the icon design in Yosemite in this article. Prior to the release of Yosemite, Apple's icon design specification for Mac Systems was not clear, but a rough list of lists was presented and some simple suggestions were made in the official human-computer Interface Guidelines (HIG). The design specification was more precise and consistent after the release of Yosemite, but the new hig still had little to do with the design details.

If you want to completely contrast the icon design between Mavericks and Yosemite, there are a lot of things to compare. When we discuss the new icon design from the beginning, we always start with its appearance and the feeling it gives us. By contrast, Yosemita's icons are cleaner and fresher, remove high light, have higher color saturation, and still retain many of the elements that are intended to be materialized (especially skeuomorphic).

Let's keep looking. These icons do not simply optimize the look, in fact designers in this version of the visual language is far more than this stint. After the autumn is officially released, everyone can enjoy the Yosemite. Rather than simply commenting on the icon, I prefer to dissect the new version of the system, design the language and the small details that make Yosemite stunning. Over the past few weeks, I've spent a lot of time researching Yosemite, trying to understand its new design and deconstruct its visual language. Here's what I found.

Dock

Before you talk about the icons on the dock, you might want to know the dock design itself. The first design in the Dock was in fact the 2D style, and then evolved into a Yosemite with the development of the proposed materialized design, and now the new 2D dock.

The Yosemite icon looks more rhythmic on the screen than the previous one. This set of icons has not been published online before, in order to achieve the appearance of consistency, there is certainly a grid system to ensure this. Let's look at the shape of the new icon first.

When you look at the duck of the old version of the system, these icons that add OS X at different times, have different styles, shapes and colors, and different sizes, and your eyes will capture differences and uncoordinated, so the old OS X system is very inclusive. In the new version of the Yosemite, the size of the icon more coordinated, tonal more consistent, the style is more unified.

　　Icon Styling and Grid

The iOS7 icon design grid system has been widely circulated in the icon design circle, but few people will notice the relationship between it and the Yosemite icon. Andreas Wendker is just lightly brought in when it comes to elaborating the unity of the icon design.

In fact, Apple's designers have used the grid system to redesign the icons for Yosemite. A more accurate description is that they have created a new set of icon design systems. (Note: These are based on the beta version of the system and just released icon design, for just contact Yosemite Designers, this grid is very helpful to understand its design ideas. )

Yosemite's icon system can be divided into 3 basic shapes, rounded, square, and angled rectangles. Different from the mobile end of the ios,apple in the MacOSX, or very fastidious to maintain the character of the icon, only a few icon design is out of this set of rules.

To give you a clearer picture of the pattern of this set of icons, I covered the iOS7 grid system with the Yosemite icon, and the grid size was 1024x1024. It is obvious that the icons are very regular.

There is no doubt that these basic shapes and grid systems correspond very well. Let's try the real icon next.

The ibooks's circular icon and grid system are completely aligned, and the near-square system Setup icon and grid system are not fully fit, but are very close to the grid. Because the text editor is skewed, the center of the draft in the icon coincides with the center point of the grid, and the tilted automatic pencil is inserted into the gap between the two circles. If you look closely at the icon of the system setting, you will find that it is not a square, but rather a rectangle with a slightly larger width than the height. The "Square" in the Yosemite is actually divided into two types, like the system setup icon, the width is only slightly greater than the height, the Finder and the system settings icon. The other is icons such as terminals and activity monitors, whose widths are significantly greater than the height.

Looking at the icon in the App Store, the inside is a pen and ruler A, slightly beyond the edge of the circular grid, which is not exactly the same as the ibooks icon that follows the grid, mainly because the visual element of a is not as full as the book in the ibooks icon. So the adjustments will make them look more consistent. The Finder's icon size is pretty standard, and the finder's smiley face looks happier and more natural than the previous finder icon Yosemite.

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

Take the contact icon for example, the left side is the old version of the tilt rectangle icon, it is more like in a three-dimensional space, in line with the perspective of the law, there is vanishing point, the overall looks like a natural tilt. In other words, when you make an icon like this, you will need to adjust the edge angle according to the perspective rule when you select a rectangle 11 degrees counterclockwise.

The Yosemite icon retains the same positive projection as the old version, but there is no perspective or depth. So, when making the Yosemite icon, create a new rectangular contour, rotate 11 degrees counterclockwise, and you can start making the details. You do not need to draw a very realistic texture before, and this difference is very easy to understand in the above picture.

Obviously, the icon design in Yosemite is a set of visual specifications, especially the round and square icons. This set of icons is distributed evenly and regularly on the two-dimensional plane, so that the dock does not need to be made into a class.

So, this grid is the norm, and your eyes can be clearly judged.

There was a lot of speculation that Yosemite's icon would turn into a regular circle, and thankfully, Apple didn't do it (it seems that many exotic analysts like to make extreme assumptions about Apple). I think Apple's designers have made a flexible system that retains a clean and refreshing view and gives designers of third parties enough flexibility and freedom.

Referring to the Yosemite icon Design, I created a new raster system that conforms to the Yosemite Icon Design specification on the basis of IOS7 's icon grid system:

Don't worry about the last use of it, you have to know it exists.

　Level

When a new set of visual norms is created, people usually come to taste, and the norms are often misinterpreted. So, just wait a moment before you start, think about what your app is for, and what kind of icon you can use to make it more expressive.

I do not think that the shape of the choice is a rigid rule, even Apple itself is often used in real life, the actual shape of things to design icons. I am more inclined to understand the function of these basic graphs rather than apply them mechanically.

　　Circular

Circular icons are used for partial entertainment, user-used and lightweight programs. They look very beautiful, but most of the professional applications do not use this styling icon. So does a program like Game Center and contacts need to be designed to be round? It is not impossible, the key is to see the Yosemite official version of the logo design.

Square

A square icon is mostly a system-related application. Finder, terminal, System setup, Activity Monitor, Mission control are listed here.

　Tilt Rectangle

Since the advent of macosx, this tilt-rectangle icon design is an important part of its design language, and many tool-class applications prefer this design. Now that the system version has been updated to 10.10, it still exists, but it is simplified into a 2d plane.

At present, the tilted rectangular shape of the icon is the most widely used in three types of applications, those with obvious tool properties of the application especially like to design the icon to this shape. It may be that the icon design for the tilted rectangle has more flexibility, and it is often possible to add the entity elements of the object to the icon to make it look more personalized.

　Material and Highlights

Nowadays, the low saturation color has been replaced by the warm and bright hue. In the Yosemite, the designer for the metal material icon, plus the orange soft light, in the background to add a shade of blue-green, so that they look more textured. They are not pure color effects, and this color is closer to ambient reflection.

At the press conference, Craig Federighi called this color "translucent material" in the Yosemite Dock. When I first saw his keynote, I smiled: "Isn't this a white semitransparent graph cascade with blur filters plus?" Of course, you can see Craig's story as a way to make it easier to sell, but the Yosemite icon is not simply flat, it is not simply a set of operating system icons, they still retain the material and ambient light-they have "interaction" with the system.

This ambient light filter does not hit every icon, but rather a gray metal material (all or part) of the icon will show this ambient light.

In fact, you do not have to use the 3D modeling program to create ambient light, PS can do, of course, you have to use 3D software to render the environment light naturally better. In this case, the sphere is placed on the orange backplane, and the backplane and balls are placed under the tree, rendering the ambient light very close to the metal part of the Yosemite icon.

The ball on the left is white and not polished, and you can see the green, yellow, and brown surroundings reflecting light on its surface. At the bottom of the sphere, you can see the orange shading reflected by the orange backplane. This color from real life is so seamlessly combined with the flattened elements of Yosemite. (Flattening and fitting are not opposites!)

The sphere on the right is chrome-plated, reflecting the surrounding environment like a mirror. In Yosemite, large chunks of metal are modeled on the material of aluminum, not chromium, so their reflective effects look more illusory and subtle. If you change the Yosemite desktop background, you will notice that the metal part of the icon will change subtly as the environment changes. So, if you're willing to delve into Apple's icon design, you'll find a lot of surprises in the details that open up your horizons.

　Conclusion

The shape, grid, light source, and details of the icons are important, but remember that they are just basic guidelines, and a good designer should know when to follow the rules and when to break the law.

Please be sure to pay attention to the overall shape of the icon, hue and texture, as an objective entity to treat, reasonable simplification, more reference to other icons of the design. Frankly, there has been no dramatic change in the design of icons, and they have only been more consistent and coordinated than before. It is reasonable to make a Mac app icon based on this set of guidelines, and if you design a more pristine icon on this premise, it will stand out from this set of icon systems (beware of being killed by Virgo or obsessive users!). But no matter what, you must carefully polish the details, angles and ambient light.