各位好，今天繼續和大家分享有關新擬態風格的知識。
國外大火的「新擬態風格」，你知道嗎？
在上一篇新擬態推文中介紹了其處理方式，大概有以下幾點：
❶ 有且只有一個光源照射❷ 元素與背景對比度比較弱❸ 常常用於按鈕組件和卡片❹ 按鈕狀態，視覺上凸出代表未選中，凹進去表示已選中狀態
以上四點在之前的推文中介紹過，今天重點介紹第一點和第二點。
目 錄 / Contents
1 | 有且只有一個光源照射
2 | 元素與背景對比度比較弱
2.1 | 色值分析
2.2 | CSS代碼分析
2.3 | sketch源文件分析
2.4 | 章節小結
3 | 新擬態技法優化
3.1 | 未選中狀態製作步驟
3.2 | 選中狀態製作步驟
3.3 | 製作心得
3.3.1 | 巧用CSS代碼自動生成配色
3.3.2 | 在暗色模式下不需要調整陰影透明度
3.3.3 | 放大，遮住“漏光”
4 | 新擬態PPT模板練習
4.1 | 新擬態PPT模板免費獲取方式
參考文獻
1 | 有且只有一個光源照射
| 圖片源自Dribble @MazePixel
通過觀察不難發現，光源定在左上角，從左上向右下照射。左上角亮色投影，右下角深色投影。
所以，越靠近光源的部分，越亮，遠離光源的越暗。
2 | 元素與背景對比度比較弱
在上一篇推文的實操部分，高光和陰影投影我用的是純白和純黑，對比度太強，柔化邊緣參數要設置很大才能讓色彩過渡更柔和。
經過色值與CSS代碼分析，我發現全部使用純白與純黑做投影並不好。
2.1 | 色值分析
以上次推文中的這三張案例為例進行色值分析，最終發現，無論在亮色模式下還是在暗色模式下，對比度都是很低的。
2.2 | CSS代碼分析
將以上三個案例的背景色放到https://neumorphism.io，根據CSS代碼分析默認狀態下的色值。
完整版CSS代碼：
| 代碼源自孟坤博客 @mengkun
| 代碼運行後的效果
根據代碼提取色值（外陰影）
根據代碼提取色值（內陰影）
2.3 | sketch源文件分析
| 源文件源自站酷 @Frannnk
2.4 | 章節小結
通過色值與CSS代碼分析，確實了上一篇推文中的各種結論。其中要再強調一下新擬態風格元素的組成：1個形狀+2個投影。
其中，形狀與背景色一致，當然也可以添加漸變。投影分為內投影與外投影，凹進去（選中狀態）多使用內投影。凸出（未選中）多使用外投影。
所以在PPT中用柔化邊緣的方法添加兩個投影的方法是正確的。只需要注意不要使用純黑或純白，選取與背景色對比弱的色值即可。
3 | 新擬態技法優化
通過CSS代碼分析，投影大都是呈45°位移，而且受光與背光投影與頂層圖形呈中心對稱。
在上一篇推文中，我們是通過柔化邊緣畫出兩個投影，然後通過調整位置實現新擬態效果。這種方法有兩個缺點：
❶ 形狀轉圖片後不便於二次修改
❷ 很難手動調整到完全中心對稱
基於這兩個缺點，我們來繼續優化。新方法：使用陰影。
3.1 | 未選中狀態製作步驟
❶ 插入一個與背景顏色一致的圓角矩形，然後複製兩份，重合。
❷ 為方便選取元素，在「選擇窗格」中對三個矩形進行重命名。為方便識別，我將受光和背光部分用箭頭表示。
❸ 設置形狀格式，添加「陰影」效果。
3.2 | 選中狀態製作步驟
通過對源文件拆解，可以發現選中狀態下的按鈕需要用內陰影製作。
在PowerPoint軟件中雖然也有內陰影，但兩元素不能重合，所以不能在PPT中使用內陰影製作。
再找辦法——障眼法。在PPT中只能做出一道內陰影，另一道陰影我們可以通過「漸變」來彌補。效果如下圖所示：
❶ 添加內陰影
注：以上參數不是唯一，需要根據具體形狀大小進行調整。
一定要設置距離，因為如果距離為0，四周就會有陰影，影響第二個內陰影的製作。
❷ 添加陰影
經驗一每個滑塊的顏色與背景色一致
經驗二第一個滑塊（高光顏色），亮度提高10%~20%。
經驗三第二個滑塊（陰影顏色），由於高光投影面積要超過對角線，所以滑塊位置建議放在
60%~70%之間。
這裡要特別感謝《好PPT 壞PPT》讀者群一位熱愛鑽研的夥伴@河北小帥幫我驗證了以上幾點經驗。
| PPT模仿案例 @河北小帥
❸ 添加漸變線
注：以上參數不是唯一，需要根據具體形狀大小進行調整。
經驗兩個滑塊顏色與背景色一致。
第一個滑塊提高亮度（5%~15%）
第二個滑塊降低亮度（-5%~-10%）。
❹ 順時針旋轉180度
選中狀態下的形狀是一個有深度的圓角矩形，假如光源定在左上角不動。在地上看，左上角亮，右下角暗。從地下看，則相反。
做了一個粗糙的3D動畫供大家理解。
所以最後，為了讓陰影符合現實規律，需要把形狀順時針旋轉180°。
當然，你也可以一開始就按照這樣的正確順序進行操作（具體操作順序因人而異）。
3.3 | 製作心得
3.3.1 | 巧用CSS代碼自動生成配色
在https://neumorphism.io輸入背景顏色，代碼會自動計算出兩個投影的色值。
將生成的色值複製粘貼到最上面的背景顏色框中，直接用PPT中的「取色器」取色即可。
3.3.2 | 在暗色模式下不需要調整陰影透明度
3.3.3 | 放大，遮住“漏光”
在暗色模式下會出現“漏光”現象，怎麼辦？
將最上層圖形放大一圈，遮住漏光部分即可。
4 | 新擬態PPT模板練習
PPT主題歐美商務總結匯報PPT模板
配色方案
字體方案
思源黑體B\\L\\R
這裡要特別感謝銳普首席設計師 @吳建 對模板細節的審核。成品如下所示：
向下滑動查看更多
4.1 | 新擬態PPT模板免費獲取方式
微信後臺對話框內回覆“新擬態”即可無套路免費下載。
| 讓我看看誰還傻乎乎的在留言區回覆
注：本模板部分頁面來自國外PPT模板（已購買版權）與網頁設計靈感，僅供個人學習使用，任何人不得對外銷售，若發現希望大家積極舉報。
標準的新擬態風格，其內投影或外投影為了增加質感，都會添加投影漸變，由於在PPT中圖層不能疊加，所以這一點在PPT中是很難做出來的。
要製作更精緻的新擬態風格素材，推薦使用專業的UI設計工具，比如當下比較受歡迎的Sketch軟件。http://www.sketchcn.com▼
注：目前這款軟件只有Mac版本，無Windows版本。
如果在Windows上打開.sketch格式文件，推薦使用Lunacy。
https://icons8.com/lunacy▼
新擬態風格的使用場景和形狀元素可以靈活變動，但需要保證光影的統一。以上數值只是一個參考，不能作為唯一標準。具體細節還是需要多練，多觀察。
參考文獻
01.《趨勢 I 解析新擬態風格最全指南》https://www.zcool.com.cn/article/ZMTEwMjQ3Ng==.html
02.Neumorphism（新擬態）UI設計趨勢嗎？https://www.zcool.com.cn/article/ZMTA5ODAwNA==.html
新的一年，你的PPT也該升級一下啦，聯繫我，讓你的PPT大變樣！
閱讀更多 銳普演示 的文章
