从iOS到Metro - 重新设计应用的交互模式
当然，仅仅是个人感受；我不想这样就得出Metro中看不中用的结论。做这篇译文大致可以代表我的立场，即相比于iOS来说，Windows这套东西确实有很多独到的精华在里面；我想通过这样的文章加深认识，了解一些表象背后的东西。也希望本文可以给那些已经熟悉iOS，但对Metro及Windows平板仍属于初识的朋友们一个小小的起点。接下来让我们进入正文，一篇masterchat.cn转自微软官方的案例文章。
iOS是个不错的平台，人们在其中创造了各类触控优先、有趣且吸引人的应用。不过，随着Windows 8的登场，师和开发者们又多了一个释放创意能量的新舞台。
在本篇案例当中，我们将帮助各位使用Metro风格的设计原则对原有的iOS应用设计方案进行重新构思，大家会了解到怎样将iPad当中一些常见的元素及模式转换成为Metro风格，以打造全新的Windows 8应用。我们将对同一款应用在两个平台中的不同设计方式进行对比，帮助各位了解怎样将你的应用与Windows 8以及Metro设计原则进行完美的融合。
我们将要研究的是一款相片日志应用，用户可以在线查看和管理他们的照片或视频。下图是这款应用的Metro版本：
这款应用最初是为iPad设计的，如下图所示。
从设计及体验模式的角度出发，该应用可以大致被解构为六个方面：
- 布局和导航
- 命令与行为
- 契约(Contract)：搜索、分享及其他
- 触控与手势
- 屏幕定向与视图模式
- 消息通知
接下来我们将依次对这六个方面的要素进行与对比。
布局与导航
聚焦于内容
这款相片日志应用要有能力对两方面的内容进行良好的呈现，即展示用户的相片以及与这些相片相关的最新社交动态。在创建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版本：在相片内容上使用双指捏合的手势，即可查看全部内容所对应的年份及月份。这种方式允许用户在任何年份和月份的内容中进行快速跳转。而且在这个视图中，月份条目使用了不同的背景色，其中较浅的代表该月份当中没有内容，使用户无需进入下层视图即可了解这一信息。这套机制当中不包含任何“实体”的导航元素，用户可以通过与内容的直接交互操作来进行导航。