什么是新拟态?

哇!博主时隔多日,终于是发文章了。额咳咳,中文文章了。算了不跑题了,今天我们要讲的是新拟态!在我介绍之前,你用你那聪明的脑袋想想,什么是新拟态?5,4,3,2,1 好了时间到了,那么,在了解新拟态之前,跟随我的步伐,我们来了解一下拟态是个什么东西,我先声明,我没有凑字数,而且我也不是营销号,关于拟态的名词有很多,额,比如说:保护色,警戒色;亦或是,斑马线?看我说的这么真实,帮我分享一下怎么样 —— 来自博主的哀求,咳咳,不跑题了,真的。接着说我们的拟态,拟态呢,刚刚说过了我们常见的例子有斑马线,其实斑马线呢,它很实在,斑马线的作用是什么?引导行人安全地过马路啊,在学术界,有很多人对斑马的条纹议论纷纷,有的说:“黑色吸热,白色反光,肯定是用来调节体温的!” 但是为什么是黑色白色一起长?有的说是保护色,因为在开阔的草原和沙漠地带,斑马这种黑白相见的条纹,在阳光或者月光的照射下,反射的光线各不相同,起着模糊或分散其体型轮廓的作用,使得敌害放眼望去,很难将他们与周围的环境区分开来。这样子斑马就能减少被敌害发现的机会,以达到保护自己的目的。也有说是同类之间相互识别,他们便逐渐形成来现在的体表颜色。因为不同的种类的斑马,身上的斑纹各不同,有的粗大稀少,有的细密均匀。这些图案实际上是斑马的身份证,他们就是通过斑纹来识别自己的同类的。反正是议论纷纷,至今为止都搞不懂是用来干嘛的,咳咳怎么开始说生物学了,算了,不多废话,拟态,顾名思义,就是模拟形态,状态,比如说我们的迷彩服就是拟态,但是新拟态就不走寻常路了,它不是生物,物品上的模仿,而是一种新的技术,好,写代码的都给我注意了!特别是前端的!新拟态可以在线生成 UI 设计,且可以和前端的 css 交互一起用到网页上,比如说我们来看看 Neumorphism 生成的新拟态 UI,链接 , 首先,你看到了一个蓝色的界面

主要是图片太难找,我又懒

网页有一个控制台,里面有什么。有条,试着拖动一下,” 按钮” 变大了?还是变小了?看看下面的 css 源码,是 css,这就是新拟态的功能,他可以在线生成 Ui,然后分析出代码。这就是,新拟态,它拟的不是动物植物,而是前端啊!

用法

看个图

图

还行吗?这就是用新拟态做的,具体的,怎么做呢?还是使用 Neumorphism 在线工具!对于骷髅宝宝来说,这是最容易上手的在线工具了!第二个原因是 Neumorphism 在线工具来快速实现新拟态 UI 效果,因为它带有预览功能,所见即所得,比 PS 或 Sketch 上设置更加快捷,而具体的设置参数看对应 CSS 属性值就可以了。

变色.Gif

给图形添加 2 个阴影,参数要设置大一些,注意两阴影颜色是同一色调,然后分别设置一个亮色一暗色。这里就不说参数了,如果你调整不出效果,表示你色感方面还需要加强。

image

1
2
3
4
border-radius: 50px;
background: #9ed2f0;
box-shadow: 20px 20px 0px #526d7d,
-20px -20px 0px #eaffff;

凸出的效果就是利用渐变来设置了。

We’re here to put a dent in the universe. Otherwise why else even be here?

还有许多的功能要慢慢摸索,摸索熟了,自然就会了,新拟态的走向自 2020 年开始一直很好,相信会有很大的发展空间,但是老实说,这不是在使用中最实用的设计。尝试设计和上线以 “新拟态” 为整体调性的产品,很有可能让所有人失望,包括你们的同事、用户和可访问性用户,

