刷新的主要作用是刷新頁(yè)面中的緩存，從服務(wù)器獲取新的內(nèi)容。它又分為自動(dòng)刷新和手動(dòng)刷新，自動(dòng)刷新就是每當(dāng)我們打開(kāi)一個(gè) APP 時(shí)，APP 就會(huì)自動(dòng)給服務(wù)器發(fā)送一個(gè)請(qǐng)求，推送最新的內(nèi)容。但是當(dāng)我們?yōu)g覽完了推送的內(nèi)容或?qū)ν扑偷膬?nèi)容不敢興趣，這時(shí)就需要手動(dòng)刷新頁(yè)面中的內(nèi)容。
這篇文章主要分享五種手動(dòng)刷新的方式，以及他們的使用場(chǎng)景和優(yōu)缺點(diǎn)。
一、下拉刷新
下拉刷新幾乎無(wú)處不在，通過(guò)向下滑動(dòng)的手勢(shì)動(dòng)作輕松獲取推薦信息。它是由設(shè)計(jì)師 Loren Brichter 發(fā)明創(chuàng)造，首次應(yīng)用于 Twitter 這一應(yīng)用中，并且 Twitter 已經(jīng)獲得了“下拉刷新”的設(shè)計(jì)專(zhuān)利。
使用場(chǎng)景：適用于列表、卡片集合等界面，內(nèi)容按照時(shí)間降序排列的場(chǎng)景。
優(yōu)點(diǎn)：交互方式簡(jiǎn)單便捷，符合用戶(hù)使用習(xí)慣，使用場(chǎng)景廣泛。

缺點(diǎn)：用戶(hù)向下瀏覽過(guò)多內(nèi)容后，再使用下拉刷新的成本比較高，所以需要配合其他刷新方式一起使用。如下圖：

APP刷新頁(yè)面設(shè)計(jì)

以知乎、嗶哩嗶哩、蝦米音樂(lè)為例，這三個(gè)APP 分別以文字、視頻、音樂(lè)為主要內(nèi)容，它們分別按照列表、柵格列表、卡片集合三種方式排布，用戶(hù)可以根據(jù)自己的喜好來(lái)刷新頁(yè)面內(nèi)容，整個(gè)頁(yè)面里的內(nèi)容按時(shí)間降序來(lái)排列。
除了常規(guī)的操作，下拉刷新還被設(shè)計(jì)師玩出了一些新花樣。
1.加入品牌形象
我們都知道，在刷新的過(guò)程中會(huì)有短暫的等待時(shí)間，并且伴隨有動(dòng)畫(huà)提示。很多公司把品牌形象植入到這個(gè)過(guò)程中，替換了簡(jiǎn)潔的刷新按鈕，這種方式可以把自己的品牌形象從細(xì)節(jié)上傳達(dá)給用戶(hù)，如下圖：

APP刷新頁(yè)面設(shè)計(jì)

2.添加有趣句子
在什么值得買(mǎi) APP 的首頁(yè)進(jìn)行下拉刷新，會(huì)出現(xiàn)一些有趣的短句，比如“讀書(shū)破萬(wàn)卷，剁手如有神”、“天青色等煙雨，好物在等你”等等，增加趣味性，緩解用戶(hù)的等待，如下圖：

APP刷新頁(yè)面設(shè)計(jì)

3.添加驚喜
在淘寶和京東的首頁(yè)下拉刷新，分別會(huì)出現(xiàn)“淘寶二樓”和“視頻答題紅包”，在用戶(hù)等待刷新的同時(shí)為用戶(hù)創(chuàng)造突然的驚喜，如下圖：

APP刷新頁(yè)面設(shè)計(jì)

二、tab刷新
當(dāng)用戶(hù)向下瀏覽了很多內(nèi)容后，這時(shí)感到有些枯燥，想獲取新的內(nèi)容，這時(shí)就可以使用 tab 刷新，省去返回頂部下拉的步驟。為了提示用戶(hù)，通常 tab 圖標(biāo)會(huì)變成一個(gè)刷新按鈕的樣子。

使用場(chǎng)景：試用于內(nèi)容單一，需要刷新全部?jī)?nèi)容，且底部 tab 不會(huì)消失的場(chǎng)景中。

優(yōu)點(diǎn)：很便捷的就可以刷新頁(yè)面的全部?jī)?nèi)容，節(jié)省了用戶(hù)的操作成本。
缺點(diǎn)：有時(shí)頁(yè)面為了沉浸式體驗(yàn)，底部 tab 欄會(huì)消失。
以 AcFun 為例，AcFun 是一款視頻類(lèi) APP，在首頁(yè)瀏覽一定內(nèi)容后，首頁(yè) icon 自動(dòng)變成刷新，點(diǎn)擊就可以刷新頁(yè)面所有的推薦內(nèi)容。

APP刷新頁(yè)面設(shè)計(jì)

