前言

數據保存是 Web 端工具的基礎功能，一般在產品和技術框架設計之初就已經確定了數據保存的方式，后續不太會頻繁更改。

正因為如此，在日常需求迭代中，設計師很容易忽略數據保存的過程，也很少質疑當前的保存機制是否合理，但是當需要設計新模塊或產品時就會對保存有疑惑。

此外，保存也是一個受技術限制較大的領域，設計師需要對保存的技術類型有基礎認知，因為它會影響保存生效的邏輯和交互形式。

本文將會基于個人經驗，從設計表現和技術實現的角度聊聊 Web 端工具的數據保存。

更多相關干貨：

一、保存的對象

對于 Web 端工具產品來說，保存的對象可分為「文件數據」、「設置數據」、「用戶行為數據」。

1. 文件數據

「文件數據」是相互獨立的內容，比如酷家樂的一個方案、Figma 的一個文檔都是文件數據，在文件 A 中觸發保存并不會影響到文件 B。文件數據是最主要的用戶資產，若丟失會給用戶造成很大的損失。

2. 設置數據

「設置數據」分不同的維度，主要有用戶級別、組織級別、設備級別這三種。

用戶級別：數據保存在當前用戶的賬號下，同一個用戶的所有文檔都會應用該設置，比如酷家樂云設計工具的偏好設置。

組織級別：數據保存在組織級別，可能由組織管理員設置，同一個組織下的所有用戶都應用該數據。

設備級別：數據保存在設備（瀏覽器）上，同一個設備上的不同賬號、不同文檔都會應用此數據。區別用戶級別和設備級別的保存很簡單，只要清空瀏覽器緩存，看看數據是否變化即可。

一般來說，「設置數據」也是用戶資產。但是設備級別的數據存在丟失的可能性，一般情況下不會存儲大量重要的數據。

3. 用戶行為數據

技術上經常把「用戶是否進行過 xx 行為」這樣數據保存在用戶級別或設備級別，用于差異化的引導、運營方案。

這類數據雖然不能被視為用戶資產，但對于產品設計來說至關重要。

二、保存的位置

根據數據保存的位置，可以分為兩類：后端保存和前端保存。

1. 后端保存

后端保存是最常見的保存方式，觸發保存后，將方案數據上傳并存儲在服務器（云端），需要聯網。

局限性：

1. 依賴網絡；
2. 數據量大時會耗性能，可能會阻塞操作

2. 前端保存

前端保存是指以緩存 (cache) 的方式將數據保存在瀏覽器中，一般采用的技術方案是 indexDB（如 Figma)。即使將瀏覽器關閉，下次打開時仍能夠恢復數據。

局限性：

1. 有大小限制（幾百兆）；
2. 必須要同設備，且不能清除緩存；
3. 有時間上限（大部分瀏覽器最多可以保存 30 天）

還有一種前端的臨時保存，即會話保存（sessionStorage），通常為了方便單次會話而設置，例如記住選項狀態、輸入框的內容等，但只要關閉或刷新標簽頁這些數據就會被清除。從嚴格意義上來說，會話保存不是真正的保存，本文不對此展開討論。

Web 端工具一般會以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網絡或服務不穩定造成的數據丟失。

三、保存的觸發機制

從保存的觸發維度，可以將保存行為分為自動保存、手動保存、提示保存。

1. 自動保存

根據保存的觸發條件，可將自動保存分為以下 3 種：

① 定時觸發保存

以一定的時間間隔（通常采用幾分鐘 ~ 1 小時）周期性地自動觸發保存。這是酷家樂云設計工具目前采用的保存方式。這種自動保存能減少因軟件崩潰、斷電等特殊原因造成的數據丟失的影響，但仍無法避免數據丟失，需要手動保存作為輔助。

② 條件觸發保存

特定的用戶行為會觸發方案自動保存。

具體哪些行為需要觸發保存，則要結合業務邏輯和技術實現來共同確定。要注意的是，這類保存通常因技術原因而采用，用戶對其沒有預期，盡量不要讓它打斷或干擾用戶的操作。

③ 實時保存

只要數據發生改變，立即觸發自動保存，無需用戶手動保存（盡管一些產品考慮到用戶習慣，仍會保留手動保存的交互）。部分產品會用間隔幾秒鐘的自動保存（如 Microsoft 365），效果基本等同于實時保存。實時保存能最大程度避免數據丟失，是 Web 端工具理想的保存觸發方式。但因為技術原因，并非所有工具都能夠做到實時保存。

2. 手動保存

手動保存指用戶通過額外的操作觸發保存，通常為點擊「保存」按鈕或快捷鍵。

部分有實時保存機制的工具不需要額外的手動保存（如 Figma），但對于沒有實時保存的工具來說，手動保存的設計至關重要。

3. 提示保存

即便有手動保存，用戶還是可能忘記保存。當用戶離開工具或某個環境時，若程序監測到有未保存的內容會丟失，則將此風險暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關閉瀏覽器/標簽頁的方式離開，也可以在瀏覽器上設置類似的兜底提示對話框，但是對話框上的文案無法定制。

那如何選擇保存的觸發機制？

