本文5千字，圍繞社交類App的產(chǎn)品，對(duì)常見的9個(gè)方面的設(shè)計(jì)要點(diǎn)和原理，進(jìn)行摘要分享。

01

社交App設(shè)計(jì)「音效」實(shí)現(xiàn)機(jī)制

在社交過(guò)程中，音效的加入，讓事情變得有趣、及時(shí)。

QQ的咳嗽聲和消息通知是否勾起了回憶呢？

以App「SOUL」的匹配按鈕為例，匹配中有音效，匹配成功，也會(huì)有個(gè)音效。

那么音效的實(shí)現(xiàn)是怎樣的機(jī)制呢？

是不是在后臺(tái)配置音頻文件，通過(guò)點(diǎn)擊按鈕調(diào)用呢？

實(shí)際上，一般不需要在后臺(tái)存儲(chǔ)音頻文件。

一來(lái)是因?yàn)橐粜ё儎?dòng)不大，你看QQ的加好友的咳嗽聲用了那么多年。
所以在客戶端寫死并不影響實(shí)際需要。?
二來(lái)牽扯到觸發(fā)后，對(duì)交互的時(shí)效性要求較高。
因?yàn)橐纛l文件會(huì)比圖標(biāo)大很多。

以「SOUL」為例，本來(lái)已經(jīng)匹配到用戶了，如果因?yàn)榫W(wǎng)速等導(dǎo)致了延遲，遲遲沒(méi)有發(fā)出匹配成功的聲音，那就尷尬了。

所以使用音效，一般音頻文件，都是放在前端的。

至于文件壓縮和音質(zhì)，就是個(gè)篩選的過(guò)程。

02

「聊天」發(fā)表情，是怎樣的機(jī)制

社交聊天，就需要發(fā)表情。

在微信發(fā)一個(gè)表情出來(lái)，你發(fā)現(xiàn)顯示的是名稱[調(diào)皮]，而不是一個(gè)圖標(biāo)。

收到表情的一方，退出到聊天信息總列表，顯示的也是[調(diào)皮]。

那么為什么不是直接放一個(gè)表情在上面呢？

實(shí)際這與實(shí)現(xiàn)原理有關(guān)系。

當(dāng)發(fā)表情給對(duì)方的時(shí)候，實(shí)際上發(fā)的是這個(gè)表情對(duì)應(yīng)的ID——>服務(wù)器拿到這個(gè)ID之后，再傳給接收方的客戶端——>接收方收到，再解碼出一個(gè)表情，展示在客戶端。

用圖示如下：

因此，表情的發(fā)送，是發(fā)送給服務(wù)器一個(gè)對(duì)應(yīng)ID，而不是直接發(fā)送表情文件給對(duì)方的。

所以表情文件（圖文件）需要存在各自的客戶端，而不需存在服務(wù)器。

此外，客戶端還要存表情名稱和ID。

具體就是，客戶端需要以josn格式存儲(chǔ)表情圖-名稱-表情ID，如下圖這樣：

注意：灰度階段可以偷些表情用，但是App正式運(yùn)營(yíng)階段，需要自己制作表情，避免盜用侵權(quán)。

03

社區(qū)動(dòng)態(tài)的時(shí)間格式的定義

時(shí)間的顯示基本分兩類：

• 一類是展示在外層的，不需要很精準(zhǔn)的時(shí)間。比如聊天環(huán)境下的時(shí)間、用戶動(dòng)態(tài)外層顯示的時(shí)間；
  

• 另一種作為嚴(yán)格的時(shí)間落款，比如賬單明細(xì)。

后者基本可以一刀切，就用年月日時(shí)分秒，一般都不是問(wèn)題。

前者就要切合場(chǎng)景，對(duì)時(shí)間的要求和用戶情感的匹配性，融入一定的感情色彩或者暗示。

這里就有多種流派，比如推特和微信就區(qū)別很大。有興趣自行研究下。

筆者在這里整理一套自己用于聊天信息、評(píng)論、系統(tǒng)消息、動(dòng)態(tài)的時(shí)間的展示規(guī)則，可以作為借鑒：

剛剛（T<1分鐘）；?
XX分鐘前（1≤T<1h），比如53分鐘前；?
XX小時(shí)前（1h≤T<24h），比如23小時(shí)前；?
昨天+點(diǎn)鐘（24h≤T<48h），比如?昨天 12：20。?
日期+點(diǎn)鐘（48h≤T<1年）?比如：6-5 14:52，跨年則加上年 2018-12-9 16:21
年-月（1年≤T）?比如：2018-5

