现代 CSS

聊聊Neumorphism UI效果

作者：大漠 日期：2020-02-20 点击：1739
Neumorphism
CSS
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

最近在翻阅信息时发现很多人都在聊一个新的东西，这个新东西就是Neumorphism，对此我也感到好奇，花了一点时间去了解了一下为什么这么多人都在聊“Neumorphism”。原来 “Neumorphism”是一种UI设计风格，该UI风格是因为设计师 @Alexander Plyuto 在Dribble上发表的一份作品而变得流行起来。很多人都认为“Neumorphism”会成为2020年的一种设计趋势，事实上在过去几个月它已经成为一种新的设计潮流，但事实真正是这样的吗？如果是，作为Web开发者又如何能快速响应设计师的需求，快速而又精准的还原出“Neumorphism” UI效果。那么今天我们就来聊聊这方面的话题。

Neumorphism UI是什么？

先上一张Neumorphism UI图，该图是@Alexander Plyuto的作品：

上图就是最近大家在聊的Neumorphism UI。

Neumorphism也俗称为Solt UI，自2019年@Alexander Plyuto在Dribble上发表的一份作品而变得流行起来，该词最出现在@Michal Malewicz在Medium上发表的一篇题为《Neumorphism in user interfaces》的文章中。可以说@Meichal Malewicz创建了该词，但同时@Meichal Malewicz在另一篇文章《Neumorphism will NOT be a huge trend in 2020》中也说，在2020年中该Neumorphism并不会成了为一种设计趋势，因为在实际生产中还存在很多的困难。即使这样，Neumorphism还是令人着迷，而且讨论的人越来越多，甚至Cult Of Mac还梦想着苹果能在iOS14中实现Neumorphism UI：

Flat UI elements, bolstered with real-world visual cues, make neumorphism easy to "read." -- @MazePizel/Dribble

Neumorphism UI的由来

Neumorphism并不是最新的一个产物，虽然该效果最近在Dribble和Instagram上获得了大量的关注。其中@Jason Kelley在评论中把该效果称为“New Skeuomorphism”。而Skeuomorphism是图形用户界面设计中最常见的一个术语，用于描述在界面对象的外观或用户如何与之交互（IDF）方面模拟现实世界对象的界面对象。

当计算器首次引入Skeuomorphism时，Skeuomorphism变得非常重要，那是因为它使人们能够很容易地过渡到使用数字设备：

正如卡米尔·法拉纳（Kamil Falana）指出的那样，从无生命的“表达”到现实主义的过渡开始出现。

不过，在过去的几年时间中，Flat设计和Google的Material设计一直是界面设计的主流，自从iOS7出现后，它们便毫不做作地取代了之前的Skeuomorphism UI风格。

目前扁平化设计（Flat Design）过于雷同，用户审美疲劳。偶尔出现新设计趋势风格，反而更能给各位设计师们带来新鲜感！不久前，还观察到，这种变化开始在我们身边发生，苹果（iOS13系统）就是一个很好的例子。向最小化设计和轻拟物化发展，最终带来了无纹理3D视觉感官。

Neumorphism实际上是结合了Flat设计和Skeuomorphism两者的优点：“干净的界面，通过巧妙地使用高光和阴影，让界面变得更加坚固”！也正因为如此，@Jason Kelley才会称之为“New Skeuomorphism”，之后@Michal Malewicz将这种界面效果称为“Neumorphism”。

Neumorphism UI特征

为了更好的描述Neumorphism UI的特征，接下来拿Neumorphism UI和Google Material UI设计的卡片（Card）来作比较，这样直观感更强一些。

上图中右侧的卡片是Google Material设计指南设计的卡片UI，该效果通常是在画布中以浮层的形式出现，厚度更加明显。阴影既可以增加深度，也可以在很多情况下定义形状本身，因为阴影通常是无边界的。

而上图中左侧的卡片就是Neumorphism UI效果。Neumorphism风格的卡片从背景中突出。它是由与背景颜色完全相同的卡片制成的凸起形状。当我们从侧面看时，它不会浮起来。

Neumorphism UI有一个非常明显的特征，该UI风格具有两个阴影，一个阴影为负值，另一个阴影为正值，但要使其正常显式，那么背景不能全是黑或白，至少需要一点色调，以便可见深色和浅色阴影。你可以使用任何色调作为背景，以便根据你的选择将其变暖或变冷。但是必须能看到深色或者浅色投影。

比如下面这个示例：

如何实现 Neumorphism UI效果

接下来我们来看看如何实现Neumorphism UI效果。作为开发人员，更关心的是如何使用代码快速实现Neumorphism UI效果。最近在Codepen上新增了不少这样的Demo效果:

我们找一个案例来看怎么用CSS实现Neumorphism UI效果，比如@mixj93写的一个音乐播放器UI效果：

我们来看示例中进度条的这个部分：

实现上图效果，HTML结构很简单：

<div class="time">
    <div class="bar"></div>
</div>

CSS如下：

body {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f8fd;
}

