「新拟态风格」?

https://www.sohu.com/a/374265110_406651

image

| 图片源自Dribble @Alexander Plyuto

image

| 图片源自Dribble @Timotius Muliawan

image

| 图片源自Dribble @Vadim Marchenko

相信设计圈的很多小伙伴都发现了,最近流行一波新的设计风格——新拟态。

今天就和大家分享一下国内外设计师对这种风格的看法以及探讨如何在PPT中实现这种效果。

目 录 / ****Contents

1 | ****新拟态是什么?

1.1 | 扁平、投影和新拟态的区别

1.1.1 | 扁平

1.1.2 | 投影

1.1.3 | 新拟态

1.2 | 新拟态风格特点

1.2.1 | 新拟态风格缺点

2 | 如何在PPT中实现新拟态效果?

2.1 | 发现一

2.2 | 发现二

结 论

参考文献

1 | ****新拟态是什么

「新拟态」英文名Neumorphism,也有设计师称为 Soft Ui(软UI)。简单来说就是一种类似浮雕的效果,介于扁平与投影之间。

image

| 图片源自站酷 @Frannnk

1.1 |****扁平、投影和新拟态的区别

三者区别主要体现在 层级上。

1.1.1 | ****扁平

image

元素与背景是同为一个平面,视觉层级没有特别强烈的前后关系,对背景依赖不大。如果本身背景与画面整体背景有区分,色彩就划分了层级。

扁平风格作为更高效更简洁的风格被设计师推崇。在PPT中, 「扁平化」也是使用最多的风格。

image
image
image

| 图片源自锐普定制案例

1.1.2 | ****投影

image

| 图片源自Dribble @Divan Raj

带投影的给我们的感知就是漂浮起来的,单独看它,它漂浮在背景之上。与扁平并列看,它高于扁平,通常大家为了突出某些内容或某个模块会去使用这种样式。

投影的使用对背景的依赖几乎可以忽略,因为投影除了形状可以调整,包括色彩、大小等都可以调整,且它是无边界的漂浮着,即你可以随意定义它的高度。

在PPT中有点类似之前流行过的 「微立体」风格。

image
image
image

| 图片源自杜小二原创PPT模板

1.1.3 |****新拟态

image

| 图片源自Dribble @Alexander Plyuto

从顶面看,它似乎是介于扁平与投影之间。

从侧面看,同样也是漂浮的,但是它有厚度却又没有离开平面,它的范围相对于投影的无边界,似乎还有一些模糊的界定。

对背景有一定依赖,需要几乎相同的色值实现。

image

| 图片源自Dribble @Ashish Kumar

image

| 图片源自Dribble @Anna Raptunovich

1.2 |****新拟态风格特点

image

| 图片源自Dribble@MazePixel

通过观察,不难发现这种风格的一些基本特点:

  • 元素并不浮动

  • 元素色彩相对单一,与背景高度统一

  • 左上角亮色投影,右下角深色投影

  • 多以卡片样式出现

  • 更加适合大圆角图形

  • ...

1.2.1 | 新拟态风格缺点

image

| 图片源自UI Kits @Harpen Design in

这个风格最大的问题就是缺少对比度,导致可见性较差。

在色彩使用上比较克制,没有大面积的平铺颜色,仅在极少的位置色彩点缀,作用是吸引眼球。

从众多作品中可以看出,整体视觉是比较平的,缺少层次。

image

| 图片源自Dribble @Riotters

image

| 图片源自Dribble @Igor Erema

2 | ****如何在PPT中实现新拟态效果?

先来了解一下这个风格的结构。

image

初步分析,主要由1个背景图形和2个投影图形组成。具体制作步骤如下所示:

❶ 插入图形,颜色与背景色一致

❷ 复制两个图形,高光图形使用明色,阴影图形使用暗色

❸ 将高光和阴影图形转为图片,然后添加 「柔化边缘」效果

注:复制图形,粘贴为图片。

image

❹ 调整高光和阴影图片大小、位置以及「柔化边缘」参数

注:柔化边缘参数值受图形大小影响。

