WP7的设计研究 - UCD大社区

Windows Phone app的设计过程

小气的神 — 2012-01-18 15:00:32

原文http://ux.artu.tv/?p=192
译文http://www.mdong.org/?p=2232

译者注：
原文的作者为Windows Phone Design Studio的设计师，虽然话语啰嗦，但是能够感受到许多Windows Phone设计完善过程中的细节。重要的一释疑是业内对Windows Phone开发环境封闭的以讹传讹，至少从app设计角度，Windows Phone的心态是开放的。并致力于提升产品创造的团队效率。思维方式不限于Windows Phone，同样适用于其它平台的产品参与者。

–

这里有一个我在使用的Windows Phone app的设计过程。其中许多设计过程阶段是传统的，我尝试从Windows Phone app特别的视角来阐释。

这篇文章是关于end-to-end的过程，所以会保持其高视角，并在下面的文章里详细的探索每一个步骤。比如，下周我们会从理念与概念开始，关于讲故事（storytelling）、草图（Sketching）、故事板（storyboard）与低保真原型(low fidelity prototype)。这篇文章会是系列内容的轴线。但是并不确定会不会基于反馈重新定义（refine）某些阶段，以及增加更多的示例。

图表自下向上读……

Windows Phone设计过程与其它的网站、移动app或任何设计没有本质不同。所有的设计师重视设计过程，用他们自有的方式调整、完善设计，并改变适用于每一个项目。没有项目是相同的，因此非常重要的是以指南（guidelines）理解设计过程而不是规则（rules）。保持灵活性（flexible）。

理解“设计”，设计不是按快门（one-shot）这类活动。你不能凭借一次尝试既确定设计，而是像创作雕塑作品，有一个迭代过程。艺术家拿到一组大理石，他们不会从细节开始，如眉毛、指甲或者头发。而是第一步先塑造整体的感觉，主要的体感与大块。接着第二步定义更多的特性区块，如手臂、胸、头与腿。随后有第三步、第四部与第五步。达到刻画小细节的程度需要经过许多步骤。用户体验设计同理。你不能从细节开始，最终会让你自食其果。应用程序流程（Application Flow）需要在视觉设计（Visual Design）前定义。我看到过许多类似事情的发生，他们尝试跳过一些步骤走捷径，而缺乏设计探索（design exploration）最终得到的是随后项目中的暴怒。

应用主题（App Theme）

我们从应用主题开始。这个是第一个可能产生分歧的点。我只是知道应用主题对于创建接下来的阶段非常重要。我注意到当开始app设计过程我们通常有两个选择。1，已经有一个我们想做的、非常清晰的idea；2，我们有一个目标，基于现有的API与Web Service。但两个途径在我看来都是错的。如果你有一个清晰的idea，你知道你决定了自己与团队的解决方案，但还没有通过探索验证。如果你决定创建一个app基于现有的API或者Web Service，你会最变成另外一个Twitter、Yelp！或者Foursquare 客户端或者另一个从Yahoo获取数据的股票软件！金融或者另外一个从CNN获得内的RSS聚合器……从Marketplace上搜索CNN你就知道我正在说什么。即使这些app有好的体验。相信我，他们无法突围或者为用户做出贡献。不要想APIs或者RSS Feeds。想想用户体验。所以替代的思路是”哇哦……CNN的RSS Feed是可用利用的“ ”我们如何为用户在获得最新与关联且重要的新闻的体验做出贡献？”尽快思考这些，越早为自己与团队打开一个新世界的探索。不再是RSS阅读器，现在你有一个更高的目标，史诗般的任务来帮助用户获得更多关联且重要的新闻。因为对象是宽广的，解决方案是不具体的，这才是想要的点。你保持开放，所以你会探索并拥有革新的idea。替代基于APIs的思考，而基于体验思考，如跑步体验、进餐体验、航行体验，询问自己与团队，你如何为你的用户做出贡献提升体验。注意这并不是必要地意味着解决全部的体验……它意味着只是解决X或Y部分的体验，用户趋向难以发现的地方或者你看到一个机会可以帮助用户发挥全部潜能。在随后的开发过程中，你会选择你会选择API或RSS Feed从任何源，但是起点一定不是技术解决方案。最流行的Twitter或Foursquare客户端都是成功的因为它们将体验放在第一位——而不是API。

现在如果你已经有客户端的app服务于特定的产品服务，或你正在移植iPhone或Android app到Windows Phone，请做好准备，针对主题进行重新定义（refine）。在许多的情况下，受制于预算或委托人，你需要直接跳到信息架构（Information architecture）阶段。然而真诚地说，即便由委托人雇佣你移植一个iPhone/Android app到Windows Phone，请依然做好主题、理念与信息架构的重定义准备。事实上这不是一个坏消息，一旦你进入了信息架构与交互设计（Interation Design）阶段，会得到最好的Metro设计语言：Pivots、Panoramas、App Bar、List View、Typography、布局与动画。当从其它平台移植app，你的工作会变成：1，理解这些平台上的当前信息架构，并用Metro翻译它们到正确的屏幕、内容视图与导航。基本的事情是理解当从iPhone与Android迁移时，你不能迁移UI。你迁移的信息架构。通过思考与实践，你会预防错误的转化过程……如当人们尝试从iPhone迁移返回按钮（通常是屏幕左上角的按钮）到Windows Phone……你在Windows Phone上不需要一个屏幕上的返回按钮，因为我们有一个硬件的返回按钮。所以，遵循思考“迁移IA”比“迁移UI”要更合适。

理念与概念（Ideation & Concept）

现在你有一个主题或者任务，到了为其产生idea的时间~理念与概念阶段非常有趣！——就像是在玩游戏。头脑风暴（Brain storming）的游戏，草图游戏讲与讲故事的游戏。在这个部分有三个关键阶段：1，头脑风暴；2，探索；3，合并（Consolidation）。概况来说，在头脑风暴阶段你产生了大量的idea，在探索阶段你详细分析与研究许多idea（但不是全部），在合并阶段你决定哪些idea会继续向前变成app一部分。只有少数的idea会存活。

完全自由的头脑风暴

这个阶段的目标是产生关联任务的大量idea，如“贡献酒店预订的体验”。想象力（Imagination）、妄想（delusion）与古怪（craziness）是在这个点上都是好的技巧。让自己有玩的心态，思路跳出思维框架。有需多具体的头脑风暴练习如Subject+Verbs+Objects与扩展思路的Alternate Worlds、Impossible Scenarios与In Other‘s Shoes。我们会在下一篇文章讨论所提到的技术。这些游戏你可以与团队一起参与，如果你是独立开发者你可以跟朋友一起参与。这个阶段的目标不是强迫你疑虑“你如何build或编写这个或那个”。也不是关于这些东东长什么样。它是关于产生idea的。在接下来的几个阶段，这些idea会落地执行。后面，就像我们知道的，有百万个非常好的idea，但是只有一个或者两个会被恰当执行，并且成功。

探索分析/审查/测试（Exploration Dissect/Inspect/Test Ideas）

在探索阶段你会得到头脑风暴中脱颖而出的idea，并需要了解更多关于这些idea的内容。你可以通过分析、审查与测试来达到目的。这个点idea刚刚出生，它们就是孩子，没有完全的发展或成熟。然而这些idea只是头脑风暴的一部分，也许许多疯狂的idea在头脑风暴过程中已经灭了——但是有一些依然存在。你可以肯定会发现你或团队中其它人会坚信、接受并深深爱上这些idea——他们的孩子。我冒险地说这不是好事情，但同时，你需要爱上已经确定的idea，这样你就可以把其它idea推得远远儿的。有些时候idea需要发展来完全的证明。如果你太快地放弃了一个idea，也许你会失去一个好的机会。幸运的是这个阶段我们有4个非常有用的工具，允许我们探索我们的idea并发现优秀的种子：草图、故事板、简易原型与讲故事。这些工具帮助开发人员与设计人员针对idea进行测试。

拥有草图能力可以帮助你维持更多的抽象概念。故事板可以帮助你像接近皮克斯或梦工厂动画师一样讲故事。你使用手绘与故事板展现idea的用户体验情景，如何通过app来提供帮助与做出贡献。这是一个可视化的方式。原型是一个全新世界可以探索，当前重心在简易原型。这里有几种方式：一个是通过纸张、便条、卡片与胶带建立模拟原型。你可以通过手动粘贴到画布上测试情景（scenarios）来传达交互。这类简易模型需要一个向导与测试用户。这听起来像是落伍的活动。但是它真的不是……它是非常严肃的。你会惊讶，你能在一张简易原型上用15~60分钟而不需要花一分钱，就可以收到许多反馈。在进一级的设计过程阶段不会使用简易原型，但在这个点，这是最佳选择。另外一个做简易原型的方式是使用Expression Blend（或者是Powerpoint或者其它的交互工具）。这个是Design Studio的Jared Potter第一次向我展示的复合数模技术。简单的说，你在纸上画草图、拍照、载入图像到Expression Blend，在头部的可点击区域增加透明按钮并关联导航栏。Done！他称这个是15分钟简易原型技术，我们会在下一篇文章中讲得更多。

