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

目錄：

1. 下拉刷新
2. 提示刷新
3. 模塊刷新按鈕
4. 彈出刷新按鈕
5. tab 刷新
6. 總結(jié)

下拉刷新

使用下拉手勢(shì)完成刷新操作，這是最常見的一種刷新樣式，常出現(xiàn)在頁面的頂部，絕大多數(shù)頁面都有它的存在。它試用于列表、卡片集合等界面內(nèi)容按照時(shí)間降序排列的場(chǎng)景。每一次刷新后，系統(tǒng)都會(huì)把新的內(nèi)容放到頁面顯眼的位置。它已經(jīng)成為了 APP 中必備的刷新方法，是非常重要的一種樣式。

如下圖：

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

優(yōu)點(diǎn)：使用非常廣泛，已經(jīng)成為 APP 的標(biāo)配，幾乎沒有學(xué)習(xí)成本，而且下拉屏幕就可以刷新，操作非常簡(jiǎn)單。

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

如下圖：

提示刷新

這種樣式會(huì)在用戶瀏覽完頁面中最新內(nèi)容的時(shí)候，提示用戶進(jìn)行刷新，常出現(xiàn)在“剛看完的內(nèi)容”與“上一次看完的內(nèi)容”之間。在內(nèi)容刷新有數(shù)量限制要求的時(shí)候，我們就可以使用這種樣式。每次刷新，系統(tǒng)都會(huì)推送一定數(shù)量的最新內(nèi)容供用戶瀏覽。它常以一段文字的形式來顯示，如“剛剛看到這里了，點(diǎn)擊刷新”。

如下圖：

以百度貼吧和嗶哩嗶哩為例，我數(shù)了一下，百度貼吧的首頁每次會(huì)刷新12條新內(nèi)容，嗶哩嗶哩的首頁推薦每次會(huì)刷新10個(gè)新視頻，它們都會(huì)在用戶瀏覽完最新的推送內(nèi)容后發(fā)出提示。

優(yōu)點(diǎn)：這種方式可以避免用戶看到重復(fù)的內(nèi)容，而且用戶不用返回頂部就可以刷新，節(jié)省了用戶的操作成本。

模塊刷新按鈕

顧名思義，這種樣式通常出現(xiàn)在一個(gè)內(nèi)容模塊的底部，使用一個(gè)單獨(dú)的按鈕來顯示。它試用于同一個(gè)頁面有較多模塊、每個(gè)模塊內(nèi)容都不相同的場(chǎng)景中。每次刷新完后，對(duì)應(yīng)的那個(gè)模塊會(huì)全部更換新的內(nèi)容。通常會(huì)用“換一換”、“換一批”等類似的字眼。

如下圖：

以騰訊動(dòng)漫和騰訊視頻為例，它們分別是漫畫、視頻類 APP，它們的界面都是由各種類型的內(nèi)容組成，所以分為了很多個(gè)模塊（多模塊的好處是可以節(jié)省用戶篩選的時(shí)間，因?yàn)橄到y(tǒng)已經(jīng)歸好類了，用戶直接瀏覽自己感興趣的即可），它們給每個(gè)模塊都設(shè)置了刷新按鈕。

優(yōu)點(diǎn)：用戶如果對(duì)某個(gè)模塊中顯示的內(nèi)容不夠感興趣卻又不想點(diǎn)擊進(jìn)去看全部內(nèi)容，那么就可以方便地單獨(dú)對(duì)這個(gè)模塊進(jìn)行刷新，也省去了返回頂部刷新的步驟，縮短了操作路徑，節(jié)省了用戶的操作成本。

彈出刷新按鈕

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

如下圖：

以開眼為例（目前只在開眼中發(fā)現(xiàn)了這種樣式），在向上滑動(dòng)的過程中，模塊底部會(huì)忽然彈出一個(gè)刷新按鈕，提示你刷新推薦內(nèi)容。我對(duì)這種刷新方式的理解是：開眼的產(chǎn)品目標(biāo)是為用戶提供有料、有趣、好玩的高品質(zhì)視頻，用戶群里比較年輕，充滿個(gè)性，這種新奇活潑的刷新方式更貼合品牌形象，更受年輕用戶的喜歡。

