擬物化設(shè)計(jì)的回歸

在今天的 UI 設(shè)計(jì)領(lǐng)域，由扁平化設(shè)計(jì)風(fēng)格占據(jù)主導(dǎo)地位，已經(jīng)是無(wú)可辯駁的事實(shí)了。扁平化應(yīng)用除了提升用戶獲取信息的效率外，對(duì)設(shè)計(jì)師而言就是設(shè)計(jì)的難度大大降低了。

一個(gè)界面的 UI 視覺(jué)元素，僅僅只需要圖片素材、矢量圖標(biāo)、幾何、文字，UI 設(shè)計(jì)師的工作僅僅是對(duì)內(nèi)容進(jìn)行組織和排版，涉及到繪制原創(chuàng)的也僅僅只有少量的圖標(biāo)（大多數(shù)人還畫不好）。

這種狀態(tài)持續(xù)了很多年，看起來(lái)歲月一片靜好。

但是，這兩年市場(chǎng)發(fā)出了一些不同的聲音，那就是打破純扁平風(fēng)格的 UI 風(fēng)格、元素開(kāi)始越來(lái)越盛行了。

比如新擬態(tài)風(fēng)格在年初炒了一波熱度，各大平臺(tái)和公眾號(hào)都鋪天蓋地的發(fā)文和介紹，介紹它的設(shè)計(jì)理念和設(shè)計(jì)方法。

還有就是以餓了么、美團(tuán)為首的國(guó)民級(jí)應(yīng)用在主頁(yè)顯眼的位置里使用極具識(shí)別性的擬物圖標(biāo)，引起設(shè)計(jì)圈的熱議。

首先講講新擬態(tài)設(shè)計(jì)，之所以之前只字不提，是因?yàn)槲覍?duì)這個(gè)風(fēng)格實(shí)在沒(méi)什么好感，有種對(duì)純擬物借尸還魂的味道，且它的樣式對(duì)于信息密度高的應(yīng)用是完全不適用的，只能活在飛機(jī)稿里。

而國(guó)內(nèi)大型應(yīng)用開(kāi)始在實(shí)際項(xiàng)目中上線擬物圖標(biāo)，意義就不一樣了，證明這樣的設(shè)計(jì)是經(jīng)過(guò)幾個(gè)大廠團(tuán)隊(duì)認(rèn)可，且有共識(shí)的。

當(dāng)然，這并不因?yàn)榇髲S用了就無(wú)腦推崇。而是純扁平的設(shè)計(jì)已經(jīng)越來(lái)越難滿足部分需要強(qiáng)視覺(jué)效果的頁(yè)面設(shè)計(jì)了。

今天的互聯(lián)網(wǎng)和過(guò)去不一樣，用戶的增長(zhǎng)留存不再是過(guò)去一樣通過(guò)裂變和口碑完成，一個(gè)產(chǎn)品只要認(rèn)真打磨體驗(yàn)、功能就能獲得用戶的青睞和駐留。用戶的精力時(shí)間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶臨幸是沒(méi)有出路，這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場(chǎng)。

佛系不行，當(dāng)舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對(duì)待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來(lái)越高，運(yùn)營(yíng)活動(dòng)越來(lái)越密集，廣告和強(qiáng)提示也越來(lái)越多。比如剛打開(kāi)了三個(gè)應(yīng)用，進(jìn)入的首頁(yè)大家自己意會(huì)……

有點(diǎn)扯遠(yuǎn)了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡(jiǎn)風(fēng)就不會(huì)合適。當(dāng)對(duì)扁平的視覺(jué)效果已經(jīng)開(kāi)發(fā)到極限以后，那么進(jìn)一步在一些細(xì)節(jié)處應(yīng)用擬物就成為必然的選擇。

而擬物的應(yīng)用并不可能鋪設(shè)到整個(gè)應(yīng)用中去，因?yàn)橥耆珨M物化的設(shè)計(jì)降低信息瀏覽效率是必然的，所以它只適合做局部的視覺(jué)強(qiáng)化，來(lái)加強(qiáng)用戶對(duì)特定區(qū)域的感知。

最常見(jiàn)的需要被凸出的要素，就是首頁(yè)中應(yīng)用的快速入口圖標(biāo)、分類圖標(biāo)和底部導(dǎo)航欄圖標(biāo)了。這些區(qū)域長(zhǎng)期受運(yùn)營(yíng)活動(dòng)支配，相信大家已經(jīng)很習(xí)慣了。

