Metro UI 对APP使用体验的影响

Metro在微软的内部开发名称为“ typography-based design language”（基于排版的设计语言）。它最早出现在微软电子百科全书95，此后微软又有许多知名产品使用了Metro 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是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉。



图：Metro UI强调信息本身

Metro UI 强调利用时间碎片

在时间碎片中找寻到更多的信息。这就是MetroUI为Windows Phone所订制的设计理念。现在社会连呼吸都要赶时间，很多用户没有过多的时间来用复杂的手势操控手机。在公交车上，我们可能利用从座位起身到在后门排队等着下车的这个狭窄的时间间隔中，还想着要看一条微博。也许趁着在超市排队结账的时候，都要用微信摇一下周围的新朋友。着重提高用户的单手操作准确性，就能让用户死死的黏在你的应用上。

今天，Metro UI设计语言诞生

Metro的设计灵感来自交通系统：它需要帮助人们能够在短时间内，快速找到自己所需的信息。Metro一词在英文中译为地铁的意思，这充分体现了它的渊源和其艺术风格。



图：地铁中的Metro信息版

移植应用时除了需要考虑到的交互特性之外，Metro对APP还意味着：高水平的排版、介入内容（图形化）和善用推送。

1.高水平的排版

Metro UI的主旨是力求减少元素，帮助用户能够更快的确认是否希望能够深入的阅读内容以及如何深入，以呈现信息本质。这就要求交互和UI需要富有创意地进行排版、去掉装饰物，让版面自己说话，这样才能让内容成为主角。这要求App做到：

1)干净：积极的颜色（鼓励每个界面凸显2种颜色：前景+背景，总共不超过4种配色）

2)统一的button

3)二维的视觉元素：无阴影、无渐变

（上述3点可参考QQ音乐）



4)界面元素的对齐和对称

5)无边界设计：通过字体大小、（前后景）颜色、留白，使内容产生自发性质的分隔，而不必通过边框等介质。一方面扩大了视野，另一方面减少了用户的思考和辨识成本。

（上述两点可参考赶集交友档案页Windows Phone（左）和iPhone（右）的对比）



2.内容图形化

由于Windows Phone倡导无边框设计并且强调对齐和对称，因此，当在与遇到内容量大的界面时，产品或UE必须思考如何抽取最核心的部分，将其图形化，以方便展示或者诱导用户点击。否则将由于内容之间没有区隔，导致文字积压而影响体验。以微博客户端的档案页面为例：新浪是通过对档案页元素进行取舍的方式进行展示，虽然留白多但可点区不明显；而腾讯则对通过对label添加icon和按钮化的设计，整个界面显得充实，用户的识别性和功能区域的划分也有所提高。



3.善用Live Tile推送

Windows Phone主打的Live Tile功能要求APP充分利用推送，不用点击就在手机的开始界面自动向用户呈现最新信息。比如下图的USA Today（一款新闻类应用），他通过在服务器设置高级接口的方式，将全站的头条和各版块的头条新闻压缩成一张图片，推送到客户端上。在提高了用户阅读效率的同时，也大大提高了客户端的激活率和留存率。



善用Live Tile推送，不但可以让用户第一时间知道最新的变化，也为整个系统带来的生机和灵魂，同时为更多信息的承载，提供了条件。