據(jù)說點(diǎn)擊藍(lán)色字體關(guān)注同學(xué)都升職啦

靜電說：最近，一種新的設(shè)計風(fēng)格正在進(jìn)入我們的視野，成為各位設(shè)計師關(guān)注的對象，那就是草圖風(fēng)，或者說新粗野主義（Neo-Brutalism）的風(fēng)格。其實(shí)最早進(jìn)入我視野的是Figma的網(wǎng)站，我們可以看看截圖。
我們會發(fā)現(xiàn)，網(wǎng)頁上充斥著各種涂鴉狀的效果。粗線條等效果。

最近發(fā)現(xiàn)京東的設(shè)計師也開始嘗試這樣的風(fēng)格?？聪路降膶ｎ}：

這就是我們今天想講的風(fēng)格，但是首先，我們要先回顧一下，什么是粗野主義？
粗野主義是 1950 年代的建筑趨勢，它放棄了所有的裝飾，并創(chuàng)造了由混凝土制成的簡單粗暴的建筑。建筑師們表明他們對現(xiàn)狀感到厭煩并嘗試不同的東西。這感覺與當(dāng)前對 UI 趨勢接管設(shè)計非常相似。

那在網(wǎng)絡(luò)上如何呈現(xiàn)呢？

以前在圖形設(shè)計中存在過某些形式的粗野主義，但它們往往打破了大多數(shù)典型的布局規(guī)則，巨大的文本塊經(jīng)常會出現(xiàn)在視野之外。它在海報設(shè)計/圖形設(shè)計中最流行，但早在 90 年代后期就存在一些在網(wǎng)絡(luò)上使用它的嘗試。
新野蠻主義摒棄了大部分上面的內(nèi)容，將傳統(tǒng)布局概念與超高對比度、純色、經(jīng)常故意沖突的顏色和更簡單但古怪的排版相結(jié)合。

那么，如何設(shè)計“新粗野主義”風(fēng)格呢？


001.對比
讓我們從超高對比度開始。新野蠻主義不怕將純黑色 (#000000) 與其他顏色融合在一起。這是大多數(shù)其他設(shè)計風(fēng)格都試圖避免的做法，因?yàn)樵诒３挚稍L問的對比度的同時，我們不想給用戶造成眼睛疲勞。

在大多數(shù)當(dāng)前的 UI 樣式中，很流行將黑色“注入”一點(diǎn)強(qiáng)調(diào)色——就像上面示例中的一點(diǎn)點(diǎn)紅色一樣。它有助于顏色更好地與其他色調(diào)聯(lián)系起來，同時避免過高的對比度和眼睛疲勞。

002.陰影
代替柔和的陰影，它適用于卡片下方的硬黑色矩形。它不是典型的幾乎看不見的邊界，而是厚、暗和明確的輪廓。

雖然這對于可訪問性來說非常好，但它也為我們的大腦添加了更多要處理的對象。雖然還沒有在一些用戶身上進(jìn)行測試，但相信這些設(shè)計讓我們的大腦更加緊張。
大多數(shù)陰影或假 3d 對象使用等距視圖。它實(shí)際上總是某種形式的 45° 角。

現(xiàn)代極簡主義與新野蠻主義卡片——典型的陰影

003.顏色
顏色正朝著大多數(shù)其他風(fēng)格會認(rèn)為丑陋或沖突的方向發(fā)展，例如將紅色與藍(lán)色或綠色混合在一起。然而，主要區(qū)別在于，現(xiàn)在這些顏色也被去飽和了。但是，它們同樣對比鮮明。

顏色很少超過 80% 的飽和度
每種情況下都有一種原色——作為品牌顏色，通常有幾十種次要顏色或強(qiáng)調(diào)色。它們通常伴隨網(wǎng)站或應(yīng)用程序的特定部分——如顏色編碼類別。

004. 故意做的丑陋
新粗野主義經(jīng)常使用以默認(rèn)演示軟件方式設(shè)置樣式的形狀——就像你在這個 Figma 示例中看到的那樣。

此屏幕上可見三張卡片，它們故意不一致。更引人注目的是，最典型的外觀卡片的按鈕也略微錯位。Post 按鈕中的文本離左邊太遠(yuǎn)了，而且按鈕本身也被放置在與右邊不同的距離，而不是與頂部的距離。

這種造型方式使丑陋的東西正?；?，讓初學(xué)者更容易認(rèn)知——他們會想“我可以自己做！” 我相信這就是一些品牌采用這種風(fēng)格的原因。它沒有威脅性，任何人都可以做到。
005.排版
排版在這種風(fēng)格中起著非常重要的作用，但它的表現(xiàn)方式要保守得多。雖然我們兩個示例中的字體都有點(diǎn)古怪或時髦，而且不像現(xiàn)代簡約中典型的“酷”字體那樣簡約，但它們的呈現(xiàn)方式是為了最大限度地提高可讀性。

006.插圖
插圖風(fēng)格通常是帶有描邊的，背景被摳出來的人物。加上鮮艷的顏色，具有高對比度和清晰的邊緣。線條則有粗有細(xì)。

把握好上面這些點(diǎn)，我們也可以做出這種風(fēng)格啦。不過這種風(fēng)格還是有點(diǎn)冒險的，并不是所有的場合都適用。

接下來咱們放出來一些新粗野主義的設(shè)計，一同感受和欣賞。

《靜電的UI設(shè)計教室》暑期特訓(xùn)課報名ing！

靜電老師全程主講 1V1作品集輔導(dǎo)及打造

不流于形式? 設(shè)計工具/思路/方法全面講解?
高含金量UI小班課程

現(xiàn)在預(yù)約享特惠價

↓↓長按二維碼加靜電老師咨詢↓↓