起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識淺談內容型信息流產品的“返回頂部”功能
本文重點調研了“返回頂部”功能，同時也對刷新、懸浮窗和底部Tab的相關功能進行了分析與探討。以上功能的實現方式及組合比較多樣化，具體還要根據實際業務和目的來進行產品設計。
今天聊聊產品細節，通過對比各家信息流產品返回頂部的異同，思考下里面的細節。
首先，咬文嚼字一下，是滑動還是劃動，有兩點可以幫助我們區分：
劃：
1. 通常是一次性的或者間歇性動作的。（比如劃船，拿刀劃一下）
2. 一個物體進入到另一個物理。（劃開水面，用刀劃開）
滑：
1. 通常是連續的、平滑的。
2. 一個物體在另一個物理上（接觸面）移動
所以，這樣看來，信息流產品中的動作應該用“滑動”。
一、關于返回頂部
滑動瀏覽內容的時候我們時常會有想快速回到頂部的需求，以各主流內容型產品為對象，重點看一下返回頂部觸發功能的位置、操作動作、觸發后的響應，以及思考下背后的因果。
為方便描述，頂部都稱為標簽，底部稱為Tab。
1. 微信朋友圈
微信朋友圈，雙擊頂部欄，觸發快速回到頂部并刷新，微信不愧為業內產品的標桿，功能入口唯一，刷新時的彩虹圈設計也讓人愉悅，有種“晶瑩剔透”的感覺。
細思下原因——哦，原來是封面是我自己照片，所以愉悅。這時求生欲極強的我意識到了潛在的風險，馬上把背景圖換成了拉著老婆的手。
再細想一下，微信的設計讓用戶每次在執行刷新操作的時候都能看到自己（或自己喜歡的）照片。其實還有另外一點原因增加了愉悅感，就是那個彩虹滾動的速度和位置，趣味感較強。
朋友圈頂部欄刷新和彩虹圈
2. 今日頭條
今日頭條，單擊頂部標簽和底部4Tab的“首頁”，觸發快速回到頂部并刷新。
功能入口做了一些冗余，應該是考慮到頭條用戶群結構較復雜。大多數內容型產品返回頂部時都捎帶著一起刷新了。一方面滿足了用戶需求，另一方面也順手提高了曝光量KPI。
3. 脈脈
脈脈，職場社交的新貴，還處在多變上升期，信息流內容在里面占較大比重，他們的內容運營做得比較狂野犀利，這方面在本文不展開細聊。
從返回頂部及刷新來看，單擊頂部標簽和底部相應Tab，都會觸發。與今日頭條的區別是隨著信息流內容的滑動，底部Tab會變換圖標，以更好地給用戶提示。后面也會看到很多家都采用了類似設計。
脈脈底部Tab變成刷新按鈕
4. 美團首頁
美團首頁，其實也是信息流，與他們做這塊的技術溝通過，他們在這塊的資源投入其實是很大的，有很強的推薦算法團隊。精準度提高0.1個百分點，每天就會增加幾百萬的營收。
美團也是底部Tab隨著信息流滾動變換圖標，但區別是美團只回到頂部，并不刷新。這與美團的業務和產品結構有較大關系：
a）通常信息流回到頂部是帶有明顯的刷新意愿的，而美團的首頁頂部有較多固定功能入口（其實也是重要的流量入口）。所以這個返回頂部的潛臺詞更多的是“定位到入口”。
b）同時美團首頁的信息流帶有明顯的比較意愿，往回倒，找剛剛瀏覽過的一些東西的可能性也是較大的，直接刷新會增加尋找剛剛看到的難度。
c）新聞類的收入來自曝光量，美團的收入來自于點擊購買。所以美團會將一些你可能感興趣的東西，反復地推送給你以加深種草購買意愿。
以上三個方面結合起來看，大概是美團只返回不刷新的原因。
美團首個Tab變成返回頂部按鈕
5. 網易新聞
網易新聞，也是比較特殊的，除了跟頭條意義的，上標簽和下Tab都可以刷新，同時在屏幕右側偏下方放了一個懸浮的“刷新”按鈕。
但是一個功能入口有三處且有一處是懸浮，從產品設計角度來講多少有些蛋疼。
所以網易新聞對這個懸浮按鈕做了特殊處理，平衡了美觀度和實用性。
- 第一，內容已經滑動得比較遠了（大概兩三屏的位置以后）才出現。
- 第二，滑動過程中做了明顯的透明弱化，讓其影響盡可能小，如圖所示。
網易新聞滑動至第三屏出現的懸浮刷新按鈕
再繼續滑動時按鈕的透明弱化效果
6. 京東
京東，做了上面兩者的結合。
在底部Tab上也做了明顯變化，點擊相應的Tab后，Tab的圖標和文案直接就變為“刷新”，不再隨著信息流的滑動而變化，點擊頂部的標簽不再響應。
同時類似網易新聞，在滑動比較遠的時候，出現了“返回頂部”懸浮按鈕，這個要比網易新聞更遠，大概在四五屏的位置。
所以京東是懸浮按鈕返回頂部，單擊底部Tab和下拉均可進行刷新（不同操作提示語也會有不同）。懸浮按鈕做了一些弱化處理，但沒有網易做得感覺好。
京東的底部刷新和懸浮返回頂部按鈕
從以上幾個例子中可以看出，有幾種比較主流的滑動到頂部的做法，位置有頂部欄、頂部Tab、底部Tab、懸浮窗（按鈕），根據業務和用戶群不同會有不同的使用或組合使用?；径际菃螕舨僮鳎敳繖谑请p擊的，也比較符合常規認知和操作習慣。根據產品結構和業務的不同，絕大部分是直接刷新，個別是只返回頂部，也有做兩者結合的。
二、關于刷新
鑒于返回頂部與刷新有不可分割的關系，捎帶說一下刷新，默認刷新方式各家基本都是下拉刷新，在刷新位置、文案、交互動畫等方面也會有較大差異。以美團和今日頭條為例。
美團的下拉刷新提示位置是在最頂部，整個頁面都會被下拉，類似于微信小程序，出現一個菊花圈作為提示，搜索框中的預設搜索文案會有變化，下面的信息流內容也會有變化。
頭條的下拉是比較經典的，整個流程分解開并均有細微的提示，位置在頂部標簽頁下方：
- 下拉一點出現“下拉推薦”提示
- 再下拉一點出現“松開推薦”操作提示
- 松開出現“正在努力加載”提示
- 刷新成功后的顯著的藍框大字反饋“今日頭條推薦引擎有N條更新”
其他失敗或異常分支不再贅述。
三、關于懸浮窗
這里要重點說一下懸浮窗，剛開始做產品經理的時候覺得懸浮窗真是個好東西，增加了很強的承載力而且也很方便，市面上有多家產品以各種各樣的方式運用懸浮窗。
隨著做的時間久了，看的和思考的東西多了，覺得懸浮窗并不是非常好的設計，會有一些雜亂，不干凈，對懸浮窗有了一定的排斥心理。
有一款跨游戲的實時語音交流工具，把懸浮窗用到了極致，是跨應用的，在屏幕上常駐的超級入口，它會影響部分其他APP的體驗，在下沉或者垂直領域應該會有一定的市場。
上面提到的美團和京東那種，底Tab圖標樣式變化的，比較簡潔，復用性高，省空間，辨識度強，有名門正派之風。
再后來注意到了微信文章的“浮窗”功能，其實這是一個剛需。
在文章看一半的時候特別是篇幅比較長的那種，來了一條重要信息需要回復，再回頭找很麻煩——微信又沒有瀏覽記錄，按圖索驥需要記憶力比較強且點擊多次，萬一入口是朋友圈里的文章，點回去又特么重新刷新了，還得翻著找，還是先收藏一下再跳出去吧……
有了浮窗功能確實會方便很多。但為了避免雜亂不干凈的現象，微信做了一些特殊處理——浮窗只有在手機屏幕兩側邊可?？?，且只有在微信程序在屏幕前臺的時候才出現，拖動時候右下角有較大面積的紅色區域，移動至此處可關閉浮窗。這種設計大大降低了雜亂不干凈的現象。
陌陌也有懸浮窗的設計，直播視頻的小窗懸浮，可以邊看視頻邊聊天?？紤]到陌陌的群體、業務功能和變現需求，有其合理性，但也不具備普世性，畢竟陌陌有很強的獨特性。
現在對懸浮窗倒不心存敵意了，蘋果的操作懸浮按鈕、知乎的站外引流按鈕其實都是懸浮窗，在適當的地方巧妙地有節制地運用是加分項。再回過來頭來看網易新聞的懸浮刷新按鈕，就比較恰當了。
知乎的站外引流懸浮窗按鈕
四、關于底部Tab
剛剛多次提到了底部4Tab，這是目前比較主流的做法，也有做活動的時候變5Tab，還有3Tab甚至2Tab的。
在研究返回頂部和刷新的時候，觀察到底部Tab的一個小細節點：有一些點擊Tab會觸發刷新頁面操作，有些點擊后沒有功能性響應，但會觸發交互動畫，有些甚至連交互也沒有。
以微信為例，單擊是沒有交互和功能觸發的，但是雙擊首個Tab，會觸發消息列表向下滾動，到最近一條的未讀消息。
通常Tab屬于框架層（APK更新），Tab里的內容相對靈活（SDK更新），所以在產品設計的時候，如果想預留出擴展空間，在框架上應留出事件和數據接口。
本文重點調研了“返回頂部”功能，捎帶手也看了下刷新、懸浮窗和底部Tab的相關功能。實現方式及組合比較多樣化，具體還要根據實際業務和目的來進行產品設計。
作者：齊齊獸，公眾號：齊齊獸。技術轉產品經理，千萬DAU平臺社交和內容負責人。
本文由@齊齊獸 原創發布與人人都是產品經理，未經允許，禁止轉載。
題圖來自Unsplash, 基于CC0協議
這個功能在水果機是自帶的
此前還沒有關注過微信的回到頂部，更多的習慣于點擊刷新的按鈕
表白齊齊獸，愛上你了