Vitruvius可以教給我們有關(guān)網(wǎng)站設(shè)計的知識

沒有人能逃脫古代大師的魔爪，他們的陰影籠罩著哲學(xué)、文學(xué)、建筑、戰(zhàn)爭，還有……網(wǎng)站設(shè)計？信不信由你，是的。盡管柏拉圖在《理想國》的最終草案中臭名昭著地省略了CSS Grid，但是老頭們?nèi)匀豢梢越涛覀儗W(xué)習很多有關(guān)Web開發(fā)的知識。

創(chuàng)新互聯(lián)公司是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：做網(wǎng)站、成都網(wǎng)站設(shè)計、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

今天的講座是關(guān)于架構(gòu)的，以及它的一些核心原則如何應(yīng)用于全球網(wǎng)絡(luò)。架構(gòu)術(shù)語在Web開發(fā)中并不罕見，這是有充分理由的。在許多方面，Web開發(fā)人員都是數(shù)字架構(gòu)師。本文將重點介紹羅馬建筑師維特魯威（Vitruvius），以及他的原理如何以及應(yīng)該如何應(yīng)用于網(wǎng)站設(shè)計上。

這將特別關(guān)注維特魯威三合會，這是任何建筑物必不可少的三個特質(zhì)：耐久性（firmitas），有用性（utilitas）和美感（venustas）。熟悉這些術(shù)語以及它們在實踐中的含義將有助于改善您的網(wǎng)站設(shè)計。

維特魯威

Marcus Vitruvius Pollio是生活在公元前一世紀的羅馬建筑師、土木工程師和作家。他主要因他在建筑方面的著作《De architectura》而被人們銘記。維特魯威向當時的奧古斯都皇帝講述了他對建筑理論、歷史和方法的看法。

Vitruvius posing在LinkedIn頭像

《建筑論》是唯一一本從古代流傳下來的關(guān)于建筑的專著，至今仍是設(shè)計的試金石。正如你可能猜到的，列奧納多·達·芬奇的《維特魯威人》的靈感來自維特魯威關(guān)于比例的作品。

對于那些有興趣了解建筑學(xué)的人，De architecture的全文可以在Project Gutenberg上免費獲得。這篇文章不打算概括整本書。這有幾個原因。首先，要講的內(nèi)容太多了。其次，并沒有完全忘記這是一本網(wǎng)站設(shè)計雜志的事實。我們將在維特魯威三位一體(Vitruvian triad)上進行磨礪，這是一種適用于架構(gòu)之外的設(shè)計標準。

古人有一種把話題縮減到最基本——你可以說是最基本的——本質(zhì)的本領(lǐng)。維特魯威三合會就是這樣一個例子。還有其他建筑師值得學(xué)習，其他設(shè)計理論值得熟悉，但維特魯威提供了一個特別簡潔的ABC，它適用于網(wǎng)絡(luò)和寺廟。

維特魯威三合會

在De architectura中，維特魯威（Vitruvius）確定了任何建筑都必不可少的三種品質(zhì)。自幾百年來，他們將自己確立為他的“黃金法則”。如果您想讓Vitruvius開心（當然可以這么做），則每當您做某事時，都應(yīng)努力做到：

有用的 （utilitas）

耐用 （firmitas）

美麗 （維納斯塔斯）

在設(shè)計時考慮到這三點將會提升你的作品，具備其中一種特質(zhì)是很好的。有兩個是好的 三者在一起是神圣的。神圣似乎是最好的選擇。讓我們分解這三種品質(zhì)中的每一種原則上的含義，然后將其應(yīng)用于網(wǎng)站設(shè)計中。

有用的（UTILITAS）

原則上

建筑物的設(shè)計和建造是有原因的，無論目的是什么，它始終應(yīng)該是建筑師的心意。如果結(jié)構(gòu)不滿足其目的，那么它就不會很有用。例如，沒有舞臺的劇院寧可丟球。

Vitruvius認為，“當公寓的布置無瑕疵且不會出現(xiàn)使用障礙時，以及每類建筑物都應(yīng)分配適當且適當?shù)谋┞读繒r，將確保有用?！?/p>

