从ios到metro-重新设计应用的交互模式

《从ios到metro-重新设计应用的交互模式》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、从iOS到Metro-重新设计应用的交互模式上周有幸玩了一会Metro的平板。单说视觉风格，仍是我的大菜，但真正用起來却不觉得舒畅，尤其是横向浏览内容列表的时候，视线不停的在X轴与Y轴Z间切换，很快感到头晕H眩，这一切似乎比瀑布流更加1X1残。当然，仅仅是个人感受；我不想这样就得出Metro中看不中用的结论。做这篇译文人致可以代表我的立场，即札I比于iOS来说，Windows这套东西确实冇很多独到的精华在里面；我想通过这样的文章加深认识，了解一些表象背后的东西。也希望木文可以给那些已经熟悉iOS,但对M

2、etro及Windows'卜板仍属于初识的朋友们一个小小的起点。接H來让我们进入正文，一篇masterchai.cn转自微软官方的案例文章。iOS是个不错的平台，人们在其中创造了各类触控优先、有趣且吸引人的应用。不过，随着Windows8的登场，设计师和开发者们乂多了一个释放创意能量的新舞台。在木篇案例当中，我们将帮助各位使用Metro风格的设计原则对原有的iOS应用设计方案进行重新构思，大家会了解到怎样将iPad当中一些常见的界而元素及体验模式转换成为Metro风格，以打造全新的Windows8应用。

3、我们将对同一款应用在两个平台中的不同设计方式进行对比，帮助各位了解怎样将你的应用与Windows8以及Metro设计原则进行完美的融合。我们将耍研究的是一款相片FI志应用，用户可以在线査看和管理他们的照片或视频。下图是这款应用的Metro版木:这款应用最初是为iPad设计的，如下图所示。从设计及体验模式的角度出发，该应用可以人致被解构为六个方面：布局和导航命令与行为契约(Contract)：搜索、分亨及其他触控与手势屏幕定向与视图模式消息通知接下来我们将依次对这六个方而的耍素进行分析与对比。布局与导航聚

4、焦于内容这款相片日志应用要有能力对两方而的内容进行良好的呈现，即展示用户的相片以及与这些相片相关的最新社交动态。在创建Metro风榕应用时，我们的第一个冃标就是将原冇iPad应用当中的那些与核心功能和内容没有肓接关联的界面元素统统移除，例如顶部的导航栏、底部的页面指示符、标签栏等。不用担心导航的问题，我们在后文中会谈到如何让用户在需要的吋候调出appbaroiPad版木:A.导航栏B.内容C.页面指示符D.标签栏Metro版本：B.内容与Logo相片内容的呈现方式两个版本都会按照刀份次序來组织内容，不过

5、对于刀份的表现方式有所差界。在iPad版本中，相片会根据上传月份的不同而被划分到12个区块当中。在Metro版本中，我们倾向于以更加直接的方式呈现!1

6、更多的相片及社交方面的信息，使用户对内容的上下文环境具有更强的认知。iPad版本：每个月的相片都以堆栈的形式呈现，用户只能看到其中的一张图片。Metro版本：针对当月内容，呈现更多的相片，包括标题、评论数量等信息；用户可以在首屏中浏览到更多的“高亮”内容。将树形信息结构扁平化iPad版本中的信息结构及对应的导航机制是典型的树形模式；在Metro版木中，我

7、们要使其扁平化，减少导航操作，让用户最关注的内容尽量多的呈现在首屏当中。为了实现这一目标，我们将去除iPad中的标签栏，将一部份评论内容直接输出到首屏。iPad版本:A.相片视图B.评论视图Metro版本：将评论与相片内容整合在同一个界面视图小hub风格的设计方式，让最具相关性的内容自成体系要查看更多评论内容，用户可以点击该内容组的标题，即“Rccczcomments^让导航操作更加符合“直接操纵‘‘的理念“直接操纵”的理念町以让用户以更加符合直觉的方式与内容及导航系统进行互动。在Metro风格的应用中

8、，我们要尽可能多的在恰当的地方贽彻这样的交互设计思想。例如使用Windows提供的SemanticZoom对象作为导航控件，可以让用户的操作更符合心智，更有效率。iPad版本：点击导航栏中的“Years"按钮，弹出导航列表，选择某个年份进入相关视图界而。Metro版本：在相片内容上使用双指捏合的手势，即可查看全部内容所对应的年份及月份。这种方式允许用户在任何年份和月份的内容中进行快速跳转。阳几在这个视图中，月份条H使用了不同的背景色，其中较浅的代表该月份当屮没有内容，使用户无需进入下层视图即可了解这一信

9、息。这套机制当屮不包含任何“实体"的导航元素，用户可以通过与内容的直接交互操作來进行导航。心作良田耕不尽，善为至宝用无穷。我们应有纯洁的心灵，去积善为人众。就会获福无边。