《设计Metro风格的应用(Designing Metro style apps)》作为官方指导，其中的一些思路和操作实践都值得我们借鉴。本来这篇文章攒到今天发的，结果早上看到了腾讯CDC团队的《为设计Metro风格的应用准备着—Windows 8设计指南翻译》，顿时感觉到了团队的效率。有兴趣的，可以点击此处下载译文文档。

    【特此说明，《规划Metro风格应用》为官方中文指导说明，已于2012年2月29日随Windows 8 Consumer Preview一起修改发布。】

    规划Metro风格的应用时，少想些你需要包含的特点，多考虑些你需要提供给用户的体验。如果你还不太了解，建议你先阅读一下《什么是Metro风格应用？》。

1. 确定你的用户体验目标是什么

    假设你要创建一个照片应用，那么你需要思考用户拍摄、保存和分享照片的动机。然后你就会知晓，他们想重现美好时光，通过照片来与他人产生联系，保护照片的安全。这些就是你的应用所关注的，你需要应用那些用户体验目标来引导你的设计流程。

    常见技巧：头脑风暴(brainstorming)、关系图(association diagrams)和思维导图(mind mapping)

    应用的关注点是什么？ 开始时概念可能很宽泛，你可以罗列出应用能帮助用户解决的所有事务。例如，假设你想创建一款应用来帮助用户规划旅行行程。下面是一些你可能描绘的想法：

获取行程中所有地点的地图且随身携带；

查明所去城市发生的有趣活动；

鼓励用户创建可分享的列表，包含必去的景点和必参加的活动；

鼓励用户上传旅游照片来与朋友和家人分享；

根据航班价格推荐目的地；

根据我的目的地，综合饭店、商店和活动等信息生成价格统计表；

    应用好在哪儿？ 回头看看上述想法，想想是否还有一些特殊场景需要补充。试试砍掉列表中的功能点，直到剩下一个你想关注的应用场景。在这个过程中，你可能又会冒出很多想法，但是只有学会说“不”才能更加专注——把一个点做精了你就成功了！

    选定了一个专注点后，你可以思考一下如何只写一句话就能让每个人明白你的应用好在哪儿。例如：

我的旅行应用能让我和朋友们一起协同创建团体旅行行程；

我的健身应用擅长帮助朋友们记录下健身进度并互相分享成果；

我的购物应用亮点是协调家庭的周末购物活动使得不会出现多买或遗漏现象。

    这是你应用的“亮点”陈述，它能指导许多设计决策，并权衡所构建的应用。专注于你想突出的点，同时避免过度设计，例如演变为一个功能列表。专注于你的用户能做什么，而不是考虑你的应用能做什么，切忌本末倒置。

2. 确定用户的交互动作和流程

    流程即用户使用你的应用达成个人目标的相关交互集。每一个流程应该是紧密契合你的“亮点”陈述，帮助用户达成应用所满足的特定场景。优秀的应用，其流程往往都是易学且具有最短的交互路径。

    技巧：

勾画流程图：谁先谁后？

故事板流程图：用户在UI上如何操作才能完成流程？

原型：尝试用原型来阐述流程；

    用户能做什么？例如，旅行应用在于“能让我和朋友们一起协同创建团体旅行行程”。列出我们想突出的流程：

创建旅行相关信息；

邀请好友加入旅行计划；

加入好友的旅行计划；

浏览受推荐的其他驴友的行程；

为旅行计划添加目的地和相关活动；

编辑和评论好友添加的目的地或活动；

分享行程给好友和家人，以便follow；

3. 确定应用的界面设计

    打好基础很重要。既然你已经知道了应用的亮点以及想要支持的流程，那么你需要开始思考基础架构。

    如何组织UI内容？大多数应用内容能以分组或框架的形式组织。你所选内容的顶层信息需要与你的“亮点”陈述相吻合。

    拿旅行应用来说，有多种方式来组织行程。如果应用的焦点是发觉有意思的目的地，那么你可能基于兴趣来组织内容，比如冒险、日光浴或浪漫之旅。然而，由于应用的关注点在于和朋友一起规划旅行，基于家庭、大学好友或工作等社交圈子来组织行程更加合理。

    选择如何组织内容能帮助你进行决策，例如应用中需要什么样的页面或视觉效果。集成在Microsoft Visual Studio 11 Express for Windows Developer Preview中的项目模板符合一般应用的布局模式，能满足大多数内容的需要。

    你需要什么样的UI外观和命令操作？温习一下早先定义的流程。每个流程都可以针对用户的步骤粗略地勾画出大纲。

    我们可以看看“分享行程给好友和家人，以便follow”流程。假设用户已经创建了一个旅行计划，分享行程需要这些步骤：

