从iOS到Metro #8211; 重新设计应用的交互模式.pdfVIP

从iOS到Met ro – 重新设计应用的交互模式 上周有幸玩了一会Met ro 的平板。单说视觉风格 ， 是我的大菜 ，但真正用起来却不觉得舒畅 ，尤 其是横向浏览内容列表的时候 ，视线不停的在X轴与Y轴之间切换 ，很快感到头晕目眩 ，这一切似乎 比瀑布流更加凶残。 当然 ，仅仅是个人感受 ；我不想这样就得出Met ro 中看不中用的结论。做这篇译文大致可以代表我 的立场 ，即相比于iO S来说 ，W indows这套东西确实有很多独到的精华在里面 ；我想通过这样的文 章加深认识 ，了解一些表象背后的东西。也希望本文可以给那些已经熟悉iO S ，但对Met ro 及W indows平板 属于初识的朋友们一个小小的起点。接下来让我们进入正文 ，一篇与来自微软官 方的案例文章。 iO S是个不错的平台 ，人们在其中创造了各类触控优先、有趣且吸引人的应用。不过 ，随 着W indows 8的登场 ，设计师和开发者们又多了一个释放创意能量的新舞台。 在本篇案例当中 ，我们将帮助各位使用Met ro风格的设计原则对原有的iO S应用设计方案进行重新 构思 ，大家会了解到怎样将iPad当中一些常见的界面元素及体验模式转换成为Met ro风格 ，以打造 全新的W indows 8应用。我们将对同一款应用在两个平台中的不同设计方式进行对比 ，帮助各位了 解怎样将你的应用与W indows 8以及Met ro设计原则进行完美的融合。 我们将要研究的是一款相片日志应用 ，用户可以在线查看和管理他们的照片或视频。下图是这款应 用的Met ro版本 ： 这款应用最初是为iPad设计的 ，如下图所示。 从设计及体验模式的角度出发 ，该应用可以大致被解构为六个方面 ： 1. 布局和导航 2. 命令与行为 3. 契约(Co nt ract ) ：搜索、分享及其他 4 . 触控与手势 5. 屏幕定向与视图 式 6. 消息通知 接下来我们将依次对这六个方面的要素进行分析与对比。 布局与导航 聚焦于内容 这款相片日志应用要有能力对两方面的内容进行良好的呈现 ，即展示用户的相片以及与这些相片相 关的最新社交动态。在创建Met ro风格应用时 ，我们的第一个目标就是将原有iPad应用当中的那些 与核心功能和内容没有直接关联的界面元素统统移除 ，例如顶部的导航栏、底部的页面指示符、标 签栏等。不用担心导航的问题 ，我们在后文中会谈到如何让用户在需要的时候调出a bar。 iPad版本 ： A .导航栏 B.内容 C.页面指示符 D.标签栏 Met ro版本 ： B.内容与Logo 相片内容的呈现方式 两个版本都会按照月份次序来组织内容 ，不过对于月份的表现方式有所差异。在iPad版本中 ，相片 会根据上传月份的不同而被划分到12个区块当中。在Met ro版本中 ，我们倾向于以更加直接的方式 呈现出更多的相片及社交方面的信息 ，使用户对内容的上下文环境具有更强的认知。 iPad版本 ：每个月的相片都以堆栈的形式呈现 ，用户只能看到其中的一张图片。 Met ro版本 ：针对当月内容 ，呈现更多的相片 ，包括标题、评论数量等信息 ；用户可以在首屏中浏 览到更多的“高亮”内容。 将树形信息结构扁平化 iPad版本中的信息结构及对应的导航机制是典型的树形模式 ；在Met ro版本中 ，我们要使其扁平化 ，减少导航操作 ，让用户最关注的内容尽量多的呈现在首屏当中。为了实现这一目标 ，我们将去 除iPad中的标签栏 ，将一部份评论内容直接输出到首屏。 0 iPad版本 ： A .相片视图 B.评论视图 ::__ IHA CKLO G_ REMOT E_ IMA GE_A UT O DOW N_ BLO CK__ ::2 Met ro版本 ： 将评论与相片内容整合在同一个界面视图中 hub风格的设计方式 ，让最具相关性的内容自成体系 要查看更多评论内容 ，用户可以点击该内容组的标题 ，即“Recent co mment s” 让导航操作更加符合“直接操纵”的理念 “直接操纵”的理念可以让用户以更加符合直觉的方式与内容及导航系统进行互动。在Met ro风格的应 用中 ，我们要尽可能多的在恰当的地方贯彻这样的交互设计思想。例如使用W indows提供 的Semant icZ oo m对象作为导航控件 ，可以让用户的操作更符合心智 ，更有效率。 iPad版本 ：点击导航栏中的“Years”按钮 ，弹出导航列表 ，选择某个年份进入相关视图界面。 Met