设计Metro应用

当计划一个Metro应用的时候，尽可能的去思考你的应用给你的用户带来什么样的体验，而不是考虑这个应用会有什么样的功能。如果你还没准备了，你可以先阅读What are Metro style apps？

1. 定义你的用户体验目标

假设你正在创建一个照片相关应用。你会思考你的用户使用该应用的原因，如保存和分享，以及你会设想你的用户希望通过照片来回忆及与朋友交流，以及保证照片的安全性。这些正是你的应用的独到之处，你将这些想法作为你的用户体验的核心目标贯穿在整个设计过程中。

常用的技巧包括：脑力风暴、关系流程图及脑图。

你的应用到底是做什么的？从一个最广泛的问题开始，列出所有你设想的你希望用户使用你应用的原因。例如，你想创建一个帮助人们设计旅程行程的应用，当你设想这样一个应用的时候，你也许会产生下面这些想法：

应用将帮助你获得将所有你的航班到达的城市的地图来帮助你旅行。

找到你要去的城市中的有趣的活动。

帮助你创建一个可分享的参加活动的列表，或是一定要参观的景点列表。

帮助你整理照片并与朋友和家庭分享。

根据航班价格获得推荐的目的地列表。

找到你的目的地的餐馆、商店和活动以及折扣信息。

你的应用程序好在哪里？再回去看看你的想法，看看这 些场景真的能让你的应用程序出色吗？挑战一下自己尝试去除一些场景，专注在唯一的一个真正重要的场景上。在整个过程中你可能会获得无数个想法，但一定要学会对这些想法说“NO”，才能帮助你获得最好的想法。

你会专注在单一的使用场景，来向人们介绍你的应用到底是什么样的，例如：

我的旅行应用最棒的卖点是能让我的朋友与我一起协同创建团队出游计划。

我的健身应用最棒之处是能让我和朋友们记录我们的健身进度，目标以及分享。

我的购物应用最棒之处帮助我的家庭组织超市购物活动，不会让大家重复购买或漏掉重要的物品。

这便是所谓的“最棒”之处，来帮助你对你整个应用程序的设计和开发做出有用的决策。专注在用户的使用场景，小心别陷入了过份多的功能的设计。应当永远去考虑，你的用户在做什么，而不是你的应用在做什么。

2. 决定应用与用户的交互方式与流程

流程指的是你的用户在使用你的应用达成目标的一组交互场景。每一个流程应当充分展现所谓的“最棒”之处。最好的应用程序应当是让用户简单学习并以最少的步骤完成目标。

技术：

关键流程图：从哪里进入，哪里退出？

故事板流程图：用户在你的UI上如何操作及完成交互的？

原型：使用快速原型进行试用测试。

用户能做什么？例如，你的旅行应用是关于“帮助我和我和朋友协同创建团队出游计划”。让我们列出会有什么样的情况发生：

创建行程的基本信息。

邀请朋友加入行程。

加入朋友的行程。

查看其它人推荐的行程安排。

将目的地及相关活动加入到行程中。

编辑和评估别人创建的目的地及活动。

分享行程给朋友，让他们follow。

3. 决定如何设计应用的界面

这是有关于如何把应用最基础的事情做好。现在你已经知道你应用的最棒之处，以及你将提供什么样的流程，接下来可以开始思考一些基础。

应当如何组织你的UI内容？大部分应用内容可以以成组或是上下层级的方式来组织内容。你所决定的应用程序第一层应当完全与你所思考的应用程序最棒之处相吻合。最棒的内容最先让用户看到。

使用旅行应用举例，有多种方式来组织行程单。如果应用的专注点是有关发现有趣的目的地，那么你也许会按兴趣点来组织你的内容。如冒险、阳光行程或浪漫旅行。但，因为应用程序是针对于与好友一起制定行程，所以更好的思路也许是根据你的社交圈来组织，如家庭、同学或同事。

当选择了使用何种方式来组织内容的时候，也就是选择了有多少个页面或是视图来展现你的应用。在Microsoft Visual Studio 11 Express中提供的一些项目模板能帮助你使用一些通用的UI设计模式来设计你的应用。

你需要什么样的UI外观和操作？评估你之前的流程，针对每个流程画出用户在每个步骤中能进行的操作。

例如这个有关“分享行程给朋友，让他们follow”的流程。我们假设用户已经创建了行程。那么分享就需要以下的一些步骤：

用户打开应用程序，查看到他创建的所有行程列表。

用户点击其中一个想分享的行程。

显示出行程详情。

用户通过UI上的点击，开始进行分享画面。

选择朋友的电子邮箱。

通过点击UI来完成分享操作。

应用在行程的细节中展现了她刚分享给了哪些朋友。

通过这样的过程，你已经看到了你的UI将会如何呈现（就像给朋友写一个如何使用你应用的教程一样）。你同样可以继续减少一些步骤。也许用户在分享前根本不必看到行程详细。越简单越方便使用。

查看 Choosing the right UI surfaces 去了解如何使用不同的UI样式。

如何组织操作？描述出每个流程中的步骤来找到你需要设计哪些必要的操作。然后思考这些操作命令如何体验在你的应用程序中。

永远尝试先使用内容。只要可能，让用户直接与内容进行操作，而不是添加各种新的按钮。例如在旅行应用中，让用户直接在行程列表中拖动单个行程来移动位置，而不是选择某个行程，再使用上下按钮进行操作。

如何不能使用内容，再尝试放置按钮：

放置在app bar上：尽可能将按钮放在app bar上。app bar一般会隐藏起来直到用户向上滑动。

放在应用的画面上：如何用户的操作集中在UI上的单个操作上，可以将这些操作以按钮或其它方式呈现在画面上，当然，越少越好。

关联菜单上：可以使用关联菜单操作剪贴板（Cut， Copy， Paste），或一些不能直接被选择的操作（如在地图上放置记号）。

设计每个视图的界面。Windows Developer Preview支持横向、纵向、Snapped及fill view。用户应当能在任何时候使用这些视图，而你也会希望你的应用在任何一个视图下都能表现良好。这意味着你需要针对每个视图都精心设计UI元素及实现。当你做到这些后，你的应用程序在视图间的切换会非常平滑。

了解更多，查看 Supporting views， Choosing a layout， and Guidelines for snapped and fill views.

标签： Metro UX设计 人机交互 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。