數據保存是Web端工具的基礎功能，然而在日常需求疊代中，設計師很容易忽略數據保存的過程，也很少質疑當前的保存機制是否合理。本篇文章就從設計表現和技術實現的角度來聊聊Web端工具的數據保存，感興趣的朋友快來看看吧。

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

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

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

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

一、保存的對象

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

1. 文件數據

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

2. 設置數據

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

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

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

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

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

3. 用戶行為數據

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

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

二、保存的位置

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

1. 後端保存

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

局限性：

2. 前端保存

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

局限性：

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

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

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

三、保存的觸發機制

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

1. 自動保存

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

（1）定時觸發保存

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

（2）條件觸發保存

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

（3）實時保存

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

2. 手動保存

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

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

3. 提示保存

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

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

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

四、保存的觸發設計

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

（1）防錯

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

（2）狀态可見

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

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

1. 系統觸發器

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

（1）定時觸發

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

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

（2）條件觸發

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

（3）實時觸發

現在已經有很多在線工具（如 Figma）實現了實時觸發保存，對用戶來說可以不用再理解保存這個概念，是一種認知上的減負，并且這種方式對數據保障的效果也最好。

但是，仍然有設計師提出這種體驗上的風險，比如沒有容錯餘地、頻繁保存造成的幹擾和系統壓力。

2. 手動觸發器

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

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

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

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

酷家樂賬号設置頁面

五、保存的反饋設計

1. 成功反饋

（1）自動保存的反饋

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

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

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

（2）手動保存的反饋

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

2. 異常反饋

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

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

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

圖片a

圖片b

圖片c

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

六、總結

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

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

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

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

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

參考資料：

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

作者：亦陸，公衆号：群核科技用戶體驗設計

本文由 @酷家樂用戶體驗設計 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于CCO協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部