編輯導(dǎo)語：刷新是大家常用的操作之一，主要作用是刷新頁面中的緩存，從服務(wù)器獲取新的內(nèi)容。在瀏覽 APP 的時候，不同場景中使用的刷新樣式是完全不同的。本文作者留心了這些細(xì)節(jié)，和我們分享了5種隨處可見的、每一個內(nèi)容性產(chǎn)品都具備的“刷新”功能的不同樣式。

本文的大綱&思維導(dǎo)圖

1. 刷新功能發(fā)展階段

1.1 windows系統(tǒng)刷新

系統(tǒng)桌面右鍵刷新幾乎每天都有人在使用，而這個功能的存在其實windows系統(tǒng)的讓用戶來填的一個坑。而且時間久了，成為用戶習(xí)慣了就沒人在意。

windows刷新最直接的作用就是刷新能讓文件重新排序、歸類和恢復(fù)到最新數(shù)據(jù)狀態(tài)。

在速度上其實也有一定的提升，因為用戶更改設(shè)置后，注冊表發(fā)生更改，系統(tǒng)運行速度會慢一點，刷新后可以讓更改后的設(shè)置生效。

舉例：在域環(huán)境的文件共享創(chuàng)建了一個文件夾必須更新后才能顯示，很多xx管家其實就刪除注冊表讓系統(tǒng)變得更快就是這個原理。從現(xiàn)在技術(shù)層面理解可以解決這個問題，而因這個windows歷史遺留問題把這個坑位強加成為用戶的一個習(xí)慣。

1.2 網(wǎng)頁刷新

剛提到刷新是windows留下的坑位，的確這個坑位讓用戶接受了并在網(wǎng)頁時代讓其價值無限放大。可以理解成黃金刷新。

刷新最直接的作用就是處理緩存問題，不同的刷新方式有著不同的緩存機制。大致可以分為：

1. 按F5刷新
2. ctrl+F5刷新
3. 轉(zhuǎn)至地址欄+enter刷新

F5刷新是不允許使用本地緩存，因此Last-Modified能起作用，但Expires無效。而Ctrl+F5是強制刷新，緩存機制失效。轉(zhuǎn)至”或地址欄里回車是正常的訪問，Last-Modified和Expires都有效。

到了web時代刷新功能已經(jīng)被開發(fā)者玩出各種新高度：比如刷新加載最新緩存的數(shù)據(jù)。

在網(wǎng)速差或者請求不到服務(wù)器的時候會做一些體驗好的交互表現(xiàn)，例如“哎呦喂，這個頁面找不到了”，谷歌在這方面其實也做了一些事情。

最典型的是谷歌瀏覽器在無法加載到網(wǎng)頁時候會自動觸發(fā)一個恐龍小游戲，這是一種解決降低用戶在體驗的時候煩躁程度。

1.3 APP下拉刷新

很多用戶特別沉迷于今日頭條和網(wǎng)易新聞這種feed App，幾乎每天上班下班閑暇時間都在不斷刷新聞，而最值得提的是這個刷新的次數(shù)要比看信息次數(shù)多很多。

在沒有信號的時候瘋狂刷，看完信息的時候刷，不想看這類信息的時候刷，甚至無聊發(fā)呆的時候也在刷。

有多少人知道下拉刷新這個操作已經(jīng)是tiwtter率先提出來了，而起在年5月份成功申請了該項專利，雖然對外聲明是防御性專利，但它的價值已經(jīng)必然被所有開發(fā)者玩的很high了（不知道tiwtter什么時候開始收費）。

隨著app的下拉刷新被廣泛應(yīng)用，產(chǎn)品經(jīng)理們把所有目光都放在app上，自然就誕生了app下拉刷新功能新的歷史使命和作用。

app的刷新價值歸為：數(shù)據(jù)加載、品牌溢出和業(yè)務(wù)體驗等三項，目前這三類價值都得到了很全面的體現(xiàn)。

