UI設(shè)計必備基礎(chǔ)知識

　　上次有人提建議要看看基礎(chǔ)一點的東西，今天AAA教育郭老師給大家?guī)砹?a href="http://5wd995.cn/ui/2590.html" target="_blank">必備基礎(chǔ)知識，這次我們將介紹兩種最常用的效果--陰影和模糊，非常實用。
 

　　陰影

 

　　投影(Drop Shadow)
 

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

 

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

 

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

 

　　新擬態(tài)(Neumorphism)
 

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

　　外觀自然，陰影柔和
 

　　一個看起來很自然的影子是能在設(shè)計中產(chǎn)生最大影響的元素之一?？雌饋碜匀坏淖钪匾牟糠质潜苊馐褂眉兒谏年幱?，而用我們的主色衍生的陰影來代替。純黑色會讓對比度太大，看起來不自然。如果你研究現(xiàn)實生活中的影子，你會發(fā)現(xiàn)它們經(jīng)常會有不同的深淺和色調(diào)
 

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

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

　　內(nèi)陰影
 

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

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

 

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

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

 

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

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

 

　　模糊
 

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

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

 

　　作為陰影的高斯模糊

 

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

　　背景模糊
 

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

 

　　運動模糊
 

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

 

　　變焦模糊
 

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

 

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

 

　　希望以上內(nèi)容對你學UI設(shè)計有一定的幫助和提升，因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。