Metro UI界面完全解析

Windows Phone灵魂诠释:Metro UI界面完全解析
Metro在微软的内部开发名称为“ typography-based design language”（基于排版的设计语言）。

它最早出现在微软电子百科全书95，此后微软又有许多知名产品使用了Met ro UI，这包括：Windows媒体中心、Zune播放器等等。

该技术已于2010年初（美国）获得Metro UI专利批准（USPTO）。

Metro UI最新的应用是windows phone 7智能手机系统，并将应用于未来的Windows 8、Office 和Xbox 360产品中。

Metro UI是微软的一种设计方案。

该设计方案已用于移动操作系统Windows Phone 7和多款微软产品。

微软Segoe WP字体，属于Segoe字体家族的一员，细腻坚韧给人一种优雅的美感，同时它也是WP7手机系统的默认字体。

源自瑞士的设计风格：Metro UI
求本溯源，Metro UI是基于瑞士平面设计原则，其最初在Windows XP的Windows M edia Center就中有体现，这有利于以文字为主的界面导航。

2006年著名的Zune播放器开始使用类似Metro的设计风格。

微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。

Zune的桌面客户端程序也使用了不同于以往Portable Media Center用户界面，其清爽排版和设计给用户耳目一新的冲击。

图：Segoe WP字体
机场和地铁的指示牌给了微软设计团队灵感，其设计团队指出：Metro UI是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，这种风格大量采用硕大突兀的字体，能吸引读者的注意力。

微软认为Metro设计主题应该是：“光滑、快、现代”。

Me tro UI中图标设计也会不同于Android和iOS界面。

Metro UI设计具备以下五点原则：
1. 干净、轻量、开放、快速
留有充足的白色空间，同时要减少各种纷杂的因素而突出文字，后者是关键设计因素2. 要内容，而不是质感
字体是界面的主要元素,字体要生动、漂亮、轻量化,去除一切不必要的阴影。

3. 整合软硬件
硬件和软件彼此融合并创造出一种无缝的用户体验，比如一键进入搜索，开始，返回和照相机，及其他搭载的整合感应器。

4. 世界级的动画
内容才是最重要:用户使用更关注的是信息，而不是好看的按钮。

减少装饰元素可以建立更开放的界面并促进用户和信息的互动。

5. 生动，有灵魂
保持活跃，让整个界面动起来，再也不是传统的界面，死气沉沉
Metro之父：瑞士平面设计风格概述
20世纪50年代期间，一种崭新的平面设计风格终于在联邦德国与瑞士形成，被称为“瑞士平面设计风格”，由于这种风格简单明确，传达功能准确，因此很流行与全世界，成为二战后影响最大，国际最流行的设计风格，因此被称为“国际主义平面设计风格”。

图：瑞士平面设计
瑞士平面设计风格稳健，四平八稳的传达设计，给人印象深刻。

不少人认为瑞士风格是一个统一的、单一的风格，瑞士设计家大部分不同意这种看法，他们往往强调瑞士国家虽然小，但是设计风格变化多端，极为丰富。

图：瑞士平面设计
对于瑞士设计学校的师生来说，瑞士国际主义风格已经是过去的事情了，但是，瑞士的设计教育却深深地受到这种50 、60 年代发展起来的风格的影响。

直到现在，瑞士的平面设计依然具有强烈的整洁、严谨、工整、理性化的特征，一丝不苟，传达准确，形式单调乏味，不少年轻人感到瑞士设计，特别是平面设计已经太深地陷人瑞士国际主义风格中，瑞士设计界需要一次真正的革命、造反，来荡涤过往风格的阴影。

图：瑞士平面设计
独特风格：Metro UI强调信息本身
Metro UI是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素。

显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。

同时在视觉效果方面，这有助于形成一种身临其境的感觉。

图：Metro UI强调信息本身
Metro UI强调利用时间碎片
在时间碎片中找寻到更多的信息。

这就是MetroUI为Windows Phone所订制的设计理念。

现在社会连呼吸都要赶时间，很多用户没有过多的时间来用复杂的手势操控手机。

在公交车上，我们可能利用从座位起身到在后门排队等着下车的这个狭窄的时间间隔中，还想着要看一条微博。

也许趁着在超市排队结账的时候，都要用微信摇一下周围的新朋友。

着重提高用户的单手操作准确性，就能让用户死死的黏在你的应用上。

40年用户界面设计历史简单回溯
界面设计是软件的人机交互、操作逻辑、界面美观的整体设计。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

在漫长的软件发展中，界面设计工作一直没有被重视起来。

做界面设计的人也被贬义的称为“美工”。

其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。

一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。

界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。

检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。

所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

在漫长的人机交互史中，UI设计的理念也在不停迭代。

1984年1月1日，Apple MacOS 1.1
1995年，微软Windows 95
2005年，Apple OS X Tiger
今天，Metro UI设计语言诞生
Metro的设计灵感来自交通系统：它需要帮助人们能够在短时间内，快速找到自己所需的信息。

Metro一词在英文中译为地铁的意思，这充分体现了它的渊源和其艺术风格。

图：地铁中的Metro信息版
干货好料：Metro UI中的设计元素
你觉得Metro UI界面非常的简单？它的设计理念就是要突出简洁与视觉焦点的引导。

如果你是一名Windows Phone移动应用开发者，或是应用UI的设计者，那么下面提到的Me tro UI中设计元素，你都必须应该知道。

开始界面：下面我们来看一下Windows Phone中Metro UI的开始界面。

它具备一些用户经常使用的必要信息。

人脉、图片、游戏、音乐和视频、办公、电子市场等。

这个界面，其内容可以纵向滚动，方便单手拇指操作。

同时在狭小的手机屏幕中，可以显示更多内容。

图：Windows Phone中的“开始菜单”
多宝阁设计：多宝格又称“百宝格”或“博古格”，是专为陈设古玩器物的。

它是进入清代才兴起，并十分流行的家具品种。

多宝格的独特之处在于，它将格内做出横竖不等、高低不齐、错落参差的一个个空间。

人们可以根据每格的面积大小和高度，摆放大小不同的陈设品。

在视觉效果上，它打破了横竖连贯等极富规律性的格调，因而开辟出新奇的意境来。

多宝格兴盛于清代，与当时的扶手椅一起，被公认为是最富有清式风格的家具之一。

图：多宝阁传统家具
图：Metro UI的“多宝阁设计”
活动方格设计：在Metro界面中，应用都以可以翻转的方形图标的形式呈现在主界面中。

他们就好似是多宝格中的“收藏品”一样，每一个应用都会给用户爱不释手的感觉。

可翻转的图标，同时又印证了多宝格精致的机关设计，给人以一种不断幻化的新奇感。

让人忍不住去探索Metro UI中的各种内容。

Metro、iOS、Android之三大UI风格对比
三种移动平台，三种风格迥异的UI界面。

先有iOS，后有Android，但是Metro UI的风格，早在许久之前就深入现代设计殿堂。

图：Metro UI（左）、iOS UI（中）、Android UI（右）
Live & rich tiles对决静态图标。

在Windows Phone中，图标按钮可以呈现出更加丰富的信息。

图：Metro UI能推送更多信息
集成流与独立应用。

WP和Android在一个应用中，四步即可对一张照片完成剪裁。

而在i OS中，需要频繁的在2个应用中切换，至少6步才能搞定。

图：三大平台操作谁更简单？
简单的菜单VS. 各种高级子选项。

没有选项卡，没有古怪的按钮，有的仅仅是简洁明了的菜单。

Metro UI回归质朴，所带给用户的是极简式的操作体验。

图：三大平台操作谁更直观？
MetroUI的秘密：谁更适合视力有障碍的人？
图：在你视力好的时候，可能不会觉得他们有太大差别
图：当你视力有些许的问题时，你依旧能准确操作手机
MetroUI未来发展之势
现在，微软开始整合本设计风格到其他产品中，如新版本的Windows Live Messenger 和Live Mesh。

