通過分析幾個官方設計案例：Mac OS X Lion, Microsoft, WordPress， Rhino，和幾個親自體驗的產品：Lofter，簡書，Medium，Qzone說說，來分析auto save的使用場景和注意事項。

auto save 這個看似小小的功能也有豐富的設計點。以下，通過對幾款產品auto save的使用情況來總結分析auto save該如何使用。

首先，不妨先考慮不同的使用場景，帶著問題來看案例。哪些場景下需要auto save?

• 編輯文檔->保存草稿/完成/提交；
• 編輯文檔（不需要提交的文檔）；
• 編輯文檔->跳轉到其他頁面；
• 編輯文檔->出事故（電腦死機/斷電等）。

特殊情況：兩個用戶在不同地方編輯同一個文檔。

案例分析：

以下先從幾個官方設計文檔出發(fā)，看看其他產品是怎么做的，再從個人使用角度分析幾款產品，最后總結分析結果。

一，Mac OS X Lion:

自動保存：

• 在工作暫停間隙間自動保存；
• 如果沒有連續(xù)工作沒有暫停，則每隔5分鐘自動保存一次；
• 在后臺默默地保存，沒有提示和進度條，不會干擾用戶；

恢復版本：

• 自動保存的版本排列成左右兩部分，左邊是目前的版本，右邊是之前自動保存的版本，方便用戶做對比；
• 可以回退到之前的任何一個版本或者將之前版本中的一部分（如圖/文字等）復制到當前版本中。

上圖為Mac OS X Lion中的Versions Browser，用于恢復自動保存的文件，其中：

1. 為當前版本；
2. 為一系列的歷史版本：用戶可以從歷史版本中復制所需的任何元素（如圖和文字）到新的版本中；
3. 為恢復按鈕：按下可以用歷史版本替換當前版本；
4. 為時間軸：歷史版本的時間軸。點擊時間軸上的日期可以查看該日期的歷史版本；

參考：

https://support.apple.com/en-us/HT202255

二，Microsoft：

自動保存：

1. 修改文檔30秒后會自動保存。如果沒有修改動作，則自動保存不會發(fā)生；
2. 如果你在編輯文檔時，另一個人在同步編輯它（如在線文檔），則任何一個人的修改都會在自動保存發(fā)生后更新在另一個人正在編輯的文檔中;（附上原文，以免翻譯錯： If someone else has updated the same record while you’re editing it, those changes will be retrieved and displayed in the form when auto-save occurs.）

參考：

https://technet.microsoft.com/en-us/library/dn531073.aspx

三，WordPress:

自動保存：

• 每隔幾秒自動保存一次；
• 可以看到上次自動保存的時間，并且可以手動保存；
• 所有自動保存的版本都留著，可以隨時回退到其中的任何一個版本；

對于已發(fā)布的內容：

• 對于已發(fā)布的內容，自動保存仍然運行，但是不會覆蓋已發(fā)布的內容；
• 直到點擊“更新”按鈕才會將更改內容發(fā)布到網上；

編輯中：

• 當你編輯文檔時突然斷網，或者不小心點進另一個頁面，WordPress.com會自動將你編輯的內容存到瀏覽器的本地存儲（local storage）中，這樣當你再次打開編輯器的時候就會看到上次編輯的內容；

參考：

https://en.support.wordpress.com/autosave

四，Rhino:

自動保存：

• 每隔一段時間自動保存一次；
• 當用戶手動關閉文檔之后，自動保存的版本會被清空；
• 如果是非正常關閉，如電腦死機或者斷電，自動保存的版本會保存在硬盤上；
• 當你打開Rhino時，如果Rhino檢測到一個自動保存的文件，它會提示你保存該文件；

參考：

http://docs.mcneel.com/rhino/5/help/en-us/commands/autosave.htm

實際體驗

以上都是參考的官方設計文檔，接下來親自體驗下身邊的產品來直觀感受下auto save。

一、Lofter

Lofter的自動保存能力讓我印象深刻，因為我編輯了內容后沒保存直接關掉網頁，下次打開lofter點擊“文字”按鈕時，發(fā)現我上次編輯沒保存的內容都在。

