注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

分享,态度 ·~~

—— 十年太长,五年;如果可以回到五年前,你最想对那时候的自己说什么?

 
 
 

日志

 
 

MSDN Blog:创建能够脱颖而出的 Metro 风格应用  

2012-07-31 10:37:11|  分类: Windows 8 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

当您将应用提交到应用商店时,在相同类别中无疑也会有其他应用在吸引人们的注意力。对于一个成功的 Metro 风格应用来说,若想从成千上万个 Metro 风格应用中脱颖而出,能使人很容易就从您的应用中看出其与众不同之处并且专注于提供您最擅长的核心方案是至关重要的。

Windows 8 提供了一系列 设计模式常用控件以及内置的平台功能,例如可以帮助您专注于自己最擅长的 合约。下面简单列举几个示例:应用栏是一种常用的控件,它有助于使人们专注于您的内容并尽量避免受到其他干扰; 触摸模式规定了在平台控件中一贯使用的一系列手势,例如从一侧边缘向另一侧轻扫即可调出应用栏,从而使人们可以自信地使用您的应用,而无需学习新的界面; “共享”合约可以使两个应用绑定在一起,从而使用户可以借助您的内容实现更多目的。

这篇文章与其他文章的不同之处在于,它并没有讨论编码模式,而是讨论在规划过程中您可以使用的设计模式。我介绍一个示例应用,“与好友聚餐”,并以回答问题作为开始,此问题对于使该应用脱颖而出非常关键:“我的应用在其所在类别中最擅长做什么?”然后,我会阐述设计该应用的结构和布局的一些实际步骤,以突出显示它最擅长的核心方案和差异点。这是将在未来几个月陆续发布的一系列文章中的第一篇。以后的文章将继续使用此应用作为示例,并遍历不同方式,使您可以充分利用 Windows 8 平台在各个方面的优势,来营造一种精雕细琢、快速流畅的使用体验。

我们现在就开始吧!

示例:与好友聚餐

假使我们正在创建一个帮助人们查找餐馆的应用。我们来看看这个应用的设计流程。

1.确定差异点

我们将首先确定一个重点,以使我们能够区别于餐馆和餐饮类别中的其他竞争对手:

我的应用在其所在类别中最擅长用于帮助用户和他们的好友找到一家今晚就餐的餐馆。

此应用的独特之处在于帮助用户和他们的好友在今晚就餐。此应用将专注于让好友们在就餐地点上达成一致,并将专注于好友们的不同偏好,从而使用户在做决策时考虑到这些因素。这一突出特点使我们的应用能从相同类别的其他应用中脱颖而出,那些应用可能只提供本地餐馆的列表。

“最擅长”声明正是用户将会购买此应用,而非相同类别中其他竞争对手的应用的原因。在我们做出设计权衡和决定使用哪些功能集和平台功能时,上述原因都将会一直影响我们的决定。

既然如此,那我们不妨就把此应用命名为“与好友聚餐”。

2.挑选最合适的方案

接下来,让我们根据我们的“最擅长”声明,来确定我们的应用将专注的核心方案。在集思广益和选择方案的过程中,可能有大量有趣的功能我们都可以支持(例如查看菜肴的营养价值)。但是,为了真正做到我们“最擅长”声明所承诺的提供独一无二的、差异化的、业界一流的使用体验,如果它们与我们的目标不一致,我们就必须对它们说不。在此基础上,以下是该应用最擅长的核心方案:

  • 查找我要就餐的餐馆
  • 查找我的好友们想要就餐的餐馆
  • 与好友们一起制定今晚的聚餐计划

在我们开始考虑具体的功能之前,我们首先需要思考人们为什么要使用这个应用,这样那些功能才能帮助他们实现他们的目标。我们的每个方案都可能包含多个功能。当我们知道核心方案是什么的时候,我们就可以仔细考虑实现这些方案都需要哪些功能了。我们将在下一篇文章中详细讨论功能选择与设计,不过这里只提供一些可能的功能示例:

  • 查找我要就餐的餐馆:
    • 在地图上或列表中浏览餐馆
    • 按名称或关键字搜索
    • 按类别、价格和评价筛选/排序
    • 在备选列表中添加/删除餐馆

