[Windows Phone，全新世界]第一章：Metro，你好，方块

kentooo

Windows Phone，全新世界（一）——Metro，你好，方块

大概接触Windows Phone也有8个月的时间了，时间慢慢流逝，从越狱到刷机，各种折腾之后，也开始渐渐的习惯使用这个新奇的物件，要写一些什么，还真得理理头绪，不过想来想去，还是从最直观的部分写起吧。

1.Metro，极简

写到这个地方，我突然想起初中时代电视上的一条关于饮料的广告片，台词只有简单的几句：一口扔，二口捡，三口忘不了。看过这个广告之后我还真的去买了一瓶尝试了一下，苦苦涩涩的味道的确很难受，但是提神效果的确很好，OK，废话就先说到这里，用这个广告语来形容Metro其实一点也不为过，初见Windows Phone 7 的时候，觉得界面真的很丑，我相信这是很多人第一次见到Metro界面的感受，的确，一个个有着同样的左下角的文字，简单的图案在加上亮眼的纯色背景搭配出来的瓷片，组成了整个Metro界面下的主页面，让我这种习惯了Vista和Windows 7 华丽界面的人一下子难以接受，后来某次，平面设计课的老师在讲解到瑞士国际设计风格，并安排作业让我们去找生活中常见的一些有着典型特点的瑞士风格的物件时，我才想到，原来Metro界面就是这种形式，当我了解所谓的瑞士风格之后，对于Metro的看法也渐渐改观，但是要说我真正爱上Metro风格，那已经是后话了。

请勿使用多线程下载工具下载论坛附件！

2.瑞士风格，简洁即唯一

瑞士风格实际上并不是一种单一的平面设计风格，他存在于各个设计领域，包括工业设计，室内装潢设计，广告设计等等，但是林林总总的这些领域，瑞士风格在其中表现的共同点就是——简洁，据说在二战之后，以简洁而闻名于世的北欧有一群设计师和印刷工人们因为日趋复杂和繁冗的设计工作绞尽了脑汁，他们受够了，终于，他们开始注意到生活中各种简洁而美观的一些事物，并把这些特点和一些理性实用主义思想融入到设计中去，而逐渐形成了一种平面设计风格。
基于这些理念，瑞士风格的特点也渐渐形成，经过这么多年的发展，基本而言可以归为以下几点

- 注重形式美
- 合理而大胆的运用留白
- 简约的色彩表现，以对比突出内容
- 减少复杂的装饰元素
- 大量采用通用，大众认知度较高的图形图案
- 排版单元以比例进行分隔
- 强调排版和内容，而不是装饰

请勿使用多线程下载工具下载论坛附件！

请勿使用多线程下载工具下载论坛附件！

请勿使用多线程下载工具下载论坛附件！

Metro界面就是基于这些设计特点而诞生的产品，但是以上的几点只是静态书籍，报刊上的风格要素，而对于交互界面，微软有了进一步的发展，添加了几点要素

- 干净，轻量，开放，快速
- 内容既是唯一要素
- 简约，流动感的动画
- 灵动，并富有生命力
- 软硬件整合

请勿使用多线程下载工具下载论坛附件！

这样，一个完整的Metro交互便呈现在世人面前，相对于iOS和Android的风格而言，Metro的确标新立异，但是成熟的触摸交互界面摆在那里，微软却不去使用，这又是意欲为何呢？

3.内容，你在哪里？

说到这里，我们不得不说说以前的系统中的美术设计了，不管从Windows 98到Vista,或者说MAC OS的不断更新，更有google的Chrome OS和Android，我们好像都能看到用阴影来衬底突出显示的按钮，大量使用边界来分割的区块，而内容呢？
过多的修饰已经严重影响了我们对于信息的获取，与元素中相同的字体和颜色让我们区分内容和功能时消耗了太多精力，一切都是那么的不自然，程序已经运行到哪一步了? 我们又在哪里？下一步该如何去做？每一次的系统升级换代我们都要花太多的时间去习惯新的界面，尝试新的功能。

而metro呢？
在使用的过程中，UI对你的影响实际上已经变得很小了（切身体会），你眼中几乎只剩下信息，不必看着下一步还是上一部还是前进还是后退，所有的操作都是以内容为导向，有人说这只是空口无凭，那么我来说个简单的例子，我的父亲以前每次换手机之后都会要折腾好几天来适应手机的功能操作，而这次春节我回到家里的时候，我的父亲仅仅花了一个下午并且在没有任何说明的情况下玩转了我的手机，并且在我要离开家回到工作地的时候还对我说：我手机用了几年了，想换了，下次回家给我带一部这样的手机回来。

在这之前，我实际上并不认为Metro风格体现了微软所说过的“自然交互”这个概念，因为我一直是一个UI适应能力非常强的人，但是让一个几乎没有电脑使用经验的人迅速的接受一个新平台的操作习惯，这的确是一件很神奇的事情。

