UI設(shè)計(jì)中的陰影與層次!

2016-11-1    ui設(shè)計(jì)分享達(dá)人

 藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù) 

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

 

隨著大家對于扁平化設(shè)計(jì)的反思和優(yōu)化,近兩年的整個設(shè)計(jì)風(fēng)向顯得理智而合理了許多。更加平衡而合乎情理的新的扁平化設(shè)計(jì)誕生了。這個新的方案得到了絕大多數(shù)的設(shè)計(jì)師的認(rèn)可,這種“近乎扁平”的設(shè)計(jì)更多被大家稱為“扁平化設(shè)計(jì)2.0”。扁平化2.0 整體上依然是扁平的,但是其中的諸多設(shè)計(jì)元素沿用了微妙的陰影、高光和層級來打造有深度的UI。

01.webp.jpg

Google就是扁平化2.0 設(shè)計(jì)風(fēng)格中的佼佼者。整套設(shè)計(jì)借用了“紙”的隱喻和物理規(guī)則,在視覺層次和交互性上有著明顯的提升。它賦予界面以簡約的視覺,又不犧牲UI的能指。

02.webp.jpg

陰影和高度  現(xiàn)代如今的UI設(shè)計(jì)之所以有層次感,很大程度上是因?yàn)閆軸,或者說是因?yàn)楦叨鹊拇嬖?。不同的層占?jù)Z座標(biāo)軸上不同的位置,“高度”的差異讓它們看起來有先后的層次之分。

03.webp.jpg

 

陰影是讓圖片和其他元素從背景中“彈出”并擁有深度的重要手段。微妙合理的陰影設(shè)計(jì)不會讓用戶感到分心,同時能讓用戶更輕松的理解界面:

1、陰影會暗示用戶某個元素其實(shí)是可點(diǎn)擊的。

04.webp.jpg

 

2、陰影可以讓用戶理解元素的層次,讓他們理解兩個對象并不在同一高度,不是同一個層級。

05.webp.jpg

 

如果沒有陰影,用戶無法將紅色的按鈕和背景的層級清楚的區(qū)分開來

3、陰影為定向運(yùn)動提供了重要的視覺線索。

06.webp.jpg

 

當(dāng)用戶無法確定控件或者元素是否可以點(diǎn)擊,或者是否已經(jīng)被點(diǎn)擊了,他們就越是需要點(diǎn)擊之后的反饋給予心理安慰。一個元素的高度變化應(yīng)該帶來相應(yīng)的陰影變化:

07.gif

 

結(jié)語

說了這么多,最后還是要多說一句:陰影對于扁平化的UI設(shè)計(jì)而言一樣重要,但是不要過度依賴重陰影、極端漸變和復(fù)雜的光照效果,它們太過于分散用戶注意力了。真正有價值的是那些微妙而實(shí)用的陰影,那些符合物理規(guī)則的過渡效果。

08.webp.jpg

人是視覺動物沒錯,但是用戶最終還是更喜歡簡單干凈、符合自然感知的設(shè)計(jì)??纯唇┠杲换ド献畛晒Φ脑O(shè)計(jì),贏家大都是反饋迅速,邏輯完整,簡約講道理的產(chǎn)品。

 

分享本文至:

日歷

鏈接

個人資料

存檔