--- highlight: atom-one-light theme: fancy --- ## 前言前段时间发现了一种叫新拟物的 UI 设计 Neumorphism，感觉很新鲜。于是研究的一番，本文将分享新拟物设计的相关知识。 ## 新拟物设计是什么新拟物的前身是 Skeuomorphism（拟物设计），或叫拟物化，即在界面中模仿现实物纹理材质的设计，让人们在使用界面时联想到现实物体的使用方式，由 Apple 公司最先提出。新拟物设计是拟物设计的一种新的思路，它的关注点不在于对现实世界和数字世界的对比和模拟，而关键点在于色调，新拟物设计关注于整个屏幕的颜色，并为用户提供一个完全独特的体验。 ![demo2.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c0b2385ac8a466baca6c9c9ac7707a0~tplv-k3u1fbpfcp-watermark.image?) 比如你有一个音乐播放器界面，使用新拟物设计，这个界面的 UI 元素不是放置在背景之上而是在它后面。它给人的感觉是，像按钮或卡片这样的组件实际上是在背景里面的，只是因为它们是从里面突出来的，所以才可以看到。 ![uisdc-nw-20200630-8.jpeg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f02063ad5cf94f289568b24a34970873~tplv-k3u1fbpfcp-watermark.image?) ## 新拟物设计的对比新拟物设计是一种介于拟物与扁平之间的风格，简化了拟物设计中不必要的效果。 ![neumorphism-skeuomorphism-flat-compared.png.webp](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e84cce2de3e04adba298221d10f157e7~tplv-k3u1fbpfcp-watermark.image?) ## 谁在使用新拟物设计几个使用了新拟物设计的应用 ### 谜底时钟 sz1

### 氢时钟

### Skailer ![GitHubPreview.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4bb59f2e6c34471a759f2136a86fbd6~tplv-k3u1fbpfcp-zoom-1.image) home-dark

### 分贝大师

## 新拟物设计的实现原理新拟物设计通过应用两种不同的阴影实现，一个高亮色，一个阴影色，元素的背景颜色不能是全黑或全白，需要使用一种中间色调，这样可以使阴影效果显示出来。 ![neumorphic-cards.png.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52734ed9c1214f639a4990f7924f1c62~tplv-k3u1fbpfcp-zoom-1.image) ![6c9cb8deabc71b3bb158f6ab7ca653ff.webp](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b76093e60e6e4830af6302d1b5a297ec~tplv-k3u1fbpfcp-zoom-1.image) ![f9f1ad497f9778d196bae05e8122efb7.webp](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/688bd287f57b4bf0a322d88ea167122f~tplv-k3u1fbpfcp-zoom-1.image) ## 使用 Flutter 实现新拟物设计对于开发来说，要实现这种效果，就是使用两层阴影，一层高亮阴影，一层暗色阴影，以及设置元素的背景颜色。凸的时候高亮影在左上，暗色在右下，凹时反过来。以下介绍如何使用 Flutter 框架实现这种效果，Web 端使用相同的原理实现。 1. 首先添加一个容器，用来放置具体的元素，设置背景颜色 ```css Container( width: 600.0, height: 600.0, color: Color(0xffefeeee), ) ``` 2. 添加子元素，设置它的背景颜色以及阴影色和高亮色 ```css child: Container( width: 200, height: 200, decoration: BoxDecoration( // 背景色 color: Color(0xffefeeee), borderRadius: BorderRadius.circular(12.0), boxShadow: const [ // 高亮色 BoxShadow( color: Colors.white.withOpacity(.5), offset: Offset(10.0, 10.0), blurRadius: 4.0, ), // 阴影色 BoxShadow( color: Color(0xffd1cdc7).withOpacity(.5), offset: Offset(-10.0, -10.0), blurRadius: 4.0, ), ], ), ) ``` 3. 给子元素添加圆角和边框配置 ```css decoration: BoxDecoration( // ... borderRadius: BorderRadius.circular(12.0), border: Border.all( color: Colors.white.withOpacity(.2), ), // ... ) ``` 最终效果 ![Xnip2021-09-23_17-24-55.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb362cfc52aa415d92a3b14d49231bb9~tplv-k3u1fbpfcp-zoom-1.image) 这里可以使用一个便捷工具生成代码，以产生不同的效果 [https://neumorphism.coldstone.fun](https://neumorphism.coldstone.fun) 对于 Web 可以使用另一个工具 [https://neumorphism.io](https://neumorphism.io) ## 优点与缺点主要优点在于这种效果给予用户带来的新鲜感，同时它可以与其他风格混合使用。它的缺点在于 1. 层次结构弱界面上缺少信息层级关系，会对用户的决策过程及思考过程产生重大影响。如存在多个可操作的内容，但是重点不突出，这会让用户在当前的流程上产生困惑，从而可能导致错误的判断和误操作，好的 UI/UX 不需要让用户思考。 2. 对比度低，可辨识性较差新拟物仅通过柔和的阴影来区分元素，缺少对比度，因此对视力低下、失明、色盲的用户来说，可辨识性较差，不太友好。 3. 增加开发难度这个风格的实现是对元素增加两个不同方向的投影，通过代码可以实现，但是需要对每个元素添加投影，加大工作量。 ## 总结新拟物设计诞生于拟物设计，它只是一种设计风格，使用场景受限，现实设计中还需要谨慎使用，可以逐渐的应用在细小的元素上。但是任然值得去尝试。 ## 参考 [Neumorphism in user interfaces](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6) [Neumorphism: why it’s all the hype in UI design](https://www.justinmind.com/blog/neumorphism-ui/) [Neumorphism in Flutter](https://tonyowen.medium.com/neumorphism-in-flutter-f46fe25bf9d4) [新拟物风格，UI设计的新趋势还是昙花一现？](https://www.zcool.com.cn/article/ZMTEwNzMwMA==.html) [完整梳理！上半年最热门的新拟物设计趋势是如何演变的？](https://www.uisdc.com/neumorphism-design-trends)