這篇超細(xì)致的教程，幫你周全掌握 APP 中的投影設(shè)計(jì)！

編者按：看似簡(jiǎn)單的投影，在高手眼里有萬(wàn)萬(wàn)種轉(zhuǎn)變。不信看看今天這篇文章，讓資深設(shè)計(jì)師教你做投影設(shè)計(jì)！

在今天的 UI設(shè)計(jì)中，投影使用的范圍和頻次越來(lái)越高。打開(kāi)手機(jī)APP，或是看追波上的演習(xí)稿，都可以看見(jiàn)無(wú)數(shù)投影使用的案例。

掌握好投影的使用，是必備的 UI 視覺(jué)設(shè)計(jì)基礎(chǔ)。投影遠(yuǎn)沒(méi)有大家想象的那么簡(jiǎn)單，即使軟件中可以設(shè)置的參數(shù)并不多，在我的教學(xué)過(guò)程中，許多學(xué)員始終沒(méi)辦法很好的應(yīng)用投影來(lái)提拔本身的設(shè)計(jì)質(zhì)感。

所以，這篇文章就會(huì)細(xì)致講解投影的精確設(shè)計(jì)方法。

一、投影的基本介紹

在了解投影和設(shè)計(jì)的關(guān)系前，我們要先知道投影是什么。用專業(yè)點(diǎn)的體例詮釋，即：

投影指的是用一組光線將物體的外形投射到一個(gè)平面上去，稱為「投影」。

有了光源，才有投影。光影是美術(shù)和攝影最核心的基礎(chǔ)。那么投影有什么特性呢，先看看下面的這張靜物攝影。

圖中有很清晰的向右延長(zhǎng)的投影。距離主體越遠(yuǎn)的投影，也就越模糊，越淡。通過(guò)如許的投影我們還可以很輕易的分析出，光源在左側(cè)，且物體是放置在地面上的。

投影可以帶給我們特別很是多隱蔽的信息，而這些每每被我們所忽略。再看看下方的案例，當(dāng)背景無(wú)法直觀的提供物體所處高度時(shí)，投影就能起到關(guān)鍵的作用。

在平面畫(huà)布中，投影的做法直接影響我們對(duì)元素的熟悉。 例如下圖中，投影可以讓我們了解按鈕自己是有厚度（遮擋了光線）或是脫離了水平面處于懸浮狀況。

當(dāng)然，投影除了對(duì)物理信息的暗示，還涉及到對(duì)視覺(jué)結(jié)果的體現(xiàn)。上面的白鞋投影很重，且輪廓清晰，如許能塑造更強(qiáng)烈的沖突，增長(zhǎng)鞋子的立體感。但是不是所有攝影都必要有如許鐫刻版的投影結(jié)果呢？答案是否定的，例如下面這張圖片。

主體物和背景色彩能很好的結(jié)合，創(chuàng)造出風(fēng)趣歡快的視覺(jué)氛圍，所以只必要柔和的投影即可。在 UI 的設(shè)計(jì)中，對(duì)于陰投影參數(shù)的定義，也會(huì)直接影響我們畫(huà)面的視覺(jué)結(jié)果。

成熟的攝影作品，會(huì)根據(jù)對(duì)投影的必要再去調(diào)節(jié)打光的體例，這是個(gè)特別很是復(fù)雜而且繁瑣的過(guò)程，必要經(jīng)年累月的學(xué)習(xí)。而在設(shè)計(jì)的過(guò)程中，創(chuàng)造投影卻特別很是容易，所以我們更該正視的是，如何精確的設(shè)計(jì)投影。

即先構(gòu)思出元素的物理特征，再給予它精確美觀投影樣式。

二、UI設(shè)計(jì)中的投影

在進(jìn)入了扁平化的設(shè)計(jì)環(huán)境后，投影有很長(zhǎng)一段時(shí)間被抹除，由于大家認(rèn)為那是擬物的遺毒，就怕設(shè)計(jì)里用到擬物元素顯得不夠時(shí)髦。

到了 Material Design 發(fā)布以后，谷歌在規(guī)范中增長(zhǎng)了 Z 軸的概念，也就是為平面預(yù)設(shè)了立體的空間，設(shè)計(jì)元素可以定義與空間中水平面的距離。

下圖中，Z 軸數(shù)字越大，代表和水平面的距離越遠(yuǎn)，上升得越多。而帶給我們這種感受的緣故原由，就是投影的暗示，元素自己的坐標(biāo)并沒(méi)有任何改變。

既然增長(zhǎng)了投影，那么谷歌的專業(yè)設(shè)計(jì)團(tuán)隊(duì)，一定不會(huì)很隨意的制訂其參數(shù)。當(dāng)我們打開(kāi)谷歌的官方 UI KITS 源文件進(jìn)行查看時(shí)，就能發(fā)現(xiàn)其中的不同。

可以看見(jiàn)，元素疊加了多層的投影，這是違背新手對(duì)于投影定義的直覺(jué)的。緣故原由在與，一樣平常軟件中定義的投影，其深淺與元素的距離是線性等比的，而實(shí)際世界中，深淺與距離是非線性的函數(shù)關(guān)系。

在 UI設(shè)計(jì)師接觸的平面類軟件中，只有 PS 具備完善復(fù)現(xiàn)這種投影的能力，即控制投影的等高線。

