# 新擬物風 (Neumorphic Design)

{% tabs %}
{% tab title="📗 參考" %}
* [ ] [Neumorphic Buttons](https://designcode.io/swiftui3-neumorphic-buttons) - Design+Code (#todo)
* [ ] AppCoda ⟩ [新擬物風按鈕](https://www.appcoda.com.tw/swiftui-neumorphic-animated-toggle/)
* [ ] [Dribbble - Neumorphic](https://dribbble.com/tags/neumorphic)
* [x] [How to Create a Neumorphic Design With SwiftUI](https://www.raywenderlich.com/7589178-how-to-create-a-neumorphic-design-with-swiftui) - RayWenderlich
* [x] [Neumorphism in user interfaces](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6) - [Michal Malewicz](https://uxdesign.cc/@michalmalewicz?source=post_page-----b47cef3bf3a6--------------------------------) ⭐️
* [ ] Sarunw - [How to create Neumorphic design in SwiftUI](https://sarunw.com/posts/how-to-create-neomorphism-design-in-swiftui/) #todo
{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}

Neumorphism ＝  New + Skeuomorphism (擬物風格)，一種承襲以前流行過的「Skeuomorphism」的新設計風格。

{% tabs %}
{% tab title="新擬物風格" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MHdYrUccXgH8ywIEhoe%2F-MHdvDELLivThk9d1sZY%2Fneumorphic.jpeg?alt=media\&token=c4041eb6-fe46-4650-a611-dbb7ea1e3bd5)


{% endtab %}

{% tab title="側視圖" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MHdvHGu8-Q2E-pIZ_uo%2F-MHdwkVf7HiVRmBnC2Mc%2Fside%20view.jpeg?alt=media\&token=17c7cbfb-b862-4a20-b59b-90fa73345c22)
{% endtab %}

{% tab title="陰影與打光" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MHdwnypmRBUrssmeLx8%2F-MHdx0Ld3H2oQ_-XAvDO%2Fshadow%20%26%20highlight.jpeg?alt=media\&token=9853a189-f7af-4cca-aadb-960a395accac)
{% endtab %}

{% tab title="用色" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MHdx2j3n7G_rlDqMC65%2F-MHdxrjiTM3SYcIOwNnD%2Fcontrast.jpeg?alt=media\&token=85e0a5fc-bbb9-4863-9501-9bc091b20643)
{% endtab %}

{% tab title="按鈕設計" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MHdxtofS4BZqRxzCh3N%2F-MHdyWrKMqFbwj7mbs23%2Fbutton%20design.jpeg?alt=media\&token=3f7c65dd-d50d-4719-8abc-7eb9d2076bde)
{% endtab %}

{% tab title="CSS" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MHdyZTnPr2P48dAovSl%2F-MHdys70nOs9oqiRmWu2%2Fcss.jpeg?alt=media\&token=51f5424a-f61f-4ac0-8bf4-5186fb08c31e)
{% endtab %}
{% endtabs %}

## 設計工具

{% embed url="https://neumorphism.io" %}

