>
學(xué)校機(jī)構(gòu) >
交互時(shí)代UI實(shí)訓(xùn)基地 >
學(xué)習(xí)資訊>
陰影在UI設(shè)計(jì)中的發(fā)展簡(jiǎn)史
陰影在UI設(shè)計(jì)中的發(fā)展簡(jiǎn)史
78 2017-06-01
在正式開發(fā)產(chǎn)品之前,關(guān)于產(chǎn)品的各種設(shè)計(jì)內(nèi)容都會(huì)體現(xiàn)在設(shè)計(jì)稿上,像是UI設(shè)計(jì)稿,交互原型圖,因此,我們的各種UI設(shè)計(jì)稿都是十分重要的,它能讓產(chǎn)品更早的開發(fā),也能夠更快的發(fā)現(xiàn)產(chǎn)品UI設(shè)計(jì)中的一些問題。
在交互時(shí)代中,有許多學(xué)員會(huì)問老師問一些自己不了解的東西,像是如何做高質(zhì)量的UI設(shè)計(jì)稿啦、體現(xiàn)設(shè)計(jì)的方式啦等等。而交互時(shí)代自然是知無不答!為學(xué)員解惑是我們的責(zé)任嘛,其實(shí)有許多事情都是能靠陰影解決的,可以說,陰影這一設(shè)計(jì)元素,是UI設(shè)計(jì)中很重要的一部分,或者大部分設(shè)計(jì)中都無法不使用陰影。
今天,交互時(shí)代就說說陰影在UI設(shè)計(jì)中的使用歷史吧。
其實(shí)在UI設(shè)計(jì)誕生之前,人們對(duì)于陰影的掌握就已經(jīng)很深厚了。
先來看看上面這個(gè)對(duì)比圖,左邊是win2000的窗口界面,而右邊則是一張數(shù)據(jù)圖設(shè)計(jì),相信大家都很熟悉吧,但是它們之間雖然年代差距久遠(yuǎn),卻有相通之處,那就是利用了高光、漸變和陰影。
而隨著交互方式的改變,設(shè)計(jì)工具的更新,所以設(shè)計(jì)手法也變得多種多樣。尤其是Iphone剛推出時(shí),擬物UI設(shè)計(jì)更是席卷整個(gè)設(shè)計(jì)圈。在這期間,UI設(shè)計(jì)師們基本都在研究跟中投影、紋理、反射、高光。
而再之后,iOS7推出了扁平化設(shè)計(jì),UI設(shè)計(jì)這個(gè)圈子就更蛋疼了?!爸靶列量嗫嗦?lián)系的設(shè)計(jì)技巧,全都推翻了1但是,設(shè)計(jì)師們永遠(yuǎn)都不會(huì)困死在一條路上,他們想到了陰影,而之后的風(fēng)向,就從擬物化設(shè)計(jì),轉(zhuǎn)變成了利用漸變與長(zhǎng)投影所形成的扁平化設(shè)計(jì)了。
一直發(fā)展到現(xiàn)在,UI設(shè)計(jì)師們又覺得長(zhǎng)投影已經(jīng)過時(shí)了,需要新的設(shè)計(jì)風(fēng)格,于是又出現(xiàn)了紙片化設(shè)計(jì),這是一種加大范圍的博陰影烘托質(zhì)感。雖然依舊是扁平化設(shè)計(jì),但是我們無時(shí)無刻不在思考著如何表現(xiàn)出不一樣的感覺。
其實(shí),交互時(shí)代說了這么多,就是想說陰影不僅在UI設(shè)計(jì)中使用了很久,在UI設(shè)計(jì)前就已經(jīng)開始運(yùn)用于各種設(shè)計(jì)之中,陰影一直在以不同的形式存在于設(shè)計(jì)潮流中,而我們則不應(yīng)該人云亦云,說什么樣的風(fēng)格好就去使用什么樣的設(shè)計(jì)元素,只應(yīng)該做自己需要的設(shè)計(jì)。
舉兩個(gè)例子,分別是有投影和沒有投影的情況下,設(shè)計(jì)稿所呈現(xiàn)出來的樣式,能明顯感覺到,適當(dāng)?shù)耐队?,?duì)增加設(shè)計(jì)稿質(zhì)感確實(shí)是有幫助的。
如上圖所示,一個(gè)界面是有陰影的,另一個(gè)界面則是沒有陰影的,而兩者則明顯能夠讓人感到不一樣,適當(dāng)?shù)耐队澳軌蛟黾幼屇愕腢I設(shè)計(jì)更具有質(zhì)感。
以上就是交互時(shí)代今天與大家分享的關(guān)于陰影在UI設(shè)計(jì)之中的歷史,想要知道更多關(guān)于UI設(shè)計(jì)的內(nèi)容就多多關(guān)注交互時(shí)代官網(wǎng)吧,掃描下方二維碼也能第一時(shí)間接收到交互時(shí)代的最新資訊。
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號(hào)
獵學(xué)網(wǎng)服務(wù)號(hào)