突破次元的設(shè)計(jì)思考——3D圖標(biāo)設(shè)計(jì)
在產(chǎn)品設(shè)計(jì)中,圖標(biāo)是一個(gè)非常重要的部分。有設(shè)計(jì)感的圖標(biāo)會(huì)增加用戶對產(chǎn)品的喜愛度,本文從六個(gè)角度介紹一種突破次元的圖標(biāo)設(shè)計(jì)——3D圖標(biāo)設(shè)計(jì)。
一、背景
QQ游戲中心經(jīng)過設(shè)計(jì)改版之后,我們重新設(shè)定了整體的世界觀——多彩的游戲宇宙。并且對多個(gè)模塊及內(nèi)容進(jìn)行了新的設(shè)計(jì)升級(jí),其中也包括重要的圖標(biāo)圖形。
因此基于目前較為完整的圖標(biāo)圖形,希望可以拓展出更多不一樣的設(shè)計(jì)內(nèi)容,并且可以應(yīng)用在不同的位置,例如空白頁、運(yùn)營內(nèi)容、背景等等。
基于目前的圖形可以很明顯的得到2個(gè)問題:圖標(biāo)的圖形整體相對簡單,延展使用比較受限;2D圖標(biāo)的視覺沖擊力較弱,較難滿足設(shè)計(jì)氛圍的表現(xiàn)。
3D作為2020的主流設(shè)計(jì)趨勢之一,可以很好的表達(dá)設(shè)計(jì)氛圍。因此想嘗試跨次元的設(shè)計(jì)方式,從3D圖形的角度去思考,嘗試更多可能性。
下面主要是分享我在制作3D圖標(biāo)中的一些方法和流程,以及2D與3D圖形設(shè)計(jì)中思考的差異性,希望可以跟大家互相學(xué)習(xí),一起探討這方面的設(shè)計(jì)。
二、整體的流程及軟件
雖然是3D的圖標(biāo),但實(shí)際上使用到的軟件包括有:Cinema 4D(C4D)、Sketch、Photoshop(PS)、illustrator(AI)。
整體的大概流程:
- Sketch:繪制2D圖標(biāo);
- AI:轉(zhuǎn)換路徑(C4D能夠識(shí)別AI8.0版本的路徑);
- C4D:建模、渲染、動(dòng)畫;
- PS:后期輸出的調(diào)整,包括飽和度、亮度、裁切等;
- AE:最后合成所有動(dòng)畫,配置音效,最后輸出完整視頻。
三、2D向3D轉(zhuǎn)化的基本原則
3D與2D最大的差別在于多一個(gè)維度來表達(dá)圖形,因此我們在2D向3D轉(zhuǎn)化的過程中,需要思考一些基本的原則,并且結(jié)合這些規(guī)則,降低3D圖標(biāo)與2D圖標(biāo)違和感。在這次的3D圖標(biāo)中我總結(jié)了以下幾條基本規(guī)則。
1. 圓變球
在3D軟件中表達(dá)圓有2種方式:球體和圓柱體。在實(shí)際的設(shè)計(jì)中,我們需要根據(jù)實(shí)際情況判斷是否變成球體或者圓柱體,這里建議單體呈現(xiàn)的圓形設(shè)計(jì)成球體,在這種情況下球體相比圓柱體更能表達(dá)圓形的視覺感受。
例如下面氣泡的例子,球體化的表現(xiàn)比圓柱體化的表現(xiàn)更加飽滿,光影效果更加豐富。
2. 方變塊
與上面的規(guī)則比較接近。當(dāng)我們在2D圖標(biāo)中使用矩形之類的圖形,建議使用立方體來表達(dá)。優(yōu)點(diǎn):立方體可以增加圖標(biāo)上的細(xì)節(jié)表現(xiàn);增加厚度更有利于光影的表達(dá)。
例如下面禮物的圖標(biāo),我們在實(shí)際的3D場景下應(yīng)該更貼合現(xiàn)實(shí)生活中的認(rèn)知,設(shè)計(jì)成禮物盒子的效果。
3. 結(jié)合實(shí)際認(rèn)知
除以上的2種建議之外,我們在實(shí)際建模的時(shí)候還需要結(jié)合實(shí)際認(rèn)知而定。例如金幣、游戲卡的設(shè)計(jì)應(yīng)該是帶有厚度的片形;錢包設(shè)計(jì)成折疊的效果。
4. 適當(dāng)簡化圖形
2D圖標(biāo)向3D圖標(biāo)的轉(zhuǎn)換過程中,需要適當(dāng)進(jìn)行簡化,一些不必要的內(nèi)容可以適當(dāng)進(jìn)行刪減。
主要的目的是:降低模型的復(fù)雜程度,“過度細(xì)致”的模型在實(shí)際渲染中可能出現(xiàn)反效果;減少面和減少光的互相反射作用,提升視覺的簡潔性。
5. 增強(qiáng)空間思維
2D的圖標(biāo)只有一個(gè)平面,因此大部分情況下是一種“紙片性”的思維,常規(guī)的2D向3D的轉(zhuǎn)換思維是增加厚度,但實(shí)際上出來的效果并不理想,因此在轉(zhuǎn)換的過程中,需要使用空間的思維去思考,在3維的空間中應(yīng)該是怎么樣的。
例如下載和收件箱的圖標(biāo),常規(guī)的思維可能是在2D的圖標(biāo)上增加厚度,但轉(zhuǎn)換成空間思維就是讓其具有立體感和空間感的形體。
6. 圖標(biāo)狀態(tài)補(bǔ)充
在實(shí)際建模的中會(huì)發(fā)現(xiàn),很多模型在靜態(tài)下是可以進(jìn)行簡單處理的,但結(jié)合動(dòng)態(tài)或?qū)嶋H認(rèn)知,就需要相關(guān)細(xì)節(jié)狀態(tài)補(bǔ)充。
例如禮物和寶箱圖標(biāo)的開蓋效果,因此把實(shí)際的蓋子和盒子/箱子的模型做出來,以便于動(dòng)畫的實(shí)際表達(dá)。
四、基于圖標(biāo)的圖形分類
在進(jìn)入C4D之前,需要清楚不同圖形可以使用什么方式建模,因此我們可以進(jìn)行一個(gè)簡單的分類,分為:常規(guī)圖形和異形。
兩種圖形在建模中的方式會(huì)有一些小差異,當(dāng)然一個(gè)圖標(biāo)也可能包含這兩種類型,因此實(shí)際操作中可以靈活處理。
1. 常規(guī)形:使用基礎(chǔ)物體建模
部分簡單的有規(guī)則的圖形,可以直接使用C4D的基礎(chǔ)物體(例如:立方體、球體、柱狀體、錐體等),通過對基礎(chǔ)物體的調(diào)整后得到模型,例如下面的圖形。
案例展示:
2. 異形:AI路徑+擠出
在實(shí)際操作的過程中發(fā)現(xiàn)部分模型較難通過基礎(chǔ)形調(diào)整得到,或是直接建模會(huì)比較耗時(shí)。因此我們可以導(dǎo)入AI路徑再擠出的方式來得到我們的模型。例如下面的圖形:
案例展示:
五、建模實(shí)操
基于以上的以上2種類型的圖形,這里分享一下制作的過程和心得??赡懿粔蛉妫M蠹铱梢砸黄饋硌a(bǔ)充互相學(xué)習(xí)。
1. 對齊中心點(diǎn)
基礎(chǔ)建模對齊中心軸點(diǎn)是一切開始的重中之重,這里會(huì)涉及到很多后續(xù)的調(diào)整和其他命令的應(yīng)用(例如擠出、對稱等命令)。例如一些中高階的人物建模也是非常依賴中心點(diǎn)對齊來實(shí)現(xiàn)對稱命令的。
2. 結(jié)合圖像
在C4D視圖本身具有多視圖,可以結(jié)合不同視圖導(dǎo)入不同視角的平面結(jié)構(gòu)進(jìn)行制作,常見情況下的建??梢詫?dǎo)入三視圖(例如角色、人物之類的)。而圖標(biāo)相對來說是很簡單的,所以這里只應(yīng)用正面視圖即可,其他的視角可以自行腦補(bǔ)后制作。結(jié)合圖像的好處:
- 更加直觀的看到圖標(biāo)造型,提升建模效率;
- 對于模型尺寸的把握更加明確,我們可以依據(jù)實(shí)際設(shè)計(jì)的大小,在C4D進(jìn)行同樣的設(shè)定;
- 方便后續(xù)路徑對齊的使用(若導(dǎo)入路徑未對齊到中心點(diǎn),可以通過手動(dòng)調(diào)整)
操作流程:正視圖下快捷鍵shift+V調(diào)出視圖背景——選擇背景——添加圖像。或在視圖選項(xiàng)中調(diào)出,然后配置即可。
3. 結(jié)合路徑
如上圖標(biāo)類型中的描述,部分異形的圖標(biāo)如果直接在C4D中繪制會(huì)相對耗時(shí),因此我們可以結(jié)合路徑的方式,再使用擠出的命令來實(shí)現(xiàn)我們想要的模型,這樣可以大大提升異形物體建模的效率。C4D中對AI的圖層只會(huì)讀取顏色的邊緣,然后生成路徑。因此在AI中編輯的路徑,依據(jù)實(shí)際的情況選擇填充或者描邊,然后再拖拽進(jìn)C4D。
如下產(chǎn)生的效果對比,左邊為填充圖形,右邊為描邊圖形。
操作流程:使用AI導(dǎo)出8.0版本的路徑——拖拽進(jìn)C4D——添加擠出命令——設(shè)置擠出高度及封頂樣式。
4. 使用變形器
一些簡單的形變可以通過變形器的應(yīng)用,得到我們想要的造型。例如下面的案例,外星人臉是在圓形的基礎(chǔ)上使用FFD進(jìn)行調(diào)整,而寶箱則在方形的基礎(chǔ)上使用錐化來達(dá)到圓弧的效果。
六、材質(zhì)及布光
C4D的渲染效果主要是依賴于材質(zhì)和燈光的配合,熟練者往往可以依靠經(jīng)驗(yàn)有效率的制作,但我們也可以通過鍛煉總結(jié)出一些常用的材質(zhì)參數(shù)或者布光的位置來提高效率。因此我也從這次的3D圖標(biāo)制作中總結(jié)了一套關(guān)于材質(zhì)和布光的方法。
1. 全局光照與天空配合
C4D場景的主光源我們可以通過全局光照+天空的方式來營造整體的氛圍,這組光的特點(diǎn)在于具有比較柔和的效果,并且模擬自然的環(huán)境光效。全局光照開啟后,需要依賴燈光、天空光來對物體進(jìn)行照射,如果設(shè)定后未增加燈光或者天空,在渲染時(shí)只能渲染出一片黑色(全局光照——主要是模擬真實(shí)的光照效果,通過光源投射到物體上再經(jīng)過無數(shù)次的反射和折射出來的效果,因此也能解釋為什么只加全局光照渲染不出來內(nèi)容)。
操作流程:渲染設(shè)置——效果——全局光照
添加天空增加天空作為基礎(chǔ)光照補(bǔ)充操作流程:地面快捷入口——選擇天空——添加材質(zhì)球——勾選發(fā)光——添加HDR貼圖。
下面通過一些案例對比來看看全局光照及天空的對比效果全局光照-開和關(guān)的差異從下面的案例我們可以明顯看到差別,全局光照關(guān)閉后的圖標(biāo)相對暗淡一些,整體圖標(biāo)的光反射也相對減弱了許多。
有無天空的差異天空有助于增強(qiáng)圖標(biāo)的光感,添加天空后整體圖標(biāo)的細(xì)節(jié)和質(zhì)感也相對更加豐富。相對,無天空整體圖標(biāo)質(zhì)感則有所下降。
天空是否增加HDR貼圖的差異添加HDR貼圖可以增強(qiáng)場景內(nèi)物體的環(huán)境反射,讓物體材質(zhì)更加豐富增強(qiáng)細(xì)節(jié)質(zhì)感。在一些強(qiáng)反射的場景下非常依賴HDR貼圖的使用。從以下案例對比,可以明顯看到差異性。
2. 燈光分布
整體添加三盞燈光來營造整體的場景氛圍。主要分為:主光(最強(qiáng))、補(bǔ)光(增強(qiáng)陰影面的亮度)、背光(補(bǔ)充背面環(huán)境的光源,增強(qiáng)環(huán)境光氛圍,勾勒輪廓)。在實(shí)際的場景中可以根據(jù)實(shí)際的反射效果和氛圍,調(diào)整燈光的位置、與物體的間距、明暗度。
燈光對于物體的作用會(huì)隨著顏色的差異,產(chǎn)生的光亮度也會(huì)有所差異,因此在實(shí)際的使用過程中,對于燈光的位置、反射的細(xì)節(jié)都可以進(jìn)行微調(diào)來達(dá)到最優(yōu)的效果。色相的對比:不同色相在同樣的燈光作用下產(chǎn)生的效果具有稍微較小。
明暗的對比:深色和淺色在同樣的燈光作用下產(chǎn)生的效果差別較大。
實(shí)際案例對比:從下面的實(shí)際案例對比可以明顯看出同樣燈光下不同色相的明顯差別,綠色的兩部產(chǎn)生過度曝光。因此可以通過調(diào)整燈光的距離或者亮度來解決這一問題(如上面燈光分布建議)。
3. 物體材質(zhì)
3D圖標(biāo)由于相對簡單,材質(zhì)上主要使用顏色和反射的配合就可以得到不錯(cuò)的質(zhì)感。當(dāng)然如果希望在質(zhì)感表現(xiàn)上更加豐富,亦可考慮增加其他的內(nèi)容項(xiàng)來進(jìn)行補(bǔ)充
1)顏色的設(shè)定
圖標(biāo)的顏色基本上與原圖標(biāo)的顏色保持一致,但部分顏色但實(shí)際渲染效果會(huì)存在些許差異,因此我們在材質(zhì)上也可以根據(jù)視覺效果進(jìn)行微調(diào),視覺上保持統(tǒng)一的顏色感受。例如禮物的圖標(biāo),如果按原來的顏色,亮部會(huì)過渡曝光,因此適當(dāng)提高了亮部顏色的飽和度。
2)顏色偏差
在3D的場景內(nèi)是通過各種光與顏色的反射而成的,因此即便同樣的顏色,在實(shí)際渲染出來的3D圖標(biāo)和2D圖標(biāo)也會(huì)存在一定顏色偏差。
4. 反射的設(shè)定
反射是本次3D圖標(biāo)中材質(zhì)非常重要的一環(huán),基本的效果都是來源于對反射的設(shè)定。整體主要設(shè)定了反射的類型、粗糙度、反射強(qiáng)度、高光強(qiáng)度、層遮罩的顏色。由于圖標(biāo)的顏色并不完全一致,因此在粗糙度、反射強(qiáng)度、高光強(qiáng)度是一組動(dòng)態(tài)的參數(shù)。
1)參數(shù)變化的對比
如下面的案例,針對不同顏色的圖標(biāo)在粗糙度、反射強(qiáng)度、高光強(qiáng)度上都有差異性,因此不是說設(shè)定好一組參數(shù)之后就那個(gè)完全適用所有的顏色,因此這里會(huì)根據(jù)實(shí)際情況調(diào)整,但整體的視覺效果保持一致。
2)層遮罩的設(shè)定差異
除了基礎(chǔ)的反射類型及參數(shù),還需要在層遮罩中添加菲涅耳來增強(qiáng)反射的豐富度。默認(rèn)的菲涅爾是一組黑白的顏色材質(zhì),我們我們可以通過調(diào)整暗部的顏色來增強(qiáng)圖標(biāo)的顏色飽和度和豐富度,如下案例對比。
七、動(dòng)效設(shè)計(jì)
靜態(tài)的3D圖標(biāo)顯得精致,增加動(dòng)效之后的3D圖標(biāo)則除精致外,還更加富有趣味性和新鮮感。3D的動(dòng)效與2D有著明顯的差別,可以更多維度的思考物體的運(yùn)動(dòng)軌跡、變化方式。
1. 動(dòng)效圖標(biāo)分類
首先我們需要根據(jù)不同造型對需要制作動(dòng)效的圖標(biāo)進(jìn)行簡單對分類,這個(gè)分類的主要作用在于明確不同圖標(biāo)的動(dòng)效設(shè)計(jì)方式,為動(dòng)效的設(shè)計(jì)方式進(jìn)行鋪墊。根據(jù)已有的圖標(biāo)劃分為:單體形、組合型、拼裝形。
1)單體形
圖標(biāo)以單個(gè)或單組形體呈現(xiàn),或者整體造型屬于某個(gè)已存在的事物或者形體,整體圖形內(nèi)容具有不可切割性。
2)組合型
圖標(biāo)通過兩組或兩組以上的圖形內(nèi)容組合而成,圖標(biāo)由主形(圖標(biāo)實(shí)際的外輪廓造型)和點(diǎn)綴圖形(用于圖標(biāo)表意或者提升圖形內(nèi)涵)組合而成的圖標(biāo),圖標(biāo)可進(jìn)行拆分或者重組后形成動(dòng)效。
3)拼裝形
圖標(biāo)本身可能在現(xiàn)實(shí)中不存在的事物或物體,通過創(chuàng)意思考而得到的圖形,圖標(biāo)的動(dòng)效更具有可發(fā)散性和可重塑性。
2. 動(dòng)效的表現(xiàn)方式
結(jié)合上面的類型差,在設(shè)計(jì)動(dòng)效的時(shí)候也會(huì)稍稍不同。重點(diǎn)在于表達(dá)不同的圖標(biāo)具有的特性,因此我們可以根據(jù)這些特性去設(shè)計(jì)圖標(biāo)的動(dòng)畫方式。
1)自體運(yùn)動(dòng)
對應(yīng)單體圖形,圖標(biāo)動(dòng)效通過自身的位移、旋轉(zhuǎn)、形變而產(chǎn)生,這類圖標(biāo)的動(dòng)效比較靠近現(xiàn)實(shí)生活中接觸的感知或圖形動(dòng)效本身具有普適性認(rèn)知。例如火箭升空、UFO飛碟、放禮炮、開寶箱等。
2)組合運(yùn)動(dòng)
對應(yīng)組合圖形和拼裝圖形,多圖形運(yùn)動(dòng)組合而成,圖標(biāo)的多個(gè)部件可從不同軸向開始進(jìn)行不同的軌跡運(yùn)動(dòng),最終進(jìn)行完整的圖標(biāo)融合。各個(gè)部件本身可能也存在位移、旋轉(zhuǎn)、形變等動(dòng)效,可以更大程度豐富圖標(biāo)的動(dòng)效表現(xiàn)。
3)部件運(yùn)動(dòng)
整體動(dòng)效相比前面兩種類型較為簡單,通過某個(gè)圖標(biāo)上的部件運(yùn)動(dòng)來表達(dá)動(dòng)效的內(nèi)容,因此這個(gè)部件需要是圖標(biāo)上較為明顯的圖標(biāo)特征,這樣更能讓人具有記憶點(diǎn)。
八、音效設(shè)計(jì)
音效是這次3D圖標(biāo)設(shè)計(jì)的點(diǎn)睛之筆,結(jié)合音效可以更加豐富的表達(dá)圖標(biāo)動(dòng)效的趣味性。不同的圖標(biāo)動(dòng)畫反饋出來的音效是不一樣的,因此賦予對應(yīng)的音效反饋才是更合理的表達(dá)。
1. 選擇音效
在實(shí)際的配置音效的過程中發(fā)現(xiàn),部分圖標(biāo)比較難找到相關(guān)聯(lián)的音效。但我們可以通過較為類似或者可以表達(dá)出該圖標(biāo)動(dòng)畫過程中的聲音反饋的音效。例如活動(dòng)小禮炮用的是開葡萄酒塞的聲音,開寶箱用的是開門的聲音,飛碟(UFO)用的是一組電子音效等等,并且從相關(guān)聲音中竊取其中一段需要的。
2. 組合音效
部分圖標(biāo)的動(dòng)畫效果很難通過一條音效進(jìn)行表達(dá),因此需要疊加2組或者2組以上的音效來豐富整體的感受。例如手柄人圖標(biāo)疊加了三組不同的音效來表達(dá),游戲卡疊加2種不同的音效。
九、動(dòng)畫集合
由于導(dǎo)入不了視頻請前往以下鏈接查看
https://mp.weixin.qq.com/s/62tyA1wUOZTFV-Vj8fmvNQ
十、結(jié)合界面UI的嘗試
3D的圖標(biāo)或3D類型的內(nèi)容如何與UI結(jié)合?相信大家也時(shí)有思考這方面的內(nèi)容。基于這次的3D圖標(biāo)設(shè)計(jì),我也進(jìn)行了初步的嘗試,從幾個(gè)方面來簡單聊聊這方面的內(nèi)容。
1. 3D圖標(biāo)對于UI設(shè)計(jì)的作用
在嘗試之前,我們需要明確3D內(nèi)容對于UI設(shè)計(jì)作用是什么?我簡單總結(jié)了幾個(gè)關(guān)鍵點(diǎn):
- 增強(qiáng)UI氛圍,結(jié)合3D動(dòng)效提升設(shè)計(jì)趣味性;
- 增強(qiáng)視覺表現(xiàn)力,出彩的2D設(shè)計(jì)雖然可以滿足,但3D的內(nèi)容往往可以給人更加不一樣的視覺感受;
- 增強(qiáng)視覺維度和立體空間感,表現(xiàn)形式自帶的表現(xiàn)力,相比常規(guī)的設(shè)計(jì)更加具有立體感。
1)3D ICON X Tab bar
當(dāng)我們設(shè)計(jì)Tabbar的時(shí)候,首先想到的表現(xiàn)方式往往是有趣的圖標(biāo)圖形設(shè)計(jì)、結(jié)合動(dòng)效之類的方式。但我們或許也可以考慮使用3D的圖標(biāo)+動(dòng)畫的方式來表達(dá)我們的設(shè)計(jì)。
2)3D ICON X 運(yùn)營內(nèi)容
一些相對簡單的運(yùn)營內(nèi)容,我們可以考慮將元素進(jìn)行3D化設(shè)計(jì),這樣可以一定程度增強(qiáng)整體運(yùn)營的視覺表現(xiàn)力。
4)3D ICON X 空白頁插圖
3D插圖是2020的設(shè)計(jì)趨勢之一,結(jié)合3D的插圖讓整體的設(shè)計(jì)更加具有氛圍感。
5)3D ICON X COVER
將背景中的某些元素結(jié)合3D圖形進(jìn)行設(shè)計(jì),讓整體的氛圍更加具有空間感和立體感。
十一、總結(jié)
本次結(jié)合實(shí)際項(xiàng)目中的內(nèi)容進(jìn)行不同維度的設(shè)計(jì)嘗試,并且希望,可以從中去尋找到更多設(shè)計(jì)的可能性和突破點(diǎn)。當(dāng)然這只是系統(tǒng)化設(shè)計(jì)思考中的一步,但可以啟發(fā)后續(xù)更加深入的3D設(shè)計(jì)探索。
本文由 @IDfor 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
太有用了?。?/p>