前言

刷新在產(chǎn)品中屬于基礎(chǔ)功能，方便用戶獲取最新動態(tài)，是普及度較高的基礎(chǔ)功能之一。在設(shè)計(jì)表達(dá)時(shí)有系統(tǒng)級表達(dá)、自定義設(shè)計(jì)、多功能結(jié)合等，設(shè)計(jì)發(fā)揮的可控性較大。

今天黑馬哥就結(jié)合一些優(yōu)秀的線上案例，和大家聊一下關(guān)于產(chǎn)品刷新設(shè)計(jì)的千奇百態(tài)，希望拋磚引玉，和大家一起進(jìn)步。

分享目錄

一、關(guān)于刷新設(shè)計(jì)

二、刷新的設(shè)計(jì)形式

三、線上優(yōu)秀案例分析

四、總結(jié)

一、關(guān)于刷新設(shè)計(jì)

在產(chǎn)品中刷新對于用戶來說并不陌生，是經(jīng)常使用的基礎(chǔ)功能，便于用戶獲取新動態(tài)。在一些可以提供內(nèi)容更新的產(chǎn)品中，刷新獲取內(nèi)容變動是較為常見的形式。

大家都習(xí)慣將刷新稱呼為下拉刷新，其實(shí)刷新的動作不僅限于下拉手勢交互，也有產(chǎn)品采用單擊和上滑等手勢交互實(shí)現(xiàn)刷新動作。比如一些產(chǎn)品在滑動瀏覽內(nèi)容時(shí)，底部標(biāo)簽欄首頁圖標(biāo)會變?yōu)樗⑿碌牟僮鳎ㄟ^點(diǎn)擊實(shí)現(xiàn)頁面內(nèi)容的刷新；也有產(chǎn)品在上滑頁面時(shí)實(shí)時(shí)加載完成刷新，就像很多影視類產(chǎn)品或者瀑布流設(shè)計(jì)的產(chǎn)品。

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

二、刷新的設(shè)計(jì)形式

簡單的刷新動作已經(jīng)不是簡單的設(shè)計(jì)了，在產(chǎn)品設(shè)計(jì)師的創(chuàng)新中呈現(xiàn)出了眾多的優(yōu)秀案例，下面為大家梳理一下不同的設(shè)計(jì)表達(dá)形式。

2.1、系統(tǒng)級表達(dá)

系統(tǒng)級表達(dá)是采用系統(tǒng)默認(rèn)的一些處理形式，類似于花瓣循環(huán)的動態(tài)形式，屬于比較常規(guī)的表達(dá)。也有很多產(chǎn)品采用系統(tǒng)級形式，用戶理解度較高，設(shè)計(jì)創(chuàng)新的角度來說欠缺一些，表現(xiàn)形式比較生硬。

2.2、情感化文案表達(dá)

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

2.3、動態(tài)形式結(jié)合

刷新的動態(tài)表達(dá)形式非常普遍，圖形動效和動作演變等，能夠體現(xiàn)出加載的動作。動態(tài)形式結(jié)合可以使得趣味性更強(qiáng)，動畫演變的過程也能降低加載等待過程中的焦慮感。

2.4、IP 形象結(jié)合

IP 形象結(jié)合到 UI 場景中不僅可以強(qiáng)化品牌感，也能帶來更加情感化的體驗(yàn)。IP 形象結(jié)合到刷新設(shè)計(jì)中，伴隨著動態(tài)演變，以此來體現(xiàn)加載的過程。設(shè)計(jì)形式動感化，趣味性強(qiáng)且感官體驗(yàn)較佳。

2.5、品牌基因結(jié)合

立足于品牌做設(shè)計(jì)，品牌感可以帶來差異化的設(shè)計(jì)表達(dá)，也能提高用戶對品牌的記憶度。很多產(chǎn)品將品牌 LOGO 圖形、輔助圖形、品牌字體、品牌風(fēng)格特征等融入到刷新設(shè)計(jì)中，帶來差異化的刷新體驗(yàn)。

2.6、業(yè)務(wù)屬性結(jié)合

根據(jù)業(yè)務(wù)特征設(shè)計(jì)刷新圖形，讓用戶在刷新的過程中感知產(chǎn)品的業(yè)務(wù)屬性，也是強(qiáng)化記憶點(diǎn)的有效形式。

2.7、多功能結(jié)合

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

2.8、其他設(shè)計(jì)形式

隨著體驗(yàn)的重要性升級，產(chǎn)品設(shè)計(jì)師會在更細(xì)微之處探索出更優(yōu)的解決方案，做出差異化的體驗(yàn)設(shè)計(jì)。而刷新功能也將會呈現(xiàn)更豐富的設(shè)計(jì)，從感官層面帶來更多視覺感的表現(xiàn)，從體驗(yàn)層面結(jié)合更多輔助功能或者業(yè)務(wù)，發(fā)揮更多使用價(jià)值。

三、線上優(yōu)秀案例分析

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

3.1、情感化的文案設(shè)計(jì)

刷新除了在圖形設(shè)計(jì)和動效層面發(fā)揮以外，多功能結(jié)合和文案設(shè)計(jì)也是差異化表達(dá)的方向。文案提示的設(shè)計(jì)相對比較特殊，通過不同的文案來打動用戶的體驗(yàn)。

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

3.2、動態(tài)化 IP 形象

