颠覆对“大色块”认识吧，论微软 Metro Design 的发展历程和设计理念

提示：点击上方"IT之家"↑一键关注

Metro UI，也叫Modern UI（这个名字现在更常用）、Windows8 Style UI，是微软基于设计语言设计的一种界面风格，此设计已被用于移动操作系统Windows Phone、Windows 8、Xbox 360等多款微软产品，也是目前各种设计风格里面最大行其道的，所以先讲讲Metro UI Design。

Metro设计理念

图例为WP7和WP8的Segoe字体

Metro作为一种文字导向（typography-based）的设计，设计一般采用微软WP为此设计的标准字体："Segoe WP"，它也比起其他UI设计风格更加注重字体，并且在持续不停进化中，原因是Metro的设计原则之一是"content before chrome"，翻译过来大致是“内容大于装饰”，所以这种设计风格更加注重应用内容本身（一般以文字和线描图展现），而不是在于传统设计上的“Graphic”（图形），这也是当初它搭配在Lumia上一出世就把大家惊艳到的主要因素。

这种基于瑞士平面设计的设计原则，有利于设计出以文字为主的导航界面。机场和地铁的指示牌给了微软设计团队灵感，其风格大量采用大字体，能吸引观众之注意力。微软认为Metro设计主题应该是：“光滑、快、现代”（Simple.Clean.Modern），于是现在你看到的Metro的图标设计也不同于Android和iOS，即便它还是有不少的传统意义上的图标。

2006年，Zegoe UI风格

2006年，当微软媒体播放器内置系统Zune开始使用类似Metro的设计风格的时候，微软的设计师就计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用，当时还被称为* Zegoe UI。后来移植到手机，出现了“Live tiles”（活动磁贴）*，并成为了Metro UI的一个重要组成部分。

微软这种设计摒弃了复杂图形而直接展示内容本身，提升了常用任务使用体验和速度，这种界面使用更多大面积块，标题和内容非常直观的显示出来，而且常常伴随着屏幕滚动。动画在Metro UI里面占有巨大的作用，这样能给用户一种这些界面是“活的”，是可以“深入对话”的。

Metro发展史

颇具有年代感的产品

早在20世纪末，微软公司旗下产品Encarta 95（微软旗下一个类似维基百科的应用）和MSN 2.0就已经隐约有这种“Metro”的影子了。到了Windows Media Centre和Zune（一个便携播放器的播放系统），这种设计已经大幅度进化了，接下来应用在更加广为人知的Windows Phone 7上。

由于移动互联时代移动设备的重要性逐渐取代当年传统的本地PC端单机，于是当WP上一些应用要和本地的诸如Xbox系列都开始挂钩的时候，导致了一些传统应用和系统也开始了重新设计，微软对外暂定把这个名字命名Metro（也没有打算永久用下去的名字）。于是今天看到的就是，微软在它的一系列产品上都大幅度使用了这个风格。

关于这种设计风格为何改名（设计史上很少这种先例），倒是有一段故事：

2012年末，以“Metro”为名的公司麦德龙（Metro AG）声称微软的接口Metro UI的 "Metro"一字已经侵权将要提告，一封要求停止使用"Metro"字眼直至代替字眼或案件结案的备忘录亦被发送到软件开发者和微软员工；后虽没有提告，但微软为了不再与该公司名称冲突，决定取消"Metro"名称，改用"Windows 8 Style UI"或者"Modern UI"取代了Metro UI，但实质上还是一样的。然后，在2012年9月，"微软设计语言（Microsoft design language）"开始被用到微软开发者网络的文件内以及Build年度会议。

所以，当大家广泛知道Metro Design的时候，它已经正式改名了。

Metro评价

手机系统WP7曾经被Industrial Designers Society of America (IDSA)评价为“黄金交互”，其UE顾问说到它深入内容本身并展现出来，界面优雅独一无二。而操作系统Windows 8出来以后反而有人认为是个失败：开始菜单和其他界面完全两种风格，很割裂，有种两重人格的感觉。

我相信有不少人也有这种想法，不过考虑到微软阵营的平板远远没有手机那么普及，而PC尚未做到大规模可触屏的时候，OS要如何平衡设计和功能，的确也是微软要解决的一个难题。

Metro现状

图例：新版本Outlook

现在，微软已经集成此设计风格到旗下产品中，比如Windows Live Messenger和Live Mesh。而Windows 8和Office2013全面使用Windows UI设计。而目前，微软官方网站及微软旗下OneDrive、http://Outlook.com 亦部分使用此设计，该设计风格还能风靡世界多久，还得看微软未来会对目前的Metro风格做出多大改变，而它的上升空间依然还是很大的，个人还是很看好它的前景。