資料儲存是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 點：
- 哪些資料儲存異常，是全局資料還是個别子產品的資料，是否會因為非核心子產品的儲存異常而影響到整體使用者程序，是否可以通過其他方式（如前端儲存）讓使用者繼續操作
- 儲存異常的原因是什麼，使用者可以通過何種操作解決問題（檢查網絡？重新登入？）
- 當從異常恢複後，應該如何提示使用者
圖檔a
圖檔b
圖檔c
Figma與儲存異常相關的回報 ：a.儲存異常回報；b.異常原因與解決方法；c.異常恢複提示
六、總結
最後總結一下，當我們接手一個新産品、新子產品、新需求的設計時，應該如何設計儲存：
首先，确定儲存對象，是檔案資料、設定資料，還是使用者行為資料。一個完整的産品一般都會包含以上三者，但對于某個具體的需求，可能隻涉及其中一兩種。
列出儲存對象後，可以與産品、技術等團隊成員一起确定儲存的位置（雲端、浏覽器）和儲存的觸發機制（自動儲存、手動儲存、提示儲存）。建議根據使用者流程在不同的觸點用不同的觸發機制，以最大程度保障資料安全。
接下來，根據儲存對象、儲存觸發機制，設計儲存的互動，包含儲存的觸發、儲存的規則和儲存的回報。
最後，以使用者使用工具的流程再檢查一遍資料的産生和存儲，是否會有遺漏，設計儲存兜底。
參考資料：
Dan Saffer.微互動[M].人民郵電出版社.2013.
作者：亦陸，公衆号：群核科技使用者體驗設計
本文由 @酷家樂使用者體驗設計 原創釋出于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于CCO協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。