原創(chuàng)：微信公眾號(hào)：「UED設(shè)計(jì)筆記」
轉(zhuǎn)載：https://www.uisdc.com/analyze-the-dropdown-refresh-function
關(guān)于介紹「刷新的類型」的文章，各類論壇杠愧、公眾號(hào)有很多，也并不復(fù)雜，我就最常用的「下拉刷新」，從品牌兔魂、功能哲银、驚喜、運(yùn)營(yíng)鹃觉、反饋五個(gè)維度結(jié)合情感化設(shè)計(jì)，分享一些我的個(gè)人看法硬霍。
我理解的刷新是頁面中有緩存數(shù)據(jù)帜慢，從服務(wù)器獲取新數(shù)據(jù)的過程。
下拉刷新是十分常見的一種操作唯卖，并且在下拉刷新的時(shí)候粱玲，整個(gè)頁面也會(huì)跟著下移，但是會(huì)存在一種彈性拜轨，頁面會(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á)方式中，分別是外觀視覺道宅，功能操作食听，產(chǎn)品特性。
- 比如品牌維度可能涉及到外觀視覺上要給人打造品牌印象培己；
- 比如功能維度可能涉及到巧妙的功能使用方式碳蛋，有趣的操作體驗(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
比如開眼身坐、想去秸脱、足記、大佬說這些 app 的下拉刷新使用產(chǎn)品 logo 或者 brand name 等簡(jiǎn)單的形式作為下拉刷新的動(dòng)畫部蛇。
△ 開眼
△ 想去
△ 足記
△ 大佬說
2. 品牌吉祥物
比如飛豬摊唇、閑魚、嗶哩嗶哩涯鲁、美團(tuán)使用品牌吉祥物的卡通形象作為加載動(dòng)畫巷查。
△ 飛豬
△ 閑魚
△ 嗶哩嗶哩
△ 美團(tuán)
3. 品牌場(chǎng)景故事
比如美團(tuán)外賣的下拉刷新有序，是一位外賣騎手在騎車，但是旁邊附有紅黃綠燈的切換岛请，當(dāng)切換到紅燈時(shí)旭寿，騎手停止騎車，切換到綠燈時(shí)崇败，騎手繼續(xù)騎車…符合騎手配送外賣的場(chǎng)景故事（ 這一點(diǎn)的分析我有在公眾號(hào)每日微交互里分享過）
比如好奇心日?qǐng)?bào)的下拉刷新许师，訴說的品牌故事是：好奇驅(qū)動(dòng)你的世界。
再比如京東的下拉刷新僚匆，是配送員端著快遞盒在奔跑微渠，并且附上京東的 slogan：讓購物更便捷 ，符合京東的產(chǎn)品定位咧擂，也突出京東與其他電商平臺(tái)的差異化競(jìng)爭(zhēng)力：購物更便捷逞盆，獨(dú)立配送員，配送更快松申。
類似的還有蘇寧的下拉刷新云芦。
二、功能維度
我把以下這些歸為功能維度是因?yàn)檫@些下拉的場(chǎng)景贸桶，已經(jīng)不局限于刷新舅逸，還給下拉賦予了新的功能。
我把它們分為三類：快捷操作皇筛、新功能入口琉历、多空間的交互。
1. 快捷操作
比如微信讀書文章頁水醋，下拉是快速添加書簽和刪除書簽旗笔，比從 icon 里進(jìn)入再去添加/刪除書簽更快捷。
再比如紅板報(bào)的文章頁拄踪，下拉是快速返回文章列表蝇恶，這跟紅板報(bào)產(chǎn)品本身的手勢(shì)操作特色：「上滑下滑的卡片翻折切換列表」 相一致。
2. 新功能入口
比如微信的下拉可以展示最近使用的小程序：
TIM 的下拉可以新建待辦事項(xiàng)：
KEEP 的下拉可以載入 KG等級(jí)與成長(zhǎng)值：
3. 多空間交互
當(dāng)然「多空間交互」是我自己瞎取的一個(gè)名字惶桐，可以理解為下拉后切換到另外一個(gè)空間撮弧，如日簽，二樓等等姚糊。
比如淘票票的下拉切換到日簽：
潮汐下拉切換到日簽：
淘寶下拉切換到淘寶二樓：
三贿衍、驚喜維度
比如網(wǎng)易新聞的下拉刷新，出現(xiàn)的是與刷新無關(guān)的文案內(nèi)容叛拷，并且每次文案會(huì)不一樣舌厨，有日歷，格言忿薇，段子等裙椭，帶給用戶驚喜躏哩。
比如在生日那天，在京東的個(gè)人中心頁下拉刷新揉燃，京東給用戶定制的生日驚喜扫尺。
比如58同城里的首頁下拉刷新，每一次下拉給的文案內(nèi)容都不一樣炊汤，可能是告訴用戶 app 里的一些功能正驻，可能是一句很貼心的問候，可能是一句賣萌求好評(píng)等等抢腐。
我有嘗試過20多次姑曙，每次都是不同的問候語，每一句話都很意外很驚喜迈倍，這種刷新的方式不但不會(huì)讓用戶感到煩躁伤靠，反而會(huì)不斷勾起用戶好奇心，吸引用戶不斷刷新啼染。
四宴合、運(yùn)營(yíng)維度
運(yùn)營(yíng)維度的話，一般是指活動(dòng)運(yùn)營(yíng)迹鹅，并且一般是下拉后跳轉(zhuǎn)至一個(gè) H5頁面卦洽。
感覺運(yùn)營(yíng)維度可以發(fā)散很多，下拉領(lǐng)取紅包斜棚，下拉送券等等阀蒂。
比如去哪兒旅行的國(guó)際暑期大促活動(dòng)；
比如房多多的看世界杯 瓜分購房基金活動(dòng)：
比如優(yōu)酷在下拉里面加入了運(yùn)營(yíng)廣告位：
五打肝、反饋維度
反饋維度脂新，可以這么理解挪捕，用戶下拉后系統(tǒng)會(huì)給出哪些指示以及下拉后的反饋狀態(tài)粗梭，或者說給用戶一個(gè)預(yù)告內(nèi)容。
比如網(wǎng)易云音樂下拉后會(huì)告訴用戶「首頁內(nèi)容根據(jù)你的口味生成」级零，給用戶一個(gè)預(yù)期的反饋：
用戶在下拉開始断医，每一步操作都會(huì)有對(duì)應(yīng)的反饋，最常見的就是：下拉刷新 – 松開刷新 – 刷新中奏纪。
比如華爾街見聞發(fā)現(xiàn)頁的下拉刷新：
一般對(duì)于內(nèi)容型產(chǎn)品鉴嗤，在刷新后都會(huì)給一個(gè) HUD反饋刷新XX條內(nèi)容，比如今日頭條的下拉刷新經(jīng)歷了四個(gè)狀態(tài)的反饋：下拉刷新 – 松開刷新 – 推薦中 – XX條更新序调。
但是更重要的是需要知道什么時(shí)候顯示什么反饋狀態(tài)醉锅，是看用戶的下拉張力、加速度发绢？還是看頁面下移的距離硬耍？或者其他計(jì)算方法垄琐？
（交互設(shè)計(jì)師可以在交互輸出文檔中需要設(shè)計(jì)下拉刷新的地方，用文字描述場(chǎng)景以及文案经柴，手勢(shì)操作等狸窘，這樣可以讓視覺設(shè)計(jì)師根據(jù)這個(gè)需求進(jìn)行設(shè)計(jì)。）
總結(jié)
- 情感化設(shè)計(jì)的三個(gè)層次水平：本能層次坯认，行為層次翻擒，反思層次；
- 將情感化設(shè)計(jì)融入下拉刷新：外觀視覺牛哺、功能操作耀鸦、產(chǎn)品特性；
- 關(guān)于 「下拉刷新」分析的幾個(gè)維度：品牌村刨、功能鹤树、驚喜、運(yùn)營(yíng)椰拒、反饋晶渠；
- 品牌傳播的三個(gè)層級(jí)：簡(jiǎn)單品牌logo、品牌吉祥物燃观、品牌場(chǎng)景故事褒脯；
- 下拉可以不局限于「刷新」，我們可以給下拉賦予新的功能缆毁；
- 通過下拉的多變性番川，個(gè)性化定制等來給用戶制造驚喜；
- 當(dāng)活動(dòng)運(yùn)營(yíng)過多時(shí)脊框，下拉可作為運(yùn)營(yíng)位颁督。
什么時(shí)候顯示什么反饋狀態(tài)用什么方法判別？是看用戶的下拉張力浇雹、加速度沉御？還是看頁面下移的距離？或者其他計(jì)算方法昭灵？歡迎討論吠裆。
