UI作品設(shè)計(jì)中陰影技巧與模糊的妙用

　　陰影和模糊是兩種特別常用的效果，一些小技巧的運(yùn)用和小細(xì)節(jié)的把控，會(huì)給你的設(shè)計(jì)新增更多亮點(diǎn)。今天AAA教育武老師與大家分享UI作品設(shè)計(jì)中陰影技巧與模糊的妙用。
 

　　陰影
 

　　投影(Drop Shadow)
 

　　外陰影(或稱投影)在UI設(shè)計(jì)中經(jīng)常被使用，一個(gè)完美的陰影取決于從中心的偏移(x軸、y 軸 或兩者)、模 糊值和不透明度值。在上面的例子中，陰影在Y軸上向下移動(dòng)20個(gè)像素，然后在左側(cè)模糊，或者在左側(cè)沒(méi)有模糊的情況下向左移動(dòng)。

　　比如設(shè)計(jì)工具Sketch也有一個(gè) "擴(kuò)散 "值，這使得陰影看起來(lái)像一個(gè)較小的元素正在投射陰影。
 

　　任何陰影的形成都需要形成X、Y和模糊值(Blur)，模糊值必須是一個(gè)大于0的數(shù)字，而X和Y則可以是負(fù)數(shù)，表示可以在不同的方向上移動(dòng)偏移陰影。
 

　　你還可以通過(guò)在同一個(gè)對(duì)象上添加多個(gè)陰影來(lái)堆疊陰影，以獲得更加豐富的陰影變化。無(wú)論是在PS軟件還是sketch軟件中均可以對(duì)投影進(jìn)行疊加操作，比如下面的案例就是由三個(gè)深藍(lán)色進(jìn)行位移形成，每個(gè)陰影向下移動(dòng)了3個(gè)像素。

　　新擬態(tài)(Neumorphism)
 

　　新擬態(tài)是最近比較熱門(mén)的UI表現(xiàn)形式，關(guān)于 新擬態(tài) 這里就不做詳細(xì)闡述。
 

　　當(dāng)我們對(duì)上面的知識(shí)點(diǎn)有了了解后，我們?cè)僖黄饋?lái)看看關(guān)于 新擬態(tài) 。這種陰影效果需要結(jié)合X和Y值的正值和負(fù)值進(jìn)行雙重疊加呈現(xiàn)，這是表現(xiàn) 新擬態(tài) 所必須的核心原則。
 

　　外觀自然，陰影柔和
 

　　視覺(jué)的表現(xiàn)需要看起來(lái)自然而柔和，一個(gè)看起來(lái)很自然的陰影是能在設(shè)計(jì)中產(chǎn)生最大影響的元素之一。想要讓你的陰影看起來(lái)自然最主要的就是要避免使用純黑色的陰影，需要用設(shè)計(jì)元素本身的配色來(lái)進(jìn)行色彩延展，通過(guò)主色延展的配色方案替代純黑。純黑色做出來(lái)的陰影會(huì)使其對(duì)比度太大，看起來(lái)不自然。如果你研究現(xiàn)實(shí)生活中的影子，你會(huì)發(fā)現(xiàn)它們經(jīng)常會(huì)有不同的深淺和色調(diào)。
 

　　默認(rèn)陰影通常太暗，可能會(huì)超過(guò)設(shè)計(jì)的其余部分。
 

　　修復(fù)陰影的最好方法是將陰影從黑色(默認(rèn))改為原色的暗色。在上面的例子中，陰影是不透明度降低的深紫色。
 

　　內(nèi)陰影
 

　　內(nèi)陰影在UI中比較少見(jiàn)，它的參數(shù)與投影參數(shù)相同，但它出現(xiàn)在對(duì)象內(nèi)部。
 

