Vitruvius可以教给我们有关网站设计的知识

没有人能逃脱古代大师的魔爪，他们的阴影笼罩着哲学、文学、建筑、战争，还有……网站设计？信不信由你，是的。尽管柏拉图在《理想国》的最终草案中臭名昭著地省略了CSS Grid，但是老头们仍然可以教我们学习很多有关Web开发的知识。

创新互联公司是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：做网站、成都网站设计、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。

今天的讲座是关于架构的，以及它的一些核心原则如何应用于全球网络。架构术语在Web开发中并不罕见，这是有充分理由的。在许多方面，Web开发人员都是数字架构师。本文将重点介绍罗马建筑师维特鲁威（Vitruvius），以及他的原理如何以及应该如何应用于网站设计上。

这将特别关注维特鲁威三合会，这是任何建筑物必不可少的三个特质：耐久性（firmitas），有用性（utilitas）和美感（venustas）。熟悉这些术语以及它们在实践中的含义将有助于改善您的网站设计。

维特鲁威

Marcus Vitruvius Pollio是生活在公元前一世纪的罗马建筑师、土木工程师和作家。他主要因他在建筑方面的著作《De architectura》而被人们铭记。维特鲁威向当时的奥古斯都皇帝讲述了他对建筑理论、历史和方法的看法。

Vitruvius posing在LinkedIn头像

《建筑论》是唯一一本从古代流传下来的关于建筑的专著，至今仍是设计的试金石。正如你可能猜到的，列奥纳多·达·芬奇的《维特鲁威人》的灵感来自维特鲁威关于比例的作品。

对于那些有兴趣了解建筑学的人，De architecture的全文可以在Project Gutenberg上免费获得。这篇文章不打算概括整本书。这有几个原因。首先，要讲的内容太多了。其次，并没有完全忘记这是一本网站设计杂志的事实。我们将在维特鲁威三位一体(Vitruvian triad)上进行磨砺，这是一种适用于架构之外的设计标准。

古人有一种把话题缩减到最基本——你可以说是最基本的——本质的本领。维特鲁威三合会就是这样一个例子。还有其他建筑师值得学习，其他设计理论值得熟悉，但维特鲁威提供了一个特别简洁的ABC，它适用于网络和寺庙。

维特鲁威三合会

在De architectura中，维特鲁威（Vitruvius）确定了任何建筑都必不可少的三种品质。自几百年来，他们将自己确立为他的“黄金法则”。如果您想让Vitruvius开心（当然可以这么做），则每当您做某事时，都应努力做到：

有用的 （utilitas）

耐用 （firmitas）

美丽 （维纳斯塔斯）

在设计时考虑到这三点将会提升你的作品，具备其中一种特质是很好的。有两个是好的 三者在一起是神圣的。神圣似乎是最好的选择。让我们分解这三种品质中的每一种原则上的含义，然后将其应用于网站设计中。

有用的（UTILITAS）

原则上

建筑物的设计和建造是有原因的，无论目的是什么，它始终应该是建筑师的心意。如果结构不满足其目的，那么它就不会很有用。例如，没有舞台的剧院宁可丢球。

Vitruvius认为，“当公寓的布置无瑕疵且不会出现使用障碍时，以及每类建筑物都应分配适当且适当的暴露量时，将确保有用。”

尽管语言不同，您之前也听说过。维特鲁威（Vitruvius）是关于形式应该如何发挥作用的祖父。“摩天大楼之父”路易斯·沙利文（Louis Sullivan）于1896年创造了这个名词。沙利文应该将这个想法归因于维特鲁威（Vitruvius），尽管对此的记录令人怀疑。无论如何，这就是实用程序的根源。

目的：图书馆

不同类型的建筑物有不同的要求，事后考虑这些要求而设计的建筑物可能会令人失望。这听起来似乎很明显，但是这个世界上有足够的白象值得谨慎。迷宫式购物中心和操场上高导电性的金属圆顶在投资者的演讲中可能看起来很酷，但是它们并没有真正有用。

这也意味着结构的各个部分应逻辑连接，换句话说，它们应该易于访问和导航。如果建筑物有用且易于使用，那将是一个很好的开始。

线上