整合产生决策（Consolidation Make Decisions）
从头脑风暴开始得到许多idea，经历自己与团队的探索……在这里需要整合，非常好的idea会脱颖而出。这是一个决定哪一个idea会进入app的过程。有不同的练习会帮助你的团队缩减列表与基于优先级排序列表。这里的目标是移除尽可能多的不明确信息。这时，idea比起概念阶段进一步进化，并引发更多的用户情景（user scenarios）或者信息情景（information scenarios）。你需要带到下一个阶段的是一个基于优先级的情景列表。

信息架构（Information Architecture）

信息架构阶段的目标是定义信息、任务与彼此之间的关系。用户所拥有的数字体验：信息与信息利用的潜力——使用信息来帮助决策、获得关于某些事情的知识、产生信息。

信息架构是一个完整的学科。信息架构的目标是制定信息规则。

在理念与概念阶段产生的用户情景包括不定型的信息，如名字、日期、价格、图像、温度范围-在信息架构阶段你会带着不定型的信息并传递为结构化的信息。一次尝试是不可能完成的，它需要经历多个过程。

我们有两个非常有用的工具可以帮助我们定义信息框架：应用程序流程表单（Application Flow charts）与低保真原型（Low Fidelity Prototyping）。

所以在信息架构进行第一次尝试，并通过创建Flow charts进行测试。这里有不同成熟度等级，主要是从任务流程到具体屏幕+内容视图+导航表单。记得经典软件工程的Flow charts吗？这就是app flow charts，它只是一个可视化术语，我们专注在用户流程（user flow）、体验（experience）与交互设计（Interaction design）。一旦你拿到一个flow chart，你就可以尝试讲述用户情景（user scenarios）的故事。你会获得反馈与idea，用来重定义信息架构，并返回完善AI文档。这时你可以反复通过创建较高仿真的flow chart进行测试。flow charts渐渐地变得详细，从简单的任务flow到屏幕展示内容视图、导航。我不称之为高端的flow charts线框图（wireframes），确切的说是低保真框架。

另外一个工具是低保真原型（low fidelity prototypes）。在这个点纸质原型依然有用，因为低成本。无论如何，flow charts会渐渐地更高保真。你需要打印这些app flow chart并把类似的放在一起（不再是草稿、而是打印材料）或使用Jared在Expression Blend的原型技术，用拍摄的原型图像替代，把app flow程序呈现在屏幕上。

在最后你会有一个独立的IA文档，包括组织化的信息、可靠的成组flow charts与基于app flow的低保真原型。

我注意到的一件事情是，创建Windows Phone Design Process chart后，它在IA文档接近35%的高度，占有同样高度的是Interaction Design（下一阶段）。这些chart不代表在项目中占有同样的时间，但是我要说它着实正确的思考了IA应有的时间。如果你明确IA，会更加游刃有余。

最近的几个星期，我们有一篇特别的文章会关于Windows Phone apps的信息框架。

交互设计（Interaction Design）

我们已经定义了信息架构，也就是说目标用户可以使用这些信息。现在我们开始针对性制作用户界面。

交互设计是什么：创建一组用户界面与用户体验元素，用来验证良好的信息架构与用户完成信息关联的任务。我们希望在这个阶段达到的效果是传递信息与任务最大化的潜力发生。即使IA可能是刚刚完善，如果交互设计不能完全执行，这时信息中发生的事情就不会完全正确地在app中体现、用户也不能完成他们想要的任务。

依照我的观点，交互设计默认是信息与任务的过滤器（filter）。它定义的不是信息也不是任务，而是一个工具。交互设计（或用户界面）是在用户与信息之间的中间人。用其它的方式描述，用户界面（交互设计的最终形式）应该是从有罪直到证明无罪，我想这个概念关联了许多Metro法则要点：信息是展示的核心，不是用户界面。它是决定一个好（坏）设计定义的重要因素，无关用户界面层是薄、无形或者笨重。我们不谈论视觉设计，只是交互设计：用户基于现在发生的关系如何面对信息与任务交互。

如果我们没有一个Windows Phone Metro设计语言可用，这时我们需要从零开始弄明白交互隐喻。在未来的文章里我会谈论如何推动Metro，并给出一些idea与如何基于Metro革新，这篇文章里会重点定义交互设计与开箱即用（out-of-box）的Windows Phone Metro设计语言。

设计模式（Design Patterns），可靠的帮助翻译信息架构到Metro控件。信息架构与任务会赋予Pivots、Pages与Panoramas以生命。信息层与架构会赋予内容视图（Content Views）以生命。信息与信息、任务与任务、信息与任务的关系会赋予导航栏（Navigation）以生命。IA文档的所有内容会翻译到明确的Windows Phone控件中。最后不会出现歧义。

让我们回顾，基于IA文档，选择Windows Phone已有的设计模式，例如：search、maps、email、playlists或people hub的Contact cards。这时，如你没有找到一个完整的设计模式，或者根本不能满足你的IA需求。那么你可以定制一个接近或者创建全新的设计模式。当定制或创建自有设计模式，你有三个好的工具：1，Windows Phone设计网格；2，不同尺寸标准的Typography来传达结构化信息；3，Metro控件。当然，这三个不是所有你可以可用的武器，但它们是最基本的。相信Windows Phone用户体验指导（UX Guidelines）会cover到你的安排。

我提议通过设计模式来设计Windows Phone app。这不是唯一的设计Windows Phone Metro app的方式。像我们前面提到的，我们会在随后的文章里谈论关于推动Metro的设计模式，但在这篇文章重心在Windows Phone Metro语言设计。如果我们明确，从我的观点，我们可以创建自有的设计模式，可能一点都不像Metro控件库只是隐喻接近（但仍然基于Metro设计法则）。

你可以在Photoshop format（ListView_PSD.psd）找到许多列表视图设计模式，全景板图（Panorama_PSD.psd）以及其它控件。我们会延伸更多的内容。

经过选择设计模式，定制并创建设计模式，你基本上设计了app。听起来很简单！其实不是，事实上只是选择了正确的设计模式，定制了它们的工作区块。我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app，我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作，我对Metro并不熟悉，我的印象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用（re-using）已有的设计模式设计整个app做出改变？是的！我印象里6个月前，在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月，许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像“如果背景不是黑色就不是Metro”的迷信不是真的。请查看Mike K的这篇文章或者Core77的Windows Phone设计辩论。

其中一件重要的事情是以不同的格式生产大量设计模式：Photoshop、Illustrator、Expression Design与XAML。现在，市面上没有大量的设计模式，所以推荐使用手机当前的内置，同时我们这边也在大量工作更多的格式将会投入使用。

返回开始，设计模式的选择、定制与创造阶段会呈现在线框图（Wireframes）。线框图是灰度图。不是色彩的！没有品牌……也没有panorama背景！这些线框图理想情况下是由Expression Design、Visio、Photoshop与Illustrator创建（提醒我们应该提供Visio格式的设计模式）。

我们已经准备转移到下一个交互设计阶段：定义动画风格与UI控件规格。实际上，这些概念会跟随之前选择的设计模式。最后，设计模式在这个语境（context）是交互设计模式，而不只是视觉设计模式。

动画风格会帮助我们基于线框图指明，会有动画出现在从A到B屏幕的转化过程（旋转风格），何时显示列表项目的详细内容（飞出飞入Continuum）。动画是Windows Phone app的重要部分，所以我们设计使用的动画风格的要点规格时会非常挑剔。与此同时，UI控件规格同样需要基于线框图，所以开发人员知道当创建一个app时，键盘类型需要基于输入的用户体验。或者当有通知（notifications），我们需要显示内容A、B、C通知消息内容的规则，通知在哪里会带你进入app。对于Loaders会发生同样的事情……我们需要一个%的loader还是一个等待光标？

在这个阶段的最后，针对完整的app，会有可靠的一组线框图，由开箱即用的定制与自主创建的设计模式驱动。这些线框图会包括动画风格与UI控件规格。准备下一阶段：视觉设计！

视觉设计（Visual Design）

