趋势 I 解析新拟态风格最全指南

52天前发布

原创文章 / 多领域 / 观点
木七木七 原创,如需商业用途或转载请与木七木七联系,谢谢配合。

从去年就一直关注新拟态风格设计,全文从设计发展到新拟态实操和对新拟态趋势的一些结论看法,我认为后面的风格是往这个方向走的

一、什么是新拟态

简单讲,新拟态是一种图形样式,其原理是为界面的UI元素赋予真实感。


其实他也是算拟物风格的一种,只不过表现形式不一样,最早出现在追波上,后面陆续被收录在2020设计趋势预测里面,在2019年的年末慢慢被大家熟知,讨论,重视起来。暂且不论是不是未来的必然趋势之一,一个事物的兴起多少是有些道理,我们持辩证的眼光去看到,去学习、去了解便好。



名称由来

原生名词有几个叫法,Neumorphism / soft ui,翻译过来叫新拟态或者是软ui。其实按照我们国内的翻译应该叫,新拟物风格。Neumorphism,是New +Skeuomorphism的组合词。

                       



二、设计风格的发展历程

地球是圆的,很多事情总是轮回的,原理是不变的,只不过是换了一种表达方式出现在我们的面前,在了解新拟物之前,先简单说下UI整个风格的发展历史,



01.拟物风

说起ui设计风格不得不说起我们乔老爷子了,在2007时候年最早的iphone手机的手机界面就是拟物风格的,那时候觉得怎么会有那么好看的界面,设置图标的齿轮,阅读器的书架,以前的youtube图标还是一个小小的电视,从而掀起一波拟物图标风格流行趋势。


                       当时的一些拟物设计风格

                       


说起拟物风格,不得不提一下当年的拟物大神——MIke,当时在追波掀起一波轰动,在国内也迎来一阵临摹潮,我还记得那时候我还临摹过下面那只钢笔,还有那个马卡龙蛋糕,都是满满的回忆。对于当时MIke大神作品,用现在话说,奈何没文化,一句卧槽走天下... ...

                       


02.扁平风格

到了2014年,苹果对界面进行了“扁平化”处理,以使外观更简单,同时又使其用户易于理解。一直到今天扁平化设计风格仍然是UI设计的标准。

                       



其实最早最早将扁平化风格设计运用在产品中的公司是微软。他在Windows 8系统使用扁平化设计语言,但是Windows 8一直饱受争议,但是反响并没有很好。

                        Window 8平面设计示例



03.风格发展历程(补一张大胆预测下,苹果图标的新拟物风格)

简单举几个logo设计改版的例子,会更加直观感受到,从拟物风格到扁平的改                        

                        从苹果到ins的品牌改版中可以很清晰的了解到,拟物到扁平变化的整体过程



三、那么新拟态这种风格是怎么流行起来的呢?

还是从追波说起,这一切的开始是源于在2019年11月05日的在Dribbble-Alexander Plyuto发布的作品,获得了26W+的浏览,4400个赞,以及1800个收藏。以后在Dribbble上便成为流行,在探索更多的可能性。

                       

https://www.figma.com/file/J1uPSOY5k577mDpSfGFven/Skeuomorph-Small-Style-Guide?node-id=6%3A22

作者提供的Figma源文件,可供大家学习。



我们还留意到,苹果系统在升级到ios13的时候,截图编辑功能的画笔就是一个很好的例子。由原先的扁平化,转变到无纹理的拟物风格。

                       


在2020年2月11号举行的三星视觉发布会也使用新拟态的设计手法           

             


四、新拟态它有什么特点

再说新拟态有什么特点之前,我们先看几个比较典型代表的视觉作品,以便于更好的了解这一风格

                      


我们看下上面的一些视觉作品,第一眼看到比较明显的是,在一些可点击区域做了一些“浮雕”效果,点击状态和非点击状态,在视觉处理上是未选中状态是凸出来的,已经选中状态是凹进去的,但显然凹凸之间是有很多质感细节处理的,等下再实操组件部分会讲解到。



