设计风格:新拟态,一文掌握特征、应用场景、运用方法

Hello,我是大千UI工场,设计风格是我们新开辟的栏目,主要讲解各类UI风格特征、辨识方法、应用场景、运用方法等,包括新拟态、毛玻璃、奢华、新中式等等,有设计需求,我们也可以接单。

一、新拟态风格定义和发展历程

新拟态风格(Neumorphism)是一种设计趋势,它结合了传统拟物风格和扁平设计风格的特点。它的特点是使用柔和的阴影和光线效果,使界面元素看起来具有立体感和触感,仿佛是由真实的材质构成的。

新拟态风格的发展历程可以追溯到2019年左右。当时,设计师开始对传统的扁平设计风格有些审美疲劳,他们开始尝试在界面元素上添加一些阴影和光线效果,以增加立体感和触感。这种设计风格很快引起了关注,并在设计社区中迅速传播开来。

新拟态风格的发展受到了科技的进步和图形处理技术的提升的推动。现代的图形处理器和显示器能够更好地呈现阴影和光线效果,使新拟态风格的设计更加逼真和生动。

随着时间的推移,新拟态风格逐渐在各个领域得到应用,包括移动应用、网页设计、UI设计等。设计师们将新拟态风格应用于按钮、卡片、输入框等界面元素,以提供更加直观和有趣的用户体验。

然而,新拟态风格也引发了一些争议。有些人认为它过于夸张和炫耀,可能会分散用户对内容的注意力。此外,新拟态风格在不同设备和屏幕上的表现也存在一定的挑战。

总的来说,新拟态风格是一种富有创新性和实验性的设计趋势,它在设计界引起了广泛的讨论和探索。随着技术的不断进步和设计师的不断实践,新拟态风格可能会继续发展和演变,为用户带来更加丰富和有趣的界面体验。


二、新拟态风格的特征,如何辨识

新拟态风格的特征主要包括以下几个方面:

  1. 柔和的阴影和光线效果:新拟态风格通过添加柔和的阴影和光线效果,使界面元素看起来具有立体感和触感。这些阴影和光线效果通常是根据元素的形状和位置来确定的,以增加真实感。
  2. 凸起和凹陷的效果:新拟态风格中的界面元素通常具有凸起和凹陷的效果,使其看起来像是由真实的材质构成的。这种效果可以通过阴影和高光来实现,使元素的表面看起来有一定的厚度和质感。

  1. 自然的色彩和材质:新拟态风格中的界面元素通常使用自然的色彩和材质,以增加真实感。例如,按钮可能具有木纹或皮革纹理,以模仿真实的按钮。
  2. 简洁的形状和线条:新拟态风格中的界面元素通常具有简洁的形状和线条,以保持整体的清晰度和现代感。这些形状和线条通常是圆角矩形或扁平化的,以与传统拟物风格和扁平设计风格相结合。

要辨识新拟态风格,可以注意以下几点:

  1. 观察界面元素是否具有柔和的阴影和光线效果,以增加立体感和触感。
  2. 注意界面元素是否具有凸起和凹陷的效果,使其看起来像是由真实的材质构成的。
  3. 注意界面元素是否使用自然的色彩和材质,以增加真实感。
  4. 观察界面元素的形状和线条是否简洁,是否与传统拟物风格和扁平设计风格相结合。

总的来说,新拟态风格的特征是柔和的阴影和光线效果、凸起和凹陷的效果、自然的色彩和材质,以及简洁的形状和线条。通过观察界面元素是否具备这些特征,可以辨识新拟态风格的设计。


三、新拟态风格的应用场景

新拟态风格可以在各种设计场景中应用,包括但不限于以下几个方面:

  1. 移动应用:新拟态风格在移动应用中的应用非常广泛。它可以用于按钮、卡片、输入框等界面元素,以提供更加直观和有趣的用户体验。例如,通过添加凸起和凹陷的效果和柔和的阴影,可以使按钮看起来更具触感和立体感。
  2. 网页设计:新拟态风格也可以应用于网页设计中,以增加用户对界面元素的关注和参与度。例如,通过使用自然的色彩和材质,可以使网页看起来更加真实和有趣。
  3. UI设计:新拟态风格在UI设计中也有广泛的应用。它可以用于设计各种界面元素,如菜单、滑块、开关等,以提供更好的用户体验和界面交互效果。
  4. 游戏设计:新拟态风格在游戏设计中也有很好的应用。通过使用凸起和凹陷的效果、柔和的阴影和光线效果,可以增加游戏场景和角色的真实感和立体感。

