Metro风格网站设计欣赏与资源分享

标示：时间：04-11 作者：普晟智联来源：本站点击：次字号：大中小

Metro风格的起源自瑞士国际主义平面设计

虽然扁平化的设计在metro风格之前已经存在，但真正引起人们注意的，正是它的诞生。Metro风格是从Segoe字体开始的。Segoe是一款西文无衬线体，为微软公司诸多新产品中用户界面的字体。Segoe的设计灵感来自于Helvetica和瑞士国际主义平面设计，它的设计像是一种简单而又能准确传递信息的工具。没有多余的装饰和移动部件，Segoe是一种呈现清晰、准确和的新方式。

Segoe与Helvetica

瑞士国际主义平面设计

瑞士国际主义平面设计与Metro风格设计共性

由于metro风格是由瑞士国际平面主意设计发展而来，经过类比，惊讶地发现两者有惊人的相似之处：他们的设计目的均为单纯，易于识别。风格简单明确，传达功能准确，追求几何学式的严谨。采用非对称的版面组织方式。对齐方式使用左齐，右长短不一的对称方式使用方格网为设计基础。形成高度功能化，理性化的设计风格。使用无饰线体作为主要的设计字体。

windows8启动界面

瑞士国际主义平面设计

从瑞士国际主义平面设计的局限性到metro风格界面的局限性

正所谓针无两头利。瑞士国际主义平面设计的优点正正是他的缺点所在。首先瑞士国际主义平面设计作品的要求必须是客观的非个人的设计。个体偏好、顾客的特殊要求、宣传的压力都应该漠视不顾。唯一的标准是视觉的力量与效果。过分的理性化与公式化导致了个人性化的过道泯灭。忽略了普罗大众对于情感化的需求。其次瑞士国际主义平面设计形式为数字网格注重数学逻辑和理性思维缺乏感性的思想给设计者造成很大的局限。不利于思维的发散而且形成的版面过于死板、拘束缺少更为自由、更为个人化的特点。

网格设计

最后瑞士国际主义平面设计发展到美国后渐渐背离了设计先驱们的初衷。它渐渐变成了一种风格而不是一种动机成为了虚空的形式主义。

以史为镜,可以知兴替，根据瑞士国际主义平面设计的消亡可以得出关于metro界面的局限性。

优秀win8设计

1.个人情感主意的抹杀。不同与ios的拟物化情感化设计。Metro风格对于质感作了最大限度的抽象化。界面设计上对于高光，阴影这样的基本元素都作了舍弃。纯粹的平面设计风格到底是不是用户想要的呢？当真实世界与互联网世界完全割裂的时候，未来的界面设计，到底是不是一个与真实世界没有交集的平行性视觉体系？

2.过于严格的网格式排布对设计者造成很大的局限。首先不能否认的是网格设计具有良好的指导性，会使界面更加整齐划一。但使用网格并不意味着枯燥的设计，一个好的设计师不仅能够合理地应用基于网格布局的规则，而且还能适时地打破这些规则。但是当规则不能破的时候，如何展开一个有创造性的设计？

3.增加认知和学习成本。当信息以他本来的面目完整地展示到我们的面前的时候，我们如何快速区分这些信息？目前metro界面使用了色块来快速定位相应的模块。但是如果是色盲患者呢？他们可以看到的，或者是以下这张难以辨认的图。

正所谓穷则变，变则通。从metro的起源瑞士国际主义平面设计中，我们已经看到了危机与机遇。如何化解相应metro风格下的界面设计呢？其实在诸如无印良品与宜家的相关设计里面，已经可以找到相关的答案。在去繁求简，信息明了的基础上，开放布局，适当增加质感，添加人性化的味道。如下图，同样是信息的直接罗列，但是使用图片带来自然质感。板式灵活，在规矩中与简洁中带来不一样的味道。