從建筑到網(wǎng)頁，粗野主義風(fēng)格確實有著它獨特的魅力

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

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

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

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

色彩

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

形狀

在所使用的元素的形狀上，你會發(fā)現(xiàn)這些建筑和粗野主義網(wǎng)頁設(shè)計有著許多相似的地方。

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

比例與氣勢

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

而粗野主義風(fēng)格的網(wǎng)頁也很好的把握了這一特質(zhì)。在排版和圖片的運用上，通過控制比例很好的創(chuàng)造了視覺壓迫力，適當(dāng)?shù)厝趸勺x性和視覺吸引力，從而營造出粗糲森冷的體驗。

異化和突出

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

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

這一特征正好和粗野主義風(fēng)格建筑相同。許多建筑師會設(shè)計的時候嘗試新的形狀、結(jié)構(gòu)和裝飾。

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

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

【更多設(shè)計實戰(zhàn)在這里】

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

原文地址：designmodo
原文作者：Ben Bate
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

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

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com