本周和大家聊一下設(shè)計(jì)中的投影，隨著iOS11的更新后，投影一下子又重新回歸我們的視線，其實(shí)投影一直是Ul界面設(shè)計(jì)很重要的一個(gè)元素，它能助于我們區(qū)分所看見(jiàn)的UI元素，投影在最早的時(shí)候，是運(yùn)用在圖標(biāo)設(shè)計(jì)里面，能很好模擬出界面真實(shí)是視覺(jué)感受！
?
? 投影的發(fā)展歷程??
圖片來(lái)源于dribbble
▲代表著從2009年至今整個(gè)按鈕的變化，可以很明顯的看到，投影從最早期每個(gè)按鈕有精致的漸變，圓角和陰影，到后面的扁平化所有頁(yè)面全部拍平，千篇一律，于是設(shè)計(jì)師重新將新的元素與平面結(jié)合，出現(xiàn)了彩色投影，更加強(qiáng)調(diào)的材質(zhì)本身的顏色。
?
? 投影的重要性??
幾乎所有的設(shè)計(jì)師在扁平化處理以后對(duì)于扁平化贊不絕口，作為新的趨勢(shì)，它讓信息更加簡(jiǎn)潔，內(nèi)容更加干凈，在所有的設(shè)備上看起來(lái)很一致性，但是扁平化發(fā)展到今天我們需要去思考，沒(méi)有差異性的設(shè)計(jì)真的是美的么？扁平化的設(shè)計(jì)問(wèn)題在于，它讓UI的層次變動(dòng)困難，讓用戶不得不去關(guān)注你內(nèi)容組件本身，看個(gè)案例：
圖片來(lái)源于dribbble
▲?上圖這個(gè)案例是我們?cè)O(shè)計(jì)師經(jīng)常每天在做的，很符合當(dāng)下我們的設(shè)計(jì)趨勢(shì)，界面扁平的像紙片一樣，雖然在界面里面運(yùn)用了線來(lái)區(qū)分，但是當(dāng)我們第一眼看到這個(gè)界面時(shí)候還是不知道看哪里!
?
▲?然后設(shè)計(jì)師嘗試在這個(gè)界面基礎(chǔ)上去增加一些輕微的投影，明顯好多了，信息被區(qū)分為三層，信息更加明確了一些，同時(shí)也是在扁平化的基礎(chǔ)上，沒(méi)有那么突兀。
?
▲?上圖是iOS7剛出來(lái)的時(shí)候，完全沒(méi)有投影，我們仔細(xì)去看日歷圖標(biāo)，鬧鐘圖標(biāo)，當(dāng)你使用白色或者黑色背景時(shí)候，鬧鐘圖標(biāo)和日歷圖標(biāo)，完全被背景吃掉了，是非常奇怪的一個(gè)設(shè)計(jì)，我們是希望用戶快速找到他們想要的圖標(biāo)。
?
▲?蘋果在iO8時(shí)候已經(jīng)解決了這個(gè)問(wèn)題，在圖標(biāo)四周增加一個(gè)微妙的投影，使得整個(gè)界面不會(huì)被背景吃掉，讓用戶更好的理解。
?
▲?前后版本效果對(duì)比，差異性就在于投影，這個(gè)設(shè)計(jì)也一直沿用到現(xiàn)在。
?
▲?同樣的問(wèn)題也出現(xiàn)在了蘋果的地圖軟件，蘋果有個(gè)版本地圖搜索欄陰影去掉了，純扁平了，由于地圖本身就有很明亮的顏色，使得閱讀起來(lái)糊在一起了，右圖是蘋果優(yōu)化后，在導(dǎo)航欄底部增加了投影，讓整個(gè)設(shè)計(jì)看起來(lái)更加完全清晰。
?
從上述一些案例我們可以看出，微妙的投影對(duì)于增強(qiáng)頁(yè)面的信息結(jié)構(gòu)有很重要的作用，在現(xiàn)代界面設(shè)計(jì)中，包括最新的蘋果系統(tǒng)及微軟FluentDesign System的發(fā)布，里面大大增強(qiáng)了層次感，這種依賴于光特效，陰影和材質(zhì)的效果，讓整個(gè)效果更加符合未來(lái)的一種界面設(shè)計(jì)方向。
?
? 投影的類型??
卡片投影
使用陰影突出顯示兩個(gè)組件之間的高程差異。陰影可以應(yīng)用于多個(gè)組件，包括卡片，菜單，側(cè)邊欄和工具提示。
?
▲?一般投影會(huì)區(qū)分幾個(gè)不同的區(qū)間，從小到大，分為小中大，根據(jù)實(shí)際場(chǎng)景來(lái)選擇不同的投影深度。
?
▲?規(guī)范來(lái)源于https:/ /design.frefox.com/
?
彌散投影
和上面卡片投影差別是，彌散投影顏色一般為物體材質(zhì)本身的顏色，而不是黑白灰。
▲?圖中的卡片上按鈕黃色，它的投影也是物體本身的黃色透明度變化，其他案例也是類似原理。
?
▲?衣服的投影來(lái)源于后面背板的黃色，顏色值加深和增強(qiáng)。
?
這種投影的設(shè)計(jì)其實(shí)也并不難，能簡(jiǎn)單幾步快速實(shí)現(xiàn)這個(gè)效果，下面以一個(gè)按鈕在sketh里面示范：
照片投影
它的特點(diǎn)是投影本身是在原照片上做了照片模糊處理，目前在蘋果一系列產(chǎn)品中看見(jiàn)過(guò)它的身影，比如iOS11的蘋果音樂(lè)，它效果很柔和，通透富有光澤和活力色彩。
照片投影目前iOS11代碼是可以實(shí)現(xiàn)的，在設(shè)計(jì)里面也很簡(jiǎn)單，同樣簡(jiǎn)單幾步就能出效果：
?
長(zhǎng)投影
這個(gè)效果記得是在12年扁平化剛流行起來(lái)的時(shí)候，可惜過(guò)了一年左右就被歷史所遺忘了，現(xiàn)在除了偶爾在平面設(shè)計(jì)里面看到長(zhǎng)投影運(yùn)用，UI領(lǐng)域是很少再出現(xiàn)了。
?
? 總結(jié)??
關(guān)于投影的運(yùn)用是需要去理性思考的，需要考慮頁(yè)面場(chǎng)景，如果是效率形頁(yè)面，可能是列表更加合適，投影的目的也不是為了界面好看而添加的，而是讓用戶對(duì)于信息的理解更加簡(jiǎn)單。
?
原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）
作者：sky
