新拟物风格,UI设计的新趋势还是昙花一现?

用户头像
北京/UI设计师/6年前/13863浏览
新拟物风格,UI设计的新趋势还是昙花一现?
用户头像
静design

其实这种风格在去年年底已经开始有讨论的声音,它的原词叫做New skeuomorphism,经过简化后成为一个新词Neuomorphism

静电说:最近设计群开始流行一个名词叫做“新拟物(Neuomorphism)”,什么叫做新拟物风格呢?简单粗暴先看图感受一下:



其实这种风格在去年年底已经开始有讨论的声音,它的原词叫做New skeuomorphism(新拟物风格),经过简化后成为一个新词Neuomorphism,另外,还有一个词来描述这种风格,那就是Soft UI。


新拟物风格是啥?

人类总是喜新厌旧的,这一点任何时候都存在,要知道,扁平化设计已经从iOS7一直流行至今,时间也从2013年推出到现在经历了7个年头。在iOS7之前,全写实风格的拟物化设计才是主流。

古老的拟物风格

7个年头对于每个人的审美都是一个很大的挑战。没有光影质感的各种线性化图标,插画已经让人感到视觉疲劳。设计师希望在里边加入一些新的东西。


我们可以从苹果的例子说起,仔细观察,你会发现iOS13中的部分图标设计已经出现了“进化趋势”,虽然它们还只是萌芽。画笔变的有质感起来,而之前的版本中,则只是单纯的线条。


但是,这种变化并不能完全说是之前拟物风格的回归。仔细观察,你会发现这种质感的表现是及其克制的,想象一下你手中的Apple Pencil,苹果的Air Pods,通体白色光洁的塑料质感,才是这种风格的精髓。在这种风格里,你无法找到类似于“杂点”,“粗糙感”类似的名词。

总体来说,这是对前代超逼真的拟物风格+扁平风格的一次结合。很多拟物元素都做了最大化的精简,同时又兼具立体感,比如阴影,及微小的渐变。



新拟物风格特征

颜色:新拟物风格大多数使用浅色,其实浅色系设计我们总会想到Dribbble风,是的。现在Dribbble风已经让人腻味,于是设计师考虑变换颜色,将纯白中加入一点点其他颜色,比如灰色,米色,渐变,当然这种颜色都是微小的,低饱和度的。

阴影:是的,拟物风格怎么可能没有阴影及高光。新拟物风格尝试在纯色界面中凸显元素的凸起和凹陷感,这个时候就会使用投影,内阴影和内高光等表现方式。这种方式让元素呈现立体感的同时,也更加纯粹。并且,几乎所有的设计工具都可以轻松完成这种效果。但是,新拟物的阴影必须足够的柔和,如果你的设计中出现了过于强烈的阴影,那么这种风格可能就不是所谓的“新拟物”了。


简而言之,这是一种在纯色背景中营造凸起和凹陷感的“纯洁的”UI风格。

要设计新拟物,建议背景色不能为全白或者全黑色,你必须要使用一种中间色调,比如不同层次的灰色表现。
从下图中,我们也可以看出单纯的阴影卡片表现和新拟物中的卡片表现有何不同?下图左侧为新拟物塑造的卡片,右侧为常用的卡片形式。区别在哪里呢?新拟物是凸起来的,而常规的卡片则是浮在背景上的。


由于新拟物风格在颜色上的运用规则,我们可以发现,这种仅靠阴影和高光支撑起来的风格,区块之间的对比度并不是很高。我们整体感觉画面会非常素。要避免这种情况,只能在区块中的内容上下功夫,将区块内容做到尽可能的强对比,同时在不同的交互状态中作出较大的差异化。


不同的交互状态必须有足够的识别度是必须的,下图是正确的表现方式:
而下图的识别度则过低:

如下图的智能家居应用,开关按钮,仅仅通过凹凸感来表达开启和关闭,是否足够合适呢?用户是否会混淆呢?答案显而易见。
由此可见, 能支撑起新拟物风格内容信息区块划分的不能单单只是凸起的卡片,而是卡片中的内容,毕竟卡片与背景的对比度过低。所以,如果你要使用新拟物,不妨在卡片中的内容上下功夫。下面两幅图是比较适当的例子,因为这位设计师凸显了内容本身,或者是用颜色来形成对比度。


轻拟物的弊端和争议

易用性和用户友好性:设计师阿伦·扬格拉这么说:与没有阴影的对象相比,带有阴影的对象通常会被突出显示。但是,通过“神经同构”,大多数元素都会漂浮并脱颖而出,在一个屏幕上相互竞争。很难理解设计中的确切层次,这会导致屏幕缺少适当的焦点,从而在眼动追踪中造成混乱。屏幕上缺少层次结构会对用户的决策过程产生重大影响。因此,由于存在多个可操作的项目,但缺少设计层次结构和重点,这会阻碍用户理解屏幕上正在发生的事情,从而可能导致混乱和错误的判断。


好的UI / UX不需要用户思考。而很明显,新拟物风格并不是那种一目了然,并不需要用户思考的设计。下面的几个按钮,你觉得哪个更想点击?

图片来自@Michal Malewicz

由于Neuomorphism具有各种阴影色调和角度,因此人们不禁要问,可单击的内容与不可单击的内容之间的细线在哪里。根据产品的功能和要求,每个应用神经同构的产品都可以具有自己的UI阶段规则;但是由于阴影,角度和浮动水平的不同,由于缺乏一致性,迷失方向的可操作项,“神经变形”会给用户带来混乱,最终为残疾用户造成使用障碍。




静电的建议:

对于新拟物风格,我们可以多去了解其趋势和进化方向。但是目前来说,这种由Dribbble上兴起的热潮只能在更多“实验性”风格作品上大放异彩。其根本原因就是上文提到的非常大的弊端。不少设计师说:新拟物起始于Dribbble,也会终结于Dribbble。这句话也不为过,因为不少Dribbble风的设计仅仅在设计师圈子中流行,并没有很好地运用到商业设计中去,这是个很大的问题。

如果你一定要使用新拟物,请记住,新拟物需要用良好的内容+可识别性的颜色去撑起来整个框架。但个人感觉,这是一种适合于展示,并不适合实际使用,或者实际使用场景很受限的设计风格。

如果说无边框设计和单纯使用排版来创造UI是可以被用户接受的话,目前这种新拟物风格在用户可用性和友好程度上并不高,我们仅仅把他们当做实验性风格去尝试就好。也许某一天,新拟物风可以在设计师的不断尝试中获得更好的体验和视觉兼顾。

对于现阶段商业设计师来说,我们可以从轻拟物风格上获取灵感,逐渐的,微小的运用到现在的UI风格中,形成属于自己独特风格的作品,而不是照搬全抄的使用,这无疑是更明智的选择。



262
阅读原文
|
举报
|
406
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
城阙凡花
倒计时,海报,平面
学习,优惠券,平面,海报
牛奶乳液层次平面平铺平面
金色颗粒质地的平面
牛奶乳液层次梯田平铺平面
平面书法字手写
空的平台平面和自然景观
平面插画设计女孩喝咖啡
金色颗粒质地的平面
城市园林平面布局航拍
玄关入门地毯印花图案红地毯
平面男孩喝咖啡插画设计
城市园林平面布局航拍
平面风格黄绿色系花朵装饰
城市园林平面布局航拍
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
金色颗粒质地的平面
平面花卉图案扁平简约无缝拼接插画
金色颗粒质地的平面
金色颗粒质地的平面
海底世界插画
空的平台平面和自然景观
中国传统纹样创新图案设计
平面人物插画
你可能喜欢
相关收藏夹
大家都在看
登录注册