前言

有一种美出自人工。有时，这样的美无法比及自然之美；有时，这样的美却是无与伦比。因为，它展示了世间男女用双手所能创造的最佳品质。

人们常常把艺术和建筑作为人造之美的典范，我们知道，这表达了人们对独创精神从社会和经济角度进行的赞美（或者说，人类无限意志的最佳展现）。

但是，在人造之美中，却有一种更加简单，又更加普遍的例证：那就是舒适之美和熟悉之美。这如同属于自己的感觉，无论身在何处，你都可以找到自我。这样的美是极富意义的，因为，它是对我们都拥有的由来已久的社会需要的诠释。因为它如此微妙，以致我们经常忽视它；因为我们只有失去它，才会强烈地觉察到这样一种需要。

想象自己身处国外机场，或是第一次位于不熟悉的中转车站之中。现在，你刚刚走下火车或飞机，在有限的时间要让自己找到目的地，你要走向何处？如何找到信息？

如果你对这样的地方或这样一种体验有过直接经验，唤醒这一记忆甚至会让你的身体也有所反应：瞳孔放大、心跳加速、手心出汗和呼吸急促。充满了压力、充满了焦虑！

对情况的不熟悉会激发人们对熟悉感的需求。那么，你该怎么办？如果与朋友或家人一同出游，你的压力也许就会减少很多，但是这样的任务还是会摆在你眼前。你该如何是好？

你一定会努力寻找一种熟悉的感觉，即固定的线索：符号、数字、字母和文本，任何可以帮你找到方向的东西。写着文字“B出口”的符号或指定方向的箭头都会立即让你松一口气。一个终端屏幕同样可以起到相同的作用，又或者，你所需要的只是指向最近的洗手间的线条画。不论是什么，你所寻找的，并且可以吸引你的，是所有可以帮助你完成手头最重要任务的一些让你感到熟悉的东西。只要找到这些熟悉的东西，你就会感到心安、感到舒服。

这就是其中的美！如若数字、字母和符号可以把我们拉回更深层的现实中，为我们指明归家的路，那么这就是一种非凡的艺术，无与伦比！

而这，就是metro——它创建出一种体验，哪怕我们面对的是不熟悉、人造的东西，也可以让我们和现实紧密相连。这种体验又不只是简单地在不同的媒介间转移、复制我们的舒适感。对我来说，芝加哥的地铁标记不是非得和曼哈顿或慕尼黑的一模一样，只要这些东西足以激起我的熟悉感，我就会感到舒服。而北京的男洗手间标记也不需要非得是一幅六尺高的栩栩如生的白人照片，我才敢进去。套用Scott McCloud^[2]的话，图腾之所以如此强大，不仅仅因为它是抽象的，还因为它的抽象本质让它可以被识别，而我们又能够把这些识别的东西很好地联系在一起。我只需要一幅线条画，就可以提取出我要的信息，它会让我有熟悉感和舒适感。

metro既不是Windows，也不是Windows Phone，更非Xbox；metro不是动态磁贴、黑色背景、Segoe UI，也非直角的方框；metro不是HTML5、CSS，亦非JavaScript。metro，甚至不是微软。metro可以存在于浏览器中或桌面之上；甚至可以存在于iOS或Android之中，因为，metro和平台根本就没有半点儿关系。

metro设计语言逐渐用于指导开发者进行设计，引导他们找出并删除CSS中的每一条border-radius规则，或者指引开发者遵循设计的备忘录，甚至是让开发者用一系列的规则去体现出他们的设计。但是，我们也千万不要忘记metro本身的理念，正如过去每一种伟大设计理念一样，metro关注的是如何构建出令人觉得美妙的事物，关注如何在设计中传递出把我们和现实联系起来、有助于找到自己方向的信息。同时，它也关注如何创造出能够给我们带来美感的事物，而这样的美感是来源于设计的实际作用和带给我们的舒适感觉。

你无法“编码”你的metro之路，也许，即便偶而为之，创建出来的东西也很可能因为太过矫揉造作而并不真实。

你甚至无法“设计”你的metro之路；从来没有任何指南、备忘录或书籍会告诉你：只要你添加了彩色的标题、奇特的翻页效果，或者是用数字表示的桌面日历，就是在传递一种“metro体验”。

当然，所有的软件都是并且一直是我们努力的结果，而metro也毫不例外。虽然从来就没有什么固定的设计清单或设计过程可以明确地告诉我们在什么情况下做什么事情才是最有益的，但metro的真正价值正是在于其发现的过程。所以，只要你发掘出人们使用应用程序的需要，考虑如何才能最好地满足这一需要，就完全是自己的事情。有了这一发现，你会认识到metro其实是把舒适感和熟悉感放到与实用性同等重要的位置。

所以，学习metro，就是阅读设计指南然后使用一些设计清单，不断地观看教学视频，不论构建什么，都学着更像一个设计师那样去思考。但是在此之前，要先考虑怎样体现出设计的舒适感和熟悉感，并且要考虑自己的应用程序或网站与其他人的作品相比，如何才能更好地传达出人的最基本需求。

