掌握Metro风格，开发靓丽应用

最新推荐文章于 2019-01-01 15:11:10 发布

weixin_34163553

最新推荐文章于 2019-01-01 15:11:10 发布

阅读量112

点赞数

文章标签：操作系统人工智能

本文链接：https://blog.csdn.net/weixin_34163553/article/details/85023408

版权

在手机上设计应用程序与传统的桌面和浏览器相比有不少差异。首先，需要在手机较小的屏幕上设计良好的用户交互和体验，还需要充分考虑移动设备上触屏等输入方式。另外，用户多数是在运动中使用手机，而不是呆在办公室或坐在家里。应用设计者应该想办法利用这些差异和特点，化限制为机遇从而最大地满足用户数字连接、移动生活的需求。

Windows Phone使用了Metro设计理念，这是微软公司从Windows Phone开始引入和推广的设计风格。其特点包括简洁的应用界面，快速的系统反馈，最少的点击次数，自动的消息推送，直接的内容交互，和高质的视觉元素。

本文介绍Metro风格，以及优秀Metro风格应用的设计原则。旨在帮助设计者更好地优化应用视觉效果，使Metro设计理念扩展到您的应用程序中，使其与Windows Phone平台上其他的优秀应用程序风格一致。对于Windows Phone平台上的创新应用，一致性是相当重要，它能使用户更容易地熟悉和了解您的应用。在应用设计过程中遇到的具体问题，您还可以参考Windows Phone 应用商店中的应用如何解决这些问题，或在APP HUB论坛中和同开发者进行交流。

现代感（Be Modern）

触屏应用的现代感意味着不做修饰，避免奢华，简化设计。在Windows Phone中，内容本身就是界面：用户通常能直接操作任何文字，对象，和屏幕上的其它元素。用户通过尝试点击不同的位置来掌握应用中的造作。复杂的屏幕跳转和繁复的设计会使应用难以掌握，并拒用户于千里之外。简单的设计和必要的空隙会使界面看起来更简洁。下图中MSN Money应用界面是一个典型的简洁和现代感案例。

在MSN Money应用程序

快捷感（Be “On the Go” Capable）

很多时候人们使用手机应用必须进行简单、快速的操作。这是因为人们经常“在路上”使用手机，所以用户只有很短的碎片时间进行必须的操作。例如公交站等车的几分钟，超市排队结帐的几分钟，开车等红灯的几十秒钟，以及众多生活中的其他碎片时间。用户会在这些场合经常需要马上得到信息，例如航班状态，最近的加油站，方圆2公里内最好的中餐厅。

应用可以充分利用推送功能，不用点击就自动呈现最新信息。应用中的功能应该能流畅地完成，设计者应该使控件的设计和布局便于用户快速完成常用操作。开发者应该牢记简洁的文字和字体在独巨匠性的应用中至关重要：因为眼睛读取内容时最关注与形状、尺寸、颜色及其含义。

手机键盘输入不像电脑上那么容易，因此设计者应该尽一切可能减少不必要的键盘输入。无论哪种数据格式，用户输入的数据项都应该尽量少。适合的场合中尽量使用文字联想，定制和系统控件、以及语音输入功能。

应用程序启动后，用户应该能极方便地找到他们感兴趣的功能。例如，一个多媒体播放应用的下载列表应该有分类功能，以便用户按类别快速找到用户偏爱的媒体文件；另一个必备功能是用户的收藏夹和常用列表。常用列表中的媒体文件应该被放置在显著位置，以便用户快速跳转回上次离开的地方。开发者应该尽力使用户快速实现应用使用中的需求。在Amazon Kindle应用程序的主界面上显示的是用户最近读过或查找过的书。点击一本书就会回到上一次离开该书时的页面。

Kindle应用里最近阅读的书籍展示

即使在家里，用户有时也会“在路上”。人们经常在吃饭，看电视以及和陪伴家人，朋友的同时，想同时干点别的。比如坐在家里沙发上看电视时，人们可能会需要同时发个短信或者使用手机应用。这可能是因为用户感觉电视的某个情节有点无聊，或者正在插播广告。因此出色的手机应用体验应该充分考虑在这样的碎片时间里人们想干什么。

简洁感（Be Clean）