总的来说,新拟态风格可以应用于各种设计场景,以提供更加直观、有趣和真实的用户体验。无论是移动应用、网页设计、UI设计还是游戏设计,都可以通过运用新拟态风格来增强设计的吸引力和用户参与度。


四、UI设计中如何运用新拟态风格

在UI设计中运用新拟态风格可以通过以下几个方面实现:

  1. 使用柔和的阴影和光线效果:在设计界面元素时,可以为按钮、卡片、图标等添加柔和的阴影和光线效果,以增加立体感和触感。通过调整阴影的大小、角度和透明度,可以使元素看起来更加真实和有层次感。

  1. 创造凸起和凹陷的效果:通过给界面元素添加凸起和凹陷的效果,可以增加元素的立体感和触感。例如,可以为按钮、输入框等元素添加凸起的效果,使其看起来像是在表面上凸出来的。相反,可以为卡片、面板等元素添加凹陷的效果,使其看起来像是在表面上凹进去的。
  2. 使用自然的色彩和材质:在选择颜色和材质时,可以倾向于使用自然的色彩和材质,以增加真实感。例如,可以使用木纹、皮革纹理等材质来装饰按钮和卡片,使其看起来更加真实和有质感。

  1. 保持简洁的形状和线条:新拟态风格注重简洁和现代感,因此在设计界面元素时应保持简洁的形状和线条。可以使用圆角矩形或扁平化的形状,以与传统拟物风格和扁平设计风格相结合。
  2. 强调交互效果:新拟态风格强调用户与界面元素的交互效果,因此在设计中应注重强调按钮、滑块、开关等元素的交互状态。可以通过改变颜色、大小、阴影等方式来强调元素的活动状态,以增加用户的参与感。


 

总的来说,在UI设计中运用新拟态风格需要注重柔和的阴影和光线效果、凸起和凹陷的效果、自然的色彩和材质,以及简洁的形状和线条。通过运用这些设计原则,可以创造出更加直观、有趣和真实的用户界面。


 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue练习1:组件开发1(头像组件)

样式预览 注释代码 <template><div class"img-box":style"{ //动态style必须为对象width: size rem,height: size rem}"><imgclass"avatar-img":src"url" //动态url/></div> </templ…

智慧公厕管理软件

随着城市化的不断推进&#xff0c;城市公共设施逐渐完善&#xff0c;其中智慧公厕的建设也在不断提速。智慧公厕作为城市基础设施的重要组成部分&#xff0c;对城市卫生水平提升有着不可忽视的作用。而智慧公厕管理软件更是智慧公厕管理的基础&#xff0c;是公共厕所智慧化管理…

javaweb学习day02(CSS)

一、CSS介绍 1 官方文档 CSS 指的是层叠样式表* (Cascading Style Sheets)地址: https://www.w3school.com.cn/css/index.asp离线文档: W3School 离线手册(2017.03.11 版).chm 2 为什么需要 CSS 在没有 CSS 之前&#xff0c;我们想要修改 HTML 元素的样式需要为每个 HTML …

不具备这十个能力,真不能说是专业的B端系统设计师

B端系统的复杂程度要远远的超过C端&#xff0c;作为这类设计师绝对不能满足于&#xff0c;画个界面&#xff0c;拼一下组件能搞定的&#xff0c;真的需要精心研究&#xff0c;本文列举了十项能力&#xff0c;帮助设计师们针对的提升。 一、什么是B端管理系统设计 B端管理系统设…

6、内网安全-横向移动WmiSmbCrackMapExecProxyChainsImpacket

用途&#xff1a;个人学习笔记&#xff0c;有所借鉴&#xff0c;欢迎指正&#xff01; 前言&#xff1a; 在内网环境中&#xff0c;主机192.168.3.31有外网网卡能出网&#xff0c;在取得该主机权限后上线&#xff0c;搭建web应用构造后门下载地址&#xff0c;利用该主机执行相…

pytorch常用激活函数笔记

1. relu函数&#xff1a; 公式&#xff1a; 深层网络内部激活函数常用这个 import matplotlib.pyplot as pltdef relu_fun(x):if x>0:return xelse:return 0x np.random.randn(10) y np.arange(10)plt.plot(y,x)for i ,t in enumerate(x):x[i] relu_fun(t) plt.p…

lazarus:LCL 嵌入 fpwebview 组件,做一个简单浏览器

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\lclembed 修改 lclembed.lpr 如下&#xff0c;将 fphttpapp. 注释掉&#xff0c;因为我用不上 a simple…

