新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

设计趋势 4年前 (2020) 互联网
1.9K 0

新拟物风格在设计上的应用体验?

1. 界面设计上的特点

常应用于图标、卡片或按钮元素设计上,背景板多为干净的纯色;界面平滑,没有明显的颗粒感;

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

△ Filip Legierski 《 Banking App 》

按钮的外边框均设置了阴影、渐变效果,突出立体感;

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

△ Samson Vowles《 Neumorphic dark ui kit components 》

在视觉处理上,凸出的按钮为可点击的状态,凹进去则代表已选中。

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》

2. 被吐糟的缺点

层次结构弱

Whale Lab 观察发现,新拟物弱化颜色区分而强调近远景阴影布局,所以整体色彩都相近,除了在个别的位置加入其它颜色点缀,用户识别起来也会迷茫;而卡片、按钮都使用了阴影,高光效果,层次结构不明确,也很难带来流畅的体验;

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

△ 新拟物风格,Filip Legierski《 Neumorphism UI Elements 》

对比度和视觉限制

明显的对比是界面设计的重要原则。由于新拟物风格具有各种阴影色调和角度,可单击的内容与不可单击的内容区域在哪里不是很好区分。根据产品的功能和要求,每个应用神经同构的产品都可以具有自己的UI阶段规则;但是由于阴影,角度和浮动水平的不同,由于缺乏一致性,迷失方向的可操作项,「神经变形」会给用户带来混乱,最终为残疾用户造成使用障碍。

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

如同下面这个例子,按钮状态已点击和未点击的一个效果,由于受压状态的反差太小,则看起来的效果也没有什么不同。

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

增加开发难度

更为严重的是,不少设计者在使用 Neumorphism 进行界面开发过程中,也遭遇到了不少局限。要实现这个风格,主要有两个方式:

卡片、按钮切图,每个状态(Normal、Hover、Pressed)都要裁切,导致资源库图片量过载;

代码实现,这个风格的实现效果是对元素增加两个不同方向的投影,但需要开发对每个元素添加投影,样式代码增多,工作量浩大。

网站neumorphism.io,可以快速生成 Neumorphism UI 。设置按钮的参数值,就能看到多样的新拟物化效果,非常神奇!

新拟物设计趋势是如何演变?上半年最热门趋势完整梳理

新技术、事物、趋势的出现,起初都会给人们带来焦虑甚至是恐慌。不管是拟物还是扁平,Whale Lab 觉得若是绝对化的去推崇某一种,都是错误的,尽管苹果放弃了拟物进入扁平化,也不一定代表扁平就是最好,毕竟二者始终相辅相成。不敢否认,新拟物风格在今后是否变得「真香」,但对于设计师来说,从用户体验、产品出发的优秀设计,都值得被认可与尊敬。

版权声明:互联网 发表于 2020-10-17 15:28:02。
转载请注明:新拟物设计趋势是如何演变?上半年最热门趋势完整梳理 | 前端印记
数据库云大使

暂无评论

暂无评论...