目前为止，你会想：什么，到最后才有视觉设计？！。像我之前提到的，设计过程（任何事物）不是线性的。要是像我一样，我会开启Expression Design（你可能会使用Photoshop或Illustrator）我会把额外的事情丢一边并开始工作，我喜欢这样，用我喜欢的工具并开始app设计。没有草稿、没有线框图，只是漂亮或纯粹的视觉震撼！——许多视觉设计师想的就是这个味儿（就像工程师直接跳到Visual Studio开始敲代码！）

我必须承认比起一个交互设计师我更是一个视觉设计师。我肯定会依靠它看起来如何引导自己，所以我在项目的初期被视觉设计所吸引，但是我必须控制自己并记住有一个设计过程如何我跳过了，我的设计最终会非常漂亮但是不能忠实地表现app如何工作的信息架构与交换设计需求。也就是说，我们知道看起来受欢迎与我们都做过在过程的早期被客户询问发送给他们app的设计。明确开始的视觉设计是徒劳无功（虽然有些客户喜欢说要的就是这个）但是更像是“售卖设计”。

尽管我们喜欢信息架构与交互设计，为用户、商业决策制定者或市场管理者，然而一图胜于千张AI（an image is worth a 1000 pages of IA）。一组漂亮的Windows Phone app会帮助人们购买这个app与产生更多购买，给团队boss的进度报告会看起来漂亮。其实就是这样。所以当IA没有完全确定或交互设计被定义时，视觉设计引导人们在项目早期，最好的想象并最终实现。许多次人们会想这个愿景是最终的产品。但事实不是，这只是试图展示了我们方向在哪里。问题既是团队或客户信奉这个早期的视觉设计做为方向。期望应该被规定，这样在随后项目中就不会失望，因为它后于IA与交互设计，你可以完全的认识到视觉设计。

所以，现在我们有IA与交互设计明确时间来做许多有趣的视觉设计活动，像定义调色板（color palette），设计自定义图标、背景、整合品牌到我们的体验与设计live tiles。

你是否知道有一个有关设计的经典对话关于是否开发人员应该做设计？自始至终，对于这点我认为一个开发人员即使没有正式在设计方面训练可以成功的做到。信息架构是一个系统化与结构、逻辑驱动的学科。我个人认为开发人员有正确的思维模式明确IA。交互设计需要更多的体验，这是交互设计在过程中擅长的地方，但是一个开发人员沿着设计模式，我想他肯定可以做正确。这个阶段的挑战在于当前的设计模式缺乏与恰当的工具来实现方法、挑战，这增加对没有正式设计训练的人们的困难程度。最后，视觉设计阶段，我想你最好雇佣训练有素的图形视觉设计师。虽然有相当数量的设计教程与有版权的图标、图像与其它元素，但它与雇佣一个训练有素的设计师绝不一样。我希望我们可以在后面的文章，提供给开发人员许多实用的技巧，将基于素材的视觉设计元素变得更好。

Redlines and Greenlines

什么是Redlines？什么又是greenlines？！简单的问题。他们是交互体验的蓝图。就像是建筑的蓝图，你可以在上面看到楼梯平面图、侧视图、建筑正面，通过标注尺寸，门有多大、窗户有多大、墙的厚度、水管通道经过的地方、电源出口坐标、楼梯有多高、楼梯采用的材质、涂料颜色等等……在交互设计我们同样有我们的蓝图称作红线。我不确定为什么它们是红色而不是品红……但是我们想是因为红色是经常看到的颜色，容易跳出来，所以UI标识尺寸容易读。屏幕上的redlines显示了一个app不同屏幕，顶部不同成串的测量。这些数字定义了外边距（margin）、内边距（padding）、元素的大小与短暂元素如状态栏。为什么我们需要redlines？我通过Expression Blend就可以解决问题！

很久前在设计过程中我们没有Expression Blend。我知道这会引发一个很长的讨论，所以我在个系列保留了对这个设计工具的细节。我会说不管怎样，对于设计师控制UI到不论谁拿到XAML格式的UI，redlines都是最好的表现技巧。这个人可能叫做整合者，另外一个用XAML或Blend的设计师或开发人员。不论是什么情况，拿到设计与设计app的人不是同一个人。团队仍然可以工作。所以这个人需要一个方式用XAML产生UI与redlines帮助实现。通过redlines就没有歧义，但是如果这个按钮是30×150像素，距离屏幕左边24像素，距离顶部427像素，这时这些尺寸就是位置。不需要讨论。在过去，没有redlines，设计师会设计网站并转换JPG素材（不要使用JPG、只用PNG、没有压缩）给其他人产生HTML与CSS。这个过程会破坏设计，结果会与最初想象不同。Redlines表现了“契约”，一个当事人双方都同意写好的文档！我们会在未来的文章讨论更多的redlines与如何创建。

Greenlines是什么？Windows Phone设计工作室定义为触摸区域。需要按钮会说，10像素的直径，但是它们的点击区域会是20像素（便于用户点击）。Greenlines指明这些点击区域，不论它们匹配的物体大小。Greenlines与Redlines传递不同的信息。

最后（The End）

这个是一个高视角的流程总览，在下面的一周，我们会从细节开始。

下一篇：理念与概念 ideation&Concept

讨论头脑风暴（brainstorming）方法，草图（sketching）、简易原型（paper prototyping）与讲故事（storytelling）。

相关话题：WP7的设计研究源地址：http://mdchina.org/?p=602

设计原汁原味的Windows Phone应用

Cloud — 2011-12-13 22:38:09

Windows Phone面试也有很长一段时间了，其简洁的视觉风格，完全区别于iOS及Android的交互方式受到很多设计师的青睐。

目前Marketplace中的应用数量相较App Store和Google Market还是比较少的，具有平台特色的创新交互方式也没有非常成形，我们了解这个平台最简单的方式就是先按照最接近原生体验的方式去设计应用，在充分并深入理解这个平台之后再去创造更多新颖的交互方式。

下面就从这个系统所提供的最原生的交互方式出发简单分析一下如何设计一个最为原汁原味的Windows Phone应用。

瓦片（Tile）的合理运用

Windows Phone中最大的一个特点就是主页面是由一个一个方形或长方形的“瓦片”建起来的。瓦片可不仅仅是一个icon，它还能承载应用想要展示给用户的一些信息，所以合理运用瓦片可以展示的信息将会给我们设计的应用增色不少，在用户诸多的选择中脱颖而出。

最基本的，可以像系统自带的短信功能那样，提供一个未读短消息条数的数字提示。

稍复杂点，可以在瓦片中显示一些静态或动态的图片、文字信息。不过要注意一点，Windows Phone的设计原则就是简洁为主，大色块配合尽量少的颜色展示内容比较符合这个系统整体的风格，如果把瓦片设计的太过于花哨和复杂就有点背离系统设计初衷了，放置在主界面上可能也不会有特别好的视觉效果。

不仅如此，瓦片并不是一个固定的模块，系统提供了很多翻转、推动之类的切换效果，这意味这我们可以将其视为正反两面进行看待，正面延续之前所说的设计方式，主要展示应用名称、logo及一些必要信息，反面就可以灵活放置我们想展示给用户看的内容，这就给设计师提供了很广阔的空间，想放什么？尽情开动脑筋吧。不过也有一点需要注意，目前来说，瓦片切换的动作及时间间隔是开发者不可控的，所以瓦片背面放置的东西还是应该尽量以简洁为主。

Windows Phone 7.5（芒果）系统中提供了一个新的功能，就是可以把应用中的操作或内容模块发送到桌面上形成瓦片，方便用户快速进入需要的内容或操作，如微博客户端的发微博操作或者某一分组的微博内容。这就需要设计师在设计前就想好哪些操作用户可能需要快速触发，而后告诉研发同事在相应的地方设置好发送到桌面的操作。

细心的用户还会发现，系统自带的联系人功能在瓦片中是以一种很炫的九宫格的方式进行展示的，整个瓦片被拆车3*3的小块，以每一个小块为单位进行切换，还会将相邻四个小块拼成一张大图。可惜微软官方没有将这个设计权限开放给开发者，可能是考虑到主界面运行效率和整体效果的的因素吧。这是个小小的遗憾，期待之后能用到这个效果设计出比较酷的瓦片展示方式。下图所示即为九宫格效果：

在瓦片效果的使用上，USA Today就做得非常出色：模拟了九宫格试布局，正面使用icon及新闻图片的拼接图，在反面展示了天气信息，效果很好。

全景视图（Panorama）的正确使用

全景视图模型展示

USA Today中对于全景视图的使用

全景视图设计上类似于Windows系统中的多窗口事件，每个窗口中打开的可以是不同的软件。所以全景视图中可以放置文字、图片、瓦片等等所有可以承载的内容，每个页面中的内容、布局、甚至操作都可以有所不同，每个页面右侧露出的边沿恰恰构成了切换标签的最佳隐喻（见下图）。这样的特性正好对应于iOS或者Android系统应用最为常见的一级导航，所以我们在设计Windows Phone应用时完全可以大胆的将这两个平台应用的一级架构直接移植过来。

