對于任何令人興奮和新鮮的事物，我傾向于像孩子一樣對待每一篇文章，將這些特定的主題進(jìn)行整合，而不是就此單獨另起一個篇幅，這會破壞它的完整性。
今天我們討論的話題是圍繞Neumorphism的，它是一種設(shè)計風(fēng)格，也可以稱之為設(shè)計趨勢，這讓很多設(shè)計師們大力追捧，不知道是不是我看的還不夠全面？讓我們一起捋一捋吧。
Neumorphism
Neumorphism(或者叫Neo-skeuomorphism)是一種新潮的設(shè)計風(fēng)格，應(yīng)用于網(wǎng)頁元素、框架、界面等，也被稱為Skeuomorphism。所以Neumorphism是“New” 和 “Skeuomorphism”的"巧妙"結(jié)合。因為我們對于“New”已經(jīng)不陌生了，就讓我們來看看“ Skeuomorphism”吧。
在定義擬物化現(xiàn)象時，BBC是最值得一看的，自從人類發(fā)明了收音機，它就為我們提供了最新的新聞：
手機應(yīng)用的設(shè)計手法是模仿現(xiàn)實生活中的物體，這就是“Skeuomorphism”。
他們在關(guān)于喬布斯的報告（紀(jì)念文章）中偶然發(fā)現(xiàn)了這個清晰的定義，解釋了蘋果產(chǎn)品傳統(tǒng)外觀的轉(zhuǎn)變，作者在文章中著重強調(diào)了這個引用。
由此我們得知Skeuomorphism這一詞語，作為一種設(shè)計風(fēng)格，在蘋果的設(shè)計團隊中已經(jīng)被廣泛的應(yīng)用于各種產(chǎn)品，并且，蘋果的做法表明，他們在這一領(lǐng)域擁有絕對的主導(dǎo)地位。因此我們可以得出一個初級的定義：
Skeuomorphism = 過去的蘋果風(fēng)
另一個需要注意的點是，它與另一個UI/UX流行語密切相關(guān)：隱喻，這恰好是一個非常正面的詞，在產(chǎn)品設(shè)計領(lǐng)域受到高度重視。
Ultralinx中的超寫實圖標(biāo)
擬物(Skeuomorphism)設(shè)計的衰落
在發(fā)布IOS7系統(tǒng)之前，蘋果公司宣布放棄傳統(tǒng)的設(shè)計風(fēng)格，包括界面和圖標(biāo)，從那時起，這種風(fēng)格開始向扁平風(fēng)轉(zhuǎn)變。
蘋果設(shè)計團隊的明智之舉在于盡可能的減緩這一變革，到2019年的時候，這種扁平風(fēng)才在整個設(shè)計行業(yè)達(dá)到了頂峰。
蘋果公司，作為行業(yè)風(fēng)向標(biāo)，宣告Skeuomorphism的徹底結(jié)束，設(shè)計行業(yè)紛紛跟風(fēng)。設(shè)計師是技術(shù)不斷更新的群體，他們很容易適應(yīng)新的設(shè)計風(fēng)格。隨著扁平風(fēng)格人物插圖開始流行，2018年底至2019年我們也一起見證了純扁平風(fēng)格設(shè)計的衰落，但是這又是另一回事了。
一個可愛生命的轉(zhuǎn)世
我知道你可能會把這個標(biāo)題想成非洲奇幻小說或者熱門網(wǎng)綜，但是都不是，它僅僅意味著Skeuomorphism以Neumorphism的身份又出現(xiàn)在了大眾視野中。（彩云注：趨勢輪回）。
當(dāng)你打開Dribbble，并且搜索關(guān)鍵字：Neumorphism，很容易被大批類似的作品刷屏，從專業(yè)設(shè)計師到業(yè)余愛好者，作品一幅接一幅。
我也是其中之一，你可以在這里找到我的作品。任何一個標(biāo)簽都可以將你引領(lǐng)到Neumorphism的地盤，在這里你可以真正的感受它的魅力。
David Ofiare的作品
Filip Legierski的作品
它新在哪？
“Neo” 和 “Neu”起源于同一個詞根。
仔細(xì)分析一下這個從2019年11月流行起來的新風(fēng)格，你會發(fā)現(xiàn)很多的復(fù)雜元素都被改造成了極簡設(shè)計。
熱門Youtube博主Marques Brownlee制作的Twitter頭部
配色：
大多數(shù)情況下主色調(diào)為淺色，低飽和，看起來接近于白色、米色或者輕灰色。并且，僅僅使用顏色相近的漸變色來突出某些特定部分。
形狀：
易于訪問的形狀用于創(chuàng)建重復(fù)性的用戶界面。
表現(xiàn)：
不同于之前的設(shè)計，Neumorphism風(fēng)格的特點是非常柔和，它不會過度模仿自然界中的物體，而是創(chuàng)建一種新的表現(xiàn)形式，看起來像3D白模(3D設(shè)計的時候，模型沒有貼紋理材質(zhì)之前呈現(xiàn)的一種狀態(tài))。
效果：
沒有刻意做的特別寫實，而是采用了HTML、CSS易于實現(xiàn)的效果，例如雙投影、漸變、填充、描邊或者內(nèi)陰影，所有的這些效果都可以由初級開發(fā)工程師用現(xiàn)成的代碼去實現(xiàn)。
零開發(fā)難度：
如果是開發(fā)難度特別大的設(shè)計，可能需要10倍的開發(fā)人力來實現(xiàn)它，或者被困于PNG、GIF、JPG圖片的顯示效果不佳，而不能采用SVG這種更加清晰的可伸縮矢量圖形。
MazePixel設(shè)計的免費Icon和元素
如何設(shè)計Neumorphism？
首先，你得是一名設(shè)計師，不是設(shè)計家具或者服裝的那種，而是互聯(lián)網(wǎng)設(shè)計師。所以，雖然它有一定限制，但是又不僅僅限于：產(chǎn)品設(shè)計師、UI設(shè)計師和平面設(shè)計師。
一旦角色確定了，那么平時常用的設(shè)計軟件都可以做到。
每種工具和它們自身的局限性：
我將嘗試從UI/UX和產(chǎn)品設(shè)計的角度來分析這些工具之間的優(yōu)缺點：
1、Adobe XD：最初是為UI/UX設(shè)計師所設(shè)計的，它一個非常輕量級的設(shè)計工具，目的是配合第三方的插件以及其他的Adobe軟件結(jié)合使用，因為單獨使用的時候，它本身的功能比較局限。優(yōu)勢在于：組件狀態(tài)、背景和模糊等功能非常實用；劣勢在于：沒有多重投影、漸變描邊等功能。
2、Figma：第一個通過網(wǎng)頁，實現(xiàn)大規(guī)模多人協(xié)作的設(shè)計工具。它也提供大量的第三方插件，與其他傳統(tǒng)的設(shè)計軟件結(jié)合的不是很流暢，但是也得到了很多設(shè)計師的喜愛。優(yōu)勢在于：效果疊加、背景和對象模糊等，它強大的Web工作流；劣勢就在于如果網(wǎng)絡(luò)狀況不好的時候就是一個災(zāi)難。
3、Sketch它目前是設(shè)計界的網(wǎng)紅，擁有Figma的全部功能，但是擁有更多更完善的第三方的插件，以及更廣泛的服務(wù)，它也即將推出多人協(xié)作功能。優(yōu)勢在于：混合模式、矢量圖形等；劣勢在于：偶爾崩潰、卡頓和僅限于蘋果設(shè)備使用。
4、Adobe Photoshop仍然使用PS做UI的設(shè)計師被稱為老古董，但是我不贊同這種說法，因為他們并不完全了解情況。是的，我們必須承認(rèn)PS有點過時了，它對于一些UI/UX工作流來說太過笨重，但是我們不能忽視當(dāng)它能完整執(zhí)行所有創(chuàng)意任務(wù)時的強大表現(xiàn)，這就是為什么這只老槍退休后仍舊威力十足的原因。
優(yōu)勢在于：圖像編輯、圖層樣式（例如內(nèi)陰影等）和與矢量軟件AI的無縫銜接等；劣勢在此先不討論。
5、其他軟件Invision Studio（用于原型設(shè)計）、Affinity Designer等，與上述四種都屬于同類產(chǎn)品。
6、不建議使用除非你打算使用漸變、顏色來完成一些諸如鏈接、組件等的簡單設(shè)計任務(wù)，或者是你單純想要浪費甲方爸爸的時間，否則盡量不要使用AI去做UI設(shè)計。
GanKin的桌面應(yīng)用概念設(shè)計
一個簡單的基礎(chǔ)教程步驟1:新建畫布，如果要上傳Dribbble，就設(shè)置尺寸為1800 * 1350px，因為它要求的比例是800:600。
本教程在Adobe XD中完成的，但是你也可以在任何軟件中實現(xiàn)它。將畫板填充為淺藍(lán)色，色值為#D2DEEF。
步驟2:
選擇左上角的矩形工具，繪制一個601*840px的矩形，這里我添加了倒角，重命名為“Surulere”。
將它填充為灰白色，色值可以是#EAF0F8。給他一個#FFFFFF純白色，1px寬的描邊。為它添加陰影，x為0，y為30，blur為60，確保陰影看上去不那么黑，可以是#A7B3BE (或者 #000000的純黑色，然后設(shè)置35%的透明度)。
復(fù)制原圖層，并且將陰影中的y改為-30，將顏色改為#F8FCFF，并且透明度設(shè)置為50%。
在Figma或者Sketch中，只需要將另一個陰影效果添加在同一個圖層上即可，不需要額外復(fù)制圖層。
步驟3:再次選擇矩形工具，添加一個430*94px的矩形，將它垂直水平居中對齊，重命名為“Ajah”。
將它填充為同樣的灰白色，并且添加1px的白色描邊。為它添加陰影，x為0，y為12，blur為16，陰影柔和一些，色值可以是#EAF0F8 (或者 #000000的純黑色，然后設(shè)置30%的透明度)。
復(fù)制原圖層，并且將陰影中的y改為-12，將顏色改為#FFFFFF，純白色。
步驟4:選擇Text工具添加文字："這種流行趨勢的按鈕"(或者隨便你喜歡的內(nèi)容)。我會選擇Calibre字體中的32pt medium字重，然后填充為#66727C的淺灰色。
可以像我這樣排版。
步驟5:隨便選擇一個圖標(biāo)，將它填充為與文字一樣的顏色，我選擇了一個看起來像家又像教堂一樣的icon。
將圖標(biāo)放在文字的左邊，調(diào)整一下他們之間的間距，確保有足夠的留白空間。在他們之間添加一條1px白色的分割線。
步驟6:將它復(fù)制兩遍，然后為圖標(biāo)填充不同的顏色，在網(wǎng)上搜索一些設(shè)計參考，繼續(xù)探索更加豐富多樣的設(shè)計。
就是這樣了。
我現(xiàn)在知道它了，之后應(yīng)該怎么使用呢？
知道如何使用、何時使用這種超能力比它本身更加重要。
它可以用于UI/UX或者網(wǎng)站的設(shè)計過程中，但是請不要在印刷產(chǎn)品中使用它。如果這種設(shè)計風(fēng)格要打破它現(xiàn)在的狀況，那么必須得對它進(jìn)行改進(jìn)和調(diào)整，才可以被應(yīng)用于屏幕之外的世界。
設(shè)計師可以自由的探索Neumorphism更多的可能性，就像他們目前正在做的那樣，讓它變得更有創(chuàng)造力，更美好。
最后，在如今的設(shè)計中…
在動態(tài)和三維的設(shè)計領(lǐng)域中，為了創(chuàng)造更加精美的視覺效果，這種風(fēng)格已經(jīng)被發(fā)展到了極致。
原文：https://medium.com/@artofofiare/neumorphism-the-right-way-a-2020-design-trend-386e6a09040a
作者：David Ofiare
譯者: 視覺派Pie
譯者簡介：韓雪晴，計算機背景，前端出身，著迷于世間一切美好事物，畢業(yè)后一直不斷挑戰(zhàn)和嘗試新的領(lǐng)域，完成了從程序猿到設(shè)計獅的進(jìn)化。目前在英國南安普敦大學(xué)，交互設(shè)計研究生在讀，歡迎大家搜索關(guān)注我的個人公眾號：視覺派Pie，我會在這里分享精彩的留學(xué)生活和設(shè)計心得。
原文：彩云譯設(shè)計
