?新擬態(tài)UI設(shè)計(jì)(Neumorphism / soft ui)在近段時(shí)間流行起來(lái)的,我們?cè)贒ribbble中搜索Neumorphism就有很多相關(guān)的新擬態(tài)設(shè)計(jì)作品,這種效果一眼看上去感覺(jué)很美,很舒服,但是怎么做出來(lái)的呢?今天AAA教育武老師分享這個(gè)Neumorphism在線生成新擬態(tài)UI工具,可以通過(guò)這個(gè)工具分解出新擬態(tài)UI是如何設(shè)計(jì)的,此外它還能生成CSS代碼并應(yīng)用到網(wǎng)頁(yè)上。
在我們看來(lái)這種UI很適合用來(lái)做概念設(shè)計(jì)的產(chǎn)品,當(dāng)然實(shí)際應(yīng)用中也可以嘗試,因?yàn)橐曈X(jué)效果確實(shí)是很不錯(cuò)呢。我們來(lái)看看關(guān)于新擬態(tài)的UI作品,讓大家進(jìn)一步了解它是什么樣子的。
如何實(shí)現(xiàn)新擬態(tài)UI設(shè)計(jì)效果?
1、直接參考下圖的設(shè)置:
大家先看這個(gè)圖,新擬態(tài)主要是通過(guò)陰影來(lái)實(shí)現(xiàn)的,通過(guò)陰影實(shí)現(xiàn)凸凹兩種質(zhì)感。
新擬態(tài)UI設(shè)計(jì)參數(shù)圖
2、使用Neumorphism在線工具
推薦大家用Neumorphism在線工具來(lái)快速實(shí)現(xiàn)新擬態(tài)UI效果,因?yàn)樗鼛в蓄A(yù)覽功能,所見(jiàn)即所得,比PS或Sketch上設(shè)置更加快捷,而具體的設(shè)置參數(shù)看對(duì)應(yīng)CSS屬性值就可以了。
新擬態(tài)UI主要實(shí)現(xiàn)方式
1、給圖形添加2個(gè)陰影,UI設(shè)計(jì)陰影怎么做。參數(shù)要設(shè)置大一些,注意兩陰影顏色是同一色調(diào),然后分別設(shè)置一個(gè)亮色一暗色。這里就不說(shuō)參數(shù)了,如果你調(diào)整不出效果,表示你色感方面還需要加強(qiáng)。什么是UI設(shè)計(jì)。
2、模糊設(shè)置:Blur模糊值通常是坐標(biāo)值的2倍,這樣效果會(huì)明示一點(diǎn)。
3、凸出的效果就是利用漸變來(lái)設(shè)置了。UI設(shè)計(jì)漸變色怎么用?
今天就分享到這里,快嘗試新擬態(tài)UI設(shè)計(jì)吧,這是2020的新設(shè)計(jì)趨勢(shì)之一,你學(xué)會(huì)了嗎,更多資訊請(qǐng)持續(xù)關(guān)注AAA教育。
填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(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