本文重點(diǎn)調(diào)研了“返回頂部”功能，同時也對刷新、懸浮窗和底部Tab的相關(guān)功能進(jìn)行了分析與探討。以上功能的實(shí)現(xiàn)方式及組合比較多樣化，具體還要根據(jù)實(shí)際業(yè)務(wù)和目的來進(jìn)行產(chǎn)品設(shè)計。

今天聊聊產(chǎn)品細(xì)節(jié)，通過對比各家信息流產(chǎn)品返回頂部的異同，思考下里面的細(xì)節(jié)。

首先，咬文嚼字一下，是滑動還是劃動，有兩點(diǎn)可以幫助我們區(qū)分：

劃：

1. 通常是一次性的或者間歇性動作的。（比如劃船，拿刀劃一下）

2. 一個物體進(jìn)入到另一個物理。（劃開水面，用刀劃開）

滑：

1. 通常是連續(xù)的、平滑的。

2. 一個物體在另一個物理上（接觸面）移動

所以，這樣看來，信息流產(chǎn)品中的動作應(yīng)該用“滑動”。

一、關(guān)于返回頂部

滑動瀏覽內(nèi)容的時候我們時常會有想快速回到頂部的需求，以各主流內(nèi)容型產(chǎn)品為對象，重點(diǎn)看一下返回頂部觸發(fā)功能的位置、操作動作、觸發(fā)后的響應(yīng)，以及思考下背后的因果。

為方便描述，頂部都稱為標(biāo)簽，底部稱為Tab。

1. 微信朋友圈

微信朋友圈，雙擊頂部欄，觸發(fā)快速回到頂部并刷新，微信不愧為業(yè)內(nèi)產(chǎn)品的標(biāo)桿，功能入口唯一，刷新時的彩虹圈設(shè)計也讓人愉悅，有種“晶瑩剔透”的感覺。

細(xì)思下原因——哦，原來是封面是我自己照片，所以愉悅。這時求生欲極強(qiáng)的我意識到了潛在的風(fēng)險，馬上把背景圖換成了拉著老婆的手。

再細(xì)想一下，微信的設(shè)計讓用戶每次在執(zhí)行刷新操作的時候都能看到自己（或自己喜歡的）照片。其實(shí)還有另外一點(diǎn)原因增加了愉悅感，就是那個彩虹滾動的速度和位置，趣味感較強(qiáng)。

朋友圈頂部欄刷新和彩虹圈

2. 今日頭條

今日頭條，單擊頂部標(biāo)簽和底部4Tab的“首頁”，觸發(fā)快速回到頂部并刷新。

功能入口做了一些冗余，應(yīng)該是考慮到頭條用戶群結(jié)構(gòu)較復(fù)雜。大多數(shù)內(nèi)容型產(chǎn)品返回頂部時都捎帶著一起刷新了。一方面滿足了用戶需求，另一方面也順手提高了曝光量KPI。

3. 脈脈

脈脈，職場社交的新貴，還處在多變上升期，信息流內(nèi)容在里面占較大比重，他們的內(nèi)容運(yùn)營做得比較狂野犀利，這方面在本文不展開細(xì)聊。

從返回頂部及刷新來看，單擊頂部標(biāo)簽和底部相應(yīng)Tab，都會觸發(fā)。與今日頭條的區(qū)別是隨著信息流內(nèi)容的滑動，底部Tab會變換圖標(biāo)，以更好地給用戶提示。后面也會看到很多家都采用了類似設(shè)計。

脈脈底部Tab變成刷新按鈕

4. 美團(tuán)首頁

美團(tuán)首頁，其實(shí)也是信息流，與他們做這塊的技術(shù)溝通過，他們在這塊的資源投入其實(shí)是很大的，有很強(qiáng)的推薦算法團(tuán)隊(duì)。精準(zhǔn)度提高0.1個百分點(diǎn)，每天就會增加幾百萬的營收。

美團(tuán)也是底部Tab隨著信息流滾動變換圖標(biāo)，但區(qū)別是美團(tuán)只回到頂部，并不刷新。這與美團(tuán)的業(yè)務(wù)和產(chǎn)品結(jié)構(gòu)有較大關(guān)系：

a）通常信息流回到頂部是帶有明顯的刷新意愿的，而美團(tuán)的首頁頂部有較多固定功能入口（其實(shí)也是重要的流量入口）。所以這個返回頂部的潛臺詞更多的是“定位到入口”。

