過去幾年扁平風(fēng)格大行其道，所以現(xiàn)在的網(wǎng)站設(shè)計(jì)中很大部分都采用這樣的風(fēng)格，但是如果仔細(xì)深入研究，你會發(fā)現(xiàn)如今的扁平風(fēng)格已經(jīng)跟最初微軟的Metro UI式的純扁平風(fēng)格已有明顯的差別。因?yàn)樵O(shè)計(jì)師們對于界面設(shè)計(jì)更講究細(xì)節(jié)，更講究與現(xiàn)實(shí)物理世界的保持一致原則。

談到扁平風(fēng)格感覺快要走到頭了，我們來回顧一下歷史。

擬物風(fēng)格的興起與沒落

過去，人們并不熟悉界面操作時，現(xiàn)實(shí)感強(qiáng)的UI界面有助于快速理解操作方式。例如：垃圾桶圖標(biāo)代表可以把不要的文件丟進(jìn)去、寫實(shí)的日歷中被釘選的日期、把可點(diǎn)擊按鈕做得極其立體，一眼就知道可以點(diǎn)擊，而這種強(qiáng)烈立體感的表現(xiàn)手法一直運(yùn)用于 Mac / ios 。如下圖：

過去的ios界面中充滿陰影、玻璃反光等元素。因此，準(zhǔn)確的說，這就是『擬物風(fēng)格』- 強(qiáng)調(diào)實(shí)體感。

擬物風(fēng)格最大的優(yōu)勢，就是對于剛上手的使用者來說，可以通過對真實(shí)世界的認(rèn)識，快速理解ui界面上各個元件是如何操作的。

隨著對物件的設(shè)計(jì)越來越極致，質(zhì)疑的聲音也就開始出現(xiàn)了。物體畫的越來越細(xì)膩，也就美觀而已，過度的裝飾不僅喧賓奪主，反而對UI的操作沒有幫助，令使用者感到混淆與困惑。

另一方面，擬物的對象本身也有時代性的問題，過去習(xí)慣使用的東西如電話簿，名片盒，日歷，甚至指南針等等物品，很多都已漸漸淘汰，現(xiàn)實(shí)中已不再使用。用這些“舊時代”的物品來試圖引導(dǎo)現(xiàn)今UI的操作是難理解的事情。

第三點(diǎn)，如今極簡設(shè)計(jì)的美感越來越被大眾接受。就像20世紀(jì)初的產(chǎn)品和建筑從繁復(fù)裝飾走向簡約。我們看這些寫實(shí)且過度花俏的擬物風(fēng)格的界面設(shè)計(jì)就顯得突兀。

第四點(diǎn)，復(fù)雜的細(xì)節(jié)刻畫占用了設(shè)計(jì)師太多的時間、降低工作效率、以及文件太大等等問題…...

以上種種的缺點(diǎn)可以預(yù)見，擬物風(fēng)格勢必被扁平風(fēng)格取代，最后沒落。

既然擬物風(fēng)格已經(jīng)沒落，為何說又要回歸了？

我們回歸到擬物風(fēng)格的定義：

一般在UI 設(shè)計(jì)的應(yīng)用上，是代表一些看起來、或是使用起來很像現(xiàn)實(shí)世界中的相對事物。

上述提到的以ios為代表的都是過去擬物風(fēng)格的表現(xiàn)方式，強(qiáng)調(diào)的是對單一物件的刻畫細(xì)節(jié)仿真。如果從更廣義的范圍去討論，只要與現(xiàn)實(shí)世界有所關(guān)聯(lián)，都應(yīng)該稱為擬物？所以。當(dāng)下的設(shè)計(jì)趨勢，便是這種廣義上的擬物，越來越強(qiáng)調(diào)現(xiàn)實(shí)世界的物理特性。

2014年Google發(fā)布了一套新的設(shè)計(jì)語言 — Material Design

在這套設(shè)計(jì)規(guī)范中，物理特性就是其中一個很重要的概念。從紙的型態(tài)模擬觀點(diǎn)來想像，由于電子螢?zāi)皇峭耆矫婊?，不像現(xiàn)實(shí)當(dāng)中的物體是3D的，所以介面中的物件就像是一張張的紙，利用紙張的特性模擬空間感，凸顯資訊內(nèi)容間的層級關(guān)系，而這樣的空間感，是利用陰影的投射來決定物件的高低位置，這樣的陰影利用了光照的原理，模擬出陰影的角度，產(chǎn)生更合乎現(xiàn)實(shí)，更自然的感覺。

Material Design其中還有一個設(shè)計(jì)概念，就是轉(zhuǎn)場動畫。同樣賦予物理特性，在動畫的過程中，拉伸，回彈時的動態(tài)效果模仿了橡皮筋的特性，也多了更真實(shí)的細(xì)節(jié)，例如垃圾桶圖標(biāo)有了傾倒的動畫，或是通過指示條的旋轉(zhuǎn)告訴你刪除的過程。