Windows Phone的设计不太推荐一个页面中出现二级标签（也是可以支持的，但是那样就不够原生，不在本文讨论范围），这就需要设计时将内容尽量扁平化，在尽量少的层级内完成相关的操作，这一般是我们设计应用时比较花心思的地方。

全景视图中每个界面中放置的内容也可以有两种展示方式，纵向展示多用于内容较多或信息流类内容，纵向理论上可以“无限长”；横向展示多用于内容量及布局固定，希望一次性展示完毕的内容，其纵向不可操作，横向可做多屏拼接。

如下图，Xbox LIVE栏目使用的即为横向展示方式（覆盖区域为栏目范围，框选区域为一屏显示范围），其他栏目使用的是纵向展示方式。

全景视图中可以模拟主屏幕中的瓦片及动作效果，不过微软没有把1*2的长方形瓦片使用权限开放给开发者，对此我们可以使用自己绘制的方式进行效果模拟。

全景视图中不同界面内容及操作不同，则其对应的功能菜单肯定也有一些区别，解决这个问题可以在界面之间切换时设置一个操作菜单收起的动作，到下一界面再次展开时显示该界面对应的操作即可。

枢轴视图（Pivot）的正确使用

枢轴视图设计上类似于Windows系统中的多任务事件，在一个软件中开启多个并列任务，每个任务的结构、布局、操作方式都非常接近。枢轴视图中内容占据全屏位置，标题位置展示之后的一个或几个页面对应的内容。这个特性可以对应到iOS或者Android系统应用的二级导航或标签切换，是Windows Phone应用中经常出现的效果。

枢轴视图中，点击上部的标签或者左右拖动屏幕均可进行标签之间的切换，每个标签下所对应的内容在结构布局上最好保持较高的一致性。

交互逻辑上的控制

之前讨论过，Windows Phone的架构要求我们在设计时尽量扁平化，尽量压缩架构的层级，但很多操作需要到三级或者更深层级有时也是不可避免的，那么尽量让用户使用尽可能少的操作就回到更高层级的交互逻辑就显得比较重要了。

方案一：合理规划“返回”

微软推荐开发者引导用户使用实体返回键而不是返回按钮进行返回操作。返回键触发的操作可以定义为“返回上一状态”或“返回上一层级”，在合理的前提下，将枢轴视图或最终内容浏览状态下的返回操作都定义成“返回上一层级”，就会大大压缩返回操作的触发次数。

方案二：直接返回主页面的按钮

如果页面跳转的层级很深甚至产生循环嵌套，不妨在对应页面的操作菜单中直接加入一个“返回主页面”的按钮，方便用户完成操作后快速回到主页面。

以上分析是基于一个比较宏观的范围，实际设计中肯定还会有很多细节方面需要不断推敲完善，也有很多实际情况需要特殊的处理方式。这些需要我们在设计的过程中深入的思考，不断的分析，最终形成完善合理的设计方案。

写的比较肤浅，如果有不准确的地方，欢迎大家指出。

相关话题：WP7的设计研究源地址：http://uedc.163.com/8534.html

Windows Phone 7设计评测报告

晓生 — 2011-03-28 13:40:46

刚入手一部HD7，已经是第五部移动设备了。如果你也已经对ios的水晶风格有了视觉疲劳，厌恶Android毫无设计感的黑底白字，WP7的Metro风格确定能让你眼前一亮。

MTK手机的大喇叭，iPhone精致无比的图标和过场动画，共同点在于对感官有很强烈的刺激，很容易被大众接受，甚至成为装X利器。而朴素的WP7没这么幸运了，小众的设计风格，过于富有内涵而缺乏视觉刺激，连铃声走的都是小清新路线。

Metro中文名为“地铁风格”，设计元素是从地铁飞机场等地的指示图标中提炼而来，经常出入这些场所的人群都是小资阶层，这也正是WP7的目标用户群。设计师们会对于这样的极简主义抱有好感，巧妙融合功能、操作与视觉形式。

解锁

iPhone滑动界面时解锁，增加界面的操作难度，防止放在口袋里误解锁，和Nokia按键手机使用组合键解锁是一个道理，功能和操作没有联系。WP7向上滑动界面，像是翻页面，满足功能的同时页面具有相应的视觉意义。

虽然界面没有iPhone那样的直观指示“移动滑块来解锁”，很容易学会WP7的解锁，强行记住Nokia组合键解锁让人心生乏味甚至有挫败感。左右手势和点击是使用触摸屏时的下意识操作，当用户看到一个界面不知道如何操作时，尝试性点击图标和滑动界面，恰好达到解锁的目的。

首页

显示常用应用程序的图标和推送的消息数，也可以将单个联系人添加为首页图标。图标只有两种样式，长按可以删除图标。

联系人图标不时有朋友头像和姓名上下滚动的动画效果，保证信息的充分展示，同时也至于让布满色块的界面看起来过于呆板，富有动感和变化。

WP7更注重效率，解锁之后的第一屏就能快速决定使用哪个应用，而不是ios和Android那样过多的应用导致漫无目的的左右移动界面，时间浪费在查找应用和查看应用是否有更新。

状态栏

一般状态栏只显示时间，点击或者滑动状态栏后显示其余内容，如wifi、信号和电量。进入电话显示信号量，进入wifi环境显示时会保留联网图标一段时间，状态栏应该是随着当前使用显示用户需要知晓的信息，或者是状态栏信息发生变化时提醒用户，只在用户需要的时候显示必要的信息。

进入全屏应用程序，如电子市场和图片，会遮住状态栏。当收到短信和搜索到wifi时，状态栏会显示具体信息，不影响当前使用，显示空间比Android更大，但没有下拉帘的操作。

Android的状态栏非常的拥挤，甚至会出现正在运行的应用程序，比如360和QQ。不得以还要状态栏滚动的动画效果，下拉帘的操作也是由于单行的状态栏无法满足操作才衍生出这样的设计，WP7的状态栏并没有给这些烦人的图标留有显示空间。出发点是优先考虑如何精简信息，而不是通过设计完整呈现它们所有。

导航标题

界面标题不但起到导航的作用，同时整合了滚动条的部分指示功能，但WP7的导航标题没有完全达到滚动条的三个功能：

当前页面是否可以滚动。WP7通过显示左右页面的灰色文字标题或者部分正文表示当前页面的可以左右滚动的。
通过比例显示界面总长度。WP7页面可以左右循环滚动，但没有明确的指示页面的总宽度。如上图标题games会随着界面滚动时相应的左右移动，但并不成比例。回到初始位置时，才意味到界面已经滚动了一圈。
当前界面所处总界面中位置。取决于第2条。

PC的滚动条可以快速滚动界面，但是由于手机的操作不便和页面显示内容有限，通常没有这样的功能。

控件

底部工具栏最多显示4个图标，点击“……”显示图标的文字说明或者更多的操作。图标易于识别，视觉上比Android更为连贯。

WP7长按输入框时划出光标，便于从字符串中插入光标，类似于ios的放大镜插入光标。而Android要靠手指的精准点击，难以控制。

长按已安装的应用程序，会在下方显示多项操作，而不是另外弹出对话框。单个下拉框的操作体验比Android和ios都要好，但是填写表单时，操作效率明显不如可以通过面板切换输入框的ios。下拉框也是这样的设计样式，但从外观上无法区分下拉框和输入框，也许这对用户来说并不重要。长按操作会有相应的进度条，表示长按一定时间时才会响应该操作，Android和iso则是靠程序响应操作之后元素变化来达到视觉反馈。

对话框通常显示在界面顶部，如单手握住4.3寸屏的HD7手机底部时，点击对话框上的控件着实不方便。五个蓝点组成的进度条让我想起Flickr红蓝原点，设计追求的极致是使用最少的元素传达完整的信息。

达到高效的方式是专注最主要的信息。尽量掩藏不必要的控件，几行字和一两个控件让你很容易知道当前应该做什么，你也不会被那些10%情况下才会用到的信息分散注意力，或者说你即使想也做不了其他事情。

排版

缺少了诸多的视觉元素，仅有图片、色块和不同颜色字号的文字，导致界面缺乏对比。由于没有分割线，有时会分不清界面元素的组织情况。

客户端T-sina的文字排版极为槽糕，满眼不协调的深蓝色的背景色块、缺乏简单的文字对齐和模糊不清的图片。WP7应该出一份基础的排版知识指导第三方应用，毕竟用户大部分时间是花在应用上，不统一的用户体验会影响系统整体。由于Flickr的风格与WP7极为相近，程序只是用来解析和呈现数据流，没有过多的交互效果，只是界面排版效果优于其他平台。