b）同時美團(tuán)首頁的信息流帶有明顯的比較意愿，往回倒，找剛剛瀏覽過的一些東西的可能性也是較大的，直接刷新會增加尋找剛剛看到的難度。

c）新聞類的收入來自曝光量，美團(tuán)的收入來自于點(diǎn)擊購買。所以美團(tuán)會將一些你可能感興趣的東西，反復(fù)地推送給你以加深種草購買意愿。

以上三個方面結(jié)合起來看，大概是美團(tuán)只返回不刷新的原因。

美團(tuán)首個Tab變成返回頂部按鈕

5. 網(wǎng)易新聞

網(wǎng)易新聞，也是比較特殊的，除了跟頭條意義的，上標(biāo)簽和下Tab都可以刷新，同時在屏幕右側(cè)偏下方放了一個懸浮的“刷新”按鈕。

但是一個功能入口有三處且有一處是懸浮，從產(chǎn)品設(shè)計角度來講多少有些蛋疼。

所以網(wǎng)易新聞對這個懸浮按鈕做了特殊處理，平衡了美觀度和實(shí)用性。

• 第一，內(nèi)容已經(jīng)滑動得比較遠(yuǎn)了（大概兩三屏的位置以后）才出現(xiàn)。
• 第二，滑動過程中做了明顯的透明弱化，讓其影響盡可能小，如圖所示。

網(wǎng)易新聞滑動至第三屏出現(xiàn)的懸浮刷新按鈕

再繼續(xù)滑動時按鈕的透明弱化效果

6. 京東

京東，做了上面兩者的結(jié)合。

在底部Tab上也做了明顯變化，點(diǎn)擊相應(yīng)的Tab后，Tab的圖標(biāo)和文案直接就變?yōu)椤八⑿隆保辉匐S著信息流的滑動而變化，點(diǎn)擊頂部的標(biāo)簽不再響應(yīng)。

同時類似網(wǎng)易新聞，在滑動比較遠(yuǎn)的時候，出現(xiàn)了“返回頂部”懸浮按鈕，這個要比網(wǎng)易新聞更遠(yuǎn)，大概在四五屏的位置。

所以京東是懸浮按鈕返回頂部，單擊底部Tab和下拉均可進(jìn)行刷新（不同操作提示語也會有不同）。懸浮按鈕做了一些弱化處理，但沒有網(wǎng)易做得感覺好。

京東的底部刷新和懸浮返回頂部按鈕

從以上幾個例子中可以看出，有幾種比較主流的滑動到頂部的做法，位置有頂部欄、頂部Tab、底部Tab、懸浮窗（按鈕），根據(jù)業(yè)務(wù)和用戶群不同會有不同的使用或組合使用?；径际菃螕舨僮?，頂部欄是雙擊的，也比較符合常規(guī)認(rèn)知和操作習(xí)慣。根據(jù)產(chǎn)品結(jié)構(gòu)和業(yè)務(wù)的不同，絕大部分是直接刷新，個別是只返回頂部，也有做兩者結(jié)合的。

二、關(guān)于刷新

鑒于返回頂部與刷新有不可分割的關(guān)系，捎帶說一下刷新，默認(rèn)刷新方式各家基本都是下拉刷新，在刷新位置、文案、交互動畫等方面也會有較大差異。以美團(tuán)和今日頭條為例。

美團(tuán)的下拉刷新提示位置是在最頂部，整個頁面都會被下拉，類似于微信小程序，出現(xiàn)一個菊花圈作為提示，搜索框中的預(yù)設(shè)搜索文案會有變化，下面的信息流內(nèi)容也會有變化。

頭條的下拉是比較經(jīng)典的，整個流程分解開并均有細(xì)微的提示，位置在頂部標(biāo)簽頁下方：

1. 下拉一點(diǎn)出現(xiàn)“下拉推薦”提示
2. 再下拉一點(diǎn)出現(xiàn)“松開推薦”操作提示
3. 松開出現(xiàn)“正在努力加載”提示
4. 刷新成功后的顯著的藍(lán)框大字反饋“今日頭條推薦引擎有N條更新”

其他失敗或異常分支不再贅述。

三、關(guān)于懸浮窗

