古代的大师们是逃不掉的。 他们的影子笼罩着哲学、文学、建筑、战争和……网页设计？ 信不信由你，是的。 尽管柏拉图臭名昭著地从共和国的最终草案中省略了 CSS Grid，但仍然有很多老头可以教我们有关 Web 开发的知识。

今天的讲座是关于架构的，以及它的一些核心原则如何应用于万维网。 架构术语在 Web 开发中并不少见，这是有充分理由的。 在许多方面，Web 开发人员都是数字架构师。 这篇文章将重点介绍罗马建筑师维特鲁威，以及他的原则如何能够而且应该应用于网站。

这将特别关注维特鲁威三合会，即任何建筑都必不可少的三种品质：耐用性（ firmitas ）、实用性（ utilitas ）和美观（ venustas ）。 熟悉这些术语——以及它们在实践中的含义——将有助于使您的网站变得更好。

维特鲁威

马库斯·维特鲁威·波利奥（Marcus Vitruvius Pollio）是一位罗马建筑师、土木工程师和作家，生活在公元前一世纪。 人们记住他主要是因为他关于建筑的著作《建筑学》 。 维特鲁威向当时的奥古斯都皇帝发表讲话，概述了他对建筑理论、历史和方法的看法。

《建筑学》是唯一一部从古代幸存下来的关于建筑的论文，直到今天仍然是设计的试金石。 正如您可能猜到的那样，达芬奇的维特鲁威人的灵感来自维特鲁威关于比例的著作。

对于那些对建筑兔子洞感兴趣的人，可以在 Project Gutenberg 上免费获得De architecture的全文。 这篇文章不会试图总结整本书。 这有几个原因。 首先，要涵盖的内容非常多。 其次，我并没有完全忘记这是一本网页设计杂志。 我们将深入研究维特鲁威三合会，这是一种适用于建筑之外的设计标准。

古人有将话题简化为基本要素的诀窍。 维特鲁威三合会就是这样一个例子。 还有其他值得研究的建筑师，其他值得熟悉的设计理论，但 Vitruvius 提供了一个特别简洁的 ABC，它既适用于 Web，也适用于寺庙。

维特鲁威三合会

在De architectureura中，维特鲁威确定了任何建筑都必不可少的三个品质。 几个世纪以来，他们将自己确立为他的“黄金法则”。 如果你想让维特鲁威开心——你当然会这样做——每当你做一件事时，你都应该努力去做：

• 有用的（实用程序）
• 耐用(firmitas)
• 美丽（金星）

考虑到这三件事进行设计将提升您的工作。 拥有这些品质之一很好； 有两个很好； 把这三个放在一起是神圣的。 神圣似乎是最好的选择。 让我们在原则上分解这三种品质中的每一种的含义，然后将它们应用于网页设计。

有用的（实用程序）

原则上

建筑物的设计和建造是有原因的。 无论目的是什么，它都应该始终是建筑师的想法。 如果该结构不符合其目的，那么它很可能不会很有用。 例如，没有舞台的剧院宁愿丢球。

根据维特鲁威的说法， “当公寓的布置完美无缺且不妨碍使用时，当每一类建筑物都被分配到适当和适当的暴露位置时，才能保证有用性。”

你以前听过这个，尽管语言不同。 维特鲁威 (Vitruvius) 是喋喋不休地强调形式应该如何遵循功能的祖父。 “摩天大楼之父”路易斯·沙利文（Louis Sullivan）在 1896 年创造了这个特殊的术语。据推测，沙利文将这个想法归功于维特鲁威，尽管对此的记录是可疑的。 无论如何，这就是utilitas归结为的原因。

不同类型的建筑有不同的要求。 事后才考虑到这些要求的建筑可能会令人失望。 这听起来很明显，但这个世界上有足够多的白象值得谨慎。 迷宫般的购物中心和游乐场中的高导电金属圆顶在投资者介绍中可能看起来很酷，但最终它们并没有非常有用。

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

