網(wǎng)易云音樂(lè)一起聽(tīng)陌生人版項(xiàng)目總結(jié)

2022-9-22    博博

 一起聽(tīng) 」背后的設(shè)計(jì)故事

01.背景


電影《再次出發(fā)之紐約遇見(jiàn)你》中有一個(gè)浪漫的場(chǎng)景,男主和女主通過(guò)一根耳機(jī)分線器一起聽(tīng)著音樂(lè),一起感受著當(dāng)下同一段旋律。通過(guò)這根分線器,他們分享著自己的歌單,分享著當(dāng)下的情緒,隔絕外界的紛擾,游蕩在大街小巷。


這種聽(tīng)歌方式我也很喜歡,同樣的歌曲讓人產(chǎn)生了不一樣的感受。我想,可能是陪伴和共鳴賦予了這首歌新的生命力吧!


如今,無(wú)需分線器,網(wǎng)易云音樂(lè)一起聽(tīng)可以讓你和那個(gè)TA隨時(shí)一起欣賞音樂(lè)、分享心情。前年7月份上線的這個(gè)功能獲得了用戶的一致好評(píng),之后的數(shù)據(jù)表現(xiàn)也是遠(yuǎn)超預(yù)期。但是,在眾多的用戶反饋中,最多的一個(gè)痛點(diǎn)是:身邊沒(méi)有人陪我一起聽(tīng),能不能做個(gè)匹配功能,找陌生人一起聽(tīng)?


站在業(yè)務(wù)的層面考慮,一起聽(tīng)作為一個(gè)熟人聽(tīng)歌的功能,在戀人和親密好友之間普及度非常高,但同時(shí)也要考慮當(dāng)這部分用戶數(shù)據(jù)增長(zhǎng)到達(dá)瓶頸后,一起聽(tīng)如何拓展新的用戶群。陌生人一起聽(tīng)是一個(gè)很好的方向,能夠突破熟人社交的限制,擁抱更多社交關(guān)系拓展的可能性。


02.第一期探索


為了滿足這一部分用戶的需求,陌生人一起聽(tīng)的項(xiàng)目在決策層的支持下進(jìn)入了探索階段。這一階段主要想要知道什么樣的產(chǎn)品形態(tài)適合陌生人一起聽(tīng),是在原有的熟人一起聽(tīng)的框架內(nèi)進(jìn)行拓展,還是大膽顛覆更加讓人眼前一亮呢?每位小伙伴都描述著自己的構(gòu)想,朝著不同方向探索。經(jīng)過(guò)一輪輪的方案討論,最終我們選擇了“星球”作為框架,來(lái)承載陌生人一起聽(tīng)的設(shè)計(jì)。大概的構(gòu)想是這樣的:當(dāng)我在聽(tīng)一首歌,感覺(jué)孤單并希望有人陪伴時(shí)。可以通過(guò)一個(gè)入口進(jìn)入到一個(gè)由光點(diǎn)組成的星球,每個(gè)光點(diǎn)代表一個(gè)當(dāng)前也在聽(tīng)這首歌曲的用戶。我可以展示自己的狀態(tài),和其他的用戶進(jìn)行互動(dòng)。當(dāng)我對(duì)一個(gè)用戶感興趣時(shí),可以選擇“跟隨”TA,每當(dāng)TA去往另一個(gè)星球(也就是聽(tīng)其他的歌時(shí)),我也會(huì)自動(dòng)移動(dòng)到那個(gè)星球,跟隨著TA一起聽(tīng)。


根據(jù)上述設(shè)想,設(shè)計(jì)團(tuán)隊(duì)還產(chǎn)出了一些方案來(lái)還原大家心中的“星球”,下面是早期一個(gè)方案的動(dòng)態(tài)演示,黑膠上的封面變化為一個(gè)同色系的星球,每個(gè)光點(diǎn)代表一個(gè)正在聽(tīng)這首歌的陌生人。


我們將這個(gè)大概構(gòu)想告知開(kāi)發(fā)同學(xué)后,得知需要的人力和時(shí)間成本遠(yuǎn)超我們預(yù)期。由于決策層希望能夠在一起聽(tīng)的熱度未退時(shí)盡快上線陌生人版,我們不得不把這個(gè)星球版的方案暫時(shí)擱置,重新構(gòu)想在原有框架內(nèi)的設(shè)計(jì)方案。


