重新整理是最常用的操作之一，主要作用是重新整理頁面中的緩存，從伺服器擷取新的内容。最近在浏覽 APP 的過程中注意到，不同場景中使用的重新整理樣式完全不同，再此之前雖然每天都在進行重新整理操作，卻從來沒有留心過這些細節，這篇文章就和大家分享5種重新整理樣式。
目錄：
- 下拉重新整理
- 提示重新整理
- 子產品重新整理按鈕
- 彈出重新整理按鈕
- tab 重新整理
- 總結
下拉重新整理
使用下拉手勢完成重新整理操作，這是最常見的一種重新整理樣式，常出現在頁面的頂部，絕大多數頁面都有它的存在。它試用于清單、卡片集合等界面内容按照時間降序排列的場景。每一次重新整理後，系統都會把新的内容放到頁面顯眼的位置。它已經成為了 APP 中必備的重新整理方法，是非常重要的一種樣式。
如下圖：
以知乎、哔哩哔哩、蝦米音樂為例，這三個APP 分别以文字、視訊、音樂為主要内容，分别按照清單、栅格清單、卡片集合三種方式排布，它們都使用了下拉重新整理。
優點：使用非常廣泛，已經成為 APP 的标配，幾乎沒有學習成本，而且下拉螢幕就可以重新整理，操作非常簡單。
PS：很多公司把品牌形象和 logo 植入到下拉重新整理的操作中，替換了正常的重新整理按鈕，這樣可以把自己的品牌形象從細節上傳達給使用者。
如下圖：
提示重新整理
這種樣式會在使用者浏覽完頁面中最新内容的時候，提示使用者進行重新整理，常出現在“剛看完的内容”與“上一次看完的内容”之間。在内容重新整理有數量限制要求的時候，我們就可以使用這種樣式。每次重新整理，系統都會推送一定數量的最新内容供使用者浏覽。它常以一段文字的形式來顯示，如“剛剛看到這裡了，點選重新整理”。
如下圖：
以百度貼吧和哔哩哔哩為例，我數了一下，百度貼吧的首頁每次會重新整理12條新内容，哔哩哔哩的首頁推薦每次會重新整理10個新視訊，它們都會在使用者浏覽完最新的推送内容後發出提示。
優點：這種方式可以避免使用者看到重複的内容，而且使用者不用傳回頂部就可以重新整理，節省了使用者的操作成本。
子產品重新整理按鈕
顧名思義，這種樣式通常出現在一個内容子產品的底部，使用一個單獨的按鈕來顯示。它試用于同一個頁面有較多子產品、每個子產品内容都不相同的場景中。每次重新整理完後，對應的那個子產品會全部更換新的内容。通常會用“換一換”、“換一批”等類似的字眼。
如下圖：
以騰訊動漫和騰訊視訊為例，它們分别是漫畫、視訊類 APP，它們的界面都是由各種類型的内容組成，是以分為了很多個子產品(多子產品的好處是可以節省使用者篩選的時間，因為系統已經歸好類了，使用者直接浏覽自己感興趣的即可)，它們給每個子產品都設定了重新整理按鈕。
優點：使用者如果對某個子產品中顯示的内容不夠感興趣卻又不想點選進去看全部内容，那麼就可以友善地單獨對這個子產品進行重新整理，也省去了傳回頂部重新整理的步驟，縮短了操作路徑，節省了使用者的操作成本。
彈出重新整理按鈕
這種樣式就是在浏覽内容的過程中，子產品底部會彈出重新整理按鈕。它的使用場景和上一種樣式“子產品按鈕重新整理”類似，不同的地方在于它是彈出來的按鈕，而上種方式是固定的按鈕，它“忽然彈出”的這個動效讓人很容易就注意到它。
如下圖：
以開眼為例(目前隻在開眼中發現了這種樣式)，在向上滑動的過程中，子產品底部會忽然彈出一個重新整理按鈕，提示你重新整理推薦内容。我對這種重新整理方式的了解是：開眼的産品目标是為使用者提供有料、有趣、好玩的高品質視訊，使用者群裡比較年輕，充滿個性，這種新奇活潑的重新整理方式更貼合品牌形象，更受年輕使用者的喜歡。
優點：友善使用者對單獨子產品進行重新整理，節省了操作成本，并且動效活潑，更容易引起人們的注意。
tab 重新整理
當使用者浏覽完一定數量的内容後，首頁 icon 自動變成了一個重新整理按鈕，常出現在底部 tab 的位置。它試用于子產品單一、内容會向下無限加載，且底部 tab 不會消失的場景中。使用者在浏覽頁面的過程中如果對所有的内容都感到枯燥了，就可以用這個功能來進行重新整理。它對于内容無限向下加載的界面，是非常重要的重新整理樣式。
如下圖：
以優酷和即刻為例，優酷是一款視訊類 APP，即刻是一款根據興趣推送内容的 APP，在首頁浏覽一定内容後，它們的首頁 icon 都會自動變成重新整理按鈕，點選就可以重新整理頁面所有的推薦内容。
其中優酷的首頁是由多個子產品組成的，從上往下浏覽的過程中，能看到每個子產品底部都有單獨的重新整理按鈕，但是當滑動到最後的一個子產品時，内容會無限向下加載，隻有到這時首頁的 icon 才會變身。而即刻的首頁并沒有分成很多子產品，劃幾下螢幕首頁 icon 就開始變身了。
優點：使用者不用傳回頂部就可以對頁面進行重新整理，縮短了操作路徑，節省了使用者的操作成本。
PS：寫到這裡的時候，我開始尋找還有哪些軟體存在 icon 變身的功能，然後就發現了愛奇藝的熱點推薦頁面。不過與上面描述不同的是，在上滑浏覽的過程中底部 tab 的 icon 并不會變，但是你點選它一下，就會變成一個轉圈的重新整理按鈕，然後自動傳回頂部并重新整理頁面中全部内容。
如下圖：
總結
今天主要分享的内容是五種重新整理的樣式，我總結了五個點是：
- 下拉重新整理已經成為 APP 的标配，其他的樣式都相當于為下拉刷建立立了一個快捷方式，為了節省使用者的操作成本。
- 下拉重新整理：試用于清單、卡片集合等界面内容按照時間降序排列的場景。加入公司 logo 可以把自己的品牌形象從細節上傳達給使用者。
- 提示重新整理：适用于對重新整理有數量限制要求的場景，可以避免使用者看到重複的内容。
- 子產品重新整理按鈕、彈出重新整理按鈕：試用于同一個頁面有較多子產品、每個子產品内容都不相同的場景。其中彈出重新整理按鈕的動效比較新奇活潑，容易引起人們的注意。
- tab 重新整理：試用于子產品單一、内容會向下無限加載，且底部 tab 不會消失的場景。
參考引文：
《UI 設計中下拉重新整理有什麼講究？》
《APP 重新整理類型淺析》
《淺談“加載重新整理”與“品牌設計”的思考》
本文由 @ 望盡盡是青山原創釋出于人人都是産品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協定