在线的

Utilitas也适用于网页设计。 每个网站都有一个目的。 这个目的可能是实用的，比如搜索引擎或天气预报，也可能是艺术的，比如互动故事或平面设计作品集。 不管它是什么，它都有存在的理由，如果它的设计考虑到这个原因，它更有可能对访问该站点的任何人有用。

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

— zeldman (@zeldman) 2008 年 5 月 5 日

您期望的百科全书易于搜索和导航，提供清晰呈现和正确引用的信息。 例如，维基百科勾选了所有这些框。 它相当于一个巨大的图书馆的网络，一直到不起眼的部分和幕后争吵的工作人员。 它以实用性为中心，因此其核心设计自成立以来一直保持一致。

或者，出版物的目的是制作对读者有价值或感兴趣的原创内容。 为了有用，网站的出版物将以生动和直接的方式呈现所述内容，特别关注各种设备的阅读体验。 具有精彩内容和糟糕设计的网站会破坏其自身的实用性。

明确的目的导致明确的设计。 如果一个目的让您朝着几个不同的方向发展，那么网站也是如此。 不可能对所有人都是万能的，尝试是没有意义的。 有用性倾向于满足特定的需要，而不是所有的需要。

当谈到有用性时，您不能将网站视为抽象的东西。 像建筑物一样，网站是由人们访问和使用的，在设计时应该首先考虑到它们。 投资者、广告商和所有其他肮脏的演员都会有他们的时间，但如果你让他们过早进入，网站的实用性就会受到影响。 当出版物将文章分成多个页面纯粹是为了增加流量时，它的有用性就会降低。 当电子商务平台似乎更关心将您推向转化渠道而不是提供有关其产品的诚实信息时，它的有用性就会降低。 在这种情况下，目的变得次要，设计因此受到影响。

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

通过不同的镜头观察设计在这里尤为重要。 调色板是否考虑了色盲和文化差异？ 毕竟，颜色在不同的地方意味着不同的东西。 使用键盘和屏幕阅读器浏览是否容易？ 并非每个人都以与您相同的方式浏览网络。 当然，对尽可能多的人有用会更好吗？ 网站不具备可访问性和包容性是没有什么好的借口的。

### 耐用（firmitas）#### 原则上

Firmitas归结为“事物应该经久耐用”的想法。 几年后倒塌的非常有用的结构将被广泛认为是失败的。 一个制作精良的建筑可以使用几个世纪，甚至千年。 具有讽刺意味的是，维特鲁威自己的建筑都没有幸存下来，但这一点仍然存在。

这个原则包含的架构比可能立即想到的更多方面。

当地基被带到坚实的地面和明智而自由地选择材料时，耐久性将得到保证。
— 维特鲁威

也就是说，要慎重选择目的地，打好基础，用合适的材料。

我们都本能地理解长寿是良好设计的标志。 它体现了优质的材料、精心的规划和热爱的维护。 罗马的万神殿，或中国的长城，是耐用设计的证明，以其长寿和威严而著称。

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

令人欣慰的是，您可以指望一个结构暂时不会倒塌，从长远来看，它通常会更便宜。 耐用的建筑坐落在坚固的地基上，并使用适合其用途和环境的材料。 设计不耐用的建筑物通常是美化的电影场景。 不久，它们就变成了瓦砾。

在线的

时间在网络上似乎过得更快，但Firmitas的原则仍然适用。 鉴于在线生活的无尽动荡，将您的旗帜插在坚固的东西上是有意义的。 在这三种品质中，它是用户最不可见的一种，但没有它，其他一切都会分崩离析。

这从引擎盖下的考虑开始。 基础一定要牢固。 网站将走向何方？ 内容管理系统是否合适？ 您的网络托管服务提供商能否处理预期的流量（以及更多流量）并且仍能顺利运行？ 任何从一个 CMS 迁移到另一个 CMS 的人都会告诉您，如果可能的话，第一次就做好是值得的。

