近兩年粗野主義開始入侵網頁設計領域，這種被視作為網頁風格領域泥石流的設計趨勢，并不是毫無根基、簡單粗暴的存在。粗野主義風格的網頁設計乍一看，是一堆形態結構粗獷不羈的元素，承載著鮮艷的色彩，在拙稚粗劣的排版布局之下，所呈現出來的網頁設計作品。這種有著典型上世紀質感的設計風格，影響著許多設計師，甚至彭博社都采用了這種設計風格來制作頁面。在之前的文章當中，我們對于粗野主義設計有過討論：《辣眼睛？這種粗糲但有趣的設計風格正悄然流行》

但是講真，這種風格到底是從何而來？雖然它的靈感來源似乎非常龐雜，整體架構也頗為隨性，但是如果仔細追溯源頭，會發現它并非是無本之木。在上世紀中期，計算機技術蓬勃發展的年代，冷戰尚未結束的背景之下，許多充滿粗糲感但是足夠壯觀的龐大建筑物拔地而起。這些強調結構和功能但是不苛求細節的建筑物充滿了質感，氣勢十足，外露的混凝土墻面又時刻給你一種沉悶的壓迫感，冷峻而嚴酷的特征在周圍環境的襯托下，還帶著一縷揮之不去的黑暗基調。當你回溯那個年代，你會發現這些建筑物簡直是最好的總結。

粗野主義網頁設計和這些建筑在精神上有著共通的地方，如果仔細審視，會發現它們在設計元素和手法上，也頗為接近。從圖片素材的使用，到配色方案的選取，這些建筑能夠給你最好的參考。

今天的文章，我們通過對比來歸納和回溯粗野主義網頁設計的源頭，將它的特征和手法擺在你的面前。如果你真的想采用這種風格的設計，它們會是帶你走向風味醇正的粗野主義設計的路徑。

色彩

這批誕生于上世紀中葉的建筑，受到時代背景和氛圍的影響，混凝土外露的設計和冷峻的風格，使得它們直到現在和頗受爭議。現在粗野主義風格的網頁設計中，許多作品沿用了這些建筑的配色，灰色、黑色、棕色被大量地使用，而這些建筑的相關照片更是營造這種氛圍的實用素材。

形狀

在所使用的元素的形狀上，你會發現這些建筑和粗野主義網頁設計有著許多相似的地方。

首先，在粗野主義風格的網頁當中，形狀獨特而大膽的元素越來越多。這些元素被設計師用來吸引用戶的注意力，而這一點在建筑上也體現的淋漓盡致：建筑設計師借助混凝土的強大可塑性，將幾乎任何可以想到的形狀，都融入進來。而采用粗野主義風格的網站更是隨性地使用各種二維和三維的圖形，用以維系獨特的視覺體驗。

比例與氣勢

粗野主義風格的建筑有著宏偉、極具壓迫感的特征，這一點最終也反映到了粗野主義風格的網頁當中。這些以黑白灰為主也得建筑因為缺少帶有情緒的色彩，加上龐大的體積，從而顯得壓迫感十足，傳統的建筑即使采用同樣的色調也會借助曲線和裝飾來淡化建筑的冷硬感。

而粗野主義風格的網頁也很好的把握了這一特質。在排版和圖片的運用上，通過控制比例很好的創造了視覺壓迫力，適當地弱化可讀性和視覺吸引力，從而營造出粗糲森冷的體驗。

異化和突出

今天的建筑設計通常會盡量設計得和環境相得益彰，要么融入周圍的環境，要么采用大量的玻璃幕墻，來反射天空和環境以達到融入的目的。但是這批誕生于上世紀中葉的建筑則不同，設計者和建造者通過微妙的異化，讓它們同周圍的環境構成對比，產生和環境的剝離感，視覺上顯得頗為突出。

異化在粗野主義風格的網站上有了明顯的體現。異化的設計元素在頁面中營造出了具有視覺沖擊力的特征，引起用戶主義。許多元素明顯是故意為之，并且純粹是為了吸引人而存在。

這一特征正好和粗野主義風格建筑相同。許多建筑師會設計的時候嘗試新的形狀、結構和裝飾。

這些設計通常不會采用終端用戶常見的設計樣式，而是采用那些非常規的、帶有戲劇感和視覺沖擊力的設計樣式。

從這一點上來看，粗野主義的設計似乎會帶有更加明顯的設計師印記，諸如音樂和美術相關的網站會更適合使用粗野主義風格來承載，這也是它受到越來越多關注的原因。

【更多設計實戰在這里】

1. 《富有未來感的柏林之夜APP，是這樣設計出來的》
2. 《設計實戰！城市指南網站著陸頁是這樣設計出來的》
3. 《這款給醫生的專業APP，設計上有著怎樣不同的要求？》
4. 《幫你策劃盛大婚禮的APP，設計思路是這樣的》
5. 《這款面向大眾的理財APP，設計過程是這樣的》
6. 《一款真正讓人專注的效率應用，應該這么設計》

原文地址：designmodo
原文作者：Ben Bate
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com