Metro风格设计.docxVIP

Metro风格设计——Tile(磁贴)已铺天盖地而来，不论你是否喜欢，它将遍地开花。1、Metro风格概述Metro的英文原意是地铁。人群在地铁通道中川流不息，通过鲜明的颜色和简洁的表达快速而准确地获取信息。微软对Metro的定义是“光滑，快，现代”。1.1、Metro的渊源微软使用Metro作为其新一代界面和交互风格的代名词，其原因主要可以追溯为三点：首先是对于地铁指示牌的借鉴和启示，Metro注重了充分、醒目且简洁的信息表现形势；其次是对包豪斯风格的发展，Metro使用规整的、去装饰的、强调功能与内容的整体界面与几何构图；最后是最对瑞士平面设计风格(国际主义)的继承，Metro设计倾向于理性、整洁、秩序化、单一形状、简约与平面化。1.1.1、地铁与城市地铁是城市最繁忙的地方之一，人群快速穿行于地铁通道中，地铁通道的指示牌鲜明的颜色和简洁的表达向人们快速地传递信息。没有过多的点缀于装饰分散人们的注意力。在应用于信息行业以后，Metro被从事信息行业的人们赋予了一层深意：单纯与流动的信息。Metro风格之所以被称作Metro，其灵感来自城市地铁的三个方面：其一是地铁信息牌上最常用的单纯颜色和文字；其二是地铁通过内的条带状信息路标；其三是地铁上宽大的车窗。1.1.2、包豪斯建筑20世纪20年代，德国在建筑领域发起了一项影响深远的运动，并逐渐波及到艺术、字体、产品设计等诸多领域，称作包豪斯运动。包豪斯风格的建筑拥有开放的空间和对美丽材料的纯粹展现。在其设计语言中常常运用静态而流动感的平行线。包豪斯建筑强调结构，以突出其存在和真实的物理感；无装饰，只有美丽而干净的空间。然而包豪斯理念也有自己的弱点。因为去除了装饰，使得人性化空间很小，人们会感到这种风格的建筑和家具缺乏个性和生命力，缺乏感情联系。被批判为“钢铁和玻璃”组成的森林。微软为避开包豪斯的这个劣势，把Metro UI略显呆板的卡片式的磁铁(tile)注入了更加灵活的元素——及时更新信息，这将便于新闻、社交、天气等资讯的显示与更新，于是翻转、浮现、隐退、重置之后，每一个“方格”都改变了初始的模样。1.1.3、瑞士平面设计20世纪50年的，一种崭新的平面设计风格在联邦德国与瑞士形成，被称为“瑞士平面设计风格”。由于这种风格简单明确，传达功能准确，因此在全世界都很流行，成为“二战”后影响最大、国际最流行的设计风格，因此被称为“国际主义平面设计风格”。 1.2、Metro风格的原则1.2.1、Metro UI的特点干净、轻量、开放、快速Metro应用让人感觉非常快速，用户和应用之间的交互总是迅速得到响应。重内容，而非线框与修饰Metro应用使用留白来组织内容，用户从内容本身受益，而不是装饰。优雅的文字Metro应用中的文字不仅是可读的，也是优美的，且具备特有的表现力和魅力。有感情的动画Metro应用通过高度响应的动画保持界面的鲜活，这些动画好像被赋予了情感。例如，点击一段邮件的话题，话题飞入下一个页面，帮助用户注意到新页面的全文是关于这个话题的。可靠的信息为内容而设计，简明直接，确保信息的可靠性，不误导用户。任何带有迷惑性的设计和引导，都是Metro所排斥的。1.2.2、Metro UI的识别Metro的简介之美如此深入人心，人们看到一部设计作品往往就能通过直觉来识别它是否遵循Metro风格。微软Metro风格的应用和设计有五大鲜明的特点，可以用来鉴别该作品是否属于Metro风格。鲜明的颜色Metro风格往往使用对比强烈的鲜艳饱和纯色块作为图标或文字的底色，也就是人们通常所说的“大色块”。这些底色一般不使用或少量使用色彩过渡，一般不使用或少量使用透明度，绝不使用3D或其他非平面化的视觉效果。矩形TileTile是Metro风格作品中最常见的视觉元素。一般为纯矩形，没有圆角和折边。Tile的内容可以是文字、图标或图片。Tile的大小并不单一，但在同一作品中的Tile的尺寸一般是基准尺寸的倍数。在程序中的Tile可以是活动的(Live Tile)，通常是可点击的。Segoe UI、微软等线和微软雅黑Metro风格英文作品使用Segoe字体家族作为界面字体。字体本身是纯色填充。不使用或少量使用平面效果，绝不使用3D或其他非平面视觉效果。对于中文应用程序，微软为Windows Phone设计了微软等线字体，该字体在展示中文文字方面具有与Segoe UI相似的表现力；Windows 8中，中文应用的默认字体为新雅黑。整幅图片和纯色图标Metro风格的作品经常使用大尺寸的图片甚至整幅图来充分发挥图片本身的表现力。图片本身是清晰的，图片所表达的内容通常是现代的。而Metro风格中的图标往往是纯色的，以纯白色为最多，图标使用简单的线条和填充抽象图标的功能。留白而少线框Metro风格的作品很少使用线条