正確使用2020年的設(shè)計(jì)趨勢(shì)——NEUMORPHISM

0 評(píng)論 16137 瀏覽 27 收藏 14 分鐘

今天我們討論的話題是圍繞Neumorphism的,它是一種設(shè)計(jì)風(fēng)格,或者說是,設(shè)計(jì)趨勢(shì),它令設(shè)計(jì)師們深陷泥潭。

一、Neumorphism的誕生與定義

Neumorphism(或者叫Neo-skeuomorphism)是一種新潮的設(shè)計(jì)風(fēng)格,應(yīng)用于網(wǎng)頁元素、框架、界面等,也被稱為Skeuomorphism。

所以Neumorphism是“New” 和 “Skeuomorphism”的”巧妙”結(jié)合。因?yàn)槲覀儗?duì)于“New”已經(jīng)不陌生了,就讓我們來看看“ Skeuomorphism”吧。

自從人類發(fā)明了媒體,我們的先輩通過它來獲得最新的消息,在尋找Skeuomorphism的定義時(shí),人們發(fā)現(xiàn)這么一段文字:

……手機(jī)應(yīng)用的設(shè)計(jì)手法是模仿現(xiàn)實(shí)生活中的物體,這就是“Skeuomorphism”。

他們?cè)陉P(guān)于喬布斯的報(bào)告(紀(jì)念文章)中偶然發(fā)現(xiàn)了這個(gè)清晰的定義,解釋了蘋果產(chǎn)品傳統(tǒng)外觀的轉(zhuǎn)變,作者在文章中著重強(qiáng)調(diào)了這個(gè)引用。

由此我們得知Skeuomorphism這一詞語,作為一種設(shè)計(jì)風(fēng)格,在蘋果的設(shè)計(jì)團(tuán)隊(duì)中已經(jīng)被廣泛的應(yīng)用于各種產(chǎn)品,并且,蘋果的做法表明,他們?cè)谶@一領(lǐng)域擁有絕對(duì)的主導(dǎo)地位。因此我們可以得出一個(gè)初級(jí)的定義:

Skeuomorphism = 過去的蘋果風(fēng)

另一個(gè)需要注意的點(diǎn)是,它與另一個(gè)UI/UX流行語密切相關(guān):可供性(這恰好是一個(gè)非常正面的詞,在產(chǎn)品設(shè)計(jì)領(lǐng)域受到高度重視)。

在發(fā)布IOS7系統(tǒng)之前,蘋果公司宣布放棄傳統(tǒng)的設(shè)計(jì)風(fēng)格,包括界面和圖標(biāo),從那時(shí)起,這種風(fēng)格開始向扁平風(fēng)轉(zhuǎn)變。

蘋果設(shè)計(jì)團(tuán)隊(duì)的明智之舉在于盡可能的減緩這一變革,在2019年的時(shí)候,這種扁平風(fēng)在整個(gè)設(shè)計(jì)行業(yè)達(dá)到了頂峰。

蘋果公司,這一行業(yè)風(fēng)向標(biāo),宣告Skeuomorphism的徹底結(jié)束,設(shè)計(jì)行業(yè)紛紛跟風(fēng)。

設(shè)計(jì)師是技術(shù)不斷更新的群體,他們很容易適應(yīng)新的設(shè)計(jì)風(fēng)格。隨著扁平風(fēng)格人物插圖開始流行,2018年底至2019年我們又進(jìn)入了另一段扁平設(shè)計(jì)的黑暗期,但是這又是另一回事了。

二、Skeuomorphism的轉(zhuǎn)世

我知道你可能會(huì)把這個(gè)標(biāo)題想成非洲奇幻小說或者熱門網(wǎng)綜,但是都不是,它僅僅意味著Skeuomorphism以Neumorphism的身份又出現(xiàn)在了大眾視野中。

當(dāng)你打開Dribbble,并且搜索關(guān)鍵字:Neumorphism,很容易被大批類似的作品刷屏,從專業(yè)設(shè)計(jì)師到業(yè)余愛好者,作品一幅接一幅。

我也是其中之一,你可以在這里找到我的作品。任何一個(gè)標(biāo)簽都可以將你引領(lǐng)到Neumorphism的地盤,在這里你可以真正的感受它的魅力。

它新在哪?

“Neo” 和 “Neu”起源于同一個(gè)詞根。

仔細(xì)分析一下這個(gè)從2019年11月流行起來的新風(fēng)格,你會(huì)發(fā)現(xiàn)很多的OLD元素都被改造成了極簡(jiǎn)設(shè)計(jì)。

