5千字,盤點社交類產(chǎn)品設(shè)計的9個點
編輯導(dǎo)語:說到社交類產(chǎn)品想必大家都不陌生,本文作者就圍繞社交類App,對常見的9個方面的設(shè)計要點和原理進(jìn)行了梳理,總結(jié)了5000字分享給大家,希望看后能夠?qū)δ阌兴鶐椭?/p>
一、社交App設(shè)計「音效」實現(xiàn)機制
在社交過程中,音效的加入,讓事情變得有趣、及時,QQ的咳嗽聲和消息通知是否勾起了回憶呢?
以App「SOUL」的匹配按鈕為例,匹配中有音效,匹配成功,也會有個音效。
那么音效的實現(xiàn)是怎么的機制呢?是不是在后臺配置音頻文件,通過點擊按鈕調(diào)用呢?
實際上,一般不需要在后臺存儲音頻文件:
- 一來是因為音效變動不大,你看QQ的加好友的咳嗽聲用了那么多年。所以在客戶端寫死并不影響實際需要;
- 二來牽扯到觸發(fā)后,對交互的時效性要求較高,因為音頻文件會比圖標(biāo)大很多。
以「SOUL」為例,本來已經(jīng)匹配到用戶了,如果因為網(wǎng)速等導(dǎo)致了延遲,遲遲沒有發(fā)出匹配成功的聲音,那就尷尬了。所以使用音效,一般音頻文件,都是放在前端的。至于文件壓縮和音質(zhì),就是個篩選的過程。
二、「聊天」發(fā)表情,是怎樣的機制
社交聊天,就需要發(fā)表情。在微信發(fā)一個表情出來,你發(fā)現(xiàn)顯示的是名稱[調(diào)皮],而不是一個圖標(biāo)。
收到表情的一方,退出到聊天信息總列表,顯示的也是[調(diào)皮]。
那么為什么不是直接放一個表情在上面呢?實際這與實現(xiàn)原理有關(guān)系。
當(dāng)發(fā)表情給對方的時候,實際上發(fā)的是這個表情對應(yīng)的ID——服務(wù)器拿到這個ID之后,再傳給接收方的客戶端——接收方收到,再解碼出一個表情,展示在客戶端。
用圖示如下:
因此,表情的發(fā)送,是發(fā)送給服務(wù)器一個對應(yīng)ID,而不是直接發(fā)送表情文件給對方的。所以表情文件(圖文件)需要存在各自的客戶端,而不需存在服務(wù)器。此外,客戶端還要存表情名稱和ID。
具體就是,客戶端需要以josn格式存儲表情圖-名稱-表情ID,如下圖這樣:
注意:灰度階段可以偷些表情用,但是App正式運營階段,需要自己制作表情,避免盜用侵權(quán)。
三、社區(qū)動態(tài)的時間格式的定義
時間的顯示基本分兩類:
- 一類是展示在外層的,不需要很精準(zhǔn)的時間。比如聊天環(huán)境下的時間、用戶動態(tài)外層顯示的時間;
- 另一種作為嚴(yán)格的時間落款,比如賬單明細(xì)。
后者基本可以一刀切,就用年月日時分秒,一般都不是問題。前者就要切合場景,對時間的要求和用戶情感的匹配性,融入一定的感情色彩或者暗示。
這里就有多種流派,比如推特和微信就區(qū)別很大,有興趣自行研究下。筆者在這里整理一套自己用于聊天信息、評論、系統(tǒng)消息、動態(tài)的時間的展示規(guī)則,可以作為借鑒:
- 剛剛(T<1分鐘);
- XX分鐘前(1≤T<1h),比如53分鐘前;
- XX小時前(1h≤T<24h),比如23小時前;
- 昨天+點鐘(24h≤T<48h),比如昨天 12:20;
- 日期+點鐘(48h≤T<1年),比如:6-5 14:52,跨年則加上年 2018-12-9 16:21;
- 年-月(1年≤T),比如:2018-5。
四、【消息】模塊的設(shè)計
1. 消息歸類
在設(shè)計消息菜單的時候,需要考慮默認(rèn)置頂、消息歸類等功能。讓目標(biāo)信息曝光增加,同時讓消息有條理。
比如:將系統(tǒng)與用戶的消息,放入【系統(tǒng)通知】,默認(rèn)折疊,類于“文件夾”,點擊則打開系統(tǒng)消息列表。
將用戶的【互動通知】默認(rèn)展開。
2. 未讀提示:數(shù)字還是紅點呢
一般而言,人與人的聊天顯示未讀條數(shù),因為時效性要求高。超過99條一般顯示99+,實際顯示99也可以,對用戶而言已無差異,非緊急的通知可以不顯示具體數(shù)字。
消息已讀的判斷標(biāo)準(zhǔn):只要打開就算已讀,哪怕眼前條只展出了1條,哪怕沒來得及看就手機掉線了,也都當(dāng)做已讀處理。
3. 刪除消息
分兩類:一類是單條聊天記錄的刪除;另一類是整個聊天條目的刪除,大家用微信就知道。
4. 消息保存時長永久保存在服務(wù)器
用戶可以通過加載,分批查看歷史消息。
5、考慮聊天消息的復(fù)制、轉(zhuǎn)發(fā)、失敗重發(fā)等按鈕
1)已發(fā)出的文字和表情(包括發(fā)送失敗)
長按可以轉(zhuǎn)發(fā)、刪除、復(fù)制。
2)已發(fā)出的音頻、圖片和視頻(包括發(fā)送失?。?/strong>
長按可以轉(zhuǎn)發(fā)、刪除,但不能復(fù)制(系統(tǒng)不支持);點擊打開預(yù)覽大圖,長按大圖,彈出保存按鈕。
3)發(fā)送失敗的內(nèi)容
增加重復(fù)發(fā)送按鈕,或者點擊發(fā)送失敗的按鈕實現(xiàn)重發(fā)。
4)長按消息記錄,彈出的操作框開口方向
就近原則,若消息在屏幕上方,則操作內(nèi)容在下方;反之,長按后的操作框展示在內(nèi)容上方。
5)消息通知方式
根據(jù)緊要程度,選擇橫幅通知、鎖屏通知、菜單通知。建議只對主要的信息用音效,盡量不要騷擾到用戶。但是根據(jù)經(jīng)驗,一般老板都會要求“騷擾”用戶。
五、左右滑動切換Tab頁簽
很多App的Tab頁簽,支持左右滑動切換。那么是不是在設(shè)計Tab頁簽的時候都要這樣規(guī)劃呢?在確定這個方案時,產(chǎn)品經(jīng)理需要考慮如下:
1)明確滑動切換頁簽的優(yōu)缺點
操作步驟上,點擊切換和滑動切換,都是1個動作事件。只是通常來看,滑動操作比點擊操作難度稍低,畢竟點擊需要找到觸發(fā)區(qū)。
2)支持滑動切換可以覆蓋更多用戶的操作預(yù)期——假設(shè)用戶普遍習(xí)慣同類產(chǎn)品的滑動切換的操作方式
但是滑動切換頁簽的操作本身也有弊端。
比如有時候本來是想上下滑動的,但是手指一不小心就滑歪了,于是無意識觸發(fā)了滑動事件,跳到了另一個頁面去,可能就打斷用戶沉浸式體驗。
基于以上,筆者建議如下:
1)沉浸式的瀑布流,比如抖音的視頻流,不推薦滑切Tab頁
如果非要做,則將滑動切換觸發(fā)靈敏度降低。
2)內(nèi)容長度有限,或者閱讀速度快的Tab頁簽,可以使用滑切
比如電商商品的【參數(shù)】、【評論】之間的切換。
3)除了左右滑動切換Tab,還可以結(jié)合下翻切換
如果頁面內(nèi)容較短,那么在下翻至Tab頁內(nèi)容結(jié)束的時候,緊接著就切換下一頁的內(nèi)容。
比如:
最后要注意,不管做不做滑切,產(chǎn)品經(jīng)理都要給予開發(fā)人員明確的說明。
六、分享功能的“借尸還魂”
1. 分享的原理
第三方平臺提供了分享接口,目標(biāo)App對接后,獲取了對應(yīng)權(quán)限和功能支持。
因此在分享事件中,目標(biāo)App分享出去的內(nèi)容是客,“客隨主便”:即:第三方支持什么,分享出去才能做什么。
通常,內(nèi)容分享出去之后,會在第三方平臺中以一定的格式展示。這種格式不由產(chǎn)品經(jīng)理設(shè)計,而是第三方平臺規(guī)定的,產(chǎn)品經(jīng)理需要確認(rèn)要展示的內(nèi)容。
在第三方平臺中打開分享的內(nèi)容后,就會基于第三方平臺內(nèi)置環(huán)境進(jìn)行功能展示。通常都會引導(dǎo)用戶觸發(fā)打開App,或到應(yīng)用市場下載App。
2. 技術(shù)實現(xiàn)方面
第一步:接口對接,實現(xiàn)第三方系統(tǒng)的授權(quán)。未授權(quán)的情況下做分享,會有類似下圖的提示:
第二步:實現(xiàn)功能需求
以分享小視頻到微信為例,若要在微信H5中實現(xiàn)視頻播放、點贊等功能,則要基于H5寫相關(guān)的代碼。當(dāng)然也可以使用SDK,SDK通常本身支持多個系統(tǒng):電腦、安卓、ios、H5等。
而前面提到的跳轉(zhuǎn)到APP或應(yīng)用市場的邏輯,就是校驗到本手機沒有App則跳轉(zhuǎn)到應(yīng)用市場下載,校驗到已經(jīng)安裝則打開App。
但是在實現(xiàn)的時候,要了解第三方分享接口是否支持喚醒App。若不能支持,那么就要借助其他方式間接實現(xiàn)需求。
3. 產(chǎn)品經(jīng)理要確認(rèn)的
1)確定分享的場景或業(yè)務(wù)位點
比如:操縱完成或得到結(jié)果時提示分享(如截圖后、完成拍照和攝像時)、打開App時出彈層提示分享、勝利完成任務(wù)時提示分享,比如王者榮耀連勝的提示“炫耀一下”。
2)確定分享的形式
主要有:文字或鏈接地址的分享(比如天貓和淘寶的“淘口令”)、圖片分享(靜態(tài)圖片、GIF動圖)、音視頻類行形(標(biāo)記它是音頻或是視頻,并且可以直接在當(dāng)前頁播放)、網(wǎng)頁分享(帶有網(wǎng)頁縮略圖的)。
其中網(wǎng)頁分享是最常見的,以分享到微信為例,分享過去的網(wǎng)頁有自己的格式。
比如:同一個內(nèi)容,從APP或外部瀏覽器分享到微信,會顯示APP的名稱和縮略內(nèi)容,從微信內(nèi)置瀏覽器分享的就不會展示這些信息。
另外注意:分享網(wǎng)頁和分享鏈接是不同的分享形式,前者帶有網(wǎng)頁自身的縮略內(nèi)容,后者屬于文本范疇的分享,簡單原始。
3)用戶打開的效果是什么
如果將分享理解為“借尸還魂”引流的話,那么打開分享鏈接之后,可以以最基礎(chǔ)的靜態(tài)畫面呈現(xiàn),再次點擊頁面,則引導(dǎo)跳轉(zhuǎn)到App,或引導(dǎo)到應(yīng)用市場下載App。
但是,產(chǎn)品經(jīng)理需要知道,某些第三方的應(yīng)用不給提供便利,不支持跳轉(zhuǎn)到App,比如微信。
因此,設(shè)計時候考慮增加提示“使用本地瀏覽器打開”(假設(shè)瀏覽器是支持的)。這樣就借助一個新的橋梁“假途滅虢”實現(xiàn)需求了,如下圖這樣:
4)最后,讓分享自然甚至驚喜
比如:讓用戶獲得優(yōu)惠,得到好處(如「哈羅單車」通過分享獲得紅包);輔助業(yè)務(wù)實時共享(如「滴滴」可以分享行程給他人共享實時位置);邀請好友,分享快樂(如「王者榮耀」邀請朋友一起組團開黑);分享成就(如游戲獲得了九連勝等)。
七、頁面刷新加載的“蘿卜和泥”
刷新,是產(chǎn)品經(jīng)理需要定義的常見的功能。要么是手動觸發(fā)刷新,要么是定時任務(wù)觸發(fā)。定時任務(wù)觸發(fā),比如1分鐘內(nèi)的消息顯示“剛剛”,那么系統(tǒng)就可以每一分鐘自動刷新一次,使顯示合理的時間格式。
本文主要以手動觸發(fā)說明,產(chǎn)品經(jīng)理至少可以考慮四個方面的問題:
1. 怎樣的觸發(fā)方式
列表頁面加載,主流觸發(fā)方式是滑動,包括上下左右滑動。對于瀑布流的內(nèi)容為主的產(chǎn)品,刷新較為頻繁,除了使用滑動加載之外,還可配合按鈕加載。
比如:【抖音】,可以雙擊底部菜單實現(xiàn)頁面刷新。
“滑動+點擊”這樣的設(shè)計,避免用戶置身于視頻瀑布流中只靠單一滑動帶來的枯燥和不適。
2. 打開新頁面加載的
刷新有打開新頁面的,也有在當(dāng)前頁面加載新內(nèi)容。打開新頁面的,需要考慮如下:
翻頁方向目前流行的交互方式,是左右平移或覆蓋平移,比較符合用戶對線性操作流程的的直觀感受。加載發(fā)生在翻頁的前還是后呢?
翻頁前加載適用于需要判斷及驗證處理的頁面中,例如:表單信息判斷和登錄驗證等。而絕大部分app采用翻過去之后加載,這樣可以極大的增強頁面的流暢感。
3. 設(shè)計loading標(biāo)示
1)loading標(biāo)示的樣式
菊花和進(jìn)度條是最基礎(chǔ)的loading標(biāo)示,若做成動畫,或者加入App品牌特色,就更顯誠意了。
2)loading標(biāo)示的位置
是在頂部、中部、還是底部呢?若看不出優(yōu)劣,就選一種,并向團隊交代清楚,必要的時候做A/B測試。
4. 加載策略
在實現(xiàn)機制上,產(chǎn)品經(jīng)理要說清楚效果。比如:最遲不超過2s、要求某些內(nèi)容先加載出來等等。這樣就引導(dǎo)出了常見的幾種機制:異步加載、分模塊加載、懶加載和預(yù)加載等。
需要注意的是:加載機制不僅僅是受限于網(wǎng)速,更是信息泛濫時代的一種策略:讓用戶優(yōu)先看到什么,節(jié)約用戶精力,提高回報率。
八、Web在手機端的適配
產(chǎn)品官網(wǎng),初期都很簡單,基本都是:產(chǎn)品介紹+下載鏈接。功能不復(fù)雜,因此可以考慮設(shè)置手機訪問官網(wǎng)的功能。
如上圖所示,手機端直接訪問PC官網(wǎng)體驗極差。因此需要一定程度的適配,大概會有以下幾種形式:
1. 極簡適配
極簡適配就是對內(nèi)容進(jìn)行刪減,直到剩下最后一個頁面,用一個頁面去呈現(xiàn)最基本的產(chǎn)品介紹以及下載按鈕。
2. 完全適配
做了全適配的官網(wǎng)會在手機端有良好的表現(xiàn),當(dāng)然,Pc端的官網(wǎng)有時候體量太大,在適配到手機端的時候也要有刪減。
九、App第三方登錄的注意事項
社交類App登錄方式,基本已經(jīng)沉淀了這三種:賬號密碼、手機郵箱驗證碼、第三方賬號登陸。隨著社交類霸主的穩(wěn)固,很少注冊賬號密碼(與產(chǎn)品的定位和用戶群有關(guān)),多的是第三賬號登錄。
第三方登錄就是借助第三方應(yīng)用的接口實現(xiàn)用戶登記,比如常見的三家:微信、QQ、微博。毫無疑問,這是看上了小三的大腿,可以抱。
借助已經(jīng)形成的社交生態(tài)之火,去點燃另一團社交生態(tài)。
1. 使用第三方登錄的目的
簡化注冊環(huán)節(jié),減少可能因為注冊繁瑣帶來的用戶損失;
關(guān)聯(lián)賬號,形成社交群落之間的呼應(yīng),有利于用戶生態(tài)鏈的搭建。比如:用戶可以把平臺上的某些內(nèi)容一鍵分享到第三方平臺;
獲取用戶的一部分已有信息,比如用戶信息或流量資源;
節(jié)省用戶的記憶成本用戶在使用多個應(yīng)用時,只需使用第三方登錄即可,無需記得每個平臺的賬戶和密碼。
2. 使用第三方登錄的注意點
1)第三方賬號給的資料完善度和安全性不好把控
比如你期望獲取QQ中的頭像、昵稱、年齡、地區(qū),但是QQ可能只給你頭像和昵稱;又比如有一天第三方封了接口,那么第三方登錄功能就停擺了,還有注銷了第三方賬號的情況。
2)第三方登錄方式,對用戶來說不一定就是省時省力的渠道
因為相關(guān)法規(guī)的要求很多APP是需要用戶手機號的,而第三方登錄并不能獲取用戶已經(jīng)提供給第三方的手機號(用戶隱私)。
因此對用戶來說常常是使用第三方登錄后,仍然要跳轉(zhuǎn)到驗證手機號的界面,還不如直接使用手機驗證登錄。
3)后臺創(chuàng)建了自己的賬戶體系時,若沒有設(shè)計好合理的第三方和本地賬戶對接的方案,會導(dǎo)致同一個用戶在平臺上有多個賬號的情況發(fā)生
3. 總結(jié)
知道了第三方登錄有如此這般的優(yōu)點和缺點,但迫于它又確實是能夠為用戶一定程度上帶來便利。所以你必須想辦法折磨自己折磨設(shè)計然后折磨開發(fā)工程師,以此來盡可能帶來一個比較和諧的用戶使用體驗。
#專欄作家#
唧唧歪歪PM,公眾號:唧唧歪歪PM(ID:jjyypm),人人都是產(chǎn)品經(jīng)理專欄作家,2019年年度作者?!逗蠖水a(chǎn)品經(jīng)理寶典》作者,藥學(xué)碩士轉(zhuǎn)行互聯(lián)網(wǎng)產(chǎn)品多年;熟悉跨境電商業(yè)務(wù),醫(yī)藥領(lǐng)域;擅長大型后臺體系,社交APP。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
這么長的篇幅 內(nèi)容豐富 慢慢消化
第三方登錄,對用戶來說不是省時省力的渠道,但對于平臺來講,能夠有效降低用戶登錄操作成本的預(yù)估,用戶誤以為可以用第三方賬號直接登錄。當(dāng)付出了“第三方賬號直接登錄”的操作成本以后,用戶對于“還要進(jìn)行手機號注冊”的操作成本的可接受度大大增加!
音頻一般是不能轉(zhuǎn)發(fā)的吧
前輩是轉(zhuǎn)入到社交領(lǐng)域了?我看你的文章有點從后端往前端轉(zhuǎn)啦?
搞個小公司,需要掌舵,充充電