隨著移動(dòng)通信互聯(lián)網(wǎng)的逐漸成熟，通過(guò)文字、語(yǔ)音、圖片、視頻交流的通信應(yīng)用（QQ、微信、Whatsapp、LINE…）一應(yīng)俱全。我們?cè)谒伎�，如果有一種新的形式給即時(shí)通信帶來(lái)突破，會(huì)不會(huì)成就一個(gè)與眾不同的App呢？

我們希望它十分有趣、新穎、能給好友間帶來(lái)新的互動(dòng)、解決尷尬環(huán)境下產(chǎn)生的問(wèn)題并帶來(lái)新的交友機(jī)會(huì)，同時(shí)還需要符合移動(dòng)設(shè)備輕量、省電又省流量的訴求。于是，我們開(kāi)始著手設(shè)計(jì)一款趣味化的視頻IM——AVATAR TALK。

下面跟大家簡(jiǎn)單的聊聊設(shè)計(jì)AVATAR TALK的整個(gè)流程，以及過(guò)程中遇到的問(wèn)題和處理方案。

前期預(yù)研

AVATAR TALK到底是什么呢？

它是一款新型的視頻通訊工具，其主要是利用人臉識(shí)別技術(shù)以虛擬形象與好友進(jìn)行實(shí)時(shí)視頻通話及互動(dòng)。它包括AVARTAR(角色裝扮系統(tǒng))+TALK（視頻通話）功能。

App Store和GooglePlay里面暫時(shí)都還沒(méi)有發(fā)現(xiàn)虛擬互動(dòng)聊天的應(yīng)用。于是預(yù)研階段我們嘗試使用虛擬形象并提供了3種AVATAR模型進(jìn)行測(cè)試。評(píng)估各種模型的視覺(jué)效果、設(shè)計(jì)成本及性能效率（如下圖），并快速敲定了位圖方案。

交互設(shè)計(jì)

整個(gè)軟件由三大模塊組成（AVATAR TALK、聯(lián)系人、會(huì)話），自然造就了功能強(qiáng)大的入口。為了加強(qiáng)它與用戶之間的親切感，通過(guò)大范圍的調(diào)整信息比例，讓用戶能馬上被虛擬形象所吸引，同時(shí)也要便于后期的信息擴(kuò)展。

在這個(gè)過(guò)程中，我們?cè)庥隽?大難題。

1.個(gè)人主頁(yè)

如何設(shè)計(jì)個(gè)人主頁(yè)是其中遇到的一大難點(diǎn)。在最初提出的快速通訊列表（以文字信息為主的主頁(yè)）與個(gè)人動(dòng)態(tài)墻（顯示靜態(tài)虛擬形象及浮動(dòng)消息的主頁(yè)）的基礎(chǔ)上，最終優(yōu)化成為動(dòng)態(tài)主頁(yè)。即讓用戶可以通過(guò)人臉識(shí)別，操作虛擬卡通形象，自己跟自己玩，以增加產(chǎn)品趣味，提升用戶體驗(yàn)（如下圖）。

2.聊天界面

在聊天界面布局安排上也產(chǎn)生過(guò)分歧，一度成為設(shè)計(jì)的瓶頸。

傳統(tǒng)聊天的大小窗口模式并不能適用于AVATAR的互動(dòng)視頻聊天。你對(duì)好友夸張互動(dòng)時(shí)（比如揍他一拳、扔個(gè)雞蛋、對(duì)TA無(wú)語(yǔ)飛個(gè)烏鴉神馬的）也希望雙方的反應(yīng)大家能夠及時(shí)感知，進(jìn)而產(chǎn)生下一步的互動(dòng)。

又因?yàn)槭苡布�的制約，各種手機(jī)攝像頭的位置不一，拍攝角度可視角度受限，還要顧及界面設(shè)計(jì)的合理布局等因素，兩人并排在同一場(chǎng)景中的布局也無(wú)法實(shí)現(xiàn)。

環(huán)境和技術(shù)的限制，再加上AVATAR是由表情控制，進(jìn)過(guò)小組內(nèi)多輪腦暴，最后一致認(rèn)為采用1:1分割的方式能更充分的展示雙方的面部表情以及互動(dòng)。（如下圖）

動(dòng)畫(huà)開(kāi)發(fā)

開(kāi)發(fā)動(dòng)畫(huà)對(duì)團(tuán)隊(duì)來(lái)說(shuō)是一次全新的嘗試。為了保證應(yīng)用的輕量性，最大發(fā)揮互動(dòng)動(dòng)畫(huà)的靈活性，采用了程序完成全程動(dòng)畫(huà)的方法（如下圖）。

由于互動(dòng)動(dòng)畫(huà)是無(wú)規(guī)律運(yùn)動(dòng)，因此由交互先給出動(dòng)畫(huà)Demo，評(píng)審?fù)ㄟ^(guò)后再輸出各個(gè)部件的動(dòng)畫(huà)規(guī)則。先使用臨時(shí)素材制作Demo，當(dāng)最終動(dòng)畫(huà)完成視覺(jué)才優(yōu)化相應(yīng)的部件，提高效率。

視覺(jué)展示

在Android系統(tǒng)里，為了AVATAR TALK能夠更加輕量化，將程序入口拆分為3個(gè)模塊。分別是：“AVATAR TALK”、“聯(lián)系人”與“會(huì)話”。

入口的設(shè)計(jì)為配合整體的風(fēng)格最終選擇了平面化的視覺(jué)表達(dá)方式。從立體的ICON優(yōu)化成輕量的紙片化效果，更好的配合界面的整體風(fēng)格。 

設(shè)計(jì)心得

設(shè)計(jì)要推動(dòng)產(chǎn)品，既需要設(shè)計(jì)師的直覺(jué)，也需要對(duì)產(chǎn)品有多維度的充分考慮，才能快速有效的集中。如何抓住核心的思考成為一個(gè)重要的挑戰(zhàn)。

在視覺(jué)設(shè)計(jì)方面，原型的結(jié)構(gòu)骨骼設(shè)計(jì)（角色的身體結(jié)構(gòu)，簡(jiǎn)單的說(shuō)就是AVATAR赤果果的樣子）在后期動(dòng)畫(huà)實(shí)現(xiàn)環(huán)節(jié)中有很大的影響。只有將每個(gè)活動(dòng)的關(guān)節(jié)合理拆分才能配合好動(dòng)畫(huà)的制作，展示出理想的動(dòng)態(tài)效果，更能無(wú)縫的銜接產(chǎn)品后期換裝的功能；只有固定好骨骼的活動(dòng)范圍，才可以使原型在任何一個(gè)裝扮下都活動(dòng)自如，精準(zhǔn)適配。

結(jié)語(yǔ)

AVATAR TALK就像電影阿凡達(dá)中的分身一樣，用新的聊天模式讓用戶感受到“眼相見(jiàn)，心相連”的視頻通訊體驗(yàn)！

I See You！ 

文章來(lái)源：Tencent CDC Blog

標(biāo)簽： 交互設(shè)計(jì) 視覺(jué)設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。