这就是metro的真正含义。

一些专业术语

在开发Windows 8的过程中，一些特性和技术术语的命名已经发生了变化，在此向读者提供了一份关于这些术语的最新指南（截至写作这本书时，在RTM发布之后、通用版发布之前）。

●　Metro和Metro风格：这是一种设计语言，描述了使用Windows 8、Window Phone 7、Windows Phone 8和最新的Xbox操作面板的UI和体验，称之为metro。这个术语也用来描述构建在这种设计语言之上的新型Windows 8应用程序，即“metro风格应用程序”（metro style apps，没有连字符）。由于德国一家大型的连锁超市^[3]的原因，这个名字现在已经不再使用了。

●　Windows应用商店应用程序：微软用来代替“metro风格应用程序”的术语是“Windows应用商店应用程序”（Windows Store apps）。这个术语是指以新的风格设计的Windows 8应用程序——也就是说，这不是我们从Windows 95起就一直使用的那些桌面应用程序。其实这也不是一个非常精准的术语，因为以Windows应用商店风格构建的企业应用，根本无须通过Windows应用商店进行部署。

●　WinRT和WinRT应用程序：Windows Runtime（Windows运行时，WinRT）是所有Windows应用商店应用程序构建的核心。但是，微软也使用这个名字去指代Windows 8的ARM版和运行这种系统的平板电脑，例如，WinRT Surface指的就是微软的ARM版Surface平板电脑。这个词对“新的”风格的Windows 8应用程序无疑是个精确的好名字，但可惜的是，现在已经不可能了。

●　现代应用程序：有时也会听到“Windows应用商店应用程序”的另一个名称——“现代应用程序”。这个词对所有构建所谓其他类型应用程序（包括运行在桌面上的Windows 8应用程序）的人来说都是一种侮辱，真心希望这个术语不要再用了。

在本书，我们主要还是使用“Windows应用商店应用程序”这个术语。

撰写本书的目的

写这本书的目的，是为了让读者从更加广阔的视角，了解构建Windows应用商店应用程序需要具备的能力。这不是一本面面俱到的参考书，但本书对于如何开始一个新的应用程序，如何为应用程序添加重要的功能，或者把应用程序发布到Windows应用商店并获取收入等进行了介绍，还对实现这些目标所需要的工具、库、概念和技术进行了概括。在整本书中，我们还提供了一些在线资源的链接，供大家使用以了解更多的细节，但是，最主要的还是以下两个网站：

http://design.windows.com

http://dev.windows.com

这是专门针对Windows应用商店应用程序的设计和开发的网站。此外，在上面所列的设计网站中可以学到关于metro设计语言的知识，尽管在网站里面可能不会出现这个名称。

本书针对的读者

本书针对的读者是所有的Web开发者，包括jQuery、PHP、ASP.NET、Rails的开发者，等等，也适合那些想要了解如何把Web开发知识应用到Windows 8平台中，并构建出一流应用程序的开发者。

本书可供设计师阅读，令其从Web技术的角度了解Windows应用商店应用程序的构建过程。

本书亦针对想要了解如何使用Web技术编写下一代Windows程序的.NET、Win32、MFC或Visual Basic的开发者。

但本书不适用于没有任何开发经验的读者。如果掌握了最基本的HTML、JavaScript和CSS，对于阅读本书会有很大的帮助；但如果是没有这些技术基础的读者，建议先阅读本书末尾的附录，这两节附录提供了很有用的Web平台的基础知识，在构建Windows应用商店应用程序的时候可供参考。

简而言之，本书适用于所有写过Windows程序或网站，并且对构建Windows 8的Windows应用商店应用程序感兴趣的读者。

示例代码和勘误

本书的所有示例代码和勘误，可从此处获得：http://sellsbrothers.com/writing/win8jsbook。

要运行本书中的示例代码，需要使用Windows 8 RTM、Visual Studio 2012 RTM以及Blend for Visual Studio 2012（所有软件均可在http://dev.windows.com下载）。

作者联系方式

Chris Sell　Telerik开发人员工具部门的副总经理。他的联系方式是：

E-mail：csells@sellsbrothers.com，Chris.Sells@telerik.com

Twitter：@csells

Blog：http://sellsbrothers.com

Brandon Satrom　Telerik的Kendo UI部门的一名程序经理，他的联系方式是：

E-mail：bsatrom@gmail.com，Brandon.Satrom@telerik.com

Twitter：@BrandonSatrom

Blog：http://userinexperience.com

Don Box　微软XBOX部门的一名杰出工程师，他的联系方式是：

E-mail：dbox@microsoft.com

[2]1994年出版的McCloud的佳作《Understanding Comics》（《理解漫画》）中，对于视觉交流的艺术与科学的关注几乎和对漫画的特殊关注一样多。如果买一本来读一读，你一定会感谢我推荐了这本书。

[3]此处指的是Metro Mall，麦德龙超市。——译者注