關(guān)于介紹「刷新的類型」的文章，各類論壇、公眾號(hào)有很多，也并不復(fù)雜，我就最常用的「下拉刷新」，從品牌、功能、驚喜、運(yùn)營(yíng)、反饋五個(gè)維度結(jié)合情感化設(shè)計(jì)，分享一些我的個(gè)人看法。

我理解的刷新是頁(yè)面中有緩存數(shù)據(jù)，從服務(wù)器獲取新數(shù)據(jù)的過(guò)程。

下拉刷新是十分常見(jiàn)的一種操作，并且在下拉刷新的時(shí)候，整個(gè)頁(yè)面也會(huì)跟著下移，但是會(huì)存在一種彈性，頁(yè)面會(huì)恢復(fù)到初始狀態(tài)，在這中間會(huì)存在一個(gè)時(shí)間差。

iOS原生系統(tǒng)的刷新形態(tài)是這種普通的旋轉(zhuǎn)菊花 loading，但是我們可以在下拉刷新中加入很多情感化的設(shè)計(jì)元素。

什么是情感化設(shè)計(jì)？Norman 在《情感化設(shè)計(jì)》一書中，提出了情感化設(shè)計(jì)的三個(gè)層次水平，分別是本能層次水平，行為層次水平，反思層次水平，以下是這三種水平的設(shè)計(jì)與產(chǎn)品特點(diǎn)的對(duì)應(yīng)關(guān)系 ：

那怎么將情感化融入到設(shè)計(jì)里？以下拉刷新為例，因?yàn)楹竺嫖抑饕獜钠放啤⒐δ?、驚喜、運(yùn)營(yíng)、反饋五個(gè)維度分析下拉刷新，我將這五個(gè)維度映射到三種情感化的表達(dá)方式中，分別是外觀視覺(jué)，功能操作，產(chǎn)品特性。

• 比如品牌維度可能涉及到外觀視覺(jué)上要給人打造品牌印象；
• 比如功能維度可能涉及到巧妙的功能使用方式，有趣的操作體驗(yàn)；
• 比如驚喜維度可能涉及到產(chǎn)品特性上要給人驚喜，勾起回憶，和用戶互動(dòng)等。

一、品牌維度

在下拉刷新中融入產(chǎn)品品牌，可以加深用戶的品牌印象，因?yàn)橐粋€(gè)產(chǎn)品的品牌建立，是日積月累在細(xì)節(jié)上給用戶的印象感知。

將品牌傳播分為三個(gè)層級(jí)：簡(jiǎn)單品牌logo、品牌吉祥物、品牌場(chǎng)景故事。

1. 簡(jiǎn)單品牌logo

比如開眼、想去、足記、大佬說(shuō)這些 app 的下拉刷新使用產(chǎn)品 logo 或者 brand name 等簡(jiǎn)單的形式作為下拉刷新的動(dòng)畫。

△ 開眼

△ 想去

△ 足記

△ 大佬說(shuō)

2. 品牌吉祥物

比如飛豬、閑魚、嗶哩嗶哩、美團(tuán)使用品牌吉祥物的卡通形象作為加載動(dòng)畫。

△?飛豬

△ 閑魚

△ 嗶哩嗶哩

△ 美團(tuán)

3. 品牌場(chǎng)景故事

比如美團(tuán)外賣的下拉刷新，是一位外賣騎手在騎車，但是旁邊附有紅黃綠燈的切換，當(dāng)切換到紅燈時(shí)，騎手停止騎車，切換到綠燈時(shí)，騎手繼續(xù)騎車…符合騎手配送外賣的場(chǎng)景故事（ 這一點(diǎn)的分析我有在公眾號(hào)每日微交互里分享過(guò)）

比如好奇心日?qǐng)?bào)的下拉刷新，訴說(shuō)的品牌故事是：好奇驅(qū)動(dòng)你的世界。

再比如京東的下拉刷新，是配送員端著快遞盒在奔跑，并且附上京東的 slogan：讓購(gòu)物更便捷 ，符合京東的產(chǎn)品定位，也突出京東與其他電商平臺(tái)的差異化競(jìng)爭(zhēng)力：購(gòu)物更便捷，獨(dú)立配送員，配送更快。

類似的還有蘇寧的下拉刷新。

二、功能維度

我把以下這些歸為功能維度是因?yàn)檫@些下拉的場(chǎng)景，已經(jīng)不局限于刷新，還給下拉賦予了新的功能。

我把它們分為三類：快捷操作、新功能入口、多空間的交互。

1. 快捷操作

比如微信讀書文章頁(yè)，下拉是快速添加書簽和刪除書簽，比從 icon 里進(jìn)入再去添加/刪除書簽更快捷。

再比如紅板報(bào)的文章頁(yè)，下拉是快速返回文章列表，這跟紅板報(bào)產(chǎn)品本身的手勢(shì)操作特色：「上滑下滑的卡片翻折切換列表」 相一致。

2. 新功能入口

比如微信的下拉可以展示最近使用的小程序：

TIM 的下拉可以新建待辦事項(xiàng)：

KEEP 的下拉可以載入 KG等級(jí)與成長(zhǎng)值：

