作者：Leo張凌鵬 微信：zk6763023
前言闡述：
我一直想利用閑暇時間寫篇文章介紹下視覺表現(xiàn)設(shè)計，正好最近一直在玩美服的AFK2，那就借爆品的設(shè)計進行一個簡單的分析和介紹，睡前班門弄斧一波了！
視覺表現(xiàn)設(shè)計簡而言之就是對游戲產(chǎn)品的視覺包裝或者說是動效包裝。涵蓋了整個游戲的動態(tài)表現(xiàn)、特效、和銜接轉(zhuǎn)場等，更高階一點的還需要設(shè)計分鏡。不過當(dāng)前大部分游戲產(chǎn)品的視覺表現(xiàn)設(shè)計基本是基于UI交互設(shè)計的基礎(chǔ)上進行系統(tǒng)的開啟、常駐、關(guān)閉、銜接部分的動態(tài)+特效的美術(shù)設(shè)計制作。
在具體功能上，視覺表現(xiàn)功能設(shè)計=功能動畫+UI動畫+特效+模型（SPINE）動畫+運鏡+環(huán)境變化等等。
視覺表現(xiàn)設(shè)計其實更像是一個系統(tǒng)美術(shù)敲定后的精修過程，需要考慮到美術(shù)資源、功能以及性能消耗。先模擬演示，后精準(zhǔn)實現(xiàn)復(fù)刻。視覺表現(xiàn)設(shè)計師不僅需要把握游戲的調(diào)性，實現(xiàn)階段也要很好的協(xié)調(diào)相關(guān)板塊的邏輯，才能很好的把想要的效果呈現(xiàn)給玩家。
AFK2整個游戲的視覺設(shè)計在美術(shù)層面的特點、手法以及節(jié)奏都非常好，性能上在資源利用率以及功能復(fù)用上也很自然?？梢钥闯鰣F隊的視覺表現(xiàn)設(shè)計能力有一套很好的框架和功能支持。行云流水的視覺表現(xiàn)設(shè)計不僅僅能提煉產(chǎn)品的交互特點，同時能加深玩家的體驗記憶，對于后續(xù)產(chǎn)品續(xù)航有很大的助力。
產(chǎn)品解析：
這邊就從AFK2里邊常見的幾個表現(xiàn)設(shè)計給大伙一個直觀的拆解分析：
角色創(chuàng)建系統(tǒng)手法：模型動畫+UI擾動+UI動畫
這個系統(tǒng)的開場視覺表現(xiàn)通過3D模型的立體感結(jié)合2D的界面設(shè)計，讓畫面立體了許多。在功能層面上能看到是紅框標(biāo)準(zhǔn)部分流體帶遮罩的擾動和人物溶解。
注冊名字階段手法：模型待機動畫+UI擾動+UI動畫+運鏡（新增）
注冊系統(tǒng)的視覺表現(xiàn)讓我提神的是那一瞬的運鏡，還保留了擾動的UI點綴效果。玩到后邊我發(fā)現(xiàn)擾動的這個設(shè)計是AFK2的視覺表現(xiàn)的特點元素之一。在背包，獲取物品，升階等很多系統(tǒng)都有起到一個豐富入場動畫的作用，把整個視覺表現(xiàn)的元素關(guān)聯(lián)性串了起來。
首沖+開戰(zhàn)+抽卡表現(xiàn)手法：壓暗蒙版（新增）+UI動畫+粒子特效+溶解+遮罩動畫（新增）
找了幾個視覺表現(xiàn)手法和元素比較相似的系統(tǒng)，很有特點的一個元素動態(tài)設(shè)計。大量的規(guī)則紋理溶解漸隱配合UI動畫和遮罩的細節(jié)動畫讓整個看起來結(jié)構(gòu)和層次表現(xiàn)都很豐富，UI資源的設(shè)計和拆解不得不說也很用心。
戰(zhàn)斗結(jié)算手法：遮罩動畫+預(yù)制體切換+UI動畫+3D模型行走動畫+字體帶通道遮罩（新增）
戰(zhàn)斗勝利整個表現(xiàn)大概2.8秒左右，利用3D模型動畫+UI表現(xiàn)配合讓戰(zhàn)斗結(jié)束多了一種MVP的既視感。預(yù)制體的切換節(jié)奏也卡得很好。
拆解好以后，幾個表達的核心元素也就一目了然了。
核心表現(xiàn)元素規(guī)則化紋理
流體擾動模擬
星星粒子貼圖
流體紋
整個游戲體驗下來，視覺表現(xiàn)中這幾個核心元素是比較明顯的，也讓玩家記憶深刻。還有幾個系統(tǒng)有利用相機深度做了景深模擬效果這里就不過多贅述了。
AFK2一直保持著個性濃郁插畫風(fēng)，配合層次感豐富的視覺表現(xiàn)設(shè)計，給人一種絲滑的體驗感。當(dāng)然這和性能優(yōu)化得很好也有關(guān)系。很多系統(tǒng)出現(xiàn)了3D模型資源和模型動作結(jié)合UI和材質(zhì)功能去增加畫面的活度，這種手法在2D游戲也可以和SPINE結(jié)合去展現(xiàn)，效果也會很不錯 。
總結(jié)概述：
分析完說說視覺表達設(shè)計的意義。
- 產(chǎn)品體驗上，游戲里每個系統(tǒng)會更加生動有趣，豐富玩家體驗感。同時能很好的引導(dǎo)玩家的視覺聚焦點和想傳遞給玩家的情緒，更好達到系統(tǒng)開發(fā)的目的性。
- 開發(fā)上面，項目前期立項和系統(tǒng)開發(fā)階段，能有效降低系統(tǒng)試錯成本。能在短時間內(nèi)模擬出幾個視覺表現(xiàn)模板，進行開發(fā)前的設(shè)計研判。
- 產(chǎn)品開發(fā)后期上，視覺表現(xiàn)設(shè)計模板產(chǎn)出后，能好精準(zhǔn)的傳達給美術(shù)和程序需要拆分優(yōu)化那些美術(shù)資源，程序需要開發(fā)哪些功能，兵合一處，加快開發(fā)效率。
- 質(zhì)量把控上，視覺表現(xiàn)的前期制作能快速的匹配各個系統(tǒng)的風(fēng)格和節(jié)奏，傳達給玩家的感受是否符合預(yù)期，及時對各板塊進行矯正。
當(dāng)然，視覺表現(xiàn)設(shè)計的制作也需要注意一些問題。
視覺表現(xiàn)設(shè)計師要熟悉比較多的軟件，同時也要了解一定的TA常識，才能判斷哪些設(shè)計是可以實現(xiàn)的，同時有哪幾種方法實現(xiàn)，這樣能更好的告訴TA你需要哪些功能加持。
在UI板塊，筆者踩過一些坑，很多UI設(shè)計師的PSD的元素拆分不精細，以及UI元素剛好卡邊并不完整，這對于視覺表現(xiàn)的設(shè)計會比較限制。
同時整個視覺表現(xiàn)開發(fā)過程中一定需要提煉共同點，在上邊AFK2項目拆解里，相信大伙已經(jīng)懂我的意思了。
最后整理了一個比較糙的思維導(dǎo)圖
時間匆忙，不能盡善盡美，歡迎開發(fā)者和美術(shù)大佬們多指導(dǎo)交流！
