本周和大家聊一下設計中的投影，隨著iOS11的更新后，投影一下子又重新回歸我們的視線，其實投影一直是Ul界面設計很重要的一個元素，它能助于我們區分所看見的UI元素，投影在最早的時候，是運用在圖標設計里面，能很好模擬出界面真實是視覺感受！
投影的發展歷程
圖片來源于dribbble
▲代表著從2009年至今整個按鈕的變化，可以很明顯的看到，投影從最早期每個按鈕有精致的漸變，圓角和陰影，到后面的扁平化所有頁面全部拍平，千篇一律，于是設計師重新將新的元素與平面結合，出現了彩色投影，更加強調的材質本身的顏色。
投影的重要性
幾乎所有的設計師在扁平化處理以后對于扁平化贊不絕口，作為新的趨勢，它讓信息更加簡潔，內容更加干凈，在所有的設備上看起來很一致性，但是扁平化發展到今天我們需要去思考，沒有差異性的設計真的是美的么？扁平化的設計問題在于，它讓UI的層次變動困難，讓用戶不得不去關注你內容組件本身，看個案例：
圖片來源于dribbble
▲ 上圖這個案例是我們設計師經常每天在做的，很符合當下我們的設計趨勢，界面扁平的像紙片一樣，雖然在界面里面運用了線來區分，但是當我們第一眼看到這個界面時候還是不知道看哪里!
▲ 然后設計師嘗試在這個界面基礎上去增加一些輕微的投影，明顯好多了，信息被區分為三層，信息更加明確了一些，同時也是在扁平化的基礎上，沒有那么突兀。
▲ 上圖是iOS7剛出來的時候，完全沒有投影，我們仔細去看日歷圖標，鬧鐘圖標，當你使用白色或者黑色背景時候，鬧鐘圖標和日歷圖標，完全被背景吃掉了，是非常奇怪的一個設計，我們是希望用戶快速找到他們想要的圖標。
▲ 蘋果在iO8時候已經解決了這個問題，在圖標四周增加一個微妙的投影，使得整個界面不會被背景吃掉，讓用戶更好的理解。
▲ 前后版本效果對比，差異性就在于投影，這個設計也一直沿用到現在。
▲ 同樣的問題也出現在了蘋果的地圖軟件，蘋果有個版本地圖搜索欄陰影去掉了，純扁平了，由于地圖本身就有很明亮的顏色，使得閱讀起來糊在一起了，右圖是蘋果優化后，在導航欄底部增加了投影，讓整個設計看起來更加完全清晰。
從上述一些案例我們可以看出，微妙的投影對于增強頁面的信息結構有很重要的作用，在現代界面設計中，包括最新的蘋果系統及微軟FluentDesign System的發布，里面大大增強了層次感，這種依賴于光特效，陰影和材質的效果，讓整個效果更加符合未來的一種界面設計方向。
投影的類型
卡片投影
使用陰影突出顯示兩個組件之間的高程差異。陰影可以應用于多個組件，包括卡片，菜單，側邊欄和工具提示。
▲ 一般投影會區分幾個不同的區間，從小到大，分為小中大，根據實際場景來選擇不同的投影深度。
▲ 規范來源于https:/ /design.frefox.com/
彌散投影
和上面卡片投影差別是，彌散投影顏色一般為物體材質本身的顏色，而不是黑白灰。
▲ 圖中的卡片上按鈕黃色，它的投影也是物體本身的黃色透明度變化，其他案例也是類似原理。
▲ 衣服的投影來源于后面背板的黃色，顏色值加深和增強。
這種投影的設計其實也并不難，能簡單幾步快速實現這個效果，下面以一個按鈕在sketh里面示范：
照片投影
它的特點是投影本身是在原照片上做了照片模糊處理，目前在蘋果一系列產品中看見過它的身影，比如iOS11的蘋果音樂，它效果很柔和，通透富有光澤和活力色彩。
照片投影目前iOS11代碼是可以實現的，在設計里面也很簡單，同樣簡單幾步就能出效果：
長投影
這個效果記得是在12年扁平化剛流行起來的時候，可惜過了一年左右就被歷史所遺忘了，現在除了偶爾在平面設計里面看到長投影運用，UI領域是很少再出現了。
總結
關于投影的運用是需要去理性思考的，需要考慮頁面場景，如果是效率形頁面，可能是列表更加合適，投影的目的也不是為了界面好看而添加的，而是讓用戶對于信息的理解更加簡單。
原文地址：我們的設計日記（公眾號）
作者：sky
先看一下完成效果：
這是原圖。
第一步很簡單，先把字打上。
參數根據字體的大小任設置變形。
在文字圖層，點右鍵，刪格化圖層。
把圖放大，選擇橡皮工具擦除，所不需要的文字圖層，最好把文字的透明度調到70%左右，方便你擦除 。
圖層方式改為疊加。
開始羽化遠處的文字，八仙過海各顯奇能，我只是用其中的一種辦法。 就是選擇橢圓工具，放大點，羽化設到160，然后點DELETE兩下，OK 。
濾鏡–扭曲—波紋。
調節波紋數量為 -105 。
最后效果。
添加投影（Dropshadow）效果后，層的下方會出現一個輪廓和層的內容相同的“影子”，這個影子有一定的偏移量，默認情況下會向右下角偏移。陰影的默認混合模式是正片疊底（Multiply），不透明度75%。
投影效果的選項有：
混合模式（Blend Mode）
顏色設置（Color）
不透明度（Opacity）
角度（Angle）
距離（Distance）
擴展（Spread）
大小（Size）
等高線（Contour）
雜色（Noise）
圖層挖空陰影（Layer Knocks Out Drop Shadow）
下面我們來對他們一一作介紹：
混合模式（Blend Mode）
由于陰影的顏色一般都是偏暗的，因此這個值通常被設置為“正片疊底”，不必修改。
顏色設置
單擊混合模式的右側這個顏色框可以對陰影的顏色進行設置。
不透明度（Opacity）
默認值是75%，通常這個值不需要調整。如果你要陰影的顏色顯得深一些，應當增大這個值，反之減少這個值。
角度（Angle）
設置陰影的方向，如果要進行微調，可以使用右邊的編輯框直接輸入角度。在圓圈中，指針指向光源的方向，顯然，相反的方向就是陰影出現的地方。
距離（Distance）
陰影和層的內容之間的偏移量，這個值設置的越大，會讓人感覺光源的角度越低，反之越高。就好比傍晚時太陽照射出的影子總是比中午時的長。
擴展（Spread）
這個選項用來設置陰影的大小，其值越大，陰影的邊緣顯得越模糊，可以將其理解為光的散射程度比較高（比如白熾燈），反之，其值越小，陰影的邊緣越清晰，如同探照燈照射一樣。 注意，擴展的單位是百分比，具體的效果會和“大小”相關，“擴展”的設置值的影響范圍僅僅在“大小”所限定的像素范圍內，如果“大小”的值設置比較小，擴展的效果會不是很明顯。
大?。⊿ize）
這個值可以反映光源距離層的內容的距離，其值越大，陰影越大，表明光源距離層的表面越近，反之陰影越小，表明光源距離層的表面越遠。
等高線（Contour）
等高線用來對陰影部分進行進一步的設置，等高線的高處對應陰影上的暗圓環，低處對應陰影上的亮圓環，可以將其理解為“剖面圖”。如果不好理解等高線的效果，可以將“圖層挖空陰影”前的復選框清空，你就可以看到等高線的效果了。
#p#副標題#e#
假設我們設計一個含有兩個波峰和兩個波谷的等高線
這時的陰影中就會出現兩個亮圓環（白色）和兩個暗圓環（紅色） ，注意，為了使下圖中的效果更加明顯我們對投影進行了比較夸張的設置，看上去更像發光效果了，不過它事實上仍然是陰影效果。
雜色（Noise）
雜色對陰影部分添加隨機的透明點。
圖層挖空陰影（Layer Knocks Out Drop Shadow）
如果選中了這個選項，當圖層的不透明度小于100%時，陰影部分仍然是不可見的，也就是說使透明效果對陰影失效。例如，我們將圖層的不透明度設置為 小于100%的值，按說下面的陰影也會顯示出來一部分，但是我們選中了“圖層挖空陰影”，陰影將不會被顯示出來。通常必須選中這個選項，道理很簡單，如果物體是透明的， 它怎么會留下陰影呢？
我們不選“圖層挖空陰影”，并在“混合模式”中將“填充不透明度”減小，效果是這樣的：
如果選中“圖層挖空陰影”，減小”填充不透明度“時得到的效果是：
