metro风格PPT
- 格式:pptx
- 大小:720.44 KB
- 文档页数:10


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
metro风格
简介
metro风格是一种现代化的设计风格,又称为扁平化设计或简洁设计。它最初由微软公司在Windows 8操作系统中引入,后来被广泛应用于移动应用、网页设计和用户界面设计中。metro风格以鲜艳的颜色、简单的图标和清晰的排版著称,以提供简洁、直观、易用的用户体验为目标。
特点
metro风格的特点包括:
扁平化设计
metro风格强调简洁明快的设计风格,抛弃了过去阴影、渐变和纹理效果的设计。元素以简单的几何形状、清晰的边界和饱和度高的鲜艳颜色来呈现。这种设计风格使界面看起来干净、整洁,并且能够更好地适应不同的设备屏幕。 未知驱动探索,专注成就专业
2
鲜艳的颜色
metro风格采用明亮、鲜艳的颜色来区分不同的信息和功能。每个按钮、标签和图标都有自己的颜色,使用户可以快速识别和定位信息。这些鲜艳的颜色给人带来积极、愉快的感觉,提升了用户体验。
简洁的图标
metro风格中的图标都采用简单的几何形状和清晰的线条来呈现,它们通常是单色或双色的,没有细节和阴影效果。这样的设计风格使得图标在不同的尺寸和分辨率下都能保持清晰和易识别。
清晰的排版
metro风格注重排版的规范性和清晰性。它使用大字号和行距、对齐的文本和简单的排列方式,使信息更易于阅读和理解。这种清晰的排版风格与扁平化设计相辅相成,共同构建了metro风格的独特魅力。
应用领域
metro风格的应用场景非常多样,包括: 未知驱动探索,专注成就专业
3
移动应用
在移动应用领域,metro风格被广泛应用于iOS和Android系统的应用中。通过使用鲜艳的颜色、简洁的图标和清晰的排版,metro风格可以提升移动应用的用户体验,使用户能够快速定位和操作功能。
网页设计
metro风格在网页设计中也非常受欢迎。它的简洁明快的设计风格使得网页更易于浏览和导航,而且能够适应不同的设备屏幕。metro风格还提供了大量的样式和组件,使设计师能够更快速地搭建网页。
朱宏微软中国用户体验布道师:独到的审美见解
朱宏(@MLikeasong),微软中国用户体验布道师
1.请问用户体验布道师是做什么的?
其实这是一个负责向广大开发者和设计师以及应用合作企业宣传推广微软独到的用户体验的职位。
我们工作的方式很多种,书面的、媒体的、社交网络上的、大会、Workshop等等,主要是能起到
正面作用的各种方式我们都在努力尝试。
目前微软前所未有的重视软件应用中的用户体验,所以我们更有必要向合作伙伴和用户名去诠释微
软的这些新东西,这两年最重头的就是Windows 8和Windows Phone 8了。
2.Metro风格是不是更适合内容型产品,比如电子杂志、新闻和视频类产品?
原则上Metro适合各种产品,当然它表现在杂志新闻中是最容易的,因为它原本就来自于平面设计
和建筑设计这样的传统设计领域中。我们现在也看到有很多各种类别的应用都把Metro使用得很
不错,Social的、旅行的、甚至工具类型。
3.Metro风格与其他操作系统界面设计有什么本质区别吗?
本质区别可能就在于Metro是需要同时兼顾任何大小的屏幕。其他的平台可能不存在这个问题,而
微软的 Microsoft Design 要同时能够在小屏幕手机、平板、正常大小的笔记本电脑、台式机一体机
、投影、还有电视机上都能够很好的显示并且容易理解和适合操作,这就对Metro的整套设计语言
有着统一的整理和不同的兼容使用方式,比如使用Xbox连接到电视机上,Metro就要能很好的使
用Kinect来进行远距离体感控制,这个是其他平台暂时不需要考虑的,但是它属于微软全球产品线
中重要的一环。
4.Win8有metro界面,兼容Win7桌面,会不会让用户感觉同时存在两个操作系统?
对于Win8使用不是很熟悉的朋友也许会有这个感觉,但是当你真正习惯了这个出色的系统之后
便不会这么想了。一个真正的用户,其实他不会去想这是几个系统,他只关心他打开的网页更适合
Metro UI,也叫Modern UI(这个名字现在更常用)、Windows8 Style UI,是微软基于设计语言设计的一种界面风格,此设计已被用于移动操作系统Windows Phone、Windows 8、Xbox 360等多款微软产品,也是目前各种设计风格里面最大行其道的,所以先讲讲Metro UI Design。
Metro设计理念
图例为WP7和WP8的Segoe字体 Metro作为一种文字导向(typography-based)的设计,设计一般采用微软WP为此设计的标准字体:"Segoe WP",它也比起其他UI设计风格更加注重字体,并且在持续不停进化中,原因是Metro的设计原则之一是"content before
chrome",翻译过来大致是“内容大于装饰”,所以这种设计风格更加注重应用内容本身(一般以文字和线描图展现),而不是在于传统设计上的“Graphic”(图形),这也是当初它搭配在Lumia上一出世就把大家惊艳到的主要因素。
这种基于瑞士平面设计的设计原则,有利于设计出以文字为主的导航界面。机场和地铁的指示牌给了微软设计团队灵感,其风格大量采用大字体,能吸引观众之注意力。微软认为Metro设计主题应该是:“光滑、快、现代”(Simple.Clean.Modern),于是现在你看到的Metro的图标设计也不同于Android和iOS,即便它还是有不少的传统意义上的图标。
2006年,Zegoe UI风格 2006年,当微软媒体播放器内置系统Zune开始使用类似Metro的设计风格的时候,微软的设计师就计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用,当时还被称为* Zegoe UI。后来移植到手机,出现了“Live tiles”(活动磁贴)*,并成为了Metro UI的一个重要组成部分。
微软这种设计摒弃了复杂图形而直接展示内容本身,提升了常用任务使用体验和速度,这种界面使用更多大面积块,标题和内容非常直观的显示出来,而且常常伴随着屏幕滚动。动画在Metro UI里面占有巨大的作用,这样能给用户一种这些界面是“活的”,是可以“深入对话”的。