編輯導(dǎo)讀：用戶在操作產(chǎn)品時(shí)，產(chǎn)品會(huì)給出相對(duì)應(yīng)的反饋，幫助用戶及時(shí)了解產(chǎn)品當(dāng)前的的狀態(tài)，這就是產(chǎn)品的及時(shí)反饋。如何進(jìn)行及時(shí)反饋設(shè)計(jì)？本文作者將對(duì)此進(jìn)行了分析，與你分享。

由于產(chǎn)品及時(shí)反饋常常被設(shè)計(jì)師遺忘，在產(chǎn)品最后階段草草設(shè)計(jì)而沒有進(jìn)行整體性的思考，因此本文分析幾個(gè)及時(shí)反饋的優(yōu)秀案例，作為以后設(shè)計(jì)產(chǎn)品及時(shí)反饋的參考。

一、什么是及時(shí)反饋設(shè)計(jì)

用戶在平時(shí)操作產(chǎn)品時(shí)，產(chǎn)品給出相對(duì)應(yīng)的反饋，比如：刷新、加載、無網(wǎng)絡(luò)等提示，幫助用戶及時(shí)了解產(chǎn)品當(dāng)前的的狀態(tài)。

二、設(shè)計(jì)案例

1. 「餓了么」分布式加載讓你提前感知頁面內(nèi)容

【使用場(chǎng)景】

用戶使用餓了么app進(jìn)行欄目切換時(shí)，通過分布加載的方式先加載頁面框架后加載內(nèi)容，及時(shí)反饋加載內(nèi)容減少用戶心理等待時(shí)間。

【設(shè)計(jì)思考】

1）設(shè)計(jì)目標(biāo)

針對(duì)用戶：解決用戶由于等待時(shí)間過長(zhǎng)而造成不耐煩的問題；

針對(duì)產(chǎn)品：通過先加載頁面框架后加載內(nèi)容的方式，減少用戶心理等待時(shí)間，提升用戶使用體驗(yàn)。

2） 設(shè)計(jì)方案

在點(diǎn)擊切換頁面時(shí)先加載頁面框架再加載內(nèi)容，在內(nèi)容未出現(xiàn)前通過占位符的方式展示，優(yōu)先加載占網(wǎng)絡(luò)資源較少的元素后加載占資源多的元素；用占位符的方式代替頁面框架，提前了解到頁面的整體展示方式，給用戶加載好的錯(cuò)覺。

3）思考總結(jié)

分布加載方式可以通過先加載占網(wǎng)絡(luò)資源少的元素后加載占資源多的元素，在整個(gè)過程中內(nèi)容一點(diǎn)點(diǎn)展示的過程給用戶及時(shí)反饋，讓用戶忽視加載過程，提升用戶使用體驗(yàn)。

2. 「菜鳥」場(chǎng)景化的刷新+絲滑動(dòng)效

【使用場(chǎng)景】

用戶在首頁停留時(shí)間過長(zhǎng)，需要通過下拉刷新的方式更新包裹最新狀態(tài)。

【設(shè)計(jì)思考】

1）設(shè)計(jì)目標(biāo)

針對(duì)用戶：解決用戶刷新過程中無趣等待的問題；

針對(duì)產(chǎn)品：通過品牌場(chǎng)景故事的方式進(jìn)行下拉刷新，加深用戶的品牌形象。

2） 設(shè)計(jì)方案

在下拉刷新操作時(shí)，菜鳥IP形象出現(xiàn)又飛走后包裹的盒子出現(xiàn)再打開的場(chǎng)景動(dòng)畫刷新完成，就像快遞小哥把包裹送到客戶手里打開包裹時(shí)快樂的心情，很符合菜鳥app作為快遞應(yīng)用的特性，加深用戶心中的品牌形象。

3）思考總結(jié)

下拉刷新是目前使用最廣泛的刷新方式幾乎沒有學(xué)習(xí)成本，再把品牌logo、形象融合到下拉刷新中，可以很好的把品牌傳遞給用戶；把產(chǎn)品的特性通過場(chǎng)景化的方式運(yùn)用到下拉刷新給用戶趣味性讓用戶對(duì)品牌產(chǎn)生更好的印象，提升使用率。

3. 「閑魚」無網(wǎng)絡(luò)下的人性化設(shè)計(jì)

【使用場(chǎng)景】

用戶在瀏覽商品時(shí)，由于網(wǎng)絡(luò)不穩(wěn)定給出提示，方便用戶及時(shí)了解無法查看的原因。

【設(shè)計(jì)思考】

1）設(shè)計(jì)方案