1.通过观察,总结新拟态设计风格的处理方式大概有一下几点


  1. 左上角亮色投影,右下角深色投影(有且只有一个光源照射)

  2. 元素与背景对比度比较弱

  3. 常常用于按钮组件和卡片

  4. 按钮状态,视觉上凸出代表未选中,凹进去表示已选中状态



2.特点详解

1.有且只有一个光源照射

                       

那作者在追波上按钮也好还是卡片处理也好,仔细观察不难发现,它定了一个光源,是从左上向右下照射的,所以,越靠近光源的部分,越亮,远离光源的越暗(素描的绘画时常常用到)。因为新拟态的光源是唯一的,是从左上角照射的,所以就不难解释,或者分析得到,左上角亮色投影,右下角深色投影。这一基础规律,不单单适用于新拟态风格的按钮,它还适用于所有新拟态风格表现手法的视觉组件。


可以看到下图,卡片、转盘、按钮,他们的受光面都是在左上角。

                       



2.组件与背景对比度比较弱

这里就要讲一下,另一个叫法了soft ui,即软ui。软,有柔和的意思。为什么这么命名呢?其实就是由于新拟态的组件与背景的对比度很弱,我把收集到的几千张素材中,挑选一部分进行进行色值对比,可以发现无论是亮色模式下和暗色模式下对比度都是很低的。

按钮、投影、背景之间的关系都处理的非常柔和,这是新拟态的特征之一

                       素材库


3.常常用于卡片和按钮

基于这一点,其实我们只要建立好卡片的和按钮的样式组件,新拟态在设计层的表现就可以高效率的实现,可能稍微麻烦的就是,在一些质感细节上做一些优化,前面也说到,新拟态是一种无纹理的拟物风。所以想要表现卡片/按钮的质感,在光影、厚度细节上,需要做更多的细节处理。


比如卡片的厚度感细节的处理,为了体现银行卡的厚度感,在卡片增加了一个对角渐变描边,从渐变色块可以看到,渐变的规律,也是遵循“有且有个光源”定义的,靠近光源的是纯白,近暗色投影端是比投影更重的一点的描边色。

这样做的好处不单单是为了体现卡片的厚度,因为我们前面讲到,新拟态是软ui,是对比很弱的。风格柔和带来的另个一个不太好的就是,界面清晰度不够,很容易把视觉处理“糊掉”。所以,增加对角渐变描边在一定程度上也起到了,让界面的视觉层级更加清新的作用。在实操部分,将会一一拆解各种情况的一些处理方式。

                       



4.按钮状态,视觉上凸出代表未选中,凹进去表示已选中状态

在新拟态中,视觉上凸出代表未选中,凹进去表示已选中状态。是大部分人的处理方式,在这一小节里,先讨论大部分的,在实操部分在列举其他的处理手法。


这里可以明显感受到,按钮状态的区别,凸出/悬浮的是没有选中状态,凹陷下去的是选中状态。

细节观察,新拟态风格,在按钮上面的元素是做了内阴影处理的,看起来有一点点雕刻的感觉,

在选中状态按钮的处理,首先是在光源的处理上是统一的,加上光影的处理,就很容易做出来凹进去的感觉,想要是凹槽的厚度感、质感看起来更加舒服,这里的处理方式和卡片的处理方式原理一样,添加渐变描边就可以解决。

                       



五、实操部分

整体会进行新拟态风格细节组件的拆解,会在亮色模式和暗色模式上做详细的讲解,除去前面讲到的卡片、按钮,还会继续剖析按钮上的元素,文本字体、带其他颜色样式的处理方法。                                                                                                                      



六、新拟态存在的局限


1.可见性

这里影响新拟态界面的可见性,主要有两个因素,一个是可见性,另一个就是视觉层级关系。


识别度

前面我们说到,新拟态的的一个设计风格特点,就是低对比,弱对比。带来界面柔和一面的同时,在视觉层上,也会很容易出现界面”糊掉“的一些情况,这样就非常不利于信息的传递。试想,一个页面从色调、按钮、布局、交互上都很好,但是,就是看不清哪跟哪儿(识别度),那设计出来的东西是没办法落地的,顶多是个好看的花瓶。