決定在原有框架內(nèi)進(jìn)行設(shè)計(jì)后,我們就需要收攏之前發(fā)散的想法。針對(duì)主要需求進(jìn)行設(shè)計(jì),把有限的資源用到刀刃上。最終確定的產(chǎn)品形態(tài)似乎很簡(jiǎn)單直接,點(diǎn)一下按鈕,匹配一個(gè)愿意和我一起聽(tīng)歌的人,但是到了視覺(jué)設(shè)計(jì)階段,就需要考慮更多的問(wèn)題。


從關(guān)系的角度講。熟人之間比較親密,陌生人之間要保持一定距離,慢慢了解對(duì)方。與熟人一起聽(tīng)有著穩(wěn)定的預(yù)期,但是陌生人帶來(lái)的是不穩(wěn)定,這種不穩(wěn)定可能是緣分和驚喜,也可能是騷擾和驚嚇??紤]到這種不同,做陌生人一起聽(tīng)的功能就不能夠完全套用熟人的設(shè)計(jì),而是要針對(duì)性地進(jìn)行重新思考。


首先,功能的入口能夠給用戶第一印象,我們用了一個(gè)動(dòng)畫(huà)表達(dá)兩個(gè)陌生人沉浸在音樂(lè)中的含義,兩個(gè)匿名小人安靜地呆在一起,音符環(huán)繞著它們運(yùn)動(dòng),暗示他們正在一起聽(tīng)歌。通過(guò)這種表達(dá)幫助用戶快速了解功能,同時(shí)渲染氛圍,吸引用戶使用。


在熟人一起聽(tīng)歌過(guò)程中,為了表達(dá)親密,表現(xiàn)形式上采用了耳機(jī)共享,頭像疊放的表現(xiàn)形式。但在陌生人之間,為了避免過(guò)于親密,就去掉了耳機(jī)線。為了控制社交距離,頭像不再疊著放了。陌生人的頭像也模糊處理來(lái)保持神秘感。


為了保證沒(méi)有社交意愿的用戶不被打擾,同時(shí)為了避免社交過(guò)程過(guò)于快餐化,陌生人一起聽(tīng)采用了一方申請(qǐng),另一方同意才可以公開(kāi)身份的規(guī)則。為了配合這個(gè)規(guī)則,我們?cè)O(shè)計(jì)了陌生人揭面機(jī)制來(lái)引導(dǎo)用戶和傳達(dá)信息。匹配成功后,雙方會(huì)先隱藏身份聽(tīng)歌。以此來(lái)鼓勵(lì)用戶盡量關(guān)注音樂(lè)本身,而不是純粹為了交友而進(jìn)行一起聽(tīng)。當(dāng)一起聽(tīng)了5分鐘后,對(duì)方的面具會(huì)小幅度上下移動(dòng),暗示用戶可以點(diǎn)擊。點(diǎn)擊對(duì)方的面具后會(huì)發(fā)出公開(kāi)身份的申請(qǐng),對(duì)方同意后才可以揭開(kāi)面具。后續(xù)聽(tīng)歌過(guò)程中,雙方就在身份公開(kāi)的情況下一起聽(tīng)歌。如果相處愉快,可以去對(duì)方主頁(yè)了解更多信息,甚至互關(guān)成為好友,下一次以熟人的身份邀請(qǐng)一起聽(tīng)。


“于千萬(wàn)人之中,遇見(jiàn)你所遇見(jiàn)的人”,這是我們想在匹配的過(guò)程中體現(xiàn)的緣分感。受限于開(kāi)發(fā)成本,匹配動(dòng)畫(huà)只能在一個(gè)小小的圓形容器里去設(shè)計(jì)。下面四個(gè)方案是前期的探索稿,主要是把人抽象成一個(gè)個(gè)點(diǎn),點(diǎn)可能代表一種顏色、一顆星星、一個(gè)光點(diǎn),點(diǎn)的運(yùn)動(dòng)表達(dá)尋找的過(guò)程。


最后選用了第四個(gè),進(jìn)行最終優(yōu)化后的呈現(xiàn)如下。通過(guò)雷達(dá)的轉(zhuǎn)動(dòng)表達(dá)尋找,浮動(dòng)的光點(diǎn)代表一個(gè)個(gè)陌生人,最終受到召喚的那個(gè)TA飛入雷達(dá)范圍,發(fā)出代表回應(yīng)的音波后,變大形成一個(gè)蒙面的頭像。(由于時(shí)間關(guān)系,此動(dòng)畫(huà)后半段僅在安卓端實(shí)現(xiàn))


