哈嘍各位小伙伴，你們?cè)诠ぷ髦惺欠窠?jīng)常因?yàn)樽约旱脑O(shè)計(jì)太平而苦惱？如果有的話，趕緊來看看這篇文章吧，本文將從投影的類別、投影的應(yīng)用、如何做好投影等方面帶你快速認(rèn)識(shí)投影以及如何利用投影打造界面空間，讓你從此不再煩惱！

一、投影的類別

投影大家應(yīng)該不陌生，能讓整個(gè)頁面非常有層級(jí)感，塑造空間感。在前2年投影的應(yīng)用更是廣泛，一度成為流行趨勢(shì)。

在我們的界面設(shè)計(jì)中區(qū)分塊與塊的方式也就那么幾種：顏色、描邊、投影

從上圖能明顯看的出來，投影能更加突出卡片的內(nèi)容，不至于讓整個(gè)界面太平，相比較會(huì)更有品質(zhì)感，所以因?yàn)檫@些原因，從蘋果系統(tǒng)的一系列設(shè)計(jì)，還有一些主流APP設(shè)計(jì)也可以看到相當(dāng)多的地方有投影的應(yīng)用，這里看一些優(yōu)秀的案例。

二、投影的應(yīng)用

接下來詳細(xì)介紹下投影在界面中的應(yīng)用。

1、圖片自身投影（沉浸感強(qiáng)，能很好的融入圖片）

2、顏色自身投影（模擬真實(shí)場景，更自然）

3、白色卡片投影-大卡片大投影，瀑布流排版小投影（替代描邊和色塊分割，更具質(zhì)感）

三、如何做好投影

說完了投影的各種好處，有點(diǎn)，那么投影使用不當(dāng)也是會(huì)有很大的弊端，并且容易造成反效果。

比如投影太重了就會(huì)顯得特別臟、投影太輕了會(huì)和背景融合、投影太靠下了頂上就禿了、投影太大就容易糊…是一個(gè)蠻矯情的設(shè)計(jì)樣式。

我們現(xiàn)在就需要搞定這塊使用規(guī)則，如何去設(shè)定投影參數(shù)，如何在合適的情況使用合適的投影。

我們先看看Material Design給出的一個(gè)關(guān)于光影的規(guī)范。

具體可以到谷歌規(guī)范的官網(wǎng)瞅瞅：https://material.io/design

能看到其實(shí)投影根據(jù)不同的使用場景，不同的界面層級(jí)，有幾種不同的投影高度，在這里我們需要先梳理清楚你的界面層級(jí)，是重是輕，這樣就能選擇正確的投影高度。

然后是投影的擴(kuò)散范圍

我們說了一大堆的理論，也有很多人抱怨為什么就是做不好投影，接下來說下投影究竟如何去做才算一個(gè)好看的投影

投影從設(shè)計(jì)中的數(shù)值參數(shù)可以分這幾個(gè)：顏色（包含透明度）、XY軸、模糊范圍

咱們從大的往小的去慢慢拆解

首先顏色切記別太深，黑灰色透明度別超過15%，彩色的特別是亮色透明度別超過30%

接著XY軸，也可以認(rèn)為是投影角度，99%的情況下都是向下投影，也就是sketch或者xd的向下位移（Y軸正數(shù)），這樣會(huì)更加體現(xiàn)空間感，也會(huì)更加自然，平均四散的投影會(huì)導(dǎo)致設(shè)計(jì)元素有些模糊。也需要注意向下位移的時(shí)候切記白色卡片別出現(xiàn)上方和背景過于融合，會(huì)非常奇怪。

最后是模糊范圍，需要看情況，對(duì)于大卡片留白比較大的可以為整體高度的四分之一左右，距離為高度的十分之一就差不多（只是一個(gè)大概的數(shù)值，情況不同需要靈活應(yīng)變）

然后是稍微密集的小按鈕啥的，建議用小的投影，代表輪廓范圍就行，大概是高度的十分之一（一般不超過10px），距離為高度的二十分之一（一般不超過5px）

這只是對(duì)大部分通用情況的一個(gè)簡單概括，有些復(fù)雜的獨(dú)特的形狀還是需要大家自己去把控

四、結(jié)語&練習(xí)

在平時(shí)看設(shè)計(jì)的時(shí)候需要注意優(yōu)秀設(shè)計(jì)投影的深度，距離，慢慢的你就知道什么投影是好的，然后就可以搞定這個(gè)細(xì)節(jié)啦～

本期內(nèi)容就到這里，希望對(duì)各位小伙伴有所幫助~

轉(zhuǎn)載聲明：本文來源于網(wǎng)絡(luò)，不作任何商業(yè)用途