UI設(shè)計(jì)中投影的使用技巧

　　說到影子，相信大家并不陌生，在現(xiàn)實(shí)生活中有光的地方就會(huì)有影，影子讓現(xiàn)實(shí)中的物體更具空間感、立體感，而且也更真實(shí)。
 

　　我們常聽到：杰出的設(shè)計(jì)源于生活但必須高于生活這樣的話，現(xiàn)實(shí)生活中隨處可見的影子在設(shè)計(jì)工作中一樣常見，使用的也越來越廣泛，那么該有人問了：影子層次越多越出彩嗎?
 

　　我的回答是：并不全是這樣!
 

　　廢話不多說，今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中投影的使用技巧進(jìn)行簡(jiǎn)單的說明
 

　　在設(shè)計(jì)中，影子的作用有很多，比如：豐富畫面層次、拉伸作品的空間感、加強(qiáng)產(chǎn)品立體感、增加作品細(xì)節(jié)……
 

　　很多設(shè)計(jì)初學(xué)者在添加影子時(shí)很喜歡用到PS軟件里的圖層樣式(fx)，直接一步搞定影子：

 

　　如圖所示，展示了平時(shí)工作比較常見的色塊、模特以及產(chǎn)品的投影，但表現(xiàn)出來的整體感受，都不太好。
 

　　為什么?
 

　　并不是因?yàn)閳D層樣式(fx)不實(shí)用，而是從上圖來看，不管是產(chǎn)品、色塊還是模特，投影給人的感覺很糊、而且稍微有點(diǎn)臟臟的，視覺層次感、空間感沒有拉開，非但沒有起到增加細(xì)節(jié)的作用，反而給人一種多此一舉的感受。
 

　　現(xiàn)實(shí)生活中，影子的形態(tài)有很多種，比如硬投影、虛化投影、倒影、懸浮投影、長(zhǎng)投影等等，投影形態(tài)的不同也代表著物體所處狀態(tài)的不同。
 

　　同理在設(shè)計(jì)中，投影形態(tài)一樣可以參考現(xiàn)實(shí)生活中的。而且圖層樣式里(fx)的投影在設(shè)計(jì)工作也很實(shí)用。前面說了，設(shè)計(jì)中的影子并不全是層次越多越好，比如接下來要說的色塊，這里簡(jiǎn)單的把色塊分為無(wú)彩色塊和有彩色塊。
 

　　無(wú)彩色塊
 

　　無(wú)彩色，俗稱黑白灰，投影顏色大多以灰色為主，若色塊底部有顏色，也可以使用比底部顏色偏暗的顏色作為投影顏色，投影模式常用正片疊底：

 

　　這里列舉的是常用的表現(xiàn)形式，同樣是使用PS軟件中的圖層樣式(fx)，給人的視覺感受卻差距很大，最直觀的區(qū)別就是投影的明度提高了、更通透了，而且空間立體感更強(qiáng)。
 

　　具體數(shù)值以及角度根據(jù)實(shí)際情況而定，不用死記硬背，下面看一下實(shí)際工作中的應(yīng)用：

 

　　如上圖所示，簡(jiǎn)單的色塊投影讓作品的展示在視覺上更加豐富、有層次，也起到了很好打破板式的作用。
 

　　有彩色塊
 

　　這里把有彩色和無(wú)彩色兩種色塊分開來說，兩者投影的常用形式基本一致，區(qū)別在于有彩色塊的投影顏色與色塊顏色相似的表現(xiàn)形式用的比較多，下面看張示意圖：

 

　　同樣，投影的常用模式是正片疊底，下面看一組實(shí)際應(yīng)用：

 

　　還可以繼續(xù)延伸，在設(shè)計(jì)工作中，也可以把大號(hào)文字當(dāng)做色塊來看，當(dāng)畫面缺少層次、立體感時(shí)，可以通過常用投影的方式來改變，下面看個(gè)案例：

 

　　把文字當(dāng)做大色塊，通過添加投影，使得作品整體出彩度大大提升，空間感也更強(qiáng)。當(dāng)文字是有彩色時(shí)，投影的顏色與文字顏色保持相似視覺效果會(huì)更好!
 

　　實(shí)物產(chǎn)品
 

　　實(shí)物產(chǎn)品的投影種類相比抽象色塊來說，因?yàn)檎鎸?shí)環(huán)境光源不同，所以影子的形態(tài)也各不相同，這里無(wú)法全部列舉出來。實(shí)物產(chǎn)品的影子會(huì)讓其更加真實(shí)、立體，這里我們以手機(jī)為例，列舉六類投影形式：

 

　　人物模特
 

　　人物模特的影子一般要求更真實(shí)、過渡自然、層次感豐富，我們可以先看看一些拍攝的人物模特的影子變化：
 

　　這些模特的影子看起來都很自然，由深到淺的過渡很舒服，而且整體空間感很強(qiáng)。那么如果我們手動(dòng)添加這種影子，應(yīng)該怎么做呢?
 

　　大致步驟是這樣的：選中模特-填充深色-調(diào)整位置-高斯模糊-橡皮擦涂抹，一般執(zhí)行兩次，第一層是淺色的影子，第二層是稍深色的影子，目的是讓過渡更加自然，最后看下對(duì)比圖：

 

　　影子的方向根據(jù)光源的位置靈活變動(dòng)即可，一般在設(shè)計(jì)工作中，影子顏色也要根據(jù)背景色隨時(shí)變動(dòng)。
 

　　總結(jié)：
 

　　投影的種類并不只有文中提到的這些，本期所說是工作常用的影子，常用的意思就是：實(shí)用且制作并不復(fù)雜，這類投影一般多用在偏平面海報(bào)、網(wǎng)頁(yè)的設(shè)計(jì)工作中，對(duì)于一些小場(chǎng)景的合成工作也同樣適用。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。