拟物风格之后是扁平风格，扁平风格之后是拟态风格，而毛玻璃风格是拟态风格的一种表现形式，如今非常流行了，背后的原因是什么？贝格前端工场为大家详细分析下。

UI风格先后经历了拟物、扁平和拟态三大类，分别对应了不同的时代，拟物风格追求“真”、扁平风格追求“简”、拟态风格追求“像”。

一、UI设计的三个风格演变

UI设计风格的发展可以分为拟物（skeuomorphic）、扁平（flat）和拟态（neumorphic）三大类。这三种风格在不同的阶段都曾经流行过，每一种风格都有其独特的设计特点和风格。

1. 拟物风格（Skeuomorphic）：

这种风格在早期的移动应用和网页设计中非常流行。拟物风格的设计通过使用真实世界的材质和纹理，模仿真实物体的外观和触感，使得用户能够更容易地理解和使用应用程序。例如，设计师可能会使用皮革、木纹、金属等材质来模拟应用的外观。

早期的拟物风格，看看那个福袋

2. 扁平风格（Flat）：

随着移动设备和Web设计的发展，扁平设计风格逐渐流行起来。扁平设计强调简洁、清晰和直接的界面，去除了拟物风格中的多余纹理和装饰，注重图标和界面元素的简约和平面化。这种设计风格在Windows 8和Google的Material Design中得到了广泛应用。

近期的扁平风格，看看那个插画

3. 拟态风格（Neumorphism）：

拟态设计风格是一种相对较新的设计趋势，它试图结合拟物和扁平两种设计风格的优点。拟态设计强调元素的立体感和深度，通过模拟元素的凸起和凹陷效果来营造出真实的触感和视觉效果。这种风格在一些应用程序的界面设计中开始出现，并且受到了一定程度的关注。

当前的拟态风格

这三种设计风格都有其独特的特点和应用场景，设计师可以根据实际需求和用户群体选择合适的设计风格来进行界面设计。

---

二、拟态风格的表现形式

拟态风格（Neumorphism）是一种相对较新的设计趋势，它试图结合拟物和扁平两种设计风格的优点，拟态风格的表现形式主要包括以下几个方面：

1. 凸起和凹陷效果：

拟态风格的设计强调元素的立体感，通过使用柔和的阴影和光线效果，使得元素看起来像是凸起或者凹陷在背景中。这种效果可以让用户感觉到元素具有真实的触感和深度。

2. 模糊效果：

拟态风格的设计通常会使用模糊效果来营造出元素之间的层次感和深度感。通过合理地使用模糊效果，可以让元素看起来更加立体和真实。

3. 柔和的光线和阴影效果：

拟态风格的设计通常会使用柔和的光线和阴影效果来营造出元素的立体感和真实感。这种效果可以让用户感觉到元素仿佛在真实世界中一样。

4. 真实材质的模拟：

拟态风格的设计可能会模拟真实世界中的材质和纹理，使得元素看起来更加真实和具有触感。例如，可以模拟皮革、金属、布料等材质的外观和触感。

 

 

拟态风格的设计主要是为了营造出元素的真实触感和立体感，使得界面看起来更加真实和具有深度。这种设计风格在一些应用程序的界面设计中开始出现，并且受到了一定程度的关注。

---

三、磨砂（毛玻璃）风格登录页作为拟态风格的一种，流行的原因

磨砂玻璃（毛玻璃）风格的登录页之所以流行起来，有以下几个原因：

1. 现代感和简约风格：

磨砂玻璃风格的登录页通常具有现代感和简约风格，符合当下设计的潮流和用户对简洁、清晰界面的喜好。

 

 

2. 背景模糊效果：

磨砂玻璃风格的登录页通常使用背景模糊效果，这种效果能够减少视觉杂乱，使得页面内容更加突出，同时也能够提供一定程度的隐私保护。

3. 色彩渐变和透明度：

磨砂玻璃风格的登录页常常使用色彩渐变和透明度效果，这样的设计能够给用户带来视觉上的愉悦感，并且使得页面看起来更加美观。

4. 用户体验：

磨砂玻璃风格的登录页在设计上通常会考虑用户体验，通过合理的布局和视觉效果，提高用户对页面的舒适度和使用体验。

磨砂玻璃风格的登录页之所以流行，主要是因为它能够满足现代用户对简约、清晰、美观和舒适的设计需求。

---

四、作为UI设计师如何设计这种风格登录页呢

设计毛玻璃风格的登录页需要考虑到模糊的效果，透明的元素和深度感。

1. 背景模糊：

使用模糊效果的背景图像来营造出毛玻璃的效果。可以选择一张高清的背景图像，然后通过图形处理软件或者CSS中的滤镜效果来实现模糊效果。

2. 透明元素：

在毛玻璃风格的登录页中，可以使用透明的元素来增加深度感。例如，登录框、按钮等元素可以设置为半透明，让背景的模糊效果透过元素展现出来。

 

 

3. 柔和的光线和阴影效果：

在登录框和按钮等元素上可以添加柔和的光线和阴影效果，使得元素看起来更加立体和真实。

 

 

4. 真实材质的模拟：

可以在登录框和按钮等元素上模拟真实材质的外观和触感，比如使用适当的纹理或者材质图案来增加真实感。

5. 渐变效果：

使用渐变效果来增加元素的立体感和深度感，可以让元素看起来更加丰富和真实。

 

 

6. 选择合适的配色：

毛玻璃风格的登录页通常会选择柔和、透明的配色，比如浅色系或者半透明的颜色，以增加整体的通透感和轻盈感。

在设计毛玻璃风格的登录页时，需要注意保持整体的简洁和清晰，避免过多的装饰和复杂的元素，以保持整体的轻盈感和舒适感。同时，要确保毛玻璃效果不会影响用户对登录页上内容的识别和操作。

---

下期预告：UI设计从2D到2.5D，再到3D，都经历了啥？

Hi，我是贝格前端工场，10年前端和UI老司机了，持续为大家分享有价值、有见地的观点、作品、干货，欢迎评论、关注、点赞、私信。