投影的發(fā)展歷程
上圖代表從2009年起按鈕的變化，精致漸變→圓角、陰影→扁平化→彩色投影、更強(qiáng)調(diào)材質(zhì)本身的顏色。
投影的重要性
扁平化作為新的趨勢(shì)，讓信息更簡(jiǎn)潔，內(nèi)容更干凈，在不同設(shè)備上也能保持一致性。但扁平化的設(shè)計(jì)問題在于，它讓UI的層次變動(dòng)困難，讓用戶不得不去關(guān)注內(nèi)容組件本身。
上圖界面扁平如紙片，雖然在界面里運(yùn)用了線加以區(qū)分，但第一眼看見它依然不知道看哪里。
當(dāng)嘗試在上一個(gè)界面上加一些輕微的投影后，信息被分為了三層，信息更加明確，同時(shí)，在扁平化的基礎(chǔ)上沒有那么突兀。
上圖為iOS7剛出來時(shí)，完全沒有投影。當(dāng)背景使用白色或者黑色背景時(shí)，日歷或者鬧鐘圖標(biāo)完全被背景吃掉了。用戶在使用感上存在著不適（沒辦法快速找到圖標(biāo)）。
蘋果在iOS 8的時(shí)候已經(jīng)解決了這個(gè)問題，在圖標(biāo)四周增加一個(gè)微妙的投影，使得整個(gè)界面不會(huì)被背景吃掉，讓用戶更好的理解。這個(gè)設(shè)計(jì)也一直沿用到現(xiàn)在的iOS 11系統(tǒng)。
同樣的問題也出現(xiàn)在了蘋果的地圖軟件里，左圖導(dǎo)航欄底部沒有陰影，導(dǎo)致導(dǎo)航欄跟地圖粘在一起。右圖是蘋果優(yōu)化過后，在導(dǎo)航欄底部增加了投影，讓整個(gè)設(shè)計(jì)看起來層次感更清晰。
從上面兩個(gè)案例中，我們可以看出恰到好處的投影對(duì)于增強(qiáng)頁(yè)面的信息結(jié)構(gòu)有很重要的作用。在現(xiàn)代界面設(shè)計(jì)中，包括iOS 11以及微軟Fluent Design System設(shè)計(jì)語言，運(yùn)用投影、光特效、陰影材質(zhì)增強(qiáng)了層次感，更符合未來的設(shè)計(jì)方向。
投影的類型
·卡片投影
使用陰影突出顯示兩個(gè)組件之間的高程差異。陰影可以應(yīng)用于多個(gè)組件，如：卡片、菜單、側(cè)邊欄、工具提示。
·彌散投影
與上面卡片投影的區(qū)別：彌散投影顏色一般是物體本身的顏色，而不是黑白灰。
列舉彌散投影在sketch中的實(shí)現(xiàn)步驟
·照片投影
其特點(diǎn)是投影本身是在原照片上做了照片的模糊處理。目前在蘋果系列產(chǎn)品中出現(xiàn)，如iOS 11的蘋果音樂，營(yíng)造的效果柔和，通透，富有光澤和活力色彩。
照片投影目前iOS 11代碼可以實(shí)現(xiàn)，步驟簡(jiǎn)單。
照片投影的效果就出來了，可以保存成Symbol，這樣在Symbol里面改變圖片就可以得到更多效果。
·長(zhǎng)投影
這個(gè)效果12年的時(shí)候流行過，現(xiàn)在偶爾在平面設(shè)計(jì)里看見，UI領(lǐng)域很少再出現(xiàn)。
總結(jié)
投影的運(yùn)用需要考慮頁(yè)面場(chǎng)景，效率型頁(yè)面可能列表更合適，投影的目的不是為了頁(yè)面好看，而是讓用戶對(duì)于信息的理解更加簡(jiǎn)單。
