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

　　上次有人提建議要看看基礎(chǔ)一點(diǎn)的東西，今天AAA教育郭老師給大家?guī)?lái)了必備基礎(chǔ)知識(shí)，這次我們將介紹兩種最常用的效果--陰影和模糊，非常實(shí)用。
 

　　陰影

 

　　投影(Drop Shadow)
 

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

 

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

 

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

 

　　新擬態(tài)(Neumorphism)
 

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

　　外觀自然，陰影柔和
 

　　一個(gè)看起來(lái)很自然的影子是能在設(shè)計(jì)中產(chǎn)生最大影響的元素之一。看起來(lái)自然的最重要的部分是避免使用純黑色的陰影，而用我們的主色衍生的陰影來(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ù)與drop shadow相同，但它出現(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ù)選框或單選按鈕)和Neumorphism方法中的擠出形狀。在某些情況下，它們可以用來(lái)使對(duì)象看起來(lái)更逼真，但只能適度使用。

 

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

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

 

　　模糊
 

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

　　高斯模糊是最常使用的模糊類型。你可以把它運(yùn)用到畫面之間的過(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)蘋果公司開(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)一些有趣的效果。

 

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