1. 色板

大多數(shù)情況下主色調(diào)為淺色,低飽和,看起來接近于白色、米色或者輕灰色。并且,僅僅使用顏色相近的漸變色來突出某些特定部分。

2. 形狀

易于訪問的形狀用于創(chuàng)建重復(fù)性的用戶界面。

3. 表現(xiàn)

不同于之前的設(shè)計(jì),Neumorphism風(fēng)格的特點(diǎn)是非常輕柔并且微妙,它不會(huì)過度模仿自然界中的物體,而是創(chuàng)建一種新的表現(xiàn)形式,它看起來像是一個(gè)原始的白模(3D設(shè)計(jì)的時(shí)候,模型沒有上紋理材質(zhì)之前呈現(xiàn)的一種狀態(tài))。

4. 效果

它沒有試圖做的特別逼真,而是采用了HTML、CSS易于實(shí)現(xiàn)的效果,例如雙陰影、漸變、填充、描邊或者內(nèi)陰影,所有的這些效果都可以由初級(jí)開發(fā)工程師用現(xiàn)成的代碼去實(shí)現(xiàn)。

5. 零開發(fā)難度

如果是開發(fā)難度特別大的設(shè)計(jì),你需要10倍的技術(shù)人員來實(shí)現(xiàn)它,或者被困于PNG、GIF、JPG圖片的顯示效果不佳,而不能采用SVG這種更加清晰的可伸縮矢量圖形。

三、如何設(shè)計(jì)Neumorphism?

首先,你得是一名設(shè)計(jì)師,不是設(shè)計(jì)家具或者服裝的那種,而是數(shù)字產(chǎn)品設(shè)計(jì)師。所以,雖然它有一定限制,但是又不僅僅限于:產(chǎn)品設(shè)計(jì)師、UI設(shè)計(jì)師和平面設(shè)計(jì)師。

一旦角色確定了,他們本身的工具就進(jìn)行這種設(shè)計(jì)。

每種工具和它們自身的局限性,我將嘗試從UI/UX和產(chǎn)品設(shè)計(jì)的角度來分析這些工具之間的優(yōu)缺點(diǎn):

1. Adobe XD

它最初是為UI/UX設(shè)計(jì)師所用,這是一個(gè)非常輕量級(jí)的設(shè)計(jì)工具,目的是配合第三方的插件一起使用,并且與其他的Adobe軟件相互結(jié)合,因?yàn)閱为?dú)使用的時(shí)候,它本身的功能比較局限。

優(yōu)勢(shì)在于:組件狀態(tài)、背景和模糊等;劣勢(shì)在于:多重投影、漸變描邊等。

2. Figma

第一個(gè)通過網(wǎng)頁,實(shí)現(xiàn)大規(guī)模多人協(xié)作的設(shè)計(jì)工具。它也提供大量的第三方插件,與其他傳統(tǒng)的設(shè)計(jì)軟件結(jié)合的不是很流暢,但是也得到了很多設(shè)計(jì)師的喜愛。

優(yōu)勢(shì)在于:效果疊加、背景和模糊等;劣勢(shì)在于:它強(qiáng)大的Web工作流(在網(wǎng)絡(luò)狀況不好的時(shí)候就是一個(gè)災(zāi)難)。

3. Sketch

它目前是設(shè)計(jì)界的網(wǎng)紅,擁有Figma的全部功能,但是擁有更多更完善的第三方的插件,以及更廣泛的服務(wù),它即將推出多人協(xié)作功能。

優(yōu)勢(shì)在于:混合模式、矢量圖形等;劣勢(shì)在于:經(jīng)常崩潰、卡頓和僅限于蘋果設(shè)備使用。

4. Adobe Photoshop

仍然使用PS做UI/UX的設(shè)計(jì)師被稱為老古董,但是我不贊同這種說法,因?yàn)樗麄儾⒉煌耆私馇闆r,是的,我們必須承認(rèn)PS有點(diǎn)過時(shí)了,它對(duì)于一些UI/UX工作流來說太過笨重,但是我們不能忽視當(dāng)它在同一個(gè)畫布上執(zhí)行多個(gè)任務(wù)時(shí)的強(qiáng)大表現(xiàn),這就是為什么這只老槍退休后仍舊威力十足的原因。

優(yōu)勢(shì)在于:圖像編輯、圖層樣式(例如內(nèi)陰影等)和與矢量軟件AI的無縫銜接等;劣勢(shì)在此先不討論。

5. 其他軟件

