苹果操作系统图标设计细化分析.pptVIP

苹果操作系统 Yosemite 图标设计细化分析 在2014年的WWDC大会上，苹果发布了最新操作系统OS X Yosemite的预览版，界面的视觉设计更加接近iOS的设计语言。iOS 7中那些熟悉的模糊背景和半透明材质被添加到UI中，更加的简洁漂亮的界面布局，全新的图标和字体也都出现新版的系统中。Yosemite的图标移除了高光，色彩饱和度更高，依然保留很多拟物化元素。 优胜美地 Yosemite全新的系统图标 Dock 其实Dock最早的设计就是2D样式的，之后随拟物化的流行而发展成3D的，而如今则是重新回到了2D的。 不同时期的图标，拥有着不同风格、形状、色彩、尺寸，你会感觉到它们间的差异和不协调，而新图标的尺寸大小更加协调，色调更一致，风格更加统一。 相比之前的图标，新的图标看起来更有韵律。 栅格 Yosemite的图标可以分成3种基本的形状，圆形、方形和倾斜矩形。不同于移动端的iOS，Apple在Mac OS X中，还是非常讲究保持图标的个性，只有极少数图标的设计是出离于这套规律的。对于刚接触Yosemite设计者而言，栅格将是非常有助于理解它的设计思路的。 栅格 iOS7图标设计的栅格系统已经在设计圈广泛流传了，很少有人会注意到它和Yosemite的图标之间的关系。上图可以清晰地看出这套图标的规律，非常规则。实际苹果在重新设计图标的时候已经用了这套栅格系统，从此开创了一套新的图标设计体系。 栅格 iBooks的图标和栅格系统完全对应，接近方形的系统设置和栅格系统虽未完全贴合，但是非常接近。文本编辑器是倾斜的，图标中的草稿本的中心与栅格的中心点重合，倾斜的自动铅笔则几乎贴着内测两个圆之间的间隙插了进去。其实系统设置的图标并非正方形，而是一个宽度比高度略大一点的长方形。这种 “方形”分两种，一种宽度大于高度，Finder与系统设置的图标均是如此。而另外一种则相反，就像终端和活动监视器的图标。 栅格 再看看App Store的图标，内侧是笔和尺子组成的A，稍稍超出了圆形栅格的边缘，这一点和严格遵循栅格的iBooks图标不太一样，这主要是因为这个A的的视觉元素并不如iBooks图标里的图书来的饱满，所以这样的调整会让它们看起来更一致。Finder的图标尺寸同样很规范，与之前版本系统的Finder图标相比，Yosemite中Finder的笑脸看起来更快乐，更自然。这个字典设计和文本编辑器差不多。 栅格 倾斜矩形的图标值得特别关注，因为它是第三方图标中最常见的类型。以联系人图标为例，左侧为老版的倾斜矩形图标，它更像是处在一个三维空间中，符合透视规律，有消失点，整体看起来像是自然倾斜着。换句话说，你在制作这样的图标的时候，将一个矩形逆时针选择11度之后，还需要根据透视规律调整边缘角度。 小结 图标保留了老版相似的正投影，但没透视、深度。无需绘制极为逼真的纹理。 这套图标均匀而规则地分布在二维平面上，Dock也无需制作成3D的样子。 这种图标设计是有一套视觉规范的，尤其是圆形和方形的图标。 曾经猜测Yosemite的图标全会变成规则的圆形，值得庆幸的是并没有这么做。 个人认为苹果的设计师们作出了一套灵活的系统，保留了干净清爽的外观，又赋予第三方的设计师们足够的灵活性和自由度。 当一套新的视觉规范被创造出来的时候，大家通常会来尝鲜，而规范也常常被曲解。因此，动手前先稍等一下，想想你的APP是拿来干什么的，用哪种图标造型更能表情达意。 形状的选择并不是死板的规则，即便是苹果本身也常常借助现实生活中的事物的实际形体来设计图标。应深入理解这些基本图形的功用，而不是生搬硬套。 圆形的图标多用于偏娱乐、用户常用且轻量级的程序。它们看起来非常漂亮，但是那些专业的应用大多不会使用这种造型的图标。那么像游戏中心和联系人这样的程序是不是也需要设计成圆形的呢？也不是不可能。 正方形的图标多是与系统相关的应用程序。Finder、终端、系统设置、活动监视器以及Mission Control都在此之列。 目前，倾斜矩形造型的图标是三种型态中应用最广泛的一种，那些带有明显工具属性的应用尤其喜欢将图标设计成这种造型。可能是因为倾斜矩形的图标设计拥有更大的灵活性，经常可以将一些拟物的实体元素加入到图标中，让它的外观更有个性。 现如今低饱和度的色彩已经被温暖明亮的色调所取代。设计师为带有金属材质的图标加上了橘黄色的柔光，在背景增添了偏蓝绿色的阴影，这种色彩更接近于环境反光，被称为“半透明材质”，看起来更有质感。 这种环境光的滤镜并没有打在每一个图标之上，而是那些有着灰色金属材质的图标会呈现出这种环境光。实际上你不用借助3D建模程序来创造环境光，PS也能做的出来，当然你非要用3D软件来渲染环境光自然更好。 左侧球体是非抛光材质的，可以看到绿色、黄色和棕色的环境反射光。