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

 HYPERLINK /pd/95377.html 揭秘苹果最新操作系统YOSEMITE的图标设计 · 2014/07/21 来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。 HYPERLINK /ywdn6 \t /pd/_blank 点此查看详情 上个月苹果发布了最新操作系统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。 INCLUDEPICTURE \d /wp-files/2014/07/661aa2692d79a3e7b54424d093f2cf2f.png \* MERGEFORMATINET  比起之前的图标，Yosemite的图标在屏幕看起来更有韵律。这组图标设计之前并未在网上发布过，为了达到外观上的一致性，是肯定有一套栅格系统来确保这一点的。我们先看看新版图标的形状。 当你目光从老版系统的Dock上扫过的时候，这些在不同时期加入OSX的图标，拥有着不同风格，不同形状和色彩，以及不同的尺寸，你的眼睛会捕捉到它们间的差异和不协调，所以老版的OSX系统还是非常兼容并蓄的。在新版的Yosemite中，图标的尺寸大小更加协调，色调更一致，风格也更加统一了。 ? 图标造型与栅格 iOS7图标设计的栅格系统已经在icon设计圈中广泛流传了，但是很少有人会注意到它和Yosemite的图标之间的关系。Andreas Wendker也仅仅只是在阐述图标设计统一性的时候轻轻带过。 实际上，苹果的设计师已经在为Yosemite重新设计图标的时候用上了这套栅格系统。更准确的描述是：他们开创了一套新的图标设计体系。（注：这些都基于Beta版的系统和刚刚发布的图标设计，对于刚刚接触Yosemite设计者而言，这套栅格是非常有助于理解它的设计思路的。） Yosemite的图标系统可以分成3种基本的形状，圆形，方形，和倾斜矩形。不同于移动端的iOS，Apple在MacOSX中，还是非常讲究保持图标的个性，只有极少数图标的设计是出离于这套规律的。 INCLUDEPICTURE \d /wp-files/2014/07/f867411db8e34341cf9475240c871389.png \* MERGEFORMATINET  为了让你更清晰地看出这套图标的规律，我将iOS7的栅格系统覆盖在Yosemite的图标之上，栅格尺寸是1024×1024。很明显可以看出，图标们是非常规则的。 INCLUDEPICTURE \d /wp-files/2014/07/06553e63abcf399f21267d5bddd2196b.png \* MERGEFORMATINET  毫无疑问，这些基本形状和栅格系统对应起来非常不错。接下来我们试试真实的图标。 INCLUDEPICTURE \d /wp-files/2014/07/45ad309e2368069336c578483af4ef1b.png \* MERGEFORMATINET  iBooks的圆形图标和栅格系统完全对应了，接近方形的系统设置图