随着Windows 8 Beta版的临近发布以及Nokia Lumia 800手机的广泛认可，越来越多的人接触到了Metro UI。

    从设计角度看，Windows Phone和Windows 8平板之间的关系类似于iPhone和iPad，纵然都使用了Metro风格，但是从微软官方角度看，Windows Phone的设计规范(User Experience Design Guidelines)与Windows 8平板应用设计规范(Metro style app development)内容地址不同，官方英文标题也侧重不同。Metro Style App很大程度上代表了Win 8平板应用。腾讯CDC(Customer Research & User Experience Design Center)团队总结了一篇《Windows 8来者不善，准备接招》，都对Metro的设计灵感和系统特性做了详细的阐述，有兴趣的可以看一下。

褒

    《平面设计如何影响交互的未来》 一文流露了Windows Phone团队的一些设计灵感和思考。对于Windows 8下推出的Metro UI，收获的褒奖也有很多。我认为可分为以下两点：

    作为一个hub或者是一个汇整资讯的dashboard，Metro UI中的Start页面 犹如中国传统的家具“多宝格”。多宝格的特点是：镂空、通透、一览无遗。Start页面中的Live tile犹如多宝格中的一间间收藏品，而且还是动态的。另外，还有类似“清明上河图”的全景视图(Panorama)特性，与“双层雕花灯笼”神似的枢轴(Pivot)特性。(图片来自作者博客)

贬

    这世界，有矛就有盾。也有一些人对Metro UI嗤之以鼻。由于界面借鉴了包豪斯的设计思想(可参见《交互设计领域的包豪斯运动》英文/中文)，强调形式的简洁性，去除了边框和装饰，导致用户容易产生视觉疲劳。同时单一的内容展现形式，导致一些用户需要花更多的时间才能甄别出一些信息。

    “iD公社”在文章《今日设计中的装饰》中说道：

    为什么？为得是肉身化。

    因为我们最终构造的是产品，而不是单纯的理念，一个产品当然需要肉身，肉身是供人感知的，如果一个产品与用户可以直接通过思想沟通，那么它就不需要任何设计。我们看到，触摸到，闻到，意识到的都是设计的肉身，而人的感官并不是一直受意识控制，抽象的美需要思想的介入，那么当思想不在的时候，这也是通常情况，我们面对一张有花纹装饰的墙纸比如面对一睹白墙更不容易感到疲劳，我们现在日常生活中能看到的装饰也基本在处在背景之中，我们也都一直不在乎那些东西，从不会用正眼去凝视它，而它们正充实着我们强意识外的感知，让我们感到安逸。

    如果来比较 iOS 和 Windows Phone 7 以及微软的其他 Metro 风格的设计，人们可能会觉得 WP7 设计更简洁更纯粹，而事实上 WP7 更加样式化，而 iOS 的通用性更高，也就是说 iOS 是自然的产物，而 WP7 更像是努力要做出不一样的结果，Metro 风格的决定更显得是“其中一种”选择，因为强调将平面设计中的形式感将其带入界面中就是一个样式为先的路径。iOS 比 WP7 更具肉身化，那么也就是它的样式可以在日常生活中自然的退到背景，在这一点，WP7 充满样式化的设计却时刻在刺激并唤起人的注意力，因为它们不能够退到背景之中，所以 WP7 更容易引起疲劳感，很多人称之为“审美疲劳”。

    前微软Silverlight项目的产品经理Scott Barnes在《Metro: Typography trumps chrome-debunked》中评论：

    不要忘了，Metro很大程度上是市场或反竞争的需要，而不是所谓人机交互(HCI，Human-Computer Interaction)的“正道”。Metros为自身贴上“真实的数字体验”标签的同时，也很可能跳出了Deiter Rams所定义的优秀设计的十条准则(英文/中文)中的一条：优秀的设计是诚实的——不要夸大产品本身的创意、功能的强大和其价值。也不要试图用实现不了的承诺去欺骗消费者。需要知道，在工业设计领域，这十条准则一直激励着苹果和其他品牌。大家想想吧！