優(yōu)點(diǎn)：方便用戶對(duì)單獨(dú)模塊進(jìn)行刷新，節(jié)省了操作成本，并且動(dòng)效活潑，更容易引起人們的注意。

tab 刷新

當(dāng)用戶瀏覽完一定數(shù)量的內(nèi)容后，首頁 icon 自動(dòng)變成了一個(gè)刷新按鈕，常出現(xiàn)在底部 tab 的位置。它試用于模塊單一、內(nèi)容會(huì)向下無限加載，且底部 tab 不會(huì)消失的場(chǎng)景中。用戶在瀏覽頁面的過程中如果對(duì)所有的內(nèi)容都感到枯燥了，就可以用這個(gè)功能來進(jìn)行刷新。它對(duì)于內(nèi)容無限向下加載的界面，是非常重要的刷新樣式。

如下圖：

以優(yōu)酷和即刻為例，優(yōu)酷是一款視頻類 APP，即刻是一款根據(jù)興趣推送內(nèi)容的 APP，在首頁瀏覽一定內(nèi)容后，它們的首頁 icon 都會(huì)自動(dòng)變成刷新按鈕，點(diǎn)擊就可以刷新頁面所有的推薦內(nèi)容。

其中優(yōu)酷的首頁是由多個(gè)模塊組成的，從上往下瀏覽的過程中，能看到每個(gè)模塊底部都有單獨(dú)的刷新按鈕，但是當(dāng)滑動(dòng)到最后的一個(gè)模塊時(shí)，內(nèi)容會(huì)無限向下加載，只有到這時(shí)首頁的 icon 才會(huì)變身。而即刻的首頁并沒有分成很多模塊，劃幾下屏幕首頁 icon 就開始變身了。

優(yōu)點(diǎn)：用戶不用返回頂部就可以對(duì)頁面進(jìn)行刷新，縮短了操作路徑，節(jié)省了用戶的操作成本。

PS：寫到這里的時(shí)候，我開始尋找還有哪些軟件存在 icon 變身的功能，然后就發(fā)現(xiàn)了愛奇藝的熱點(diǎn)推薦頁面。不過與上面描述不同的是，在上滑瀏覽的過程中底部 tab 的 icon 并不會(huì)變，但是你點(diǎn)擊它一下，就會(huì)變成一個(gè)轉(zhuǎn)圈的刷新按鈕，然后自動(dòng)返回頂部并刷新頁面中全部內(nèi)容。

如下圖：

總結(jié)

今天主要分享的內(nèi)容是五種刷新的樣式，我總結(jié)了五個(gè)點(diǎn)是：

1. 下拉刷新已經(jīng)成為 APP 的標(biāo)配，其他的樣式都相當(dāng)于為下拉刷新建立了一個(gè)快捷方式，為了節(jié)省用戶的操作成本。
2. 下拉刷新：試用于列表、卡片集合等界面內(nèi)容按照時(shí)間降序排列的場(chǎng)景。加入公司 logo 可以把自己的品牌形象從細(xì)節(jié)上傳達(dá)給用戶。
3. 提示刷新：適用于對(duì)刷新有數(shù)量限制要求的場(chǎng)景，可以避免用戶看到重復(fù)的內(nèi)容。
4. 模塊刷新按鈕、彈出刷新按鈕：試用于同一個(gè)頁面有較多模塊、每個(gè)模塊內(nèi)容都不相同的場(chǎng)景。其中彈出刷新按鈕的動(dòng)效比較新奇活潑，容易引起人們的注意。
5. tab 刷新：試用于模塊單一、內(nèi)容會(huì)向下無限加載，且底部 tab 不會(huì)消失的場(chǎng)景。

參考引文：

《UI 設(shè)計(jì)中下拉刷新有什么講究？》

《APP 刷新類型淺析》

《淺談“加載刷新”與“品牌設(shè)計(jì)”的思考》

本文由 @?望盡盡是青山原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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