Invision Studio(用于原型設(shè)計(jì))、Affinity Designer等,與上述四種都屬于同類產(chǎn)品,不建議使用。除非你打算使用漸變、顏色來完成一些諸如鏈接、組件等的簡(jiǎn)單設(shè)計(jì)任務(wù),或者是你單純想要浪費(fèi)甲方爸爸的時(shí)間,否則盡量不要使用AI去做UI設(shè)計(jì)。

四、基礎(chǔ):一個(gè)簡(jiǎn)單的教程

步驟1

新建畫布,如果要上傳Dribbble,就設(shè)置尺寸為1800 * 1350px,因?yàn)樗蟮谋壤?00:600。

本教程在Adobe XD中完成的,但是你也可以在任何軟件中實(shí)現(xiàn)它,甚至是畫板中。

將畫板填充為淺藍(lán)色,色值為#D2DEEF。

步驟2

選擇左上角的矩形工具,繪制一個(gè)601*840px的矩形,這里我添加了倒角,重命名為“Surulere”。

將它填充為灰白色,色值可以是#EAF0F8。

給他一個(gè)#FFFFFF純白色,1px寬的描邊。

為它添加陰影,x為0,y為30,blur為60,確保陰影看上去不那么黑,可以是#A7B3BE (或者 #000000的純黑色,然后設(shè)置35%的透明度)。

復(fù)制原圖層,并且將陰影中的y改為-30,將顏色改為#F8FCFF,并且透明度設(shè)置為50%。

在Figma或者Sketch中,只需要將另一個(gè)陰影效果添加在同一個(gè)圖層上即可,不需要額外復(fù)制圖層。

步驟3

再次選擇矩形工具,添加一個(gè)430*94px的矩形,將它垂直水平居中對(duì)齊,重命名為“Ajah”。

將它填充為同樣的灰白色,并且添加1px的白色描邊。

為它添加陰影,x為0,y為12,blur為16,陰影柔和一些,色值可以是#EAF0F8 (或者 #000000的純黑色,然后設(shè)置30%的透明度)。

復(fù)制原圖層,并且將陰影中的y改為-12,將顏色改為#FFFFFF,純白色。

步驟4

選擇Text工具添加文字:”這種流行趨勢(shì)的按鈕”(或者隨便你喜歡的內(nèi)容)。我會(huì)選擇Calibre字體中的32pt medium字重,然后填充為#66727C的淺灰色。

可以像我這樣排版。

步驟5

打開你的圖標(biāo)庫,隨便選擇一個(gè)圖標(biāo),將它填充為與文字一樣的顏色,我選擇了一個(gè)看起來像家又像教堂一樣的icon。

將圖標(biāo)放在文字的左邊,調(diào)整一下他們之間的間距,確保有足夠的留白空間。

在他們之間添加一條1px白色的分割線。

步驟6

然后就vans了!將它復(fù)制兩遍,然后為圖標(biāo)填充不同的顏色,在網(wǎng)上搜索一些設(shè)計(jì)參考,繼續(xù)探索更加豐富多樣的設(shè)計(jì)。

就是醬嬸兒了!

五、我現(xiàn)在知道它了,之后應(yīng)該怎么使用呢?

知道如何使用、何時(shí)使用這種超能力比它本身更加重要。

它可以用于UI/UX或者網(wǎng)站的設(shè)計(jì)過程中,但是請(qǐng)不要在印刷產(chǎn)品中使用它。如果這種設(shè)計(jì)風(fēng)格要打破它現(xiàn)在的狀況,那么必須得對(duì)它進(jìn)行改進(jìn)和調(diào)整,才可以被應(yīng)用于屏幕之外的世界。

設(shè)計(jì)師可以自由的探索Neumorphism更多的可能性,就像他們目前正在做的那樣,讓它變得更有創(chuàng)造力,更美好。

在動(dòng)態(tài)和三維的設(shè)計(jì)領(lǐng)域中,為了創(chuàng)造更加精美的視覺效果,這種風(fēng)格已經(jīng)被發(fā)展到了極致。

如果你想了解一下它在其他設(shè)計(jì)領(lǐng)域的發(fā)展趨勢(shì),可以在評(píng)論區(qū)留言告訴我。

 

原作者:David Ofiare,來自尼日利亞,他是一位非常有經(jīng)驗(yàn)的獨(dú)立設(shè)計(jì)師。

原文鏈接:https://www.linkedin.com/in/david-ofiare-0a9293173/

編譯:視覺派Pie

本文由 @視覺派Pie? 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!