上次有人提建議要看看基礎(chǔ)一點(diǎn)的東西,今天AAA教育郭老師給大家?guī)砹?a href="http://m.5wd995.cn/ui/2590.html" target="_blank">必備基礎(chǔ)知識(shí),這次我們將介紹兩種最常用的效果--陰影和模糊,非常實(shí)用。
陰影
投影(Drop Shadow)
外陰影(或稱投影)在UI中經(jīng)常使用。一個(gè)典型的陰影依賴于從中心的偏移(x、y或兩者)、模糊和不透明度值。在上面的例子中,陰影在Y軸上向下移動(dòng)20個(gè)像素,然后在左側(cè)模糊,或者向左移動(dòng)而右側(cè)沒有模糊。
任何陰影最重要的部分是X、Y和模糊值(Blur)。后者必須是一個(gè)大于0的數(shù)字,而X和Y也可以是負(fù)數(shù),幾乎在每個(gè)方向上移動(dòng)陰影。
你還可以通過在同一個(gè)對(duì)象上添加多個(gè)陰影來堆疊陰影,以獲得相當(dāng)有趣的結(jié)果。下面的例子中,有三個(gè)深藍(lán)色的陰影,每個(gè)陰影向下移動(dòng)了3個(gè)像素。
新擬態(tài)(Neumorphism)
知道了這些,我們只要再提一下Neumorphism。這種陰影和負(fù)X、Y值的疊加,是Neumorphism發(fā)揮作用所必須的核心原
外觀自然,陰影柔和
一個(gè)看起來很自然的影子是能在設(shè)計(jì)中產(chǎn)生最大影響的元素之一??雌饋碜匀坏淖钪匾牟糠质潜苊馐褂眉兒谏年幱埃梦覀兊闹魃苌年幱皝泶?。純黑色會(huì)讓對(duì)比度太大,看起來不自然。如果你研究現(xiàn)實(shí)生活中的影子,你會(huì)發(fā)現(xiàn)它們經(jīng)常會(huì)有不同的深淺和色調(diào)
默認(rèn)陰影通常太暗,可能會(huì)超過設(shè)計(jì)的其余部分。
修復(fù)陰影的最好方法是將陰影從黑色(默認(rèn))改為原色的暗色。在上面的例子中,陰影是不透明度降低的深紫色。
內(nèi)陰影
內(nèi)陰影在UI中比較少見。它的參數(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ò)覺。這可能會(huì)破壞堆棧的視覺結(jié)構(gòu)。
這種風(fēng)格的唯一用例是表單輸入(包括表單字段和復(fù)選框或單選按鈕)和Neumorphism方法中的擠出形狀。在某些情況下,它們可以用來使對(duì)象看起來更逼真,但只能適度使用。
您可以通過在對(duì)象上使用內(nèi)陰影并反轉(zhuǎn)X和Y的方向來實(shí)現(xiàn)此效果。
Neumorphism的主要問題是將內(nèi)部陰影和擠出的形狀作為 "選定 "狀態(tài)的概念。標(biāo)準(zhǔn)狀態(tài)和選定狀態(tài)之間的可感知差異是如此之小,以至于即使是非視覺障礙用戶有時(shí)也會(huì)完全忽略它。這又導(dǎo)致了Neumorphism最大的無障礙性缺陷之一。
模糊
現(xiàn)在大多數(shù)設(shè)計(jì)工具都有一個(gè)高斯模糊,可以將效果均勻地?cái)U(kuò)展到每個(gè)方向。它的主要數(shù)值是半徑。它越大,模糊效果越突出。
高斯模糊是最常使用的模糊類型。你可以把它運(yùn)用到畫面之間的過渡中,或者通過有選擇地模糊背景來表現(xiàn)一點(diǎn)真實(shí)的景深。
作為陰影的高斯模糊
這種類型的模糊還可以幫助你在物體下生成非標(biāo)準(zhǔn)的點(diǎn)狀陰影。只需模糊一個(gè)橢圓,并將其放置在投射陰影的對(duì)象下方。你可以單獨(dú)使用它,也可以將它與標(biāo)準(zhǔn)的投射陰影結(jié)合起來,獲得更獨(dú)特的效果。
背景模糊
當(dāng)蘋果公司開始在他們的操作系統(tǒng)中使用背景模糊來實(shí)現(xiàn)某些屏幕中的煙熏玻璃效果時(shí),背景模糊就開始流行起來。一個(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)。通過移動(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問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc