原文:Martiancraft,翻译:陈子木,不久前苹果发布了最新操作系统OSXYosemite的预览版,界面的视觉设计与iOS7的设计语言更加接近了。那些熟悉的模糊背景和半透明材质被添加到UI中,更加的简洁漂亮的界面布局,和全新的图标和字体也都出现新版的系统中。 Yosemite的变化是可喜的。我打算在这篇文章中说说Yosemite中的图标设计。在Yosemite发布之前,Apple在Mac系统上的图标设计规范并不明确,只是提出过一组粗略的List,并在官方的人机交互界面准则(HIG)中提出了一些简单的建议。在Yosemite发布之后,这套设计规范更加精准、一致了,不过新的HIG对于设计细节依然没有过多涉及。 如果要完全对比Mavericks和Yosemite之间的图标设计,需要对比的东西有很多。当我们从头讨论新的图标设计的时候,总是从它的外观和它给人的感受开始的。相比之下,Yosemita的图标更为整洁清爽,移除了高光,色彩饱和度更高,并且依然保留很多拟物化(特指skeuomorphic)的元素。 让我们接着看下去。这些图标并不是单纯优化了一下外观,实际上设计师们在这一版视觉语言上的探索远不止这一星半点。秋季正式发布之后,大家就可以享用Yosemite了。与其简单的评论图标的好坏,我更愿意去剖析新版的系统构想,设计语言与以及令Yosemite惊艳的小细节。在过去的几周里面,我花费了大量的时间来研究Yosemite,尝试去理解它的新设计,解构它的视觉语言。以下就是我的发现。 Dock 比起之前的图标,Yosemite的图标在屏幕看起来更有韵律。这组图标设计之前并未在网上发布过,为了达到外观上的一致性,是肯定有一套栅格系统来确保这一点的。我们先看看新版图标的形状。 当你目光从老版系统的Duck上扫过的时候,这些在不同时期加入OSX的图标,拥有着不同风格,不同形状和色彩,以及不同的尺寸,你的眼睛会捕捉到它们间的差异和不协调,所以老版的OSX系统还是非常兼容并蓄的。在新版的Yosemite中,图标的尺寸大小更加协调,色调更一致,风格也更加统一了。 图标造型与栅格 iOS7图标设计的栅格系统已经在icon设计圈中广泛流传了,但是很少有人会注意到它和Yosemite的图标之间的关系。AndreasWendker也仅仅只是在阐述图标设计统一性的时候轻轻带过。 实际上,苹果的设计师已经在为Yosemite重新设计图标的时候用上了这套栅格系统。更准确的描述是:他们开创了一套新的图标设计体系。(注:这些都基于Beta版的系统和刚刚发布的图标设计,对于刚刚接触Yosemite设计者而言,这套栅格是非常有助于理解它的设计思路的。) Yosemite的图标系统可以分成3种基本的形状,圆形,方形,和倾斜矩形。不同于移动端的iOS,Apple在MacOSX中,还是非常讲究保持图标的个性,只有极少数图标的设计是出离于这套规律的。 为了让你更清晰地看出这套图标的规律,我将iOS7的栅格系统覆盖在Yosemite的图标之上,栅格尺寸是×。很明显可以看出,图标们是非常规则的。 毫无疑问,这些基本形状和栅格系统对应起来非常不错。接下来我们试试真实的图标。 iBooks的圆形图标和栅格系统完全对应了,接近方形的系统设置图标和栅格系统虽未完全贴合,但是非常接近了。文本编辑器由于是倾斜的,图标中的草稿本的中心与栅格的中心点重合,倾斜的自动铅笔则几乎贴着内测两个圆之间的间隙插了进去。如果你仔细观察系统设置的图标,你会发现它并非正方形,而是一个宽度比高度略大一点的长方形。Yosemite中的“方形”实际上分两种,一种像系统设置图标一样,宽度仅仅只是略大于高度,Finder与系统设置的图标均是如此。而另外一种则是终端和活动监视器这样的图标,它们的宽度会明显大于高度。 在看看AppStore的图标,内侧是笔和尺子组成的A,稍稍超出了圆形栅格的边缘,这一点和严格遵循栅格的iBooks图标不太一样,这主要是因为这个A的的视觉元素并不如iBooks图标里的图书来的饱满,所以这样的调整会让它们看起来更一致。Finder的图标尺寸很规范,和之前的Finder图标相比,Yosemite中Finder的笑脸看起来更快乐,更自然。 倾斜矩形的图标值得特别白癜风怎么治愈北京治白癜风
|