小结

现有WP7的设计还是流于形式，没有看到技术方面的突破，与Android和ios相比没有明显的优势，个人的好感仅限于其设计风格。由于还不支持截图，让我这样的截图党极为不满。缺乏应用，把玩三天就没有新鲜感了。系统版本更新太慢，三月份刚增加复制粘贴、增强邮箱、市场和wifi等基础功能，按照这个速度本年度也出不了靠谱的手机，同样价钱还是推荐买Android手机。

由于界面以色块和文字为主，绘制界面占用的内存少，运行速度自然加快，而Android运行多任务时速度明显变慢甚至导致程序崩溃。除此之外还希望能看到解决大手指问题来提升输入效率，增强消息过滤和联系人分类，现有包括了各种邮箱、Facebook和手机号码强弱联系人，查找起来非常麻烦。

由于系统的限制，呈现信息量和第三方应用可做的交互效果都很有限。高端用户对于效率的需求比较强烈，但90%的用户希望手机除了通话和收发邮件之外可以做更多的事情，需求更为多样化。除了基础应用，系统应该保证足够的可扩展性。

简单而不简陋﹣wp7视觉点滴

zhongzw — 2011-04-07 22:24:52

一直就很期待，引入了Metro设计理念的wp7的真实操作体验，现在终于如愿了。拿到测试机，首先迅速的过了一遍，第一印象就是界面简单明了，没有华丽的高光、没有跌宕的质感，真的感觉就像在公共场所看到的信息指示牌一样简洁清晰、快速、内容为主。

下面让我们从手机的第一个界面开始看起：

与众不同的解锁界面

Wp7的解锁界面是非常与众不同的。位于中间偏下位置上的时间信息是最吸引人眼球的，即利用了英文在排版设计中的优势又贯彻了一下返璞归真的视觉设计理念，将信息以一种毫无负担的展现方式给用户呈现出来。在时间信息的下面会有短信、闹钟等推送信息。最顶部自然少不了设备电量、信号等系统信息。

整个界面中没有我们已经习以为常的解锁提示，或者“锁”的提示，整个界面看起来更像是一幅画。但是在使用手机的时候，用户一点都不用担心不知道怎么进入待机界面。当用户手指触碰到屏幕上任何地方的时候，手机画面就会有一个模拟重物落地再弹起的拟物动画。

通过这样一个动画提示，相信绝大多数用户都会，尝试着往上滑动界面，那么恭喜你，你已经知道如何来进入待机画面了。显然，这样的动画提示，比任何形式的文字提示都生动、直接的多。界面简洁、干净，操作提示生动、形象且没有任何视觉负担，这就是wp7给我们带来的第一个惊喜。
当用户往上滑动画面，待机界面徐徐展现给到用户的眼前，整个过程犹如大幕拉开一般。这期间有个小细节值得我们注意，那就是解锁界面上的时间信息会随着整个画面的上升而逐渐消失。

在防止误操作造成的解锁问题上，wp7也考虑的非常周到。如果对解锁界面的上滑动作快速有力，即被系统识别为有效操作，会立即进入待机界面。反之，上滑动作缓慢，则需要将锁屏界面上滑至屏幕1/3处才会完成解锁。

简洁清晰的待机界面

完成解锁之后就能看到Wp7的待机界面了。待机界面采用了全新的内容展现和布局形式，不是千篇一律的图标也不是厚重的widget与质感的图标组合，而是采用更为抽象化的界面，大块的方块、超大的字体，让用户一目了然。

在应用图标的内容表现上也根据应用属性的不同，所涵盖的内容也不同。功能类应用，如电话、邮件等会以单色图标来展现功能，当有新消息或未接来电等，会在图标边上显示相应的数字；

信息类应用，如联系人、图片等就会以联系人照片、部分图片内容来展现。

从应用的图标的信息构成上来看，我们可以把每个图标分成三层来看待：最底层是背景图也可以是系统的色块，中间一层是应用的名称，最上面是推送的信息。

对各应用入口的编辑可以通过长按，然后激活应用入口的编辑状态，来进行位置的调整和删除操作。位置的调整可以通过手指的拖拽来完成，删除操作则是通过点击当前激活应用的右上角图标来完成。完成操作之后点击任意空白区域就可以退出编辑状态。

在待机界面向左滑屏或者点击右上角有个向右的箭头，就进入了应用程序列表。同理，在程序列表页点击左上角向右的箭头或者向右滑屏就能回到待机界面。程序列表中图标大小都为62*62px,在保证不易误点的情况下，可以尽可能多的展现列表内容。

在应用程序列表，用户可以通过长按某个应用，然后激活对其的编辑菜单从而进行卸载、添加到待机界面，以及查看热度和进行评论的操作。

画卷般的全景视图

要说wp7中的应用，就不得不先介绍一下Panorama，即全景视图。它是由Metro的引入而带来手机界面上的重大变革，它不同于以往的任何一个手机系统的用户界面。不再是让你的内容去适应狭小的手机屏幕，也不再是在不同的窗体之间来回切换。它提供了一种全新的视图，在水平方向上扩展内容到屏幕之外，来展现/集成不同的控件、数据和服务，就好像把它们排布在一张横轴的画卷上。当前可视区域所停留的部分，只是手机屏幕的大小部分，就好像画卷上的一个滑动窗口。用户所需要做的只是轻轻地在界面上横向滑动手指，这张画卷就会随之而动将你想要看的内容带到你眼前的焦点区域。

wp7中的所有应用都是采用这种架构来实现的。不论在视觉还是在交互上都是区别于以往其他任何手机中的程序的。这点相信会给用户带来更多的新鲜感

新颖的动画效果

如果说wp7的特点就这些的话，那它也不足以引发这么大的影响。除了新创的Metro理念以及panorama的全景视图外，在视觉特效上也是相当给力的。比较有代表性的是流畅的滑屏效果、层级进出之间的翻页效果以及动态的载入动画。
滑屏效果，流畅的横向滑屏是与全景视图紧密相关的衍生品。

由于采用了全景视图，所以在当前屏是可以在右侧看到横向的下一屏的一部分内容的，这也给横向滑屏的动画做好了铺垫，使得实际在滑屏操作时真的有再看画卷一样的体验。
翻页动画，在不同类型的页面中，它的具体表现形式也是有所不同的。
待机画面的翻页动画，当用户在点击一个应用之后，被点击的应用本身暂时不动，其他应用一起向外翻（向左翻）走，类似翻书，然后被点击的应用也跟着单独向外翻出。给人感觉就像打开了一扇神奇的门似地，不论是语义还是动画都传达了一种开启的感觉，很符合打开应用这样操作。

内容列表的翻页动画有三种，一种是进入文字列表项时——向外翻（向左翻）、一种是退出文字列表项时——列表项逐条向里翻（向右翻），还有一种是退出整个页面内容——整个页面一起向里翻（向右翻）。感觉上就像迎面打开，和随风消逝的感觉。

Wp7是一个款非常有突破性的系统，它带给我们的不仅仅是视觉上的冲击，更多的是设计理念上的开阔。相信伴随着wp7上的应用的丰富，它会带给我们更多惊喜。

相关话题：WP7的设计研究源地址：http://mux.baidu.com/2011/04/928/

微软的翻身仗是怎么打的？-通过IE看WP7设计

kaiwalks — 2011-04-14 16:12:46

关于WP7刚开始想写一篇全面地关于交互的文章,写着写着发现怎么也摆脱不了零散与空洞,也难怪,想表达的面太广必然挖掘的深度会变浅,最后下定决心与其在大而全上纠结不如专心解读一个应用.下面我就以移动互联网的杀手级应用之一浏览器为主线管窥WP7的设计.

应用图标：

WP7自带的浏览器是Internet Explorer,它的Logo与桌面IE的logo形态相同只不过跟随WP7的风格处理成了单色的. 下图左边的方形图标为WP7起始页的，右边的为程序列表中的：

处理后的图标在首屏的识别性还是非常好的，如下图

浏览器起始页：

点击程序启动图标进入浏览器起始页：

起始页由上至下分为四部分：状态栏，地址栏，内容区域，工具栏和菜单：
状态栏：状态栏显示手机信号、电量、时间等。WP7的状态栏与Iphone和Android有两点不同，一，状态栏并非一直存在，例如在全景视图（Panorama Application）页面是不存在状态栏的；二，状态栏上的信息不是一直存在的，例如在进入浏览器后几秒钟内就会自动消失（状态栏还在只是状态信息消失了），状态信息消失后顶部显得清爽多了，如图：

