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