2010年前的设计往往是拟物化,而之后逐渐趋向扁平设计,再之后就重新在扁平化上应用阴影。

阴影在界面上创造了深度,阴影越多,越显得脱离平面。

设计原则

  • 严肃的网页应该少用阴影,而有趣的可以多用

  • 阴影应该只用在关键部分,不能滥用,因为如果每个元素都有阴影,那么就不能在不同元素间创造视觉层次结构

  • 阴影的颜色不应该太重,淡淡的会更好

使用场景

  • 对于小元素而希望获取更多注意力或突出出来时可以使用阴影(较少的阴影即可)
  • 对于想要突出显示的大区域可以使用中等大小的阴影,比如卡片等
  • 对于导航,表单等需要获取全部注意力的部分可以使用大阴影来让他们完全漂浮于页面中
  • 也可以用阴影制作选中反馈,中等程度的阴影可以让按钮更加靠近用户,在点击时切换到小阴影仿佛把按钮往下推,是很棒的反馈
  • 对于重要的按钮,我们也可以更换按钮的颜色,让它看起来在发光