不要担心看不到状态信息，只要点击状态栏它们又都会跑出来。
地址栏：WP7的地址栏将刷新按钮放到了地址栏的左边。而且在加载页面的到时候，会在刷新的位置上显示“X“，点击取消页面加载。将两个图标放到了一个位置上，这种做法在其他平台上倒是有，但是放到地址栏的左边还是第一次。
内容区域：WP7的页面浏览和Iphone一样，拖动到顶端再向下拖动时页面整体会被拉下来，有所不同的是WP7增加了页面被挤压的效果，表现上更加生动了。

工具栏与菜单：工具栏部分的处理也很有特色，中间部分是三个非常醒目的图标，分别是加入书签、书签、以及多窗口，稍加注意就会发现，在工具栏的右侧还有三个“小点“，点击就会发现它是菜单项的入口。点击就会看到从工具栏下面升起的菜单项。

浏览器里菜单项分别是：前进、分享页面、查找页面内容、添加到主屏以及设置。从菜单项的安排上可以看出，工具栏部分是将最常用的放到工具栏上比较明显的位置，便于用户的操作，而将前进等不常用的功能放到了相对弱一些的菜单项里面。将最简洁、明了的界面呈现给用户。WP7的菜单策略优于Android，WP7没有硬件菜单键，如果有菜单项则屏幕底端出现工具栏并且会有三个点示意，如果没有则不会出现工具栏，这样的策略有助于用户对功能的感知，Android当中用户是不知道界面是否包含菜单的。

前进后退：

虽然IE没有在工具栏上放置前进后退按钮，但由于前进后退是浏览器的必备功能，此处把它拿出来单独做分析。
WP7有硬件返回所以选择不在工具栏上放置前进后退（后退由硬件承担，前进隐藏在菜单中），这样的设计在Android自带浏览器中被证明是成功的，然而在IE中却存在问题。
先看Android自带浏览器的返回策略：

如图在“浏览页面b”点击主屏键回到起始页后再进入浏览器回到“浏览页面b”，此时点击硬件返回会在页面内后退，后退到头不能再后退时返回起始页。这样的策略虽说没有按照用户的来路返回，但能够满足用户在网页中后退的需求并且也不会觉得奇怪。
再看IE的返回策略：

同样的情形，IE的处理策略与Android不同，在“浏览页面b”时点击硬件返回回到了起始页（按照用户来路返回），再次点击硬件返回回到了上一应用“应用一”（没有按照用户的来路返回）这样就有一个严重的问题：用户一旦回到起始页便再也不能后退到之前浏览的页面！（旁白：虽然都是硬件返回但WP7的策略与Android不同，Android到起始页后便不能后退了，WP7回到起始页后依然可以后退）；从这一点也看出了硬件返回不好的地方，返回功能虽说强大但兼顾多种职责时也难免混乱。

网址输入：

分析完起始页，我们要输入网址浏览了。
点击地址栏会弹出键盘，同时内容区域蒙灰，这些都与主流平台一致，WP7甚至沿袭了Iphone的习惯把访问按钮放在了键盘上。

WP7的自带键盘交互上也没有创新的地方，不过在视觉上做了简化，试用后效果还是非常不错的。

内容浏览：

由于这款浏览器不支持Flash和HTML5也不支持微软自家的Silverlight，页面展示效果不尽如人意，百度新闻和hao123的HTML5效果都无法展现。
接下来我们看看IE的横屏是如何处理的？
IE对横屏也做了减法，在横屏状态下不存在“状态栏”、“地址栏”以及“工具栏和菜单”所有的屏幕区域均用来展示内容。如图：

补充一点，WP7系统下横屏的设计原则是应用可以选择是否保留状态栏与工具栏，如果保留则页面布局如下：

图中状态栏与工具栏的位置与形状不变，只是图标与文字掉转了方向。

接下来我们看一看IE的其他功能：

多窗口

WP7的多窗口没有任何新意，页面甚至简洁到有点粗糙：

添加书签：

添加书签页面视觉风格和WP7是统一的，页面布局很传统。

书签和历史页面：

书签和历史列表的表现形式相同然而他们本身又不属于同一内容，因此此处使用了Pivot Control页面类型而非著名的Panorama Application。
可以把Pivot Control理解为Iphone和Android的Tab在WP7中的变种，页面分为四部分：状态栏（信息已隐藏），标题栏（由于书签和历史没有一个统一的名称概括，这个页面省略了标题），Pivot ，页面内容。Pivot Control最大的特点是可以左右滑屏切换页面，并且可以循环滚动。
在书签页面可以长按书签列表弹出长按菜单“编辑”“删除”，长按出菜单沿袭了Android的交互。

在历史页面点击清空按钮弹出确认框，在WP7系统下，确认框和Toast都在屏幕顶部。确认框如下图左，Toast如下图右，WP7中的Toast与Android不同，WP7中的Toast点击会去相应页面。

这里对历史有个小建议，目前的历史列表太长看起来很费劲，可以参考WP7 People中对联系人列表的索引对历史信息做索引。

通讯录列表蓝色的方块是字母索引，点击后可以展现所有的索引字母，如下图：

点击相应的字母后列表就会定位在该位置。WP7的通讯录索引方式直观并且效率高，是WP7系统设计的一大亮点。

页面查找：

最后，我给大家介绍一下WP7 IE的页面查找功能，见下图：

输入内容后若无结果则弹出提示，见下图，界面很清新，我尤其喜欢那个“No results”非常优雅的提示。

有结果的话进入查找结果页面，

在查找结果页工具栏变成了“上一个”“下一个”，虽说界面简洁明了但使用过程中我遇到了一个的问题：在第一次使用时我不知道如何从查找界面退出。界面上没有一个退出的入口，我迷茫了，经过多次尝试我总算发现硬件“返回”可以退出。

我是尾巴：

WP7确实让我眼前一亮,不是由于它强大的功能,不是由于它华丽的界面,也不是由于它的效率有多高,而是由于它回归自然符合直觉的界面交互.WP7的主屏乍一看像粗糙的老年手机,单一的色块,超大的点击区域与提示文字,不过很快我就体会到了它的优点:简单,直观, 信息外漏,易于点击,使用时没有任何心理负担.Windows Mobile一直被人诟病过于复杂, Windows Phone终于返璞归真走向了另一个极端,而这或许才是移动端最需要的.
不过WP7刚发布不久，仍存在很多需要优化的地方，比如设置等页面中的界面元素过于简单，不易区分出什么是导航什么是控件什么是内容。

相关话题：WP7的设计研究源地址：http://mux.baidu.com/2011/04/894/

Windows Phone 7 界面设计与交互指南第二版中英译本

CDCer — 2011-05-13 10:33:58

自微软揭开Windows Phone 7 以来，已经受到外界大量关注。其与众不同的Metro设计风格使它个性十足。而诺基亚与微软的合作也让大家拭目以待。

去年微软发布了第二版Windows Phone 7的界面设计与交互指南。笔者本以为这只是对此前发布的CTP（微软内部的预览版）版本做了些许补遗，于是打算快速做一个中文增订本。可是入手以后才发现这次的第二版增加了大量新内容，并且对之前的内容做了大幅修改。

于是两周之后，这本全新的中英对照的Windows Phone 7设计指南才得以问世。本指南详细介绍了Windows Phone 7基于Metro的设计哲学，界面框架和元素，控件，文字运用，以及其他与设计有关的方方面面。笔者还对其中出现的一些较为冷僻的概念悉数做了简单介绍以方便大家快速理解。相信这本指南对于未来我们在这个新平台上的产品设计有着极大的帮助。

现将它在此与大家分享，若有翻译不详之处，欢迎指正！

下载地址:
http://cdc.tencent.com/?download=UI_Design_and_Interaction_Guide_for_Windows_Phone_7

相关话题：WP7的设计研究源地址：http://cdc.tencent.com/?p=3834

WP7交互特性浅析及APP设计探究

maczheng — 2011-10-28 17:05:44

Windows phone7是无线领域的新生力量，但是迟迟没有进入中国市场。Mango（注意WP7和mango不是一个概念）的发布带来了中文的操作系统，也让人们看到了该系统的无限可能。在此，我结合自己在进行相关应用设计的经验以及自己对WP7系统认识和理解，浅谈一下这一特别系统的交互特性。

本文索引：

涅磐重生的WP7（以及它的历史简介）
WP7对比iOS和Android
WP7设计风格
WP7内容和结构框架及特有名词解释
WP7交互特质分析
WP7应用设计建议

（一）

什么是WP7？

Windows Phone 7是微软发布的一款手机操作系统，它来自于微软但是和之前的windows mobile系统却截然不同。可以说微软的操作系统应该大致分为两个时代：windows mobile时代和windows phone时代。