Utilitas也适用于网站设计，每个网站都有其目的。该目的可能是实用的，例如搜索引擎或天气预报，也可能是艺术的，例如交互式的故事或图形设计作品集。不管它是什么，都有其存在的理由，并且如果考虑到这一原因进行设计，则对访问该站点的任何人都更有帮助。

内容先于设计，设计在没有内容的情况下不是设计，而是装饰。

-zeldman（@zeldman）2008年5月5日

一个百科全书，你会期望容易搜索和导航，与干净的呈现和适当引用的信息。例如，维基百科(Wikipedia)就为所有这些选项打上了勾号。它相当于网络上的一个巨大图书馆，一直延伸到不起眼的部门和员工在幕后争吵。它的正面和中心都是有用的，所以它的核心设计自它成立以来一直保持不变。

或者，出版物的目的是产生对其读者有价值或感兴趣的原创内容。为了发挥作用，网站的出版物应该以一种生动而直接的方式呈现所述内容，特别关注不同设备的阅读体验。一个内容精彩但设计糟糕的网站会破坏它自身的有用性。

明确的目的导致清晰的设计，如果您的目的是朝几个不同的方向发展，那么网站也是如此。对所有人来说，您不可能一事无成，尝试毫无意义。有用性倾向于满足特定需求，而不是全部需求。

说到实用性，您不能将网站视为抽象事物。像建筑物一样，人们会访问和使用网站，因此在设计网站时应首先考虑其他因素。投资者，广告商和所有其他卑鄙的行为者将有自己的时间，但是如果您过早地让他们使用，则会损害网站的实用性。当出版物将多个页面上的文章分开纯粹是为了增加流量时，它的用处就会降低。当电子商务平台似乎更关心减少转换渠道而不是提供有关其产品的诚实信息时，其实用性就会降低。在这种情况下，目的已变得次要，结果使设计遭受损失。

我们认识到搜索引擎设计的标志，就像我们认识剧院，图书馆或运动场一样。它们的形式围绕其功能而定。

此外，就像建筑物一样，网站应该易于浏览。确保网站的有用性需要周密的计划。在架构师拥有平面图和模型的地方，Web开发人员具有站点地图，线框等。这些使我们能够及早发现布局问题并加以解决。

在这里，从不同的角度看设计非常重要。调色板是否解决了色盲和文化差异？毕竟，颜色在不同的地方意味着不同的事物。使用键盘和屏幕阅读器浏览起来容易吗？并非每个人都以与您相同的方式浏览网络。当然，对尽可能多的人有用会更好吗？没有很好的借口不能同时访问和包容网站。

耐用（FIRMITAS）

原则上

Firmitas归结为应该持续发展的想法。几年后倒塌的非常有用的结构将被广泛视为失败。精心制作的建筑物可以持续数百年，甚至数千年。具有讽刺意味的是，维特鲁威（Vitruvius）自己的建筑都没有幸存下来，但这一点仍然存在。

该原理涵盖了架构的更多方面，而不仅仅是马上想到的。

当地基扎实扎实地选择材料时，将确保耐用性。

—维特鲁威

换句话说，请仔细选择目的地，打好基础并使用适当的材料。

可以肯定地说，长城是经久耐用的，其中有些路段已有2,000多年的历史了。安德里亚·利奥帕迪（Andrea Leopardi）摄影。

我们所有人都本能地了解寿命是良好设计的标志。它反映了优质的材料，精心的计划和精心的维护。罗马的万神殿或中国的长城，证明了耐用的设计，以其长寿和威严着称。

该原则还涉及环境因素。是否在设计时充分考虑了天气，地震，侵蚀等因素的影响？如果没有，那可能不是一座长期的建筑...

在工程师削减成本之后，塔科马海峡大桥的耐用性得到了测试。剧透：它崩溃了。

令人放心的是，您可以指望一种不会崩溃的结构，从长远来看，它通常会变得更便宜。坚固的建筑位于坚固的基础上，并使用适合其目的和环境的材料。并非经久耐用的建筑物通常是精美的电影布景。不久，它们就瓦砾了。

线上

时间似乎更快地通过在网络上，但原则firmitas仍然适用。鉴于在线生活无休止的动荡，将您的旗帜插在坚固的东西上是很有意义的。在这三种品质中，它是用户最不可见的一种，但是如果没有它，其他所有内容都会崩溃。