一般情況下，發(fā)文字的按鈕如下，點擊后進入下面的編輯頁面?？梢钥吹桨l(fā)布按鈕有更多選項，其中包括“保存為草稿”。如果選擇保存為草稿，那么相當于手動保存，文章會出現在草稿箱中。

而如果你沒有點擊任何按鈕，直接關掉網頁，那么下次打開lofter時，文字按鈕有了一個小小的變化，那就是右上角像折紙一樣往里折了一角。此時點擊文字按鈕，出來的編輯框中有你上次未保存的內容，你可以繼續(xù)編輯。

選擇“保存為草稿”，則保存內容如下：

這時編輯草稿，多寫“加幾個字加幾個字”，然后，再次不保存的情況的關掉網頁。猜猜下一次打開草稿是什么樣的。

再次打開草稿箱的時候，依然看的是上圖，發(fā)現“加幾個字加幾個字”并沒有出現在草稿中。但是，當我點擊“編輯”按鈕調出編輯器的時候，奇跡發(fā)生了??！沒保存的那幾個字出現在了編輯器中！！如下圖所示。

整理下Lofter的保存流程，制作流程圖如下：

這個案例讓我發(fā)現，編輯器是個多么神奇的存在，可以保存任何我沒保存的內容。

二、簡書

簡書的自動保存超級簡單，比Lofter少了一個層級，流程圖如下：

簡書中的編輯器即草稿箱，每次修改都會隨時保存，“發(fā)布文章”按鈕自動變成“保存中…”以提示正在保存。

點擊“發(fā)布文章”按鈕，文章發(fā)布，按鈕變成“已發(fā)布”。

對于“已發(fā)布”的文章，再次編輯時，依然會出現“保存中…”字樣提示正在保存。已發(fā)布的文章自動保存后，按鈕變成如下的“發(fā)布更新”，再次點擊后才會變成“已發(fā)布”。

這個案例讓我知道一個保存狀態(tài)可以有這么多種，自動保存和手動保存也可以結合得如此天衣無縫。

三、Medium

Medium每隔一段時間自動保存一次，并且保留多個版本，可以看到在publish按鈕旁邊的“…”按鈕上，有個“revision history”的選項，點擊之后可以看到許多autosaved的版本，用戶可以根據需要回退到其中任何一個版本。

這個案例與其他博客的差異點就在于保存了多個版本。這與Photoshop中的“歷史記錄”差不多，給用戶提供更多回退的選擇，但也占用更多系統(tǒng)資源。

四、Qzone說說

Qzone發(fā)表說說的自動保存內容自動同步到其他頁面的發(fā)說說文本框，流程圖如下：

在“個人中心”中，有個發(fā)說說的文本框，輸入以下內容：

此時不點擊發(fā)表按鈕（同時也沒有保存按鈕），直接進入“我的主頁”，找到“我的說說”，可以發(fā)現這里也有一個發(fā)說說的文本框，并且已經填寫了我在“個人中心”的文本框中輸入的內容。這時，如果在這里修改文本框中的內容，回到“個人中心”，會發(fā)現其中的內容也被修改了。這兩個文本框的內容保持一致。

這個案例告訴我們，“幫人幫到底，送佛送到西”，自動保存就要讓用戶在任何一個入口都能看到上次未手動保存的內容。

總結：

一. 自動保存的時間點可以有以下幾種情況：

• 每隔一段時間自動保存；
• 在用戶暫停工作時保存；
• 每次修改立即自動保存；

二.?自動保存版本的保留：

• 僅保留最近一次自動保存的版本；
• 保留多個自動保存的版本，以便回退到其中任何一個版本；

三.?自動保存版本的清空：

• 在手動保存之后，清空之前所有自動保存的版本；
• 手動關閉文檔后清空所有自動保存的多個版本；
• 僅清空最新版本之外的其他版本；

一個小小的功能，也有如此多的設計點。多觀察，多分析，多記錄和總結，希望可以在交互的道路上越走越遠。

#專欄作家#

Snow，微信公眾號：用戶體驗報告。人人都是產品經理專欄作家，東南大學工業(yè)設計研究生，每周更新一篇原創(chuàng)產品體驗報告，分析產品設計體驗的好壞，以此進步。愿與大家共同進步。

本文原創(chuàng)發(fā)布于人人都是產品經理，未經許可，不得轉載。