基于一個(gè)內(nèi)容嘗試多種方案設(shè)計(jì)，是我一直堅(jiān)持的習(xí)慣，多方案設(shè)計(jì)可以幫助我們更多的拓展思考空間，更有利于我們?nèi)ネ苿?dòng)落地我們的項(xiàng)目。因此，基于本次loading的設(shè)計(jì)嘗試做一次總結(jié)沉淀，并且分享一下對于設(shè)計(jì)的思考及實(shí)際制作過程。整個(gè)過程集合思考及軟件應(yīng)用，思維結(jié)合技法表現(xiàn)的配合，通過不同的軟件、插件來表現(xiàn)設(shè)計(jì)。

背景及問題分析

1. 背景

QQ游戲中心在承接一些新游戲或較大型游戲版本更新推廣時(shí)，會(huì)以一種全屏廣告的方式呈現(xiàn)（直接彈出的拍臉廣告），以最直接有效率的方式推薦給游戲玩家用戶，吸引用戶下載新游戲或更新版本。

2. 問題分析

在現(xiàn)網(wǎng)中存在幾點(diǎn)問題：素材較大時(shí)加載時(shí)間長，拉取素材過程中為空白，用戶容易手動(dòng)關(guān)閉跳過；現(xiàn)網(wǎng)的彈出效果過于生硬，缺乏動(dòng)畫過度。

確定設(shè)計(jì)優(yōu)化方向

基于以上2點(diǎn)問題，確定了設(shè)計(jì)優(yōu)化的大概方向是：補(bǔ)充loading設(shè)計(jì)，彌補(bǔ)素材拉取過程的等待；增加素材彈出的過度動(dòng)效，提高內(nèi)容呈現(xiàn)流暢度。整體的設(shè)計(jì)方案緊靠游戲中心現(xiàn)有世界觀進(jìn)行展開思考，避免與整體風(fēng)格差異化太大。

1. 結(jié)合世界觀的思考

我們在改版之初確定了游戲中心的世界觀為游戲宇宙。因此基于宇宙和游戲這2種概念，做了一些設(shè)計(jì)方案的發(fā)散。設(shè)計(jì)方案需要保持2種特點(diǎn)：與世界觀具有關(guān)聯(lián)度；方案之間設(shè)計(jì)需要具有明顯的差異性。

因此基于以上的一些規(guī)則，發(fā)散思考了三個(gè)設(shè)計(jì)的方向，如下

A 宇宙蟲洞穿越的概念：用戶進(jìn)入到游戲中心接收到拍臉banner實(shí)際是從無到有的方式，因此可以想象成從另一個(gè)空間傳遞到游戲中心再呈現(xiàn)給用戶，另外蟲洞的概念也與游戲中心宇宙的世界觀較為吻合。

B 火箭環(huán)繞星球的概念：火箭環(huán)繞星球的設(shè)計(jì)也是比較具有識(shí)別性，也屬于比較常見的表達(dá)方式。通過火箭環(huán)繞星球來表達(dá)探索的概念，主要想表達(dá)loading的過程其實(shí)是在探索新內(nèi)容的發(fā)現(xiàn)。

C 游戲插卡的概念：把loading設(shè)計(jì)為一個(gè)循環(huán)插卡的設(shè)計(jì)，這個(gè)設(shè)計(jì)對于一些玩家比較具有普識(shí)性，插卡的概念在上一版的設(shè)計(jì)中也嘗試過，也得到不錯(cuò)的反饋。

設(shè)計(jì)過程分析

根據(jù)以上的方向，嘗試進(jìn)行實(shí)際的方案設(shè)計(jì)，下面對每個(gè)方案進(jìn)行剖析并分享下當(dāng)時(shí)在設(shè)計(jì)過程中的一些思考、制作及設(shè)計(jì)方法等，對于大家是一些案例分享，對于我自己來說是一次細(xì)節(jié)復(fù)盤的作用。

A：蟲洞穿越的概念

設(shè)計(jì)想法

