餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

2020-8-24    資深UI設(shè)計者

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

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

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

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

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

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

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

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

當(dāng)然,這并不因為大廠用了就無腦推崇。而是純扁平的設(shè)計已經(jīng)越來越難滿足部分需要強視覺效果的頁面設(shè)計了。

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

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

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

而擬物的應(yīng)用并不可能鋪設(shè)到整個應(yīng)用中去,因為完全擬物化的設(shè)計降低信息瀏覽效率是必然的,所以它只適合做局部的視覺強化,來加強用戶對特定區(qū)域的感知。

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

只是,這些圖標(biāo)開始在脫離運營活動的狀態(tài)下,也開始使用非扁平模式,那就不再是運營設(shè)計師的工作職責(zé),而是 UI 設(shè)計師們繞不過去的檻了(知識盲區(qū))!

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

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

擬物和輕擬物的認識

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

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

這種圖標(biāo)單看起來確實很好看、細致。但是,把它丟進我們當(dāng)前的頁面中是非常違和的,因為它們細節(jié)實在太多了,而且畫起來非常耗時間,不利于項目整體的推進。

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

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

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

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

餓了么、美團都在用的輕擬物風(fēng)格,到底是什么?

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

所以,先掌握這些概念,到下一篇中,我們就會展開具體的技法講解和演示了。

結(jié)尾

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

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

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

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