不知你有没有注意到,在本次三星Galaxy S20发布会的宣传片中就用到了新拟态风格。

image

| 图片源自好看视频 @三星Galaxy S20发布会

在PPT中简单模仿一下:

image

可以看出和原稿还是有差距的。

为了更接近原图效果,我又发现了一个神器,可以用CSS代码实现新拟态风格。来看一下用神器实现的效果如何:

image

是不是有点内味了?

神器链接:https://neumorphism.io/#c8d0dc (PC端打开)

image

| 图片源自https://neumorphism.io/

在PPT中实现新拟态风格虽然比较简单,但如果要调整起来非常麻烦,但在CSS中实现起来就相对简单多了。

在UI设计中,图标分为“默认”和“点击”状态。

image

在PPT中,我们通常会用 「对比」的方式突出重点,比如改变图形底色、文字颜色、边框颜色等等。如果使用新拟态风格会是什么效果呢?

image
image

2.1 | ****发现一:不要使用纯白色背景

如果背景为 **#ffffff **纯白色,则效果和在PPT添加阴影差不多。所以如果要制作新拟态风格PPT,为了最终效果,建议不要使用纯白色。

image

2.2 | ****发现二****:****新拟态镂空LOGO墙

image

| 一个LOGO

image

| LOGO墙

初步分析上图动效,主要用了 「棋盘」切换效果,而且每一个LOGO的区域大小与每一小格棋盘区域相匹配。具体制作步骤如下所示:

❶ 插入7*5表格并放大全屏

注:取消「标题行」与「镶边行」

image

❷ 制作新拟态风格圆角矩形

https://neumorphism.io/#e9f3fc中制作,做好截图,放到PPT中调整图片大小,尺寸为4.83*3.82cm(一个方格大小)。

image

❸ 制作LOGO镂空效果

LOGO为PNG图片,具体参数如下所示:

image

❹ 将图片粘贴到表格,并设置页面切换效果

1)选中新拟态风格圆角矩形和LOGO,复制

2)在表格中粘贴为图片

3)取消图表边框

4)设置 「棋盘」切换效果

结 论

新拟态风格的出现给了设计师新惊喜,但这种风格实用性强吗?能否一直流行?都是一个问题。

对于PPT设计来说,要做成这种风格对色彩和细节的把握要求较高,需要借助第三方设计软件实现。

那么接下来也请你预测一下,新拟态风格会成为下一个流行趋势吗?

参考文献

01.《设计趋势 Neumorphism 是什么?》
https://www.zcool.com.cn/article/ZMTEwMTA5Mg==.html

02.Neumorphism(新拟态)UI设计趋势吗?
https://www.zcool.com.cn/article/ZMTA5ODAwNA==.html

03.《新拟态——国外设计师分析的全新UI趋势》
http://www.woshipm.com/pd/3386232.html

04.《Neumorphism in user interfaces》
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

RECOMMEND

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容

  • 起床:8点半 就寝:预计12点 天气:晴天️ 心情:无趣 纪念日:闲逛一天(外出办事) 迟来的晨间日记 每日早安语...
    追忆v淡忘阅读 317评论 0 1
  • 英语课上的PPT视频报告,真是对比出差距,8.5/10,感受到了挫败感,技不如人,颓废,虚度时光。 这次报告我差在...
    阿野呼呼阅读 173评论 0 0
  • 4班+3组+谢萍萍+14 Day9笔记+作业 小作业6: 1.专业作业 标题修改:金融圈的一场饭局,刷新了对人性...
    谢萍萍拼pp阅读 142评论 0 0
  • 元旦回老家,已是做好了受冷的准备的——穿上最厚实的衣服,几乎是里三层外三层,脚蹬上今冬还不曾上脚的棉靴,头戴一顶厚...
    星韵r阅读 273评论 1 7
  • 由于最近一直在接触与抓网站相关的工作,在无意之中接触到了一些之前不知道的有关网站跳转的知识,我简单的介绍一...
    slightlove龙阅读 1,755评论 4 8