EXTI外部中断

&#xff1f; 难点&#xff1a;中断向量表、看门狗、NVIC的优先级位&#xff1f;EXTI框图&#xff1f; ------------------------ 中断系统 中断&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;--->例如&#xff1a;…

IIC--集成电路总线

目录 一、IIC基础知识 1、设计IIC电路的原因&#xff1a; 2、上拉电阻阻值怎么确定 3、IIC分类 4、IIC协议 二、单片机使用IIC读写数据 1、 IIC发送一个字节数据&#xff1a; 2、IIC读取一个字节数据&#xff1a; 一、IIC基础知识 1、设计IIC电路的原因&#xff1a; (…

day42 一个极简动画效果(复习相关属性)

<!DOCTYPE html> <html><head><title>动画页面</title><style>body {font-family: Arial, sans-serif;background-color: #f2f2f2;margin: 0;padding: 0;}.container {max-width: 800px;margin: 0 auto;margin-top: 100px;padding: 20px;b…

【学网攻】 第(29)节 -- 综合实验二

系列文章目录 目录 系列文章目录 文章目录 前言 一、综合实验 二、实验 1.引入 实验目标 实验设备 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻…

结构体实现位段

位段是结构体的一种&#xff0c; 是一种特殊的结构体。 位段可以自己设定元素的内存大小。不具备平台间的移植性。 位段的定义 下面是一个定义的位段 这里成员后面的数字代表比特位。 int a : 1;代表a只占一个比特位。 位段中的元素只能是int&#xff0c; char&#xff0c;…

C++ vector用法

目录 1. vector&#xff1a; 1.1 vector 说明 1.2 vector初始化&#xff1a; 方式1. 方式2. ​编辑方式3. 方式4. 方式5. 1.3 vector对象的常用内置函数使用&#xff08;举例说明&#xff09; pop_back&#xff08;&#xff09; 2. 顺序访问vector的几种方式&#x…

云计算基础-华为存储实验

存储配置流程 创建硬盘域&#xff08;CK&#xff0c;包括热备CK&#xff09;创建存储池&#xff08;CKG、Extent&#xff09;创建LUN、LUN组、将LUN加入LUN组创建主机、主机组、将主机加入主机组创建映射视图&#xff08;LUN组和主机组的映射&#xff09; 1. 创建CK 创建硬盘…

LEETCODE 167. 两数之和 II - 输入有序数组

class Solution { public:vector<int> twoSum(vector<int>& numbers, int target) {vector<int> result;//双指针 -矩阵// for(int i0;i<numbers.size();i){// for(int jnumbers.size()-1;j>i;j--){// if(numbers[i]numbers[j]target)…

【LLM-RAG】BGE M3-embedding模型(模型篇|混合检索、多阶段训练)

note M3-Embedding联合了3种常用的检索方式&#xff0c;对应三种不同的文本相似度计算方法。可以基于这三种检索方式进行多路召回相关文档&#xff0c;然后基于三种相似度得分平均求和对召回结果做进一步重排。 多阶段训练过程&#xff1a; 第一阶段&#xff1a;第一阶段的自…

(08)Hive——Join连接、谓词下推

前言 Hive-3.1.2版本支持6种join语法。分别是&#xff1a;inner join&#xff08;内连接&#xff09;、left join&#xff08;左连接&#xff09;、right join&#xff08;右连接&#xff09;、full outer join&#xff08;全外连接&#xff09;、left semi join&#xff08;左…

电商小程序08调用缓存

目录 1 将信息存入缓存中2 获取登录信息3 退出登录4 发布预览总结 小程序的登录功能里&#xff0c;如果只是将登录信息保存到全局变量中&#xff0c;存在的问题是如果小程序重新打开&#xff0c;用户的登录状态就丢失了。为了解决这个问题&#xff0c;我们需要用到微搭的缓存的…

初识最短路径

一.最短路径的介绍 最短路径是图论和网络分析中一个重要的概念&#xff0c;它指的是在一个图或网络中连接两个节点或顶点的路径中&#xff0c;具有最小权重总和的路径。这个权重可以表示为路径上边或弧的长度、耗费、时间等&#xff0c;具体取决于问题的背景和应用场景。 如果你…

基于Spring Boot的古典舞在线交流平台设计与实现,计算机毕业设计(带源码+论文)

源码获取地址&#xff1a; 码呢-一个专注于技术分享的博客平台一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流http://www.xmbiao.cn/resource-details/1758349555560165377
最新文章