前段时间发现了一种叫新拟物的 UI 设计 Neumorphism,感觉很新鲜。于是研究的一番,本文将分享新拟物设计的相关知识。
前言
前段时间发现了一种叫新拟物的 UI 设计 Neumorphism,感觉很新鲜。于是研究的一番,本文将分享新拟物设计的相关知识。
新拟物设计是什么
新拟物的前身是 Skeuomorphism(拟物设计),或叫拟物化,即在界面中模仿现实物纹理材质的设计,让人们在使用界面时联想到现实物体的使用方式,由 Apple 公司最先提出。新拟物设计是拟物设计的一种新的思路,它的关注点不在于对现实世界和数字世界的对比和模拟,而关键点在于色调,新拟物设计关注于整个屏幕的颜色,并为用户提供一个完全独特的体验。
比如你有一个音乐播放器界面,使用新拟物设计,这个界面的 UI 元素不是放置在背景之上而是在它后面。它给人的感觉是,像按钮或卡片这样的组件实际上是在背景里面的,只是因为它们是从里面突出来的,所以才可以看到。
新拟物设计风格的结构由背景色+高光色+阴影色组成,掌握了基本规律,就可以通过改变按钮、卡片的参数进行调整变换。总体来说就是纯色、低对比度以及适当的阴影效果,风格偏柔和。
新拟物设计的对比
新拟物设计是一种介于拟物与扁平之间的风格,简化了拟物设计中不必要的效果。
谁在使用新拟物设计
几个使用了新拟物设计的应用
谜底时钟
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632385174572-06b0d5de-34f2-4060-aa6f-da1146305295.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=ua27c5db6&margin=%5Bobject%20Object%5D&name=sz1.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=592151&status=done&style=none&taskId=u424bbb22-660a-451a-8609-6591f960ae1&width=207)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632385174740-b0e616bc-0b44-47e0-8150-eeb3eaeda95a.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=uaca893b8&margin=%5Bobject%20Object%5D&name=sz2.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=617381&status=done&style=none&taskId=u744b5a24-26c7-4520-b44a-89699644b5f&width=207)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632385175228-edf5a9b0-b1d3-4aec-8a00-ac2f819d607c.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=ub41efc40&margin=%5Bobject%20Object%5D&name=sz3.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=753103&status=done&style=none&taskId=ue934bac5-0315-452a-8351-cdef86b52d0&width=207)
氢时钟
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632385427631-e4ad535e-6c91-418e-a0de-3b4c80c64f01.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=u92f0b98c&margin=%5Bobject%20Object%5D&name=qsz2.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=200280&status=done&style=none&taskId=uadeaad65-d0d8-4a86-b985-2016c3c2bfd&width=207)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632385428125-35445106-6432-4c6f-9daa-41b6b2d94c88.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=udd5347fc&margin=%5Bobject%20Object%5D&name=qsz1.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=362349&status=done&style=none&taskId=u1ff2c507-b4a7-4d74-b403-6865146ef6b&width=207)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632385427974-46531ea0-fac9-4c12-8eaa-e3c5f390802d.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=u1eede575&margin=%5Bobject%20Object%5D&name=qsz3.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=278593&status=done&style=none&taskId=ucf3c2510-3113-4d5e-b549-d42f76fc112&width=207)
Skailer
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632386236813-a2266689-7519-411f-bcb1-b2ac64f39094.png#clientId=u1367e7e7-fd10-4&from=drop&height=368&id=ue22be91a&margin=%5Bobject%20Object%5D&name=home-dark.png&originHeight=1471&originWidth=728&originalType=binary&ratio=1&size=654058&status=done&style=none&taskId=u53575269-775b-4772-af60-c9805c661c7&width=280)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632386402468-ca59fff3-8281-44e6-95d0-c8107d70a162.png#clientId=u1367e7e7-fd10-4&from=drop&height=368&id=u34eb43a2&margin=%5Bobject%20Object%5D&name=player-dark.png&originHeight=1471&originWidth=728&originalType=binary&ratio=1&size=413125&status=done&style=none&taskId=uee5a8ab6-33d2-4c64-b48b-3ebda28a521&width=280)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632386243666-265748d2-dced-45d3-b717-8755406fd7eb.png#clientId=u1367e7e7-fd10-4&from=drop&height=368&id=ue77170b3&margin=%5Bobject%20Object%5D&name=player-light.png&originHeight=1471&originWidth=728&originalType=binary&ratio=1&size=416886&status=done&style=none&taskId=ucfefa3fe-03cf-4be8-ace6-e8bdaf80e35&width=280)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632386367876-94a5ad15-e83d-4202-99fb-b0707f650ed5.png#clientId=u1367e7e7-fd10-4&from=drop&height=368&id=u025b79d4&margin=%5Bobject%20Object%5D&name=home-light.png&originHeight=1471&originWidth=728&originalType=binary&ratio=1&size=624767&status=done&style=none&taskId=ub8e92b29-85d8-482a-ab93-1de212bd7e0&width=280)
分贝大师
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632392472721-5509c234-a267-4803-b4b2-618b4dd4427a.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=u45f40f01&margin=%5Bobject%20Object%5D&name=fb1.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=1579559&status=done&style=none&taskId=uc64fcc11-5489-425c-a17c-4dd1d31769e&width=280)
![](https://cdn.nlark.com/yuque/0/2021/png/224563/1632392471542-c71816ae-f2c6-416f-afdd-6afd05bc53ad.png#clientId=u1367e7e7-fd10-4&from=drop&height=448&id=u3f2cb4e3&margin=%5Bobject%20Object%5D&name=fb2.PNG&originHeight=1792&originWidth=828&originalType=binary&ratio=1&size=1100292&status=done&style=none&taskId=u8bf60d82-b3ba-4e16-bf6b-a9bac5c4bcb&width=280)
新拟物设计的实现原理
新拟物设计通过应用两种不同的阴影实现,一个高亮色,一个阴影色,元素的背景颜色不能是全黑或全白,需要使用一种中间色调,这样可以使阴影效果显示出来。
使用 Flutter 实现新拟物设计
对于开发来说,要实现这种效果,就是使用两层阴影,一层高亮阴影,一层暗色阴影,以及设置元素的背景颜色。凸的时候高亮影在左上,暗色在右下,凹时反过来。以下介绍如何使用 Flutter 框架实现这种效果,Web 端使用相同的原理实现。
- 首先添加一个容器,用来放置具体的元素,设置背景颜色
1 | Container( |
- 添加子元素,设置它的背景颜色以及阴影色和高亮色
1 | child: Container( |
- 给子元素添加圆角和边框配置
1 | decoration: BoxDecoration( |
最终效果
这里可以使用一个便捷工具生成代码,以产生不同的效果
https://neumorphism.coldstone.fun
对于 Web 可以使用另一个工具
优点与缺点
主要优点在于这种效果给予用户带来的新鲜感,同时它可以与其他风格混合使用。
它的缺点在于
- 层次结构弱
界面上缺少信息层级关系,会对用户的决策过程及思考过程产生重大影响。如存在多个可操作的内容,但是重点不突出,这会让用户在当前的流程上产生困惑,从而可能导致错误的判断和误操作,好的 UI/UX 不需要让用户思考。
- 对比度低,可辨识性较差
新拟物仅通过柔和的阴影来区分元素,缺少对比度,因此对视力低下、失明、色盲的用户来说,可辨识性较差,不太友好。
- 增加开发难度
这个风格的实现是对元素增加两个不同方向的投影,通过代码可以实现,但是需要对每个元素添加投影,加大工作量。
总结
新拟物设计诞生于拟物设计,它只是一种设计风格,使用场景受限,现实设计中还需要谨慎使用,可以逐渐的应用在细小的元素上。但是任然值得去尝试。
参考
Neumorphism in user interfaces
Neumorphism: why it’s all the hype in UI design
Neumorphism in Flutter
新拟物风格,UI设计的新趋势还是昙花一现?
完整梳理!上半年最热门的新拟物设计趋势是如何演变的?