如果你仔細(xì)地用過(guò)一起聽(tīng),可能會(huì)發(fā)現(xiàn)雙紅心彩蛋,這份驚喜感也是我們希望讓雙方感受到的。當(dāng)你喜歡了一首對(duì)方也喜歡的歌曲,都會(huì)出現(xiàn)一個(gè)兩個(gè)愛(ài)心碰撞出音符的動(dòng)畫(huà),在驚喜的同時(shí)也會(huì)體驗(yàn)到來(lái)自陌生人的認(rèn)同感。


至此,在這一版的一起聽(tīng)中,我們希望用戶能夠獲得的感受是:“兩個(gè)陌生人雖然素不相識(shí),不方便通過(guò)言語(yǔ)交流,但是彼此分享同一首歌曲,互相陪伴,產(chǎn)生共鳴,溫暖而美妙。”正如孤城的詩(shī)《門(mén)前》里的那句:“草在結(jié)它的種子,風(fēng)在搖它的葉子。我們站著,不說(shuō)話,就十分美好”。


03.傾聽(tīng)用戶的聲音


陌生人一起聽(tīng)上線后一個(gè)月左右,我們和用研團(tuán)隊(duì)一起在杭州的幾個(gè)大學(xué)周邊進(jìn)行了用戶訪談,包括面訪和攔訪,在一線傾聽(tīng)用戶的聲音。主要調(diào)研使用過(guò)一起聽(tīng)用戶的使用情況、未使用過(guò)一起聽(tīng)用戶對(duì)于一起聽(tīng)的認(rèn)知情況,總結(jié)問(wèn)題后為一起聽(tīng)后續(xù)的功能迭代和運(yùn)營(yíng)策略提供參考和建議。


根據(jù)調(diào)研結(jié)論,我們按照用戶使用一起聽(tīng)前中后的順序?qū)?wèn)題進(jìn)行排列,分析用戶的問(wèn)題和痛點(diǎn),確定了之后的優(yōu)化方向。


04.第二期探索


4.1 一起聽(tīng)聊天


我們結(jié)合數(shù)據(jù)表現(xiàn)和用戶調(diào)研,計(jì)劃在接下來(lái)的迭代中實(shí)現(xiàn)更多有趣的玩兒法。首先亟待解決的是用戶聊天的需求。在熟人一起聽(tīng)中,用戶一般使用微信作為聊天工具,一般不會(huì)考慮在云音樂(lè)里進(jìn)行聊天。當(dāng)陌生人一起聽(tīng)上線后,能夠即時(shí)地與陌生人聊天就是一個(gè)最剛需的社交需求了。雖然云音樂(lè)已經(jīng)有私信功能可以供我們進(jìn)行復(fù)用,但是我們希望能夠?qū)⒁黄鹇?tīng)時(shí)的聊天做得足夠輕量且能夠隨時(shí)觸達(dá),以此來(lái)提高聊天功能的使用率。


設(shè)計(jì)過(guò)程中我們結(jié)合場(chǎng)景進(jìn)行思考和創(chuàng)新,經(jīng)過(guò)幾輪方案的篩選,最后大家對(duì)于一個(gè)問(wèn)題產(chǎn)生爭(zhēng)論:是進(jìn)入聊天模式才可以收發(fā)消息呢?還是直接在播放頁(yè)展示消息,隨時(shí)聊天呢?


下圖中,方案1能夠減輕打擾,但是無(wú)法在播放頁(yè)第一時(shí)間看到對(duì)方發(fā)的消息。


方案2有一定的打擾,但是能夠第一時(shí)間看到消息,讓聽(tīng)歌場(chǎng)景和聊天場(chǎng)景無(wú)縫銜接。


為了減少用戶的操作步驟,把功能做得輕量化,最終選擇了更加直接的方案2,同時(shí)為了避免打擾,每一方的消息氣泡的展示數(shù)量設(shè)置上限為2條,超過(guò)2條就會(huì)收起到記錄中。


下面的視頻是聊天的簡(jiǎn)單演示,可以發(fā)現(xiàn)氣泡通過(guò)背景模糊來(lái)區(qū)分前后內(nèi)容,氣泡的出現(xiàn)和消失不改變黑膠頁(yè)的原有結(jié)構(gòu)。


4.2 個(gè)人信息逐步展示