1. 「實時保存」保障性最好，在技術允許時推薦采用；
2. 因技術原因無法采用「實時保存」時，推薦使用「定時觸發保存」 + 「手動保存」共同作用，也能較好地保障數據；
3. 「條件觸發保存」通常是因技術原因而采用，用戶對其沒有預期，盡量不要讓它打斷或干擾用戶的操作；
4. 在數據有丟失風險的時候需要提示用戶保存，可根據用戶的操作路徑選用工具自身的提示或瀏覽器的提示。

四、保存的觸發設計

在開始聊具體的設計之前，先提出保存的 2 點設計原則：

1. 防錯

保存是對方案數據的 最重要的 保障機制。穩定的系統需要有可靠的保存機制，盡量避免各種原因造成的方案數據丟失。

2. 狀態可見

保存的反饋需及時有效，讓用戶知道當前方案的存儲狀態，如果有異常也需要第一時間告知，并給出可行的解決方案。

引用《微交互》一書中提到的“觸發器”概念，可以將保存作為一個觸發器。觸發器是啟動一系列動作的原點，分為系統觸發器（系統被動觸發）和手動觸發器（用戶主動觸發）。

① 系統觸發器

對系統觸發保存來說，主要需確定 2 個點，何時觸發、觸發頻率。對 Web 端工具來說，有 3 種主要的觸發模式：

定時觸發

一個獨立工具一般只有一個保存觸發間隔設置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個小時。一般會暴露給用戶設置。建議產品設計師根據技術現狀設定合理的時間，如果保存對性能有較大消耗，過于頻繁的保存也會影響用戶體驗。可通過選擇器給用戶幾個合適的選項，選項之間的時間間隔依次變大，總選項數不超過 5 個。

某設計工具偏好設置中的保存時間設置

條件觸發

特定的用戶行為也可觸發自動保存，如酷家樂云設計工具環境切換、新建樓層，水電工具的智能設計等，都會觸發方案保存。以下是一些常見的「條件觸發保存」時機，這些時機是由技術能力、業務要求共同決定的。設計師需要考慮如果這些時機觸發了自動保存，對用戶的操作會用什么影響。

實時觸發

現在已經有很多在線工具（如 Figma）實現了實時觸發保存，對用戶來說可以不用再理解保存這個概念，是一種認知上的減負，并且這種方式對數據保障的效果也最好。
但是，仍然有設計師提出這種體驗上的風險，比如沒有容錯余地、頻繁保存造成的干擾和系統壓力。

② 手動觸發器

對保存來說，「手動觸發器」一般來說是一個保存按鈕。

在沒有實時保存的創作類工具中，手動保存按鈕的設計至關重要，一般會放在界面上方較顯眼的位置，并設置快捷鍵 (Ctrl+S)，方便用戶操作。

酷家樂云設計工具的保存位于頂部欄第一個分區

而對于管理類工具，保存按鈕一般位于頁面下方，因為用戶一般從頁面上到下確認完內容后再進行保存。

酷家樂賬號設置頁面

五、保存的反饋設計

1. 成功反饋

① 自動保存的反饋

對于自動保存，當保存結果無異常時，盡量減少對用戶的干擾，盡量不使用全局提示 (Toast) 反饋。比較場景的做法是在工具某個固定位置，用圖標或文字的狀態變化作為反饋。

當某些條件觸發保存時，甚至不需要讓用戶感受到保存的發生，因為用戶對保存是沒有預期的，建議將保存的過程與其他過程合并。

比如說從云設計工具進入施工圖時，因為技術原因需要保存方案，但可以將保存方案的進程與施工圖加載的進程合并。

② 手動保存的反饋

對于手動保存，當保存結果無異常時，可使用全局提示（Toast）告知保存進度和保存結果，也可以用「保存」按鈕的狀態變化作為反饋。

2. 異常反饋

當保存有異常時，應即時給予且較明顯的異常反饋，并幫助用戶排查問題。

在設計保存異常反饋時，需注意以下 3 點：

1. 哪些數據保存異常，是全局數據還是個別模塊的數據，是否會因為非核心模塊的保存異常而影響到整體用戶進程，是否可以通過其他方式（如前端保存）讓用戶繼續操作
2. 保存異常的原因是什么，用戶可以通過何種操作解決問題（檢查網絡？重新登錄？）
3. 當從異常恢復后，應該如何提示用戶

圖片 a

圖片 b

圖片 c

Figma 與保存異常相關的反饋 a.保存異常反饋；b.異常原因與解決方法；c.異常恢復提示

六、總結

最后總結一下，當我們接手一個新產品、新模塊、新需求的設計時，應該如何設計保存：

首先，確定保存對象，是文件數據、設置數據，還是用戶行為數據。一個完整的產品一般都會包含以上三者，但對于某個具體的需求，可能只涉及其中一兩種。

列出保存對象后，可以與產品、技術等團隊成員一起確定保存的位置（云端、瀏覽器）和保存的觸發機制（自動保存、手動保存、提示保存）。建議根據用戶流程在不同的觸點用不同的觸發機制，以最大程度保障數據安全。

接下來，根據保存對象、保存觸發機制，設計保存的交互，包含保存的觸發、保存的規則和保存的反饋。

最后，以用戶使用工具的流程再檢查一遍數據的產生和存儲，是否會有遺漏，設計保存兜底。

參考資料：

Dan Saffer.微交互[M].人民郵電出版社.2013.

歡迎關注作者微信公眾號：「群核科技用戶體驗設計」