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

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

　　陰影
 

　　投影(Drop Shadow)
 

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

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

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

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

　　新擬態(tài)(Neumorphism)
 

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

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

　　外觀自然，陰影柔和
 

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

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

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

　　內(nèi)陰影
 

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

　　它們并不那么流行，因為大多數(shù)界面都是一系列層疊在一起的。在這種情況下，外影是有意義的，因為它提供了深度，內(nèi)陰影會暗示對象有一個洞。
 

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

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

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

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

　　模糊
 

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

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

　　作為陰影的高斯模糊
 

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

　　背景模糊
 

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

　　運動模糊
 

　　運動模糊是模擬物體在角度值定義的方向上的運動，這里的模糊值與高斯模糊的工作原理相同。
 

　　變焦模糊
 

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

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

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