? 04

【消息】模塊的設(shè)計(jì)

1. 消息歸類

在設(shè)計(jì)消息菜單的時(shí)候，需要考慮默認(rèn)置頂、消息歸類等功能。讓目標(biāo)信息曝光增加，同時(shí)讓消息有條理。

比如：將系統(tǒng)與用戶的消息，放入【系統(tǒng)通知】，默認(rèn)折疊。

類于“文件夾”。點(diǎn)擊，則打開系統(tǒng)消息列表。

將用戶的【互動(dòng)通知】默認(rèn)展開。

2. 未讀提示：數(shù)字還是紅點(diǎn)呢？

一般而言，人與人的聊天顯示未讀條數(shù)，因?yàn)闀r(shí)效性要求高。

超過(guò)99條一般顯示99+。實(shí)際顯示99也可以，對(duì)用戶而言已無(wú)差異。非緊急的通知可以不顯示具體數(shù)字。

消息已讀的判斷標(biāo)準(zhǔn)：只要打開就算已讀。

哪怕眼前條只展出了1條，哪怕沒(méi)來(lái)得及看就手機(jī)掉線了，也都當(dāng)做已讀處理。

3. 刪除消息

分兩類：一類是單條聊天記錄的刪除；

一類是整個(gè)聊天條目的刪除。

大家用微信就知道。

4. 消息保存時(shí)長(zhǎng)

永久保存在服務(wù)器，用戶可以通過(guò)加載，分批查看歷史消息。

5、聊天消息記錄的操作

此外，需考慮聊天消息的復(fù)制、轉(zhuǎn)發(fā)、失敗重發(fā)等按鈕。

1）已發(fā)出的文字和表情（包括發(fā)送失敗）

長(zhǎng)按可以轉(zhuǎn)發(fā)、刪除、復(fù)制。

2）已發(fā)出的音頻、圖片和視頻（包括發(fā)送失敗）

長(zhǎng)按，可以轉(zhuǎn)發(fā)、刪除，但不能復(fù)制（系統(tǒng)不支持）；

點(diǎn)擊，打開預(yù)覽大圖，長(zhǎng)按大圖，彈出保存按鈕。

3）發(fā)送失敗的內(nèi)容

增加重復(fù)發(fā)送按鈕，或者點(diǎn)擊發(fā)送失敗的按鈕實(shí)現(xiàn)重發(fā)。

4）長(zhǎng)按消息記錄，彈出的操作框開口方向

就近原則，若消息在屏幕上方，則操作內(nèi)容在下方；反之，長(zhǎng)按后的操作框展示在內(nèi)容上方。

5）消息通知方式

根據(jù)緊要程度，選擇橫幅通知、鎖屏通知、菜單通知。

建議只對(duì)主要的信息用音效，盡量不要騷擾到用戶（PS：但是根據(jù)經(jīng)驗(yàn)，一般老板都會(huì)要求“騷擾”用戶。）

05

左右滑動(dòng)切換Tab頁(yè)簽

很多App的Tab頁(yè)簽，支持左右滑動(dòng)切換。

那么是不是在設(shè)計(jì)Tab頁(yè)簽的時(shí)候都要這樣規(guī)劃呢？

在確定這個(gè)方案時(shí)，產(chǎn)品經(jīng)理需要考慮如下：

1）明確滑動(dòng)切換頁(yè)簽的優(yōu)缺點(diǎn)

操作步驟上，點(diǎn)擊切換和滑動(dòng)切換，都是1個(gè)動(dòng)作事件。

只是通常來(lái)看，滑動(dòng)操作比點(diǎn)擊操作難度稍低，畢竟點(diǎn)擊需要找到觸發(fā)區(qū)。

2）另一個(gè)方面，支持滑動(dòng)切換可以覆蓋更多用戶的操作預(yù)期——假設(shè)用戶普遍習(xí)慣同類產(chǎn)品的滑動(dòng)切換的操作方式。

但是滑動(dòng)切換頁(yè)簽的操作本身也有弊端。

比如有時(shí)候本來(lái)是想上下滑動(dòng)的，但是手指一不小心就滑歪了，于是無(wú)意識(shí)觸發(fā)了滑動(dòng)事件，跳到了另一個(gè)頁(yè)面去。

可能就打斷用戶沉浸式體驗(yàn)。

基于以上，筆者建議如下:

1）沉浸式的瀑布流，比如抖音的視頻流，不推薦滑切Tab頁(yè)。

如果非要做，則將滑動(dòng)切換觸發(fā)靈敏度降低。