这始于内在的考虑，基础必须牢固，该网站将去哪里？内容管理系统合适吗？您的网络托管服务提供商可以处理预期的流量（以及更多流量），并且仍然运行平稳吗？正如从一个CMS迁移到另一个CMS的任何人都可以告诉您的那样，如果可能的话，第一次正确设置它是值得的。

这就是一个崩溃的网站

您使用的网络技术也很长寿，新的框架在当时似乎是个好主意，但是如果一个站点需要存在很多年，则最好使用HTML，CSS和JavaScript以及结构化数据之类的普遍支持的SEO标记。就像在建筑中一样，要使建筑持久，通常意味着要使用既定的材料而不是新奇的材料。

耐用性扩展到设计，网页必须以使建筑师哭泣的方式弯曲，拉伸和弯曲。响应式网站是一个持久的网站。随着新设备（例如可折叠设备）和标记的出现出现在我们面前，网站需要能够大步向前。架构师不会为地震而cross之以鼻，那么为什么Web设计师应该回避Web的危害呢？出色的设计面对环境挑战；它不能避免。

随着网站的发展，其用户将逐渐熟悉其设计。发生的次数越多，进行全面更改就越让人头疼。如果站点从一开始就经过精心设计，那么翻修比翻新的可能性更大，即使更新，外观仍然很熟悉。从这个意义上说，明确的目的无可估量地提高了站点的持久性。这本身就是一种基石，有助于在变化时期保持站点的坚固。即使是最好的网站也需要不时更新。

Smashing Magazine 2017年的重新设计巩固了幕后元素，例如内容管理，工作板和电子商务，同时保持了前端角色的熟悉性。

还有可持续性的问题，是否对该站点的商业现实给予了应有的关注？换句话说，票房在哪里？无论是付费专区，广告还是会员系统，将它们纳入设计过程都不会感到羞耻。它们不是站点的目的，但是有助于使站点持久。

美丽（维纳斯塔斯）

原则上

正如维特鲁威（Vitruvius）所说，“眼睛总是在寻找美。” 追求它是一种完全合法的品质。

根据De architectura所说，“当作品的外观令人愉悦且品味良好，并且其成员按照正确的对称原则按比例分配时，就会发生美感。”

建筑物不仅有用且做工精良，也应令人赏心悦目。有些甚至可能触动心脏。

如果您想设计一个好的神庙，维特鲁威（Vitruvius）对此也很有用。

维特鲁威（Vitruvius）概述了有助于使建筑物美丽的几种特质。对称和比例使他特别感兴趣（因此，达·芬奇的《维特鲁威人》）。痴迷于将形状融入所有事物的过程比图形设计要早几千年。

应该考虑结构中的每个元素与附近的其他元素以及所构建环境的关系。维特鲁威（Vitruvius）用一个词概括了这种相互作用：eurythmy，希腊语中的和谐节奏。（如果您想知道的话，英国流行二重奏组Eurythmics的名字来自同一术语。）Vitruvius在建筑环境中对其定义如下：

Eurythmy是成员调整中的美丽和健身。当工件的高度与宽度相称，宽度与长度相称时，或者当它们全部对称地对应时，就会发现这种情况。

就像音乐一样，建筑物具有节奏感。它们的各个部分形成一种和谐。一栋美丽的建筑可能像是沙滩男孩合唱团的大理石雕刻品，而丑陋的建筑就像黑板上的钉子。

对于那些好奇的美丽建筑看起来是什么样的人，McMansion Hell是一个不错的起点。

不仅比例合理且对称，单个作品还可以通过其他方式增强美感。优秀的手工艺是美丽的，对细节的关注也是如此。适合结构的材料也很漂亮-反映了设计师的合理判断和良好品味。

装饰是可以接受的，但是它必须与结构的核心设计相辅相成-考虑圆柱雕刻，铺路图案等。所有这些小细节和注意事项都构成了整个建筑物。当他们都在一起时，这是惊人的。

线上