.time {
    position: relative;
    width: 80vw;
    height: 16px;
    border-radius: 8px;
    box-shadow: 9px 9px 9px rgba(0,0,0,0.05), -9px -9px 9px rgba(255,255,255,0.5), inset 4px 4px 4px rgba(0,0,0,0.05), inset -4px -4px 4px rgba(255,255,255,0.5);
}

.bar {
    width: 80%;
    height: 12px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 6px;
    background-color: #fed0b3;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.05), -2px -2px 2px rgba(255,255,255,0.5), inset 3px 3px 3px rgba(255,255,255,0.5), inset -3px -3px 3px rgba(0,0,0,0.05);
}

最终效果如下：

如果你有相应的UI设计稿，比如Sketch文件，那么实现这样的效果也不是难事，比如下面这个示例中的:

点击这里可以下载Sketch源文件。

拿其中一个button来举例，我们可以直接在Sketch中复制所需要的CSS代码：

然后将需要的代码粘贴到对应的元素上，比如：

.box {
    background: rgba(255,255,255,0.00);
    background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%);
    box-shadow: 
        -5px -5px 15px 0 #FFFFFF, 
        5px 5px 15px 0 #D7D5D1, 
        inset 0 -2px 2px 0 rgba(0,0,0,0.10), 
        inset 0 -20px 15px 0 rgba(226,223,221,0.50);
}

再补上元素所需的一些样式，比如宽度，高度等，另外在主体上添加一个背景色，这样就可以达到我们所需要的效果了：

注意上面的示例中没有完全还原，比如中间渐变色的三角按钮效果。感兴趣的同学可以下载源文件自己试一试。

除了外凸效果之外还可以实现一些内凹效果，如@halvves写的单选按钮效果：

在社区中有一款在线工具 Neumorphism.io 可以自动生成Neumorphism UI效果所需要的CSS代码。

你可以亲自尝试一下，你会发现该工具只适用于柔和的配色方案，如果把饱和度调到任意程度，效果就会消失。

说实话，就我自己体验下来，目前如果仅仅通过CSS代码要完全来实现Neumorphism UI的效果还是有一定的难度的。目前仅仅是依赖于box-shadow和颜色的对比使用，可以实现一些简单的效果，但很多时候，Neumorphism UI效果会运用到一些其他设计手段，比如说滤镜、高斯模糊等，那么CSS要实现这些效果还是有较大难度的。因此在在实际项目中大规模的采用Neumorphism UI风格，实现成本还是较大。

Neumorphism UI缺陷

Neumorphism UI主要好处是“新”，至少会持续很长的时间，它为界面带来了“新感觉”，并使其脱颖而出。它也可以和其他样式混合使用，这样就避免了界面呆板，而让界面变得柔软凸起（凹陷），更具质感。但Neumorphism UI也有着致命的缺陷。那就是可访问性。

访问互联网的人群（或者使用你产品的用户群体）可能会是下图中的某一（或同时是几个）类型之一：

而Neumorphism UI对于认识、身体和视觉有障碍的用户是致命的。先上个效果图：

W3C对于移动端有关于可访问性是这样描述的：

Mobile devices are more likely than desktop/laptop devices to be used in varied environments including outdoors, where glare from the sun or other strong lighting sources is more likely. This scenario heightens the importance of use of good contrast for all users and may compound the challenges that users with low vision have accessing content with poor contrast on mobile devices.

大致的意思是：“移动设备比桌面、笔记本设备更有可能用于各种环境，包括户外。如果在户外更有可能受到来自太阳或其他强光源的影响。这种情况提高了对所有用户使用良好对比度的重要性，并可能增加低视力用户在移动设备上访问对比度差的内容的难度”。

而且在WCAG 2.0中对于对比度是有一定的标准的：

  • AA级：1.4.3对比度（最低），要求对比度至少为4.5:1（大尺寸文本为3:1）
  • AAA级：1.4.6对比度（增强），要求对比度至少为7:1(大尺寸文本为4.5:1)

有关于A11Y更多的内容可以阅读小站关于A11Y方面的系列教程。

我们来看一个按钮示例，就下图这样的按钮，哪种按钮你更有点击的欲望呢？

Neumorphism风格的按钮和具有一定对比度的仿真按钮或Flat风格的按钮相比的话，Neumorphism风格的按钮根本就不像真正的按钮那样，也不具有让人点击的欲望。

除了颜色对比度差带来的可访问性问题之外。Neumorphism UI还强度依赖于阴影。虽然说有阴影的物体比没有阴影的物体更容易被高亮显式，但是Neumorphism UI风格下，大多数元素都是浮动的，并且很突出，在一个屏幕上就会造成相互竞争。这样就很难准确地感知层次结构的设计，从而导致屏幕缺乏合适的焦点，在视线跟踪中造成一定的混乱。屏幕上缺少层次结构会对用户的决策过程以及他们的思维过程产生重大影响。因此，如果有多个操作项，但是缺少设计层次和焦点，就会造成一定的障碍，妨碍用户理解屏幕上发生的事情，从而导致混乱和糟糕的判断。一个好的UI或UX是不需要用户去思考的。

