扁平化風(fēng)格的利

01 好看，確實好看

大道至簡的藝術(shù)，百看不厭。可眾多擬物化狂熱者只將扁平化的熱潮歸因于審美疲勞，我是極度不認同的。

02 天下武功，唯快不破

扁平化設(shè)計，90%或以上的內(nèi)容都可以在前端實現(xiàn)，而擬物化必須得切圖，特別在于多設(shè)備多系統(tǒng)多尺寸的時代，擬物化的一個頁面得加載多少 MB 的切圖，擬物化的一個應(yīng)用得放多少 MB 的切圖?瀏覽更快、讀取更快、下載更快，這等等結(jié)合起來，是一個擬物化無法逾越的質(zhì)變。響應(yīng)速度若是跟不上，用戶便會流失。

03 更好地響應(yīng)

再一點就是，因為90%內(nèi)容都可以在前端實現(xiàn)，使得適配能力變得更好，各尺寸個設(shè)備的響應(yīng)能都輕松地支持。無論在設(shè)計或前端開發(fā)過程中，都減少了很多適配工作，而各設(shè)備的響應(yīng)又非常和諧統(tǒng)一。

04 偷得浮生半日閑

還有前端開發(fā)更省力，設(shè)計起來更省力。雖然這一點是從生產(chǎn)者出發(fā)的，但確實深得民心。

扁平化風(fēng)格的弊

Only 1

扁平化的特點是，純色或漸變色塊、無多余的設(shè)計裝飾。可是這樣一來，會發(fā)現(xiàn)想要表達頁面的層級關(guān)系，被大大地局限了。其表現(xiàn)層級關(guān)系的方法，只有改變大小、加粗、改變顏色而已。對于一些內(nèi)容較多的頁面，很難去表達更豐富的層級關(guān)系，

因此，扁平化的最大弊端是——層級過少!過少的層級導(dǎo)致無法表達更復(fù)雜的頁面邏輯，為了以區(qū)分各模塊，就很容易將頁面做得五顏六色

大廠的改變

其實，大廠都認識到扁平化風(fēng)格的弊端，并都做出相應(yīng)的對策。

01 iOS 跳轉(zhuǎn)深度

iOS 8 的改版中，加強了頁面跳轉(zhuǎn)的“深度”：通過過渡動畫去表達兩個頁面的層級關(guān)系。但這只能處理父子頁面之間的層級關(guān)系，無法處理同頁面中各元素的層級關(guān)系。

日歷具有較深的層級，當用戶在翻閱年、月、日時，增強的轉(zhuǎn)場動畫效果給用戶一種層級縱深感。在滾動年份視圖時，用戶可以即時看到今天的日期以及其他日歷任務(wù)。

當用戶選擇了某個月份，年份視圖會局部放大該月份，過渡到月份視圖。今天的日期依然處于高亮狀態(tài)，年份會顯示在返回按鈕處，這樣用戶可以清楚地知道他們在哪兒，他們從哪里進來以及如何返回。

類似的過渡動畫也出現(xiàn)在用戶選擇某個日期時：月份視圖從所選位置分開，將所在的周日期推向內(nèi)容區(qū)頂端并顯示以小時為單位的當天時間軸視圖。這些交互動畫增強了年、月、日之間的層級關(guān)系以及用戶的感知。

02 柔和投影

在 I0S 11 中，這種帶顏色的柔和投影被大量運用(其實是在 Driibbble 和 BE 上先出現(xiàn)的風(fēng)格)，能夠結(jié)構(gòu)層次清晰地展示圖文的層級關(guān)系，令設(shè)計元素更加獨立醒目，極好的抓住用戶的注意力。

03 Material Design

谷歌的 Material Design，提出了平面像素的Z軸概念，它在扁平化設(shè)計上面增加了一些擬物化，創(chuàng)造了一種一群二維平面飛機浮動在對方指定的海拔印象。

其中最具代表性的就是懸浮按鈕，懸浮按鈕帶有一定投影，讓它在Z軸上處于對頂端，也很好地表達這個按鈕是這樣頁面中最重要的元素

最終我們發(fā)現(xiàn)，蘋果和谷歌的目的都是一致——增加頁面元素的層級關(guān)系，因為這便是扁平風(fēng)的弊端。

下一個趨勢

在扁平化的基礎(chǔ)上，利用投影去增加頁面層級，已經(jīng)被眾多設(shè)計師使用上。視覺與交互的結(jié)合使用戶體驗獲得更大的提升，希望我們能創(chuàng)造出下一個更好的設(shè)計趨勢。