[ideas]Metro前瞻性探讨

本期《ideas》主要就Metro UI所带来的趋势进行多方面的探讨甚至不同声音的“争论”，以及某汽车网站的创意分享。

本期作者：Dorishu、Vincentcai、Omegazhao

1.Metro前瞻性探讨 By Doris

Metro，又称Metro UI，是微软定义的一种设计方案，并在Win8、Windowsphone上全面采用。

Metro风格：简洁、快速响应、最少的点击次数、自动消息推送、直接内容交互和高质量的视觉效果。支持新一代设备，触控界面或将成为主流。

> Metro风格

设计Metro UI基于瑞士平面设计的设计原则，认为版式设计的目的在于传达信息和交流，强调设计对象的可读性和易读性。它用于系统，互联网，利于以文字为主的界面导航信息的传播。

可以看到瓷砖一样的Tile遍布Windows8的角落，微软期望每一个Ap(接入点)的Icon都可以承载有效信息，显示在开始页面上。用户在开机后的第一个页面就可以获取想要的信息，甚至不需要开启对应的Ap。我们可以看到Metro UI更简洁和美观，亦使用户更关注于Ap展示的内容。

下面是几个Metro Style的例子：

以上所有的效果，都无需再去自定义

下面是GridPage和ReadingPage的两张模板，而微软还提供了很多这样的模板，可以帮助你快速构建起一个Ap的基本框架。

Metro UI提倡Touch-First的Ap设计，但不是对传统风格的颠覆。以下是Metro UI在Xbox 360网站上的一次登场，可以看到Metro UI直接省去了界面中复杂的边框，使显示无框化，画面最大化。它提供简洁、漂亮、动态、真实的用户体验，让用户沉浸在体验和使用你的Ap的过程中：

> Metro的多种布局

由于现代新兴工具的层出不穷，从台式PC到平板电脑到手持移动设备，用户的需求越来越多元。怎样的网页设计才能在如此多元的空间里给用户同样舒适的操作体验？

由于微软开发工具内置的模板和控件都提供了优秀的缩放性能（XAML+C#和HTML+JavaScript两种开发方式都已支持），那么显然，Metro将会是一个很好的选择！

以下DPI比例是需要注意的几个关键点：100%、140%、180%。

Ap需要提供4种模式下的界面：

1. 小屏模式（Minimum: 1024*768）

2. 宽屏模式（Widescreen: 1366*768+）

3. 竖屏模式（Portrait）

4. 快照模式（SnapView）

> 网页设计的新契机？

微软认为Metro设计主题应该是：“光滑、快、现代”。随着微软对Metro UI的大力倡导，它会不会成为互联网设计新的导向标？

Metro借助微软的力量，能否带动新兴设计革命？如何在游戏类的网页设计中不断演变？是否会有颠覆性的创意来冲破现有的布局？

我们热切期待~

以下为2011年腾讯游戏在MetroUI部分进行的轻质感尝试案例：