前言

刷新在產品中屬于基礎功能，方便用戶獲取最新動態，是普及度較高的基礎功能之一。在設計表達時有系統級表達、自定義設計、多功能結合等，設計發揮的可控性較大。

今天黑馬哥就結合一些優秀的線上案例，和大家聊一下關于產品刷新設計的千奇百態，希望拋磚引玉，和大家一起進步。

分享目錄

一、關于刷新設計

二、刷新的設計形式

三、線上優秀案例分析

四、總結

一、關于刷新設計

在產品中刷新對于用戶來說并不陌生，是經常使用的基礎功能，便于用戶獲取新動態。在一些可以提供內容更新的產品中，刷新獲取內容變動是較為常見的形式。

大家都習慣將刷新稱呼為下拉刷新，其實刷新的動作不僅限于下拉手勢交互，也有產品采用單擊和上滑等手勢交互實現刷新動作。比如一些產品在滑動瀏覽內容時，底部標簽欄首頁圖標會變為刷新的操作，通過點擊實現頁面內容的刷新；也有產品在上滑頁面時實時加載完成刷新，就像很多影視類產品或者瀑布流設計的產品。

刷新動作不僅可以滿足用戶的求知欲，也能通過源源不斷的內容增加用戶黏性，提高用戶的使用體驗。

二、刷新的設計形式

簡單的刷新動作已經不是簡單的設計了，在產品設計師的創新中呈現出了眾多的優秀案例，下面為大家梳理一下不同的設計表達形式。

2.1、系統級表達

系統級表達是采用系統默認的一些處理形式，類似于花瓣循環的動態形式，屬于比較常規的表達。也有很多產品采用系統級形式，用戶理解度較高，設計創新的角度來說欠缺一些，表現形式比較生硬。

2.2、情感化文案表達

為了帶給用戶更有溫度的設計，除了在圖形層面進行情感化設計發揮，在文案上面也可以更加情感化。有產品使用俏皮可愛的話術，每次用戶刷新都呈現不同的文案，與用戶產生情感共鳴。

2.3、動態形式結合

刷新的動態表達形式非常普遍，圖形動效和動作演變等，能夠體現出加載的動作。動態形式結合可以使得趣味性更強，動畫演變的過程也能降低加載等待過程中的焦慮感。

2.4、IP 形象結合

IP 形象結合到 UI 場景中不僅可以強化品牌感，也能帶來更加情感化的體驗。IP 形象結合到刷新設計中，伴隨著動態演變，以此來體現加載的過程。設計形式動感化，趣味性強且感官體驗較佳。

2.5、品牌基因結合

立足于品牌做設計，品牌感可以帶來差異化的設計表達，也能提高用戶對品牌的記憶度。很多產品將品牌 LOGO 圖形、輔助圖形、品牌字體、品牌風格特征等融入到刷新設計中，帶來差異化的刷新體驗。

2.6、業務屬性結合

根據業務特征設計刷新圖形，讓用戶在刷新的過程中感知產品的業務屬性，也是強化記憶點的有效形式。

2.7、多功能結合

刷新設計更多的還是為了給用戶提供更多動態內容，除了這個底層需求以外，也有產品結合了多功能設計。比如下拉刷新到一定距離可以激活“二層樓”，進入活動空間或者其他功能模塊，也有結合瀏覽記錄等展示。多功能結合賦予了刷新更多玩法，在有限的資源空間發揮更多操作價值。

2.8、其他設計形式

隨著體驗的重要性升級，產品設計師會在更細微之處探索出更優的解決方案，做出差異化的體驗設計。而刷新功能也將會呈現更豐富的設計，從感官層面帶來更多視覺感的表現，從體驗層面結合更多輔助功能或者業務，發揮更多使用價值。

三、線上優秀案例分析

通過以上的梳理我們對刷新設計有了深入的了解，下面通過一些優秀的線上案例來進行分析，輔助大家掌握更多差異化的設計表達。

3.1、情感化的文案設計

刷新除了在圖形設計和動效層面發揮以外，多功能結合和文案設計也是差異化表達的方向。文案提示的設計相對比較特殊，通過不同的文案來打動用戶的體驗。

喜馬拉雅 APP 每次下拉刷新時，都會顯示不同的文案內容，有功能引導的提示文案，也有與用戶共鳴的溫馨提示等。情感化的文案設計讓刷新更有溫度，不失為一種差異化的功能設計探索。

3.2、動態化 IP 形象

針對下拉刷新這一常規操作，設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作，被很多產品設計師所采納。

美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。

3.3、刷新帶來美食誘惑

在完成刷新功能屬性的同時，還能將產品的屬性或者服務賣點強化出來，賦予了常規操作更多的功能價值。

麥當勞在麥麥商城欄目的下拉刷新設計中，采用漢堡形象結合層級動效進行表達，讓人眼前一亮。動效拉長的漢堡不僅體現出份量感，激發用戶的食欲；漢堡形象就十分麥當勞，展現出品牌關聯性。

3.4、趣味化 IP 形象

IP 形象結合到刷新設計中的案例非常多，不僅可以帶來情感化的體驗，也能增加功能操作的趣味性。半次元在下拉刷新時不僅結合 IP 形象，還通過下拉的程度將形象拉長，最后再配合表情和動態營造出趣味性。

3.5、動態 IP 完美結合

