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

前言

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

一、更新數據

更新數據可以分為自動更新和手動更新。

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

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

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

二、手動更新設計細節

1. 更新內容

根據更新類型將更新內容分為兩類：統一更新和部分更新。

對于統一更新，可以提供一個入口，而對于部分更新，需要考慮如何提供選擇。比如，單組數據更新的入口位置、統一更新入口位置、在統一更新入口是否需增加需更新內容的選擇。

2. 更新行為

1）更新前

在更新前，我們需要先了解兩種狀態：內容未發生變化無需更新和內容發生變化需更新。其中，無需更新算作默認狀態，用戶無需關注更新情況。

默認狀態對于不同產品的處理也是不一樣的，比如完全不展示更新相關內容，或者顯示“無需更新”，具體還需根據產品業務訴求而判斷。當內容發生變化，則顯示“需要更新”，讓用戶知道當前數據有變化，按需進行更新操作。

例1：figma

默認狀態不展示入口，當有更新內容時，增加更新icon。

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

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

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

例2：我們產品

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

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

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

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

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

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

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

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

2）更新中

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

3）更新結果

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

當無法獲取新的數據變化時，向用戶展示“無新內容”的提示是非常友好的。這樣，用戶可以了解到當前內容已經是最新版本。

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

最后

其實工作中的每一個設計細節點都值得剖析，如果僅是簡單的增加一個更新按鈕，是可以快速的完成工作任務，但可能會忽略掉很多狀態、規則、用戶體驗點。