3. 多空間交互

當(dāng)然「多空間交互」是我自己瞎取的一個(gè)名字，可以理解為下拉后切換到另外一個(gè)空間，如日簽，二樓等等。

比如淘票票的下拉切換到日簽：

潮汐下拉切換到日簽：

淘寶下拉切換到淘寶二樓：

三、驚喜維度

比如網(wǎng)易新聞的下拉刷新，出現(xiàn)的是與刷新無(wú)關(guān)的文案內(nèi)容，并且每次文案會(huì)不一樣，有日歷，格言，段子等，帶給用戶驚喜。

比如在生日那天，在京東的個(gè)人中心頁(yè)下拉刷新，京東給用戶定制的生日驚喜。

比如58同城里的首頁(yè)下拉刷新，每一次下拉給的文案內(nèi)容都不一樣，可能是告訴用戶 app 里的一些功能，可能是一句很貼心的問(wèn)候，可能是一句賣萌求好評(píng)等等。

我有嘗試過(guò)20多次，每次都是不同的問(wèn)候語(yǔ)，每一句話都很意外很驚喜，這種刷新的方式不但不會(huì)讓用戶感到煩躁，反而會(huì)不斷勾起用戶好奇心，吸引用戶不斷刷新。

四、運(yùn)營(yíng)維度

運(yùn)營(yíng)維度的話，一般是指活動(dòng)運(yùn)營(yíng)，并且一般是下拉后跳轉(zhuǎn)至一個(gè) H5頁(yè)面。

感覺(jué)運(yùn)營(yíng)維度可以發(fā)散很多，下拉領(lǐng)取紅包，下拉送券等等。

比如去哪兒旅行的國(guó)際暑期大促活動(dòng)；

比如房多多的看世界杯 瓜分購(gòu)房基金活動(dòng)：

比如優(yōu)酷在下拉里面加入了運(yùn)營(yíng)廣告位：

五、反饋維度

反饋維度，可以這么理解，用戶下拉后系統(tǒng)會(huì)給出哪些指示以及下拉后的反饋狀態(tài)，或者說(shuō)給用戶一個(gè)預(yù)告內(nèi)容。

比如網(wǎng)易云音樂(lè)下拉后會(huì)告訴用戶「首頁(yè)內(nèi)容根據(jù)你的口味生成」，給用戶一個(gè)預(yù)期的反饋：

用戶在下拉開始，每一步操作都會(huì)有對(duì)應(yīng)的反饋，最常見(jiàn)的就是：下拉刷新 - 松開刷新 - 刷新中。

比如華爾街見(jiàn)聞發(fā)現(xiàn)頁(yè)的下拉刷新：

一般對(duì)于內(nèi)容型產(chǎn)品，在刷新后都會(huì)給一個(gè) HUD反饋刷新XX條內(nèi)容，比如今日頭條的下拉刷新經(jīng)歷了四個(gè)狀態(tài)的反饋：下拉刷新 - 松開刷新 - 推薦中 - XX條更新。

但是更重要的是需要知道什么時(shí)候顯示什么反饋狀態(tài)，是看用戶的下拉張力、加速度？還是看頁(yè)面下移的距離？或者其他計(jì)算方法？

（交互設(shè)計(jì)師可以在交互輸出文檔中需要設(shè)計(jì)下拉刷新的地方，用文字描述場(chǎng)景以及文案，手勢(shì)操作等，這樣可以讓視覺(jué)設(shè)計(jì)師根據(jù)這個(gè)需求進(jìn)行設(shè)計(jì)。）

總結(jié)

• 情感化設(shè)計(jì)的三個(gè)層次水平：本能層次，行為層次，反思層次；
• 將情感化設(shè)計(jì)融入下拉刷新：外觀視覺(jué)、功能操作、產(chǎn)品特性；
• 關(guān)于 「下拉刷新」分析的幾個(gè)維度：品牌、功能、驚喜、運(yùn)營(yíng)、反饋；
• 品牌傳播的三個(gè)層級(jí)：簡(jiǎn)單品牌logo、品牌吉祥物、品牌場(chǎng)景故事；
• 下拉可以不局限于「刷新」，我們可以給下拉賦予新的功能；
• 通過(guò)下拉的多變性，個(gè)性化定制等來(lái)給用戶制造驚喜；
• 當(dāng)活動(dòng)運(yùn)營(yíng)過(guò)多時(shí)，下拉可作為運(yùn)營(yíng)位。

什么時(shí)候顯示什么反饋狀態(tài)用什么方法判別？是看用戶的下拉張力、加速度？還是看頁(yè)面下移的距離？或者其他計(jì)算方法？歡迎討論。

歡迎關(guān)注作者的微信公眾號(hào)：「UED設(shè)計(jì)筆記」

圖片素材作者：Dannniel

「保證體驗(yàn)無(wú)縫銜接的加載設(shè)計(jì)」

• 《5000字，超詳細(xì)總結(jié)App加載設(shè)計(jì)》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之加載類》
• 《方法+實(shí)例！如何做好移動(dòng)應(yīng)用中的Loading設(shè)計(jì)？》