Neumorphism风格 - 新拟物化风格

新拟物化 Neumorphism 的风太大，简直是传遍大江南北无人不知。对于它的看法大家也都众说纷纭，大部分的观点都集中于：第一看过去非常的高大上，再仔细琢磨一下就感觉只能是飞机稿中的战斗稿。对此我表示非常的理解，毕竟在国内体制下的用户界面设计基本都延续商业设计的命脉──低效能、不实用、不能带来良好转化的东西统统给我丢掉，哪怕是用户体验也是建立在商业目标驱动下的存在。

新拟物化的由来

一切的开始都源于一个叫 Alexander Plyuto 的设计师在各平台发布了一个他的新作品──「Skeuomorph Mobile Banking（拟物化手机银行）」。

这名设计师还一直沿用 Skeuomorph（拟物化）这个名词来命名自己的一系列设计作品，直到 HYPE4 的 CEO-Michal Malewicz 写了一篇关于此风格的文章，并赋予了它一个新名词 Neumorphism（New+Skeuomorphism），自此之后大家就都照着这个新名词进行传播了。

在详解新风格之前，先让我们回忆一下这些年移动端用户界面设计风格的演变历程。自 2013 年苹果推出了 iOS7 之后开始刮起的扁平风潮，所有走在设计前沿的大厂都开始不约而同地对自己家的 app 进行了大刀阔斧的改版。

这扁平风一刮就是好些年，仔细分析一下就能明白为何 ta 如此长寿：内容优先的认知简约，不仅拓展性强且具有高效能的特性，解放了一大堆「手活」不是那么好的设计师，让他们有更多时间专注在设计解决问题的命题上。

但就算一个风格再适应市场的需求，用户和时代还是会对它逐渐疲惫，审美疲劳和新的市场需求都会催生新的变革。

目前有各种对名称的说法，Neuomorphism，Neumorphism，Skeuomorphism，Soft UI，在没有实际确定的情况下，其实怎样叫都无所谓，重点是我们要知道这种设计风格趋势，关注的不是名字，而是设计。

新拟物化的改良

这种风格的设计是有一定局限性的，它并不适用于一部分商业产品，大部分时候也不适合全局控件应用。那么如果我们想要把新拟物化应用到我们的落地项目设计中，需要注意哪些地方，并进行什么样的改良呢？

1. 深浅模式叠加解决弱可视难题

新拟物的按钮肌理很多是建立在素色白板上的浅色按钮，如果继续沿用浅色按钮，且不说色弱用户的可视问题，普通用户的操作行为也会大打折扣，所以这里我们建议将新拟物的深浅模式叠加来使用，如下图：

2. 局部高光使用解决层级难辨问题

如果将新拟物化全控制使用，确实容易造成界面层级混乱的问题，因为毕竟它的设计语言就是 Y 轴面不分离的设计定义，但如果我们合理选择它来作为局部高光，应该大部分情况下还是不错的。如下图，我们仅在银行卡部分使用新拟物化（深浅双模式均可用），其他的控件部分保持扁平，使用 2 个风格相融合的方式可以良好保障层级的划分：

新拟物化的前端实现

定义两个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="card left"></div>
    <div class="card right"></div>

</body>
</html>

css部分（改变Shadow方向）

html {
        /* 定义变量 */
        --bgColor: #ff5353;

        /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
        --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
        --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);

        --whiteShadow2: 15px 15px 25px rgba(255, 117, 117, .5);
        --blackShadow2: -15px -15px 25px rgba(110, 40, 40, .2);
    }

    /* 设置一些页面的布局样式 */
    body {
        display: flex;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background-color: var(--bgColor);
    }

    .card {
        width: 30vh;
        height: 30vh;
        margin: 45px;
        background-color: var(--bgColor);
        border-radius: 30px;
    }

    /* 主要部分 */
    .left {
        box-shadow: inset var(--blackShadow2),
                    inset var(--whiteShadow2);
    }

    .right {
        box-shadow: var(--blackShadow2),
                    var(--whiteShadow2);
    }

效果如下：

结论：

开发时使用CSS3变量可以便捷的调整整个页面的新拟态样式
以上代码重点部分在于Shadow的定义和使用部分
还有更多玩法有待发掘，比如：使用渐变色

新拟物化的可视化工具

由“fly63前端网”为大家整理了一款新拟态UI在线工具，工具地址：https://www.fly63.com/tool/neumorphism/

推荐大家用该工具来快速实现新拟态UI效果，因为它带有预览功能，所见即所得。不需要UI设计和复制的前端开发，我们只需要简单操作即可下载对应的Css样式。

链接: https://www.fly63.com/article/detial/11117