只是，這些圖標(biāo)開(kāi)始在脫離運(yùn)營(yíng)活動(dòng)的狀態(tài)下，也開(kāi)始使用非扁平模式，那就不再是運(yùn)營(yíng)設(shè)計(jì)師的工作職責(zé)，而是 UI 設(shè)計(jì)師們繞不過(guò)去的檻了（知識(shí)盲區(qū)）！

且除了 APP 外，其它領(lǐng)域?qū)τ跀M物設(shè)計(jì)的需求也會(huì)開(kāi)始逐漸提升，尤其是目前越來(lái)越復(fù)（fu）雜（kua）的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。

作為新世代的 UI 設(shè)計(jì)師，多數(shù)人對(duì)擬物的設(shè)計(jì)可以說(shuō)是完全空白的狀態(tài)，所以是時(shí)候要重拾擬物設(shè)計(jì)這個(gè)傳統(tǒng)藝能了。

擬物和輕擬物的認(rèn)識(shí)

前面我有提到，擬物主要應(yīng)用在關(guān)鍵的圖標(biāo)上，但應(yīng)用的擬物風(fēng)格并不是過(guò)去我們追求的那種極其真實(shí)、復(fù)雜的擬物，而是經(jīng)過(guò)一定簡(jiǎn)化、抽象后的擬物 —— 輕擬物。我們要先來(lái)明確一下輕擬物到底是什么。

首先我們看看，過(guò)去優(yōu)秀的擬物圖標(biāo)和設(shè)計(jì)案例，它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造，甚至?xí)浅Ｍ暾谋憩F(xiàn)物體表面的材質(zhì)和肌理。

這種圖標(biāo)單看起來(lái)確實(shí)很好看、細(xì)致。但是，把它丟進(jìn)我們當(dāng)前的頁(yè)面中是非常違和的，因?yàn)樗鼈兗?xì)節(jié)實(shí)在太多了，而且畫起來(lái)非常耗時(shí)間，不利于項(xiàng)目整體的推進(jìn)。

所以為了符合畫面的質(zhì)感，又要考慮項(xiàng)目效率，輕擬物這個(gè)概念開(kāi)始被提出和應(yīng)用，作為一個(gè)折中的解決方案。

它和純擬物設(shè)計(jì)的共同點(diǎn)在于，也表現(xiàn)光影、結(jié)構(gòu)、透視，但它盡可能精簡(jiǎn)了輪廓的復(fù)雜度、肌理和層級(jí)，呈現(xiàn)出更概念化、理想化、易于辨識(shí)的擬物圖形。

所以，我們主要去學(xué)習(xí)的內(nèi)容是輕擬物的設(shè)計(jì)方法，而不是徒手畫照片（這個(gè)可以緩緩）！

而輕擬物雖然 「輕」，但它依舊也還具備擬物的基本特征，是有實(shí)體質(zhì)感的。但是扁平從插畫到圖標(biāo)設(shè)計(jì)經(jīng)過(guò)多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設(shè)計(jì)，應(yīng)用大量的漸變、投影、模糊的效果，比如下圖案例。

這在我們之前圖標(biāo)的系列干貨中有提過(guò)，這類設(shè)計(jì)是面性圖標(biāo)的進(jìn)階版，它們依舊屬于扁平風(fēng)格的范疇之內(nèi)，不能和輕擬物劃上等號(hào)。

所以，先掌握這些概念，到下一篇中，我們就會(huì)展開(kāi)具體的技法講解和演示了。

結(jié)尾

對(duì)于這幾年才開(kāi)始學(xué)習(xí) UI 設(shè)計(jì)的新手來(lái)講，擬物已經(jīng)變成一個(gè)很陌生的事物，這對(duì)行業(yè)來(lái)說(shuō)是比較悲哀的一件事。

因?yàn)閿M物的設(shè)計(jì)不僅僅是畫圖標(biāo)而已，對(duì)它的學(xué)習(xí)可以全方位的提升設(shè)計(jì)師的基礎(chǔ)素養(yǎng)，不僅包括對(duì)傳統(tǒng)美術(shù)（結(jié)構(gòu)、光影、色彩、透視）知識(shí)點(diǎn)的剖析，還包含對(duì) PS 使用的深入探索。

可以說(shuō)，自從擬物不成為必修題材以后，九成以上的UI設(shè)計(jì)師是不會(huì)用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。