网页设计的未来隐藏在建筑设计史之中

如果你想知道网页设计下一步的路在哪里,只要看看建筑行进到哪里就明了了

1472438365-4812-TB1dpM4KpXXXXXzaXXXSutbFXXX

 原文:https://medium.com/@sall/the-future-of-web-design-is-hidden-in-the-history-of-architecture-1cc93ea854d0#.w5z7ggov8

作者:Mike Sall

翻译:河源

译文地址:http://mux.alimama.com/posts/1473?spm=0.0.0.0.0PEDEa


西方建筑设计史可以告诉我们很多关于网页设计的演变之事。同样作为艺术形式而存在,二者都是由这样几个因素所限定的:

1.它们都是人们要去往的地方。

2.为了承担这一实际职责,它们被反复设计着。

3.技术的发展限制了它们的设计 。

4.然而可以肯定的是,它们仍旧是艺术的一种形式。

在这些限制下,它们二者都沿着惊人的相似路径前行——它们建立在过去的基础之上,并对历史做出了相似的回应。如果你想知道网页设计下一步的路在哪里,只要看看建筑行进到哪里就明了了。

I.新石器时代

简单、有限的结构  

1472438362-5609-TB1.KNdKFXXXXaEXFXXwu0bFXXX

巨石阵。公元前3000-2000年/www.org, 1992年 除了在大小和位置方面略有不同,此时的设计只是一个将东西归位的举措。

II. 古典主义时期 

秩序和比例,并附有一些点缀

1472438364-2753-TB1FUdmKFXXXXb-XXXXwu0bFXXX

帕台农神庙。公元前 437 年/ Yahoo.com,1996年

古典主义时期重新定义了和比例和层级,引入了因服务于不同目的而被明确划分的各个区域。这些介质(如石头、像素等)也都在程式化地模仿着先前的材料:带有三竖线花纹装饰的石头代表着(有纹理的)木头梁柱,正如我们会使用立体的按钮来代表现实世界中的按钮一样。

III.罗马式

较厚重的形式以及圆润的边缘

1472438369-7250-TB1CF76KpXXXXbYXVXXwu0bFXXX

玛丽亚·拉赫修道院。 1093年/ Apple.com,2000年

除了柔化建筑的边缘,古典主义时期还会增加墙壁厚度并拓深隔板宽度,从而达到更厚重、更可点击的效果——就像网页中的表单和按钮一样。

 IV.哥特式

华丽且迷人

1472438368-4113-TB1rjhlKFXXXXcZXXXXwu0bFXXX

兰斯大教堂,1211年/ Maroon5.com, 2005年

CSS和Flash就是网页设计中的花窗玻璃。在对应的位置都有了基础要素之后,我们开始尽可能地挑战材质设计的极限。哥特式建筑将石头设计出一种客服了地心引力、恍若能夺走游客呼吸的奇观异象。虽然现在,我们要记住它们很难,但早期那些Flash和CSS网站用像素带给我们的惊喜已经足够多了。

是的,我刚刚就是在把古老的Maroon 5网站与兰斯大教堂做对比。

V文艺复兴时期

干净,逻辑和精确

1472438366-7002-TB1KmA4KpXXXXXlaXXXwu0bFXXX

 香格里拉·罗通达别墅,1567年/ Rdio.com,2012年

这就是今天我们所处的位置。简直令人难以置信,最近风靡的“扁平化设计”运动与文艺复兴时期的建筑是何其相似!文艺复兴时期的建筑呼吁人们回归到经典的逻辑中去。简单的几何形状取代了华丽的复杂形状。设计变得简洁起来。

人们开始运用新的规则发表论述,一切似乎都有点返璞归真的样子了。

接着,我们开始进入未来……

VI 巴洛克

扭曲所有的规则

1472438370-6214-TB1fWE4KpXXXXXraXXXwu0bFXXX

四泉圣嘉禄堂,1638年/ 待定(To Be Determined),2017年

保持如此的逻辑性与精确性只在一小段时间里取悦了群众。最终,我们开始打破规则。在建筑中,这意味着从字面上使那些经典元素分崩离析,并将它们扭曲成复杂的形式。与文艺复兴时期的理智相比,巴洛克式的设计是情感化且富有戏剧性的。

借由此,我们将如何对网页进行设计呢?这很难说。但请静静地等待——几年之后,它必将到来。

VII. 新古典主义时期

倾听过去的回响

1472438371-6783-TB1NLNeKFXXXXXcXFXXwu0bFXXX

先贤祠(巴黎),1790年/待定,2022年