用户打开应用，看到了创建的旅游计划列表；

用户点击想要分享的旅行；

屏幕上出现旅行的详细信息；

连接分享初始化界面；

用户选择或输入想分享的好友的邮箱或用户名；

转向结束分享界面；

更新旅行计划详细页面并显示分享的目标好友列表；

    在这个过程中，你看到你所需要创建的UI以及你需要理解的额外细节信息(例如，为初次使用该应用的用户绘制一个标准的邮箱样板)。你也能开始减少一些多余的步骤。例如，用户实际上在分享前不需要看到旅行计划的详细信息。流程越简洁，使用越方便。

    更多如何使用不同外观的信息，可以查看Choosing the right UI surfaces。

    如何组织操作命令？根据用户的操作步骤提炼出可能需要设计出的操作，同时斟酌一下这些命令操作如何摆放。

不断尝试使用内容 ：尽可能让用户直接操作应用画布上的内容，而不是事先人为生硬地添加操作命令。例如，在旅行应用中，让用户在画布上随意拖拽、删除列表中的活动来重新安排他们的行程，而不是使用上下操作按钮来选择活动。

如果你不能使用内容，可以在UI外观上放置命令操作：

    App bar中：你应该将大多数操作放置于app bar(App bar通常处于隐藏状态，除非用户将其呼出来)；

    App画布上：如果用户在页面或视图里有单一的目标，你可以直接在画布上提供命令操作按钮——当然，这些操作尽可能少；

    上下文菜单(context menus)中：你可以使用上下文菜单来进行剪贴板操作(例如剪切、复制、黏贴)，或者内容中无法选择的操作命令(例如为地图上的某个按钮添加push pin操作)；

    确认每个视图如何布局。Windows Developer Preview支持横屏(landscape)、竖屏(portrait)、切屏(Snap Views)和Fill Views。用户可以随意放置应用视图，这意味着你需要规划每个特定视图中的UI元素布局，并将每个视图状态映射到相应的布局状态中。当你这样做后，你的应用UI能够流畅地变换，满足用户的需求和个人喜好。

    更多信息，可以查看Sopporting views，Choosing a layout和Guidelines for snapped and fill views。

4. 确定流程中所使用的应用和Windows特性

    如何让你的应用与众不同？如何让你的应用在Windows Developer Preview中体验流畅？

    既然你知道用户想要什么以及如何帮助他们，那么你可以你工具箱里的“装备”。探索Windows 平台并将其特性与应用的需求联系起来。需要确认的是，每个特性都需要参照规范指导。

    常见技巧：

平台研究：查明平台提供哪些特性以及如何使用；

关系图：将流程图与系统特性对接；

原型：应用相关特性，保证需求的吻合；

    App contracts 你的应用通过app contracts来达到跨应用和跨功能的用户流程。

搜索(Search)——让用户迅速查找系统内指定应用的内容，特定条件下也包括其他应用。反之亦然。

分享(Share)——允许用户分享应用内容给其他人，同时获取其他人的分享内容。

Play to——允许用户体验声音、影像和图片流，这些可来自你的应用，也可来自家庭网络中的其他设备。

设置(Settings)——将应用设置集成在系统设置面板中，以统一的机制保证用户按其熟悉的方式来设置应用。

文件选择器和选择扩展(File Picker & Picker extensions)——允许用户在你的应用中加载和保存他们自己的文件，这些文件可以来自本地文件系统、连接的储存设备、HomeGroup，甚至是其他应用。你也可以提供文件选择器的扩展，那样其他应用就可以使用你应用的内容。

    更多信息，可浏览Windows application contracts和File Pickers。

    不同视图和规格   Windows Developer Preview将你的应用放在了用户面前。你想让你的应用UI在任何设备、任意方向、任何用户使用情境下出类拔萃。更多信息查看designing for different form factors。

    触摸优先(Touch first)  Windows Developer Preview提供一套独特、出众的触控体验，明显优于鼠标操作。

    例如，语义变焦(semantic zoom)是针对大规模内容集导航的触控体验不断优化的结果。用户既可以通过平移或滚动来浏览各类别内容，又可以通过缩放特定类别来浏览更详细的信息。对比传统的导航和类似标签(tabs)的布局模式，这样的方式让呈现的内容更具触感、视觉和信息特征。

    当然，你可以充分利用一系列交互方式，譬如旋转(rotate)、平移(pan)、擦(swipe)、交叉幻灯片(cross-slide)等。更多信息浏览touch features。

    新颖且引人入胜  确认你的应用够新颖且通过以下标准体验引人入胜：

