1.我們?yōu)槭裁匆鲋辈ナ叶Y物道具讨盒？
那是2016年10月中旬我接到了一個(gè)來(lái)自于產(chǎn)品經(jīng)理的需求解取，直播室要做打賞老師禮物道具的功能。前面其實(shí)也做了給老師打賞的功能返顺，只是功能形式比較單一禀苦，只能以形式的紅包打賞蔓肯。
現(xiàn)在改成以道具的形式打賞給老師，第一是改用虛擬幣金豆振乏，而不是赤裸的金錢(qián)形式蔗包， 第二是通過(guò)增加互動(dòng)的娛樂(lè)性來(lái)增加用戶與直播室粘性，第三是當(dāng)禮物道具打賞較多時(shí)也是對(duì)直播室老師專業(yè)的某種肯定慧邮，同時(shí)也是激勵(lì)直播老師產(chǎn)出更好的策略调限。
2.如何做直播室禮物道具呢？
首先先研究了一下目前主流的直播平臺(tái)：YY赋咽，映客，花椒吨娜，陌陌等脓匿。這類(lèi)是做的比較成熟的平臺(tái)，雖然不是同行業(yè)宦赠，但在禮物道具這塊還是很有參考性的陪毡。同行業(yè)做禮物道具的很少，主流平臺(tái)已足夠作為此次項(xiàng)目的需要去研究勾扭。
在體驗(yàn)過(guò)幾大主流平臺(tái)贈(zèng)送禮物道具后毡琉，總結(jié)贈(zèng)送流程大致如下：
根據(jù)前面的分析研究設(shè)計(jì)贈(zèng)送禮物的流程：
以及充值流程：
首先，大致的贈(zèng)送流程以及充值流程是保持一致的妙色。那在在交互細(xì)節(jié)上有什么區(qū)別呢桅滋？
1.直播頁(yè)面與互動(dòng)頁(yè)面贈(zèng)送禮物的區(qū)別
當(dāng)贈(zèng)送禮老師禮物之后，贈(zèng)送紀(jì)錄只能在互動(dòng)頁(yè)面顯示身辨，直播頁(yè)面不顯示丐谋。因?yàn)橹辈ロ?yè)面是比較重要的信息流，內(nèi)容只有老師的發(fā)言煌珊，在用戶打賞較多時(shí)贈(zèng)送紀(jì)錄會(huì)造成刷屏的現(xiàn)象号俐，影響用戶查閱老師對(duì)行情的解析內(nèi)容，而互動(dòng)頁(yè)面是用戶間的互動(dòng)定庵，比較頻繁吏饿，贈(zèng)送記錄頻繁顯示會(huì)凸顯直播室的的活躍度。另外蔬浙，直播頁(yè)面老師的頭像及發(fā)言都在屏幕左邊猪落，所以贈(zèng)送的禮物條會(huì)從屏幕右邊出現(xiàn)，以免干擾直播內(nèi)容畴博。
2.禮物彈窗查看更多老師和禮物的交互方式
移動(dòng)端屏幕有限许布，而且與別的平臺(tái)不同的是我們的直播室有多位老師，在贈(zèng)送禮物之前會(huì)先選擇你想要送禮物的老師绎晃，所以在禮物彈窗上只有老師和禮物各一條的布局位置蜜唾。一屏顯示的老師和禮物數(shù)量有限杂曲，查看更多老師和禮物我們想了兩種交互方式：
a.在中間分割線上加箭頭表示滑動(dòng)。這個(gè)方案有些同事反映看不出來(lái)是可以滑動(dòng)的袁余，自己斟酌后確實(shí)滑動(dòng)表達(dá)不夠強(qiáng)烈擎勘。
b.在老師和禮物下面加頁(yè)面指示器。綜合下來(lái)這個(gè)方案指示明確颖榜，滑動(dòng)可以查看更多禮物和老師棚饵，而且視覺(jué)上也比較自然，較于前兩個(gè)方案是最合適的掩完。
3.連送button的交互方式
連送的交互噪漾，借鑒了一下陌陌直播的交互表達(dá)方式，將連送的button設(shè)計(jì)的炫酷一點(diǎn)且蓬，刺激用戶去點(diǎn)擊連送欣硼。用戶贈(zèng)送完某個(gè)禮物后，禮物會(huì)變成連送的button恶阴，在3s內(nèi)若不點(diǎn)擊連送诈胜，則連送button會(huì)消失。
但直播室禮物道具上線后冯事，我們發(fā)現(xiàn)了一個(gè)問(wèn)題焦匈，很少用戶會(huì)去點(diǎn)擊連送。后來(lái)我們總結(jié)下了原因昵仅，因?yàn)榈谝毁?zèng)送按鈕在送出禮物之后會(huì)變灰贈(zèng)送按鈕是不可點(diǎn)擊的缓熟，第二連送按鈕是從某禮物位置變化的而不是原先的贈(zèng)送位置，所以導(dǎo)致大部分用戶不知道那個(gè)連送動(dòng)態(tài)button是可以點(diǎn)擊的摔笤。
針對(duì)這個(gè)我們后面做了改進(jìn)荚虚，在贈(zèng)送禮物之后原位置變?yōu)檫B送button，而且button的設(shè)計(jì)更像可以點(diǎn)擊的并加入了時(shí)間的倒計(jì)時(shí)籍茧，給用戶一個(gè)連送按鈕消失事件的預(yù)期版述。
其次，禮物道具的視覺(jué)設(shè)計(jì)
第一在禮物的icon設(shè)計(jì)上面寞冯，采用比較適中的設(shè)計(jì)表達(dá)形式渴析，既不是太寫(xiě)實(shí)，精雕細(xì)琢吮龄，也不是看上去太簡(jiǎn)單俭茧，沒(méi)有細(xì)節(jié)，第二在細(xì)節(jié)上面漓帚，比如禮物的button以及排行榜的排名icon都進(jìn)行了細(xì)化母债。
最后是禮物的動(dòng)效設(shè)計(jì)
禮物的大動(dòng)效有瀑布、火箭、金牌講師毡们、別墅迅皇，根據(jù)她們的物理特性和價(jià)格設(shè)置而設(shè)計(jì)。比如像瀑布和火箭衙熔，模擬它們物理世界的真實(shí)效果登颓，瀑布設(shè)計(jì)成快速的流水跌落效果，火箭在云的襯托下沖向天空红氯，像別墅價(jià)格設(shè)置比較貴框咙，打賞人數(shù)會(huì)比較少，動(dòng)畫(huà)設(shè)計(jì)的動(dòng)靜比較大痢甘，意境是撥開(kāi)云霧喇嘱，有別墅，有鳥(niǎo)塞栅，有云者铜，表達(dá)世外桃源的境界感，滿足花了大價(jià)錢(qián)打賞老師的用戶心理构蹬。
3.如何與開(kāi)發(fā)溝通上線
動(dòng)畫(huà)內(nèi)存壓縮與格式研究
在動(dòng)畫(huà)輸出到開(kāi)發(fā)那邊碰到的最大問(wèn)題就是內(nèi)存和動(dòng)畫(huà)的格式問(wèn)題王暗，對(duì)于禮物的大動(dòng)效來(lái)說(shuō)悔据，第一個(gè)提供png序列圖片顯然是不合適的庄敛，因?yàn)?s的動(dòng)畫(huà)png序列圖片比較多，減幀的話導(dǎo)致動(dòng)畫(huà)不夠流暢科汗，而且圖片累計(jì)內(nèi)存還是很大藻烤。
第二個(gè)是gif格式，gif格式有一個(gè)弊端头滔，導(dǎo)出的動(dòng)態(tài)圖形若選擇不帶雜邊怖亭，則會(huì)有鋸齒，不然就是帶有雜邊坤检，其次在無(wú)數(shù)次的壓縮內(nèi)存與對(duì)比效果來(lái)看兴猩，所能接受的動(dòng)態(tài)效果內(nèi)存占比最低還是在1M左右（6p下），對(duì)app來(lái)說(shuō)還是太大早歇。
第三個(gè)就是研究到了一種新型的圖片格式webp格式倾芝，谷歌開(kāi)發(fā)的一種旨在加快圖片加載速度的圖片格式，在質(zhì)量相同的情況下箭跳，WebP格式圖像的體積要比JPEG格式圖像小40%晨另，最后權(quán)衡下來(lái)，提供給開(kāi)發(fā)animated webp文件也就是動(dòng)態(tài)的webp文件谱姓，先選擇帶相近背景色的gif文件借尿，然后利用國(guó)外格式轉(zhuǎn)換網(wǎng)站，轉(zhuǎn)化成animated webp文件，同樣的動(dòng)畫(huà)路翻，內(nèi)存占比到200k左右（6p下）狈癞，而且視覺(jué)效果也可以接受。
總結(jié)：在這次直播室項(xiàng)目中也有一些遺憾存在帚桩，比如預(yù)先沒(méi)有估計(jì)開(kāi)發(fā)的難度亿驾，應(yīng)該較前做比較精細(xì)的交互稿，可以加快開(kāi)發(fā)的進(jìn)度账嚎，動(dòng)畫(huà)效果還可以繼續(xù)優(yōu)化研究比較能出效果但規(guī)律的運(yùn)動(dòng)莫瞬，現(xiàn)在顯得不夠統(tǒng)一，在這次項(xiàng)目中也收獲了不少郭蕉，比如看似不太復(fù)雜的流程其實(shí)還有很多細(xì)節(jié)的交互值得注意疼邀，對(duì)AE動(dòng)畫(huà)表現(xiàn)感覺(jué)又精進(jìn)了一步，對(duì)不同格式的圖片優(yōu)缺點(diǎn)及適用范圍又有了進(jìn)一步的了解召锈。
