2014-12-11 蓝蓝设计的小编
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务.
每一个扁平化界面设计，都是我们的心灵碰撞致力于最棒的 metro ui 设计
来源：http://zwkufo.blog.163.com/blog/static/2588251201211311143818/?suggestedreading&wumii
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
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信息版
干货好料：Metro UI中的设计元素
你觉得Metro UI界面非常的简单？它的设计理念就是要突出简洁与视觉焦点的引导。如果你是一名Windows Phone移动应用开发者，或是应用UI的设计者，那么下面提到的Metro UI中设计元素，你都必须应该知道。
开始界面：下面我们来看一下Windows Phone中Metro UI的开始界面。它具备一些用户经常使用的必要信息。人脉、图片、游戏、音乐和视频、办公、电子市场等。这个界面，其内容可以纵向滚动，方便单手拇指操作。同时在狭小的手机屏幕中，可以显示更多内容。
图：Windows Phone中的“开始菜单”
多宝阁设计：多宝格又称“百宝格”或“博古格”，是专为陈设古玩器物的。它是进入清代才兴起，并十分流行的家具品种。多宝格的独特之处在于，它将格 内做出横竖不等、高低不齐、错落参差的一个个空间。人们可以根据每格的面积大小和高度，摆放大小不同的陈设品。在视觉效果上，它打破了横竖连贯等极富规律 性的格调，因而开辟出新奇的意境来。多宝格兴盛于清代，与当时的扶手椅一起，被公认为是最富有清式风格的家具之一。
图：多宝阁传统家具
图：Metro UI的“多宝阁设计”
活动方格设计：在Metro界面中，应用都以可以翻转的方形图标的形式呈现在主界面中。他们就好似是多宝格中的 “收藏品”一样，每一个应用都会给用户爱不释手的感觉。可翻转的图标，同时又印证了多宝格精致的机关设计，给人以一种不断幻化的新奇感。让人忍不住去探索 Metro UI中的各种内容。
图：可以翻转的图标
通过刷新活动方格的内容，可以让一片狭小的区域显示更多背后的内容。这种设计，要比单纯的图标式界面能呈现更多丰富的内容。
Metro UI活动方格设计精要：
1. 活动方格式的图标可以反映出更多应用程序的信息。
2. 图片丰富细腻，每一个小方框由173 X 173像素阵列组成，其可以显示精致细腻的图片。
3. 多标题的图片，可以容纳下更多内容，可以给设计师更多的灵感空间，每一个应用都有机会构建自己的独特风格。
Panorama环景界面概念：环景一词源自于“panorama”，又称全景图，它是一种广角图，可以以画作、照片、视频、三维模型的形式存在。 全景图这个词最早由爱尔兰画家罗伯特?巴克提出，用以描述他创作的爱丁堡全景画。现代的全景图多指通过相机拍摄并在电脑上加工而成的图片。19世纪中叶， 全景图成为最常用的景观和历史事件的表现手法。1881年，荷兰海景画家梅斯达格（Hendrik Willem Mesdag）等人创作了梅斯达格全景画，并将画放在一个直径约40米的环形面内，画长约120米，高14余米。
图：2011中国移动开发者大会现场环景图
图：清明上河图画卷
用户手中的这台WP7手机的可视区域是十分有限的。例如诺基亚Lumia 800的屏幕仅为3.7寸，为了能让用户透过窄小的手机屏幕，看到更为宏大的场景，在Metro UI中就采用了这种Panorama设计的概念。它最大的益处是可以在一个二维平面内，集中显示多种类型、多种来源的信息内容。
正如这张清明上河图所呈现出来的景象，宽大的卷轴不可能在手机中整体呈现出来。但是通过Panorama设计的概念，用户可以横向滚动卷轴，一点一 点地将整张清明上河图浏览完。并且在花卷横向滚动时，人脑会记住当前屏幕所展示的内容以外的部分，并且人脑会自动将这些顺序与逻辑关系都有机的结合起来。 在人的脑海中会自然呈现出原画磅礴的内容。
图：Panorama风格应用
Panorama设计的准则，让用户可以控制自己的视野，通过用手指在屏幕上滑动来获得自己想要看的内容。同时，这种操控方式也是可以全屏幕进行的，并且可以视作是一种应用程序内的导航模式。
1. 使用任意单一的颜色作为背景色，或者是一张图片作为Panorama环景的背景。
2. 用户不必使用任何额外的触笔或者按键就能完成对Panorama的控制。
3. 在应用UI的设计时，微软对设计师有一个明确的要求：Panorama界面不能过长，要限定在4个屏幕宽度之内。
图：Panorama风格应用
Pivot枢纽：是指最重要的部分，事物相互联系的中心环节。在构造地质学中，在褶皱的各个横剖面上，同一褶皱面的各最大弯曲点的联线叫做枢纽。Pivot枢纽通过不同的方式显示设置，Pivot枢纽的概念类似古代的“雕花灯笼”在转动的样子。
Pivot是立体的，它像是一个有许多面的实体
图：雕花灯笼
在Metro UI中的枢纽控制，提供了一种快速的获取和管理信息的途径，它能够以多种窗格的形式滚动呈现出来。用户能够使用它来过滤较大的数据，通过它来查看多重数据，或者在应用程序之间进行切换查看。
微软官方设计建议：
1. Pivot枢纽控制仅仅能显示一组项目，或者是类似的数据类型。
2. 绝对不要在Pivote枢纽中包含Panorama型的环景控制，或者是在Pivot枢纽中再加入Pivot类型的控制。
3.Pivot枢纽中的页面，不应该被应用于任务流。
4.不要试图使用触笔控制或者是滚动控制来代替Pivot枢纽控制。尤其是在sllder、Toggles、Map控制中。
图：Pivot控件结构
Pivot VS. Panorama
Pivot和Panorama都是可以横向拓展视野，一个是翻转，一个是平移。但是在开发者设计UI时，往往会将他们相互混淆。
Pivot可以支持更长数字的项目，因为它每个翻转层都是类似的数据。而Panorama主要追求的是更炫的用户体验，在Panorama中每一组数据要足够在一屏的宽度内显示出来，这样用户不必来回滚动屏幕翻看内容。
在Pivot中，支持丰富的代码内容，开发者可以调用许多数据内容，并且以不同的方式呈现出来。而在Panorama中，需要与一些系统操作相匹配，因此其代码实现的功能也相对简单一些。
在Pivot中LoadingPivotltem和UnloadingPivotltem事件可以简单的被推迟。另外Pivot还可以让用户更加的利用屏幕空间。
对于Panorama来说，其背景图片可以是任意尺寸，在垂直方面，系统都会自动的适应屏幕的大小，确保顶部和底部都完全吻合，而在水平方向，将图片等分成四个屏幕视野，同时确保屏幕滑动流畅。
Pivot（下） VS. Panorama（上）
Metro、iOS、Android之三大UI风格对比
三种移动平台，三种风格迥异的UI界面。先有iOS，后有Android，但是Metro UI的风格，早在许久之前就深入现代设计殿堂。
图：Metro UI（左）、iOS UI（中）、Android UI（右）
Live & rich tiles对决静态图标。在Windows Phone中，图标按钮可以呈现出更加丰富的信息。
图：Metro UI能推送更多信息
集成流与独立应用。WP和Android在一个应用中，四步即可对一张照片完成剪裁。而在iOS中，需要频繁的在2个应用中切换，至少6步才能搞定。
图：三大平台操作谁更简单？
简单的菜单 VS. 各种高级子选项。没有选项卡，没有古怪的按钮，有的仅仅是简洁明了的菜单。Metro UI回归质朴，所带给用户的是极简式的操作体验。
图：三大平台操作谁更直观？
MetroUI的秘密：谁更适合视力有障碍的人？
图：在你视力好的时候，可能不会觉得他们有太大差别
图：当你视力有些许的问题时，你依旧能准确操作手机
MetroUI未来发展之势
现在，微软开始整合本设计风格到其他产品中，如新版本的Windows Live Messenger和Live Mesh。而微软也确认Windows 8将全面集成Metro UI设计。而根据Office内部测试版的截图，Office也会使用Metro设计。微软美国官方网站亦部分使用本设计。
图：Windows8的Metro界面
Metro UI会被广大消费者接受吗？
Metro UI会被消费者所接受吗？这个情况与iPhone不同，苹果的iPhone已经非常有名，它的各种消息都是媒体们争相报道的好题材。当iPhone的用户 在iPhone初代、iPhone 3G和iPhone 3GS时就有了深厚的积累和广泛的认知，由此在iPhone4推出时其销量的爆炸式增长也就是必然的事情了。对于iOS的界面来说，消费者经历了漫长的过 程才接受它的。同时在这个接受的过程中，iOS的界面也在各种的反馈声中不断的进化。
图：CSDN微峰会 诺基亚Lumia 800品鉴交流
当Android出现的时候，其界面与iPhone基本相同。Android抄袭iOS的界面设计之所以让乔布斯非常恼火，就说明谷歌在这方面是非常成功的。虽然这二者也有着明显的差异，但是从主界面的网格式图标布局来看，容易让用户找到所需内容。
微软需要与合作伙伴一起精心的打造Windows Phone的生态链，Windows Phone手机会在更多的国家上市销售。如果人们买不到Windows Phone，那么其他人就不会买它。这与手机系统的设计和手机的质量无关，可以说目前Windows Phone手机上Metro UI正缺乏被社会广泛接受的一些必要条件。但是这一设计语言必然会慢慢流行起来。
三大智能手机UI谁看上去更艺术？
你可能会偶尔看到，某个餐厅的菜单，用的是iOS的界面风格。也许你能听说某人，设计了一个随身记事本，其外观与三星的note手机极为相似。你可 能会哇的赞叹，其UI设计的影响力，已经从移动领域延伸到了日常生活中。但Metro UI则完全相反，它是先被广泛应用在日常的生活中，然后再经过各种优化，才植入智能手机中的。源于生活而高于生活，这才能称之为艺术。我国某位著名的根雕 艺术大师曾经说过这样一句话：工艺品和艺术品的价值至少差着五个档次。
扫一扫，案例分享带回家（蓝蓝设计微信公众平台）