一、什么是網(wǎng)頁設(shè)計(jì)的粗野主義 ？

粗野主義 (Brutalism)：一種源于建筑領(lǐng)域的設(shè)計(jì)風(fēng)格，強(qiáng)調(diào)原始、粗糙和反傳統(tǒng)的美學(xué)，注重功能性而非裝飾性，常使用大膽的排版、不對稱布局和強(qiáng)烈的對比色。

“Brutalism”（粗野主義）一詞源自法語術(shù)語 béton brut，意為“裸露混凝土”、"清水模"或“清水混凝土”，指未經(jīng)修飾、直接暴露的混凝土表面。這一術(shù)語最初用于描述 20 世紀(jì) 40 年代末至 50 年代初在英國興起的一種建筑風(fēng)格。粗野主義建筑以其裸露的混凝土結(jié)構(gòu)、嚴(yán)峻的幾何形體和強(qiáng)調(diào)建筑材料本身的質(zhì)感為主要特征，并在 20 世紀(jì) 50 年代至 70 年代間傳播到世界各地。

審計(jì)委員會 Tribunal de Contas / Aflalo y Gasperini 圣保羅, 1971

粗野主義是一種原始、極簡的設(shè)計(jì)風(fēng)格，它重視功能而非形式和美學(xué)。它往往以極其簡單，幾乎是極簡主義的方法來處理布局和 UI 設(shè)計(jì)為特征。是對原始、引人注目的視覺設(shè)計(jì)的一種大膽、反直覺的詮釋——并且很難用定義來界定，因?yàn)樗举|(zhì)上旨在挑戰(zhàn)定義。

和大多數(shù)潮流的興起一樣，粗野主義是對之前風(fēng)格的一種反動：一種想要拋棄早期繁復(fù)、難以言喻的華麗設(shè)計(jì)的愿望。

更多相關(guān)干貨：

二、為什么粗野主義會在網(wǎng)頁設(shè)計(jì)中興起？

早期的網(wǎng)頁迭代都專注于原始的功能和內(nèi)容：粗暴累贅的 HTML 編碼網(wǎng)站和大膽的 90 年代設(shè)計(jì)主題，在概念上自然類似于建筑粗獷、暴露結(jié)構(gòu)的定義特征。這本身就是一個(gè)實(shí)用性問題。隨著時(shí)代的發(fā)展，網(wǎng)頁才慢慢變成了我們今天看到的樣子（絕大多數(shù)）——布局合理、遵循用戶體驗(yàn)、注重美學(xué)和色彩理論等。思想、文化、審美、需求是多元的，對于網(wǎng)頁的追求也是，主流網(wǎng)頁追求高級美觀和完美體驗(yàn)，也同時(shí)有了粗野主義發(fā)展的土壤。

一些人認(rèn)為主流網(wǎng)頁高級的美學(xué)和體驗(yàn)，會營造一種美麗的假象，讓人會下意識忽略隱藏網(wǎng)頁背后可能存在的缺乏道德和惡意的真實(shí)意圖。粗野主義網(wǎng)頁設(shè)計(jì)的流行，或許也反映了人們希望互聯(lián)網(wǎng)能夠更透明、更直接。人們希望網(wǎng)站的底層邏輯和真實(shí)意圖能像粗野主義建筑展示它的原材料和社會理念一樣，一目了然。

三、粗野主義網(wǎng)頁設(shè)計(jì)的特點(diǎn)

1. 突破常規(guī)的配色

粗野主義在建筑學(xué)領(lǐng)域經(jīng)常大量使用灰色、黑色、棕色等冷峻氛圍的配色。網(wǎng)頁的粗野主義則不同，更多使用刺眼、沖突的色彩搭配來進(jìn)行設(shè)計(jì)，和主流的網(wǎng)頁美學(xué)及色彩理論逆道而行。

“我們并不需要所有映入眼簾的都是完美的東西。”

kaskadproject.com

2. 非標(biāo)準(zhǔn)的導(dǎo)航和信息層級設(shè)計(jì)

通常，UX/UI 設(shè)計(jì)師會遵循用戶體驗(yàn)原則，以及合理的信息層級來減少用戶認(rèn)知負(fù)荷，并提高網(wǎng)站導(dǎo)航的便捷性。而粗野主義則相反，喜歡使用非標(biāo)準(zhǔn)的導(dǎo)航和粗獷的信息展示方式。

namespace.studio

3. 原始和粗糲的設(shè)計(jì)理念

