ui设计风格分类大全(4种最流行的设计风格了解)

UI风格中拟真、扁平、新拟物和玻璃拟态整理

UI Trends Brief Review

科技把世界的精彩全部呈现在一小块屏幕上，当事物赋予感官的丰富情愫几乎全部寄托到了视觉时，它便显得尤为重要。当我们在仰望地欣赏着不断更迭的流行设计风格时，除了表面的视觉感受，你是否曾认真思考分析过这些趋势呢？

拟真化设计

Skeuomorphic Design

拟真化设计模仿真实世界中相应的物品。很著名的例子是电脑上表示回收站的垃圾桶图标。拟真化这个词与生态心理学家詹姆斯·吉布森（James Gibson）所说的可供性 (Affordances)相关。可供性是Gibson于1966 年的The Senses Considered as Perceptual Systems一书中创造的词汇，可供性一直以来都有着比较复杂的说法，不是这篇文章的重点，因此在这里就不繁复的解释了。关于可供性最常见的实例：门把手和按钮，他们的物理外观设计在告诉用户应该如何使用，比如是旋转、推动还是什么其他方式。

（图片来源于网络）

优势

拟真化在界面上的应用，是通过借用生活中已有的物品外观，给用户带来一种熟悉的体验，从而增强了界面的亲和度和理解度, 用户依据直觉便可以理解获取图标所表达信息，因此使得任何用户都可以快速上手。

（图片来源于网络）

劣势

这种风格让设计过于关注设计师竞相追求逼真的外观而吸引用户，而使其忽略功能和使用体验。复杂的阴影渐变等装饰堆砌弱化了对用户有用的信息，或多或少地增加用户的负担，同时也导致应用程序内容加载更加缓慢。较高的开发成本、沉重的感觉也让人们不再为之倾心，它的存在也逐渐让人产生审美疲劳。在这种风格淡出了人们的视线的时候，扁平化设计（Flat Design）开始流行了。

（图片来源于网络）

扁平化设计

Flat Design

扁平设计是一种极简设计，它删除掉3D的各种渐变和纹理而把一切变得平面化。扁平化设计起初是受到了国际印刷风格、现代主义等风格的影响。很早就开始被应用于系统或者软件上。直到2013年美国苹果公司发布了iOS 7首次采用扁平化的设计时，这新的潮流便这样在界面设计上开始流行起来了。

（图片来源于网络）

特点

扁平化设计摒弃了拟真化设计中一切堆砌的装饰，保留对用户来说最重要有效的信息。

优势

扁平化设计提供给用户一个更加干净优雅的体验。风格简约而不简单，视觉效果的功能大于它的形式。突出重点内容，弱化装饰性的渐变阴影等一切对用户产生干扰的元素，直观清晰地向用户展示重要内容，使用户快速获取信息。

（图片来源于网络）

劣势

降低了图标之间的识别度，可能会增加用户理解的难度，降低可读性。因此需要根据具体情况决定，需要考虑目标用户群体、视觉设计的项目需求等。

（图片来源于网络）

注意

在实际的设计中，通常需要适当结合拟真化和扁平化设计。比如在扁平化的各种Iphone图标中，指针式时钟icon仍然一直保留着。

没有了装饰，扁平化设计对排版和层级的划分便显得尤为重要，需要遵循极简设计的原则以及用户的视觉心理。不要堆砌很多“重要信息”在有限的空间中，因为这样只会适得其反，降低用户获取信息的效率。

新拟物风格

Neumorphic Design

特点

这是2020年UI设计风格之一，这种风格在扁平化设计的基础上增加了立体感。通过投影、高光与按键的结合，使得外观更加美观。颜色多为朴素的纯色，通过少量的色彩点缀出重点。

（图片来源于网络）

优势

最明显的优势是它的新颖。它给人一种对界面的新鲜的感觉从而让他脱颖而出。

缺点

由于新拟物风格更多通过阴影等立体感区分按键和背景，对比度和层级效果区分不明显，辨识度较低，不利于有效引导用户。因此可能使得一些如视觉偏弱的用户群体，或者人们在某些环境中的使用带来非常不舒适的感觉。

（图片来源于网络）

在代码方面，增加阴影在CSS中不是一件非常困难的事，但是需要把每一个图标上添加会大量增加的没有实际功能的工作量。

通过这个网站可以上手尝试各种角度颜色形状和效果，并且获取相应的CSS代码：

https://neumorphism.io（亲测手机界面可适应的）

正如扁平化风格一样，2020年，新拟物风格也没有全面彻底地在应用程序上使用，它通常只是整个设计中的一个元素– 在不影响操作的前提下提升设计的美感。我们都喜欢漂亮的设计，但是同时记得设计的目的是为了能够被每位用户使用。

玻璃拟态

Glassmorphism

（图片来源于网络）

今年，玻璃拟态开始在市场上逐渐受欢迎起来。

https://glassmorphism.com/

特点

增加了透明度。通过鲜艳的色彩展现出丰富的层次和磨砂玻璃的质感。

（图片来源于网络）

缺点

由于磨砂玻璃质感的特性，为了要呈现出玻璃拟态漂亮的效果，尽量不要应用于过于单调或过于复杂的背景。同样，和新拟物风格一样的是，玻璃效果适当用于装饰会提升设计对于用户的吸引力，尽量回避该风格在关键信息上的应用，保证设计的可读性。同时也不要用的太多，以防适得其反。

（图片来源于网络）

总结

这篇文章想表明的观点是，界面设计以及icon中的不断变化的流行风格体现的是人们对事物的探索的过程，透过不断变化的外表我们需要看到的是更新迭代的原因。我们不断更新迭代的流行风格，不是对过去的流行风格的全盘否定，也没有是一无是处的。我们要从差异中学习到这些更适应发展趋势的优势。设计没有绝对，即使是当下的流行趋势，也不代表它完全普遍使用任何情况而不考虑具体需求的。一味的追求风格只会脱离实际，让设计流于肤浅的形式。