Menghe

导航

Metro UI界面完全解析

Metro在微软的内部开发名称为“ typography-based design language”(基于排版的设计语言)。它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro UI,这包括:Windows媒体中心、Zune播放器等等。该技术已于2010年初(美国)获得Metro UI专利批准(USPTO)。Metro UI最新的应用是windows phone 7智能手机系统,并将应用于未来的windows 8、office 和 Xbox 360产品中。 

Metro UI是微软的一种设计方案。该设计方案已用于移动操作系统Windows Phone 7和多款微软产品。微软Segoe WP字体,属于Segoe字体家族的一员,细腻坚韧给人一种优雅的美感,同时它也是WP7手机系统的默认字体。

源自瑞士的设计风格:Metro UI

求本溯源,Metro UI是基于瑞士平面设计原则,其最初在Windows XP的Windows Media Center就中有体现,这有利于以文字为主的界面导航。2006年著名的Zune播放器开始使用类似Metro的设计风格。微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的桌面客户端程序也使用了不同于以往Portable Media Center用户界面,其清爽排版和设计给用户耳目一新的冲击。

图:Segoe WP字体

机场和地铁的指示牌给了微软设计团队灵感,其设计团队指出:Metro UI是来源于美国华盛顿州金县都会交通局(King County Metro)的标识设计,这种风格大量采用硕大突兀的字体,能吸引读者的注意力。微软认为Metro设计主题应该是:“光滑、快、现代”。Metro UI中图标设计也会不同于Android和iOS界面。

Metro UI设计具备以下五点原则:

1. 干净、轻量、开放、快速

2. 要内容,而不是质感

3. 整合软硬件

4. 世界级的动画

5. 生动,有灵魂

Metro之父:瑞士平面设计风格概述

20世纪50年代期间,一种崭新的平面设计风格终于在联邦德国与瑞士形成,被称为“瑞士平面设计风格”,由于这种风格简单明确,传达功能准确,因此很流行与全世界,成为二战后影响最大,国际最流行的设计风格,因此被称为“国际主义平面设计风格”。

图:瑞士平面设计

瑞士平面设计风格稳健,四平八稳的传达设计,给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格,瑞士设计家大部分不同意这种看法,他们往往强调瑞士国家虽然小,但是设计风格变化多端,极为丰富。 

图:瑞士平面设计

对于瑞士设计学校的师生来说,瑞士国际主义风格已经是过去的事情了,但是,瑞士的设计教育却深深地受到这种50 、60 年代发展起来的风格的影响。直到现在,瑞士的平面设计依然具有强烈的整洁、严谨、工整、理性化的特征,一丝不苟,传达准确,形式单调乏味,不少年轻人感到瑞士设计,特别是平面设计已经太深地陷人瑞士国际主义风格中,瑞士设计界需要一次真正的革命、造反,来荡涤过往风格的阴影。

图:瑞士平面设计

 

独特风格:Metro UI强调信息本身

Metro UI是一种界面展示技术,和苹果的iOS、谷歌的Android界面最大的区别在于:后两种都是以应用为主要呈现对象,而Metro界面强调的是信息本身,而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面,这有助于形成一种身临其境的感觉。

图:Metro UI强调信息本身

Metro UI强调利用时间碎片

在时间碎片中找寻到更多的信息。这就是MetroUI为Windows Phone所订制的设计理念。现在社会连呼吸都要赶时间,很多用户没有过多的时间来用复杂的手势操控手机。在公交车上,我们可能利用从座位起身到在后门排队等着下车的这个狭窄的时间间隔中,还想着要看一条微博。也许趁着在超市排队结账的时候,都要用微信摇一下周围的新朋友。着重提高用户的单手操作准确性,就能让用户死死的黏在你的应用上。

40年用户界面设计历史简单回溯

界面设计是软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

在漫长的软件发展中,界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果,而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。在漫长的人机交互史中,UI设计的理念也在不停迭代。

1984年1月1日,Apple MacOS 1.1

1995年,微软 Windows 95

2005年,Apple OS X Tiger

今天,Metro UI设计语言诞生

Metro的设计灵感来自交通系统:它需要帮助人们能够在短时间内,快速找到自己所需的信息。Metro一词在英文中译为地铁的意思,这充分体现了它的渊源和其艺术风格。

图:地铁中的Metro信息版 

posted on 2012-02-02 17:13  孟和  阅读(889)  评论(0编辑  收藏  举报