万事万物最终都是一个轮回。一旦我们达到了一定的阶段,我们会开始崇尚曾经的那些古典事物,并竭力复兴它。这一切只是需要时间而已。新古典主义的网页设计是一中先进的方法——老雅虎网站对我们来说确实是丑陋而非美好的。但是从现在开始再过六年、七年呢?(也许)这种形式将再次时髦起来。

VIII. 此后(的事),还有谁了解?

好了,其实我们还挺了解的。它可能会是某种形式的新罗马式或新哥特式。一些全新的事物。艺术在以复兴的形式不断重演着。但最终会是怎样?新的技术和新的世界观将以我们在今天无法想象的形式来到我们面前。

然后,事情会变得不可思议起来。1472438371-5595-TB1FVRbKFXXXXblXFXXwu0bFXXX

图片来源:巨石阵由jborsboom提供;帕台农神庙由AJ Alfieri-Crispin提供;玛丽亚·拉赫修道院由Berthold Werner提供;兰斯大教堂由Archigeek提供;令人震惊的Maroon 5动图由Nick提供;香格里拉·罗通达别墅由Timothy Brown提供;四泉圣嘉禄堂由wsifrancis提供;先贤祠由Marko Kudjerski提供;古根海姆博物馆由Wojtek Gurak提供。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/17086/

(0)
iouedioued
上一篇 2016-08-29 10:34
下一篇 2016-08-29 12:10

相关推荐

  • Coolors极简配色推荐

    设计人为本,颜色舒适人眼才不会造成视觉疲劳。 在设计网页的时候难免总会盲目的选择颜色然后加以尝试,难免会造成很多无用功。 对于新手设计师coolors帮了很大的忙。 这是一个超级简单的颜色搭配生成器。 进入的时…

    2015-01-02
  • 淘宝UED的设计流程

    国内知名 UED 团队的设计流程是怎样的? 淘宝 UED 的设计流程图 <img src="https://pic4.zhimg.com/75bcc954c5e1695eeeeb1710eb62c947_b.jpg" data-rawwidth="4000" data-rawheight="1678" clas…

    2016-06-01
  • 微信商城UI界面创意分享!

    最近做了一套新的商城页面~ 欢迎大家指点~ 做人要厚道,转载请注明文章来源: https://www.iamue.com/2946

    2015-01-20
  • 【OMG】央视新LOGO竟然换成这样......

    新年伊始,央视竟然暗搓搓的换了LOGO...... "oh,my god!"朋友在微信里惊呼。 “你抽抽了么~!”我说。 “央视居然~~居然~~居然换LOGO了” 我迅雷不及掩耳盗铃之势,问了度娘 果真是的啊,暗想 “我擦嘞,央视也在赶时髦…

    2016-01-08
  • UI设计之4个字体设计小技巧

    内容在设计中起着至关重要的作用。不管你是从事网站设计、移动应用程序设计、还是可穿戴ui设计,你的设计必须能够清楚地传递出设计的意图和目的。由于文本是基于沟通的目的,所以需要对字体设计有着深刻的理解。当然,…

    2015-05-14
  • 登录表单的那些事儿

     雅婵总结并供稿于我是UE网,转载请注明来自我是UE网。

    2015-06-12
  • 昨晚,微软发布了一款设计师神器!业界一片哭声!

    #交互学堂#昨晚,微软又硬了。 发布了一部怪兽,把毒少毒死了。。。 这就是我要的桌面电脑啊!!! 一体机—— surface studio (这是配置:Core i7处理器,GeForce 980M显卡,32GB内存+2TB混合硬盘,3:2 TrueColor…

    2016-10-27
  • PC端web管理系统的交互设计规范分享

    前些时间正准备写交互规范,就去网上搜罗了一下交互规范的一些范本,想作为借鉴参考,但却没能找到比较满意的,找到了一些零散的内容(当然有些还是有参考价值的),所以就觉得交互规范这方面的内容比较少,就来此…

    交互设计 2016-10-18
  • 相当便利的UI交互演示工具

    做为一个移动端的互联网产品设计师,天天心心念的就是如何做出一款款能让用户爱不释手的应用,想来轻松,做起来点点滴滴都是功能、美观和用户体验的契合难题,在一个个经典创意最终拍板前,产品原型及其演示体验,…

    UI设计 2016-06-08
  • 在Sketch里怎么切图?

    有了Sketch之后,切图变得越来越简单,之前在Sketch教程里有写过切图方面的教程,但还是有很多人想知道到底怎么用Sketch切图,这篇教程就作为一个Sketch的切图大综合,详细的讲一讲怎样在Sketch里面切图,以及切图…

    2015-11-30