而 Sketch、XD 這些軟件都不具備如許的功能，且手機(jī)體系的投影渲染機(jī)制也是線性的，所以谷歌就通過(guò)使用 TopShadow、BottomShadow 疊加的體例，去模仿真實(shí)的投影結(jié)果，讓它們看起來(lái)更協(xié)調(diào)天然，這就是多層投影的奧秘。

上面出現(xiàn)的投影都是詬誶灰，但在如今流行的設(shè)計(jì)作品中，最常見(jiàn)的是應(yīng)用了彩色的投影，攝影中也經(jīng)常會(huì)應(yīng)用彩色的投影渲染氛圍。

但是，投影中的這些彩色區(qū)域，并不完全都是投影，還包含了折射和漫反射的原理等。為了簡(jiǎn)化，我們可以認(rèn)為是光線穿透物體從而投射出帶有物體自己顏色的投影。就像撐起一把綠色的陽(yáng)傘，傘下的人頭頂也會(huì)彌漫著草原的芬芳……

三、投影設(shè)計(jì)演示

在開(kāi)始展示詳細(xì)的設(shè)計(jì)案例前，我們要先明確一個(gè)原則，即：

優(yōu)雅的投影是讓你感受到它的存在，但不會(huì)吸引你去關(guān)注它！

一樣平常的設(shè)計(jì)軟件中，元素的陰影即是在元素的背后添加了一個(gè)雷同輪廓的純色矢量圖形，我們可以通過(guò) XY 軸移動(dòng)它的位置，并使用模糊的參數(shù)來(lái)設(shè)置它的模糊度。

當(dāng)元素的距離水平面越近，陰影距離元素也就越近，即 XY 軸越小，模糊也越小，假如離得遠(yuǎn)則相反。

1. 常規(guī)投影類型

第一種投影的類型，即光源從元素的上方投射下來(lái)，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標(biāo)為0，只添加模糊的參數(shù)，透明度較低。第二層陰影使用雷同的模糊參數(shù)，增長(zhǎng) Y 軸坐標(biāo)，透明度較高。

在非 MD 設(shè)計(jì)中，它濃郁的投影參數(shù)會(huì)讓整個(gè)界面變「臟」，變擁擠。我們要做的是要降低投影的透明度，如許才能讓投影的體現(xiàn)更天然舒適。要牢記的是，當(dāng)使用純黑色做陰影時(shí)，透明度無(wú)論如何都不應(yīng)該高于 20%，正常區(qū)間在 5%-15%。

既然知道陰影屬性的規(guī)律，我們還可以復(fù)制個(gè)矢量圖層做模糊結(jié)果也可以得到一樣的結(jié)果，這種方法可以支持我們?cè)O(shè)計(jì)出更真實(shí)的投影。即將 BottomShadow 自力出來(lái)，縮小并向下移動(dòng)。

假如想要得到彩色的投影，那么只要切換投影的色彩即可。值得細(xì)致的是，不同色彩的刺激程度不同，我們要憑感覺(jué)去調(diào)整它們的透明度。

假如感覺(jué)不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是因?yàn)楣饩€穿透了元素，那么當(dāng)使用了漸變色或者是圖片的投影，我們?cè)谏弦徊綇?fù)制出的那層投影，就可以不使用添補(bǔ)色，而是直接用漸變或者是原圖進(jìn)行模糊和透明度調(diào)整。

2. 特別很是規(guī)投影類型

光有垂直于平面的關(guān)系，那么發(fā)揮想象力，我們還可以更改光與面的位置，如下圖所示。

在這個(gè)場(chǎng)景中，投影就作用在圖片下方的地面，只有地面處于透視狀況時(shí)，才能可以看見(jiàn)它的投影，所以，我們就可以得到下方的結(jié)果。

當(dāng)然，我們還可以結(jié)合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會(huì)發(fā)生轉(zhuǎn)變。

我們甚至可以預(yù)設(shè)元素自己產(chǎn)生有肯定的變形，如邊緣翹起，那么就會(huì)產(chǎn)生獨(dú)特的陰影類型。

我們可以從日常生活中的觀察將各種不同的投影情勢(shì)引用進(jìn)我們的設(shè)計(jì)中，讓我們的設(shè)計(jì)視覺(jué)更雄厚風(fēng)趣。

總結(jié)

學(xué)會(huì)精確的投影設(shè)計(jì)體例，并不是僅僅讓我們局限在對(duì) UI 元素的設(shè)計(jì)上。它還能給我們帶來(lái)許多意想不到的幫助，例如做設(shè)計(jì)的包裝。

通過(guò)前面講解的知識(shí)點(diǎn)，上方展示案例中應(yīng)用的陰影體例信賴你們已經(jīng)可以看出端倪了，假如使用基礎(chǔ)的陰影設(shè)置去創(chuàng)建展示的陰影，就會(huì)發(fā)現(xiàn)結(jié)果遠(yuǎn)遠(yuǎn)不如案例的高級(jí)，天然也難以帶給別人優(yōu)秀的視覺(jué)體驗(yàn)。

最后，在項(xiàng)目中，想要將設(shè)計(jì)出來(lái)的陰影交付給開(kāi)發(fā)，真正落地實(shí)現(xiàn)出來(lái)，無(wú)論安卓或是 iOS ，陰影的渲染和設(shè)計(jì)軟件的參數(shù)是不同等的，這就必要大家本身鉆研了。

迎接關(guān)注作者的微信公眾號(hào)：「超人的電話亭」

圖片素材作者：Anton Mikhaltsov