如何使用投影技巧来提高UI界面品质(2)

▲ 同样的问题也出现在了苹果的地图软件，(左图)地图底部的阴影去掉了，纯扁平了，导致地图和导航栏粘在一起。(右图)是苹果优化后，在导航栏底部增加了投影，让整个设计看起来更加清晰。

从上述一些案例我们可以看出，微妙的投影对于增强页面的信息结构有很重要的作用，在现代界面设计中，包括iOS11及微软Fluent Design System设计语言，运用投影、光特效、阴影材质增强了层次感，让整个设计加符合未来的设计方向。

投影的类型

前面分析了投影在现代界面中的回归，那我们可以看看投影到底有几种类型:

● 卡片投影

使用阴影突出显示两个组件之间的高程差异。阴影可以应用于多个组件，包括卡片，菜单，侧边栏和工具提示。

▲ 一般投影会区分几个不同的区间，从小到大，分为小中大，根据实际场景来选择不同的投影深度

▲ 规范来源于https://design.firefox.com/

● 弥散投影

和上面卡片投影差别是，弥散投影颜色一般微物体材质本身的颜色，而不是黑白灰。

▲ 图中的卡片上按钮黄色的投影也是物体本身的黄色透明度变化，其他案例也是类似原理。