AMO全媒体运营
首页 知识星球 UI界面的阴影怎么画才不脏?

UI界面的阴影怎么画才不脏?

阴影这个东西属于好看又实用,用得好的话,不但美观,还能辅助信息分层。 by Gleb Kuznetsov@ Dribbble 关键是添加阴影只需要在面板里改改参数就像,操作简单。 …

阴影这个东西属于好看又实用,用得好的话,不但美观,还能辅助信息分层。

UI界面的阴影怎么画才不脏?

by Gleb Kuznetsov@ Dribbble

关键是添加阴影只需要在面板里改改参数就像,操作简单。

UI界面的阴影怎么画才不脏?

Figma 阴影设置

这么看来,画阴影的性价比的确很高,难怪受欢迎。

但是阴影这个东西很考验审美的,稍微变个参数,就是天壤之别。

很多新手不会调阴影,不小心把画面弄的很脏……

下面就给大家分析一下,阴影设计的常见问题。

0. 别直接用默认参数

大部分设计工具的阴影调出来,是这个效果:

UI界面的阴影怎么画才不脏?

这种又细又深的阴影,以前被 Material Design 带火过一段时间。

UI界面的阴影怎么画才不脏?

但是现在都不流行了,因为界面设计越来越趋于扁平、简洁,这种阴影太抢戏,把内容都压过了。

1. 大阴影更自然

把阴影的范围(blur 参数)扩大到 6 倍后,看起来更自然了:

UI界面的阴影怎么画才不脏?

但是阴影颜色太深,和没有阴影的地方对比过于明显,还是会干扰内容阅读。

如果界面上只有一张卡片倒还好,例如弹窗或者 Mac 的窗口阴影,再重也不会觉得干扰:

UI界面的阴影怎么画才不脏?

Mac 窗口的阴影很重,但只有一个窗口是这样

但问题是信息流卡片一个接一个,它们的阴影都叠在一起,会加重混乱感。

更要命的是,阴影的颜色和图片融合到一起,这是最容易显脏的。注意阴影颜色一定要和卡片的颜色区分开:

UI界面的阴影怎么画才不脏?

2. 浅色大阴影减少视觉干扰

将阴影不透明度从 25% 降到 5% 后,阴影的存在感瞬间下降了很多:

UI界面的阴影怎么画才不脏?

视觉焦点让位给内容的同时,卡片的层级感依旧隐约能感受得到。

用户都是只关心内容,而不关心其它界面装饰的,所以这样的设计看起来更舒服一些。

3. 加点颜色更柔和

如果想要更进一步,可以摈弃纯黑阴影,在里面加一点主题色,模拟显示世界的“环境光”影响。

例如下图我就叠加了两层阴影:3% 的纯黑阴影 + 3% 的主题色阴影,看起来让画面更加柔和,融入暖色调:

UI界面的阴影怎么画才不脏?

如果你实在看不出来区别很正常,这个很考验色感的。

4. 不同元素的差异化阴影

阴影颜色变浅后,卡片区域是变柔和了,但是照片和按钮因为本身颜色就重,现在几乎看不出来有阴影了。

而底部导航因为吸底,需要比卡片更明显的层级关系。

可见,我们不能用同样的阴影参数统一所有元素。

首先,可以加重底部导航和按钮的阴影,让它们的层次感更强:

UI界面的阴影怎么画才不脏?

其次,考虑到图片的颜色不可预期,固定阴影色很难搭配好,所以可以复制一张图片,模糊处理后叠在底部,作为阴影:

UI界面的阴影怎么画才不脏?

这样整体会更有层次感一些:

UI界面的阴影怎么画才不脏?

5. 主流产品常用效果

你观察一下主流产品,就会发现很少给图片加阴影,因为:

1. 图片颜色不确定,一旦阴影颜色和图片接近,就会看起来很脏;

2. 按照前文的方式,用图片叠加模糊的效果可以做出更好看的阴影,但是这样会

所以图片阴影没必要的建议去掉:

UI界面的阴影怎么画才不脏?

另外,阴影过重会干扰视觉,但是阴影太轻了也会导致模块边界不清晰,所以很多产品在使用阴影之前,会先加深一下背景色,这样更清晰又不抢眼:

UI界面的阴影怎么画才不脏?

给按钮加上很重的同色阴影后,会有一点糊,可以再加一点渐变或高光,增强质感:

UI界面的阴影怎么画才不脏?

最后结合起来,就成了这样:

UI界面的阴影怎么画才不脏?

画阴影难在对色彩敏感度要求挺高的,这个和天赋有关,但也能通过努力改善一点。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

决定未来职业高度的“软技能”,作为设计师该如何培养?

决定未来职业高度的“软技能”,作为设计师该如何培养?

如果你像我一样,关注了许多设计和技术博客,那你一定读过大量诸如:介绍如何做移动端设计,什么是精益设计,如何做到完美适配,...
我们需要用户增长设计师UGD吗?

我们需要用户增长设计师UGD吗?

一位招聘负责人和我抱怨说,他们最近刚发出UI招聘,就收到数量恐怖的求职申请,现在设计师这么难找工作了吗?又叹气说:“数量...
设计师该如何做知识管理(上)

设计师该如何做知识管理(上)

不久前,很荣幸受到 58UXD 团队邀请,做了《设计师该如何做知识管理》的线上分享。预料之外的是,这次分享收获了远超预期...
这套网页设计,看你能偷走多少排版技巧

这套网页设计,看你能偷走多少排版技巧

当我们收集的灵感图越多,越难回头整理、查看,趁着这段时间,我仔细研究了每天在社群发布的“网页设计”灵感部分。 发现这些作...
9种常用UI界面中的控件规范,UI设计师要学的哦!

9种常用UI界面中的控件规范,UI设计师要学的哦!

我们在设计UI 界面的时候,有一些控件几乎总是会用到。用户熟悉了它们的交互模式,也因此建立了心智模型,很清楚如何通过这些...

发表回复

返回顶部