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