而微软也确认Windows 8将全面集成Metro UI设计。

而根据Office最新内部测试版的截图，Office也会使用Metro设计。

微软美国官方网站亦部分使用本设计。

图：Windows8的Metro界面
Metro UI会被广大消费者接受吗？
Metro UI会被消费者所接受吗？这个情况与iPhone不同，苹果的iPhone已经非常有名，它的各种消息都是媒体们争相报道的好题材。

当iPhone的用户在iPhone初代、iPhone 3G和iPhone 3GS时就有了深厚的积累和广泛的认知，由此在iPhone4推出时其销量的爆炸式增长也就是必然的事情了。

对于iOS的界面来说，消费者经历了漫长的过程才接受它的。

同时在这个接受的过程中，iOS的界面也在各种的反馈声中不断的进化。

当Android出现的时候，其界面与iPhone基本相同。

Android抄袭iOS的界面设计之所以让乔布斯非常恼火，就说明谷歌在这方面是非常成功的。

虽然这二者也有着明显的差异，但是从主界面的网格式图标布局来看，容易让用户找到所需内容。

微软需要与合作伙伴一起精心的打造Windows Phone的生态链，Windows Phone手机会在更多的国家上市销售。

如果人们买不到Windows Phone，那么其他人就不会买它。

这与手机系统的设计和手机的质量无关，可以说目前Windows Phone手机上Metro UI 正缺乏被社会广泛接受的一些必要条件。

但是这一设计语言必然会慢慢流行起来。

三大智能手机UI谁看上去更艺术？
你可能会偶尔看到，某个餐厅的菜单，用的是iOS的界面风格。

也许你能听说某人，设计了一个随身记事本，其外观与三星的note手机极为相似。

你可能会哇的赞叹，其UI设计的影响力，已经从移动领域延伸到了日常生活中。

但Metro UI则完全相反，它是先被广泛应用在日常的生活中，然后再经过各种优化，才植入智能手机中的。

源于生活而高于生活，这才能称之为艺术。

我国某位著名的根雕艺术大师曾经说过这样一句话：工艺品和艺术品的价值至少差着五个档次。

Metro 风格的软件界面欣赏
Metro 风格界面是Windows 8 代表性的亮点，Metro 界面的脱颖而出似乎是一次大的颠覆，未来的Windows 软件界面肯定会以Metro 这种新兴设计风格成主流。

国外的UI 设计师已经对Metro 风格“hold”不住了，自己动手为一些软件设计起Metro 界面，Metro 的特点就是简洁与直观，没有过分华丽的炫目背景与功能图标，以下欣赏部分软件的Metro 界面。

Metro Skype 3.0
Metro Windows Live/MSN
Metro IE9
Metro Windows Live/MSN 界面2
Metro Facebook
Metro Facebook 客户端
Metro Foobar 播放器（可以通过下载皮肤实现）
Metro UI 是由微软公司开发的内部名称为“ typography-based design language”（基于排版的设计语言）。

最早出现在微软电子百科全书95，后来的产品如：Windows 媒体中心、Zune 播放器都有用到这项技术。

该技术已于2010年初（美国）获得Metro UI 专利批准（USPTO）。

Metro UI 最新的应用是Windows Phone 7 智能手机系统，并将应用于未来的Windows 8、Office 和Xbox 360 产品中。

QQ Metro
新版QQ的Metro风，从登录界面开始便一览无余。

整个界面很有些上风上古的味道，我们可以在这里选择在线/隐身、密码记忆、自动登录以及代理服务器设置等。

唯一遗憾的就是新界面彻底与多账户登录无缘了。

图5 Metro登录面板
进入界面后，同样是浓浓的Metro味道。

QQ将整个面板分成三块，由左到右分别是联系人分组、在线联系人（Online）和离线联系人（Offline）。

当然出于精简方面的考虑，群（Gro ups）、最近联系人（Recent Contacts）并没有单独分组，而是合并到联系人分组之中。

