设计案例:iPad应用程序在Metro中新的交互模式

曾经深深被Metro扁平化设计所吸引，为了解Metro UI博主成为较早一批使用Wp手机的用户。Metro UI的风格很简洁，相同的空间给人以更宽广的感受，Xbox live 、bing搜索、人脉。。。平凡却独特的排版设计，不打扰用户的同时悄悄更新的资讯，当用户数据量达到既定的层次而触发的新的交互。。相对Android与IOS系统Metro确有另外一翻新鲜的交互体验

 

接下来让咱们进入正文，为你们带来一篇来自微软官方的案例文章。

iOS是个不错的平台，人们在其中创造了各种触控优先、有趣且吸引人的应用。不过，随着Windows 8的登场，设计师和开发者们又多了一个释放创意能量的新舞台。

在本篇案例当中，咱们将帮助各位使用Metro风格的设计原则对原有的iOS应用设计方案进行从新构思，你们会了解到怎样将iPad当中一些常见的界面元素及体验模式转换成为Metro风格，以打造全新的Windows 8应用。咱们将对同一款应用在两个平台中的不一样设计方式进行对比，帮助各位了解怎样将你的应用与Windows 8以及Metro设计原则进行完美的融合。

咱们将要研究的是一款相片日志应用，用户能够在线查看和管理他们的照片或视频。下图是这款应用的Metro版本：

这款应用最初是为iPad设计的，以下图所示。

从设计及体验模式的角度出发，该应用能够大体被解构为六个方面：

1. 布局和导航
2. 命令与行为
3. 契约(Contract)：搜索、分享及其余
4. 触控与手势
5. 屏幕定向与视图模式
6. 消息通知

接下来咱们将依次对这六个方面的要素进行分析与对比。

布局与导航

聚焦于内容

这款相片日志应用要有能力对两方面的内容进行良好的呈现，即展现用户的相片以及与这些相片相关的最新社交动态。在建立Metro风格应用时，咱们的第一个目标就是将原有iPad应用当中的那些与核心功能和内容没有直接关联的界面元素通通移除，例如顶部的导航栏、底部的页面指示符、标签栏等。不用担忧导航的问题，咱们在后文中会谈到如何让用户在须要的时候调出app bar。

iPad版本：

• A.导航栏
• B.内容
• C.页面指示符
• D.标签栏

Metro版本：

• B.内容与Logo

相片内容的呈现方式

两个版本都会按照月份次序来组织内容，不过对于月份的表现方式有所差别。在iPad版本中，相片会根据上传月份的不一样而被划分到12个区块当中。在Metro版本中，咱们倾向于以更加直接的方式呈现出更多的相片及社交方面的信息，使用户对内容的上下文环境具备更强的认知。

iPad版本：每月的相片都以堆栈的形式呈现，用户只能看到其中的一张图片。

Metro版本：针对当月内容，呈现更多的相片，包括标题、评论数量等信息；用户能够在首屏中浏览到更多的“高亮”内容。

将树形信息结构扁平化

iPad版本中的信息结构及对应的导航机制是典型的树形模式；在Metro版本中，咱们要使其扁平化，减小导航操做，让用户最关注的内容尽可能多的呈如今首屏当中。为了实现这一目标，咱们将去除iPad中的标签栏，将一部份评论内容直接输出到首屏。

iPad版本：

• A.相片视图
• B.评论视图

Metro版本：

• 将评论与相片内容整合在同一个界面视图中
• hub风格的设计方式，让最具相关性的内容自成体系
• 要查看更多评论内容，用户能够点击该内容组的标题，即“Recent comments”

让导航操做更加符合“直接操纵”的理念

“直接操纵”的理念可让用户以更加符合直觉的方式与内容及导航系统进行互动。在Metro风格的应用中，咱们要尽量多的在恰当的地方贯彻这样的交互设计思想。例如使用Windows提供的SemanticZoom对象做为导航控件，可让用户的操做更符合心智，更有效率。

 

iPad版本：点击导航栏中的“Years”按钮，弹出导航列表，选择某个年份进入相关视图界面。

Metro版本：在相片内容上使用双指捏合的手势，便可查看所有内容所对应的年份及月份。这种方式容许用户在任何年份和月份的内容中进行快速跳转。并且在这个视图中，月份条目使用了不一样的背景色，其中较浅的表明该月份当中没有内容，使用户无需进入下层视图便可了解这一信息。这套机制当中不包含任何“实体”的导航元素，用户能够经过与内容的直接交互操做来进行导航。

命令与行为

将与当前界面相关的控制元素放到app bar当中

当咱们从新设计那些与上下文相关的行为与控制元素时，也应该遵循“内容优先”的原则，只将那些与当前界面内容相关的控制元素放在app bar当中。这种方式能够避免用户界面被过多的功能图标复杂化，不管用户当前处于哪一个视图，他们均可以从界面底部或顶部调出app bar，执行与当前内容相关的控制行为。全部Metro风格的应用都应该支持这种交互机制，以便帮助用户创建起一套广泛适用的行为预期，提高应用及平台总体的易用性及体验一致性。