APP下拉刷新技術(shù)實現(xiàn)原理：app下拉刷新其實就是下拉加載最新的數(shù)據(jù)，無非就是操作動作不同和數(shù)據(jù)類型不同的區(qū)分。

• 操作動作：手指觸發(fā)（上拉，下拉和點擊），搖一搖和語音觸發(fā)；
• 數(shù)據(jù)類型：最新數(shù)據(jù)，個性化數(shù)據(jù)和歷史數(shù)據(jù)。

2. 五種刷新樣式

2.1 下拉刷新

使用下拉手勢完成刷新操作，這是最常見的一種刷新樣式，常出現(xiàn)在頁面的頂部，絕大多數(shù)頁面都有它的存在。

它試用于列表、卡片集合等界面內(nèi)容按照時間降序排列的場景。每一次刷新后，系統(tǒng)都會把新的內(nèi)容放到頁面顯眼的位置。它已經(jīng)成為了 APP 中必備的刷新方法，是非常重要的一種樣式。

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

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

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

2.2 提示刷新

這種樣式會在用戶瀏覽完頁面中最新內(nèi)容的時候，提示用戶進(jìn)行刷新，常出現(xiàn)在“剛看完的內(nèi)容”與“上一次看完的內(nèi)容”之間。在內(nèi)容刷新有數(shù)量限制要求的時候，我們就可以使用這種樣式。

每次刷新，系統(tǒng)都會推送一定數(shù)量的最新內(nèi)容供用戶瀏覽。它常以一段文字的形式來顯示，如“剛剛看到這里了，點擊刷新”。

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

2.3 模塊刷新

按鈕顧名思義，這種樣式通常出現(xiàn)在一個內(nèi)容模塊的底部，使用一個單獨的按鈕來顯示。

• 它試用于同一個頁面有較多模塊、每個模塊內(nèi)容都不相同的場景中。每次刷新完后，對應(yīng)的那個模塊會全部更換新的內(nèi)容。通常會用“換一換”、“換一批”等類似的字眼。（騰訊視頻）
• 信息類刷新，信息展示是按照時間倒敘排列，當(dāng)用戶往下刷新看以前的消息，中途又想看新消息時，就避免了重新回到頂不進(jìn)行下拉刷新

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

2.4 彈出刷新按鈕

這種樣式就是在瀏覽內(nèi)容的過程中，模塊底部會彈出刷新按鈕。

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

以開眼為例，在向上滑動的過程中，模塊底部會忽然彈出一個刷新按鈕，提示你刷新推薦內(nèi)容。

我對這種刷新方式的理解是：開眼的產(chǎn)品目標(biāo)是為用戶提供有料、有趣、好玩的高品質(zhì)視頻，用戶群里比較年輕，充滿個性，這種新奇活潑的刷新方式更貼合品牌形象，更受年輕用戶的喜歡。

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

2.5 Tab刷新

當(dāng)用戶瀏覽完一定數(shù)量的內(nèi)容后，首頁 icon 自動變成了一個刷新按鈕，常出現(xiàn)在底部 tab 的位置。

它試用于模塊單一、內(nèi)容會向下無限加載，且底部 tab 不會消失的場景中。用戶在瀏覽頁面的過程中如果對所有的內(nèi)容都感到枯燥了，就可以用這個功能來進(jìn)行刷新。

它對于內(nèi)容無限向下加載的界面，是非常重要的刷新樣式。

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

3. 刷新模塊設(shè)計要點

3.1 刷新功能的作用

刷新是最常用的操作之一，主要作用是刷新頁面中的緩存，從服務(wù)器獲取新的內(nèi)容。（為用戶帶來新的內(nèi)容）

3.2 刷新功能兩大場景

其一是在內(nèi)容流上，其二是在信息詳情里，兩者的訴求本質(zhì)上是截然不同的。

3.2.1 內(nèi)容流