认知和学习障碍影响人们处理信息的方式。例如，它们可以影响人们的感知、记忆、语言、注意力、解决问题和理解。类别和条件的术语各不相同，包括智力障碍、发育障碍;注意缺陷多动障碍(ADHD)、自闭症、痴呆、诵读困难等等。

Neumorphism UI由内外阴影决定和确定，而且其UI外形和各种阴影色调、角度有关，更会令人们不清楚界面上什么是可点击的，什么是不可点击的。

如果你对方面更多的内容感兴趣，还可以阅读下面这几篇文章：

我们真的需要Neumorphism UI吗？

尽管Neumorphism UI效果在近来受到很多设计师的青眯，也一度被认为是2020年Web UI设计的一个趋势。所以去疯狂的顺应这一趋势，并对其进行调整以使其成为你自己的趋势。

UI设计师们的工作就是需要不断来回挑战自我，探索最新潮流，以符合产品调性。同时开发者也需要配合UI设计师们一起去接受新的挑战，以最低的成本，最高效的方式精准的将设计师们设计的UI搬到Web页面或Web应用中。如果没有这种不断探索的精神，所有产品将再次看起来相同，同质化严重。

但也要记住，每个新趋势都带有不可抗拒性因素，如果要使用，必须精心的设计探索， 验证后才拿去面对用户。正如@Michal Malewicz在另一篇文章《Neumorphism will NOT be a huge trend in 2020》所言：

Neumorphism的确很有趣，也令人感到兴奋，但从未想过它会走得那么远。虽然很多人都一致的认为Neumorphism会成为2020年一种新的设计潮流和趋势。但事实上，Neumorphism还不足以成为流行的设计风格。特别是在真实的、编码的产品中。

当然，你可以在暗色模式（Dark Mode）下做，你也可以选择多种不同的灰白色背景颜色。这就给了我们六种可能的样式，但它们之间的差异太小了：

就目前而言，不管是卡片还是按钮，这种样式被过度使用，常常违反了设计的一些规则。当然，Neumorphism作为一个被压状态看起来很好，但对许多人来说，它不够明显，因为变化太细微了。正如前面所说的一样，Neumorphism应用在一些界面设计中对于Web可访问性来说是致命的。

相比而言，也有人说Neumorphism UI应用在卡片或滑块上是一个最佳的场景。但这也是有前提条件的，那就是卡片的结构是正确的。图像、图标和字体之间的层次结构应必须清晰，而且间距必须明确。

针对这一点，在上一节中也提到过，如果层次设计的不够清晰的话，那么Neumorphism风格的卡片也会令用户感到糟糕，因为用户在卡片上得不到想的焦点信息。

另外，随着苹果系统的暗黑模式（Dark Mode）出现，不管你喜欢与否，它都将成为一个事实，而且该模式确实让很多用户感到舒服和受益，比如说纯黑色不太会消耗设备的电量，比如说更不会让用户眼睛更没那么容易感到疲劳。而Neumorphism UI柔和的配色在暗黑模式下的运用看起来肯定会更好：

如果你从未接触过Dark Mode相关的知识，并又对该方面知识感兴趣的话，可以点击这里获取。

话又说回来，虽然Neumorphism UI风格存在一些缺陷，但这些缺陷并不是不能克服的。如果我们的设计师能够很好的去权衡其中的利弊以及较好的去把控整个设计风格，还是能设计出适合于实际生产中的Neumorphism UI界面。比如在一些像车机那种偏实体硬体的HMI设计或者智能硬件评台、智能厨窗等。但在移动端上使用，还是需要去做适当的简化。如何去做简化以适应新的设计潮流（或趋势），还是需要大家不断去尝试的。

小结

虽然现在社区中有很多关于Neumorphism的UI设计，并且让人感到耳目一新（Flat设计的确让人看了这么多年有点审美疲劳），但它要成为一种真正的设计趋势或规范还有很长的路要走。比如文中提到的，要减少编码的难度，颜色的对比度，层次结构设计等问题待解决。事实上，直至目前为止，有很多人喜欢该UI风格，但它似乎还没有准备好成为一个完整的设计趋势。

或许聪明的设计师们会解决这些问题，并把它变成一个可行的设计系统，一个可以正常使用的设计系统。而我们作为一名开发人员，也应该时刻跟进一些新的设计，了解或探索着新设计的还原。就比如说，如果有一天Neumorphism UI真正的成为一种设计趋势，而且运用于你的实际产品当中，你应该如何快速的将UI还原，而为真正的Web页面或应用。这是我们值得思考，而且是有意义和挑战的事情。最后，感谢大家花时间阅读完这篇文章，如果大家在这方面有更多的经验或更好的建议欢迎在下面的评论中分享。如果Neumorphism设计感兴趣的话，还可以花些时间阅读下面这些文章，我想你会喜欢的。

返回顶部