动画(Animations)——使用官方动画库能够让你的应用更流畅。利用可视化渐变的体验帮助用户理解情境的变化。更多信息浏览animating your UI。

“烤面包”式通知(Toast notifications)——通过烤面包式的通知让用户知晓即时性、个人性的内容，并吸引用户重新进入应用。更多信息浏览notifications。

内容瓦片(Content tiles)——在Start页面推荐应用里一些有趣的内容及相关链接，鼓励用户直接打开应用浏览具体页面或视图。

应用瓦片(App tiles)——提供最新的相关更新吸引用户的注意力。更多内容可见下一部分。

    个性化

设置(Settings)——允许用户保存应用自定义设置内容。将应用设置集成在系统设置面板中，以统一的机制保证用户按其熟悉的方式来设置应用。

漫游(Roaming)——通过漫游和应用生命周期特性进行设置信息及状态同步，这样能让用户随时随地使用你的应用，无论是家庭PC、工作PC，还是个人平板。

用户瓦片(User tiles)——加载用户tile图片使应用更具个性化，或者让用户自主设置用户瓦片的内容。

    设备适配  确认你的应用能够充分适配当前的多个设备。

Proximity gestures ——例如玩多人游戏时，只需多个设备相互靠近，通过“轻拍”手势完成设备的连接。更多信息，查看proximity gestures。

摄像头(Cameras)——连接内置摄像头来聊天、视频会议、录制视频博客(vlogs)、拍照等，或者任意应用能利用的动作。

加速器和其他传感器(Accelerometers & other sensors)——现在的设备都配置了许多传感器。你的应用可以根据光照条件来自动调节亮度，可以根据用户的显示调整重新安排UI，亦可以对任何物理动作做出反应。更多信息可浏览sensors。

定位(Geolocation)——利用标准Web数据或地理传感器传送的地理位置信息帮助用户定位，获取附近用户、位置、活动或目的地等的信息。

SMS

Print

    我们重新思考一下旅行应用案例。为了达成“能让我和朋友们一起协同创建团体旅行行程”的目标，可以使用一些特性，这里仅仅罗列一些：

分享：用户在社交网络上分享计划的旅行行程给好友和家人。

Snapped and filled views：用户将旅行应用放置屏幕一侧，另一侧使用浏览器进行研究和预订。

搜索：用户可以搜索一些别的用户分享或公开的旅行活动或目的地信息。

通知：当旅行伙伴更新他们的形成后通知用户。

设置：用户根据自身喜好设置应用，例如哪类旅行需要推送通知，哪类社交群组被允许搜索用户的行程。

Semantic zoom：用户通过行程的timeline进行导航，并放大查看计划的活动列表详尽信息。

用户瓦片：用户自定分享旅行是出现照片。

    正如你所看到的，Windows Developer Preview帮助你创建新的、令人愉悦的体验。探索更多信息，可见Developing Metro style apps和Differentiating Metro style apps部分。

5. 令人愉快的第一印象

    思考一下第一次打开应用时所需要传达给用户的信息。看看你的“亮点”陈述，即时你没机会当面告诉每个用户你应用的功能，你也应该利用第一印象来传达相应的信息。可以利用这些：

    瓦片(Tile)——瓦片就是应用的脸面。在Start页面的应用万花丛中，凭什么让用户打开你的应用呢？利用网片来点亮应用，展示出应用的功能特点。充分利用瓦片式通知来使你的应用更具新鲜感和相关性，吸引用户频繁回到你的应用中。

    启动画面(Splash screen)——应用初始化时启动画面是另一个突出品牌的时机——充分利用它来传达应用的个性化。

    初次使用(First launch)——在用户初次登录或添加内容前他们将看到什么？获取用户信息前可以着重诠释应用的价值。提交信息前可以展示一些推荐内容，引导用户去理解应用的愿景。

    首页(Landing page)——首页是用户每次启动应用时看到的界面。首页内容需要有清晰的聚焦，而且能够展现应用的主旨。首页专注地做好一件事情，相信人们会探索应用的其他内容。首页需要合理规避干扰问题，而不是突出可发现性。

6. 确认设计符合规范和要求

    实际开发之前，你需要验证你的设计或原型，避免后续的返工重做。每个功能特点都有一系列的用户体验规范指导来帮助你打磨应用，且需遵守一系列Windows Store规则。你可以使用Windows App Certification Kit来按照商店需求进行技术测试。

    了解重要特性，可查看Checklist for design。

建议继续学习：

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