磨砂玻璃(毛玻璃)风格的登录页,怎么就流行起来了呢?

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

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老司机了,持续为大家分享有价值、有见地的观点、作品、干货,欢迎评论、关注、点赞、私信。


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697937.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

掼蛋之还贡技巧

掼蛋游戏的规则之一就是进贡和还贡以及抗贡,只要末游没能抗贡,那么就必须把最大的那张牌贡给头游,头游也要选一张牌还给末游。那么我们该如何还贡呢? 一、忌单张 尽量不要还自己的单张,因为自己的数量少,有…

RabbitMQ开启MQTT协议支持

1)RabbitMQ启用MQTT插件 rootmq:/# rabbitmq-plugins enable rabbitmq_mqtt Enabling plugins on node rabbitmq: rabbitmq_mqtt The following plugins have been configured:rabbitmq_managementrabbitmq_management_agentrabbitmq_mqttrabbitmq_web_dispatch Ap…

从入门到精通:Spring Boot Alibaba学习网站助你构建高效微服务

介绍:Spring Boot Alibaba是一个基于Spring Boot的微服务开发框架,由阿里巴巴开源,旨在为分布式应用开发提供一站式解决方案。 Spring Boot Alibaba集成了阿里巴巴的微服务实践经验和组件,它是在Spring Cloud项目中孵化的&#xf…

解决Jenkins-2.396启动报错:Failed to start Jenkins Continuous Integration Server.

场景:现有环境已经使用Java 8在运行业务,安装Jenkins后启动报错。 原因:因为Jenkins-2.396 依赖于Java 11 版本才能启动。 解决方法: yum 安装Java11 yum install java-11-openjdk-devel java-11-openjdk 或者二进制安装java11修…

前端部署最优解有哪些?

前端部署最优解涉及多个方面,包括技术选型、部署方式、性能优化等。以下是一些基于我搜索到的资料的详细分析: 技术选型与框架使用:前端技术的选择对性能有很大影响。例如,Vite作为一种新型前端构建工具,以其快速构建的…

基于生成扩散模型的分子对接程序-DiffDock安装及使用

欢迎浏览我的CSND博客! Blockbuater_drug …点击进入 文章目录 前言一、DiffDock是什么?二、DiffDock安装步骤1. 下载2.创建conda环境并安装STEP 1. 创建conda环境并配置STEP 2. 配置ESM和OpenFoldSTEP 3. 检查cuda和pytorch geometric安装STEP 4. 检查p…

uvm_reg_bus_op中byte_en详解

在使用寄存器模型的adapter进行数据转换时,会直接对uvm_reg_bus_op进行操作,其包含变量有操作类型、地址、数据等,除byte_en的描述不太清晰外,其他几个都比较好懂。从字面意思来看,该变量似乎是对数据按字节操作进行使…

【RHCE】SHELL for循环练习

目录 1.编写脚本for1.sh,使用for循环创建20账户,账户名前缀由用户从键盘输入,账户初始密码由用户输入,例如:test1、test2、test3、……、test10 2.编写脚本for2.sh,使用for循环,通过ping命令测试网段的主机连通性,IP前3段由用户…

江科大stm32学习笔记——【3-2】GPIO输出:LED闪烁LED流水灯蜂鸣器

(一) 硬件连接 1.LED闪烁 LED灯正极连接面包板电源正极,LED负极连接单片机A0口 (也可以LED负极连面包板负极,LED正极连接单片机A0口) 跳线连接单片机3.3和面包板正极,连接单片机GND和面包板负极 2.LED流水灯 3.蜂鸣…

在UE5中制作UI环形进度条

在日常开发中,经常会有环形进度条UI的效果,例如技能CD时间、加载动画等,本文将通过材质球节点实现该效果,相较于准备美术素材,这样的做法更为方便,效果如下: 1.制作环状效果材质函数 在内容面…

迭代器是干什么的?为什么需要他?

有时候,我们需要一个一个地访问集合中的每个元素,就像你一个一个地拿出盒子里的玩具一样。迭代器就像是一个指示器,可以帮助我们逐个访问集合中的元素,这样我们就可以处理集合中的每个元素了。 Hashtable是干嘛的?为什…

【云动世纪:Apache Doris 技术之光】

本文节选自《基础软件之路:企业级实践及开源之路》一书,该书集结了中国几乎所有主流基础软件企业的实践案例,由 28 位知名专家共同编写,系统剖析了基础软件发展趋势、四大基础软件(数据库、操作系统、编程语言与中间件…

MySQL-七种SQL优化

一、插入数据 普通插入: 采用批量插入(一次插入的数据不建议超过1000条) insert into tb_test values(1,Tom),(3, Cat),(3, Jerry)....手动提交事务 start transaction; insert into tb_test values(1,Tom),(3, Cat),(3, Jerry); insert …

LeetCode 2878.获取DataFrame的大小

DataFrame players: ------------------- | Column Name | Type | ------------------- | player_id | int | | name | object | | age | int | | position | object | | … | … | ------------------- 编写一个解决方案,计算并显示 players 的 行数和列数。 将结…

maven插件wagon-ssh、os-maven-plugin、buildnumber-maven-plugin使用详解

文章目录 前言一、os-maven-plugin的使用二、buildnumber-maven-plugin使用1、时间戳策略2、数字策略 三、wagon-ssh使用1、上传文件/文件夹2、执行Linux命令或者shell脚本 总结 前言 有时我们在构建项目时,希望能自动生成版本号或者生成不同操作系统标识的版本后缀…

Java实战:Spring Boot实现邮件发送服务

本文将详细介绍如何在Spring Boot应用程序中实现邮件发送服务。我们将探讨Spring Boot集成邮件发送服务的基本概念,以及如何使用Spring Boot和第三方邮件服务提供商来实现邮件发送。此外,我们将通过具体的示例来展示如何在Spring Boot中配置和使用邮件发…

RS®FSVA3000 信号与频谱分析仪

R&SFSVA3000 信号与频谱分析仪 非常适用于实验室以及生产过程中的高要求信号分析任务。R&SFSVA3000 信号与频谱分析仪的分析带宽高达 1 GHz,并具有低至 –120 dBc/Hz 的相位噪声和高动态范围,适用于要求严格的 5G NR 测量应用。分析仪测量速度快…

代码随想录算法训练营第二天

● 今日学习的文章链接和视频链接 ● 自己看到题目的第一想法 977.有序数组的平方 方法一&#xff1a; 思路&#xff1a; 先将数据所有数据平方将数组排序 代码&#xff1a; class Solution { public:vector<int> sortedSquares(vector<int>& nums) {vect…

vue后台管理添加水印简单方式watermark-package

详情参考:https://www.npmjs.com/package/watermark-package 示例方法 <el-button type"primary" click"AddWatermark">添加水印</el-button><el-button type"primary" click"RemoveWatermark">清除水印</el-but…

Linux调试器——gdb的基础使用

目录 1.背景 2.指令的使用 2.1gdb的使用和退出 2.2显示源代码 2.3运行程序 2.4调试 1.打断点 2.查断点 3.去断点 4.运行 5.关闭断点 6.启用断点 7.逐过程 8.进入函数 9.显示变量的值 1.背景 众所周知&#xff0c;我们的程序发布有两种&#xff0c;分别是debug模式和release模式…