另外，能够将那些最经常使用的命令放在靠近左右边缘的地方，这样最容易被手指触摸到。

以“删除相片”为例，咱们来看看这个操做在两个平台当中的区别：

iPad版本：点击导航栏右侧的相关功能按钮，进入编辑模式，而后点选相片，做为删除等操做的对象。

Metro版本：

• A.默认状况下，app bar处于隐藏状态，使整个界面环境更加具备真实感，并使用户的注意力保持在内容上面。用户能够经过轻扫(swipe)将app bar从界面底部或顶部调出。
• B.调出app bar以后，用户能够点选界面当中的内容对象，例如相片；此时，与相片相关的命令就会出如今app bar当中。也就是说，这里具体会出现哪些控制元素，取决于用户是否选取了内容对象，以及选取了哪一种类型的内容对象。这类具备上下文相关性的控制元素一般被放置在app bar的左侧，而具备全局性质的命令则是在右侧。

契约：搜索、分享及其余

经过搜索契约使搜索体验更加集约化

在Metro应用中，咱们使用搜索契约，而不是传统意义上的那种永远会停留在界面某个位置上的搜索控件。用户能够在任何支持搜索契约的应用里持续的使用侧边charms bar当中的搜索功能，而搜索结果也会以更加符合内容自身特质的方式天然的呈现出来。

首先，咱们来看看在相片日志应用内部搜索相片的状况：

iPad版本：

• 只能经过首页导航栏中的搜索控件执行搜索
• 用户输入关键词时，搜索建议会动态输出，用户能够直接从中进行选择

Metro版本：

• 用户调出charms bar使用搜索，应用列表中默认选中的就是当前的相片日志应用。
• 当用户开始输入搜索关键词时，托盘中会即时出现搜索建议。用户提交了查询关键词后，能够看到完整的搜索结果视图。

接下来，咱们看一看在相片日志应用外部搜索该应用内相片的状况；这项功能不适用于iPad版本。这个例子演示了怎样在其余应用当中经过搜索托盘里的应用选择来实现跨应用搜索。该功能容许用户在任什么时候间、任何应用内搜索任何想要的信息。

如上图所示，用户当前处于Tweet@Rama应用的环境当中，出于某种需求，该用户但愿搜索相片应用当中全部包含“Barcelona”关键词的相片。输入了关键词以后，用户在搜索托盘中选择相片应用，使其成为搜索结果提供者，这时相片应用就会自动加载，并显示相关的搜索结果。这种方式使得用户无需手动在当前运行的应用与搜索目标应用之间进行切换。

经过分享契约与更多的人互通讯息

对社会化媒体的整合是不少应用当中的关键要素。对于iPad应用，设计师一般要对应用所需支持的社交媒体频道进行选择，例如Twitter或Facebook等，而后开发人员会将这些服务一个个的整合到应用当中。当其中某些服务的API接口发生变化的时候，开发人员还必须调整应用当中的相关代码，以确保其正常运做。

而在Metro风格的应用当中，咱们会使用分享契约。这种技术方案简化了设计与开发方面的工做，由于咱们不须要为用户有可能用到的社会化服务而将它们与每一个单独的应用都逐一整合起来。不只是社会化服务，用户还能够将信息保存共享至平台上全部那些使用了分享契约的应用，而开发者们则无需担忧外部服务的接口问题。站在用户的角度，他们能够在charms bar这个固定的地方完成有关分享的操做。

下面是一个将相片日志应用中的图片共享给其余应用服务的例子：

iPad版本：用户须要点击导航栏右侧的相关动做按钮，并从展开的列表中选择“分享到Facebook”。若是要使应用支持更多的分享服务，开发人员必须在该应用当中逐一增添。

Metro版本：

• 用户始终能够在固定的地方找到分享方面的功能，不管他们正在使用哪款应用
• 当前设备中所安装的全部支持分享契约的应用，都会出如今搜索托盘中的应用列表里，如上面大图当中的Socialite、Tweet@Rama、Notespace、PaintPlay等。
• 用户能够分享多种类型的内容，例如连接、相片，或是将信息存放在某些记事本类的应用中。
• 用户最经常使用到的服务会出如今应用列表的顶端，提高操做效率。

咱们一样能够将当前的相片日志应用经过分享协议注册到分享托盘的应用列表当中，这样就可让用户将其余应用当中浏览到的图片内容共享到相片日志应用当中了。

有关应用间内容共享的详细信息，能够到Guidelines and checklist for sharing content当中查询。

使用文件选择器从不一样的地方获取文件

在传统桌面设备中，用户能够经过文件选择器(File picker)查看本地存储设备当中的文件或路径。在移动环境中，全部支持文件选择器契约的Metro应用一样能够实现这样的操做。

下面的例子演示了用户怎样在相片日志应用中上传一张本地存储的相片：

iPad版本：用户能够在本地的相册或一些外部服务当中选择图片。

Metro版本：

• A.用户在app bar当中点击上传按钮，系统打开文件选择器界面。该界面及其打开方式在任何上下文环境中都会保持一致。
• B.点击“Files”标题，用户就能够查看到全部支持文件存取的路径。
• C.用户能够在一个路径中选择多张相片进行上传，界面底部的缩略图列表会反映出当前的选取状态。

