的图标设计上个月，苹果发布了最新操作系统OSXYosemite的预览版，界面的视觉设计更接近iOS7的设计语言。UI中加入了那些熟悉的模糊背景和半透明材质，更加简洁美观的界面布局，全新的图标和字体也出现在了新版本的系统中。欢迎对Yosemite进行更改。我将在本文中讨论Yosemite中的图标设计。在Yosemite发布之前，Apple对Mac系统的图标设计规范并不明确，只是提出了一套粗略的Lists，并在官方的Human-ComputerInterfaceGuidelines（HIG）中提出了一些简单的建议。在Yosemite发布后，这套设计规范变得更加精确和一致，但新的HIG仍然没有涉及太多的设计细节。要全面比较Mavericks和Yosemite之间的图标设计，有很多东西可以比较。当我们从头开始讨论一个新的图标设计时，我们总是从它的外观和感觉开始。相比之下，Yosemita的图标更加简洁明了，去掉了高光，颜色更加饱和，仍然保留了很多拟物化（特别拟物化）的元素。让我们继续。这些图标并不是单纯的优化外观，事实上，设计师们探索的远不止这个版本的视觉语言。秋季正式发布后，大家就可以尽情享受Yosemite了。与其简单地评论图标的质量，我更愿意分析新版本的系统概念、设计语言和让Yosemite惊艳的小细节。在过去的几周里，我花了很多时间研究优胜美地，试图了解它的新设计并解构它的视觉语言。这是我发现的。Dock在谈论Dock上的图标之前，让我们先看看Dock设计本身。Dock最早的设计其实是2D风格，后来随着Apple所提倡的拟物化设计的发展演变成了3D，而今天的Yosemite又回到了2DDock。与以往的图标相比，Yosemite的图标在屏幕上看起来更有节奏感。这套图标设计之前并没有在网上发布过，为了在外观上做到一致，必须要有一个网格系统来保证这一点。我们先来看看新图标的形状。当你扫一眼旧版系统的Duck时，这些在不同时期加入OSX的图标，风格、形状和颜色各不相同，大小不一，你的眼睛会捕捉到它们之间的差异和区别。不协调，所以旧的OSX系统还是很兼容的。在新版Yosemite中，图标大小更加协调，色调更加一致，风格更加统一。图标形状与网格iOS7图标设计的网格体系在图标设计界广为流传，但很少有人注意到它与Yosemite图标的关系。AndreasWendker在解释图标设计的统一性时只是轻描淡写地提到了这一点。事实上，Apple的设计师在重新设计Yosemite的图标时就已经使用了这种网格系统。更准确的描述是：他们创建了一个新的图标设计系统。（注：这些都是基于Beta版系统和新发布的图标设计，对于刚接触Yosemite设计师的人来说，这套网格对理解它的设计思路很有帮助。）Yosemite的图标系统可以分为3基本形状有圆形、正方形和斜长方形。与移动端的iOS不同，苹果在MacOSX中仍然非常注重保持图标的个性，只有极少数的图标设计偏离了这套规则。为了让大家更清楚地看到这套图标的规律，我在Yosemite的图标上叠加了iOS7的网格系统，网格大小为1024×1024。很明显，图标非常规则。毫无疑问，这些基本形状可以很好地映射到网格系统。接下来我们尝试实际的图标。iBooks的圆形图标与网格系统完全对应，接近正方形的系统设置图标与网格系统不完全吻合，但非常接近。由于文本编辑器是倾斜的，所以图标中绘图板的中心与网格的中心重合，倾斜的自动铅笔几乎插入到两个内圈之间的空隙中。如果你仔细观察系统设置图标，你会发现它不是一个正方形，而是一个宽度略大于高度的矩形。Yosemite中的“正方形”其实分为两种，一种像系统设置图标，宽度只是比高度略大，Finder和系统设置图标都是这样。另一个是像终端和活动监视器这样的图标，它们的宽度明显大于高度。再看AppStore的图标，里面是一个由钢笔和尺子组成的A，略超出圆形网格的边缘。这与严格遵循网格的iBooks图标不同。这主要是因为A的视觉外观，元素没有像iBooksicon中的书籍那样饱满，所以这次的调整会让它们看起来更加一致。Finder的图标大小非常规范，与之前的Finder图标相比，Yosemite中Finder的笑脸看起来更快乐、更自然。带有倾斜矩形的图标值得特别注意，因为它们是最常见的第三方图标类型。以联系人图标为例，左侧是旧版倾斜的矩形图标，更像是在三维空间中，符合透视法则，有一个消失点，看起来很自然整体倾斜。也就是说，当你制作这样一个图标时，选择一个逆时针旋转11度的矩形后，你需要根据透视法则调整边缘角度。Yosemite的icon虽然保留了老版本类似的正投影，但是没有透视，没有深度。所以，在制作Yosemite的图标时，新建一个矩形轮廓，逆时针旋转11度，就可以开始制作细节了。您也不必绘制比以前更逼真的纹理，您可以在上图中轻松看到这种差异。显然，Yosemite中有一套图标设计的视觉约定，尤其是圆形和方形图标。这套图标均匀规则地分布在二维平面上，让Dock无需做成3D外观。所以，这个格子就是指引线，你的眼睛可以清楚地判断出来。很多人曾经猜测优胜美地的图标会变成一个规则的圆圈。幸运的是，苹果并没有这样做（似乎很多奇葩的分析师都喜欢对苹果进行各种极端的猜测）。我认为Apple的设计师做出了一个灵活的系统，既保持了简洁的外观，又给了第三方设计师足够的灵活性和自由度。参考了Yosemite的图标设计，基于iOS7的图标网格系统，我做了一个新的网格系统，符合Yosemite的图标设计规范：不管你最后用不用，你都得知道它的存在。#p#Hierarchy当一套新的视觉规范被创建时，人们通常会尝试它们，而这些规范往往会被误解。所以，在做之前先等等，想想你的APP是用来干什么的，你用哪种图标形状比较有表现力。我认为形状的选择并不是硬性规定，就连苹果自己也经常使用现实生活中事物的实际形状来设计图标。我更喜欢深入理解这些基本图形的功能，而不是死记硬背。圆圆的图标多用于娱乐性、用户使用和轻量级的程序。它们看起来很漂亮，但大多数专业应用程序不使用这种风格的图标。那么像GameCenter、Contacts这样的程序是不是也需要设计成圆形呢？也不是不可以，关键看Yosemite正式版的图标设计。方形图标主要是与系统相关的应用程序。Finder、终端、系统设置、活动监视器、任务控制都列在这里。材料和亮点如今，不饱和的颜色已被温暖、明亮的色调所取代。在Yosemite中，设计师为带有金属材质的图标添加了橙色的柔光，并在背景中添加了蓝绿色的阴影，让它们看起来更有质感。它们不是纯粹的颜色效果，这种颜色更接近环境反射。在新闻发布会上，CraigFederighi将Yosemite'sDock中的颜色称为“半透明材料”。当我看到他的Keynote时我只是笑了：“这不就是一个白色的半透明层叠加了一个模糊滤镜吗？”当然，你可以把克雷格的说法看成是为了方便营销而创作的，不过，Yosemite的图标并不是简单的扁平化，也不是简单地设计成一套操作系统图标。它们仍然保留材料和环境光——它们与系统“交互”。这种环境光滤镜并不是应用在每个图标上，但是那些具有灰色金属材质（全部或部分）的图标会显示这种环境光。其实不需要用3D建模程序来制作环境光，PS也可以。当然如果非要用3D软件渲染环境光就更好了。在这种情况下，球体放在橙色底板上，底板和球都放在树下。渲染出来的环境光非常接近优胜美地图标的金属部分。左边的球体是一种白色的非抛光材质，你可以在它的表面看到绿色、黄色和棕色的环境反射。在球体底部，您可以看到橙色底板反射出的橙色阴影。这种真实的颜色是如何与Yosemite中的平面元素无缝集成的。（平面和拟物化并不总是对立的！）右边的球体是镀铬的，它反映了周围的环境。在Yosemite中，金属块模拟的是铝材质，而不是铬材质，因此它们的反射看起来更加不真实和微妙。如果你改变Yosemite的桌面背景，你会发现图标金属部分的环境光会随着“环境”的变化而发生微妙的变化。因此，如果你愿意仔细钻研苹果的图标设计，你会发现很多让你惊喜、开阔眼界的细节。结论图标的形状、网格、灯光和细节都很重要，但请记住它们只是基本准则。一个好的设计师应该知道什么时候遵守规则，什么时候打破规则。请注意图标的整体造型、色调和材质，将其作为一个客观实体，合理简化，并参考其他图标设计。坦率地说，图标设计并没有太大的变化，只是比以前更加一致和协调。按照这套设计准则来制作Mac应用程序图标是合理的。如果在这个前提下设计出更新鲜更精致的图标，就会从这套图标体系中脱颖而出（小心别被处女座或者强迫症用户秒杀！）。但无论如何，一定要仔细打磨细节、角度和环境光。
