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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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