2017年，windows也推出了一套自己的設(shè)計(jì)語言-Fluent Design System，主要目的是為了未來AR/VR設(shè)備而做的設(shè)計(jì)準(zhǔn)備，因此配合現(xiàn)實(shí)環(huán)境就顯得相當(dāng)重要，當(dāng)中包含的五大設(shè)計(jì)原則都與物理特性息息相關(guān)：

光照Light ：在點(diǎn)擊或是hover的動作上加入光照效果，或是像柔和的光源灑落于空間中，物件本身的反光質(zhì)感，與material design的光影效果（用陰影的擴(kuò)散）是不同的概念。

深度Depth — 深度的概念從Material Design就已經(jīng)被強(qiáng)調(diào)過，但FDS則是用更多的方式去呈現(xiàn)，如景深的模糊效果、視差滾動的動態(tài)效果、物件彼此的大小與位置。

動態(tài)Motion — 物件的動態(tài)效果更強(qiáng)調(diào)細(xì)膩的變化，彼此之間的動態(tài)效果有個別的時間差，比起單調(diào)的同時動作，看起來會更流暢自然，并且與真實(shí)空間中的前景后景的物理概念一樣，不同的時間差更容易在想要凸顯的主體上達(dá)到有效的聚焦效果。

材質(zhì)Material — FDS將會出現(xiàn)大量的模糊透明背景，也就是模擬毛玻璃的材質(zhì)感，通常也會帶入些微光源效果，除了吸引眼球的視覺外，在AR / VR界面上，感知空間中背景的物件是很重要的，因此模糊背景的利用可以在不影響觀看內(nèi)容的情況下又能夠做到背景的暗示。

而毛玻璃效果其實(shí)最早在windows vista系統(tǒng)中就已被運(yùn)用，只是在當(dāng)時由于效能以及干擾視線等問題僅僅應(yīng)用在小區(qū)塊，這次FDS的毛玻璃特效，成為最強(qiáng)烈的視覺焦點(diǎn)。同樣的iOS與MacOS在最近的更新也大量使用模糊效果。

縮放Scale — 在視覺上，眼前的物體大，越后面的相對較小，因此縮放也是用來營造空間感的設(shè)計(jì)特性。

FDS發(fā)表的設(shè)計(jì)概念圖:

可以看出此設(shè)計(jì)風(fēng)格有極其強(qiáng)烈的擬真感，光源的帶入、立體空間、投射陰影、以及物件之間前后的深度變化，主要在于模擬環(huán)境，而非過去的模擬實(shí)體，并且將極簡風(fēng)格應(yīng)用在資訊內(nèi)容呈現(xiàn)上，兩者相輔相成，運(yùn)用得當(dāng)?shù)脑捯曈X效果令人相當(dāng)驚艷，也許能將UI設(shè)計(jì)風(fēng)格拉到新的高度。

設(shè)計(jì)元素上的擬物

除了上述兩套設(shè)計(jì)語言有明確的提出物理觀點(diǎn)之外，其實(shí)在現(xiàn)今流行的設(shè)計(jì)元素中，也能發(fā)現(xiàn)很多擬物的設(shè)計(jì)，例如：

1， 擴(kuò)散陰影: 擴(kuò)散陰影從Material到AppleTV的UI中再次被大量使用，另外一個特點(diǎn)是陰影反映背景顏色的現(xiàn)象也更加貼和其真實(shí)物理特性。

2，文字與圖片的交疊：利用特殊的修圖方式，讓文字融入圖片當(dāng)中，產(chǎn)生前后的距離效果。

類似的還有破格設(shè)計(jì)，同樣在呈現(xiàn)前后距離，文字就像是浮在前面一般。透過空間感破格交叉的群組能夠讓物體間的過度更加順暢，而不會有太生硬的區(qū)塊切割。

3，微漸層：利用柔和的顏色漸變以及角度的變化，模擬光源帶入的感覺。

4，視差Parallax: 除了動態(tài)的視差以外，利用前后景模糊，主體清晰來模擬立體空間感。

5，3D：過去的3D應(yīng)用基本上是為了表現(xiàn)立體感，而如今3D越來越成為一套設(shè)計(jì)風(fēng)格，有趣的是，現(xiàn)在3D設(shè)計(jì)風(fēng)格反而不一昧追求真實(shí)感，而是利用高彩高亮的顏色或是幻想式的模擬搭配營造出一種超現(xiàn)實(shí)的氛圍。

結(jié)論

從以上這些設(shè)計(jì)元素都可以看出與現(xiàn)實(shí)環(huán)境或是物理特性的關(guān)聯(lián)或衍生，不管有意無意，在虛擬世界中我們都下意識習(xí)慣與現(xiàn)實(shí)有所關(guān)聯(lián)，這也就是為什么擬物始終沒有真正消失的原因，用不同或是比較隱晦的形式存在在各個地方，VR/AR的崛起，這些擬物特性理所當(dāng)然就被強(qiáng)調(diào)出來了，在未來一段時間，或許就是新一代擬物風(fēng)格的年代。