2）內(nèi)容長(zhǎng)度有限，或者閱讀速度快的Tab頁(yè)簽，可以使用滑切。

比如電商商品的【參數(shù)】、【評(píng)論】之間的切換。

3）除了左右滑動(dòng)切換Tab，還可以結(jié)合下翻切換：

如果頁(yè)面內(nèi)容較短，那么在下翻至Tab頁(yè)內(nèi)容結(jié)束的時(shí)候，緊接著就切換下一頁(yè)的內(nèi)容。比如：

最后要注意，不管做不做滑切，產(chǎn)品經(jīng)理都要給予開發(fā)人員明確的說(shuō)明。

06

分享功能的“借尸還魂”

1、分享的原理

第三方平臺(tái)提供了分享接口，目標(biāo)App對(duì)接后，獲取了對(duì)應(yīng)權(quán)限和功能支持。

因此在分享事件中，目標(biāo)App分享出去的內(nèi)容是客，“客隨主便”：

即：第三方支持什么，分享出去才能做什么。

通常，內(nèi)容分享出去之后，會(huì)在第三方平臺(tái)中以一定的格式展示。

這種格式不由產(chǎn)品經(jīng)理設(shè)計(jì)，而是第三方平臺(tái)規(guī)定的。（產(chǎn)品經(jīng)理需要確認(rèn)要展示的內(nèi)容）。

在第三方平臺(tái)中打開分享的內(nèi)容后，就會(huì)基于第三方平臺(tái)內(nèi)置環(huán)境進(jìn)行功能展示。

通常都會(huì)引導(dǎo)用戶觸發(fā)打開App，或到應(yīng)用市場(chǎng)下載App。

2、技術(shù)實(shí)現(xiàn)方面

第一步：接口對(duì)接，實(shí)現(xiàn)第三方系統(tǒng)的授權(quán)。

未授權(quán)的情況下做分享，會(huì)有類似下圖的提示：

第二步：實(shí)現(xiàn)功能需求

以分享小視頻到微信為例，若要在微信H5中實(shí)現(xiàn)視頻播放、點(diǎn)贊等功能，則要基于H5寫相關(guān)的代碼。

當(dāng)然也可以使用SDK（SDK通常本身支持多個(gè)系統(tǒng)：電腦、安卓、ios、H5等）。

而前面提到的跳轉(zhuǎn)到APP或應(yīng)用市場(chǎng)的邏輯，就是校驗(yàn)到本手機(jī)沒(méi)有App則跳轉(zhuǎn)到應(yīng)用市場(chǎng)下載，校驗(yàn)到已經(jīng)安裝則打開App。

但是在實(shí)現(xiàn)的時(shí)候，要了解第三方分享接口是否支持喚醒App。

若不能支持，那么就要借助其他方式間接實(shí)現(xiàn)需求。

3、產(chǎn)品經(jīng)理要確認(rèn)的

1）確定分享的場(chǎng)景或業(yè)務(wù)位點(diǎn)

比如，操縱完成或得到結(jié)果時(shí)提示分享（如截圖后、完成拍照和攝像時(shí)）、打開App時(shí)出彈層提示分享、勝利完成任務(wù)時(shí)提示分享（比如王者榮耀連勝的提示“炫耀一下”）。

2）確定分享的形式

主要有：文字或鏈接地址的分享（比如天貓和淘寶的“淘口令”）、圖片分享（靜態(tài)圖片、GIF動(dòng)圖）、音視頻類行形（標(biāo)記它是音頻或是視頻，并且可以直接在當(dāng)前頁(yè)播放）；網(wǎng)頁(yè)分享（帶有網(wǎng)頁(yè)縮略圖的）。

其中網(wǎng)頁(yè)分享是最常見的。以分享到微信為例，分享過(guò)去的網(wǎng)頁(yè)有自己的格式。

比如：同一個(gè)內(nèi)容，從APP或外部瀏覽器分享到微信，會(huì)顯示APP的名稱和縮略內(nèi)容，從微信內(nèi)置瀏覽器分享的就不會(huì)展示這些信息。

另外注意：分享網(wǎng)頁(yè)和分享鏈接是不同的分享形式。前者帶有網(wǎng)頁(yè)自身的縮略內(nèi)容，后者屬于文本范疇的分享，簡(jiǎn)單原始。

3）用戶打開的效果是什么

如果將分享理解為“借尸還魂”引流的話，那么打開分享鏈接之后，可以以最基礎(chǔ)的靜態(tài)畫面呈現(xiàn)，再次點(diǎn)擊頁(yè)面，則引導(dǎo)跳轉(zhuǎn)到App，或引導(dǎo)到應(yīng)用市場(chǎng)下載App。

