哈嘍各位小伙伴，本期小編將介紹兩種最常用的效果——陰影和模糊。

陰影

投影（Drop Shadow）

外陰影（或稱投影）在UI中經常使用。一個典型的陰影依賴于從中心的偏移（x、y或兩者）、模糊和不透明度值。在上面的例子中，陰影在Y軸上向下移動20個像素，然后在左側模糊，或者向左移動而右側沒有模糊。

一些工具如Sketch也有一個 “擴散 “值，這使得陰影看起來像一個較小的元素正在投射陰影。

任何陰影最重要的部分是X、Y和模糊值（Blur）。后者必須是一個大于0的數字，而X和Y也可以是負數，幾乎在每個方向上移動陰影。

你還可以通過在同一個對象上添加多個陰影來堆疊陰影，以獲得相當有趣的結果。下面的例子中，有三個深藍色的陰影，每個陰影向下移動了3個像素。

新擬態（Neumorphism）

知道了這些，我們只要再提一下Neumorphism。這種陰影和負X、Y值的疊加，是Neumorphism發揮作用所必須的核心原則。

外觀自然，陰影柔和

一個看起來很自然的影子是能在設計中產生最大影響的元素之一。看起來自然的最重要的部分是避免使用純黑色的陰影，而用我們的主色衍生的陰影來代替。純黑色會讓對比度太大，看起來不自然。如果你研究現實生活中的影子，你會發現它們經常會有不同的深淺和色調。

默認陰影通常太暗，可能會超過設計的其余部分。

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

內陰影

內陰影在UI中比較少見。它的參數與drop shadow相同，但它出現在對象內部。

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

如大多數界面所示，左側的示例使用經典的圖層堆棧。向任何圖層（右）添加內部陰影可能會導致在圖層中創建的孔的錯覺。這可能會破壞堆棧的視覺結構。

這種風格的唯一用例是表單輸入（包括表單字段和復選框或單選按鈕）和Neumorphism方法中的擠出形狀。在某些情況下，它們可以用來使對象看起來更逼真，但只能適度使用。

您可以通過在對象上使用內陰影并反轉X和Y的方向來實現此效果。

Neumorphism的主要問題是將內部陰影和擠出的形狀作為 “選定 “狀態的概念。標準狀態和選定狀態之間的可感知差異是如此之小，以至于即使是非視覺障礙用戶有時也會完全忽略它。這又導致了Neumorphism最大的無障礙性缺陷之一。

模糊

現在大多數設計工具都有一個高斯模糊，可以將效果均勻地擴展到每個方向。它的主要數值是半徑。它越大，模糊效果越突出。

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

作為陰影的高斯模糊

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

背景模糊

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

運動模糊

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

變焦模糊

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

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

以上就是本期分享的關于陰影和模糊知識，希望對各位小伙伴有所幫助~

轉載聲明：本文來源于網絡，不作任何商業用途