如何设计

    对于如何设计，这里谈的都是Win 8平板上的Metro应用设计，一来目前做的是这方面的工作，二来Windows Phone的设计规范相对较全面且有中文翻译版本——Windows Phone 7界面设计与交互指南中英译本以及实践经验。当然，以下都是个人角度的相关思考，有些在操作过程中由于各种因素没有能够得到打磨。

    产品上，每个公司的业务和产品线不同，产品形态也会有很多不同。我们会问自己，我们为什么需要做Metro Style App？难道用户不能直接通过Metro IE浏览吗？这跟iPad下的思考有些共通点。Metro Style App应用更多的是支持Win 8平板操作情境，这并不是说不支持键鼠操作，而是想强调平板的操作习惯和情境交互——从用户需求角度理解PC端和Pad端的共同点，同时也要清楚Pad的应用场景和核心优势是什么。《Is Mobile Affecting When We Read?》是Read It Later插件统计的结果，大致能够看出移动和平板用户阅读使用的时段。平板的核心优势就是灵活轻便、不受约束——面对硕大的屏幕，用户总觉得自己绑在了上面，平板多方便啊，拿着板子窝在被窝里、躺在上发上、坐在马桶上，更有甚者挂在地铁拉杆上。平板中的App的核心优势是突出产品的核心价值信息，剔除Web上的噪音。但是用户的操作逻辑是一条线，我们既不想让用户感到任何的突兀，同时又要承袭Web的逻辑特征，保证能够畅快地跳出这条线，方寸之地，尽显功夫。N个用户组成的群体导致了需要N个需求组合，但是资源的限制意味着我们不可能傻啦吧唧地提供N个功能，主次分明、平衡取舍。

    交互和视觉设计上，需要着重了解网格设计(Grid System)、Typography和Metro Style控件。网格设计其实在Web设计中就已经被很多设计师所推崇和实践，例如《秩序之美——网页中的网格设计》一书就是介绍的如何利用网格来设计网页，书中一些思想也令人回味：

    当在网络上运用网格，我们必须对用户的行为有所应答。我们必须围绕着客户不仅要消费服务，还要使用服务的事实来为她们创造体验。因此不仅要考虑网格在形式上的尺度，也要考虑其与行为相关的尺度。我们也要记住，网格不是一种向用户强加秩序或剥夺其控制权的工具，而是一种向用户传达秩序的工具，这样才能为用户创造独特的体验。

    很有趣的是，开发人员在代码是现阶段其实也是按照网格大小布局来进行代码的实际转换，即只要视觉设计师给出高保真的设计图及相关图表、文字等绝对距离的标注，开发人员就能直接根据设计来进行代码编写。Typography其实国外关于英文字体排布研究分享的比较多一些，而国内对于中文字体，我目前知道的就有“造字工房”和书体制品(TypeLand)。Metro Style相关介绍，大家可以浏览微软官方的“Learn to build Metro Style Apps”系列文档，可参考性和价值比较高。当然，如果觉得文档有些凌乱的话，也可以看这边官方的《UX Guidelines for Metro Style App Development》列表，可以快速引导大家进行相关学习，但就文档资料的全面性而言，还是前者比较好。另外，官方发布会视频也可以看一下，都是些宏观性的概括(配套PPT网上也有，需要的可以留言，这里就不上传了)。

    了解了官方规范，只是第一步，最重要的是合理地使用控件和设计思想。限制性一直是我们设计过程中的羁绊，同时也激发了我们设计出更好的产品。谁都会排版，摆放各种控件，但是我们需要合理导航，构建一个清晰的信息架构，让用户一眼明白我们的东西能够做什么。同时我们又要思考如何最合理地利用自定义功能来赋予应用灵动性，避免用户的视觉疲劳，让我们的Metro App脱颖而出，散发更多的亮点。

     如何当好第一个吃螃蟹的人呢？

建议继续学习：

1. 设计Metro风格的应用    (阅读：1675)
2. 什么是Metro风格的应用？    (阅读：1620)
3. 为设计Metro风格的应用准备着—Windows 8设计指南翻译    (阅读：1385)