你的UI設計不夠有質感？試試加上這個元素

iOS11更新之後，投影一下子重新回歸到人們的視線。其實投影一直是UI設計中很重要的一個元素，它能幫助區分我們看見的UI元素。在最早的時候，投影被運用在圖標設計里，它能很好模擬出界面真實的視覺感受。

上圖來源於dribbble，代表從2009年起整個按鈕的變化，可以很明顯的看到投影的變化，從早期按鈕有精緻的漸變、圓角和陰影，到後面的扁平化，到彩色投影，更強調材質本身的顏色。

想要更詳細的了解近年按鈕設計的變化，讀讀：《八年中，按鈕設計經歷了怎樣的變遷？》

投影的重要性

幾乎所有設計師在扁平化處理以後都讚不絕口，作為新的趨勢，它讓信息更加簡潔，內容更加乾淨，在所有的設備上看起來都很一致。但是扁平化發展到了今天，我們需要思考，沒有差異性的設計真的好么？扁平化設計的問題在於，它讓UI的層次變動困難，讓用戶不得不去關注內容組件本身，看個案例。

上圖的案例是我們設計師經常在做的，很符合當下的設計趨勢，界面扁平得像紙片一樣。但即使在界面裡面運用了線來區分，我們第一眼看到這個界面時，還是不知道看哪裡。

然後設計師嘗試在這個基礎上增加一些漂亮輕微的投影，明顯好多了，信息被區分為三層，內容更加明確了。同時也是在扁平化的基礎上，沒有那麼突兀。

上圖是iOS7剛出來的時候，完全沒有投影。仔細看日曆圖標和鬧鐘圖標，當使用白色或者黑色背景時，鬧鐘圖標和日曆圖標，完全被背景吃掉了。對於希望能快速找到想要的圖標用戶來說，是很不方便的。

蘋果在iOS8的時候已經解決了這個問題：在圖標四周增加一個微妙的投影，使得整個界面不會被背景吃掉，讓用戶能更好地理解。

前後版本效果的差異性就在於投影，這個設計也一直沿用到現在的iOS11系統。

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

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

投影的類型

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

卡片投影

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

一般投影會區分幾個不同的區間，從小到大，

根據實際場景來選擇不同的投影深度。

規範來源於https://design.firefox.com/

彌散投影

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

按鈕的黃色投影是物體本身黃色的透明度變化

衣服的投影來源於後面背板的黃色，顏色值加深、增強

這種投影其實也並不難，下面在sketch里示範一個按鈕，如何簡單幾步快速實現這個效果。

照片投影

顧名思義，它的特點是投影本身在原照片上做了照片模糊處理。我們能在蘋果一系列產品中看見它的身影，比如iOS11的Apple Music，效果很柔和，通透、富有光澤和活力色彩。

目前iOS11代碼是可以實現照片投影的，在設計中同樣簡單幾步就能出效果：

一個騷氣通透的模糊效果就出來了，然後我們可以保存成Symbol，這樣在Syboml裡面改變圖片就可以得到更多效果。

長投影

這個效果在12年的時候流行過，可惜過了一年左右就被歷史所遺忘了，現在偶爾能在平面設計裡面看到長投影運用，很少再出現在UI領域了。

總 結

投影的運用是需要理性思考的，設計師要考慮頁面場景。如果是效率型頁面，可能列表更加合適。投影的目的也不是為了界面好看，而是讓用戶能更簡單地理解信息。

作者丨sky，封面丨Proud-of-Lithuania

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！