漂亮的网站遵循许多与架构相同的标准。比例和对称性是有吸引力的设计的支柱。网格系统具有相同的目的，即清晰，吸引人地组织内容。除此之外，还有颜色，版式，图像等等问题，所有这些问题都会影响到网站的美感或缺乏美感。

venustas与Web设计特别相关的一个方面是用户如何与之交互。除了美观之外，网站还具有娱乐性，甚至令人惊讶。坐在那里并受到钦佩是一回事，邀请游客成为美丽的一分子是另一回事。

布鲁诺·西蒙（Bruno Simon）的创意独特网站设计邀请访问者使用箭头键四处行驶。

Google的交互式Doodle是这方面的另一个好例子-且不那么令人生畏。他们涵盖了所有主题，邀请用户玩游戏，学习和娱乐。它本身就很好，并且与Google作为信息源的目的保持一致。

具有讽刺意味的是，这只是交互式事物的GIF而非交互式事物本身，但是您可以在此处看到完整的Doodle以及其制作的详细信息。

随着网络继续向移动优先体验转变，用户可以从字面上触摸他们访问的网站，应该记住，美丽与所有感官有关，而不仅仅是视觉。

至于“环境”，网站设计就是显示它的设备。与建筑物不同，网站并非始终具有统一的外观。为美观起见，它们必须反应灵敏，改变大小和比例以配合设备。它本身很令人愉悦，并且很好地完成了形状转换，使其以自己的方式变得美丽。

平衡法

维特鲁威（Vitruvius）的utilitas，firmitas和venustas规则之所以能够持久，是因为它们共同发挥作用，而因为三者之间的协同合作，它们却被视为三合会。实现这三个目标是一个平衡的举动。如果它们向不同的方向拉动，那么所制造的任何东西的质量都会受到损害。例如，漂亮却无法使用的是糟糕的设计。另一方面，当它们一起工作时，结果可能远大于它们各部分的总和。

与建筑一样，这需要鸟瞰。这些片段不能一次完成，而必须牢记其他。

建筑师在形成构想后，即在开始工作之前，就对将其区分开来的美感，便利性和适当性有了明确的认识。

—维特鲁威

毫无疑问，细节将会改变，但是和谐不会改变。

这扩展到制作网站的人，与建筑一样，网站通常必须平衡客户，建筑师和建筑商的需求，更不用说投资者，金融家，统计学家等等。为了使网站和谐，负责构建网站的人员也是如此。

这并不是说，不管项目如何，这三种品质都是同等重要的-只是应该对每种品质都给予适当的考虑。埃菲尔铁塔的用处似乎微不足道，胡佛水坝的美景也是如此，这很好。如果网站是装饰性的或临时性的，则不必仅仅局限于此。utilitas，firmitas和venustas的性质根据项目而改变。像大多数值得遵循的规则一样，当您情绪高涨时，不要害怕弯曲甚至打破它们。

网站是一座圣殿

Web开发人员是Internet的建筑师，网站是其建筑物。维特鲁威（Vitruvius）指出，建筑师不是（实际上不可能）是各个领域的专家。相反，他们是各行各业的杰作（我的措词，不是他的话）。要实现三合会，最好是对许多主题有很好的掌握，而不是拥有一个专业知识：

让他受教育，熟练使用铅笔，讲几何，了解许多历史，对哲学家给予关注，了解音乐，了解一些医学知识，了解法学家的意见，并熟悉天文学和天文学理论。

其中一些的相关性是显而易见的，而其他的则不那么明显，但这对架构师和Web开发人员都同样有价值。几何决定比例和布局 ； 历史将设计置于上下文中，并确保按其原意应理解它们；哲学帮助我们诚实守信地处理项目；音乐使我们意识到声音的作用 ； 医学使人们想到可及性，以及对眼睛，耳朵甚至拇指的潜在疲劳；而现在法律织机大于以往任何时候。关于天堂的理论可能有些绵延，但您明白了。

无论您是建造体育馆还是创意独特网站设计，维特鲁威三合会都是值得使用的标准。并非每个人都拥有一支专家团队（或为一支专家团队提供预算），即使我们做到了，为什么还要否认自己强大的设计需要广泛的知识呢？我们可以建造Levittown，也可以建造罗马，以及两者之间的一切。有用，耐用，美观的Internet听起来对我们来说都很重要。