同时这里也没有快捷搜索栏，那么我们搜索好友又该怎么办呢？
图6 主界面
没有搜索栏的Metro应用其实很多，还记得刚才在应用商店里怎么操作的吗？没错！就是那个快捷键Win+Q。

其实这并不是一个单独个案，在Windows8中所有Metro应用都支持这样一个快捷键，而它的作用就是在当前应用中执行搜索。

图7 Win+Q搜索QQ好友
找到了好友，接下来自然开聊喽。

你能想像出Metro QQ的聊天界面会是个啥样子吗？单页面化、Metro化……，其实它的最大特征是类似于IPhone的气泡式对话界面，看起来还是蛮清新的（话说手机QQ 2.0也是这样的界面~）。

只不过目前功能还很简单，只有表情、图片、语音三种信息类型，像什么字体调整、大小调整、颜色调整、屏幕截图、文件传送、语音视频……统统滴不行，介意的亲们一定要慎重下手呀！
图8 聊天界面
新消息来临会有提示，即便是切换到传统界面也是生效的，这一点多少让笔者松了口气，要知道很多Metro应用在切换出去后就会被Win8自动挂起。

不过从目前来看，这个提醒还是存在一些小问题的，首先就是提醒音不够响亮，如果非要俺拿咱China的文字形容，就是一小声“当”。

相信我，是非常小非常小的“当”声，而且还不允许用户自行更换。

也就是说，这样的提示将很容易让人遗漏消息，尤其当你在传统界面工作时（提示条几秒钟后会自动消失）。

图9 传统界面下的新信息提示（注意！表情符未能识别）
其次你会发现提示框无法很好地识别表情符，当然大多数情况下这并不是一个麻烦，但如果对方发来的仅仅就是一个表情的话，那么你就可以充分发挥你的想像了。

值得一提的是，当有未读信息时，动态磁贴会循环播放未读信息数及简要内容，不过和新信息提示一样，这里同样无法识别表情符。

好在切换还算流畅，点击后即可马上跳转到聊天面板。

图10 动态磁贴上的提示
评论:Metro界面绝不仅仅是色块
自微软推出metro界面之后，可以说是毁誉参半。

喜欢的人无比喜欢，讨厌的人看着me tro就想吐。

我个人是喜欢metro的，也理解萝卜青菜各有所爱，但在这里，只是想纠正一个被大多数人以及开发者误解的观念——metro即色块。

诚然，在metro界面中，色块是很重要的一个元素。

不管是开始屏幕，还是在应用内部，经常会大面积的使用色块。

色块的有点很明显，迅速的突出重要内容，抓住用户的注意力。

但大面积的，不分青红皂白的使用（各种颜色的）色块，无疑会让人疲倦，不知所措。

例如：
一个14寸的屏幕，就因为所谓的色块，竟然只显示了4个新鲜事。

每个新鲜事上半部分有不同的颜色，下半部分是内容。

因为方块的巨大，让人眼不得不完成从上至下，再往右上，再向下，再右上的疲惫劳动。

因为人眼的移动范围过大，也让用户很难将发布新鲜事的“联系人”和新鲜事的“内容”联系在一起。

这就是metro界面的绝佳失败范例。

当各种颜色的色块扑面而来，而这些色块所包含的信息之前又绝对平等且大量，使用色块就是一件效率非常不高的事情。

而色块，也绝不是metro设计语言中的唯一表达方式。

metro的中心思想是：绝对数字化、关注信息本身。

相比以往图形用户界面不断对真实世界的模拟，metro放弃了绝大程度的实体化，只关注于需要实现的功能和想要展示的内容。

这也是为什么Windows 8和Windows Phone的开始屏幕上，当tile在不断滚动信息的时候，你会忘记这是个应用的快捷方式，而只要看到有用的信息，就点击，查看更多。

同时，除了直接展示内容的方块，在文字信息表达时也放弃了各种多余的线条、边框，而仅依靠字体、空行、字号来分隔信息。

例如windows 8自带的消息界面：
可以看到，在“联系人”和“信息”这两个层级之间，并没有任何明显的分割线，而是靠两层的背景颜色的细小不同来区分。

