你應該知道的5種刷新樣式

刷新是最常用的操作之一，主要作用是刷新頁面中的緩存，從服務器獲取新的內容。最近在瀏覽 APP 的過程中注意到，不同場景中使用的刷新樣式完全不同，再此之前雖然每天都在進行刷新操作，卻從來沒有留心過這些細節，這篇文章就和大家分享5種刷新樣式。

目錄：

下拉刷新
提示刷新
模塊刷新按鈕
彈出刷新按鈕
tab 刷新
總結

下拉刷新

使用下拉手勢完成刷新操作，這是最常見的一種刷新樣式，常出現在頁面的頂部，絕大多數頁面都有它的存在。它試用於列表、卡片集合等界面內容按照時間降序排列的場景。每一次刷新後，系統都會把新的內容放到頁面顯眼的位置。它已經成爲了 APP 中必備的刷新方法，是非常重要的一種樣式。

如下圖：

以知乎、嗶哩嗶哩、蝦米音樂爲例，這三個APP 分別以文字、視頻、音樂爲主要內容，分別按照列表、柵格列表、卡片集合三種方式排布，它們都使用了下拉刷新。

優點：使用非常廣泛，已經成爲 APP 的標配，幾乎沒有學習成本，而且下拉屏幕就可以刷新，操作非常簡單。

PS：很多公司把品牌形象和 logo 植入到下拉刷新的操作中，替換了常規的刷新按鈕，這樣可以把自己的品牌形象從細節上傳達給用戶。

如下圖：

提示刷新

這種樣式會在用戶瀏覽完頁面中最新內容的時候，提示用戶進行刷新，常出現在“剛看完的內容”與“上一次看完的內容”之間。在內容刷新有數量限制要求的時候，我們就可以使用這種樣式。每次刷新，系統都會推送一定數量的最新內容供用戶瀏覽。它常以一段文字的形式來顯示，如“剛剛看到這裏了，點擊刷新”。

如下圖：

以百度貼吧和嗶哩嗶哩爲例，我數了一下，百度貼吧的首頁每次會刷新12條新內容，嗶哩嗶哩的首頁推薦每次會刷新10個新視頻，它們都會在用戶瀏覽完最新的推送內容後發出提示。

優點：這種方式可以避免用戶看到重複的內容，而且用戶不用返回頂部就可以刷新，節省了用戶的操作成本。

模塊刷新按鈕

顧名思義，這種樣式通常出現在一個內容模塊的底部，使用一個單獨的按鈕來顯示。它試用於同一個頁面有較多模塊、每個模塊內容都不相同的場景中。每次刷新完後，對應的那個模塊會全部更換新的內容。通常會用“換一換”、“換一批”等類似的字眼。

如下圖：

以騰訊動漫和騰訊視頻爲例，它們分別是漫畫、視頻類 APP，它們的界面都是由各種類型的內容組成，所以分爲了很多個模塊（多模塊的好處是可以節省用戶篩選的時間，因爲系統已經歸好類了，用戶直接瀏覽自己感興趣的即可），它們給每個模塊都設置了刷新按鈕。

優點：用戶如果對某個模塊中顯示的內容不夠感興趣卻又不想點擊進去看全部內容，那麼就可以方便地單獨對這個模塊進行刷新，也省去了返回頂部刷新的步驟，縮短了操作路徑，節省了用戶的操作成本。

彈出刷新按鈕

這種樣式就是在瀏覽內容的過程中，模塊底部會彈出刷新按鈕。它的使用場景和上一種樣式“模塊按鈕刷新”類似，不同的地方在於它是彈出來的按鈕，而上種方式是固定的按鈕，它“忽然彈出”的這個動效讓人很容易就注意到它。

如下圖：

以開眼爲例（目前只在開眼中發現了這種樣式），在向上滑動的過程中，模塊底部會忽然彈出一個刷新按鈕，提示你刷新推薦內容。我對這種刷新方式的理解是：開眼的產品目標是爲用戶提供有料、有趣、好玩的高品質視頻，用戶羣裏比較年輕，充滿個性，這種新奇活潑的刷新方式更貼合品牌形象，更受年輕用戶的喜歡。

優點：方便用戶對單獨模塊進行刷新，節省了操作成本，並且動效活潑，更容易引起人們的注意。

tab 刷新

當用戶瀏覽完一定數量的內容後，首頁 icon 自動變成了一個刷新按鈕，常出現在底部 tab 的位置。它試用於模塊單一、內容會向下無限加載，且底部 tab 不會消失的場景中。用戶在瀏覽頁面的過程中如果對所有的內容都感到枯燥了，就可以用這個功能來進行刷新。它對於內容無限向下加載的界面，是非常重要的刷新樣式。

如下圖：