UI风格中拟真、扁平、新拟物和玻璃拟态整理
ui趋势科技评论
科学技术把世界上所有的精彩都投射在小屏幕上。 如果事物给感觉带来的丰富的爱情大部分都寄托在视觉上，那就特别重要了。 仰望着瞬息万变的流行设计风格，尽情享受的时候，除了表面的视觉感受，你有认真考虑和分析过这些趋势吗？
逼真的设计
科学设计
真实感的设计模仿现实世界中对应的东西。 有名的例子是电脑中表示垃圾箱的垃圾箱图标。 拟化一词与生态心理学家在危机世界(James Gibson )中所说的可用性(Affordances )有关。 可用性是Gibson于1966年在thesensesconsideredasperceptualsystems一书中创作的词。 可用性并不是这篇文章的重点，它一直有着复杂的表达方式，在此就不赘述了。 可用性最常见的示例：门把手和按钮具有物理外观设计，用于告诉用户如何使用，例如旋转、推动或其他方法。
(照片来自网络)
好处
在现实化界面上的应用，通过借用生活中现有事物的外观，可以给用户带来熟悉的体验，提高界面的亲和性和理解度，让用户能够直观地理解图标所表达的信息，从而使任何用户都能迅速上手
(照片来自网络)
劣势
这种风格过于关注设计师竞争追求逼真的外观，从而吸引用户，忽视功能和使用体验。 复杂的阴影渐变等装饰堆叠会削弱对用户有用的信息，或稍微增加用户的负担，同时也会减慢APP内容的加载。 高昂的开发成本、沉重的感觉也不再吸引人们，其存在也逐渐引起审美疲劳。 当这种风格从人们眼中消失时，扁平化设计(Flat Design )开始流行。
(照片来自网络)
扁平化设计
平板设计
平面设计是一种非常简单的设计，可以消除3D中的各种渐变和纹理，从而使一切变得平面。 扁平化设计最初受到国际印刷风格、现代主义等风格的影响。 很早就应用于系统和软件。 直到2013年美国苹果公司发布iOS 7首次扁平化设计时，这股新潮流才开始这样流行于界面设计。
(照片来自网络)
特长
扁平化的设计放弃了所有堆积在真实设计中的装饰，保留了最重要、最有效的用户信息。
好处
扁平化的设计为用户提供更干净、更优雅的体验。 简单不简单，视觉效果的功能大于其形式。 所有给用户带来困扰的因素，如强调重要内容、减弱装饰性的渐变阴影等，都直观清晰地向用户展示重要内容，使用户能够快速获取信息。
(照片来自网络)
劣势
降低图标之间的识别度可能会导致用户难以理解，从而降低可读性。 因此，需要根据情况进行决定，需要考虑目标用户组、视觉设计的项目需求等。
ption”>（图片来源于网络）
注意
在实际的设计中，通常需要适当结合拟真化和扁平化设计。比如在扁平化的各种Iphone图标中，指针式时钟icon仍然一直保留着。
没有了装饰，扁平化设计对排版和层级的划分便显得尤为重要，需要遵循极简设计的原则以及用户的视觉心理。不要堆砌很多“重要信息”在有限的空间中，因为这样只会适得其反，降低用户获取信息的效率。
新拟物风格
Neumorphic Design
特点
这是2020年UI设计风格之一，这种风格在扁平化设计的基础上增加了立体感。通过投影、高光与按键的结合，使得外观更加美观。颜色多为朴素的纯色，通过少量的色彩点缀出重点。
（图片来源于网络）
优势
最明显的优势是它的新颖。它给人一种对界面的新鲜的感觉从而让他脱颖而出。
缺点
由于新拟物风格更多通过阴影等立体感区分按键和背景，对比度和层级效果区分不明显，辨识度较低，不利于有效引导用户。因此可能使得一些如视觉偏弱的用户群体，或者人们在某些环境中的使用带来非常不舒适的感觉。
（图片来源于网络）
在代码方面，增加阴影在CSS中不是一件非常困难的事，但是需要把每一个图标上添加会大量增加的没有实际功能的工作量。
通过这个网站可以上手尝试各种角度颜色形状和效果，并且获取相应的CSS代码：
https://neumorphism.io（亲测手机界面可适应的）
正如扁平化风格一样，2020年，新拟物风格也没有全面彻底地在应用程序上使用，它通常只是整个设计中的一个元素– 在不影响操作的前提下提升设计的美感。我们都喜欢漂亮的设计，但是同时记得设计的目的是为了能够被每位用户使用。
玻璃拟态
Glassmorphism
（图片来源于网络）
今年，玻璃拟态开始在市场上逐渐受欢迎起来。
https://glassmorphism.com/
特点
增加了透明度。通过鲜艳的色彩展现出丰富的层次和磨砂玻璃的质感。
（图片来源于网络）
缺点
由于磨砂玻璃质感的特性，为了要呈现出玻璃拟态漂亮的效果，尽量不要应用于过于单调或过于复杂的背景。同样，和新拟物风格一样的是，玻璃效果适当用于装饰会提升设计对于用户的吸引力，尽量回避该风格在关键信息上的应用，保证设计的可读性。同时也不要用的太多，以防适得其反。
（图片来源于网络）
总结
这篇文章想表明的观点是，界面设计以及icon中的不断变化的流行风格体现的是人们对事物的探索的过程，透过不断变化的外表我们需要看到的是更新迭代的原因。我们不断更新迭代的流行风格，不是对过去的流行风格的全盘否定，也没有是一无是处的。我们要从差异中学习到这些更适应发展趋势的优势。设计没有绝对，即使是当下的流行趋势，也不代表它完全普遍使用任何情况而不考虑具体需求的。一味的追求风格只会脱离实际，让设计流于肤浅的形式。
Reference
https://www.interaction-design.org/literature/article/skeuomorphism-is-dead-long-live-skeuomorphism
https://glasscanopy.com/flat-design-vs-skeuomorphism-pros-cons/
https://medium.muz.li/skeuomorphic-design-a-controversial-ux-approach-that-is-making-a-comeback-a0b6e93eb4bb
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
https://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-2020-67a8c35e52cc
本文由WELLDESIGN独家原创，未经授权请勿转载。
极速赛车买前5名的方法度较低，不利于有效引导用户。因此可能使得一些如视觉偏弱的用户群体，或者人们在某些环境中的使用带来非常不舒适的感觉。
（图片来源于网络）
在代码方面，增加阴影在CSS中不是一件非常困难的事，但是需要把每一个图标上添加会大量增加的没有实际功能的工作量。
通过这个网站可以上手尝试各种角度颜色形状和效果，并且获取相应的CSS代码：
https://neumorphism.io（亲测手机界面可适应的）
正如扁平化风格一样，2020年，新拟物风格也没有全面彻底地在应用程序上使用，它通常只是整个设计中的一个元素– 在不影响操作的前提下提升设计的美感。我们都喜欢漂亮的设计，但是同时记得设计的目的是为了能够被每位用户使用。
玻璃拟态
Glassmorphism
（图片来源于网络）
今年，玻璃拟态开始在市场上逐渐受欢迎起来。
https://glassmorphism.com/
特点
增加了透明度。通过鲜艳的色彩展现出丰富的层次和磨砂玻璃的质感。
（图片来源于网络）
缺点
由于磨砂玻璃质感的特性，为了要呈现出玻璃拟态漂亮的效果，尽量不要应用于过于单调或过于复杂的背景。同样，和新拟物风格一样的是，玻璃效果适当用于装饰会提升设计对于用户的吸引力，尽量回避该风格在关键信息上的应用，保证设计的可读性。同时也不要用的太多，以防适得其反。
（图片来源于网络）
总结
这篇文章想表明的观点是，界面设计以及icon中的不断变化的流行风格体现的是人们对事物的探索的过程，透过不断变化的外表我们需要看到的是更新迭代的原因。我们不断更新迭代的流行风格，不是对过去的流行风格的全盘否定，也没有是一无是处的。我们要从差异中学习到这些更适应发展趋势的优势。设计没有绝对，即使是当下的流行趋势，也不代表它完全普遍使用任何情况而不考虑具体需求的。一味的追求风格只会脱离实际，让设计流于肤浅的形式。
Reference
https://www.interaction-design.org/literature/article/skeuomorphism-is-dead-long-live-skeuomorphism
https://glasscanopy.com/flat-design-vs-skeuomorphism-pros-cons/
https://medium.muz.li/skeuomorphic-design-a-controversial-ux-approach-that-is-making-a-comeback-a0b6e93eb4bb
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
https://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-2020-67a8c35e52cc
本文由WELLDESIGN独家原创，未经授权请勿转载。