Window mobile时代

十年前一个基于windows ce的移动智能系统被开发出来，这就是windows mobile的原型版本。Pocket PC发布, 代号Rapier(双刃剑),发布于2000年4月19日，这是一个里程碑的事件。这也是后来被称为Windows Mobile的操作系统的首次亮相。
Windows Mobile 2003的原代号为”Ozone”(臭氧),发布于2003年6月23日，是第一个版本的Windows Mobile
Windows mobile 6.5是windows mobile时代的最后一个作品，但其根本上的，研习PC上严谨但死板的操作体验，终于在IPhone和Android的打击下，变得不堪一击。微软亟需一次蜕变。

WP7时代：

2010.2.15微软在全球移动通信大展上公布Windows Phone7
2010.10.11微软正式发布了WP7，并同时宣布首批采用WP 7的9款智能手机
2011.5.24微软正式发布WP7.1(或称7.5代号Mango)，表示Mango的三大要素是“通信、应用与网络”。
2011.9.16微软正式在台湾地区推送Mango
据称，在接下来，或将推出应用于中国大陆地区的操作系统Tango以及代号Apollo的windows8操作系统。

Windows Phone 7.0完全脱离了旧构架，一个未完工的系统，这大大影响了其体验的评价，尤其在中国。Mango带来了500多项改进和创新，当然还有完美的中文支持，基本形成了一个比较完善的手机操作系统。

WP7制定了硬件最低标准，这是为什么呢？WP7的目标是为多方手机生产商提供服务，所以不会像iPhone一样，在硬件上十分标准一致，但是其对本硬件都有“最低需求”，这保证了其不至于像android那样出现碎片化的杂乱场面。

屏幕	800×480 WVGA，支持多点触摸（最少4点）
硬件按钮	WP7设备至少要具备3个按钮：后退，HOME键，搜索
处理器	Qualcomm Snapdragon MSM 8×55（主频1GHz）或MSM 7×30（主频800MHz） CPU（支持DirectX 9）。
内存	至少512MB
内部存储	最少8GB
外部存储	扩展大于等于16G
无线	WiFi、蓝牙、A-GPS、FM
摄像头	至少500万像素，有闪光灯
其他	加速度感应器、指南针、亮度感应、外部键盘（可选）

目前WP7阵营的支持厂商：三星、LG、HTC、诺基亚、宏碁、富士通、中兴等。毫无疑问，微软和诺基亚的合作是最应该被人们所重视的伙伴。

WP7, iOS, Android

毫无疑问，iPhone拥有着最庞大的APP资源，其现在的app数量是WP7的10倍以上，比开放的安卓也多出很多。其在品牌价值上的优势也不可忽略，用户对于iPhone的认可度非常高。然而，作为只专注于一台手机的策略，其在保证了最优手机硬件配置的前提下，也让用户缺少了更多的选择，如何能更加个人化个性化，也是选择iPhone时不得不思考的问题。再有，iPhone的体验设计从出现至今已经延续了快4个年头，但是我们没有看到其在UI在交互方面有多少重大的突破。这里我弱弱的问一句，大家没有觉得iPhone的UI已经有些过时了么？这一点，我们至少可以从现在app各种不拘规范的设计上看出一些端倪。

Android的优势在于开放，它应用于不同的硬件生产商，允许开发者深度开发不同的ROM，给用户带来的很多惊喜，这也让他的设计体验与时俱进，不会落伍,并满足用户多元化的需求。然而android也受制于自己的开放性，开放带来的无论是硬件还是系统的碎片化，给用户给谷歌给生产商都带来了很大的困扰。

WP7作为一种全新的体验模式，给用户带来了跟多的惊喜（当然并不只是惊喜），相信会被越来越多的用户所接受。在硬件方面则取了两者之长，它利用自己自身系统的特点，既提供给了生产商嵌入自己特色应用的入口，又保证了用户可以进行最快速的系统升级等服务。个人认为在体验方面，WP7是超前的，他有一个高端的外表，也有很多体贴的细节设计。另外在目前的操作系统中，WP7的系统优化应该是做的最好的，很低的配件就可以达到非常乐观的流畅度，这一点是其他系统不可比拟的，也为WP7平台适应不同价位段市场提供了很好的基础。另外WP7的进行的本地化推广战略，也是未来手机系统的一种趋势。但是其推出时间稍显滞后，新系统必须获得足够多的用户接受，而WP7的入门稍显困难，这一点也很有可能把它带入困境。创新的东西总是会带来挑战和风险。

我不赞同说WP7前景不被看好是因为用户没有任何理由放弃安卓和IOS，当然我也不赞同说WP7会打败IOS和安卓。未来的智能手机市场，不会出现一统天下的情况，只会是群雄逐鹿，此消彼长。不可能说一种或三四种操作平台就可以满足所有用户的需求，因为用户的需求是无穷尽的，而创新也是无穷尽的。

（二）

“流畅、干净、周到、开阔、非常个人化，而且未完工”

这可以说是在体验了windows phone7.0系统之后我的感受，而mango之后恐怕要把最后一条去掉了。要谈WP7我们恐怕总是不得不说这样这样几个特有名词：”Metro”、”Live tiles”、”panorama”、”pivot”、”Hubs” 等等。

WP7的视觉设计风格：Metro

WP7的UI是基于一个叫Metro的内部项目。灵感来源于机场和地铁的指示系统。

三种常用元素：

明显的色块
象形的图形
简短的文字

五点原则：

干净，轻量，开放，快速
要内容，而不是质感
整合软硬件
世界级的动画
生动，有灵魂

当然仅仅metro是不够的，图片加图形或文字的形式也是WP7的主要视觉风格之一

目标用户：

WP7 系统定位的目标用户是：忙于私人和工作事务的高效能人士。针对此类目标用户，WP7系统在提供给用户的使用上注意以下几个问题：

个人化–用你的方式去过一天
关联性–你身边的人，你周围的环境
连接性–你自己的东西，你自己的思考和关心

Wp7的交互特性：

lock wall惊艳开场：

WP7的锁屏界面由一张可更换的墙纸和若干提示信息构成，仅有时间信息和状态栏是必然存在的。整体的视觉风格非常简单轻量化。第一次点击，墙纸会做上下运动，带来了很好的使用引导。用户根本不需要关心手指点触的位置，只需要轻轻向上滑动超过1/3就可以完成开锁任务，墙纸会像大幕一样拉开。相比iPhone来说更加简单，整体视觉感官上也更加舒适。

WP7的结构框架

Start view

用户自定义快捷入口，可以是APP，可以是某个文件，可以是某个集合，可以是某个订阅,你可以“pin whatever you want”

App list

所有app的集合，mango增加了快捷检索和搜索

Panorama

适用于多功能整合的综合性app,原生系统用它来实现了自带的5个hub:ZUNE,PICTURE,LIVEBOX,PEOPLE,OFFICE,MARKET PLACE

pivot

适用于内容丰富，但是功能结构不是很深的app或做app的子层级:原生系统用它来实现了短信\日程表\邮箱\设置

list

适用于内容和功能简单的app或做app的子层级:原生系统用它来实现了通讯录

Tools

适用于功能比较纯粹app或做app的子层级:原生系统用它来实现了闹钟\计算器\相机\浏览器

下面将就几个WP7特有的名词进行解释。

Start sreen

Start sreen 是用户进入后直接面对的第一屏，也是在任何情况下，点击物理HOME键即可回归的主屏。

它的主要组成元素只有一种，就是Live tiles。其本质类似于PC 操作系统的快捷方式，但是承载的信息更多，更加动态，也更加自由和个性化。

Metro风格的指向箭头会把用户清楚的引导向APP list。另外就是被弱化功能的状态栏。

小瓦片大智慧—-live tiles

Tiles（瓦片）其实是一种快捷方式和推送机制的结合体。它是实时的，动态的，内容丰富的。这个词汇可以拆分成两个单词：live和tiles,Tiles可以是什么呢？

它可以是一个原生的APP快捷方式+实时的更新信息提示
它可以是一个第三方应用的快捷入口
它可以是某个联系人的快捷入口
他可以是一首歌的快捷入口
一个列表或者榜单的快捷入口
一个游戏的某一关，一个特别关注的微博，一个相册

似乎任何手机上的信息，只要用户有需要，只要我们的app上给用户授权，都可以在Start screen有一个入口。这样深层次的定制化逻辑，给用户带来了更加个人化的使用体验。

Live tiles的表现形式其实也是比较多样的：

他们都是tiles，为什么会有这样多的差异？其实他们的结构都是相同的。一个Tiles（瓦片）是由正反两个面构成的，开发者可自行选择是否全部采用。