轉轉的 IP 形象頭部的轉動條是其特征所在，在下拉刷新過程中完美的結合了轉動條，還伴隨著裝飾符號散開的效果。不僅貼切的結合了 IP 形象的特點，裝飾元素的動態效果也強化了氛圍感，非常符合產品的屬性，是一個不錯的刷新設計案例。

3.6、品牌化路徑動效

刷新設計中采用路徑動效的表現形式比較多，主要集中在圖形路徑動效和品牌文字路徑動效，圖形通常是品牌 LOGO 為主，這一類比較適合圖形趨近于線性的表達中。鏈家 APP 的下拉刷新就是 LOGO 圖形進行路徑動效，完美的匹配了圖形輪廓，動效的流暢度也比較自然。

從品牌層面著手于刷新設計，如果放棄圖形層面的元素選擇，品牌字體的選擇也是一個思路。得物 APP 將品牌名稱的字體直接運用到刷新設計中，以路徑動效的形式進行表達，最終將筆畫打散散開。設計表達依然延續了品牌感，也區別于其他產品的刷新設計，在差異化方面呈現出了自身的品牌特征。

3.7、一路騎行的芒果崽

芒果 TV 的下拉刷新設計結合了吉祥物芒果崽，下拉刷新的過程就是一路騎行的芒果崽。騎行的沿途中有眾多地標建筑的剪影，下拉不松手就會一直處于騎行狀態，下拉的反饋體驗度做得很好。

3.8、漫步的卡通形象

利用動態卡通形象作為刷新設計案例較多，特別是行走和跑步，這一類都比較貼合刷新這一動態表達。比如在少年得到 APP 中，在下拉刷新過程中以一個背著書包漫步的卡通形象進行表達，流暢的動效完美的呈現了學生放學或者上學時，背著書包漫步的場景。這樣的呈現方式不僅貼合功能含義，也能與用戶產生更好的情感共鳴。

3.9、業務化的 3D 圖標

友啥 APP 利用 3D 圖標進行循環切換代表刷新過程，帶有業務屬性的圖標不僅可以直觀的突出產品特性，3D 圖標化之后視覺感十足。圖標切換帶來的動效流暢自然，匹配刷新動作的差異化也非常明顯。

3.10、刷新動作下的多功能結合

刷新已經不局限于內容更新這一單一需求，一些電商類產品也賦予了刷新多功能的屬性，帶來更多樣化的操作體驗。

比如淘寶 APP 首頁下拉刷新時，短距離下拉依然屬于刷新范圍，繼續下拉則會提示釋放進入淘寶二樓。在保持刷新基礎功能的前提下，融入了多功能場景，開發出功能或者活動的全新曝光入口。

在商品詳情頁時下拉則無法提供刷新服務，為了給予更好的反饋設計，下拉動作便會顯示我的足跡。不僅可以在用戶習慣性操作時給予反饋，足跡的提供也更方便用戶做出選擇。

同一個產品也并非只能呈現出一種刷新設計方案，不同的業務場景可以使用不同的表達。淘寶 APP 里面便根據場景的不同提供了多種刷新方案。常規界面的刷新便以品牌字“淘”作為設計出發點，刷新的過程以動態形式表達品牌字，簡單粗暴的傳遞出品牌感。

3.11、結合 Slogan 完成刷新

刷新不僅只是內容的更新，產品設計中呈現出更豐富的表達，比如輔助傳播活動、宣傳品牌形象和 Slogan 等。產品設計師都在賦予單一功能多重使命，帶來豐富多樣的使用體驗。

58 同城首頁在下拉刷新時，除了體現刷新動態以外，也展示了 Slogan “讓生活簡單美好”。借助刷新入口的曝光度，更快的將產品的定位傳遞給用戶，增加用戶對產品的好感度。

3.12、保持格調一致的設計

很多小眾的產品在設計上面呈現出比較有格調的設計，區別于常規的氛圍營造，設計風格更加簡約大氣。

屋顏 APP 整體的設計風格就屬于比較簡約文藝，在下拉刷新的設計中也保持了這個風格特征。以生活物品演變出的線形圖標體現刷新的過程，整體的過度和銜接也恰到好處。

3.13、探索式的刷新設計

刷新設計除了圖形、動效、文案等層面發揮以外，背景層發揮的案例相對較少，除了配合傳播性質的設計。

AcFun 在下拉刷新時，背景層設計成類似于宇宙空間的插畫場景，刷新的過程就像探索一樣。配合卡通形象左顧右盼的動效，帶來的感官效果也是非常不錯的。

關于刷新設計的優秀案例很多，這里就不一一例舉了，以上案例僅作為拋磚引玉形式的引導。大家根據這個框架多多體驗產品，總結更多的優秀案例。

四、總結

刷新設計作為產品中使用較為頻繁的基礎功能，與用戶的接觸也是非常密切的，設計的重要性因此不言而喻。無論是突出品牌感、趣味性、差異化還是強化感官層面的體驗，或者是多功能結合等，都是產品設計師重點發揮的模塊之一。

本文以案例分析為引導，為大家梳理了刷新設計的形式與思路，希望可以拋磚引玉，帶給大家更多的設計靈感。總結觀點屬于個人理解后的呈現，如有欠缺大家選擇性吸收和修正補全。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》刷新設計的千奇百態（UI設計）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司