從布局排版到色彩搭配，粗野主義網(wǎng)站有意營造出一種原始和未經(jīng)打磨的環(huán)境。這可以從上世紀(jì)中葉的建筑中找到靈感和來源，由于時(shí)代背景和氛圍的影響，建筑強(qiáng)調(diào)原始、粗糙的外觀，呈現(xiàn)出混凝土的真實(shí)紋理，不做過多修飾。

讓人想起互聯(lián)網(wǎng)早期沒有使用設(shè)計(jì)排版和美化的網(wǎng)頁狀態(tài)，是對于當(dāng)前主流網(wǎng)頁文化背對而行的設(shè)計(jì)理念，拋棄美化和裝飾，展示真實(shí)而粗糲的本質(zhì)。

wikipedia.org

4. 重復(fù)、獨(dú)特的形狀和圖案

粗野主義風(fēng)格的網(wǎng)頁設(shè)計(jì)通常包含重復(fù)的形狀或圖案，或者是二維、三維的獨(dú)特圖形，這保持了一種獨(dú)特的視覺體驗(yàn)，也經(jīng)常從上世紀(jì)粗野主義盛行的建筑中找到元素和靈感運(yùn)用，這是對粗野主義建筑的幾何特征的理念延續(xù)和模仿。

studio-job.com

5. 視覺沖擊和壓迫

粗野主義時(shí)期的建筑龐大而不加修飾，外露的清水混凝土和冷峻的幾何結(jié)構(gòu)，帶來一種粗野巨獸般的壓迫感，這種視覺體驗(yàn)也延續(xù)到了粗野網(wǎng)頁設(shè)計(jì)中，并且在網(wǎng)頁中的運(yùn)用更加的大膽和自由隨性。尤其在追求細(xì)膩體驗(yàn)和美觀的主流文化對比下，粗野主義網(wǎng)頁更顯得逆反和異化。

四、粗野主義風(fēng)格的網(wǎng)站靈感

1. Butalist Websites

brutalistwebsites.com 這個(gè)網(wǎng)站的內(nèi)容和命名一樣直接，收集粗野主義風(fēng)格的網(wǎng)頁。內(nèi)容只有一小段介紹和案例。

"In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design." —— Brutalist Websites

“在其粗獷和不關(guān)心顯得舒適或輕松的特質(zhì)中，粗野主義可以被視為年輕一代對當(dāng)今網(wǎng)頁設(shè)計(jì)的輕盈、樂觀和輕浮的一種反叛。”

brutalistwebsites.com

2. Awwwards/collections/brutalism/

Awwwards 是一個(gè)知名的網(wǎng)頁設(shè)計(jì)靈感與獎項(xiàng)平臺，在合集中專門收集粗野主義風(fēng)格的網(wǎng)頁設(shè)計(jì)作品，供設(shè)計(jì)師獲取靈感。這個(gè)合集在設(shè)計(jì)感和交互動畫各方面都會更加的優(yōu)秀。

總結(jié)

粗野主義網(wǎng)頁設(shè)計(jì)并不是說拋棄設(shè)計(jì)，而是把網(wǎng)站的“骨架”直接展現(xiàn)出來，比如用最基礎(chǔ)的排版、按鈕和鏈接，不做多余裝飾。這樣做，是想讓用戶一眼看清網(wǎng)站的結(jié)構(gòu)和意圖，減少誤導(dǎo)和隱藏，讓一切都“擺在明面上”。把注意力拉回到內(nèi)容和功能上，讓用戶更容易找到自己需要的信息。

粗野主義的“粗糙感”其實(shí)是一種態(tài)度，傳遞出網(wǎng)站獨(dú)特的氣質(zhì)和反叛精神。它挑戰(zhàn)主流審美，不怕“看起來不完美”，反而用這種“原始感”表達(dá)真實(shí)和自我。

設(shè)計(jì)是一個(gè)循環(huán)，粗野主義從誕生到今日，從潮水來回往復(fù)，當(dāng)然在每個(gè)時(shí)代都會結(jié)合當(dāng)時(shí)時(shí)代的特征和文化理念，糅合出新的設(shè)計(jì)色彩。

比如新粗野主義（Neo-Brutalism），后現(xiàn)代粗野主義（Postmodern Brutalism），工業(yè)粗野主義（Industrial Brutalism），賽博粗野主義（Cyber Brutalism）等等，都是時(shí)代追求和復(fù)古思潮融合下的產(chǎn)物，這些風(fēng)格源于粗野主義的原始力量和功能性核心，但通過與其他審美或功能需求的結(jié)合，形成了多樣化的衍生流派。

當(dāng)然這些衍生的設(shè)計(jì)風(fēng)格我們也會在后面的文章中繼續(xù)來談?wù)劇?/p>