当得知新拟态（ neumorphism ）成为2020年UI设计的主要趋势之一时，我就想尝试一下。而且，我想探索一种在黑暗模式下的新拟态风格。
为什么选择重设计 Spotify？
寻找灵感初期，我尝试了很多应用，最终选择 Spotify，主要是因为：
1.Spotify 已经拥有了约为2亿8千多庞大的用户群，其中很多都是设计师，他们对新拟态这种设计语言比较熟悉，用户认知度相对较高。
2.Spotify 的设计里使用了包括从卡片、 标签、列表、滑块到文本字段的所有小部件，考虑到元素的层次结构，很难为这些部件设计统一设计样式。
3.就定义关键用户使用流和关键页面而言，Spotify的架构非常简单，这为推进 Neumorphism 提供了完美的先天条件。（毕竟新拟态风格不是适合所有的的产品）
新拟态是个非常简单的词
新拟态其实很简单，只需要记住两个核心原则：
1.使用高光和阴影来定义屏幕上对象的形状
2.降低对比度，不使用全白或全黑，这样可以突出显示高光和阴影
现在开始！
首先需要确定调色板，字体和结构与 Spotify 的外观完全相似。如果你看到“启动和登录”屏幕，就会意识到，我的目的是保证其与其他样式混合来时，仍然可以保留这些元素。通过这种方式，我们可以保证在使用Neumorphism时，避免给人一种硬挤出来的“塑料感”，保证产品可用性的基础上修改设计风格。
在围绕 Spotify logo 的启动页上，我向其引入了一个层级的概念，就像在真正的按钮上四周略微抬起边缘一样。这使 logo 具有更清晰的边缘，同时又不影响其外观。另一方面，logo是可缩放的。
以下是做出这样效果的阴影参数
shadow 1: (color.dark, blur 10, x: -6, y: -6)
shadow 2: (color.light, blur 10, x: 6, y: 6)
并翻转内层的阴影（Spotify logo），交换明暗X和Y值；
shadow 1: (color.dark, blur 10, x: 6, y: 6)
shadow 2: (color.light, blur 10, x: -6, y: -6)
在设计“登录”页时，我觉得不应该过度使用它，而要保持简单，这就是为什么只有按钮变成了 Neumorphism 样式的原因，而屏幕的其余部分则保持不变。当设计中包含重要CTA的按钮时，通常需要考虑对比度，以使其醒目且易于辨认。保持按钮原来的样子不变，唯一添加了角度和各种柔和阴影。甚至对按钮都应用了相同的样式，并且让它们拉伸到跟其他3个登录入口点都具有同样的视觉重量。
以下是做出这样效果的阴影参数
shadow 1: (color.dark, blur 10, x: 6, y: 6)
shadow 2: (color.light, blur 10, x: -6, y: -6)
翻转内层的阴影，交换明暗X和Y值；
shadow 1: (color.dark, blur 10, x: -6, y: -6)
shadow 2: (color.light, blur 10, x: 6, y: 6)
小实验！
我认为这是尝试这种趋势的绝佳机会，尽管要记住屏幕上的所有重要元素都应具有足够高的对比度。我尝试为屏幕上所有可操作的图标以及底部的导航图标创建一个平滑的凹凸样效果，以使其更加突出。除了这种“枕头”效果，我还进行了其他三种尝试，以帮助按钮更突出。
1.即使它违背了 Neumorphism 设计的低对比度原则，我还是放弃了灰色图标，取而代之的是白色，以保证凸显重要的图标。
2.在按钮的按下/缩进状态中添加了一个覆盖层，不仅看起来更像是一个物理按钮被平压，而且还有助于区分其按下状态和未按下状态。
3.将叠加层添加到未按下状态，只是为了让它看起来更像一个按钮。
另一个问题是，怎么表达按下时的按钮。
仅靠缩进效果是不足够的，并且可能使用户怀疑哪个状态是活动或不活动。我们尝试更改颜色或图标（或两者）以确保用户知道某些东西现在处于活动状态。
因此，对于选中的选项卡，我更改了图标的颜色，使其与未按下状态有足够的对比度。
相同的规则也应用于所有其他页面。对于音乐播放器，中央卡，控件和滑杆均已采用 Neumorphism 风格 。中央卡从背景中挤出，而图像并没有赋予样式，因为它已经是屏幕上最大的元素，这样让它的存在非常微妙。所有控件都具有相同的凹凸效果，唯一的区别是未按下“播放”按钮和“暂停”按钮，并且颜色也不同，因为这实际上视觉层次结构中交代重要层级时非常重要的。
所有卡片都是从背景中以低对比度挤出的，因为如果我们通过排版，接近度和与重要元素的对比度来进行正确的层次划分，这样的低对比度也足够。
为了增加难度，我将背景设置为渐变。具有用于 “Neumorphism ” 的渐变背景的挑战在于，必须根据其在屏幕上的位置不断更改卡片的材质以匹配背景。当我们沿着屏幕向下移动时，基础颜色会不断变化，这意味着浅色和深色阴影也会发生变化。
要记住的另一个关键点是，X和Y的值随着阴影的元素的大小而增加或减少。
图像，图标和字体之间的层次结构必须清楚，间距必须明确定义。像播放列表一样，我可以使单元格变成 Neumorphism 质感 ，但是这样可以消除不必要的注意力。我没有为任何文本元素添加 Neumorphism 样式。
要解决可用性问题，需要在 Neumorphism 风格和设计元素中找到平衡。
学习心得
使用 Neumorphism 中，其中大多数元素浮动并脱颖而出，在单个屏幕上相互争夺注意力，因此需要保持其他元素的微妙性，这样用户就不难理解设计层次结构和焦点，从而保持用户的决策过程以及他们的思维过程逻辑清晰。
每个应用 Neumorphism 的产品都可以根据其功能和要求有自己的U设计原则。
“作为设计师，需要确保满足标准的可用性需求。”