但是，產(chǎn)品經(jīng)理需要知道，某些第三方的應(yīng)用不給提供便利，不支持跳轉(zhuǎn)到App。比如微信。

因此，設(shè)計(jì)時(shí)候考慮增加提示“使用本地瀏覽器打開”（假設(shè)瀏覽器是支持的）。這樣就借助一個(gè)新的橋梁“假途滅虢”實(shí)現(xiàn)需求了。如下圖這樣：。

4）最后，讓分享自然甚至驚喜

比如：

讓用戶獲得優(yōu)惠，得到好處（如「哈羅單車」通過(guò)分享獲得紅包）；

輔助業(yè)務(wù)實(shí)時(shí)共享（如「滴滴」可以分享行程給他人共享實(shí)時(shí)位置）；

邀請(qǐng)好友，分享快樂(lè)（如「王者榮耀」邀請(qǐng)朋友一起組團(tuán)開黑）；

分享成就（如游戲獲得了九連勝等）。

07

頁(yè)面刷新加載的“蘿卜和泥”

刷新，是產(chǎn)品經(jīng)理需要定義的常見的功能。

要么是手動(dòng)觸發(fā)刷新，要么是定時(shí)任務(wù)觸發(fā)。

定時(shí)任務(wù)觸發(fā)，比如1分鐘內(nèi)的消息顯示“剛剛”，那么系統(tǒng)就可以每一分鐘自動(dòng)刷新一次，使顯示合理的時(shí)間格式。

本文主要以手動(dòng)觸發(fā)說(shuō)明，產(chǎn)品經(jīng)理至少可以考慮四個(gè)方面的問(wèn)題：

1. 怎樣的觸發(fā)方式

列表頁(yè)面加載，主流觸發(fā)方式是滑動(dòng)，包括上下左右滑動(dòng)。

對(duì)于瀑布流的內(nèi)容為主的產(chǎn)品，刷新較為頻繁，除了使用滑動(dòng)加載之外，還可配合按鈕加載。

比如：【抖音】，可以雙擊底部菜單實(shí)現(xiàn)頁(yè)面刷新。

“滑動(dòng)+點(diǎn)擊”這樣的設(shè)計(jì)，避免用戶置身于視頻瀑布流中只靠單一滑動(dòng)帶來(lái)的枯燥和不適。

2. 打開新頁(yè)面加載的

刷新有打開新頁(yè)面的，也有在當(dāng)前頁(yè)面加載新內(nèi)容。

打開新頁(yè)面的，需要考慮如下：

1）翻頁(yè)方向

目前流行的交互方式，是左右平移或覆蓋平移，比較符合用戶對(duì)線性操作流程的的直觀感受。

加載發(fā)生在翻頁(yè)的前還是后呢？

2）翻頁(yè)前加載

適用于需要判斷及驗(yàn)證處理的頁(yè)面中。例如：表單信息判斷和登錄驗(yàn)證等。

而絕大部分app采用翻過(guò)去之后加載，這樣可以極大的增強(qiáng)頁(yè)面的流暢感。

3. 設(shè)計(jì)loading標(biāo)示

1）loading標(biāo)示的樣式

菊花和進(jìn)度條是最基礎(chǔ)的loading標(biāo)示，若做成動(dòng)畫，或者加入App品牌特色，就更顯誠(chéng)意了。

2）loading標(biāo)示的位置

是在頂部、中部、還是底部呢？

若看不出優(yōu)劣，就選一種，并向團(tuán)隊(duì)交代清楚，必要的時(shí)候做A/B測(cè)試。

4. 加載策略

在實(shí)現(xiàn)機(jī)制上，產(chǎn)品經(jīng)理要說(shuō)清楚效果。

比如：最遲不超過(guò)2s、要求某些內(nèi)容先加載出來(lái)等等。

這樣就引導(dǎo)出了常見的幾種機(jī)制：異步加載、分模塊加載、懶加載和預(yù)加載等。

需要注意的是：加載機(jī)制不僅僅是受限于網(wǎng)速，更是信息泛濫時(shí)代的一種策略：讓用戶優(yōu)先看到什么，節(jié)約用戶精力，提高回報(bào)率。

08

Web在手機(jī)端的適配

產(chǎn)品官網(wǎng)，初期都很簡(jiǎn)單，基本都是：產(chǎn)品介紹+下載鏈接。

功能不復(fù)雜，因此可以考慮設(shè)置手機(jī)訪問(wèn)官網(wǎng)的功能。

