cover

关于新拟物设计 Neumorphism

前言

前段时间发现了一种叫新拟物的 UI 设计 Neumorphism,感觉很新鲜。于是研究的一番,本文将分享新拟物设计的相关知识。

新拟物设计是什么

新拟物的前身是 Skeuomorphism(拟物设计),或叫拟物化,即在界面中模仿现实物纹理材质的设计,让人们在使用界面时联想到现实物体的使用方式,由 Apple 公司最先提出。新拟物设计是拟物设计的一种新的思路,它的关注点不在于对现实世界和数字世界的对比和模拟,而关键点在于色调,新拟物设计关注于整个屏幕的颜色,并为用户提供一个完全独特的体验。

demo2.jpg

比如你有一个音乐播放器界面,使用新拟物设计,这个界面的 UI 元素不是放置在背景之上而是在它后面。它给人的感觉是,像按钮或卡片这样的组件实际上是在背景里面的,只是因为它们是从里面突出来的,所以才可以看到。

uisdc-nw-20200630-8.jpeg

新拟物设计风格的结构由背景色+高光色+阴影色组成,掌握了基本规律,就可以通过改变按钮、卡片的参数进行调整变换。总体来说就是纯色、低对比度以及适当的阴影效果,风格偏柔和。

新拟物设计的对比

新拟物设计是一种介于拟物与扁平之间的风格,简化了拟物设计中不必要的效果。

neumorphism-skeuomorphism-flat-compared.png.webp

谁在使用新拟物设计

几个使用了新拟物设计的应用

谜底时钟

sz1 sz2 sz3

氢时钟

qsz2 qsz2 qsz2

Skailer

GitHubPreview.png

home-dark player-dark player-light home-light

分贝大师

fb1 fb2

新拟物设计的实现原理

新拟物设计通过应用两种不同的阴影实现,一个高亮色,一个阴影色,元素的背景颜色不能是全黑或全白,需要使用一种中间色调,这样可以使阴影效果显示出来。

neumorphic-cards.png.jpg
6c9cb8deabc71b3bb158f6ab7ca653ff.webp
f9f1ad497f9778d196bae05e8122efb7.webp

使用 Flutter 实现新拟物设计

对于开发来说,要实现这种效果,就是使用两层阴影,一层高亮阴影,一层暗色阴影,以及设置元素的背景颜色。凸的时候高亮影在左上,暗色在右下,凹时反过来。以下介绍如何使用 Flutter 框架实现这种效果,Web 端使用相同的原理实现。

  1. 首先添加一个容器,用来放置具体的元素,设置背景颜色
1
2
3
4
5
Container(
width: 600.0,
height: 600.0,
color: Color(0xffefeeee),
)

  1. 添加子元素,设置它的背景颜色以及阴影色和高亮色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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,
),
],
),
)
  1. 给子元素添加圆角和边框配置
1
2
3
4
5
6
7
8
decoration: BoxDecoration(
// ...
borderRadius: BorderRadius.circular(12.0),
border: Border.all(
color: Colors.white.withOpacity(.2),
),
// ...
)

最终效果

Xnip2021-09-23_17-24-55.jpg

这里可以使用一个便捷工具生成代码,以产生不同的效果

https://neumorphism.coldstone.fun

对于 Web 可以使用另一个工具

https://neumorphism.io

优点与缺点

主要优点在于这种效果给予用户带来的新鲜感,同时它可以与其他风格混合使用。

它的缺点在于

  1. 层次结构弱

界面上缺少信息层级关系,会对用户的决策过程及思考过程产生重大影响。如存在多个可操作的内容,但是重点不突出,这会让用户在当前的流程上产生困惑,从而可能导致错误的判断和误操作,好的 UI/UX 不需要让用户思考。

  1. 对比度低,可辨识性较差

新拟物仅通过柔和的阴影来区分元素,缺少对比度,因此对视力低下、失明、色盲的用户来说,可辨识性较差,不太友好。

  1. 增加开发难度

这个风格的实现是对元素增加两个不同方向的投影,通过代码可以实现,但是需要对每个元素添加投影,加大工作量。

总结

新拟物设计诞生于拟物设计,它只是一种设计风格,使用场景受限,现实设计中还需要谨慎使用,可以逐渐的应用在细小的元素上。但是任然值得去尝试。

参考

Neumorphism in user interfaces
Neumorphism: why it’s all the hype in UI design
Neumorphism in Flutter
新拟物风格,UI设计的新趋势还是昙花一现?
完整梳理!上半年最热门的新拟物设计趋势是如何演变的?

Buy Me A Coffee
← 没有更多了 使用 Context 避免深层属性传递 →