Neumorphism – 在線制作輕擬物 UI 設(shè)計(jì)按鈕

新擬物化 UI 設(shè)計(jì)（Neumorphism / soft ui）在近段時(shí)間流行起來的，我們?cè)?Dribbble 中搜索 Neumorphism 就有很多相關(guān)的新擬物化設(shè)計(jì)作品，這種效果一眼看上去感覺很美，很舒服，今天分享的這個(gè)?Neumorphism?在線生成新擬物化 UI 工具，可以通過這個(gè)工具分解出新擬物化 UI 是如何設(shè)計(jì)的，此外它還能生成 CSS 代碼并應(yīng)用到網(wǎng)頁(yè)上。

• 網(wǎng)站首頁(yè)：詳情
• 詳細(xì)介紹：詳情
• 參考鏈接：詳情

新擬物介紹

從上面這張對(duì)比圖可以看出，扁平風(fēng)格就像是一張紙貼在墻面上，投影風(fēng)格像是浮在半空中，而新擬態(tài)風(fēng)格則像是墻面上直接凸起了一塊。

實(shí)現(xiàn)

新擬物化主要是通過陰影來實(shí)現(xiàn)的，通過陰影實(shí)現(xiàn)凸凹兩種質(zhì)感

例子

參考頁(yè)底Demo

相關(guān)鏈接

• 設(shè)計(jì)趨勢(shì) Neumorphism 是什么？.UI中國(guó).布萊恩臣.https://www.ui.cn/detail/514980.html
• Neumorphism（新擬態(tài)）UI設(shè)計(jì)趨勢(shì)嗎？.UI中國(guó).Frannnk.http://www.ui.cn/detail/359233.html
• Skeuomorph Small Style Guide.Figma.https://www.figma.com/file/J1uPSOY5k577mDpSfGFven/Skeuomorph-Small-Style-Guide