• 在瀏覽的過程中突然斷網(wǎng)，會(huì)通過toast提示「當(dāng)前無網(wǎng)絡(luò)」，讓用戶及時(shí)了解網(wǎng)絡(luò)情況；
• 點(diǎn)擊已緩存數(shù)據(jù)進(jìn)入，以品牌形象+語言指引開啟網(wǎng)絡(luò)設(shè)置，點(diǎn)擊進(jìn)入手機(jī)設(shè)置界面，幫助用戶定位問題解決網(wǎng)絡(luò)問題；
• 點(diǎn)擊未成功緩存數(shù)據(jù)進(jìn)入，直接品牌形象+趣味語言提示，減輕用戶在無網(wǎng)絡(luò)下的挫敗感，同時(shí)加深用戶品牌形象。

2）思考總結(jié)

• 在無網(wǎng)絡(luò)的情況下，點(diǎn)擊已緩存數(shù)據(jù)進(jìn)入指引用戶開啟網(wǎng)絡(luò)設(shè)置，考慮到進(jìn)入詳情頁存在下單的概率，指引開啟網(wǎng)絡(luò)，提高商品的下單率，也讓用戶注意力轉(zhuǎn)移到如何解決問題忽略網(wǎng)絡(luò)原因造成的挫敗心理；
• 點(diǎn)擊未加載完成的數(shù)據(jù)進(jìn)入下單的概率不大，通過帶著淚水抱著枕頭的品牌形象就像犯錯(cuò)的小孩提示無網(wǎng)絡(luò)，通過這種情感化的設(shè)計(jì)讓用戶減少內(nèi)心的挫敗感，同時(shí)加深產(chǎn)品的印象。

4. 「FIMO」模擬真實(shí)相機(jī)的換膠卷

【使用場(chǎng)景】

在使用FIMO拍照時(shí)，切換膠卷進(jìn)行照片風(fēng)格的變換，通過頁面轉(zhuǎn)場(chǎng)提示，方便用戶及時(shí)了解切換過程。

【設(shè)計(jì)思考】

1）設(shè)計(jì)方案

點(diǎn)擊相機(jī)右下角的膠卷縮略圖，緊接著機(jī)蓋打開可以看到膠卷，再點(diǎn)擊膠卷可以選擇接下來使用的膠卷機(jī)蓋蓋上，整個(gè)換膠卷的過程模擬實(shí)物相機(jī)換膠卷的操作，很符合產(chǎn)品的特性，真實(shí)的操作體驗(yàn)讓用戶留下深刻的印象，提升產(chǎn)品使用率。

2）思考總結(jié)

目前大部分應(yīng)用通過移入、淡化的方式作為頁面轉(zhuǎn)場(chǎng)，但是對(duì)于需要個(gè)性化的產(chǎn)品需要結(jié)合產(chǎn)品特性進(jìn)行頁面轉(zhuǎn)場(chǎng)的設(shè)計(jì)，F(xiàn)IMO是一款真實(shí)還原膠卷相機(jī)的應(yīng)用，整體風(fēng)格都是擬物化的設(shè)計(jì)，在切換膠卷的頁面轉(zhuǎn)場(chǎng)設(shè)計(jì)成相機(jī)開蓋的形式，延續(xù)了膠卷相機(jī)的風(fēng)格，給用戶心理留下深刻印象。

5. 「宜家家居」幽默極簡(jiǎn)的空狀態(tài)

【使用場(chǎng)景】

首次使用宜家app時(shí)，購物車、收藏等頁面都沒有內(nèi)容，通過幽默的文案和極簡(jiǎn)的圖標(biāo)進(jìn)行提示，告知用戶接下來的操作。

【設(shè)計(jì)思考】

1）設(shè)計(jì)目標(biāo)

針對(duì)用戶：讓用戶了解當(dāng)前狀態(tài)以及接下來的操作；

針對(duì)產(chǎn)品：通過統(tǒng)一的風(fēng)格和幽默的文案，加深產(chǎn)品在用戶心中的印象。

2） 設(shè)計(jì)方案

• 購物袋頁面空狀態(tài)下，通過購物袋的形象、幽默的文案和操作按鈕來提示，購物袋繩子和孔組合成一個(gè)笑臉，按鈕「探索家居靈感」給用戶靈活、自由感，指引用戶挑選滿意的家居。
• 消息為空的情況下，通過消息的圖標(biāo)+「在信息爆炸的時(shí)代，這里格外寧靜」文藝的文案進(jìn)行提示，拉近與用戶的距離。

本文由 @園園 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議