您使用的网络技术也很长寿。 新框架在当时似乎是个好主意，但如果一个网站需要存在多年，那么依赖 HTML、CSS 和 JavaScript 以及普遍支持的 SEO 标记（如结构化数据）可能是有意义的。 与建筑一样，建造经久耐用的东西通常意味着使用成熟的材料而不是新奇的材料。

耐用性延伸到设计。 网页必须以会让建筑师哭泣的方式弯曲、拉伸和扭曲。 响应式网站是一个持久的网站。 随着新设备（例如可折叠设备）和标记进入我们，网站需要能够从容应对。 建筑师不会交叉双臂为地震而生闷气，那么网页设计师为什么要回避网络的危害呢？ 伟大的设计直面环境挑战； 它不会避免它们。

随着网站的发展，它的用户会逐渐熟悉它的设计。 发生的越多，进行大规模更改就越令人头疼。 如果一个网站从一开始就精心设计，那么翻新比重建更有可能，即使更新，外观仍然很熟悉。 从这个意义上说，明确的目的极大地帮助了网站的持久性。 这本身就是一种基石，有助于在变化时期保持网站的坚固。 即使是最好的网站也需要不时更新。

还有可持续性的问题。 是否对网站的商业现实给予了应有的关注？ 换句话说，票房在哪里？ 无论是付费墙、广告还是会员系统，将这些纳入设计过程并不丢人。 它们不是网站的目的，但它们有助于使其持久耐用。

美丽（金星）

原则上

正如维特鲁威所说，“眼睛总是在寻找美。” 这是一个完全合法的品质目标。

根据De architectura的说法， “当作品的外观令人愉悦且有品位，并且其成员根据正确的对称原则适当比例时，就会产生美感。”

除了有用且制作精良之外，建筑物还应该令人赏心悦目。 有的甚至会触动人心。

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

结构的每个元素都应与附近的其他元素以及正在建造的环境相结合。 维特鲁威用一个词总结了这种相互作用：eurythmy，希腊语中和谐节奏的意思。 （英国流行二人组 Eurythmics 的名字来源于同一个词，如果你想知道的话。）维特鲁威在建筑语境中对它的定义如下：

Eurythmy是成员调整中的美丽和健身。 当作品的成员的高度适合其宽度时，宽度适合其长度，总之，当它们都对称地对应时，就会发现这种情况。

像音乐一样，建筑有节奏； 他们各自的作品形成一种和谐。 美丽的建筑可能是雕刻的大理石，相当于海滩男孩合唱团，而丑陋的建筑就像黑板上的钉子。

除了匀称和对称外，单件还可以通过其他方式增强美感。 好的工艺是美丽的，对细节的关注也是如此。 适合结构的材料也很漂亮——反映了设计师的合理判断和良好的品味。

装饰是可以接受的，但它必须补充结构的核心设计——想想柱子雕刻、铺路图案等。所有这些小细节和考虑因素都构成了整个建筑。 当他们一起跌倒时，这令人叹为观止。

在线的

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

为了让球滚动，这里有一些关于Smashing Magazine的资源：

• Cameron Chapman 的“设计师色彩理论”
• “在 Photoshop、Sketch 和 Affinity Designer 中驯服高级调色板”，作者：Marc Edwards
• Jeremiah Shoaf 的“Web 字体的好、坏和伟大的例子”
• 刘一辉的“品牌插图系统：绘制强烈的视觉识别”
• Andy Clarke 的灵感设计决策系列。

venusta 与网页设计特别相关的一个方面是用户如何与之交互。 除了好看之外，网站还有可能变得有趣，甚至令人惊讶。 坐在那里被欣赏是一回事，邀请游客成为美丽的一部分是另一回事。

谷歌的交互式涂鸦是另一个很好的——而且不那么令人生畏的——例子。 他们涵盖了各种主题，邀请用户玩游戏、学习和娱乐。 它本身就很好，并且符合 Google 作为信息来源的目的。

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

