2020-9-2 資深UI設(shè)計(jì)者
輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計(jì)師一致的，只是省略了更多復(fù)雜的細(xì)節(jié)。而對(duì)于整個(gè)擬物的體系來(lái)講，最重要的東西實(shí)際上只有2個(gè)，形體、光影。
1. 形體表現(xiàn)
形體的表現(xiàn)，就是對(duì)圖形外輪廓的樣式的呈現(xiàn)。在過(guò)去我們寫(xiě)的圖標(biāo)分享中，有寫(xiě)過(guò)面性圖標(biāo)進(jìn)階的設(shè)計(jì)中，可以包含更多的細(xì)節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設(shè)計(jì)就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上，即你要把這個(gè)圖形的內(nèi)容有明確的示意并畫(huà)出來(lái)，而不是用抽象的圖形做填充而已。
比如大眾點(diǎn)評(píng)的快速入口圖標(biāo)，雖然看起來(lái)很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。
換句話說(shuō)，擬物插畫(huà)的圖形基底，類(lèi)似扁平插畫(huà)風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過(guò)多的細(xì)節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非常考驗(yàn)設(shè)計(jì)師的判斷和經(jīng)驗(yàn)了。
并且，在描繪輪廓的時(shí)候，新手盡可能的采取正視圖來(lái)進(jìn)行繪制，而不要通過(guò)俯視圖、側(cè)視圖、斜視圖等方法來(lái)呈現(xiàn)圖形的多個(gè)面，這樣難度會(huì)大幅度上升，比如下面這種情況。
2. 光影表現(xiàn)
除了形體外，光影就是整個(gè)擬物的靈魂了。
當(dāng)一個(gè)完整的圖形完成填充色時(shí)，它是扁平圖案，如果完成光影呈現(xiàn)的時(shí)候，它就是三維空間的立體圖形，比如下面這個(gè)圓的案例：
在擬物的設(shè)計(jì)中，我們對(duì)光影的定義是至關(guān)重要的，所以首先就是針對(duì)該圖形確定光源的方向，是上方、前方、左上還右上，這對(duì)后續(xù)的設(shè)計(jì)有一連串的影響。
如果對(duì)光影沒(méi)有正確的解釋?zhuān)敲丛谥谱骷?xì)節(jié)的漸變角度、投影的使用上，就會(huì)產(chǎn)生錯(cuò)誤的設(shè)計(jì)，造成光影視覺(jué)沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線的影響就會(huì)產(chǎn)生明暗面和投影，可以簡(jiǎn)單劃分成4個(gè)部分，高光、亮部、暗部、投影。
這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對(duì)光影的表現(xiàn)還會(huì)包含明暗交界、反光面，這對(duì)于輕擬物的來(lái)說(shuō)負(fù)擔(dān)太重，所以我們要去掉它們，接下來(lái)重點(diǎn)講講高光和暗部。
高光是物體作為受光物對(duì)光源的直接反映，比如人像攝影中人眼眸中的高光就是對(duì)閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長(zhǎng)期存在的高光配飾（多數(shù)動(dòng)畫(huà)的光頭角色都有）……
高光可以非常有效的增加畫(huà)面的層次和對(duì)比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因?yàn)椴辉谑芄饷?，所以顏色?huì)變暗。在實(shí)際操作過(guò)程中，我們可以通過(guò)漸變的方式開(kāi)控制明暗的表達(dá)，但盡量不要直接手動(dòng)設(shè)置一個(gè)漸變色出來(lái)，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個(gè)特性以后，下面，我們就通過(guò)一個(gè)實(shí)例來(lái)講解一下輕擬物設(shè)計(jì)的過(guò)程吧。
作為輕擬物的演示，直接畫(huà)個(gè)圖標(biāo)講一遍怎么操作是沒(méi)什么用的，我們要從實(shí)際場(chǎng)景出發(fā)，用它來(lái)解決一些真實(shí)的問(wèn)題。比如看看下面的 KFC 官方 APP 首頁(yè)：
總結(jié)它的問(wèn)題，不難發(fā)現(xiàn)首頁(yè)頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個(gè)（加滑動(dòng)的），雖然每個(gè)模塊圖標(biāo)單看都沒(méi)有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級(jí)和對(duì)比性。
我們要做的，就是通過(guò)輕擬物的方式，調(diào)整快速入口最大的三個(gè)圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺(jué)差異性。先從第一個(gè)圖標(biāo)開(kāi)始，講解一下如何完成輕擬物化設(shè)計(jì)的升級(jí)。
第一步：確認(rèn)輪廓造型
第一個(gè)操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動(dòng)，包括加粗車(chē)頭，減少高度，增加車(chē)燈等。并對(duì)每一個(gè)模塊進(jìn)行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對(duì)圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達(dá)意。
第二步：完善圖形細(xì)節(jié)
這一步，就要在原有基礎(chǔ)上，進(jìn)行下一步的深入。包括對(duì)一些細(xì)節(jié)交代得更清楚一點(diǎn)，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎(chǔ)的暗部表現(xiàn)
在這里，我們就要開(kāi)始為圖標(biāo)增加高光了，高光從右上角打下來(lái)，那么有疊加關(guān)系的元素就會(huì)產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強(qiáng)。
這一步在軟件中主要使用蒙版功能，通過(guò)蒙版在背景上方創(chuàng)建一個(gè)圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對(duì)暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫(huà)面中來(lái)，將整個(gè)圖標(biāo)的質(zhì)感進(jìn)行拉升。
通過(guò)上面的演示，我們可以將整個(gè)擬物設(shè)計(jì)流程精簡(jiǎn)成：
然后，通過(guò)這樣的步驟，再來(lái)完成后續(xù)的兩個(gè)圖形，拆解完的效果如下。
然后，再用這三個(gè)修改后圖標(biāo)套用進(jìn)原來(lái)的頁(yè)面，并做出對(duì)應(yīng)的修改，再來(lái)看看前后對(duì)比：
通過(guò)這個(gè)對(duì)比，我們就可以看出在這個(gè)復(fù)雜的首頁(yè)頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來(lái)，且不會(huì)顯得太突兀和復(fù)雜。
而這就是輕擬物在項(xiàng)目設(shè)計(jì)中的實(shí)際作用，當(dāng)畫(huà)面元素已經(jīng)開(kāi)始超負(fù)荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時(shí)，就是輕擬物登場(chǎng)的時(shí)候了。
最后的總結(jié)，學(xué)習(xí)輕擬物就是增加我們完成界面視覺(jué)輸出的可能性，為視覺(jué)創(chuàng)意增加一些儲(chǔ)備彈藥，以應(yīng)對(duì)越來(lái)越復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。
我們只在這篇羅列了制作的順序和思路，并沒(méi)有把軟件的操作完全放出來(lái)，一方面是因?yàn)闀r(shí)間上來(lái)不及，另一方面是希望大家不會(huì)被軟件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來(lái)。
文章來(lái)源：站酷 作者：超人的電話亭
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com