新拟态设计(Neumorphism UI)是 2020 年 UI 设计的主要趋势之一,你可以在 dribbble 上看到很多作品,新拟态是基于 New+Skeuomorphism 英文单词的拼写。它是一种使用对象阴影的模糊、角度和强度来凸显出对象的样式。由于其柔和的阴影和整体的外观,该设计看起来更加的逼真、未来、现代、真实、有吸引力

优点

当设计中带有重要 CTA 按钮时,你经常考虑并注意以使它重点突出,并且在页面上容易被识别阅读。但是,当使用新拟态的设计风格时,没有诸如对比度之类的东西,因为按钮的材质与背景是相同的,唯一将它们分开的是角度和各种柔和的阴影。

根据 W3.org 关于移动端可访问性的描述:“与台式机 / 笔记本电脑设备相比,移动设备更可能用于各种环境中,包括户外。在户外,阳光或其他强光源更可能产生眩光,这种情况提高了对所有用户使用良好对比度的重要性,并可能加剧视力低下的用户在移动设备上访问对比度差的内容的挑战性会更强。”

它简单,易上手,是设计师们的福音

缺点

一般来说,带有阴影的元素通常比没有阴影的视觉上更加突出。但是,使用新拟态设计时,大多数元素都会漂浮并脱引而出,在一个屏幕上互相竞争,用户很难轻易的理解页面中的视觉层次和信息层级关系,这会导致界面缺少适当的焦点,从而在眼动追踪中造成混乱。

界面上缺少信息层级关系的结果,会对用户的决策过程以及他们的思考过程产生重大的影响。因此,如存在多个可操作的内容,但是信息层级,重点不突出,这会让用户在当前的流程或页面上产生困惑,很难理解正在发生的事情。从而可能导致错误的判断和误操作,好的 UI/UX 不需要让用户思考。

认知和学习障碍影响人们处理信息的方式。例如,它们可以影响人们的感知、记忆、语言、注意力、解决问题和理解力。类别和条件的术语各不相同,包括智力残疾、发育障碍、注意缺陷多动障碍(ADHD)、自闭症、痴呆症、诵读障碍等。 -w3.org

在物理上,新拟态会造成混乱
你可能会出现以下疑问:

  • 我可以点击吗?

  • 选择了什么?

  • 不是什么?

  • 这是可点击的吗?

  • 还是不是?

对象的阶段由内部 / 外部阴影决定和标识。由于新拟态围绕着各种阴影色调和角度变化,因此用户不禁要问,可点击与不可点击之间的界限在哪里。

每个使用新拟态的产品都可以根据其功能和要求有自己的 UI 设计规范,但是由于阴影、角度和浮动水平的不同,由于缺乏一致性,迷失了方向的可操作项,“新拟态” 可能会给用户带来麻烦,最终为残疾用户造成身体障碍。

触发可操作性的元素应该足够清晰,以便与不可操作的元素(内容、状态信息等)明确区分。提供元素可操作的明确指示与具有可操作元素(如按钮或链接)的 web 和本机移动应用程序相关,尤其是在交互模式中,可操作元素通常以视觉方式检测(触摸和鼠标使用)。交互元素还必须由依赖于编程确定的可访问名称的用户(例如屏幕阅读器用户)检测到。 -W3.org

从 dribbble 开始的新拟态的设计趋势,应该要在追随前认真的思考,是否适用?这是一个问题。设计师可以自由地实践和探索他们倾向于哪种趋势或风格…… 我只是在这里展示和解释为什么 “新拟态” 和 “可访问性” 不能并存。我也不是来阻止你练习你的设计技巧(如果有的话,我鼓励每个人练习他们的技巧和探索他们的想法,但希望,考虑它可能对残疾用户的影响以及特殊场景下的实用性的思考)。

现在是 2020 年,作为一个设计师,我认为我们必须重新评估我们在设计实际产品时的设计方式。我们不能为所有人设计,但要排除残疾用户。在可访问性和使所有数字产品都可访问方面,我们还有很长的路要走,但是它必须要在某一个地方开始。例如,它可以从我们把新拟态抛在脑后开始,而从那时起专注于开发一种在美学上令人愉悦但又实用又现实的设计。——UXTalk 设计杂谈

  • Thanks