有時候在工作中，一個小的需求往往隱含著大量細(xì)節(jié)和事項需要考慮，比如本篇文章里作者列舉的這個案例，一個簡單的更新按鈕的增加，其實背后藏著許多設(shè)計細(xì)節(jié)。一起來看看本文作者的總結(jié)和分享吧。

前言

最近接到一個小需求，產(chǎn)品說成績頁面的數(shù)據(jù)太多了，自動更新對于服務(wù)器的壓力很大，你加一個更新成績按鈕很快的。在開始著手處理后，我發(fā)現(xiàn)這個看似不起眼兒的按鈕實際上有很多需要注意的細(xì)節(jié)。

一、更新數(shù)據(jù)

更新數(shù)據(jù)可以分為自動更新和手動更新。

自動更新需要編寫定時程序，間隔一定時間自動更新數(shù)據(jù)，而手動更新需要用戶主動點擊按鈕進行數(shù)據(jù)同步。

自動更新的優(yōu)勢在于能夠減少用戶操作，用戶可以直接查看到當(dāng)前最新更新的數(shù)據(jù)。當(dāng)數(shù)據(jù)量較大時，自動更新可能會對服務(wù)器造成太大的壓力，此時可以采用手動更新。

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

手動更新的優(yōu)點除了減少服務(wù)器壓力，還有一個就是用戶可控，將數(shù)據(jù)更新的決定權(quán)交給用戶。比如 figma 組件庫，當(dāng)對組件庫內(nèi)元組件修改后，不會自動更新，而是提示用戶，更新與否讓用戶自己判斷。figma 是設(shè)計師協(xié)同軟件，如果一鍵更新所有組件，更新的組件很可能影響到其他人的設(shè)計稿，為了避免這種情況，將選擇權(quán)交給用戶。

二、手動更新設(shè)計細(xì)節(jié)

1. 更新內(nèi)容

根據(jù)更新類型將更新內(nèi)容分為兩類：統(tǒng)一更新和部分更新。

對于統(tǒng)一更新，可以提供一個入口，而對于部分更新，需要考慮如何提供選擇。比如，單組數(shù)據(jù)更新的入口位置、統(tǒng)一更新入口位置、在統(tǒng)一更新入口是否需增加需更新內(nèi)容的選擇。

2. 更新行為

1）更新前

在更新前，我們需要先了解兩種狀態(tài)：內(nèi)容未發(fā)生變化無需更新和內(nèi)容發(fā)生變化需更新。其中，無需更新算作默認(rèn)狀態(tài)，用戶無需關(guān)注更新情況。

默認(rèn)狀態(tài)對于不同產(chǎn)品的處理也是不一樣的，比如完全不展示更新相關(guān)內(nèi)容，或者顯示“無需更新”，具體還需根據(jù)產(chǎn)品業(yè)務(wù)訴求而判斷。當(dāng)內(nèi)容發(fā)生變化，則顯示“需要更新”，讓用戶知道當(dāng)前數(shù)據(jù)有變化，按需進行更新操作。

例1：figma

默認(rèn)狀態(tài)不展示入口，當(dāng)有更新內(nèi)容時，增加更新icon。

當(dāng)有組件更新時，首先會彈出全局提示告知用戶，用戶可一鍵更新所有內(nèi)容或忽略不更新。若用戶選擇忽略全局提示時，對于單個未更新組件旁也會展示【更新 icon】提示用戶該組件有新內(nèi)容需更新。

這里就可以看到 figma 的設(shè)計非常細(xì)節(jié)，更新 icon 視覺效果做的很弱，因為已經(jīng)以一次強提示告知用戶需更新，是用戶主動選擇忽略，可理解為用戶暫時不想更新，所以對于用戶不想在意的功能，無需過度設(shè)計強占用戶注意力。

對于單組件默認(rèn)狀態(tài)下，更新入口隱藏。figma 右側(cè)的功能是特別繁多的，展示禁用的更新按鈕增加了一定程度的復(fù)雜度，更重要的是會減弱需更新時的效果。

例2：我們產(chǎn)品

背景是在成績管理頁面，為了減少服務(wù)器壓力，讓用戶對成績做手動更新。

a.更新按鈕常顯。若無更新，更新按鈕禁用，當(dāng)有數(shù)據(jù)變化時，更新按鈕可點擊，且使用Popover提示用戶。這里的方案其實和 figma 是類似的，都可以獲取數(shù)據(jù)變化信息，做到主動提示用戶，區(qū)別在于默認(rèn)狀態(tài)下更新按鈕常顯，而figma對于單組件默認(rèn)狀態(tài)不展示更新入口。

那么問題來了，這里展示禁用的更新成績按鈕是否必要？答案是有必要，這里的禁用是為了告知用戶何時可以被使用。其實figma也一樣，統(tǒng)一更新入口常顯，哪怕沒有需更新的內(nèi)容。

好像稍微有些亂，先別亂，從更新內(nèi)容來梳理下。

成績管理頁面的更新入口是統(tǒng)一入口（對應(yīng) figma 的統(tǒng)一入口），元內(nèi)容是每一條成績（對于 figma 的單個組件）。統(tǒng)一入口的設(shè)計都是留有更新按鈕功能，哪怕當(dāng)前不可用，而對于元內(nèi)容，figma 只有在需更新時展示，成績則沒有。

當(dāng)然成績這里沒有是因為業(yè)務(wù)問題無需增加，但思考下如果增加會是什么樣的，是只在有變化的成績旁展示更新按鈕好，還是所有都顯示，部分禁用更好？一定是當(dāng)成績有變化時展示更新按鈕更好，狀態(tài)對比更明顯，只強調(diào)當(dāng)前用戶需要知道。

b.另一種情況是，無法獲取數(shù)據(jù)變化信息，需用戶自己判斷是否更新。這里的問題在于如何給出用戶判斷的依據(jù)。

可以從用戶的目的以及數(shù)據(jù)變化頻率來考慮。例如，老師需要導(dǎo)出成績時，他們會確保獲取最新的成績并點擊更新按鈕，更新成功后完成導(dǎo)出。然而，在下一次查看數(shù)據(jù)時，如何判斷當(dāng)前是否需要更新呢？可以通過比較上一次更新時間與成績的更新頻率來判斷。如果用戶看到上一次更新是在10 分鐘前，而成績的更新頻率本身較低，那么就沒有必要再次點擊更新按鈕。

2）更新中

點擊“更新”按鈕后，系統(tǒng)將進入更新狀態(tài)。如果更新時間過長，可能會讓用戶失去耐心和信心，所以顯示預(yù)計時間和當(dāng)前進度，允許用戶暫時離開稍后再回來查看更新進度。

3）更新結(jié)果

更新結(jié)果分為兩種情況：成功和失敗。當(dāng)更新成功，給予用戶成功反饋，比如message提示。這里需考慮文案內(nèi)容是否展示更新成功的內(nèi)容數(shù)量，以及沒有新內(nèi)容需更新時如何展示。

當(dāng)無法獲取新的數(shù)據(jù)變化時，向用戶展示“無新內(nèi)容”的提示是非常友好的。這樣，用戶可以了解到當(dāng)前內(nèi)容已經(jīng)是最新版本。

更新失敗，需展示失敗原因，解決方案，以及給用戶重新更新的機會，比如網(wǎng)絡(luò)連接問題、數(shù)據(jù)格式錯誤等。

最后

其實工作中的每一個設(shè)計細(xì)節(jié)點都值得剖析，如果僅是簡單的增加一個更新按鈕，是可以快速的完成工作任務(wù)，但可能會忽略掉很多狀態(tài)、規(guī)則、用戶體驗點。