这种不同不会干扰你查看任何信息，也保证了界面的层次感。

同时，在这个界面里，也运用了色块来区分“当前选中联系人”和“收到的消息”，意义明确，简单明了。

另外，在联系人头像下面，第一行是性命，第二行是联机状态。

可以看到，这个界面里，除了输入框，其他的全部都是信息，没有冗余的界面元素。

我们再来看一个第三方开发的应用：
参考上文的分析，可以看到，这个metro应用也很好的符合了设计原则，即除了信息，什么都没有。

这个界面中也运用了方块，但对于平行的如接下来几天的天气预报部分，使用了统一的、简洁的白色，让人很容易的界收到信息。

而“七天天气预报”则因其本身的意义不大，采用了与背景接近且暗淡的深蓝色，以示区分。

经过讨论，可以看到，metro界面绝不仅仅是简单的色块堆砌（至少其初衷如此），但m etro界面设计对于一般的第三方开发者来说无疑是对其审美水平和艺术素养的考验。

若仅把metro理解为所谓的色块，无疑会给用户带来巨大的灾难。

Windows 8遭前微软员工批评Metro界面操作繁杂
前阵子微软推出了Windows 8预览版，相信不久之后Windows 8就会正式问世了。

而截止目前为止对于Windows 8评价好坏都有，毕竟windows 8本身设计的出发点与传统PC的概念就有点背道而驰。

这不一位前微软员工Mike Bibik先生，就针对Windows 8 的设计做出诸多批评，指出其设计不够直观，操作起来令人一头雾水。

据国外网站Mashable的报道，先前在微软担任项目经理，目前为Amazon资深用户体验设计师的Mike Bibik先生认为：虽然Windows 8在可触控的性能与用户体验方面已经做得相当棒，但是对鼠标与键盘的使用者来说，离最佳状态仍然相差甚远。

Windows 8好用吗？坦白说笔者有点又爱又恨。

谈到Metro界面，Mike Bibik先生则说，这界面适合触控操作，而Windows还在界面中提供了一套完整的桌面版本。

此外，Microsoft的帐号是必须的，他可以让一些App省下繁琐的登入步骤（Hotmail、Live服务之类）。

笔者认为设定Microsoft帐号是个不错的选择
问题究竟出在哪？
对于一个第一次使用Windows 8的用户来说，它只会让用户第一眼先看到Start画面（也就是Metro界面）。

当然，也许之后的正式版未必会是这样的配置（开机后出现的是桌面工具列之类的页面），但在Metro界面，一般来说只能看到部分的Metro App，如果你需要查看所有的Metro App，你还是需要利用其他菜单（ex：视窗键+ Q），这些菜单并不好找。

所以这无形中增加了操作过程的复杂。

而我们所熟悉的滚动方式也与往常不尽相同，平常我们在滚动鼠标滚轮时，会看到网页或文件是由上而下移动，在Metro介面则是从左往右，另外，Metro App一启动就是全屏，没有提供视窗控制键，系统也不打算提供最小化、最大化、关闭视窗的选择，其实大多只会看到上一页（与手机中的返回键同义），根本没有明显的退出功能。

Windows 8企图把智能手机的「Home键」概念移接到键盘上。

Chris Pirillo就曾请他的父亲试用过Windows 8，但他基本找不回Metro界面。

这多少有点让初次使用者有点郁闷得找不到头绪，所以Metro界面对于初次接触的使用者而言，显然是个很糟糕的体验。

Mike Bibik先生认为，会有75%以上的使用者，认为Windows 8的Metro界面操作根本不方便。

尽管Windows 8充满了许多创意，但是随之而产生的问题则是很多传统的习惯也随着消失，这样新旧界面的冲击让使用者不一定能全盘接受，Bibik先生观点的重点就是：尽管微软拼了命的要让系统看起来适合平板操作，但对于更多还在使用鼠标和键盘的使用者来说，这个系统并不怎么友善。

至于Windows 8究竟给我们带来的是惊喜还是失望，恐怕得等到window 8正式上市才能知晓了。