Windows Phone 及 Metro UI 设计讨论
openkk 13年前
<p id="logo">微软最新的移动操作平台为Windows Phone提供了全新的内容组织方式和不同的用户体验，在此基础上，Windows 8 也将采用同样的Metro设计原则。与以往的侧重点不同，Windows Phone更注重于用户的社交生活，尤其是针对那些生活中离不开社交网络的用户们。</p> <h3>那么，作为设计师要关注些什么呢？</h3> <p>首先，这是一个全新的平台和用户界面，因此，我们有更多的空间为之提供更好的创意。Windows Phone目前正处在一个上升通道内，对设计师来说，也是一个全新的挑战。我们需要更多的探索来学习如何为用户提供更好的体验。</p> <p>其次，Metro是一个我们不可忽视的新兴设计领域。作为Windows 8的界面基础，Metro在今后会有更多的跨平台特性，不同于当前的手机、平板、电脑界面各自为政，Metro今后会为用户带来更加一致的操作体验。尤其 是在微软与诺基亚的携手之后，拥有Metro界面的设备将拥有不可忽视的市场地位。</p> <h3>界面设计的新定义</h3> <p>Metro界面的出现源于<a href="/misc/goto?guid=4958322448460346807">typography in way-finding design</a>（路标指示系统）带给Windows Phone开发团队的灵感。在去除所有无关元素后，内容（标题或文本）成为界面表现的核心，明显区别于其他传统界面：传统界面消失了，内容取而代之。在此基础上，实时内容被直接显示，用户直接与内容互动，减少了交互层级。</p> <p><a href="/misc/goto?guid=4958322449433616716"><img title="Grid Systems" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/36a10e34f9942e00e82ddb534b3de313.jpg" width="500" height="350" /></a><br /> 图形设计中的网格系统<em>, by Josef Müller-Brockman</em></p> <p>Windows Phone的界面系统来自于先锋图形设计师 <a href="/misc/goto?guid=4958322450229406535">Josef Müller-Brockman</a>：构建于基本背景之上的纯文本、纯色块。而图标不再扮演传统界面中那种重要的角色了，只用于针对内容的交互，大多是为对内容的定向和导航提供引导。</p> <p><a href="/misc/goto?guid=4958322451036172701"><img title="Clean design and typography, example from Cocktail Flow and Fuse" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/555ce19a69667e295d4c5957963b21a8.jpg" width="500" height="425" /></a><br /> <em>典型简约设计&文本表现, 参考来自 <a href="/misc/goto?guid=4958322451832185896">Cocktail Flow</a> 和 <a href="/misc/goto?guid=4958322451036172701">Fuse</a>.</em></p> <p>所有这一切变化带给用户一种怀旧感和制图感，这一切看上去就像一张地图，只需清晰的文字标注，就能明确的告知用户想往哪里去，能往哪里去，以及如何到那里去。其他的视觉元素都是浮云。</p> <h3>一套全新的内容化网格</h3> <p>Metro设计需要更严格的组织规划，参考一下地铁线路图吧。在移动应用的环境下，信息内容提供者需要更强的表达能力，因为在图形元素都被剔除的情 况下，网格所展示的信息就是内容本身，所以，当用户在扫视界面布局的时候，他就已经在阅读内容了。同时，设计师需要选择一些重点的元素来建立阅读路径，错 误的元素选择会让用户迷失方向，不知如何才能找到他们所需要的内容。</p> <p><a href="/misc/goto?guid=4958322453360379034"><img title="Subway Map" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/03135d07ca7dd9805c7107235039f3d2.jpg" width="500" height="350" /></a><br /> <em>米兰地铁线路图 (图片来自: <a href="/misc/goto?guid=4958322453360379034">Wikipedia</a>)</em></p> <p>内容的结构搭建需要遵循严格的等级规范，并且基于你想推送给用户何种信息。因此，你首先必须确定你的目标用户群。想要开发一个人人适用的应用是不那么现实的。</p> <p><a href="/misc/goto?guid=4958322454885198066"><img title="Flipboard" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/2861bed642a85e65d68eb7d2a5ed8b6e.jpg" width="500" height="366" /></a><br /> <em><a href="/misc/goto?guid=4958322454885198066">Flipboard</a> 内容即界面的典型代表.</em></p> <p>Metro界面的目标就是期望帮助用户能够更快的确认是否希望能够深入的阅读内容以及如何深入。类似Flipboard这种电子杂志，就是Metro界面的经典范例。</p> <h3>用以组织内容的界面元素</h3> <p>Metro界面提出了几种新概念的内容组织元素（或称控件？），主要包括: <strong>“panorama”、”pivot”以及”Live Tiles”。</strong>如何选择，取决于应用的目的和你期望用户阅读内容的方式。以下是关于这几种控件的简要介绍：</p> <h4>Panorama</h4> <p>正如其名，全景模式为用户提供了一个全面概览内容的最佳方式。当用户打开应用，所有的内容都展开在一张全景图的不同区域上，通过拖拽，用户可以一览应用的全部内容。Panorama利用文本和图片创造出一条内容衔接的路径，视觉上让用户立刻直观的了解到链接的内容。</p> <p><a href="/misc/goto?guid=4958322456426847979"><img title="Example of Panorama, FeedTso" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/c7441c401cb6be6fc83884547bc77922.jpg" width="500" height="311" /></a><br /> <em><a href="/misc/goto?guid=4958322456426847979">FeedTso</a>, panorama样例参考.</em></p> <h4>Pivot</h4> <p>Pivot利用逻辑排列将元素整合，将信息分解放入各类目录和列表，从不同的维度展现相关内容，同时进行相应的操作（类似标签页tabs）。</p> <p><a href="/misc/goto?guid=4958322457958544556"><img title="Example of Pivot as tabs, 4th and Mayor" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/dc8e86c72c0a84750a07aef6a0630112.jpg" width="500" height="425" /></a><br /> <em><a href="/misc/goto?guid=4958322457958544556">4th & Mayor</a>, pivot样例参考.</em></p> <h4>Live Tiles</h4> <p>Live Tiles是一个等级严密的结构，由内容概要开始，逐级深入，级别越深，内容越详细。下面的样例中，Live Tiles用来显示当前的天气状况。如果用户只想了解当前天气的基本状况，那么他们并不需要去打开应用，因为基本信息已经完全显示了。但如果他们希望能了 解今后几天的天气预报或者其他细节，那么再去打开应用也不迟。</p> <p>Live Tiles的另一个特性就是可以用来显示循环信息，你可以将多条信息显示在同一个方块内，而他们会自动循环显示。.</p> <p><a href="/misc/goto?guid=4958322459482498028"><img title="accuweather-livetile_db" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/be4457811b8d35048287d8631939f672.jpg" width="500" height="249" /></a><br /> <em><a href="/misc/goto?guid=4958322459482498028">AccuWeather</a> 和 <a href="/misc/goto?guid=4958322461029220569">AppFlow</a>, Live Tiles样例参考.</em></p> <h4>Accent Color（强调色彩）</h4> <p>当然，组织结构之外还会有你想要显示的内容，页面之上还有你想强调的内容，<a href="/misc/goto?guid=4958322461825907240">WP7 guidelines</a>给出了他们的建议：使用accent color（强调色彩）来强调你想要用户重视的内容。accent color是一个标准全局控件，用户可以在系统设置内自定义，并且所有的应用都会自动适配该色彩。</p> <h3>设计提示</h3> <p>干净简洁的界面，没有常规的图标，意味着用户以不同以往的方式与内容进行交互。因此，开发或设计Windows Phone应用（或所有的Metro界面应用），在享受新界面带来的不同感受的同时，也要考虑到用户对于传统界面的习惯。</p> <h4>Clickable Text（可点击文本）</h4> <p>Windows Phone的交互模型与传统界面的第一个不同点就在于：文本是激活的控件，也就意味着它是可点击的。这一点改变了”tap-safe area“（安全点击区域）的概念，除了图标、按钮以及其他控件元素，文本的字号、尺寸也影响着点击的范围。</p> <h4>Animation（动画）</h4> <p>Animation（动画）也是Windows Phone的一个重要特性。它改变了以往动画只出现在特定环境下的局面。 现在，动画和动态变形已成为基本控件并且深入Metro界面设计思想。它不仅能够在系统提示或反馈时”弹出“，也能提醒用户下一步也许是个不同的体验方式 （例如从全景界面切换到纯文本新闻界面）。</p> <h4>Icons</h4> <p>Windows Phone有一系列关于icon设计的指导，因此建议设计师在设计icon之前仔细阅读。唯一供以放置icon的地方就是application bar，所有针对内容的操作都来源于此。</p> <p><a href="/misc/goto?guid=4958322462618385340"><img title="The application bar of Pictures Lab, with four icons and the More button" alt="Windows Phone 及 Metro UI 设计讨论" src="https://simg.open-open.com/show/2cf39d1680c3c15971210224c6268b82.jpg" width="500" height="185" /></a><br /> <em>The application bar for <a href="/misc/goto?guid=4958322462618385340">Pictures Lab</a>, with four icons and the “more” button.</em></p> <h4>Text Wrapping</h4> <p>Windows Phone的Metro界面另一个特点就是文本换行不同与以往了。在这里，宽度大于屏幕宽度的文本是不会换行的，当然，普通文本例如新闻、邮件等不受此影响。因此，文本标题显示不全成了家常便饭，不过这对引导用户的操作到时候很大的好处。</p> <h4>The Color Theme</h4> <p>Windows Phone提供了不同于其他移动操作系统的色彩主题模式。除了明暗调整，背景色与前景色也都是可以供用户自定义的。</p> <p>因此在应用开发的色彩选择上你必须要小心了，同时还要考虑用户自定义的情况。当然，你也可以采用图片做背景，但需要两张，以适应亮和暗两种主题效果。</p> <h3>结语</h3> <p>Metro界面为Windows Phone应用开发者和用户带来了全新的令人振奋的特性和体验，完全不同于苹果的iOS和Google的Android。微软第一次将系统与硬件严格捆 绑，虽然留给运营商和制造商自定义系统的空间非常小，但让开发人员有了非常统一的设计标准。这未尝不是一件好事。</p> <p>本文仅是Metro设计开发的起点，供各位参考。今后会有更多的相关文章和资源提供给大家。</p> <h4>原文作者：<a title="Posts by Daniela Panfili" href="/misc/goto?guid=4958322464145819581" rel="author">Daniela Panfili</a></h4> <p>Daniela Panfili is a user experience designer, living and working in Brussels. She specializes in RIA and mobile experience design, and lately the WP7 platform. She writes about UX and UI design on her blog: <a href="/misc/goto?guid=4958322464962234380">tsoda.eu</a>.</p> <h3>相关资源及参考文献</h3> <ul> <li>“<a href="/misc/goto?guid=4958322465759567466">User Experience Design Guidelines for Windows Phone</a>,” MSDN<br /> This extensive section is dedicated to Metro concepts and design guidelines.</li> <li>“<a href="/misc/goto?guid=4958322466564772274">UX Guidelines for Metro-Style App Development</a>,” Blend Insider<br /> This provides insights from the Microsoft’s Expression Blend team.</li> <li>“<a href="/misc/goto?guid=4958322467359688689">Jeff Wilcox’s ‘Metro’ Design Guide for Developers, v1.00</a>,” Jeff Wilcox<br /> This article presents the main Metro concepts and shows how to use them in designing an application.</li> <li>“<a href="/misc/goto?guid=4958322468154515514">20 Free Prototyping, Mockup and Wireframing Resources for Windows Phone 7</a>,” MicrosoftFeed<br /> This article presents some useful resources for prototyping and designing for WP7.</li> <li>“<a href="/misc/goto?guid=4958322468954516517">Develop for Windows Phone 7.5 and Xbox LIVE Indie Games</a>,” MSDN App Hub</li> </ul> <p>Via <a href="/misc/goto?guid=4958322469752298030" target="_blank">Ui xLabs</a><br /> 出处：<a href="/misc/goto?guid=4958322470548368892" target="_blank">wpdang</a></p>