网格体系与苹果的图标设计.docx

揭秘苹果必威体育精装版操作系统YOSEMITE的图标设计·2014/07/21来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。点此查看详情上个月苹果发布了必威体育精装版操作系统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的图标在屏幕看起来更有韵律。这组图标设计之前并未在网上发布过，为了达到外观上的一致性，是肯定有一套栅格系统来确保这一点的。我们先看看新版图标的形状。当你目光从老版系统的Dock上扫过的时候，这些在不同时期加入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的笑脸看起来更快乐，更自然。倾斜矩形的图标值得特别关注，因为它是第三方图标中最常见的类型。以联系人图标为例，左侧为老版的倾斜矩形图标，它更像是处在一个三维空间中，符合透