盡管語言不同，您之前也聽說過。維特魯威（Vitruvius）是關(guān)于形式應(yīng)該如何發(fā)揮作用的祖父?！澳μ齑髽侵浮甭芬姿埂ど忱模↙ouis Sullivan）于1896年創(chuàng)造了這個名詞。沙利文應(yīng)該將這個想法歸因于維特魯威（Vitruvius），盡管對此的記錄令人懷疑。無論如何，這就是實用程序的根源。

目的：圖書館

不同類型的建筑物有不同的要求，事后考慮這些要求而設(shè)計的建筑物可能會令人失望。這聽起來似乎很明顯，但是這個世界上有足夠的白象值得謹慎。迷宮式購物中心和操場上高導(dǎo)電性的金屬圓頂在投資者的演講中可能看起來很酷，但是它們并沒有真正有用。

這也意味著結(jié)構(gòu)的各個部分應(yīng)邏輯連接，換句話說，它們應(yīng)該易于訪問和導(dǎo)航。如果建筑物有用且易于使用，那將是一個很好的開始。

線上

Utilitas也適用于網(wǎng)站設(shè)計，每個網(wǎng)站都有其目的。該目的可能是實用的，例如搜索引擎或天氣預(yù)報，也可能是藝術(shù)的，例如交互式的故事或圖形設(shè)計作品集。不管它是什么，都有其存在的理由，并且如果考慮到這一原因進行設(shè)計，則對訪問該站點的任何人都更有幫助。

內(nèi)容先于設(shè)計，設(shè)計在沒有內(nèi)容的情況下不是設(shè)計，而是裝飾。

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

一個百科全書，你會期望容易搜索和導(dǎo)航，與干凈的呈現(xiàn)和適當引用的信息。例如，維基百科(Wikipedia)就為所有這些選項打上了勾號。它相當于網(wǎng)絡(luò)上的一個巨大圖書館，一直延伸到不起眼的部門和員工在幕后爭吵。它的正面和中心都是有用的，所以它的核心設(shè)計自它成立以來一直保持不變。

或者，出版物的目的是產(chǎn)生對其讀者有價值或感興趣的原創(chuàng)內(nèi)容。為了發(fā)揮作用，網(wǎng)站的出版物應(yīng)該以一種生動而直接的方式呈現(xiàn)所述內(nèi)容，特別關(guān)注不同設(shè)備的閱讀體驗。一個內(nèi)容精彩但設(shè)計糟糕的網(wǎng)站會破壞它自身的有用性。

明確的目的導(dǎo)致清晰的設(shè)計，如果您的目的是朝幾個不同的方向發(fā)展，那么網(wǎng)站也是如此。對所有人來說，您不可能一事無成，嘗試毫無意義。有用性傾向于滿足特定需求，而不是全部需求。

說到實用性，您不能將網(wǎng)站視為抽象事物。像建筑物一樣，人們會訪問和使用網(wǎng)站，因此在設(shè)計網(wǎng)站時應(yīng)首先考慮其他因素。投資者，廣告商和所有其他卑鄙的行為者將有自己的時間，但是如果您過早地讓他們使用，則會損害網(wǎng)站的實用性。當出版物將多個頁面上的文章分開純粹是為了增加流量時，它的用處就會降低。當電子商務(wù)平臺似乎更關(guān)心減少轉(zhuǎn)換渠道而不是提供有關(guān)其產(chǎn)品的誠實信息時，其實用性就會降低。在這種情況下，目的已變得次要，結(jié)果使設(shè)計遭受損失。

我們認識到搜索引擎設(shè)計的標志，就像我們認識劇院，圖書館或運動場一樣。它們的形式圍繞其功能而定。

此外，就像建筑物一樣，網(wǎng)站應(yīng)該易于瀏覽。確保網(wǎng)站的有用性需要周密的計劃。在架構(gòu)師擁有平面圖和模型的地方，Web開發(fā)人員具有站點地圖，線框等。這些使我們能夠及早發(fā)現(xiàn)布局問題并加以解決。

在這里，從不同的角度看設(shè)計非常重要。調(diào)色板是否解決了色盲和文化差異？畢竟，顏色在不同的地方意味著不同的事物。使用鍵盤和屏幕閱讀器瀏覽起來容易嗎？并非每個人都以與您相同的方式瀏覽網(wǎng)絡(luò)。當然，對盡可能多的人有用會更好嗎？沒有很好的借口不能同時訪問和包容網(wǎng)站。

耐用（FIRMITAS）