這里要重點(diǎn)說一下懸浮窗，剛開始做產(chǎn)品經(jīng)理的時候覺得懸浮窗真是個好東西，增加了很強(qiáng)的承載力而且也很方便，市面上有多家產(chǎn)品以各種各樣的方式運(yùn)用懸浮窗。

隨著做的時間久了，看的和思考的東西多了，覺得懸浮窗并不是非常好的設(shè)計，會有一些雜亂，不干凈，對懸浮窗有了一定的排斥心理。

有一款跨游戲的實(shí)時語音交流工具，把懸浮窗用到了極致，是跨應(yīng)用的，在屏幕上常駐的超級入口，它會影響部分其他APP的體驗(yàn)，在下沉或者垂直領(lǐng)域應(yīng)該會有一定的市場。

上面提到的美團(tuán)和京東那種，底Tab圖標(biāo)樣式變化的，比較簡潔，復(fù)用性高，省空間，辨識度強(qiáng)，有名門正派之風(fēng)。

再后來注意到了微信文章的“浮窗”功能，其實(shí)這是一個剛需。

在文章看一半的時候特別是篇幅比較長的那種，來了一條重要信息需要回復(fù)，再回頭找很麻煩——微信又沒有瀏覽記錄，按圖索驥需要記憶力比較強(qiáng)且點(diǎn)擊多次，萬一入口是朋友圈里的文章，點(diǎn)回去又特么重新刷新了，還得翻著找，還是先收藏一下再跳出去吧……

有了浮窗功能確實(shí)會方便很多。但為了避免雜亂不干凈的現(xiàn)象，微信做了一些特殊處理——浮窗只有在手機(jī)屏幕兩側(cè)邊可?？浚抑挥性谖⑿懦绦蛟谄聊磺芭_的時候才出現(xiàn)，拖動時候右下角有較大面積的紅色區(qū)域，移動至此處可關(guān)閉浮窗。這種設(shè)計大大降低了雜亂不干凈的現(xiàn)象。

陌陌也有懸浮窗的設(shè)計，直播視頻的小窗懸浮，可以邊看視頻邊聊天。考慮到陌陌的群體、業(yè)務(wù)功能和變現(xiàn)需求，有其合理性，但也不具備普世性，畢竟陌陌有很強(qiáng)的獨(dú)特性。

現(xiàn)在對懸浮窗倒不心存敵意了，蘋果的操作懸浮按鈕、知乎的站外引流按鈕其實(shí)都是懸浮窗，在適當(dāng)?shù)牡胤角擅畹赜泄?jié)制地運(yùn)用是加分項(xiàng)。再回過來頭來看網(wǎng)易新聞的懸浮刷新按鈕，就比較恰當(dāng)了。

知乎的站外引流懸浮窗按鈕

四、關(guān)于底部Tab

剛剛多次提到了底部4Tab，這是目前比較主流的做法，也有做活動的時候變5Tab，還有3Tab甚至2Tab的。

在研究返回頂部和刷新的時候，觀察到底部Tab的一個小細(xì)節(jié)點(diǎn)：有一些點(diǎn)擊Tab會觸發(fā)刷新頁面操作，有些點(diǎn)擊后沒有功能性響應(yīng)，但會觸發(fā)交互動畫，有些甚至連交互也沒有。

以微信為例，單擊是沒有交互和功能觸發(fā)的，但是雙擊首個Tab，會觸發(fā)消息列表向下滾動，到最近一條的未讀消息。

通常Tab屬于框架層（APK更新），Tab里的內(nèi)容相對靈活（SDK更新），所以在產(chǎn)品設(shè)計的時候，如果想預(yù)留出擴(kuò)展空間，在框架上應(yīng)留出事件和數(shù)據(jù)接口。

本文重點(diǎn)調(diào)研了“返回頂部”功能，捎帶手也看了下刷新、懸浮窗和底部Tab的相關(guān)功能。實(shí)現(xiàn)方式及組合比較多樣化，具體還要根據(jù)實(shí)際業(yè)務(wù)和目的來進(jìn)行產(chǎn)品設(shè)計。

作者：齊齊獸，公眾號：齊齊獸。技術(shù)轉(zhuǎn)產(chǎn)品經(jīng)理，千萬DAU平臺社交和內(nèi)容負(fù)責(zé)人。

本文由@齊齊獸 原創(chuàng)發(fā)布與人人都是產(chǎn)品經(jīng)理，未經(jīng)允許，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議