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的定义和使用部分
- 还有更多玩法有待发掘，比如：使用渐变色
推荐大家用该工具来快速实现新拟态UI效果，因为它带有预览功能，所见即所得。不需要UI设计和复制的前端开发，我们只需要简单操作即可下载对应的Css样式。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