如上圖所示，手機(jī)端直接訪問(wèn)PC官網(wǎng)體驗(yàn)極差。

因此需要一定程度的適配，大概會(huì)有以下幾種形式：

1. 極簡(jiǎn)適配

極簡(jiǎn)適配就是對(duì)內(nèi)容進(jìn)行刪減，直到剩下最后一個(gè)頁(yè)面，用一個(gè)頁(yè)面去呈現(xiàn)最基本的產(chǎn)品介紹以及下載按鈕。

2. 完全適配

做了全適配的官網(wǎng)會(huì)在手機(jī)端有良好的表現(xiàn)。當(dāng)然，PC端的官網(wǎng)有時(shí)候體量太大，在適配到手機(jī)端的時(shí)候也要有刪減。

09

App第三方登錄的注意事項(xiàng)

社交類App登錄方式，基本已經(jīng)沉淀了這三種：賬號(hào)密碼、手機(jī)郵箱驗(yàn)證碼、第三方賬號(hào)登陸。

隨著社交類霸主的穩(wěn)固，很少注冊(cè)賬號(hào)密碼（與產(chǎn)品的定位和用戶群有關(guān)），多的是第三賬號(hào)登錄。

第三方登錄就是借助第三方應(yīng)用的接口實(shí)現(xiàn)用戶登記，比如常見的三家：微信、QQ、微博。毫無(wú)疑問(wèn)，這是看上了小三的大腿，可以抱。借助已經(jīng)形成的社交生態(tài)之火，去點(diǎn)燃另一團(tuán)社交生態(tài)。

1. 使用第三方登錄的目的

1）簡(jiǎn)化注冊(cè)環(huán)節(jié)，減少可能因?yàn)樽?cè)繁瑣帶來(lái)的用戶損失

2）關(guān)聯(lián)賬號(hào)，形成社交群落之間的呼應(yīng)，有利于用戶生態(tài)鏈的搭建。

比如：用戶可以把平臺(tái)上的某些內(nèi)容一鍵分享到第三方平臺(tái)；

3）獲取用戶的一部分已有信息，比如用戶信息或流量資源

4）節(jié)省用戶的記憶成本

用戶在使用多個(gè)應(yīng)用時(shí)，只需使用第三方登錄即可，無(wú)需記得每個(gè)平臺(tái)的賬戶和密碼。

2. 使用第三方登錄的注意點(diǎn)

1）第三方賬號(hào)給的資料完善度和安全性不好把控。

比如你期望獲取QQ中的頭像、昵稱、年齡、地區(qū)，但是QQ可能只給你頭像和昵稱。

又比如有一天第三方封了接口，那么第三方登錄功能就停擺了。還有注銷了第三方賬號(hào)的情況。

2）第三方登錄方式，對(duì)用戶來(lái)說(shuō)不一定就是省時(shí)省力的渠道。

因?yàn)橄嚓P(guān)法規(guī)的要求很多APP是需要用戶手機(jī)號(hào)的，而第三方登錄并不能獲取用戶已經(jīng)提供給第三方的手機(jī)號(hào)（用戶隱私）。

因此對(duì)用戶來(lái)說(shuō)常常是使用第三方登錄后，仍然要跳轉(zhuǎn)到驗(yàn)證手機(jī)號(hào)的界面，還不如直接使用手機(jī)驗(yàn)證登錄。

3）后臺(tái)創(chuàng)建了自己的賬戶體系時(shí)，若沒(méi)有設(shè)計(jì)好合理的第三方和本地賬戶對(duì)接的方案，會(huì)導(dǎo)致同一個(gè)用戶在平臺(tái)上有多個(gè)賬號(hào)的情況發(fā)生。

3. 總結(jié)

知道了第三方登錄有如此這般的優(yōu)點(diǎn)和缺點(diǎn)，但迫于它又確實(shí)是能夠?yàn)橛脩粢欢ǔ潭壬蠋?lái)便利。

所以你必須想辦法折磨自己折磨設(shè)計(jì)然后折磨開發(fā)工程師，以此來(lái)盡可能帶來(lái)一個(gè)比較和諧的用戶使用體驗(yàn)。

↘好文推薦：

字節(jié)跳動(dòng)如何做教育？ | 詳解

5個(gè)步驟，繪制高質(zhì)量的業(yè)務(wù)流程圖

騰訊產(chǎn)品經(jīng)理的一天是啥樣的？

點(diǎn)個(gè)“在看”吧

總結(jié)

以上是生活随笔為你收集整理的社交类产品设计的9个点，整不好会挨怼~的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。