將刷新置于內(nèi)容流，是為了持續(xù)的為用戶提供最新內(nèi)容，前提是系統(tǒng)具備內(nèi)容的持續(xù)更新能力，如果我們的內(nèi)容并不具備該能力，那就不太提倡刷新功能了。

因為，即使刷新了，也沒有新的內(nèi)容呈現(xiàn)給用戶。

持續(xù)更新能力是指平均間隔一定的時間能夠產(chǎn)生1條或多條內(nèi)容，出于產(chǎn)品的考慮，這個間隔時間需要小于30分鐘，也就是一天的內(nèi)容產(chǎn)量至少48條以上，才具備做刷新的能力。

內(nèi)容數(shù)量越多，越需要刷新能力。

相反，如果每天不能產(chǎn)生48條以上的內(nèi)容，就不太建議用內(nèi)容流的方式進(jìn)行開發(fā)，可以嘗試換一種思路，比如固定時間更新的內(nèi)容卡。

3.2.2 信息詳情

我們對詳情頁的“刷新”在概念上與內(nèi)容流的“刷新”是截然不同的，在詳情頁里，他更傾向于“更新”的概念。

也就是將最新的詳情內(nèi)容“更新”給用戶。并不是所有的詳情頁都需要這個功能，同樣的，也只有在特定的環(huán)境下，詳情頁的刷新才會具備價值。

常見的詳情頁包括電商的商品詳情頁，訂單詳情頁，資訊的文章詳情頁，社交的用戶詳情頁，音樂產(chǎn)品的歌單詳情頁，活動產(chǎn)品的活動詳情頁等等。

3.3 刷新功能設(shè)計要點

刷新功能有三種方式，分別是：

1. 內(nèi)容流的“刷新”，幫助用戶“獲取最新”的內(nèi)容；
2. 詳情頁的“刷新”，對內(nèi)容進(jìn)行“更新”；
3. 網(wǎng)絡(luò)異常頁的“刷新”，“重新獲取”內(nèi)容。

不滿足使用條件時，容易讓用戶產(chǎn)生挫敗感與失望感，會無意義的增加開發(fā)成本和服務(wù)器計算壓力。

內(nèi)容流的刷新，需要足夠的內(nèi)容更新頻率，每日更新的內(nèi)容在48條以上，內(nèi)容更新越多，越需要刷新功能，反之越不需要該功能。

詳情頁的刷新，僅在用戶高頻訪問的詳情頁，或者不希望用戶返回的商品詳情頁需要對內(nèi)容進(jìn)行更新的能力。

網(wǎng)絡(luò)異常也的刷新，則需要存在基礎(chǔ)的網(wǎng)絡(luò)信息讀取，才需要植入該功能。

結(jié)論刷新是一個會和用戶互動，與用戶具備反饋機制的功能，用戶在執(zhí)行刷新操作時，具備明確的心理期望“我想看新的內(nèi)容”，或者“我想看看其他的”。

下拉刷新已經(jīng)成為 APP 的標(biāo)配，其他的樣式都相當(dāng)于為下拉刷新建立了一個快捷方式，為了節(jié)省用戶的操作成本。

1. 下拉刷新：試用于列表、卡片集合等界面內(nèi)容按照時間降序排列的場景。加入公司 logo 可以把自己的品牌形象從細(xì)節(jié)上傳達(dá)給用戶。
2. 提示刷新：適用于對刷新有數(shù)量限制要求的場景，可以避免用戶看到重復(fù)的內(nèi)容。
3. 模塊刷新按鈕、彈出刷新按鈕：試用于同一個頁面有較多模塊、每個模塊內(nèi)容都不相同的場景。
4. 彈出刷新按鈕的動效比較新奇活潑，容易引起人們的注意。
5. Tab 刷新：試用于模塊單一、內(nèi)容會向下無限加載，且底部 Tab 不會消失的場景。

作者：下陳；公眾號：下陳

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

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