1.我們?yōu)槭裁匆鲋辈ナ叶Y物道具？
那是2016年10月中旬我接到了一個(gè)來自于產(chǎn)品經(jīng)理的需求，直播室要做打賞老師禮物道具的功能。前面其實(shí)也做了給老師打賞的功能，只是功能形式比較單一，只能以形式的紅包打賞。
現(xiàn)在改成以道具的形式打賞給老師，第一是改用虛擬幣金豆，而不是赤裸的金錢形式， 第二是通過增加互動的娛樂性來增加用戶與直播室粘性，第三是當(dāng)禮物道具打賞較多時(shí)也是對直播室老師專業(yè)的某種肯定，同時(shí)也是激勵直播老師產(chǎn)出更好的策略。
2.如何做直播室禮物道具呢？
首先先研究了一下目前主流的直播平臺：YY，映客，花椒，陌陌等。這類是做的比較成熟的平臺，雖然不是同行業(yè)，但在禮物道具這塊還是很有參考性的。同行業(yè)做禮物道具的很少，主流平臺已足夠作為此次項(xiàng)目的需要去研究。
在體驗(yàn)過幾大主流平臺贈送禮物道具后，總結(jié)贈送流程大致如下：
根據(jù)前面的分析研究設(shè)計(jì)贈送禮物的流程：
以及充值流程：
首先，大致的贈送流程以及充值流程是保持一致的。那在在交互細(xì)節(jié)上有什么區(qū)別呢？
1.直播頁面與互動頁面贈送禮物的區(qū)別
當(dāng)贈送禮老師禮物之后，贈送紀(jì)錄只能在互動頁面顯示，直播頁面不顯示。因?yàn)橹辈ロ撁媸潜容^重要的信息流，內(nèi)容只有老師的發(fā)言，在用戶打賞較多時(shí)贈送紀(jì)錄會造成刷屏的現(xiàn)象，影響用戶查閱老師對行情的解析內(nèi)容，而互動頁面是用戶間的互動，比較頻繁，贈送記錄頻繁顯示會凸顯直播室的的活躍度。另外，直播頁面老師的頭像及發(fā)言都在屏幕左邊，所以贈送的禮物條會從屏幕右邊出現(xiàn)，以免干擾直播內(nèi)容。
2.禮物彈窗查看更多老師和禮物的交互方式
移動端屏幕有限，而且與別的平臺不同的是我們的直播室有多位老師，在贈送禮物之前會先選擇你想要送禮物的老師，所以在禮物彈窗上只有老師和禮物各一條的布局位置。一屏顯示的老師和禮物數(shù)量有限，查看更多老師和禮物我們想了兩種交互方式：
a.在中間分割線上加箭頭表示滑動。這個(gè)方案有些同事反映看不出來是可以滑動的，自己斟酌后確實(shí)滑動表達(dá)不夠強(qiáng)烈。
b.在老師和禮物下面加頁面指示器。綜合下來這個(gè)方案指示明確，滑動可以查看更多禮物和老師，而且視覺上也比較自然，較于前兩個(gè)方案是最合適的。
3.連送button的交互方式
連送的交互，借鑒了一下陌陌直播的交互表達(dá)方式，將連送的button設(shè)計(jì)的炫酷一點(diǎn)，刺激用戶去點(diǎn)擊連送。用戶贈送完某個(gè)禮物后，禮物會變成連送的button，在3s內(nèi)若不點(diǎn)擊連送，則連送button會消失。
但直播室禮物道具上線后，我們發(fā)現(xiàn)了一個(gè)問題，很少用戶會去點(diǎn)擊連送。后來我們總結(jié)下了原因，因?yàn)榈谝毁浰桶粹o在送出禮物之后會變灰贈送按鈕是不可點(diǎn)擊的，第二連送按鈕是從某禮物位置變化的而不是原先的贈送位置，所以導(dǎo)致大部分用戶不知道那個(gè)連送動態(tài)button是可以點(diǎn)擊的。
針對這個(gè)我們后面做了改進(jìn)，在贈送禮物之后原位置變?yōu)檫B送button，而且button的設(shè)計(jì)更像可以點(diǎn)擊的并加入了時(shí)間的倒計(jì)時(shí)，給用戶一個(gè)連送按鈕消失事件的預(yù)期。
其次，禮物道具的視覺設(shè)計(jì)
第一在禮物的icon設(shè)計(jì)上面，采用比較適中的設(shè)計(jì)表達(dá)形式，既不是太寫實(shí)，精雕細(xì)琢，也不是看上去太簡單，沒有細(xì)節(jié)，第二在細(xì)節(jié)上面，比如禮物的button以及排行榜的排名icon都進(jìn)行了細(xì)化。
最后是禮物的動效設(shè)計(jì)
禮物的大動效有瀑布、火箭、金牌講師、別墅，根據(jù)她們的物理特性和價(jià)格設(shè)置而設(shè)計(jì)。比如像瀑布和火箭，模擬它們物理世界的真實(shí)效果，瀑布設(shè)計(jì)成快速的流水跌落效果，火箭在云的襯托下沖向天空，像別墅價(jià)格設(shè)置比較貴，打賞人數(shù)會比較少，動畫設(shè)計(jì)的動靜比較大，意境是撥開云霧，有別墅，有鳥，有云，表達(dá)世外桃源的境界感，滿足花了大價(jià)錢打賞老師的用戶心理。
3.如何與開發(fā)溝通上線
動畫內(nèi)存壓縮與格式研究
在動畫輸出到開發(fā)那邊碰到的最大問題就是內(nèi)存和動畫的格式問題，對于禮物的大動效來說，第一個(gè)提供png序列圖片顯然是不合適的，因?yàn)?s的動畫png序列圖片比較多，減幀的話導(dǎo)致動畫不夠流暢，而且圖片累計(jì)內(nèi)存還是很大。
第二個(gè)是gif格式，gif格式有一個(gè)弊端，導(dǎo)出的動態(tài)圖形若選擇不帶雜邊，則會有鋸齒，不然就是帶有雜邊，其次在無數(shù)次的壓縮內(nèi)存與對比效果來看，所能接受的動態(tài)效果內(nèi)存占比最低還是在1M左右（6p下），對app來說還是太大。
第三個(gè)就是研究到了一種新型的圖片格式webp格式，谷歌開發(fā)的一種旨在加快圖片加載速度的圖片格式，在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%，最后權(quán)衡下來，提供給開發(fā)animated webp文件也就是動態(tài)的webp文件，先選擇帶相近背景色的gif文件，然后利用國外格式轉(zhuǎn)換網(wǎng)站，轉(zhuǎn)化成animated webp文件，同樣的動畫，內(nèi)存占比到200k左右（6p下），而且視覺效果也可以接受。
總結(jié)：在這次直播室項(xiàng)目中也有一些遺憾存在，比如預(yù)先沒有估計(jì)開發(fā)的難度，應(yīng)該較前做比較精細(xì)的交互稿，可以加快開發(fā)的進(jìn)度，動畫效果還可以繼續(xù)優(yōu)化研究比較能出效果但規(guī)律的運(yùn)動，現(xiàn)在顯得不夠統(tǒng)一，在這次項(xiàng)目中也收獲了不少，比如看似不太復(fù)雜的流程其實(shí)還有很多細(xì)節(jié)的交互值得注意，對AE動畫表現(xiàn)感覺又精進(jìn)了一步，對不同格式的圖片優(yōu)缺點(diǎn)及適用范圍又有了進(jìn)一步的了解。