手机触屏设备的屏幕尺寸非常小，因而很容易点错而造成不良的用户体验。应用程序的触屏设计应该兼顾粗壮的手指。在控件和内容周围保留空隙，可以使标签更加清晰。在使用触屏操作的控件时，应该充分考虑所有可能的误操作，并避免他们对用户体验造成不良影响。好的触屏应用程序不应该测试用户完成复杂操作的耐心，和精确点击的能力。下图是Project Emporia应用程序，每页显示了4则清晰的消息梗概，每个梗概点击后都可以显示细节。这钟设计比一个冗长的标题列表好得多。

Project Emporia应用程序

把应用程序设计得直观、易懂至关重要。用户应该需要极少的说明、甚至无需任何说明就能使用应用程序。你的应用程序应该被设计得浅显易懂，无需用户指导手册。用户随便玩几下你的应用，就应该能明白操作方法。如果用户在操作应用时遇到麻烦，就会用脚投票抛弃这个应用，并去寻找相同功能的其他应用。

交互感（Be in Motion）

移动应用中的触屏操作应该仿效物理操作时的交互感。在Windows Phone应用中，可以通过显示对象的变形和交互效果来模仿成功触摸的效果。屏幕应该对轻触做出反应，动画效果应该轻巧灵活，以便使用户知道导航等操作的结果。这样的设计使用户理解下布应该做的操作，并明确哪些元素可以点击，哪些元素不能点击。在彩信应用中，新消息自动出现时会内嵌多媒体信息。用户可以点击一条消息中的缩略图快速切换到该图的全屏展示页面。

显示用户启动电子邮件应用程序时发生的一系列交互式动画图像。页面呈现出“翻页”的效果。

简约感（Be Simple, Readable, and Minimalistic）

用户交互体验的一致性和简洁至关重要。开发者应该致力于使每一屏专注于特定功能、主题，删除所有多余元素。仅仅呈现用户真正需要的内容。eBay在Windows Phone上的应用程序相对于其网站，用户界面更加简约。

eBay应用程序

信息展现方式非常重要。手机的屏幕尺寸明显小得多，用户界面的布局应该有可读性，并在不同的页面间保持信息连贯性。避免用户在不同的页面间浏览时迷航。考虑用优雅的方式显示信息，考虑用简约的方式。

别以为一个屏幕中呈现的信息越多越好。堆砌内容的界面不仅不好，而且会令人费解。布局用户界面时应尽量减少控件数量，并使其直观易懂。Windows Phone上每一屏都值得认真对待。在用户界面的主屏中只保留最主要的核心内容，移走其他一切细节。这些移走的次要数据可以在应用子页面中出现，但要保证这些数据与主题相符。一个新闻类应用要是把所有的新闻报道放在同一个页面，用户就不得不花时间去滚动屏幕逐个阅读。较好的做法是把头条新闻放在主页上，或者放置各个类别重要新闻的提要。最好应用能提供设置功能，由用户来配置界面上显示信息的方式。

对于复杂的多维数据，开发者需要想办法把这些数据分离开来，将其逐屏显示。用户不会希望在Windows Phone里自己编辑设置这些复杂的多维数据。

一致感（Be Consistent）

本文的目的之一是为了指明Windows Phone上用户交互的标准方式。只有当所有应用的用户交互都一致时，用户才会感受到整体最好的用户体验。应用开发者可以参考系统功能的用户交互体验，例如导航，设置，列表删除。

消费者会给交互方式一致的应用加分。由于用户已经习惯了Windows Phone手机的交互方式，他们可以快速掌握一致性好的新的应用。一致性能使用户和开发者都受益，这特别有助于赢取良好的用户反馈和提升应用下载量。

权威感（Be Authentic）

打造完整的Silverlight或者XNA应用程序，尽量避免在应用中依赖浏览器控件展示Web页面。Windows Phone应用程序应该充分利用传感器，硬件，Silverlight动画，控件，以及多触手势来创建比移动网页上更丰富的用户体验。

应用应该打造品牌形象。在保持简洁和时尚感的同时，应用程序可以使用自己的配色方案和高质量的视觉元素来展示其功能，并区别于其他应用。

创新感(Be Innovative)

移动应用不一定是桌面复杂应用的阉割版本。手机应用功能即便不能比桌面应用更强，至少可以一样强。在性能日益强大手机上，今天的移动应用能独立完成所有工作。从桌面端移植到手机上的应用可以实现所有应用功能，随着时间的推移越来越多的用户会使用手机版应用。Windows Phone上的Twitter应用就像它的桌面版本一样功能强大。