https://www.sohu.com/a/374265110_406651
| 圖片源自Dribble @Alexander Plyuto
| 圖片源自Dribble @Timotius Muliawan
| 圖片源自Dribble @Vadim Marchenko
相信設(shè)計(jì)圈的很多小伙伴都發(fā)現(xiàn)了压彭，最近流行一波新的設(shè)計(jì)風(fēng)格——新擬態(tài)。
今天就和大家分享一下國內(nèi)外設(shè)計(jì)師對這種風(fēng)格的看法以及探討如何在PPT中實(shí)現(xiàn)這種效果辱匿。
目 錄 / ****Contents
1 | ****新擬態(tài)是什么灶泵？
1.1 | 扁平、投影和新擬態(tài)的區(qū)別
1.1.1 | 扁平
1.1.2 | 投影
1.1.3 | 新擬態(tài)
1.2 | 新擬態(tài)風(fēng)格特點(diǎn)
1.2.1 | 新擬態(tài)風(fēng)格缺點(diǎn)
2 | 如何在PPT中實(shí)現(xiàn)新擬態(tài)效果补箍？
2.1 | 發(fā)現(xiàn)一
2.2 | 發(fā)現(xiàn)二
結(jié) 論
參考文獻(xiàn)
1 | ****新擬態(tài)是什么
「新擬態(tài)」英文名Neumorphism改执，也有設(shè)計(jì)師稱為 Soft Ui（軟UI）。簡單來說就是一種類似浮雕的效果坑雅，介于扁平與投影之間辈挂。
| 圖片源自站酷 @Frannnk
1.1 |****扁平、投影和新擬態(tài)的區(qū)別
三者區(qū)別主要體現(xiàn)在 層級上裹粤。
1.1.1 | ****扁平
元素與背景是同為一個(gè)平面终蒂，視覺層級沒有特別強(qiáng)烈的前后關(guān)系，對背景依賴不大遥诉。如果本身背景與畫面整體背景有區(qū)分拇泣，色彩就劃分了層級。
扁平風(fēng)格作為更高效更簡潔的風(fēng)格被設(shè)計(jì)師推崇矮锈。在PPT中霉翔， 「扁平化」也是使用最多的風(fēng)格。
| 圖片源自銳普定制案例
1.1.2 | ****投影
| 圖片源自Dribble @Divan Raj
帶投影的給我們的感知就是漂浮起來的苞笨，單獨(dú)看它债朵，它漂浮在背景之上。與扁平并列看瀑凝，它高于扁平序芦，通常大家為了突出某些內(nèi)容或某個(gè)模塊會去使用這種樣式。
投影的使用對背景的依賴幾乎可以忽略粤咪，因?yàn)橥队俺诵螤羁梢哉{(diào)整谚中，包括色彩、大小等都可以調(diào)整，且它是無邊界的漂浮著藏杖，即你可以隨意定義它的高度将塑。
在PPT中有點(diǎn)類似之前流行過的 「微立體」風(fēng)格。
| 圖片源自杜小二原創(chuàng)PPT模板
1.1.3 |****新擬態(tài)
| 圖片源自Dribble @Alexander Plyuto
從頂面看蝌麸，它似乎是介于扁平與投影之間点寥。
從側(cè)面看，同樣也是漂浮的来吩，但是它有厚度卻又沒有離開平面敢辩，它的范圍相對于投影的無邊界，似乎還有一些模糊的界定弟疆。
對背景有一定依賴戚长，需要幾乎相同的色值實(shí)現(xiàn)。
| 圖片源自Dribble @Ashish Kumar
| 圖片源自Dribble @Anna Raptunovich
1.2 |****新擬態(tài)風(fēng)格特點(diǎn)
| 圖片源自Dribble@MazePixel
通過觀察怠苔，不難發(fā)現(xiàn)這種風(fēng)格的一些基本特點(diǎn)：
元素并不浮動
元素色彩相對單一同廉，與背景高度統(tǒng)一
左上角亮色投影，右下角深色投影
多以卡片樣式出現(xiàn)
更加適合大圓角圖形
...
1.2.1 | 新擬態(tài)風(fēng)格缺點(diǎn)
| 圖片源自UI Kits @Harpen Design in
這個(gè)風(fēng)格最大的問題就是缺少對比度柑司，導(dǎo)致可見性較差迫肖。
在色彩使用上比較克制，沒有大面積的平鋪顏色攒驰，僅在極少的位置色彩點(diǎn)綴蟆湖，作用是吸引眼球。
從眾多作品中可以看出玻粪，整體視覺是比較平的隅津，缺少層次。
| 圖片源自Dribble @Riotters
| 圖片源自Dribble @Igor Erema
2 | ****如何在PPT中實(shí)現(xiàn)新擬態(tài)效果劲室？
先來了解一下這個(gè)風(fēng)格的結(jié)構(gòu)伦仍。
初步分析，主要由1個(gè)背景圖形和2個(gè)投影圖形組成痹籍。具體制作步驟如下所示：
? 插入圖形呢铆，顏色與背景色一致
? 復(fù)制兩個(gè)圖形，高光圖形使用明色蹲缠，陰影圖形使用暗色
? 將高光和陰影圖形轉(zhuǎn)為圖片棺克，然后添加 「柔化邊緣」效果
注：復(fù)制圖形，粘貼為圖片线定。
? 調(diào)整高光和陰影圖片大小娜谊、位置以及「柔化邊緣」參數(shù)
注：柔化邊緣參數(shù)值受圖形大小影響。
不知你有沒有注意到斤讥，在本次三星Galaxy S20發(fā)布會的宣傳片中就用到了新擬態(tài)風(fēng)格纱皆。
| 圖片源自好看視頻 @三星Galaxy S20發(fā)布會
在PPT中簡單模仿一下：
可以看出和原稿還是有差距的湾趾。
為了更接近原圖效果，我又發(fā)現(xiàn)了一個(gè)神器派草，可以用CSS代碼實(shí)現(xiàn)新擬態(tài)風(fēng)格搀缠。來看一下用神器實(shí)現(xiàn)的效果如何：
是不是有點(diǎn)內(nèi)味了？
神器鏈接：https://neumorphism.io/#c8d0dc （PC端打開）
| 圖片源自https://neumorphism.io/
在PPT中實(shí)現(xiàn)新擬態(tài)風(fēng)格雖然比較簡單近迁，但如果要調(diào)整起來非常麻煩艺普，但在CSS中實(shí)現(xiàn)起來就相對簡單多了。
在UI設(shè)計(jì)中鉴竭，圖標(biāo)分為“默認(rèn)”和“點(diǎn)擊”狀態(tài)歧譬。
在PPT中，我們通常會用 「對比」的方式突出重點(diǎn)搏存，比如改變圖形底色瑰步、文字顏色、邊框顏色等等璧眠。如果使用新擬態(tài)風(fēng)格會是什么效果呢缩焦？
2.1 | ****發(fā)現(xiàn)一：不要使用純白色背景
如果背景為 **#ffffff **純白色，則效果和在PPT添加陰影差不多蛆橡。所以如果要制作新擬態(tài)風(fēng)格PPT舌界，為了最終效果，建議不要使用純白色泰演。
2.2 | ****發(fā)現(xiàn)二****：****新擬態(tài)鏤空LOGO墻
| 一個(gè)LOGO
| LOGO墻
初步分析上圖動效，主要用了 「棋盤」切換效果葱轩，而且每一個(gè)LOGO的區(qū)域大小與每一小格棋盤區(qū)域相匹配睦焕。具體制作步驟如下所示：
? 插入7*5表格并放大全屏
注：取消「標(biāo)題行」與「鑲邊行」
? 制作新擬態(tài)風(fēng)格圓角矩形
在https://neumorphism.io/#e9f3fc中制作，做好截圖靴拱，放到PPT中調(diào)整圖片大小垃喊，尺寸為4.83*3.82cm（一個(gè)方格大小）袜炕。
? 制作LOGO鏤空效果
LOGO為PNG圖片本谜，具體參數(shù)如下所示：
? 將圖片粘貼到表格，并設(shè)置頁面切換效果
1）選中新擬態(tài)風(fēng)格圓角矩形和LOGO偎窘，復(fù)制
2）在表格中粘貼為圖片
3）取消圖表邊框
4）設(shè)置 「棋盤」切換效果
結(jié) 論
新擬態(tài)風(fēng)格的出現(xiàn)給了設(shè)計(jì)師新驚喜乌助，但這種風(fēng)格實(shí)用性強(qiáng)嗎？能否一直流行陌知？都是一個(gè)問題他托。
對于PPT設(shè)計(jì)來說，要做成這種風(fēng)格對色彩和細(xì)節(jié)的把握要求較高仆葡，需要借助第三方設(shè)計(jì)軟件實(shí)現(xiàn)赏参。
那么接下來也請你預(yù)測一下，新擬態(tài)風(fēng)格會成為下一個(gè)流行趨勢嗎？
參考文獻(xiàn)
01.《設(shè)計(jì)趨勢 Neumorphism 是什么把篓？》
https://www.zcool.com.cn/article/ZMTEwMTA5Mg==.html
02.Neumorphism（新擬態(tài)）UI設(shè)計(jì)趨勢嗎纫溃？
https://www.zcool.com.cn/article/ZMTA5ODAwNA==.html
03.《新擬態(tài)——國外設(shè)計(jì)師分析的全新UI趨勢》
http://www.woshipm.com/pd/3386232.html
04.《Neumorphism in user interfaces》
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
RECOMMEND