3.创建登录体验

登录页是任何 Metro 风格应用的关键。这是告诉用户您的应用最擅长做什么的最佳时机。当用户一打开您的应用时,您希望他们立刻就能了解您应用的核心方案是什么,以及他们如何能提供独特的价值。一个好的登录页总是通过提供最新、最流行的内容来激励用户去打开应用、想法设法留住用户并使用户愿意在该应用上花更多时间。它更像是一个枢纽,汇集了该应用的所有兴趣点,并让人了解该应用最擅长做什么。

要想设计一个足够好的枢纽,就必须创建一个经过优化的布局,该布局应该能够将内容和功能以最易于探索的方式带给人们。在应用中或在网络上比较典型的导航模式是,首先显示应用的默认区域,然后用户可以自己选择从导航栏或目录前往新的区域。这种模式的问题在于,它不鼓励探索。为了让用户决定单击一个标签并导航到新的区域,他们需要相信那里有他们感兴趣或对他们来说有用的东西。如果没有有趣的区域,他们就会切换到另一个应用。例如,新闻阅读程序应用使用一种基于标签的设计,用户可在这里登录一个独立的区域,但然后必须作出决定,以在应用中导航到基于该名称的其他区域。您必须分别切换到这另外 4 个区域,才能知道是否对它们感兴趣。

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

或者,也可以将其转换为枢纽,只需添加平移功能,这对用户来说并不是个艰难的决定,并且他们将会明白应用的内容或功能之所以使他们感兴趣的原因。

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

通过使应用的布局更易于探索,我们想让用户明白他们为什么应该留在该应用中。我们要让他们完全了解我们的应用最擅长做什么。

因此,考虑到这一点,我们先使用 Visual Studio 的网格项目模板 (XAML 和 HTML)创建一种基本的枢纽布局。 其登录页 (groupedItemsPage) 上包含若干个区域,每个区域包含一些精选的项目。

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

我们希望该页能够真正代表“最擅长”声明:对于帮助用户和他们的好友找到一家今晚就餐的餐馆来说,我的应用在其类别中是最适合的。第一步是使我们枢纽的每个区域显示我们三个核心方案之一。每个核心方案都必须显示出来(虽然一个方案可能对应多个区域):

1.今晚

侧重于与好友一起制定今晚聚餐的计划

2.好友们的备选列表

侧重于查找我的好友们想要就餐的餐馆

3.我的备选列表

侧重于查找我想要就餐的餐馆

4.所有餐馆

也侧重于查找我想要就餐的餐馆

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~


区域的排列顺序是非常重要的。把“今晚”放在第一位的原因是,它是与目前这件事最相关的区域,所以您每次打开应用它都可能会有变化。对于动态磁贴来说,与今晚有关的信息也是很好的备选项,因为它是新鲜的、个性化的和相关的。这种安排意味着,如果人们从“开始”屏幕中该应用的动态磁贴上看到今晚即将发生的事情,那么他们就能打开应用,在枢纽页上查看他们刚刚在动态磁贴上所看到的内容。如果用户打开该应用,您应该用对他们来说最新和最重要的内容来奖励他们。有关动态磁贴的更多信息,请参阅 Kevin Michael Woley 的文章:创建最佳的磁贴体验

接下来是好友们的备选列表,然后是我的备选列表,之所以如此排列,有两个原因:

  • “食与好友聚餐”的关注点在于我的好友们,这正是该应用与众不同之处。
  • 就像“今晚”区域一样,当用户离开应用期间,其他人将会更新它们的备选列表,因此它可能会经常改变。虽然它包含用户所不知道的信息,但他们更熟悉自己的备选列表,所以探索它的重要性较低。

我们把“所有餐馆”放在最后。我们希望只有在用户想要管理自己的备选列表时才会转到这一区域,但根据我们的“最擅长”声明,大部分情况下用户将决定今晚去哪里,这意味着大部分情况下他们将会查看现有的备选列表以及针对今晚的建议。将该区域放在最后还有一个好处就是可以根据需要展开该区域,而不会影响其他内容。您可能会担心应用在“所有餐馆”就结束了,其实没有必要。语义式缩放即可实现在列表中快速跳转。

