揭秘苹果最新操作系统YOSEMITE的图标设计(1)

揭秘苹果最新操作系统YOSEMITE的图标设计(1)

上个月苹果发布了最新操作系统OSX Yosemite 的预览版，界面的视觉设计与iOS7的设计语言更加接近了。那些熟悉的模糊背景和半透明材质被添加到UI中，更加的简洁漂亮的界面布局，和全新的图标和字体也都出现新版的系统中。

Yosemite的变化是可喜的。我打算在这篇文章中说说Yosemite中的图标设计。在Yosemite发布之前，Apple在Mac系统 上的图标设计规范并不明确，只是提出过一组粗略的List，并在官方的人机交互界面准则HIG）中提出了一些简单的建议。在Yosemite发布之后， 这套设计规范更加精准、一致了，不过新的HIG对于设计细节依然没有过多涉及。

如果要完全对比Mavericks和Yosemite之间的图标设计，需要对比的东西有很多。当我们从头讨论新的图标设计的时候，总是从它的外 观和它给人的感受开始的。相比之下，Yosemita的图标更为整洁清爽，移除了高光，色彩饱和度更高，并且依然保留很多拟物化特指 skeuomorphic）的元素。

让我们接着看下去。这些图标并不是单纯优化了一下外观，实际上设计师们在这一版视觉语言上的探索远不止这一星半点。秋季正式发布之后，大家就可 以享用Yosemite了。与其简单的评论图标的好坏，我更愿意去剖析新版的系统构想，设计语言与以及令Yosemite惊艳的小细节。在过去的几周里 面，我花费了大量的时间来研究Yosemite，尝试去理解它的新设计，解构它的视觉语言。以下就是我的发现。

Dock

在聊Dock上的图标之前，不妨先了解一下Dock设计本身。Dock最早的设计其实就是2D的样式，之后随着苹果所推崇的拟物化设计的发展而进而演化成3D的，而如今的Yosemite则重新回到了2D Dock。 

比起之前的图标，Yosemite的图标在屏幕看起来更有韵律。这组图标设计之前并未在网上发布过，为了达到外观上的一致性，是肯定有一套栅格系统来确保这一点的。我们先看看新版图标的形状。

当你目光从老版系统的Duck上扫过的时候，这些在不同时期加入OSX的图标，拥有着不同风格，不同形状和色彩，以及不同的尺寸，你的眼睛会捕 捉到它们间的差异和不协调，所以老版的OSX系统还是非常兼容并蓄的。在新版的Yosemite中，图标的尺寸大小更加协调，色调更一致，风格也更加统一 了。

图标造型与栅格

iOS7图标设计的栅格系统已经在icon设计圈中广泛流传了，但是很少有人会注意到它和Yosemite的图标之间的关系。Andreas Wendker也仅仅只是在阐述图标设计统一性的时候轻轻带过。

实际上，苹果的设计师已经在为Yosemite重新设计图标的时候用上了这套栅格系统。更准确的描述是：他们开创了一套新的图标设计体系。 注：这些都基于Beta版的系统和刚刚发布的图标设计，对于刚刚接触Yosemite设计者而言，这套栅格是非常有助于理解它的设计思路的。）

Yosemite的图标系统可以分成3种基本的形状，圆形，方形，和倾斜矩形。不同于移动端的iOS，Apple在MacOSX中，还是非常讲究保持图标的个性，只有极少数图标的设计是出离于这套规律的。

为了让你更清晰地看出这套图标的规律，我将iOS7的栅格系统覆盖在Yosemite的图标之上，栅格尺寸是1024×1024。很明显可以看出，图标们是非常规则的。 

毫无疑问，这些基本形状和栅格系统对应起来非常不错。接下来我们试试真实的图标。 

iBooks的圆形图标和栅格系统完全对应了，接近方形的系统设置图标和栅格系统虽未完全贴合，但是非常接近了。文本编辑器由于是倾斜的，图标 中的草稿本的中心与栅格的中心点重合，倾斜的自动铅笔则几乎贴着内测两个圆之间的间隙插了进去。如果你仔细观察系统设置的图标，你会发现它并非正方形，而 是一个宽度比高度略大一点的长方形。Yosemite中的“方形”实际上分两种，一种像系统设置图标一样，宽度仅仅只是略大于高度，Finder与系统设 置的图标均是如此。而另外一种则是终端和活动监视器这样的图标，它们的宽度会明显大于高度。 

在看看App Store的图标，内侧是笔和尺子组成的A，稍稍超出了圆形栅格的边缘，这一点和严格遵循栅格的iBooks图标不太一样，这主要是因为这个A的的视觉元 素并不如iBooks图标里的图书来的饱满，所以这样的调整会让它们看起来更一致。Finder的图标尺寸很规范，和之前的Finder图标相 比，Yosemite中Finder的笑脸看起来更快乐，更自然。

倾斜矩形的图标值得特别关注，因为它是第三方图标中最常见的类型。

以联系人图标为例，左侧为老版的倾斜矩形图标，它更像是处在一个三维空间中，符合透视规律，有消失点，整体看起来像是自然倾斜着。换句话说，你在制作这样的图标的时候，将一个矩形逆时针选择11度之后，还需要根据透视规律调整边缘角度。

Yosemite的图标虽然保留了老版相似的正投影，但是并没有透视，也没有深度。所以，在制作Yosemite的图标之时，新建一个矩形轮廓，逆时针旋转11度之后，你就可以开始制作细节了。比起之前，你也无需绘制极为逼真的纹理，这种差异你在上图中非常容易体会到。

很明显，Yosemite中的图标设计是有一套视觉规范的，尤其是圆形和方形的图标。这套图标均匀而规则地分布在二维平面上，如此一来Dock也无需制作成3D的样子了。

所以，这套栅格就是准则，而你的双眼可以清晰地判断出来。

曾经有很多人猜测Yosemite的图标全会变成规则的圆形，值得庆幸的是，苹果并没有这么做似乎很多奇葩的分析师喜欢会针对苹果作出各种极端推测）。我认为苹果的设计师们作出了一套灵活的系统，保留了干净清爽额外观，又赋予第三方的设计师们足够的灵活性和自由度。

参考了Yosemite的图标设计，我在iOS7的图标栅格系统的基础上，制作出一套符合Yosemite的图标设计规范的新的栅格系统： 

甭管你最后用不用它，你得知道它的存在。