Metro UI 设计总结

gongzhen-tech

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

高水平的排版

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

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

2. 统一的button

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

   (上述3点可参考QQ音乐)
   

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

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

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

内容图形化

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

善用Live Tile推送

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

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