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

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

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

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

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

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

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

 

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

　　為什么?
 

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

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

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

　　無彩色塊
 

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

 

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

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

 

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

　　有彩色塊
 

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

 

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

 

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

 

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

　　實物產(chǎn)品
 

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

 

　　人物模特
 

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

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

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

 

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

　　總結(jié)：
 

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