三、提示刷新
有些 APP 的內(nèi)容是一部分一部分刷新的，總是會(huì)在瀏覽完新的內(nèi)容后碰到舊的，這時(shí)就可以使用提示刷新。通常會(huì)使用文字作為提示，并使用 APP 主題色。
使用場(chǎng)景：適用于內(nèi)容刷新有數(shù)量限制的場(chǎng)景中。
優(yōu)點(diǎn)：避免用戶(hù)看到重復(fù)的內(nèi)容，省去了用戶(hù)返回頂部下拉的步驟，節(jié)省了用戶(hù)的操作成本。
缺點(diǎn)：暫時(shí)沒(méi)有想到，歡迎大家在留言區(qū)補(bǔ)充~
以百度貼吧和嗶哩嗶哩為例，百度貼吧的首頁(yè)每次刷新12條內(nèi)容，嗶哩嗶哩的首頁(yè)推薦每次刷新10個(gè)視頻，每當(dāng)看完這些新的推薦內(nèi)容系統(tǒng)就會(huì)提示“剛剛看到這里，點(diǎn)擊刷新”。

APP刷新頁(yè)面設(shè)計(jì)

四、模塊刷新
頁(yè)面由不同的模塊構(gòu)成，通常出現(xiàn)在某個(gè)內(nèi)容模塊的底部，使用一個(gè)獨(dú)立的按鈕來(lái)進(jìn)行刷新。通常會(huì)用“換一換”、“換一批”等類(lèi)似按鈕顯示。
使用場(chǎng)景：適用于同一個(gè)頁(yè)面有較多模塊、每個(gè)模塊內(nèi)容相對(duì)獨(dú)立的場(chǎng)景中。
優(yōu)點(diǎn)：更加靈活，用戶(hù)可以按照自己的需求對(duì)單個(gè)模塊進(jìn)行刷新。

缺點(diǎn)：會(huì)占用更多的頁(yè)面面積。如下圖：

APP刷新頁(yè)面設(shè)計(jì)

以騰訊動(dòng)漫和騰訊視頻為例，它們分別是漫畫(huà)、視頻類(lèi) APP。因?yàn)樗鼈兊慕缑娑际怯刹煌?lèi)型的內(nèi)容組成，所以分為了很多個(gè)模塊。用戶(hù)如果對(duì)某個(gè)模塊中顯示的內(nèi)容不夠感興趣，又不想點(diǎn)擊進(jìn)去看全部?jī)?nèi)容，那么就可以單獨(dú)對(duì)這個(gè)模塊刷新了，省去了返回頂部下拉刷新的麻煩步驟。
同時(shí)為了節(jié)約頁(yè)面面積，它們會(huì)在刷新按鈕旁邊放置“查看更多”，或一些其他的推薦內(nèi)容。
模塊刷新還有一個(gè)特殊的例子，那就是開(kāi)眼 APP，在瀏覽內(nèi)容的過(guò)程中，模塊底部會(huì)彈出刷新按鈕。特殊的地方在于它的刷新按鈕是彈出來(lái)的，動(dòng)效比較容易引起人的注意。
我對(duì)這種刷新方式的理解是：開(kāi)眼的產(chǎn)品目標(biāo)是為用戶(hù)提供有料、有趣、好玩的高品質(zhì)視頻，用戶(hù)群里比較年輕，充滿(mǎn)個(gè)性，這種活潑的刷新方式更貼合品牌形象。如下圖：

APP刷新頁(yè)面設(shè)計(jì)

五、搖一搖刷新

通過(guò)搖晃手機(jī)的交互方式刷新內(nèi)容，常見(jiàn)于社交應(yīng)用中。如下圖：

APP刷新頁(yè)面設(shè)計(jì)

例如 SOUL，在首頁(yè)中搖一搖手機(jī)，伴隨著“Bi Ling”一聲，就刷新了推薦的用戶(hù)，由于它的用戶(hù)展現(xiàn)使用了類(lèi)似地球儀的樣式，所以它不可以用下拉刷新。而且”微信搖一搖交友”的影響力非常大，它使用這種方式很貼合軟件的主題，也很符合用戶(hù)的使用習(xí)慣。
優(yōu)點(diǎn)：脫離了手機(jī)屏幕的交互方式，不需要設(shè)計(jì)刷新按鈕，且具有一定趣味性。
缺點(diǎn)：交互方式有點(diǎn)慢，沒(méi)有點(diǎn)擊屏幕快捷。而且比較容易誤觸，有一次我躺床上玩，手機(jī)掉臉上它就刷新了。搖久了會(huì)累(*^▽^*)~

當(dāng)前題目：網(wǎng)站APP刷新頁(yè)面樣式設(shè)計(jì)
網(wǎng)站地址：http://www.rwnh.cn/news48/113948.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站維護(hù)、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航、ChatGPT、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)