▲ 同樣的問題也出現在了蘋果的地圖軟件，(左圖)地圖底部的陰影去掉了，純扁平了，導致地圖和導航欄粘在一起。(右圖)是蘋果優化后，在導航欄底部增加了投影，讓整個設計看起來更加清晰。

從上述一些案例我們可以看出，微妙的投影對于增強頁面的信息結構有很重要的作用，在現代界面設計中，包括iOS11及微軟Fluent Design System設計語言，運用投影、光特效、陰影材質增強了層次感，讓整個設計加符合未來的設計方向。

投影的類型

前面分析了投影在現代界面中的回歸，那我們可以看看投影到底有幾種類型:

● 卡片投影

使用陰影突出顯示兩個組件之間的高程差異。陰影可以應用于多個組件，包括卡片，菜單，側邊欄和工具提示。

▲ 一般投影會區分幾個不同的區間，從小到大，分為小中大，根據實際場景來選擇不同的投影深度

▲ 規范來源于https://design.firefox.com/

● 彌散投影

和上面卡片投影差別是，彌散投影顏色一般微物體材質本身的顏色，而不是黑白灰。

▲ 圖中的卡片上按鈕黃色的投影也是物體本身的黃色透明度變化，其他案例也是類似原理。