起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識5千字，盤點社交類產(chǎn)品設(shè)計的9個點
編輯導(dǎo)語：說到社交類產(chǎn)品想必大家都不陌生，本文作者就圍繞社交類App，對常見的9個方面的設(shè)計要點和原理進(jìn)行了梳理，總結(jié)了5000字分享給大家，希望看后能夠?qū)δ阌兴鶐椭?/p>
一、社交App設(shè)計「音效」實現(xiàn)機(jī)制
在社交過程中，音效的加入，讓事情變得有趣、及時，QQ的咳嗽聲和消息通知是否勾起了回憶呢？
以App「SOUL」的匹配按鈕為例，匹配中有音效，匹配成功，也會有個音效。
那么音效的實現(xiàn)是怎么的機(jī)制呢？是不是在后臺配置音頻文件，通過點擊按鈕調(diào)用呢？
實際上，一般不需要在后臺存儲音頻文件：
- 一來是因為音效變動不大，你看QQ的加好友的咳嗽聲用了那么多年。所以在客戶端寫死并不影響實際需要；
- 二來牽扯到觸發(fā)后，對交互的時效性要求較高，因為音頻文件會比圖標(biāo)大很多。
以「SOUL」為例，本來已經(jīng)匹配到用戶了，如果因為網(wǎng)速等導(dǎo)致了延遲，遲遲沒有發(fā)出匹配成功的聲音，那就尷尬了。所以使用音效，一般音頻文件，都是放在前端的。至于文件壓縮和音質(zhì)，就是個篩選的過程。
二、「聊天」發(fā)表情，是怎樣的機(jī)制
社交聊天，就需要發(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正式運(yùn)營階段，需要自己制作表情，避免盜用侵權(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條，哪怕沒來得及看就手機(jī)掉線了，也都當(dāng)做已讀處理。
3. 刪除消息
分兩類：一類是單條聊天記錄的刪除；另一類是整個聊天條目的刪除，大家用微信就知道。
4. 消息保存時長永久保存在服務(wù)器
用戶可以通過加載，分批查看歷史消息。
5、考慮聊天消息的復(fù)制、轉(zhuǎn)發(fā)、失敗重發(fā)等按鈕
1）已發(fā)出的文字和表情（包括發(fā)送失?。?/strong>
長按可以轉(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)用市場的邏輯，就是校驗到本手機(jī)沒有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ù)實時共享（如「滴滴」可以分享行程給他人共享實時位置）；邀請好友，分享快樂（如「王者榮耀」邀請朋友一起組團(tuán)開黑）；分享成就（如游戲獲得了九連勝等）。
七、頁面刷新加載的“蘿卜和泥”
刷新，是產(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采用翻過去之后加載，這樣可以極大的增強(qiáng)頁面的流暢感。
3. 設(shè)計loading標(biāo)示
1）loading標(biāo)示的樣式
菊花和進(jìn)度條是最基礎(chǔ)的loading標(biāo)示，若做成動畫，或者加入App品牌特色，就更顯誠意了。
2）loading標(biāo)示的位置
是在頂部、中部、還是底部呢？若看不出優(yōu)劣，就選一種，并向團(tuán)隊交代清楚，必要的時候做A/B測試。
4. 加載策略
在實現(xiàn)機(jī)制上，產(chǎn)品經(jīng)理要說清楚效果。比如：最遲不超過2s、要求某些內(nèi)容先加載出來等等。這樣就引導(dǎo)出了常見的幾種機(jī)制：異步加載、分模塊加載、懶加載和預(yù)加載等。
需要注意的是：加載機(jī)制不僅僅是受限于網(wǎng)速，更是信息泛濫時代的一種策略：讓用戶優(yōu)先看到什么，節(jié)約用戶精力，提高回報率。
八、Web在手機(jī)端的適配
產(chǎn)品官網(wǎng)，初期都很簡單，基本都是：產(chǎn)品介紹+下載鏈接。功能不復(fù)雜，因此可以考慮設(shè)置手機(jī)訪問官網(wǎng)的功能。
如上圖所示，手機(jī)端直接訪問PC官網(wǎng)體驗極差。因此需要一定程度的適配，大概會有以下幾種形式：
1. 極簡適配
極簡適配就是對內(nèi)容進(jìn)行刪減，直到剩下最后一個頁面，用一個頁面去呈現(xiàn)最基本的產(chǎn)品介紹以及下載按鈕。
2. 完全適配
做了全適配的官網(wǎng)會在手機(jī)端有良好的表現(xiàn)，當(dāng)然，Pc端的官網(wǎng)有時候體量太大，在適配到手機(jī)端的時候也要有刪減。
九、App第三方登錄的注意事項
社交類App登錄方式，基本已經(jīng)沉淀了這三種：賬號密碼、手機(jī)郵箱驗證碼、第三方賬號登陸。隨著社交類霸主的穩(wěn)固，很少注冊賬號密碼（與產(chǎn)品的定位和用戶群有關(guān)），多的是第三賬號登錄。
第三方登錄就是借助第三方應(yīng)用的接口實現(xiàn)用戶登記，比如常見的三家：微信、QQ、微博。毫無疑問，這是看上了小三的大腿，可以抱。
借助已經(jīng)形成的社交生態(tài)之火，去點燃另一團(tuán)社交生態(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ī)號的，而第三方登錄并不能獲取用戶已經(jīng)提供給第三方的手機(jī)號（用戶隱私）。
因此對用戶來說常常是使用第三方登錄后，仍然要跳轉(zhuǎn)到驗證手機(jī)號的界面，還不如直接使用手機(jī)驗證登錄。
3）后臺創(chuàng)建了自己的賬戶體系時，若沒有設(shè)計好合理的第三方和本地賬戶對接的方案，會導(dǎo)致同一個用戶在平臺上有多個賬號的情況發(fā)生
3. 總結(jié)
知道了第三方登錄有如此這般的優(yōu)點和缺點，但迫于它又確實是能夠為用戶一定程度上帶來便利。所以你必須想辦法折磨自己折磨設(shè)計然后折磨開發(fā)工程師，以此來盡可能帶來一個比較和諧的用戶使用體驗。
#專欄作家#
唧唧歪歪PM，公眾號：唧唧歪歪PM（ID：jjyypm），人人都是產(chǎn)品經(jīng)理專欄作家，2019年年度作者。《后端產(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)行手機(jī)號注冊”的操作成本的可接受度大大增加!
音頻一般是不能轉(zhuǎn)發(fā)的吧
前輩是轉(zhuǎn)入到社交領(lǐng)域了？我看你的文章有點從后端往前端轉(zhuǎn)啦？
搞個小公司，需要掌舵，充充電