原則上

Firmitas歸結(jié)為應(yīng)該持續(xù)發(fā)展的想法。幾年后倒塌的非常有用的結(jié)構(gòu)將被廣泛視為失敗。精心制作的建筑物可以持續(xù)數(shù)百年，甚至數(shù)千年。具有諷刺意味的是，維特魯威（Vitruvius）自己的建筑都沒有幸存下來，但這一點仍然存在。

該原理涵蓋了架構(gòu)的更多方面，而不僅僅是馬上想到的。

當?shù)鼗鷮嵲鷮嵉剡x擇材料時，將確保耐用性。

—維特魯威

換句話說，請仔細選擇目的地，打好基礎(chǔ)并使用適當?shù)牟牧稀?/p>

可以肯定地說，長城是經(jīng)久耐用的，其中有些路段已有2,000多年的歷史了。安德里亞·利奧帕迪（Andrea Leopardi）攝影。

我們所有人都本能地了解壽命是良好設(shè)計的標志。它反映了優(yōu)質(zhì)的材料，精心的計劃和精心的維護。羅馬的萬神殿或中國的長城，證明了耐用的設(shè)計，以其長壽和威嚴著稱。

該原則還涉及環(huán)境因素。是否在設(shè)計時充分考慮了天氣，地震，侵蝕等因素的影響？如果沒有，那可能不是一座長期的建筑...

在工程師削減成本之后，塔科馬海峽大橋的耐用性得到了測試。劇透：它崩潰了。

令人放心的是，您可以指望一種不會崩潰的結(jié)構(gòu)，從長遠來看，它通常會變得更便宜。堅固的建筑位于堅固的基礎(chǔ)上，并使用適合其目的和環(huán)境的材料。并非經(jīng)久耐用的建筑物通常是精美的電影布景。不久，它們就瓦礫了。

線上

時間似乎更快地通過在網(wǎng)絡(luò)上，但原則firmitas仍然適用。鑒于在線生活無休止的動蕩，將您的旗幟插在堅固的東西上是很有意義的。在這三種品質(zhì)中，它是用戶最不可見的一種，但是如果沒有它，其他所有內(nèi)容都會崩潰。

這始于內(nèi)在的考慮，基礎(chǔ)必須牢固，該網(wǎng)站將去哪里？內(nèi)容管理系統(tǒng)合適嗎？您的網(wǎng)絡(luò)托管服務(wù)提供商可以處理預(yù)期的流量（以及更多流量），并且仍然運行平穩(wěn)嗎？正如從一個CMS遷移到另一個CMS的任何人都可以告訴您的那樣，如果可能的話，第一次正確設(shè)置它是值得的。

這就是一個崩潰的網(wǎng)站

您使用的網(wǎng)絡(luò)技術(shù)也很長壽，新的框架在當時似乎是個好主意，但是如果一個站點需要存在很多年，則最好使用HTML，CSS和JavaScript以及結(jié)構(gòu)化數(shù)據(jù)之類的普遍支持的SEO標記。就像在建筑中一樣，要使建筑持久，通常意味著要使用既定的材料而不是新奇的材料。

耐用性擴展到設(shè)計，網(wǎng)頁必須以使建筑師哭泣的方式彎曲，拉伸和彎曲。響應(yīng)式網(wǎng)站是一個持久的網(wǎng)站。隨著新設(shè)備（例如可折疊設(shè)備）和標記的出現(xiàn)出現(xiàn)在我們面前，網(wǎng)站需要能夠大步向前。架構(gòu)師不會為地震而cross之以鼻，那么為什么Web設(shè)計師應(yīng)該回避Web的危害呢？出色的設(shè)計面對環(huán)境挑戰(zhàn)；它不能避免。

隨著網(wǎng)站的發(fā)展，其用戶將逐漸熟悉其設(shè)計。發(fā)生的次數(shù)越多，進行全面更改就越讓人頭疼。如果站點從一開始就經(jīng)過精心設(shè)計，那么翻修比翻新的可能性更大，即使更新，外觀仍然很熟悉。從這個意義上說，明確的目的無可估量地提高了站點的持久性。這本身就是一種基石，有助于在變化時期保持站點的堅固。即使是最好的網(wǎng)站也需要不時更新。