4.设计区域

设计区域的关键在于,针对相应的方案对其进行优化。在整个枢纽中并不需要使用统一的网格样式磁贴!我们在这里可以发挥创意、展示我们的应用如何与众不同并告诉用户我们的应用最擅长做什么。我们也没必要在登录页上的给定区域中显示所有项目,因为这可能使该页过于复杂。相反,我们可能只需要向用户呈现一组最相关和最新的项目。例如,我们在好友的备选列表下方只显示最前面的几位好友,在我的备选列表下方只显示最近添加的餐馆。

对这个应用来说,第一个区域“今晚”适用于与您的好友们一起决定今晚在何处聚餐。 因为这需要您和好友们之间进行协作,所以它最适合作为一个讨论区:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

我的“好友们的备选列表”都是关于我的好友以及他们的偏好,所以我们要让这一区域的内容都与人有关!

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

我的备选列表,就是我最想要去的餐馆的列表,所以我们在这一区域中显示餐馆:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

最后,在“所有餐馆”区域可以浏览到数量巨大的餐馆集合,让我们先显示用户可能感兴趣并且是目前最受欢迎的一些餐馆,然后显示类别以方便浏览。现在,所有组件都已就位,您可以看到应用的枢纽登录页现在的显示效果:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

提供差异化体验的一个重要组成部分是表达您产品的品牌。这是一个值得单独讨论的主题,所以请继续关注我们有关应用布局和视觉设计的技巧和技术的更深层次探讨,这将有助于在使您的应用在外观和体验上与所创建的目标平台保持一致的同时,使您的品牌具有更突出的个性。 现在,我们来看一个简单的示例:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

5.布局应用的其余部分

我们现在已经有自己的登录页了,要布局应用的其余部分就变得很容易了。

我们知道,并非枢纽中的所有区域都是全面详实的,所以我们要求所有页面都力争显示每个区域的完整内容。Visual Studio 网格模板中的 groupDetailPage 就是专为此目的而设计的。我们在页面上自定义 ListView 的布局,以便尽可能使其适合内容类型。

好友们的备选列表:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

我的备选列表:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

所有餐馆:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

我们还知道,有两个核心实体得以体现在枢纽上:餐馆和人。这意味着在详细信息页面(网格项目模板中的 itemDetailPage)上我们需要两个变量,当用户在该页上点击或单击某个项目时可以看到该项目的详细信息:

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

在设计每个页面时,仔细思考您希望每个页面最擅长做什么,以及它为何有助于使您的应用符合“最擅长”声明的设计原则,这是非常重要的。

6.导航 UI

现在,我们已经有了不同的页面,我们需要做的只是为用户提供一种在这些页面之间切换的方式。导航 UI 不太可能是任何应用本来就擅长做的事情。我们可以采用用户已知的、现有的 导航模式,使他们能够尽快熟悉我们应用的内容和功能。在此示例中,我们使用遵循分层系统模式的网格项目模板。例如,点击磁贴可将您引导至该项目的详细信息页面。点击枢纽中的区域标题,可将您引导至该区域。向后点击可使您返回刚才的页面(不是返回上一级)。这些功能大多数都是网格项目模板中已经内置的。在今后的文章中,我们将继续深入探讨有关实施以及创建更高级应用内部导航的技巧。

MSDN Blog:创建能够脱颖而出的 Metro 风格应用 - 乂乂 - 一个人,一支烟  ·~~

摘要

若想从成千上万个 Metro 风格应用中脱颖而出,搞清楚在相同类别中您最擅长做什么是第一步也是最重要的一步。正如我们已经看到的,确定差异点并对它们重点关注将会影响许多基本的决定,包括设计内容结构、登录体验、页面布局以及导航。在以后的文章中,我们将继续以此为基础,并讨论如何使用 Windows 8 平台使您的应用成为同类别中的佼佼者。要查看本文中所提及的一些资源,请参阅网站http://design.windows.com 上的内容。

-- Windows 高级项目经理 Bonny Lau

【from  http://blogs.msdn.com/b/windowsappdev_cn/archive/2012/07/17/metro-from-the-crowd.aspx 】
  评论这张
 
阅读(1110)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017