從設(shè)計(jì)上來說拍臉廣告是從無到有出現(xiàn)到，因此在剛開始思考設(shè)計(jì)到時(shí)候主要想從2個(gè)點(diǎn)來進(jìn)行結(jié)合：設(shè)計(jì)的效果需要承載「從無到有」的過度效果；整體的設(shè)計(jì)需要貼合游戲中心宇宙的世界觀。

基于以上的關(guān)鍵點(diǎn)覺得蟲洞的概念是比較貼合這一想法的，對比來看，蟲洞具有傳輸物質(zhì)的作用，而游戲中心則是傳遞游戲相關(guān)的內(nèi)容。（蟲洞，是宇宙中可能存在的連接兩個(gè)不同時(shí)空的狹窄隧道。來自維基百科）

設(shè)計(jì)初稿

基于手繪的初稿，在sketch中以靜態(tài)設(shè)計(jì)方案進(jìn)行呈現(xiàn)，靜態(tài)圖往往很難確定實(shí)際的動(dòng)畫效果，因此我會(huì)以一個(gè)半成稿的方式去對待，在一些小細(xì)節(jié)上也會(huì)多做些不同的效果去嘗試，如下：

動(dòng)畫demo對比

在進(jìn)行動(dòng)畫demo設(shè)計(jì)時(shí)，又嘗試了一個(gè)細(xì)節(jié)效果，就是在方案A的基礎(chǔ)上把最外層的旋轉(zhuǎn)去掉，最終嘗試了3個(gè)不同細(xì)節(jié)的動(dòng)畫demo，從demo上來看，發(fā)現(xiàn)方案A的效果相對來說比較自然一些，整體的視覺焦點(diǎn)也會(huì)相對更加聚焦。

動(dòng)畫制作過程講解

本次的demo因?yàn)槭褂玫揭恍┝Ｗ有Ч褂檬褂昧薃E進(jìn)行制作。以方案A為案例，下面對demo效果做一個(gè)設(shè)計(jì)過程的拆解，主要分析下動(dòng)畫的制作過程，整體的動(dòng)畫方案使用的技巧相對比較容易，重點(diǎn)在于粒子動(dòng)畫的微調(diào)比較耗時(shí)間。

第一步：圖層拆分

使用AE或者其他的demo軟件制作時(shí)都需要對圖層進(jìn)行一個(gè)嚴(yán)謹(jǐn)?shù)姆謱樱鸱帜男┬枰獎(jiǎng)赢嫼湍男┎恍枰獎(jiǎng)赢嫞糠謭D層可以進(jìn)行合并靜態(tài)輸出。這里整體拆分為3個(gè)圖層，粒子效果在AE里再進(jìn)行添加。

在拆解圖層之后，我們可以根據(jù)拆解時(shí)的圖層設(shè)定來進(jìn)行動(dòng)畫制作，這樣就比較明確了。在AE里面重新布局了圖層，增加一層光環(huán)用來制作呼吸動(dòng)畫，一層則作為固定效果，同時(shí)新增了粒子動(dòng)效層，整體大約如下圖：

第二步：動(dòng)畫過程

除了粒子動(dòng)畫依賴Particular插件之外，其他的動(dòng)畫效果都相對簡單，依照我們之前設(shè)定的規(guī)則使用「K幀」的方法即可。

光環(huán)呼吸效果：通過透明度變化即可，我這里設(shè)定的是每隔15幀有一個(gè)透明度變化

內(nèi)旋效果：這個(gè)效果按照1s旋轉(zhuǎn)1圈（360度）來設(shè)定，之前調(diào)試過幾個(gè)時(shí)間，后來還是覺得1s/1圈的效果比較合適。

基礎(chǔ)動(dòng)效還有文字的一些動(dòng)效，跟光環(huán)的實(shí)現(xiàn)效果基本一致，差別在于時(shí)間設(shè)定問題，這里就不在贅述。

第三步：粒子動(dòng)畫

粒子動(dòng)畫使用插件Particular進(jìn)行制作，這個(gè)軟件也是大家比較熟悉的軟件，上手比較容易，出效果也快，唯一的問題在于比較吃內(nèi)存，偶爾會(huì)卡死閃退。

