推荐:随本索源探讨Metro风格 - 优设网 - UISDC

推荐:随本索源探讨Metro风格

2013/06/07 评论区

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

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

图1(Segoe与helvetica)

Segoe与Helvetica

图2(瑞士国际主义平面设计)

瑞士国际主义平面设计

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

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

图3(windows8界面)

windows8启动界面

图4(瑞士国际主义平面设计)

瑞士国际主义平面设计

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

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

图5网格设计

网格设计

最后瑞士国际主义平面设计发展到美国后渐渐背离了设计先驱们的初衷。它渐渐变成了一种风格而不是一种动机成为了虚空的形式主义。
以史为镜,可以知兴替,根据瑞士国际主义平面设计的消亡可以得出关于metro界面的局限性。

图6-优秀win8设计

优秀win8设计

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

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

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

图8(windows8界面)

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

图7-无印

目前为止metro风格的延续与发展还是一个不明朗的疑问号?他或许是现今ui趋势的一个颇为强大的分支。但是它会像科幻电影中未来的界面,到处充斥着由metro风格演化而来的简单的线条与图标信息?我想还是个未知数。

【读者观点】@盧X克 极简化只是 Metro 的一个方面而不是全部,用这一个方面判断 Metro 的未来并不全面。

首先,从本文谈到界面的极简化来说,随着承载界面的“容器”不断演进,大大小小的屏幕在未来可能会隐去,而地板、墙、玻璃、镜子等日常语境中的平面可能更多替代屏幕成为新的“容器”。那时,拟物化的设计反而显得突兀——例如,从穿衣镜上召来一个拟物的计算器?而极简化的界面可以更无形地融入环境,并且通过它的非现实感,让我们将其与现实生活中有形有质感的实体区分开来,减少与实体世界的脱节和对虚拟世界的沉迷。

其次,Metro 同样强调信息的表面化,相对的是目前设计哲学中的层级。这让浏览者更多通过直觉和对信息本身的需求浏览,而非设计者预先规定的层级和逻辑。

作者:echos
原文:http://cdc.tencent.com/?p=7506

 
================微信推荐================
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/metro-style

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里