[Windows 8][Metro Style Apps] 浅论Metro Style

在Windows 8里,出现了一个新的名词--Metro Style Apps,也是最近很热门的话题。那么,到底什么是Metro Style呢?而Metro Style又有着哪些特色呢?


序言

在Windows 8里,出现了一个新的名词--Metro Style Apps,也是最近很热门的话题。那么,到底什么是Metro Style呢? 而Metro Style又有着哪些特色呢?

微软MSDN官方对Metro Style Apps的解释如下(原始连结在此):

“Metro 模式应用程序是一种沈浸式的无边框应用程序,它会以全屏幕方式显示,因此不容易让使用者分心。Metro 模式应用程序可相互合作,进而简化搜寻、共用及在彼此之间传送内容的进程。当使用者连接互联网时,应用程序会显示最新内容,让使用者随时掌握最新的资讯。 利用已连线的账户,使用者可以下载应用程序并在所有 Windows 设备上使用这些应用程序。”

光是看上面这段话,应该还是有点难了解Metro Style到底是什么。所以,接下来,就和大家来分享一些关于Metro Style“身世”的小知识。

Metro!?

首先,Metro是一个设计语言的名字(目前Metro没有官方的中文译名,不过我个人倒是觉得简捷式风格这个名称很不错害羞)。

微软对Metro的定义如下:

这段话可以翻译为“Metro是我们的设计语言。我们之所以称它为Metro,是因为它在内容及排版上是有现代感而且干净的、流畅而又充满动态感。而且这完全是真实的”。

如果再更深入的探讨Metro这个设计语言和风格,就不得不好好的介绍一下它的几个核心精神。

Metro风格巧妙的融合了现代设计(Modern Design)、国际排版风格(International Typographic Style,又称为瑞士风格)及动态设计(Motion Design)三大精神。

所谓的现代设计,可以拿包浩斯(Bauhaus)的精神为例;现代设计的精神,不是为了艺术而艺术、为了设计而设计,而是以人性和功能为出发点,设计出能与日常生活结合,美观又实用的东西。

而国际排版风格呢,则是使用无衬线的字型和图示去排列组合出所要呈现和表达的精神和意思。例如时常出现在我们生活中的路标和机场、车站里面的指示标志等等,它们都是使用了非常简单明了的设计,强烈对比的配色、图示和文字,透过对齐的格线来进行版面的配置并且以排版的技巧取代复杂的图片或图形(当然,我们比较少在上面看到渐层、阴影、立体浮雕或是玻璃质感等等效果)。

下面的几张图片,就是很经典的国际字体设计风格的应用:

The Grid System 

image image

至于动态设计,指的是把动态融入到设计中,以营造出我们想要带给使用者的情感。这个说法可能有点难以想像,以下这段影片就是很好的动态设计的范例:



George Carlin (Kinetic Typography)

以上就是Metro的三大精神,更进一步的思考,这三大精神也各有其目的:

  • 现代设计 -- 缩减至事物的本质
  • 国际排版风格 -- 清晰、实在且美观
  • 动态设计 -- 融入生命

Metro的实践

在微软的产品中,第一个最接近Metro Style设计的产品应该是2005年推出的Windows XP Media Center Edition里面内建的Windows Media Center,它的长相如下图:

随着在2006年推出的Zune播放器,在使用者界面上也很明显的能嗅出Metro Style的设计精神:

而上市了好一阵子的Windows Phone 7的使用者界面也是采用了Metro作为整个设计的精神,更把Motion Design的精神运用在动态砖、Xbox 360 live及Panorama和Pivot控件上。

还有Xbox,也更新了新版的Console,使用的也是Metro风格的设计,一样融入了动态砖的概念~

最后,当然不可以忘记最近释出消费者测试版的Windows 8啦~除了开始功能表都整个采用了Metro设计之外,更是将动态砖的运用作了更好的发挥,也特别创造出了Metro Style Apps这种应用程序类~

image

image

其实我们不难发现,只要抓住Metro的精神,就可以设计出既美观又流畅的使用者界面。只要抓住并且善用Metro的精神,就再也“没错的风格”、“没丑的风格”;“没错的UI”、“没丑的UI”。

希望这篇文章可以帮助大家对所谓的Metro可以有更进一步的了解和认识,以帮助大家在进行Windows Phone或是Metro Style Apps开发的时候,能开发出更符合Metro精神的使用者界面~