2022-7-29 純純
在今天的 UI 設(shè)計(jì)領(lǐng)域,由扁平化設(shè)計(jì)風(fēng)格占據(jù)主導(dǎo)地位,已經(jīng)是無可辯駁的事實(shí)了。扁平化應(yīng)用除了提升用戶獲取信息的效率外,對(duì)設(shè)計(jì)師而言就是設(shè)計(jì)的難度大大降低了。
一個(gè)界面的 UI 視覺元素,僅僅只需要圖片素材、矢量圖標(biāo)、幾何、文字,UI 設(shè)計(jì)師的工作僅僅是對(duì)內(nèi)容進(jìn)行組織和排版,涉及到原創(chuàng)的也僅僅只有少量的圖標(biāo)(大多數(shù)人還畫不好)。
這種狀態(tài)持續(xù)了很多年,看起來歲月一片靜好。
但是,這兩年市場(chǎng)發(fā)出了一些不同的聲音,那就是打破純扁平風(fēng)格的 UI 風(fēng)格、元素開始越來越盛行了。
比如新擬態(tài)風(fēng)格在年初炒了一波熱度,各大平臺(tái)和公眾號(hào)都鋪天蓋地的發(fā)文和介紹,介紹它的設(shè)計(jì)理念和設(shè)計(jì)方法。
還有就是以餓了么、美團(tuán)為首的國民級(jí)應(yīng)用在主頁顯眼的位置里使用極具識(shí)別性的擬物圖標(biāo),引起設(shè)計(jì)圈的熱議。
首先講講新擬態(tài)設(shè)計(jì),之所以之前只字不提,是因?yàn)槲覍?duì)這個(gè)風(fēng)格實(shí)在沒什么好感,有種對(duì)純擬物借尸還魂的味道,且它的樣式對(duì)于信息密度高的應(yīng)用是完全不適用的,只能活在飛機(jī)稿里。
而國內(nèi)大型應(yīng)用開始在實(shí)際項(xiàng)目中上線擬物圖標(biāo),意義就不一樣了,證明這樣的設(shè)計(jì)是經(jīng)過幾個(gè)大廠團(tuán)隊(duì)認(rèn)可,且有共識(shí)的。
當(dāng)然,這并不因?yàn)榇髲S用了就無腦推崇。而是純扁平的設(shè)計(jì)已經(jīng)越來越難滿足部分需要強(qiáng)視覺效果的頁面設(shè)計(jì)了。
今天的互聯(lián)網(wǎng)和過去不一樣,用戶的增長留存不再是過去一樣通過裂變和口碑完成,一個(gè)產(chǎn)品只要認(rèn)真打磨體驗(yàn)、功能就能獲得用戶的青睞和駐留。用戶的精力時(shí)間是固定的,而互聯(lián)網(wǎng)產(chǎn)品又層出不窮,佛系的等待用戶臨幸是沒有出路,這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場(chǎng)。
佛系不行,當(dāng)舔狗更不行(成本太高),所以今天大型產(chǎn)品都在對(duì)待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來越高,運(yùn)營活動(dòng)越來越密集,廣告和強(qiáng)提示也越來越多。比如剛打開了三個(gè)應(yīng)用,進(jìn)入的首頁大家自己意會(huì)……
有點(diǎn)扯遠(yuǎn)了,回到話題上。在這種掠奪用戶注意力的思路指引下,再做所謂的性冷淡、大留白、極簡風(fēng)就不會(huì)合適。當(dāng)對(duì)扁平的視覺效果已經(jīng)開發(fā)到極限以后,那么進(jìn)一步在一些細(xì)節(jié)處應(yīng)用擬物就成為必然的選擇。
而擬物的應(yīng)用并不可能鋪設(shè)到整個(gè)應(yīng)用中去,因?yàn)橥耆珨M物化的設(shè)計(jì)降低信息瀏覽效率是必然的,所以它只適合做局部的視覺強(qiáng)化,來加強(qiáng)用戶對(duì)特定區(qū)域的感知。
最常見的需要被凸出的要素,就是首頁中應(yīng)用的快速入口圖標(biāo)、分類圖標(biāo)和底部導(dǎo)航欄圖標(biāo)了。這些區(qū)域長期受運(yùn)營活動(dòng)支配,相信大家已經(jīng)很習(xí)慣了。
只是,這些圖標(biāo)開始在脫離運(yùn)營活動(dòng)的狀態(tài)下,也開始使用非扁平模式,那就不再是運(yùn)營設(shè)計(jì)師的工作職責(zé),而是 UI 設(shè)計(jì)師們繞不過去的檻了(知識(shí)盲區(qū))!
且除了 APP 外,其它領(lǐng)域?qū)τ跀M物設(shè)計(jì)的需求也會(huì)開始逐漸提升,尤其是目前越來越復(fù)(fu)雜(kua)的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。
作為新世代的 UI 設(shè)計(jì)師,多數(shù)人對(duì)擬物的設(shè)計(jì)可以說是完全空白的狀態(tài),所以是時(shí)候要重拾擬物設(shè)計(jì)這個(gè)傳統(tǒng)藝能了。
前面我有提到,擬物主要應(yīng)用在關(guān)鍵的圖標(biāo)上,但應(yīng)用的擬物風(fēng)格并不是過去我們追求的那種極其真實(shí)、復(fù)雜的擬物,而是經(jīng)過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看,過去優(yōu)秀的擬物圖標(biāo)和設(shè)計(jì)案例,它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造,甚至?xí)浅M暾谋憩F(xiàn)物體表面的材質(zhì)和肌理。
這種圖標(biāo)單看起來確實(shí)很好看、細(xì)致。但是,把它丟進(jìn)我們當(dāng)前的頁面中是非常違和的,因?yàn)樗鼈兗?xì)節(jié)實(shí)在太多了,而且畫起來非常耗時(shí)間,不利于項(xiàng)目整體的推進(jìn)。
所以為了符合畫面的質(zhì)感,又要考慮項(xiàng)目效率,輕擬物這個(gè)概念開始被提出和應(yīng)用,作為一個(gè)折中的解決方案。
它和純擬物設(shè)計(jì)的共同點(diǎn)在于,也表現(xiàn)光影、結(jié)構(gòu)、透視,但它盡可能精簡了輪廓的復(fù)雜度、肌理和層級(jí),呈現(xiàn)出更概念化、理想化、易于辨識(shí)的擬物圖形。
所以,我們主要去學(xué)習(xí)的內(nèi)容是輕擬物的設(shè)計(jì)方法,而不是徒手畫照片(這個(gè)可以緩緩)!
而輕擬物雖然 “輕”,但它依舊也還具備擬物的基本特征,是有實(shí)體質(zhì)感的。但是扁平從插畫到圖標(biāo)設(shè)計(jì)經(jīng)過多年的改版,有各種嘆(hua)為(li)觀(hu)止(shao)的設(shè)計(jì),應(yīng)用大量的漸變、投影、模糊的效果,比如下圖案例。
這在我們之前圖標(biāo)的系列干貨中有提過,這類設(shè)計(jì)是面性圖標(biāo)的進(jìn)階版,它們依舊屬于扁平風(fēng)格的范疇之內(nèi),不能和輕擬物劃上等號(hào)。
對(duì)于這幾年才開始學(xué)習(xí) UI 設(shè)計(jì)的新手來講,擬物已經(jīng)變成一個(gè)很陌生的事物,這對(duì)行業(yè)來說是比較悲哀的一件事。
因?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 使用的深入探索。
可以說,自從擬物不成為必修題材以后,九成以上的UI設(shè)計(jì)師是不會(huì)用 PS 的,這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物,所以它的核心基礎(chǔ)和擬物設(shè)計(jì)師一致的,只是省略了更多復(fù)雜的細(xì)節(jié)。而對(duì)于整個(gè)擬物的體系來講,最重要的東西實(shí)際上只有2個(gè),形體、光影。
形體的表現(xiàn),就是對(duì)圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標(biāo)分享中,有寫過面性圖標(biāo)進(jìn)階的設(shè)計(jì)中,可以包含更多的細(xì)節(jié)、內(nèi)部元素,而不是僅僅只有外輪廓。
輕擬物的形體設(shè)計(jì)就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上,即你要把這個(gè)圖形的內(nèi)容有明確的示意并畫出來,而不是用抽象的圖形做填充而已。
比如大眾點(diǎn)評(píng)的快速入口圖標(biāo),雖然看起來很復(fù)雜,但是那是配色上的復(fù)雜,而不是形體輪廓上的具象化。
換句話說,擬物插畫的圖形基底,類似扁平插畫風(fēng)格圖標(biāo),不能表現(xiàn)得太抽象,也不能增加過多的細(xì)節(jié),需要一種恰到好處的平衡(玄學(xué)),這就非??简?yàn)設(shè)計(jì)師的判斷和經(jīng)驗(yàn)了。
并且,在描繪輪廓的時(shí)候,新手盡可能的采取正視圖來進(jìn)行繪制,而不要通過俯視圖、側(cè)視圖、斜視圖等方法來呈現(xiàn)圖形的多個(gè)面,這樣難度會(huì)大幅度上升,比如下面這種情況。
除了形體外,光影就是整個(gè)擬物的靈魂了。
當(dāng)一個(gè)完整的圖形完成填充色時(shí),它是扁平圖案,如果完成光影呈現(xiàn)的時(shí)候,它就是三維空間的立體圖形,比如下面這個(gè)圓的案例:
在擬物的設(shè)計(jì)中,我們對(duì)光影的定義是至關(guān)重要的,所以首先就是針對(duì)該圖形確定光源的方向,是上方、前方、左上還右上,這對(duì)后續(xù)的設(shè)計(jì)有一連串的影響。
如果對(duì)光影沒有正確的解釋,那么在制作細(xì)節(jié)的漸變角度、投影的使用上,就會(huì)產(chǎn)生錯(cuò)誤的設(shè)計(jì),造成光影視覺沖突和矛盾。
在創(chuàng)建了光源以后,物體受到光線的影響就會(huì)產(chǎn)生明暗面和投影,可以簡單劃分成4個(gè)部分,高光、亮部、暗部、投影。
這和我們學(xué)習(xí)的素描有一定的差異,美術(shù)中對(duì)光影的表現(xiàn)害會(huì)包含明暗交界、反光面,這對(duì)于輕擬物的來說負(fù)擔(dān)太重,所以我們要去掉它們,接下來重點(diǎn)講講高光和暗部。
高光是物體作為受光物對(duì)光源的直接反映,比如人像攝影中人眼眸中的高光就是對(duì)閃光燈的鏡像表現(xiàn),再或者一拳超人中男主光頭上長期存在的高光配飾(多數(shù)動(dòng)畫的光頭角色都有)……
高光可以非常有效的增加畫面的層次和對(duì)比性,讓物體看上去更有沖擊力和觀賞性。
而暗部,則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意,因?yàn)椴辉谑芄饷妫灶伾珪?huì)變暗。在實(shí)際操作過程中,我們可以通過漸變的方式開控制明暗的表達(dá),但盡量不要直接手動(dòng)設(shè)置一個(gè)漸變色出來,而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個(gè)特性以后,下面,我們就通過一個(gè)實(shí)例來講解一下輕擬物設(shè)計(jì)的過程吧。
作為輕擬物的演示,直接畫個(gè)圖標(biāo)講一遍怎么操作是沒什么用的,我們要從實(shí)際場(chǎng)景出發(fā),用它來解決一些真實(shí)的問題。比如看看下面的 KFC 官方 APP 首頁:
總結(jié)它的問題,不難發(fā)現(xiàn)首頁頂部業(yè)務(wù)功能太多了,頂部圖標(biāo)就包含30個(gè)(加滑動(dòng)的),雖然每個(gè)模塊圖標(biāo)單看都沒有硬傷,但堆積到一起,就使得頂部缺乏足夠的信息層級(jí)和對(duì)比性。
我們要做的,就是通過輕擬物的方式,調(diào)整快速入口最大的三個(gè)圖標(biāo),凸顯它們的重要性以及和其它圖標(biāo)的視覺差異性。先從第一個(gè)圖標(biāo)開始,講解一下如何完成輕擬物化設(shè)計(jì)的升級(jí)。
第一步:確認(rèn)輪廓造型
第一個(gè)操作,即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動(dòng),包括加粗車頭,減少高度,增加車燈等。并對(duì)每一個(gè)模塊進(jìn)行純色的填充,定義它們的色彩和做出區(qū)分。
形體的重要性在于要對(duì)圖形本身有比較合理的呈現(xiàn),不要讓比例失調(diào)和圖不達(dá)意。
第二步:完善圖形細(xì)節(jié)
這一步,就要在原有基礎(chǔ)上,進(jìn)行下一步的深入。包括對(duì)一些細(xì)節(jié)交代得更清楚一點(diǎn),增加一些有趣的小元素等等,完善它的具體樣式。
第三步:增加基礎(chǔ)的暗部表現(xiàn)
在這里,我們就要開始為圖標(biāo)增加高光了,高光從右上角打下來,那么有疊加關(guān)系的元素就會(huì)產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現(xiàn),讓整體的立體感稍強(qiáng)。
這一步在軟件中主要使用蒙版功能,通過蒙版在背景上方創(chuàng)建一個(gè)圖層,然后添加深色的透明度漸變,就可以表現(xiàn)出對(duì)暗部和投影的效果。
第四步:增加高光效果
接著,就是最后一步,將高光添加到畫面中來,講整個(gè)圖標(biāo)的質(zhì)感進(jìn)行拉升,
通過上面的演示,我們可以將整個(gè)擬物設(shè)計(jì)流程精簡成:
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細(xì)節(jié)樣式增加趣味性和適當(dāng)?shù)臄M真感
3.通過蒙版添加暗部來完善表現(xiàn)的明暗和層級(jí)關(guān)系
4.添加高光元素作為圖形的亮點(diǎn),拉升層次感
然后,通過這樣的步驟,再來完成后續(xù)的兩個(gè)圖形,拆解完的效果如下。
然后,再用這三個(gè)修改后圖標(biāo)套用進(jìn)原來的頁面,并做出對(duì)應(yīng)的修改,再來看看前后對(duì)比:
通過這個(gè)對(duì)比,我們就可以看出在這個(gè)復(fù)雜的首頁頭部中,輕擬物風(fēng)格可以從一眾平面中被凸顯出來,且不會(huì)顯得太突兀和復(fù)雜。
而這就是輕擬物在項(xiàng)目設(shè)計(jì)中的實(shí)際作用,當(dāng)畫面元素已經(jīng)開始超負(fù)荷,且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時(shí),就是輕擬物登場(chǎng)的時(shí)候了。
最后的總結(jié),學(xué)習(xí)輕擬物就是增加我們完成界面視覺輸出的可能性,為視覺創(chuàng)意增加一些儲(chǔ)備彈藥,以應(yīng)對(duì)越來越復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。
我們只在這篇羅列了制作的順序和思路,并沒有把軟件的操作完全放出來,一方面是因?yàn)闀r(shí)間上來不及(偷懶),另一方面是希望大家不會(huì)被軟件的使用框柱。只要概念清楚了,那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系
作者:百度MEUX 來源:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com