Particular

整體的界面大概如下，相信對于經(jīng)常制作動(dòng)效的同學(xué)并不陌生。中間是動(dòng)畫視圖，下面是對應(yīng)的參數(shù)選擇，選擇后在右側(cè)會(huì)有對應(yīng)可調(diào)整的參數(shù)面板。這次的粒子動(dòng)畫我主要調(diào)整了一下幾種的參數(shù)：Emitter Type(發(fā)射器類型)、Motion(運(yùn)動(dòng)效果/軌跡)、Particle Type(粒子類型)、Size/Rotation(范圍尺寸和旋轉(zhuǎn))、Opacity(透明度)、Color(顏色)等6項(xiàng)的參數(shù)。

參數(shù)的設(shè)置實(shí)際上沒有什么技巧，更多的是配合視圖去看具體的效果就OK，更多的需要微調(diào)一些參數(shù)，前后對比哪個(gè)數(shù)值更貼合你想要的。這里分享下我這次使用的數(shù)值。

當(dāng)然除了以上這些效果，還可以調(diào)整其他類型的動(dòng)效，例如下面的這些，可以根據(jù)自己實(shí)際需求啟用。

小結(jié)

設(shè)計(jì)方案需要?jiǎng)?chuàng)意與實(shí)際的內(nèi)容呈現(xiàn)相結(jié)合才能達(dá)到一個(gè)不錯(cuò)的效果表現(xiàn)，設(shè)計(jì)概念與世界觀相結(jié)合的表達(dá)才能相得益彰，而不是只存在于樣式的表層設(shè)計(jì)。另外，我們在完成設(shè)計(jì)的時(shí)候往往不是一個(gè)軟件可以滿足的，因此可以利用多軟件配合來達(dá)到我們想要的設(shè)計(jì)效果。這個(gè)方案主要是使用sketch+AE，sketch完成靜態(tài)設(shè)計(jì)，AE拆圖層實(shí)現(xiàn)動(dòng)畫，另外使用到了粒子動(dòng)效（particular插件）

B：3D火箭環(huán)繞星球效果

設(shè)計(jì)想法

結(jié)合游戲中心的世界觀進(jìn)行思考，用戶來到游戲中心的每一次瀏覽、查看游戲其實(shí)都是一種探索，因此可以把拍臉廣告想象成是用戶進(jìn)入游戲中心探索后得到的一個(gè)結(jié)果，每次探索得到的結(jié)果也會(huì)不一樣，等待但又充滿驚喜。

結(jié)合探索的主題，首先想到的就是火箭發(fā)射外太空，火箭在外太空運(yùn)行的軌跡其實(shí)就是探索的痕跡。結(jié)合這一概念，嘗試了以下方案。

設(shè)計(jì)初稿

基于這一概念，一開始嘗試了2個(gè)初稿，方案A：火箭環(huán)繞星球的，通過小火箭不停圍繞星球運(yùn)動(dòng)來表達(dá)探索；方案B：想表達(dá)使用飛碟探知探索的想法。如下：

以上2種方案從概念的吻合度、畫面的飽滿度及整體的視覺效果來說，最終選擇了方案A的方向繼續(xù)深入優(yōu)化。

一開始嘗試了2D的動(dòng)畫，但覺得效果還可以更好，因此想基于這個(gè)概念想法，去嘗試3D的效果。2D效果如下：

3D嘗試

基于2D進(jìn)行3D的效果設(shè)計(jì)，首先需要對這些物體進(jìn)行建模，因此下面從幾個(gè)方面來剖析火箭環(huán)繞星球的設(shè)計(jì)：1.模型：星球建模；2.質(zhì)感:燈光與材質(zhì)的配合；3.環(huán)繞動(dòng)畫效果的設(shè)計(jì)。

模型

如下圖可以看出整體模型包含有星球、火箭、四角星，另外，從構(gòu)圖平衡和關(guān)聯(lián)度上增加了游戲手柄。