Smashing Magazine 2017年的重新設(shè)計鞏固了幕后元素，例如內(nèi)容管理，工作板和電子商務(wù)，同時保持了前端角色的熟悉性。

還有可持續(xù)性的問題，是否對該站點的商業(yè)現(xiàn)實給予了應(yīng)有的關(guān)注？換句話說，票房在哪里？無論是付費專區(qū)，廣告還是會員系統(tǒng)，將它們納入設(shè)計過程都不會感到羞恥。它們不是站點的目的，但是有助于使站點持久。

美麗（維納斯塔斯）

原則上

正如維特魯威（Vitruvius）所說，“眼睛總是在尋找美?！?追求它是一種完全合法的品質(zhì)。

根據(jù)De architectura所說，“當作品的外觀令人愉悅且品味良好，并且其成員按照正確的對稱原則按比例分配時，就會發(fā)生美感?！?/p>

建筑物不僅有用且做工精良，也應(yīng)令人賞心悅目。有些甚至可能觸動心臟。

如果您想設(shè)計一個好的神廟，維特魯威（Vitruvius）對此也很有用。

維特魯威（Vitruvius）概述了有助于使建筑物美麗的幾種特質(zhì)。對稱和比例使他特別感興趣（因此，達·芬奇的《維特魯威人》）。癡迷于將形狀融入所有事物的過程比圖形設(shè)計要早幾千年。

應(yīng)該考慮結(jié)構(gòu)中的每個元素與附近的其他元素以及所構(gòu)建環(huán)境的關(guān)系。維特魯威（Vitruvius）用一個詞概括了這種相互作用：eurythmy，希臘語中的和諧節(jié)奏。（如果您想知道的話，英國流行二重奏組Eurythmics的名字來自同一術(shù)語。）Vitruvius在建筑環(huán)境中對其定義如下：

Eurythmy是成員調(diào)整中的美麗和健身。當工件的高度與寬度相稱，寬度與長度相稱時，或者當它們?nèi)繉ΨQ地對應(yīng)時，就會發(fā)現(xiàn)這種情況。

就像音樂一樣，建筑物具有節(jié)奏感。它們的各個部分形成一種和諧。一棟美麗的建筑可能像是沙灘男孩合唱團的大理石雕刻品，而丑陋的建筑就像黑板上的釘子。

對于那些好奇的美麗建筑看起來是什么樣的人，McMansion Hell是一個不錯的起點。

不僅比例合理且對稱，單個作品還可以通過其他方式增強美感。優(yōu)秀的手工藝是美麗的，對細節(jié)的關(guān)注也是如此。適合結(jié)構(gòu)的材料也很漂亮-反映了設(shè)計師的合理判斷和良好品味。

裝飾是可以接受的，但是它必須與結(jié)構(gòu)的核心設(shè)計相輔相成-考慮圓柱雕刻，鋪路圖案等。所有這些小細節(jié)和注意事項都構(gòu)成了整個建筑物。當他們都在一起時，這是驚人的。

線上

漂亮的網(wǎng)站遵循許多與架構(gòu)相同的標準。比例和對稱性是有吸引力的設(shè)計的支柱。網(wǎng)格系統(tǒng)具有相同的目的，即清晰，吸引人地組織內(nèi)容。除此之外，還有顏色，版式，圖像等等問題，所有這些問題都會影響到網(wǎng)站的美感或缺乏美感。

venustas與Web設(shè)計特別相關(guān)的一個方面是用戶如何與之交互。除了美觀之外，網(wǎng)站還具有娛樂性，甚至令人驚訝。坐在那里并受到欽佩是一回事，邀請游客成為美麗的一分子是另一回事。

布魯諾·西蒙（Bruno Simon）的創(chuàng)意獨特網(wǎng)站設(shè)計邀請訪問者使用箭頭鍵四處行駛。

Google的交互式Doodle是這方面的另一個好例子-且不那么令人生畏。他們涵蓋了所有主題，邀請用戶玩游戲，學(xué)習和娛樂。它本身就很好，并且與Google作為信息源的目的保持一致。

具有諷刺意味的是，這只是交互式事物的GIF而非交互式事物本身，但是您可以在此處看到完整的Doodle以及其制作的詳細信息。

隨著網(wǎng)絡(luò)繼續(xù)向移動優(yōu)先體驗轉(zhuǎn)變，用戶可以從字面上觸摸他們訪問的網(wǎng)站，應(yīng)該記住，美麗與所有感官有關(guān)，而不僅僅是視覺。

