2016-11-1 鶴鶴
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
隨著大家對(duì)于扁平化設(shè)計(jì)的反思和優(yōu)化，近兩年的整個(gè)設(shè)計(jì)風(fēng)向顯得理智而合理了許多。更加平衡而合乎情理的新的扁平化設(shè)計(jì)誕生了。這個(gè)新的方案得到了絕大多數(shù)的設(shè)計(jì)師的認(rèn)可，這種“近乎扁平”的設(shè)計(jì)更多被大家稱(chēng)為“扁平化設(shè)計(jì)2.0”。扁平化2.0 整體上依然是扁平的，但是其中的諸多設(shè)計(jì)元素沿用了微妙的陰影、高光和層級(jí)來(lái)打造有深度的UI。
Google就是扁平化2.0 設(shè)計(jì)風(fēng)格中的佼佼者。整套設(shè)計(jì)借用了“紙”的隱喻和物理規(guī)則，在視覺(jué)層次和交互性上有著明顯的提升。它賦予界面以簡(jiǎn)約的視覺(jué)，又不犧牲UI的能指。
陰影和高度 現(xiàn)代如今的UI設(shè)計(jì)之所以有層次感，很大程度上是因?yàn)閆軸，或者說(shuō)是因?yàn)楦叨鹊拇嬖凇２煌膶诱紦?jù)Z座標(biāo)軸上不同的位置，“高度”的差異讓它們看起來(lái)有先后的層次之分。
陰影是讓圖片和其他元素從背景中“彈出”并擁有深度的重要手段。微妙合理的陰影設(shè)計(jì)不會(huì)讓用戶(hù)感到分心，同時(shí)能讓用戶(hù)更輕松的理解界面：
1、陰影會(huì)暗示用戶(hù)某個(gè)元素其實(shí)是可點(diǎn)擊的。
2、陰影可以讓用戶(hù)理解元素的層次，讓他們理解兩個(gè)對(duì)象并不在同一高度，不是同一個(gè)層級(jí)。
如果沒(méi)有陰影，用戶(hù)無(wú)法將紅色的按鈕和背景的層級(jí)清楚的區(qū)分開(kāi)來(lái)
3、陰影為定向運(yùn)動(dòng)提供了重要的視覺(jué)線(xiàn)索。
當(dāng)用戶(hù)無(wú)法確定控件或者元素是否可以點(diǎn)擊，或者是否已經(jīng)被點(diǎn)擊了，他們就越是需要點(diǎn)擊之后的反饋給予心理安慰。一個(gè)元素的高度變化應(yīng)該帶來(lái)相應(yīng)的陰影變化：
說(shuō)了這么多，最后還是要多說(shuō)一句：陰影對(duì)于扁平化的UI設(shè)計(jì)而言一樣重要，但是不要過(guò)度依賴(lài)重陰影、極端漸變和復(fù)雜的光照效果，它們太過(guò)于分散用戶(hù)注意力了。真正有價(jià)值的是那些微妙而實(shí)用的陰影，那些符合物理規(guī)則的過(guò)渡效果。
人是視覺(jué)動(dòng)物沒(méi)錯(cuò)，但是用戶(hù)最終還是更喜歡簡(jiǎn)單干凈、符合自然感知的設(shè)計(jì)。看看近些年交互上最成功的設(shè)計(jì)，贏家大都是反饋迅速，邏輯完整，簡(jiǎn)約講道理的產(chǎn)品。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.tuitetiyu.cn
