本文受权转自：体验进阶（ID：Advanced_UX）
暗影那个工具属于都雅又适用，用得好的话，不单美看，还能辅助信息分层。
by Gleb Kuznetsov ✈ @ Dribbble
关键是添加暗影只需要在面板里改改参数就像，操做简单。
Figma 暗影设置
那么看来，画暗影的性价比确实很高，难怪受欢送。
但是暗影那个工具很考验审美的，略微变个参数，就是天地之别。
良多新手不会调暗影，不小心把画面弄的很脏……
下面就给各人阐发一下，暗影设想的常见问题。
01
别间接用默认参数
大部门设想东西的暗影调出来，是那个效果：
那种又细又深的暗影，以前被 Material Design 带火过一段时间。
上图来源：
但是如今都不流行了，因为界面设想越来越趋于扁平、简洁，那种暗影太夺戏，把内容都压过了。
02
大暗影更天然
把暗影的范畴（blur 参数）扩展到 6 倍后，看起来更天然了：
但是暗影颜色太深，和没有暗影的处所比照过于明显，仍是会干扰内容阅读。
假设界面上只要一张卡片倒还好，例如弹窗或者 Mac 的窗口暗影，再重也不会觉得干扰：
Mac 窗口的暗影很重，但只要一个窗口是如许
但问题是信息流卡片一个接一个，它们的暗影都叠在一路，会加重紊乱感。
更要命的是，暗影的颜色和图片交融到一路，那是最随便显脏的。重视暗影颜色必然要和卡片的颜色区分隔：
03
淡色大暗影削减视觉干扰
将暗影不通明度从 25% 降到 5% 后，暗影的存在感霎时下降了良多：
视觉焦点让位给内容的同时，卡片的层级感照旧隐约能感触感染得到。
用户都是只关心内容，而不关心其它界面粉饰的，所以如许的设想看起来更温馨一些。
04
加点颜色更温和
假设想要更进一步，能够摈斥纯黑暗影，在里面加一点主题色，模仿展现世界的“情况光”影响。
例如下图我就叠加了两层暗影：3% 的纯黑暗影 + 3% 的主题色暗影，看起来让画面愈加温和，融进热色彩：
假设你其实看不出来区别很一般，那个很考验色感的。
05
差别元素的差别化暗影
暗影颜色变浅后，卡片区域是变温和了，但是照片和按钮因为自己颜色就重，如今几乎看不出来有暗影了。
而底部导航因为吸底，需要比卡片更明显的层级关系。
可见，我们不克不及用同样的暗影参数同一所有元素。
起首，能够加重底部导航和按钮的暗影，让它们的条理感更强：
其次，考虑到图片的颜色不成预期，固定暗影色很难搭配好，所以能够复造一张图片，模糊处置后叠在底部，做为暗影：
如许整体味更有条理感一些：
06
支流产物常用效果
你看察一下支流产物，就会发现很少给图片加暗影，因为：
1. 图片颜色不确定，一旦暗影颜色和图片接近，就会看起来很脏；
2. 根据前文的体例，用图片叠加模糊的效果能够做出更都雅的暗影，但是如许会
所以图片暗影没需要的建议往掉：
别的，暗影过重会干扰视觉，但是暗影太轻了也会招致模块鸿沟不清晰，所以良多产物在利用暗影之前，会先加深一下布景色，如许更清晰又不夺眼：
给按钮加上很重的同色暗影后，会有一点糊，能够再加一点渐变或高光，加强量感：
最初连系起来，就成了如许：
画暗影难在对色彩灵敏度要求挺高的，那个和先天有关，但也能通过勤奋改善一点。
文章转载：体验进阶，版权回原做者所有
原文链接：
版权声明：“IXDC”所推送的文章，除非确实无法确认，我们城市说明做者和来源，本公家号对转载、分享的内容、陈说、看点揣度连结中立，不合错误所包罗内容的准确性、可靠性或完美性供给任何明或表示的包管，仅供读者参考。部门文章推送时未能与原做者获得联络，若涉及内容或做品等版权问题，烦请原做者联络我们，给出内容所在的网址并供给相关证明材料，我们会核查后立即更正或者删除有关内容！本公家号不承担任何责任，并拥有对此声明的最末解释权。
联络微信：Meia_99
末审 | 苏菁
编纂 | 王新荣
点那里，进修更多设想常识！
暮霭