至于“環(huán)境”，網(wǎng)站設(shè)計就是顯示它的設(shè)備。與建筑物不同，網(wǎng)站并非始終具有統(tǒng)一的外觀。為美觀起見，它們必須反應(yīng)靈敏，改變大小和比例以配合設(shè)備。它本身很令人愉悅，并且很好地完成了形狀轉(zhuǎn)換，使其以自己的方式變得美麗。

平衡法

維特魯威（Vitruvius）的utilitas，firmitas和venustas規(guī)則之所以能夠持久，是因為它們共同發(fā)揮作用，而因為三者之間的協(xié)同合作，它們卻被視為三合會。實現(xiàn)這三個目標是一個平衡的舉動。如果它們向不同的方向拉動，那么所制造的任何東西的質(zhì)量都會受到損害。例如，漂亮卻無法使用的是糟糕的設(shè)計。另一方面，當它們一起工作時，結(jié)果可能遠大于它們各部分的總和。

與建筑一樣，這需要鳥瞰。這些片段不能一次完成，而必須牢記其他。

建筑師在形成構(gòu)想后，即在開始工作之前，就對將其區(qū)分開來的美感，便利性和適當性有了明確的認識。

—維特魯威

毫無疑問，細節(jié)將會改變，但是和諧不會改變。

這擴展到制作網(wǎng)站的人，與建筑一樣，網(wǎng)站通常必須平衡客戶，建筑師和建筑商的需求，更不用說投資者，金融家，統(tǒng)計學(xué)家等等。為了使網(wǎng)站和諧，負責構(gòu)建網(wǎng)站的人員也是如此。

這并不是說，不管項目如何，這三種品質(zhì)都是同等重要的-只是應(yīng)該對每種品質(zhì)都給予適當?shù)目紤]。埃菲爾鐵塔的用處似乎微不足道，胡佛水壩的美景也是如此，這很好。如果網(wǎng)站是裝飾性的或臨時性的，則不必僅僅局限于此。utilitas，firmitas和venustas的性質(zhì)根據(jù)項目而改變。像大多數(shù)值得遵循的規(guī)則一樣，當您情緒高漲時，不要害怕彎曲甚至打破它們。

網(wǎng)站是一座圣殿

Web開發(fā)人員是Internet的建筑師，網(wǎng)站是其建筑物。維特魯威（Vitruvius）指出，建筑師不是（實際上不可能）是各個領(lǐng)域的專家。相反，他們是各行各業(yè)的杰作（我的措詞，不是他的話）。要實現(xiàn)三合會，最好是對許多主題有很好的掌握，而不是擁有一個專業(yè)知識：

讓他受教育，熟練使用鉛筆，講幾何，了解許多歷史，對哲學(xué)家給予關(guān)注，了解音樂，了解一些醫(yī)學(xué)知識，了解法學(xué)家的意見，并熟悉天文學(xué)和天文學(xué)理論。

其中一些的相關(guān)性是顯而易見的，而其他的則不那么明顯，但這對架構(gòu)師和Web開發(fā)人員都同樣有價值。幾何決定比例和布局 ； 歷史將設(shè)計置于上下文中，并確保按其原意應(yīng)理解它們；哲學(xué)幫助我們誠實守信地處理項目；音樂使我們意識到聲音的作用 ； 醫(yī)學(xué)使人們想到可及性，以及對眼睛，耳朵甚至拇指的潛在疲勞；而現(xiàn)在法律織機大于以往任何時候。關(guān)于天堂的理論可能有些綿延，但您明白了。

無論您是建造體育館還是創(chuàng)意獨特網(wǎng)站設(shè)計，維特魯威三合會都是值得使用的標準。并非每個人都擁有一支專家團隊（或為一支專家團隊提供預(yù)算），即使我們做到了，為什么還要否認自己強大的設(shè)計需要廣泛的知識呢？我們可以建造Levittown，也可以建造羅馬，以及兩者之間的一切。有用，耐用，美觀的Internet聽起來對我們來說都很重要。

當前標題：Vitruvius可以教給我們有關(guān)網(wǎng)站設(shè)計的知識
網(wǎng)頁鏈接：http://muchs.cn/article8/scship.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)