針對下拉刷新這一常規(guī)操作，設(shè)計(jì)形式也是豐富多樣。結(jié)合 IP 形象進(jìn)行動態(tài)演變完成刷新動作，被很多產(chǎn)品設(shè)計(jì)師所采納。

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

3.3、刷新帶來美食誘惑

在完成刷新功能屬性的同時(shí)，還能將產(chǎn)品的屬性或者服務(wù)賣點(diǎn)強(qiáng)化出來，賦予了常規(guī)操作更多的功能價(jià)值。

麥當(dāng)勞在麥麥商城欄目的下拉刷新設(shè)計(jì)中，采用漢堡形象結(jié)合層級動效進(jìn)行表達(dá)，讓人眼前一亮。動效拉長的漢堡不僅體現(xiàn)出份量感，激發(fā)用戶的食欲；漢堡形象就十分麥當(dāng)勞，展現(xiàn)出品牌關(guān)聯(lián)性。

3.4、趣味化 IP 形象

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

3.5、動態(tài) IP 完美結(jié)合

轉(zhuǎn)轉(zhuǎn)的 IP 形象頭部的轉(zhuǎn)動條是其特征所在，在下拉刷新過程中完美的結(jié)合了轉(zhuǎn)動條，還伴隨著裝飾符號散開的效果。不僅貼切的結(jié)合了 IP 形象的特點(diǎn)，裝飾元素的動態(tài)效果也強(qiáng)化了氛圍感，非常符合產(chǎn)品的屬性，是一個(gè)不錯(cuò)的刷新設(shè)計(jì)案例。

3.6、品牌化路徑動效

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

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

3.7、一路騎行的芒果崽

芒果 TV 的下拉刷新設(shè)計(jì)結(jié)合了吉祥物芒果崽，下拉刷新的過程就是一路騎行的芒果崽。騎行的沿途中有眾多地標(biāo)建筑的剪影，下拉不松手就會一直處于騎行狀態(tài)，下拉的反饋體驗(yàn)度做得很好。

3.8、漫步的卡通形象

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

3.9、業(yè)務(wù)化的 3D 圖標(biāo)

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

3.10、刷新動作下的多功能結(jié)合

刷新已經(jīng)不局限于內(nèi)容更新這一單一需求，一些電商類產(chǎn)品也賦予了刷新多功能的屬性，帶來更多樣化的操作體驗(yàn)。

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

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

同一個(gè)產(chǎn)品也并非只能呈現(xiàn)出一種刷新設(shè)計(jì)方案，不同的業(yè)務(wù)場景可以使用不同的表達(dá)。淘寶 APP 里面便根據(jù)場景的不同提供了多種刷新方案。常規(guī)界面的刷新便以品牌字“淘”作為設(shè)計(jì)出發(fā)點(diǎn)，刷新的過程以動態(tài)形式表達(dá)品牌字，簡單粗暴的傳遞出品牌感。

3.11、結(jié)合 Slogan 完成刷新

刷新不僅只是內(nèi)容的更新，產(chǎn)品設(shè)計(jì)中呈現(xiàn)出更豐富的表達(dá)，比如輔助傳播活動、宣傳品牌形象和 Slogan 等。產(chǎn)品設(shè)計(jì)師都在賦予單一功能多重使命，帶來豐富多樣的使用體驗(yàn)。

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

3.12、保持格調(diào)一致的設(shè)計(jì)

很多小眾的產(chǎn)品在設(shè)計(jì)上面呈現(xiàn)出比較有格調(diào)的設(shè)計(jì)，區(qū)別于常規(guī)的氛圍營造，設(shè)計(jì)風(fēng)格更加簡約大氣。

屋顏 APP 整體的設(shè)計(jì)風(fēng)格就屬于比較簡約文藝，在下拉刷新的設(shè)計(jì)中也保持了這個(gè)風(fēng)格特征。以生活物品演變出的線形圖標(biāo)體現(xiàn)刷新的過程，整體的過度和銜接也恰到好處。

3.13、探索式的刷新設(shè)計(jì)

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

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

關(guān)于刷新設(shè)計(jì)的優(yōu)秀案例很多，這里就不一一例舉了，以上案例僅作為拋磚引玉形式的引導(dǎo)。大家根據(jù)這個(gè)框架多多體驗(yàn)產(chǎn)品，總結(jié)更多的優(yōu)秀案例。

四、總結(jié)

刷新設(shè)計(jì)作為產(chǎn)品中使用較為頻繁的基礎(chǔ)功能，與用戶的接觸也是非常密切的，設(shè)計(jì)的重要性因此不言而喻。無論是突出品牌感、趣味性、差異化還是強(qiáng)化感官層面的體驗(yàn)，或者是多功能結(jié)合等，都是產(chǎn)品設(shè)計(jì)師重點(diǎn)發(fā)揮的模塊之一。

本文以案例分析為引導(dǎo)，為大家梳理了刷新設(shè)計(jì)的形式與思路，希望可以拋磚引玉，帶給大家更多的設(shè)計(jì)靈感。總結(jié)觀點(diǎn)屬于個(gè)人理解后的呈現(xiàn)，如有欠缺大家選擇性吸收和修正補(bǔ)全。

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

作者：黑馬青年

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》刷新設(shè)計(jì)的千奇百態(tài)（UI設(shè)計(jì)）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司