咱们还能够进一步利用Metro应用独特的功能特性，让不一样的应用访问和使用彼此所包含的文件，例如在其余应用中使用相片日志应用里的图片。经过这样的功能，用户无需首先在相片应用中将图片下载到本地，而后再上传到另外的应用中；系统会将全部支持文件选择器契约的应用都看做是一个能够在任何地方读取的文件存储位置。

如上图所示，用户在PC Settings界面中点击“浏览”，以更换头像图片。因为咱们的相片日志应用支持文件选择器契约，因此在接下来的文件选择界面中，就会看到应用名称出如今列表当中，用户能够选择该应用当中存储的相片做为新的头像。

触控与手势

在界面边缘轻扫，调出应用内部或系统全局的相关工具栏

• 针对当前应用上下文的命令与功能，一般被放置在界面底部的app bar当中。
• charms bar隐藏于于界面右端，其中包含了若干系统全局性质的命令。
• 界面左边缘隐藏着最近使用过的应用列表。
• 从界面顶部向下轻扫，能够找到固定或关闭app的命令。

下面两张图片分别演示了调出app bar和charms bar的方法：

文件多选

iPad版本：

• 用户首先要进入一种特定的编辑模式来执行选择及相关的编辑操做，由于“点击”在一般状况下是用来加载或进入某项条目的。
• 当选择与编辑的操做结束后，要退出编辑模式。

Metro版本：

• 用户无需进入特定的编辑模式；只要在内容对象上向下短距离轻扫，就能够选中该对象，同时app bar会自动出现，显示与选中对象相关的操做功能。
• 这个手势是可逆的。这套交互模式使Windows 8在对象选取方面的效率获得了有效的提高。

双指张开与捏合

不管在iOS仍是Windows中，这两个手势在不少时候都被用做放大或缩小内容对象的尺寸。不过对于Metro应用来讲，它们还能够经过Semantic Zoom来实现内容层级间的导航。用户能够捏合某个内容对象，来进入它所在的相关内容组。不过，当用户正在以全屏模式浏览单张相片的时候，捏合与张开的手势仍是会被用来调整图片的尺寸。

屏幕定向与视图模式

面向不一样的屏幕定向方式及设备尺寸，提高布局的适应性

在iPad应用中，设计师一般须要考虑两种屏幕定向方式以及对应的界面设计方案。而Windows 8能够运行在多种设备上，包括平板和台式机。所以，咱们要考虑到显示空间更大的状况，让用户在大尺寸设备中可以看到更多的内容。网格布局可使设计方案更好的适应于不一样的屏幕定向方式及不一样类型的显示设备，例如针对纵向空间更大的设备来显示更多的当月特点图片。

iPad版本：在不一样的定向模式下，内容彻底相同，只是输出布局进行了调整。

Metro版本：竖屏模式及大尺寸设备能够利用更大的空间显示更多的内容，同时，特点内容附近的内容输出数量也会根据显示设备尺寸的不一样而进行优化调整。另外，咱们也能够为内容当中的图片制做多个版本，使它们根据不一样的显示环境响应式的输出更合适的图片。

使用快照视图吸引用户

在Win8中，用户能够将一款应用以快照的方式整合在另外一款应用中，实现多任务操做。快照视图能够有效提高应用的使用时间，吸引用户维持更长久的使用周期。经过调整二者之间的分隔栏，用户能够很容易的在当前主应用及快照应用之间进行切换。因此设计师须要考虑主应用与快照应用在容器尺寸发生变化时，依然能各自保持上下文内容的可读性。

• 相片日志应用在快照视图中输出的内容与完整模式当中的相同，但视图的布局样式进行了调整。
• 在快照视图中，用户能够经过上下滑动来浏览更多的内容。相比与在完整模式当中的左右滑动浏览方式，在这样狭小的空间中，上下滑动更加合理、易操做。

消息通知

使用瓦片呈现动态信息更新

iOS 5引入了通知中心，使得全部的通知信息均可以迅速即时的在界面顶部呈现出来，用户能够将提示消息展开为完整的通知中心面板，查看全部的消息。另外，在iOS当中，应用图片侧上方的数字标识也可让用户了解到该应用当中的内容更新数量。

而Windows 8中的瓦片则整合了通知中心与数字标识这两个方面的提示功能，用户便可以直接在瓦片中阅读提示信息，也能够点击进入应用。另外，与iOS通知中心统一化的输出格式有所不一样，Metro风格的应用瓦片容许设计师从大量模板当中选择不一样的样式。

你也可使用toast notifications向用户进行提示。这类即时信息会在屏幕右上方出现，而且会对用户在当前应用中的任务起到干扰和中断的做用。一般，在某个应用第一次运行的时候，咱们可让用户选择是否接受这种提示方式。toast相似于iOS当中出如今屏幕顶部的通知，不过在Windows 8中，设计师能够从一组toast模板中进行选择，使它的呈现方式与当前应用具备更强的相关性。

下图所示的是相片日志应用推送过来的最新评论提示：

英文原文: http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx     译者c7210  be for Web