　　它們并不那么流行，因?yàn)榇蠖鄶?shù)界面都是一系列層疊在一起的。在這種情況下，外影是有意義的，因?yàn)樗峁┝松疃龋瑑?nèi)陰影會(huì)暗示對(duì)象有一個(gè)洞。
 

　　如大多數(shù)界面所示，左側(cè)的示例使用經(jīng)典的圖層堆棧。向任何圖層(右)添加內(nèi)部陰影可能會(huì)導(dǎo)致在圖層中創(chuàng)建的孔的錯(cuò)覺(jué)，這可能會(huì)破壞堆棧的視覺(jué)結(jié)構(gòu)。
 

　　這種風(fēng)格的唯一用例是表單輸入(包括表單字段和復(fù)選框或單選按鈕)和新擬態(tài)方法中的擠出形狀。在某些情況下，它們可以用來(lái)使對(duì)象看起來(lái)更逼真，但只能適度使用。
 

　　您可以通過(guò)在對(duì)象上使用內(nèi)陰影并反轉(zhuǎn)X和Y的方向來(lái)實(shí)現(xiàn)此效果。
 

　　新擬態(tài) 的主要問(wèn)題是將內(nèi)部陰影和擠出的形狀作為 "選定 "狀態(tài)的概念。標(biāo)準(zhǔn)狀態(tài)和選定狀態(tài)之間的可感知差異是如此之小，以至于即使是非視覺(jué)障礙用戶有時(shí)也會(huì)完全忽略它。這又導(dǎo)致了 新擬態(tài) 最大的無(wú)障礙性缺陷之一。
 

　　模糊
 

　　現(xiàn)在大多數(shù)設(shè)計(jì)工具都有一個(gè)類似于高斯模糊的模糊類型，可以將效果均勻地?cái)U(kuò)展到每個(gè)方向。它的主要數(shù)值變化是半徑，它越大，模糊效果越突出。
 

　　高斯模糊是最常使用的模糊類型，你可以把它運(yùn)用到畫(huà)面之間的過(guò)渡中，或者通過(guò)有選擇地模糊背景來(lái)表現(xiàn)一點(diǎn)真實(shí)的景深。
 

　　作為陰影的高斯模糊
 

　　這種類型的模糊還可以幫助你在物體下生成非標(biāo)準(zhǔn)的點(diǎn)狀陰影。 只需模糊一個(gè)橢圓，并將其放置在投射陰影的對(duì)象下方。 你可以單獨(dú)使用它，也可以將它與標(biāo)準(zhǔn)的投射陰影結(jié)合起來(lái)，獲得更獨(dú)特的效果。
 

　　背景模糊
 

　　當(dāng)蘋(píng)果公司開(kāi)始在他們的操作系統(tǒng)中使用背景模糊來(lái)實(shí)現(xiàn)某些屏幕中的煙熏玻璃效果時(shí)，背景模糊就開(kāi)始流行起來(lái)。一個(gè)應(yīng)用了這種效果的對(duì)象會(huì)模糊它下面的一切。
 

　　運(yùn)動(dòng)模糊
 

　　運(yùn)動(dòng)模糊是模擬物體在角度值定義的方向上的運(yùn)動(dòng)，這里的模糊值與高斯模糊的工作原理相同。
 

　　變焦模糊
 

　　變焦模糊發(fā)生在物體由內(nèi)而外變得模糊的時(shí)候，它常被用于攝影，但不是界面設(shè)計(jì)的好選擇。
 

　　在這種特殊的模糊類型中，你還可以設(shè)置模糊的原點(diǎn)。通過(guò)移動(dòng)該點(diǎn)，你可以實(shí)現(xiàn)一些有趣的效果。
 

　　關(guān)于陰影和模糊的一些UI基礎(chǔ)普及，希望這些小的知識(shí)點(diǎn)可以為你深入每一個(gè)細(xì)節(jié)。后續(xù)將會(huì)為大家分享更多基礎(chǔ)知識(shí)，AAA教育帶給你更多幫助！