很多人用社恐來(lái)自嘲,表達(dá)自己想與人社交,但是又存在邁出第一步的障礙。陌生人一起聽(tīng)是一個(gè)匿名功能,很適合希望輕度社交的用戶。在匿名的基礎(chǔ)上,我們希望在聽(tīng)歌過(guò)程中,能夠?yàn)橛脩魩?lái)更多輕量的、無(wú)壓力的社交方式,幫助希望社交的用戶逐漸熟悉彼此,找到志同道合的朋友。


個(gè)人信息逐步展示就是基于上述的需求誕生的創(chuàng)新功能。隨著匿名一起聽(tīng)的進(jìn)程,用戶可以逐步解鎖對(duì)方的信息,一部分是雙方的共同信息用以產(chǎn)生共鳴,另一部分是對(duì)方的特色信息用以展示自身特點(diǎn)。在聽(tīng)歌的過(guò)程中逐漸了解對(duì)方,最后決定是否揭面進(jìn)行更深度的交流。


首先,在共同信息的提示方式的設(shè)計(jì)上,我們并沒(méi)有簡(jiǎn)單地用一個(gè)紅點(diǎn)去提醒用戶。而是用頭像的發(fā)光來(lái)表示共鳴的含義,頭像四周飄散的粒子來(lái)隱喻共同信息。讓每一處的設(shè)計(jì)都能貼合一起聽(tīng)的風(fēng)格。


共同信息在一個(gè)浮層上展示,我們把當(dāng)前展示的信息控制為一個(gè),通過(guò)上下滑動(dòng)來(lái)切換。除了共同信息,用戶可以直觀地設(shè)置自己的狀態(tài),讓自己更加像一個(gè)活生生的人。


4.3 一起聽(tīng)結(jié)果頁(yè)


當(dāng)完成一起聽(tīng)后,會(huì)有一個(gè)結(jié)果頁(yè)來(lái)記錄聽(tīng)歌過(guò)程中產(chǎn)生的各種數(shù)據(jù)。舊版的結(jié)果頁(yè)用戶反饋信息不夠豐富,分享欲望不強(qiáng)。


新的結(jié)果頁(yè)增加了雙方的相似度、聊天條數(shù)這些數(shù)據(jù),并且根據(jù)這些數(shù)據(jù)不同,會(huì)生成一個(gè)表達(dá)關(guān)系的成語(yǔ),顏色有對(duì)應(yīng)的變化。比如我們相似度很高,并且互發(fā)了很多條聊天消息的話,就會(huì)得到一拍即合的成語(yǔ)和紅色的結(jié)果頁(yè)。


與陌生人度過(guò)一段聽(tīng)歌之旅很容易讓人產(chǎn)生分享欲,在社交媒體搜索一起聽(tīng)可以發(fā)現(xiàn)很多用戶都用結(jié)果頁(yè)配圖發(fā)帖,并訴說(shuō)自己與陌生人之間的互動(dòng)故事。


05.總結(jié)


一起聽(tīng)經(jīng)過(guò)這兩次比較大的更新后,獲得一些不錯(cuò)的成績(jī)。截止至2021年12月,周末的平均DAU數(shù)據(jù)從130W提升到了200萬(wàn),增量的70W中有大約30%來(lái)自于陌生人一起聽(tīng)。在2021年3月的云音樂(lè)整體滿意度監(jiān)測(cè)中,22%的用戶表示自己經(jīng)常使用一起聽(tīng),滿意度得分4.66(滿分5分),在云音樂(lè)所有主要功能中居首位。


未來(lái),我們會(huì)繼續(xù)一起聽(tīng)的創(chuàng)新腳步,還有更多的可能性等待我們探索。希望未來(lái)能夠?yàn)橛脩魩?lái)更多元的一起聽(tīng)體驗(yàn)。最后,我想用下面的這張圖來(lái)結(jié)尾,它是同樣主打與陌生人社交和陪伴的游戲《光遇》的一張美宣圖,是我最近無(wú)意間在它的官網(wǎng)發(fā)現(xiàn)的。當(dāng)時(shí)看到這張圖后突然發(fā)現(xiàn)它和陌生人一起聽(tīng)的入口介紹圖表達(dá)方式竟然這么接近。在這個(gè)溫馨的畫(huà)面里,代表“光”的白鳥(niǎo)圍繞著你和我正如音樂(lè)環(huán)繞著你和我,彼此陪伴、傳遞溫暖、分享喜悅~



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