至于“环境”，网页设计就是显示它的设备。 与建筑物不同，网站并非始终保持一种形状。 为了美观，它们必须反应灵敏，改变尺寸和比例以配合设备。 这本身就令人愉悦，并且做得好，形状转换本身就会以自己的方式变得美丽。

### 平衡法

Vitruvius 的utilitas 、 firmitas和venusta规则之所以能够持久，是因为它们起作用，它们作为一个三元组经久不衰，因为它们一起工作得最好。 实现这三者是一种平衡行为。 如果他们朝不同的方向拉动，那么正在制造的任何东西的质量都会受到影响。 例如，漂亮但无法使用的是糟糕的设计。 另一方面，当它们一起工作时，结果可能远远大于它们各部分的总和。

与建筑一样，这需要鸟瞰。 这些作品不能一次完成，它们必须与其他人一起完成。

建筑师一旦形成构想，在开始工作之前，就对区分它的美感、便利性和适当性有一个明确的概念。
— 维特鲁威

毫无疑问，细节会改变，但和谐不应该。

这延伸到制作网站的人。 与建筑网站一样，通常必须平衡客户、建筑师和建筑商的需求——更不用说投资者、金融家、统计学家等了。 网站要和谐，负责建设的人也要和谐。

这并不是说无论项目如何，这三种品质都同等重要——只是应该对每一种都给予适当的考虑。 埃菲尔铁塔的用处似乎微不足道，胡佛水坝的美丽也是如此，这很好。 如果一个网站是装饰性的或临时性的，它不必多于此。 utilitas 、 firmitas和venustas本身的性质会因项目而异。 就像大多数值得遵循的规则一样，当心情带你走时，不要害怕弯曲——甚至打破——它们。

我的网站是一座寺庙

Web 开发人员是 Internet 的建筑师，而网站是他们的建筑物。 维特鲁威强调说建筑师不是——实际上不可能是——各个领域的专家。 相反，他们是万事通（我的措辞，不是他的）。 要实现三合会，最好掌握许多科目而不是一门专业：

让他受过教育，熟练使用铅笔，受过几何学，了解很多历史，关注哲学家，懂音乐，有一些医学知识，了解法学家的意见，熟悉天文学和地球理论天堂。

其中一些的相关性是显而易见的，而另一些则不那么明显，但对于架构师和 Web 开发人员来说，这一切都很有价值。 几何形状决定比例和布局； 历史将设计置于上下文中，并确保它们被理解为它们的本意； 哲学帮助我们以诚实和合乎道德的方式处理项目； 音乐唤醒我们对声音的作用； 医学考虑可及性，以及对眼睛、耳朵甚至拇指的潜在压力； 现在法律比以往任何时候都更加重要。 天堂的理论可能有点牵强，但你明白了。

这里还有更多链接可以帮助您顺利上路：

• Nick Babich 的“使用布局网格构建更好的 UI 设计”
• 亚历克斯·比格曼的“设计网格的历史”
• '什么报纸可以教给我们关于网页设计的知识' 由你真正
• Rachel Andrew 的“CSS 网格布局的最佳实践”
• “使用音频进行设计：声音有什么用？” 凯伦考尚斯基
• Javier Cuello 的“界面设计中的不完美之美”
• Jeremy Keith 的“弹性网页设计之路”。

不是单靠这个理论就能让你到达那里。 在实践中学习是无可替代的。 正如斯坦福哲学百科全书所指出的那样，“维特鲁威式的建筑图景植根于制造、做事和手工艺的经验知识。” 或者更好的是，正如维特鲁威自己所说：“知识是实践和理论的产物。”

无论您是在建造体育馆还是投资组合网站，维特鲁威三合会都是值得使用的标准。 不是每个人都拥有专家团队的奢侈（或预算），即使我们做到了，为什么要否认强大设计所需的知识广度？ 我们可以建造莱维敦，也可以建造罗马，以及介于两者之间的一切。 一个有用、耐用、漂亮的互联网对我来说听起来很划算。