Sky推荐 | 作者:木七

今天给大家推荐一个公众号:木七设计坊

作者木七,设计日记深圳线下聚会的组织者(想参加深圳线下聚会的关注),站酷首页常客,他对前瞻设计趋势,非常敏感,今天带了他一篇研究,最用心是他把具体设计教程都写好了,enjoy it!

👇识别二维码,关注【木七设计坊】





 什么是新拟态 

它也是算拟物风格的一种,只不过表现形式不一样,最早出现在追波上,一个事物的兴起多少是有些道理,今天我们一起来研究学习,他名称由来-Neumorphism / soft ui,翻译过来叫新拟态或者是软ui或新拟物风格。


 它的背景 

1.拟物风

 当时的一些拟物设计风格

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

2.扁平风格

  Window 8平面设计示例

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


从这些大公司的品牌升级中,我们可以很清晰的了解到,拟物到扁平变化的整体过程。


 新拟态横空出现 

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

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


iOS13设计中,苹果截图编辑功能的画笔,由原先的扁平化,转变到无纹理的拟物风格。  


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


 新拟态有什么特点 

1.浮雕效果

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

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

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

(2)元素与背景对比度比较弱

(3)常常用于按钮组件和卡片

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

2.光源运用


如上图作品,一个光源,是从左上向右下照射的,越靠近光源的部分,越亮,远离光源的越暗。因为新拟态的光源是唯一的,是从左上角照射的,,左上角亮色投影,右下角深色投影。这一基础规律,不单单适用于新拟态风格的按钮,它还适用于所有新拟态风格表现手法的视觉组件。

3.与背景对比度弱

新拟态的组件与背景的对比度很弱,可以从我收集的这些作品集中,发现无论是亮色模式下和暗色模式下对比度都是很低的。按钮、投影、背景之间的关系都处理的非常柔和。

4.主要用在卡片和按钮


新拟态在设计层的表现主要用在卡片和按钮上比如上图卡片的厚度感细节的处理,为了体现银行卡的厚度感,让界面整体更加柔和,但是需要注意页面清晰度的体现。

在新拟态中,按钮状态,视觉上凸出代表未选中,凹进去表示已选择状态,在按钮上面的元素是做了内阴影处理的,看起来有一点点雕刻的感觉,统一的光源加上光影的处理,页面就会看起来很高级。


 设计需要注意的点 

1.识别度

新拟态的的一个设计风格特点,就是低对比,弱对比。带来界面柔和一面的同时,在视觉层上,也会很容易出现界面”糊掉“的一些情况,这样就非常不利于信息的传递。所以,在设计新拟态风格的时候,需要格外的注意界面的识别度。

2.视觉层级关系

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

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

3.考虑易用性

如果基础组成部分都没有得到很好的解决的话,那产品的易用性就无从谈起。能用、好用的产品是前提,美感是对产品易用性的补充,能用、好用才是核心。所以在内容层次的理解需要更加彻底。

4.开发实现

开发落地的问题,你就不用担心了,目前,有一些工具可做一些辅助,对于一些模块属性还是需要开发敲代码实现的。

https://neumorphism.io/#55b9f3

这个网站可以生成基本的样式,还可以对矩形的大小、圆角、阴影深浅、矩形填充颜色左右调整,滑动下面模块就可以实现。


 新拟态运用场景 

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


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


 怎么去做 

为了帮大家更好理解,我做了一个小教程,图字有点小,可以点击查看大图。


 最后 

像大多数设计趋势一样,新拟态是设计用户界面的一种看起来视觉比较新颖的表现手法,让产品界面看起来既柔软又方便,但是它也存在一些局限,前面我们也提到一些,比如它实现起来还是有一点难度,也不够灵活等等。但是不代表我们不需要关注,所以在关注学习过程中,实际运用需要根据自己产品特点去选择合适的设计手段。


////// END //////

作为设计日记粉丝福利,无套路,不用转发,扫码添加,直接免费领取新拟态素材源文件(包含PS、shketch、Figma等格式)

扫码下载【新拟态】素材源文件

本篇文章来源于微信公众号: 我们的设计日记