用户界面中的新拟物风格设计

　　UI设计如何从日常生活中汲取新的灵感？设计师之后需要进行哪些改进来使其真正的得以应用？
　　在DoGoodS！t活动中，我们花了大概一个小时的时间制作出来的展示案例：
　　上周我们讨论了有关UI设计中的一些新趋势，其中有一个最近在Dribbble和Instagrame上都很火的风格引起了大家的注意。JasonKelley给这种新的设计趋势命名为Neuomorphism，是将New和Skeuomorphism进行组合得到的新名词。我（MichalMalewicz）决定把其中的字母o去掉，直接叫它Neumorphism，这个新名称就这样诞生了。
　　（同时也感谢其它的精彩点评，我知道它跟Skeuomorphism总是分不开的，它们都是设计师对于设计趋势与现实生活的一些理解）
　　同时也建议大家阅读我的下一篇文章：为什么我不认为Neuomorphism这一设计趋势会在2020年彻底爆发？
　　还有人在使用Skeuomorphism（拟真设计）风格吗？
　　尽管Skeuomorphism仍然存在于一些UI设计中（比如说你桌面的垃圾桶图标），但是这种风格中一些特定部分的趋势更加明显。
　　正如KamilFalana所说，设计形态从完全没有生命的屏幕元素，开始向我们现实生活中真实存在的物体靠拢。
　　同时我们也注意到，这种变化正在我们的身边悄悄发生着。苹果公司的设计就是一个很好的例子，他们在极简扁平的基础上加入了3D的质感，用户似乎对这种设计很有好感。
　　设计风格的回归，是否是更好的选择？
　　整个趋势始于下面这张在Dribbble上一炮而红的设计作品。
　　设计师alexplyuto在Dribbble上发表了这张作品，获得了3000多个点赞，同时也推动了这一趋势的发展。之后类似风格的作品开始大量出现，我们也做了一组类似的设计：）
　　可以说这组作品开创了一种趋势，尽管其中的某些部分并没有多大实际意义（又把我们带回过去了？），但是它激发了我们对于UI设计的热情，感谢Alex！
　　Neumorphic与以往的设计有什么不同？
　　由于按钮设计的变化并不是很大，因此让我们将重点放在卡片的设计上，它赋予了这一元素新的视觉风格。
　　ModernMaterial风格的卡片
　　ModernMaterial风格的卡片通常是为元素添加阴影，让用户感觉它们是漂浮在背景之上的。阴影可以体现一种空间纵深感，同时在元素没有边框的情况下还可以用来定义本身的形状。
　　Neumorphic风格的卡片
　　然而Neumorphic风格的卡片，是一块背景上的突起，采用的是与背景完全相同的材质，当我们从侧面看它的时候，它不是悬浮在半空中的。
　　通过两种阴影的叠加可以很轻松的实现这种效果，一个阴影为负值，另一个为正值即可。但是要注意的是，这时候我们的背景就不能用纯黑或者纯白色，至少需要有点颜色的变化，这样浅色或者深色的阴影才能得以呈现。你可以选择使用不同颜色的作为背景，冷色或者暖色都可以，只需要保证浅色或者深色的阴影能被用户感知到即可。
　　这里是一个小小的参考数值，可以根据自己的设计案例来进行相应修改：
　　Neumorphic设计的优缺点
　　这种新风格的优势就是新鲜感（至少它接下来还会持续很长一段时间），它为UI设计带来了新的灵感，使这一行业焕发了新生。同时它也可以与其它的设计风格进行结合，所以也不会导致整个界面都是这种凹凸不平的质感。
　　但是目前它也存在一些设计上的弊端，亟待解决，其中两个主要的问题就是：
　　产品可用性；
　　实际编程开发难度。
　　产品可用性可见性
　　可见性的问题主要在于元素与背景之间的对比关系，当采用同样的质感和颜色的时候，他们之间就会缺乏对比度，这时候我们就需要通过阴影来使其产生对比。在我们之前的案例尝试中，我们得出了一些有效的参考数值。
　　可以看到的是，不论是Modern风格的卡片还是Neuomorphic风格的卡片，它们与背景之间的对比都不是很明显，因为它们的主要功能是用来展示内容，而并不是为了与用户交互，我们的主要任务，是得保证像按钮这类交互控件在界面上足够显眼。
　　因为两者之间的差异很小，所以如果我们想让卡片有一个更明显的对比，就得这样做：
　　但是没有人会使用这么重的阴影，所以我们就得想办法去提高页面元素的可用性。这种假设让我们得出了一个结论就是，只要我们对重要的元素通过字体、组别、对比等方式进行正确的层级划分，那么这些卡片的重要性就不是很高了。
　　针对这一观点我还没有展开测试（之后会找时间来进行一下），但现在我们假设以下两个元素都代表确定的意思，尽管有些用户可能一开始没注意到图标周围的阴影边框，但是它仍旧有足够的对比度，来让用户感知到，并且去点击它。
　　产品可用性易用性
　　尽管按钮元素应该看起来像一个按钮，但是只要图标本身与背景有足够的对比度，它就是有效的。因此，这里要明确的是，如果要使用这种风格的设计，请确保你页面中的重要元素足够突出。
　　毕竟，大多数Modern风格卡片的阴影也没有达到足够高的对比度。
　　只适用于卡片设计吗？
　　可用性的一个主要问题在于如果我们我们不是将它用于卡片，而是用在设计按钮上。
　　我们可以很容易的通过内阴影将它转换成一个按下的状态，就像下面的案例呈现的那样。
　　禁止这样设计
　　其中的设计隐患就很大了。
　　这两种状态之间太类似了，不足以呈现它们之间的差异。所以我们需要考虑是否可以通过其他的表现形态来增强效果，使它传达的含义始终明确。
　　这里有一些初步的想法，比如开始状态是线性icon，按下之后变成填充型icon、使用下画线或者颜色填充。
　　一些设计想法，保证按钮的状态正确显示。
　　在做设计的时候需要时刻铭记：人们都倾向于好看的设计，但是我们首先得保证它是好用的。
　　编程开发
　　我们将开发归为一个新的类别，实际上它的CSS样式编码难度没我们想象的那么大，虽然我们还没在Swift和Kotlin中进行尝试，但是我不认为它是个问题。
　　当然，你用逗号将两个盒子阴影的数值合并为一行代码。
　　一位前端开发工程师Adam编写了这个网站：https：neumorphism。io，你可以通过它来自动生成CSS样式代码。
　　其他的影响
　　然而背景的形状也是我们需要考虑的一部分，这种新的设计形式需要与大量的按钮和开关相结合，在一些案例中我们只需要简单的退回到之前的设计模式，并且将效果导出为位图。这似乎是一种回归，但是它其实完全没有必要，现在可以轻松的用代码来实现这些按钮的样式，用现代的技术来进行完美呈现。
　　我们也做了这方面的练习（不久之后会发布出来）来测试有哪些简单的效果是可以实现的，尽管它目前看起来还是有点奇怪并且复古，但是让按钮真的看起来像一个按钮还是挺有意思的。
　　我们真的需要它吗？
　　这一设计趋势的出现，无疑激发了许多设计师的灵感，与以前使用的卡片组件的可用性问题相比，它的问题其实并不是那么严重。
　　所以疯狂大胆的去尝试吧！顺应这一趋势，并对其进行调整，使它成为你自己的风格。UI设计师的工作就是在拖动方块，因此每次方块出现差异和新奇时，都会带来一些喜悦之感。如果没有这种不断的探索的精神，那么所有的产品看起来都是一毛一样。
　　让我们找点乐子！
　　但同时也要记住，每个新趋势都有一些潜在的陷阱，必须谨慎对待，才能让它得以使用。
　　原作者：MichalMalewicz，是HYPE4的CEOUX设计师作家演讲人，他从1999年开始从事网页设计工作。