游戲手柄和火箭的模型設(shè)計(jì)在上一篇的文章中有做了一些介紹，這次主要是講解下星球的建模。

上篇回顧：

星球建模方法

類似這種帶有坑洼的星球，其實(shí)有很多不同的建模方法，看似復(fù)雜，但實(shí)際應(yīng)用到的方法都比較簡單，這里分享下我用的一個(gè)方法。

下面為文字版流程

• 首先確定形體，新建一個(gè)圓球并把圓球的類型修改為二十面體，然后將物體變?yōu)榭删庉媽ο蟆?/li>
• 增加溝壑外體，進(jìn)入點(diǎn)模式，選擇點(diǎn)，然后對點(diǎn)進(jìn)行倒角，拉伸到差不多的大小
• 切換到面模式，選擇面進(jìn)行擠出到適合的高度，
• 繼續(xù)在面的模式下，選擇內(nèi)部擠壓，收縮出一個(gè)面
• 基于步驟四的面，進(jìn)行往內(nèi)擠壓，形成一個(gè)溝壑的效果
• 如上五步，把所有的溝壑都調(diào)節(jié)出來（這里也可以同時(shí)對多個(gè)城市位置進(jìn)行編輯）
• 最高給物體增加細(xì)分，得到我們想要的星球。

質(zhì)感

本次的3D的質(zhì)感，主要還是通過燈光、顏色、反射等方面的組合來構(gòu)成（用oc渲染的話會(huì)更豐富），下面做一個(gè)簡單的講解。

全局光照

添加全局光照，作為基礎(chǔ)的光照反射。

天空

天空添加2個(gè)設(shè)置：添加發(fā)光材質(zhì)；增加HDR貼圖即可。例如亮度之類的可以根據(jù)實(shí)際情況進(jìn)行微調(diào)。

燈光分布

總共三盞燈光，主光、補(bǔ)光、色光。主光：統(tǒng)一光照方向；頂補(bǔ)光：強(qiáng)化和明確亮部的分割；側(cè)補(bǔ)光：對右側(cè)對暗部進(jìn)行提亮和提供色彩偏向；背光：勾勒輪廓。

添加材質(zhì)

使用輕漸變的白灰色來作為星球的主色。柔和的反射，反射參數(shù)弱化反射強(qiáng)度和高光，降低物體的粗糙度。

火箭環(huán)繞動(dòng)畫

火箭環(huán)繞的動(dòng)畫，主要是利用樣條+對齊曲線命令的方式來實(shí)現(xiàn)，下面通過視頻來看看

小結(jié)

這個(gè)方案從一開始到2D方案到最后到3D實(shí)現(xiàn)，總體來說還是沿著世界觀的主線在擴(kuò)散想法，3D的設(shè)計(jì)在整體的圖形效果、空間表達(dá)上都會(huì)比2D來的更加有質(zhì)感一些，因此建議在設(shè)計(jì)一些內(nèi)容的適合可以適當(dāng)考慮3D的表現(xiàn)方式（也是目前的主流趨勢之一）。

C：游戲插卡概念

設(shè)計(jì)想法

加載的過程是具有未確定性的，就像玩家在挑選不同游戲的過程，因此結(jié)合游戲卡插入的視覺效果來表達(dá)loading不斷更換不同游戲的概念。

設(shè)計(jì)初稿

在嘗試初稿的時(shí)候，是使用了不同的游戲圖標(biāo)循環(huán)來進(jìn)行設(shè)計(jì)，在滾動(dòng)的過程中匹配最后一個(gè)插入的游戲來獲得最終的拍臉廣告。

上面的方案其實(shí)在實(shí)現(xiàn)上具有一定的難度，這里需要滿足3個(gè)難點(diǎn)：loading的時(shí)間剛好與加載完成的游戲相匹配；不同游戲圖標(biāo)拉取時(shí)加載是否足夠快；循環(huán)游戲的圖標(biāo)個(gè)數(shù)不好限定。基于以上原因，后面嘗試了以品牌圖標(biāo)為一個(gè)基礎(chǔ)圖形進(jìn)行循環(huán)加載的設(shè)計(jì)，如下效果