所以,在设计新拟态风格的时候,需要格外的注意界面的识别度。但同时也要注意,界面的投影不能太重,如果太重,界面就很容易显得“脏”。

那么,前面讲到的,卡片厚度的塑造方法(增加渐变外描边)可以在一定程度上提高界面的识别度,提高信息的传递。



02.视觉层级关系

因为新拟态风格的基础原理是依托光影关系来塑造的,那在很多样式组件界面中,就会产生很多悬浮或者下凹的投影,那么在很多时候是很难区分视觉层级关系的,用户在看到这样的界面的时候,第一时间会觉得页面很“满”,用户就无从下手。

所以在做新拟态设计风格时候,一定要学会“视觉降噪”,需要避免整个页面都很满,最重要的是克制。


这个界面就是太满,一下子直接“扑”在用户面前

                       




02 易用性

那前面说到可见性和视觉层级,这两点是易用性原则里面的基础组成部分,如果基础组成部分都没有得到很好的解决的话,那产品的易用性就无从谈起。能用、好用的产品是前提,美感是对产品易用性的补充,能用、好用才是核心。

所以在设计新拟态风格的时候,对页面的信息层级细分要求更高,对这个页面的节奏处理需要更细腻,对用户体验的理解需要更加彻底,在商业与交互层面的持衡中,需要考虑的层面有多一个比较关键维度的考量——可见性

那么当我们可以处理好页面元素之间的关系,也满足易用性基本原则的时候,新拟态带来的局限性将会变得不那么重要。


开发落地实现

当然还有很多人会说,开发落地的问题,你就不用担心了,复制粘贴一次代码的问题(开发看到这篇文章估计在来打我的路上),当然真正实现没有说的那么简单,只不过有一些工具可做一些辅助,对于一些模块属性还是需要开发敲代码实现的。

辅助工具

这个网站可以生成基本的样式,它这里是可以生成我们前面说到的按钮基础样式的,可以对矩形的大小、圆角、阴影深浅、矩形填充颜色左右调整,滑动下面模块就可以实现,

https://neumorphism.io/#55b9f3

                       



七、目前适用的一些产品

针对前面我们说到新拟态的一些特点,一些局限,目前比较适合以下两个大类产品。



01.工具类。

工具类的APP内容相对固定,不需要时时更新,这样设计师在视觉风格方面的表达空间更大一些。在追波上,发现大部分的作品都是偏工具类的

                       

                     

   


02.简单的功能性页面。

和工具类APP一样,这些类页面上运营性质的东西相对较少,内容的形式相对可控。

                       

                       



结语

那么,大家最关心的问题来了,新拟态到底是不是2020年即将要流行的设计风格?相信大家最近这段时间多多少少也看过很多关于新拟态一些介绍,在趋势文章里面或者在其他文章里面看到。


首先必须得中肯的说,像大多数设计趋势一样,新拟态是设计用户界面的一种看起来视觉比较新颖的表现手法,让产品界面看起来既柔软又方便,但是它也存在一些局限,前面我们也提到一些,比如它实现起来还是有一点难度,也不够灵活等等


但是我说一点不同的是,这也是我一直认为的一点,就是UI设计运营化,运营设计游戏化,这是未来的趋势。

反观我们APP的主要生力军,90、00这一批人,其实他们就是互联网的原住民,他们就是在这注重交互,注重游戏化体验的大环境出生的,成长起来的,所以他们对这些东西是非常了解的,他们也能接受这种游戏ui,这种写实的东西,包括现在的这种体验。


所以,未来的方向,是会往这个方向走的



当然,趋势不是我们预测的,因为只要苹果出一个新的设计风格,那那个风格就会是成为新的设计趋势,目前来看,这是必然的。



原创不易,转载请主页联系,违者必究


最后,关于新拟态,你也有新的见解,可以在主页联系到我,我们一起来谈论,

小福利,这里也有一些新拟态的设计素材,源文件,感谢大家一直以来的支持,欢迎评论领取!(部分展示)



604
- 5位站酷推荐设计师推荐 -
    没有新消息