輕擬物的核心知識

輕擬物本身也是擬物,所以它的核心基礎和擬物設計師一致的,只是省略了更多復雜的細節。而對于整個(gè)擬物的體系來(lái)講,最重要的東西實(shí)際上只有2個(gè),形體、光影。

1. 形體表現

形體的表現,就是對圖形外輪廓的樣式的呈現。在過(guò)去我們寫(xiě)的圖標分享中,有寫(xiě)過(guò)面性圖標進(jìn)階的設計中,可以包含更多的細節、內部元素,而不是僅僅只有外輪廓。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

輕擬物的形體設計就要處于進(jìn)階面性圖標或者更難的水平之上,即你要把這個(gè)圖形的內容有明確的示意并畫(huà)出來(lái),而不是用抽象的圖形做填充而已。

比如大眾點(diǎn)評的快速入口圖標,雖然看起來(lái)很復雜,但是那是配色上的復雜,而不是形體輪廓上的具象化。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

換句話(huà)說(shuō),擬物插畫(huà)的圖形基底,類(lèi)似扁平插畫(huà)風(fēng)格圖標,不能表現得太抽象,也不能增加過(guò)多的細節,需要一種恰到好處的平衡(玄學(xué)),這就非??简炘O計師的判斷和經(jīng)驗了。

并且,在描繪輪廓的時(shí)候,新手盡可能的采取正視圖來(lái)進(jìn)行繪制,而不要通過(guò)俯視圖、側視圖、斜視圖等方法來(lái)呈現圖形的多個(gè)面,這樣難度會(huì )大幅度上升,比如下面這種情況。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

2. 光影表現

除了形體外,光影就是整個(gè)擬物的靈魂了。

當一個(gè)完整的圖形完成填充色時(shí),它是扁平圖案,如果完成光影呈現的時(shí)候,它就是三維空間的立體圖形,比如下面這個(gè)圓的案例:

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

在擬物的設計中,我們對光影的定義是至關(guān)重要的,所以首先就是針對該圖形確定光源的方向,是上方、前方、左上還右上,這對后續的設計有一連串的影響。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

如果對光影沒(méi)有正確的解釋?zhuān)敲丛谥谱骷毠澋臐u變角度、投影的使用上,就會(huì )產(chǎn)生錯誤的設計,造成光影視覺(jué)沖突和矛盾。

在創(chuàng )建了光源以后,物體受到光線(xiàn)的影響就會(huì )產(chǎn)生明暗面和投影,可以簡(jiǎn)單劃分成4個(gè)部分,高光、亮部、暗部、投影。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

這和我們學(xué)習的素描有一定的差異,美術(shù)中對光影的表現還會(huì )包含明暗交界、反光面,這對于輕擬物的來(lái)說(shuō)負擔太重,所以我們要去掉它們,接下來(lái)重點(diǎn)講講高光和暗部。

高光是物體作為受光物對光源的直接反映,比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現,再或者一拳超人中男主光頭上長(cháng)期存在的高光配飾(多數動(dòng)畫(huà)的光頭角色都有)……





大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

高光可以非常有效的增加畫(huà)面的層次和對比性,讓物體看上去更有沖擊力和觀(guān)賞性。

而暗部,則完全是為了正常表現物體結構和弧度增加的示意,因為不在受光面,所以顏色會(huì )變暗。在實(shí)際操作過(guò)程中,我們可以通過(guò)漸變的方式開(kāi)控制明暗的表達,但盡量不要直接手動(dòng)設置一個(gè)漸變色出來(lái),而是為它疊加暗部或亮部的黑白透明度漸變。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

了解這幾個(gè)特性以后,下面,我們就通過(guò)一個(gè)實(shí)例來(lái)講解一下輕擬物設計的過(guò)程吧。

輕擬物實(shí)例演練

