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

前言

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

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

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

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

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

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

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

1. 更新內(nèi)容

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

對(duì)于統(tǒng)一更新，可以提供一個(gè)入口，而對(duì)于部分更新，需要考慮如何提供選擇。比如，單組數(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)對(duì)于不同產(chǎn)品的處理也是不一樣的，比如完全不展示更新相關(guān)內(nèi)容，或者顯示“無需更新”，具體還需根據(jù)產(chǎn)品業(yè)務(wù)訴求而判斷。當(dāng)內(nèi)容發(fā)生變化，則顯示“需要更新”，讓用戶知道當(dāng)前數(shù)據(jù)有變化，按需進(jìn)行更新操作。

例1：figma

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

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

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

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

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

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

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

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

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

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

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

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

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

2）更新中

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

3）更新結(jié)果

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

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

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

最后

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