正面：

一张底图（可以是图片或图标或图片加图标）

标题

更新通知

反面：

一张底图（可以是图片或没有）

标题

内容

Tiles正反两面的元素，开发者自行进行选择元素的存留。加之背景的差异，瓦片在视觉上的差异化，使得整个Start screen显得不会呆板平淡。

动画形式：

翻转：

平推：

Tiles的功能除了提供入口之外，还担当着更新本地动态，显示推送服务的角色。Tiles上的背景，和反面的内容都是可以实时更新的，正面和反面可以通过两种动画进行切换，在加之更新提示，使得tiles出色的承载了更多的信息，同时给系统带来了灵魂和生机。这也是WP7系统一种特色的通知形式，Tile Notification。

Tiles（瓦片）让用户拥有了更多的个人化个性化的定制空间，同时也给用户提供了更深层次的快捷入口。动态的推送提醒机制，各种随时而动的小动画，可以让用户第一时间知道最新的变化，也为整个系统带来的生机和灵魂，同时为更多信息的承载，提供了条件。WP7希望用这样方式达到快速、个人化的目的，而我们在做相关APP开发时，也可以充分利用这一特性，给用户带来惊艳快速的体验。

HUBS

WP7在功能上对整体结构进行了整合和划分，采用了六个全景HUB分别是：

ZUNE—影音
PICTURE—图片
LIVEBOX—游戏
PEOPLE—社交与通讯
OFFICE—Office工具
MARKET PLACE—市场

另外也给厂商提供了第三方HUB入口，如: HTC HUB。

HUB不是一种单独的应用那么简单，正如其名字一样，“集线器”“枢纽”他更多的展现的是一种纽带的作用，重视与其他程序综合化得处理。使得户对某一类信息进行处理时的行为是连续的。每一个HUB都可以在其应用中连接到其他的app。WP7系统及追求使用操作的流畅，同时也追求信息流的流畅。以music+video为例，用户可以直接在这个HUB中搜索相关的app应用，然后安装。用户也可以直接从HUB里面相关的app列表，链接到相应的app进行音乐的其他操作。

Panorama（全景视图）

滑动的世界—流畅的不会迷失的导航极其扁平的信息构架,WP7是一个滑动的世界，他会引导用户尽量通过滑动去切换去导航。全景视图是WP7特有的交互形式之一，它一般应用于app的第一层级。画卷式的操作形式，既给用户带来了方便流畅的操作体验，也给APP本身带来了更宽广的空间。

全景视图下原则上是支持所有控件的。再加上这个视图本身的广阔的空间，为这里提供了无限的可能性。上图是QQ音乐mango1.1版的全景布局。它不仅让用户在滑动中就可以完成一级导航的任务。由于其独特的空间特色，可以安排更多的内容，使整个信息的构架更加扁平。所以其适合应用于结构关系比较复杂的APP。

全景视图的空间结构示意

全景视图的背景是可更换甚至可随机变化，这为我们免去了做皮肤的烦忧，而且给用户带来了更多的自我发挥的空间和个性化的体验。

使用全景视图注意事项

虽然全景的扩展性很强，但也要量力而为，过多的View不仅带来了APP的运算压力，影响流畅性，也会增加用户导航的操作难度，甚至让其迷失。此处建议3~5个。
同时也要注意每一个view之间的视觉差异，避免用户迷失其中。
另外，杂志/画册是很好的参考物，尤其是在排布和UI方面。

Pivot（枢轴视图）

Pivot是WP7比较创新的一种页签的操作形式，由标题，页签和内容组成。滑动内容和页签都可以进行页签切换操作，同时也支持点击直接切换页签。

滑动的魅力是强大的，用户不用去思考他的手指要点击哪里，会不会出现误操作之类的问题，他只要轻轻滑动页面，就可以轻快流畅的到达到要去的地方。减少停顿，让行为连续起来，再一次体现在系统的设计中。与全景视图相比，PIVOT更加注重体现内容，而不是结构，所以其适用于结构关系比较简单，但是内容比较丰富的APP，当然其也适合做全景页面的下一层级使用。

但是并不是完美的

Pivot的形式虽然用滑动的操作给用户带来了新颖和快捷的操作体验，但其页签的循环和变化在很多情况下却也容易让用户迷失其中。在设计的时候需要谨慎采用，尽量减少pivot的页签数量，并且不能出现pivot页面下继续出现pivot的情况。

在QQ音乐上，我们的解决办法是在全景视图下就给用户预设pivot中每一个页签项的入口，这样可以让用户以最快的速度到达他的目的地，同时也保留了其在pivot下切换页签的权利，既快速到达，又保存了行为的连续性。另外，在使用PIVOT的时候需要用字体大小和颜色来引导用户，使其预知哪些是可以点击的，哪些是导航的，其实这是整个WP7系统要注意的问题。

在对一些WP7的交互特性进行了解释和分析之后，这里笔者也总结了一些系统的特质。

一、永远的开阔：去边界化设计的极致体验

去边界化的设计遍布了整个WP7系统，这是一个全新的尝试。在WP7系统中，我们基本看不到在其他系统上随处可见的各种栏：标题栏，状态栏，工具栏…Bla Bla…所以，我们看到了一个更加广阔的视野，更加舒适的Screen。上图是同一个页面，在WP7和IOS上的对比，很明显，WP7的视野更加开阔，整个屏幕都是风景，而IOS则让人觉得看到的是一扇窗户中的风景。当然这样做也是有足够的风险，用户的识别性降低了，功能区域的划分也不明显。WP7的解决思路就是尽量让用户看到的都是可以点击的，用字体大小、颜色来引导用户去区分目标的属性，目前来看，本人还是可以接受并习惯的。

二、连接一切：完善贴心的提示系统

WP7的提示系统有很多种，不同的场景应用不同的提示系统，除了之前介绍的Tile Notification，这里的将给大家介绍一个最普通Toast Notification

WP7的toast 跟平常情况下的toast基本差不多，展现形式如图，但WP7给他加入了更多的可控因素：点击toast直接进入相应的应用，或者划开toast不在意。在IOS5上，苹果也采用了类似的形式。这样的提醒既没有干扰到用户的正常使用，又方便的给用户提供了专场的出口，可谓贴心，而且不知不觉把应用都连接了起来。

三、充满空间感的动态世界：空间层结构–动态、动画与等待机制

WP7的动画是一大特色，同时也是充满了空间感。而这一点在设计的时候最好给予关注，“让用户把等待变成一种享受”

四、减少输入的快捷体验：强大的本地检索

WP7的本地检索，既有分类的作用，又可以达到快速的检索，而且具有很好的扩展性。尤其是对于分栏项目很多的页面设计，我们可以从中得到很多启发。

五、扬长补短、语义明确：创新的工具栏

在iOS或安卓上toolbar的处理一直让人头疼的一个问题是：单纯用图形化的图标，用户会迷茫，使用图标加文字，会浪费空间，于是经常两难。而WP7则秉承他开拓空间的传统，使toolbar有了一种更新颖也更贴心的展现形式。正常状态下，toolbar为单纯的图标然后又一个提示用户点击的“…”，或者只有“…”，这里放置的图标是用户最常用和最容易识别的功能。当用户对图标不理解的时候点击工具栏“…”，工具栏会拉起，显示图标的文字解释。工具栏图标最多可以放4个，当有更多，或者不常用或者用图标难以表达的功能，则以菜单的形式至于图标下方，做隐藏，点击“…”时，上拉弹出。

WP7精神

注重程序之间联系与转化，无处不在的快捷入口和操作性更好的提示系统，滑动为先的导航操作，让用户的使用行为更加连续顺畅，更少的停顿和思考。
各种各样的个人定制，让整个系统更加自由，个人化，个性化。
扁平的信息构架，简化操作层级，更加直接，快速。
去边界化的视觉，让用户的视野更加开阔，使用感受更加舒适。
充满变化与动态，实时的告诉你你的系统是活的，有灵魂的，并且正在发生着什么。

WP7应用开发中交互设计和UI设计的几点建议

轻量化趋势（去边界）
怎样扁平信息
怎样开发空间
减少用户的思考,不停顿
手势的高级化：点击更多→滑动更多
用WP7的思维去认识这个平台（社交、联系、快速）
流畅轻量为先
给用户更多个性化空间

结语：

WP7的意义不在于它在市场上能否会影响甚至击败苹果或者安卓，而在于在体验方面他确实进行了很多前卫而有意义的尝试。

还是那句话，未来的移动互联必然是多元化的诸侯纷争的格局，我们应该对更多新的东西给予宽容和机会，因为他们确实能给我们带来惊喜。