小結(jié)

創(chuàng)意想法到實(shí)際到落地呈現(xiàn)肯定都或多或少存在一些實(shí)現(xiàn)難點(diǎn)，因?yàn)槲覀冊谠O(shè)計(jì)時(shí)除了積極推動(dòng)開發(fā)實(shí)現(xiàn)之外，更多也需要我們?yōu)樽约旱脑O(shè)計(jì)做一些更多的思考，在原有的方案中找到一些平衡的替代方案，以便我們的設(shè)計(jì)得到確切的落地實(shí)現(xiàn)。

banner出現(xiàn)動(dòng)效

現(xiàn)在的效果是較為生硬的彈出，整體過程中缺乏動(dòng)畫效果。在重新設(shè)計(jì)loading也對整體進(jìn)行了設(shè)計(jì)思考，嘗試了三種比較建議的方式：中心放大的彈性動(dòng)畫；從頂部滑下的軌跡動(dòng)畫；透明度漸隱出現(xiàn)。如下案例：

從這三種動(dòng)畫來看，方案A第一種相對會(huì)適合一些，主要考慮以下幾點(diǎn)：1.在loading之初整體的視覺焦點(diǎn)是在平面中間的，這樣的動(dòng)畫更有視覺關(guān)聯(lián)性；2.增加彈性效果讓整體的出現(xiàn)更加柔和。

幀率壓縮

輸出動(dòng)畫時(shí)還需要考慮動(dòng)畫整體的幀數(shù)和素材大小，如果素材太大會(huì)增加loading的時(shí)間。例如火箭環(huán)繞興趣的案例，常規(guī)下1秒25幀算是比較流暢，但實(shí)際手機(jī)上的效果可以進(jìn)行一定的減幀的設(shè)定，這里嘗試了3種檔位（8幀、15幀、25幀）的效果。如下：

從以上3檔效果來看15幀檔效果算是比較不錯(cuò)，從整體素材上減少了70%的容量大小。因?yàn)樵趯?shí)際的實(shí)現(xiàn)中，設(shè)計(jì)師需要兼顧一些素材的容量大小，這樣對于實(shí)現(xiàn)會(huì)更有幫助。

最終效果對比

優(yōu)化拓展思考

雖然本次的設(shè)計(jì)算是完成了，但其實(shí)從整體來看，還是具有一些優(yōu)化及嘗試的空間。以方案B為案例，可以通過幾點(diǎn)進(jìn)行嘗試：火箭的噴火拖尾效果；增加一些背景的動(dòng)畫效果來營造氛圍；火箭運(yùn)動(dòng)的細(xì)節(jié)；增加音效，等等。大概對比如下：

可以從上面看出，優(yōu)化前后還是有很大的效果質(zhì)感差別的，這里由于篇幅問題，就不在這里做詳細(xì)的制作解剖，后續(xù)再補(bǔ)充這方面的教程。

最后總結(jié)

本次的分享主要是提供一種類似「解題思路」的想法，一個(gè)簡單的內(nèi)容，但其實(shí)我們可以嘗試不同的設(shè)計(jì)想法和方法。因此有幾點(diǎn)建議：

• 當(dāng)我們拿到一個(gè)設(shè)計(jì)時(shí)應(yīng)該是先思考，而不是直接就進(jìn)行設(shè)計(jì)；
• 在設(shè)計(jì)時(shí)一定要嘗試多方案，不同的方案嘗試的過程中更能幫助你跳出這個(gè)事情本身；
• 多方面發(fā)展自己的技法，當(dāng)你的想法足夠豐富時(shí)可以匹配不同的技法來進(jìn)行設(shè)計(jì)。

對于我自己而言，更多的是在于回顧、復(fù)盤和沉淀，從中找到一些后續(xù)可優(yōu)化、可規(guī)避的點(diǎn)，為下一次設(shè)計(jì)做好準(zhǔn)備。

歡迎關(guān)注作者微信公眾號(hào)：「ID設(shè)計(jì)站」