作為輕擬物的演示,直接畫(huà)個(gè)圖標講一遍怎么操作是沒(méi)什么用的,我們要從實(shí)際場(chǎng)景出發(fā),用它來(lái)解決一些真實(shí)的問(wèn)題。比如看看下面的 KFC 官方 APP 首頁(yè):

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

總結它的問(wèn)題,不難發(fā)現首頁(yè)頂部業(yè)務(wù)功能太多了,頂部圖標就包含30個(gè)(加滑動(dòng)的),雖然每個(gè)模塊圖標單看都沒(méi)有硬傷,但堆積到一起,就使得頂部缺乏足夠的信息層級和對比性。

我們要做的,就是通過(guò)輕擬物的方式,調整快速入口最大的三個(gè)圖標,凸顯它們的重要性以及和其它圖標的視覺(jué)差異性。先從第一個(gè)圖標開(kāi)始,講解一下如何完成輕擬物化設計的升級。

第一步:確認輪廓造型

第一個(gè)操作,即確定圖標本身的輪廓。根據原有圖標的樣式我做了一些改動(dòng),包括加粗車(chē)頭,減少高度,增加車(chē)燈等。并對每一個(gè)模塊進(jìn)行純色的填充,定義它們的色彩和做出區分。

形體的重要性在于要對圖形本身有比較合理的呈現,不要讓比例失調和圖不達意。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

第二步:完善圖形細節

這一步,就要在原有基礎上,進(jìn)行下一步的深入。包括對一些細節交代得更清楚一點(diǎn),增加一些有趣的小元素等等,完善它的具體樣式。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

第三步:增加基礎的暗部表現

在這里,我們就要開(kāi)始為圖標增加高光了,高光從右上角打下來(lái),那么有疊加關(guān)系的元素就會(huì )產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現,讓整體的立體感稍強。

這一步在軟件中主要使用蒙版功能,通過(guò)蒙版在背景上方創(chuàng )建一個(gè)圖層,然后添加深色的透明度漸變,就可以表現出對暗部和投影的效果。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

第四步:增加高光效果

接著(zhù),就是最后一步,將高光添加到畫(huà)面中來(lái),將整個(gè)圖標的質(zhì)感進(jìn)行拉升。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

通過(guò)上面的演示,我們可以將整個(gè)擬物設計流程精簡(jiǎn)成:

  • 確定圖形基本輪廓、外形比例、模塊色彩

  • 豐富細節樣式增加趣味性和適當的擬真感

  • 通過(guò)蒙版添加暗部來(lái)完善表現的明暗和層級關(guān)系

  • 添加高光元素作為圖形的亮點(diǎn),拉升層次感

然后,通過(guò)這樣的步驟,再來(lái)完成后續的兩個(gè)圖形,拆解完的效果如下。

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

然后,再用這三個(gè)修改后圖標套用進(jìn)原來(lái)的頁(yè)面,并做出對應的修改,再來(lái)看看前后對比:

大廠(chǎng)都在用的輕擬物設計風(fēng)格,本文教你四步完成!

通過(guò)這個(gè)對比,我們就可以看出在這個(gè)復雜的首頁(yè)頭部中,輕擬物風(fēng)格可以從一眾平面中被凸顯出來(lái),且不會(huì )顯得太突兀和復雜。

而這就是輕擬物在項目設計中的實(shí)際作用,當畫(huà)面元素已經(jīng)開(kāi)始超負荷,且容易導致同質(zhì)化的審美疲勞和主次不清時(shí),就是輕擬物登場(chǎng)的時(shí)候了。

總結

最后的總結,學(xué)習輕擬物就是增加我們完成界面視覺(jué)輸出的可能性,為視覺(jué)創(chuàng )意增加一些儲備彈藥,以應對越來(lái)越復雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。

我們只在這篇羅列了制作的順序和思路,并沒(méi)有把軟件的操作完全放出來(lái),一方面是因為時(shí)間上來(lái)不及,另一方面是希望大家不會(huì )被軟件的使用框住。只要概念清楚了,那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來(lái)。