而对于内容，不得不说微软的Tile元素非常的实用，微软允许开发者将Metro中的Tile设计成动态的形式，这样我们可以获得什么？
想象一下一种生活，你是一个金融工作者，你的客户在你上班的路上问你手头的股票是否要抛售或买入，你只需要在手机上按下home键，看一下主屏幕上的股票应用Tile上这只被你关注的股票的动态，就可以答复他，中午休息的时候看一看天气tile上另外一个城市的天气，然后打个电话告诉自己正在那个城市出差的女友注意天气变化，晚上想找几个网友们絮絮，看看people hub中他们的信息是不是在线，接着逮着一个夜猫子聊天，问他明天周末去要不要去郊区钓钓鱼。

这一切tile中所呈现的东西都是你接受到的信息和内容，你的生活和工作上需要获取的信息非常方便的呈现在你面前，所有想做的事情都是以你为主，沉浸在其中，自然而然的发生。

请勿使用多线程下载工具下载论坛附件！

而另一个方面的内容体现，就是Metro下的另一个精髓，转轴视图，微软在WP彻底抛弃了层级概念，由转轴视图来进行呈现，当你处理完A步骤时，界面像走马灯似的进行转动，这样实际上我们很容易理解每个操作，和每个相对独立的内容之间的逻辑关系，让我们更自然的进行下一步操作或者下一个内容的获取。

请勿使用多线程下载工具下载论坛附件！

着重内容呈现实际上就是微软所提出的“沉浸式浏览”概念，用户将自己的主观意志更自然的体现在交互界面上，而不用被界面上各种复杂的功能或者导航牵着鼻子走，以最小的代价和成本来让用户进行操作体验的迁移，这点是非常明智并且友好的。


4.未来……

其实微软对于Metro界面的研究已经有段日子了，从zune player开始，微软实际上就已经尝试了metro的交互设计，而现在，metro界面几乎渗透到了微软的各个产品中，比如xbox 360 zune Windows 8 ,甚至于自家的网站。当年少数派报告中阿汤哥使用手势操作的玻璃幕墙现在想想颇有几分Metro的韵味，而微软在一个概念短片中也营造出来一个以metro界面为主的交互的世界，在短片中，工作，生活，娱乐都以metro为载体呈现在用户的面前，方便，快捷，当然，这只是一个概念短片，其中很多未来科技不仅仅需要微软一家的努力。但是，离这些科技设备诞生的日子，似乎已经不远了。

请勿使用多线程下载工具下载论坛附件！

请勿使用多线程下载工具下载论坛附件！

敬请期待下一集《Windows Phone，全新世界（二）——编外篇：那些年我们一起捣腾过的手机》

Inchyea

写的很不错啊 期待后续;

hang0813

肯图写了这么多，辛苦了。
Metro小白受益匪浅……

zcylyb

能够装吗

nobody

WP 用户和潜在的用户有福了～期待后续的攻略。

tlinle

学习下 悄悄

qimingzhi

期待后续的攻略。

ljmsam

metro一直用了这么多年，设计界都已经习惯了，
大字，黑白分明，信息明显，都特么的成为标签

zhuteman

漂亮！！！

zhuteman

可惜没有wp的手机！

D.Break

谢谢楼主。。。

不大不小

Metro小白受益匪浅……

jifa

Metro用着感觉还是不错的哦

michibabi

ljmsam 发表于 2012-4-2 17:32
metro一直用了这么多年，设计界都已经习惯了，
大字，黑白分明，信息明显，都特么的成为标签

请教版主，Win 8之前，Metro这个词设计界都怎麽用的？

wufeike

楼主对设计相当精通啊

kentooo

michibabi 发表于 2012-4-3 11:52
请教版主，Win 8之前，Metro这个词设计界都怎麽用的？

。。叫做

国际风格

或者 瑞士风格~~

或者 瑞士国际风格


metro只是微软给WP的UI设计的一种概念名称，，，并不是一种风格名称

panjay

感谢楼主分享

michibabi

kentooo 发表于 2012-4-3 14:11
。。叫做

国际风格

谢谢LZ说明，期待下一篇喔。

q8771690

不错啊。。。

michibabi

ljmsam 发表于 2012-4-2 17:32
metro一直用了这么多年，设计界都已经习惯了，
大字，黑白分明，信息明显，都特么的成为标签

Wiki里关於Metro:

机场和地铁的指示牌给了微软设计团队灵感，设计团队说Metro是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计[来源请求]，其风格大量采用大字体，能吸引受众之注意力。微软认为Metro设计主题应该是：“光滑、快、现代”。

谢谢版主的点评回复。

Wiki里关於Metro UI微软的灵感来源是像上面引用的说明。而实际的华盛顿州金县都会交通局所使用的样子是像这样：


我想这照片跟WP7的Metro UI确实是非常相像的。

不大晓得版主所说；"这里的其实metro不是特质win8,WP带出来的metro UI，metro风格是指国外地铁、机场等标识的设计风格噢~已经很多年了。"是指这样的风格设计已经被地铁跟机场所广泛使用吗？

个人见识浅薄，没去过太多地方，国内外所搭的地铁或去过的机场，有各种各样的字体颜色形状设计，没见过像King County Metro这样的设计。这样的设计国外许多地方都用吗？还请版主指正，谢谢。