本文介紹了產(chǎn)品設(shè)計(jì)中的3中保存邏輯，包括：手動(dòng)保存、自動(dòng)保存、提示保存。

產(chǎn)品經(jīng)理在設(shè)計(jì)產(chǎn)品的時(shí)候要注重打造細(xì)節(jié)，在一個(gè)小點(diǎn)中做到極致，并適當(dāng)加入一些小創(chuàng)意，這樣能提升品牌形象和用戶(hù)忠誠(chéng)度。特別在交互設(shè)計(jì)、視覺(jué)體驗(yàn)上，要做多種情況的產(chǎn)品處理。

隨著 B 端產(chǎn)品的持續(xù)發(fā)展，B 端產(chǎn)品的前端由于直接展示給用戶(hù)。

因此往往對(duì)于圖片質(zhì)量、頁(yè)面配色等都經(jīng)過(guò) UI 的仔細(xì)打磨，后臺(tái)產(chǎn)品則由于圖片少、文字多；內(nèi)容展示少、表格多而在界面上慘不忍睹。

作為后臺(tái)產(chǎn)品經(jīng)理，雖說(shuō)我們不用對(duì)產(chǎn)品界面配色負(fù)責(zé)，但是產(chǎn)品的每一處細(xì)節(jié)都應(yīng)該仔細(xì)雕琢，做到貼合場(chǎng)景、使用方便、效率高等特點(diǎn)。

說(shuō)到存儲(chǔ)，大家所能想到的功能想必就是[保存]了吧，正如上文，本篇就對(duì)保存按鈕來(lái)細(xì)說(shuō)下其中的邏輯：

一、手動(dòng)保存

這是一個(gè)非常常見(jiàn)的「編輯 – 保存」頁(yè)面，一般來(lái)說(shuō)，這類(lèi)頁(yè)面的邏輯分成兩種：一類(lèi)是單獨(dú)有個(gè)保存按鈕進(jìn)行保存；另一類(lèi)是修改一項(xiàng)生效一項(xiàng)，無(wú)需額外保存。

單獨(dú)按鈕保存，常見(jiàn)于后臺(tái)管理系統(tǒng)、或者是移動(dòng)端的資料編輯頁(yè)面上。

以 Form 為單位，一次把所有內(nèi)容提交到后臺(tái)。單獨(dú)設(shè)置保存按鈕，我們可以在保存邏輯執(zhí)行前通過(guò)彈窗；讓用戶(hù)對(duì)操作進(jìn)行確認(rèn)，通過(guò)點(diǎn)擊「保存」或者「取消」，來(lái)讓用戶(hù)決定是否執(zhí)行保存。

試想，對(duì)于一個(gè)編輯用戶(hù)頁(yè)面，如果走的是立即生效的邏輯，很可能我們無(wú)意間的一些隨意的修改，就把數(shù)據(jù)改掉了。比如無(wú)意間刪除了用戶(hù)名字中的一個(gè)字，除非我們記得這個(gè)字是什么然后手動(dòng)改回來(lái)，我們是無(wú)法「撤銷(xiāo)」我們的操作的。

另外，對(duì)于一些依賴(lài)于其他輸入項(xiàng)的表單驗(yàn)證行為，我們也需要當(dāng)用戶(hù)修改完所有項(xiàng)目后，統(tǒng)一進(jìn)行驗(yàn)證和提交服務(wù)器。例如修改密碼頁(yè)面。

1. 草稿箱

該不該做草稿箱功能呢？

這里根據(jù)我對(duì)不同產(chǎn)品的觀察，總結(jié)出來(lái)以下兩個(gè)維度，可以作為參考衡量。

1）創(chuàng)作復(fù)雜度

越是操作越多才能完成的內(nèi)容，就越需要草稿保存的功能，防止用戶(hù)誤操作而導(dǎo)致前功盡棄。

這類(lèi)的例子，很多比如前段時(shí)間為女朋友編輯發(fā)個(gè)說(shuō)說(shuō)花了大半個(gè)小時(shí)，結(jié)果一不小心手抖返回了；而內(nèi)容沒(méi)保存，剛剛寫(xiě)的煽情的話是啥來(lái)著。

2）重要程度

什么內(nèi)容重要，這是不太好去定義的，除非給出具體場(chǎng)景。

比如辦公場(chǎng)景，我們用 Word 寫(xiě)文檔，寫(xiě)了一天突然斷電，電腦黑屏，整個(gè)人瞬間都機(jī)靈了一下。

來(lái)電的時(shí)候，用自己顫顫巍巍的小手，戳一下開(kāi)機(jī)鍵，打開(kāi) Word 文檔，彈出一個(gè)對(duì)話框，”有文檔未正確關(guān)閉，是否需要恢復(fù)編輯“，倆眼一放光，歘的一聲，點(diǎn)了確定。

看到斷電前寫(xiě)的文檔，不進(jìn)感嘆，真香！剛剛這兩個(gè)維度，可以幫助我們?cè)诠ぷ髦幸灰紤]幫助用戶(hù)做草稿保存的功能。

2. 本地存儲(chǔ)

空間說(shuō)說(shuō)中，如果你也注意到，也會(huì)發(fā)現(xiàn)有許多地方幫助用戶(hù)保存未完成的內(nèi)容。

這里說(shuō)兩個(gè)地方：

1）發(fā)布說(shuō)說(shuō)中斷，會(huì)提示是否保留此次編輯。如果保留，下次進(jìn)來(lái)會(huì)直接使用當(dāng)前編輯的內(nèi)容，很多內(nèi)容不需要再次編輯。比如選擇圖片，輸入文字等；

2）在空間信息流中，如果你給朋友的某個(gè)動(dòng)態(tài)發(fā)表評(píng)論，但寫(xiě)了一句，沒(méi)發(fā)布；繼續(xù)看空間下面別的信息，過(guò)一會(huì)，回頭如果再點(diǎn)開(kāi)剛剛那個(gè)說(shuō)說(shuō)的那一條動(dòng)態(tài)給評(píng)論；你就會(huì)發(fā)現(xiàn)剛剛編輯的那句話竟然還在，可以接著編輯。

3. 云端存儲(chǔ)

說(shuō)起云端存儲(chǔ)就有人會(huì)問(wèn)怎么判斷：某個(gè)產(chǎn)品的某些功能中保存類(lèi)似草稿內(nèi)容是存在用戶(hù)端本地呢，還是上傳到平臺(tái)服務(wù)器端了呢？

這里有一個(gè)小方法：換一個(gè)終端設(shè)備登錄，看看還能不能看到之前編輯的草稿內(nèi)容。

如果能看到，則保存的未完成的內(nèi)容是備份到服務(wù)器端的，如果看不到之前的草稿內(nèi)容，則是保存在用戶(hù)終端的。

根據(jù)這個(gè)小方法測(cè)試發(fā)現(xiàn)：印象筆記，在用戶(hù)編輯內(nèi)容的時(shí)候，會(huì)程序化自動(dòng)周期性備份內(nèi)容到服務(wù)器端。QQ的草稿箱，一個(gè)是發(fā)布說(shuō)說(shuō)草稿，一個(gè)是評(píng)價(jià)好友動(dòng)態(tài)草稿，均保為本地存儲(chǔ)，換了設(shè)備登錄是看不到之前編輯的草稿內(nèi)容。

1.3.1 草稿應(yīng)不應(yīng)該上傳云端呢

1）必要程度

弄明白為什么需要用戶(hù)草稿箱的具體內(nèi)容，如果不上傳具體草稿箱內(nèi)容是不是可以；如果上傳到平臺(tái)上來(lái)，下一步能干什么，這些數(shù)據(jù)是不是對(duì)產(chǎn)品或運(yùn)營(yíng)策略有實(shí)際的用途。

比如我們都很熟悉的電商平臺(tái)的購(gòu)物車(chē)功能，這就是我們購(gòu)買(mǎi)產(chǎn)品的草稿箱。而且這些數(shù)據(jù)也確實(shí)上傳到了平臺(tái)，平臺(tái)通過(guò)技術(shù)手段，結(jié)合用戶(hù)購(gòu)物車(chē)數(shù)據(jù)，實(shí)現(xiàn)個(gè)性化營(yíng)銷(xiāo)。千人千面，進(jìn)一步完成銷(xiāo)售的目的，那么這是必要的。

再看，像抖音內(nèi)容草稿箱、微信發(fā)布朋友圈草稿等；就算把草稿內(nèi)容上傳到平臺(tái)，但對(duì)產(chǎn)品運(yùn)營(yíng)沒(méi)有實(shí)際支撐用途，也是沒(méi)有必要的。

2）隱私程度

雖然說(shuō)互聯(lián)網(wǎng)的世界里面沒(méi)有隱私，但能做的還是得做。至少平臺(tái)本身得去幫助用戶(hù)，解決一些不必要的隱私泄露問(wèn)題。

從隱私的維度看，越是隱私的未發(fā)布的內(nèi)容，就要盡量讓數(shù)據(jù)保留在用戶(hù)自己手里。

平臺(tái)可以通過(guò)技術(shù)獲取用戶(hù)草稿箱的統(tǒng)計(jì)數(shù)據(jù)，或者特征數(shù)據(jù)。宏觀層面的，比如不同用戶(hù)一般有多少條草稿內(nèi)容。但，確實(shí)是沒(méi)必要去獲取用戶(hù)草稿具體內(nèi)容的，原因很簡(jiǎn)單，用戶(hù)沒(méi)公開(kāi)發(fā)布。

要知道在社交平臺(tái)用戶(hù)注重隱私，多一個(gè)存儲(chǔ)位置備份，就多一份風(fēng)險(xiǎn)。

二、自動(dòng)保存

1. 延遲草稿存儲(chǔ)

目前市面上大部分產(chǎn)品都具備延遲存儲(chǔ)功能，例如：Word、Axure、Xmind、ZBrush、CAD、PohtoShop等等；特點(diǎn)：

• 在工作暫停間隙間自動(dòng)保存；
• 如果沒(méi)有連續(xù)工作沒(méi)有暫停，則每隔X分鐘自動(dòng)保存一次（時(shí)間可由用戶(hù)設(shè)置）；
• 在后臺(tái)默默地保存，沒(méi)有提示和進(jìn)度條，不會(huì)干擾用戶(hù)；

目前在這方面MAC做的比較全面

2. 隨機(jī)草稿存儲(chǔ)

特點(diǎn)：

• 每隔幾秒自動(dòng)保存一次；
• 可以看到上次自動(dòng)保存的時(shí)間，并且可以手動(dòng)保存；
• 所有自動(dòng)保存的版本都留著，可以隨時(shí)回退到其中的任何一個(gè)版本；
• 在WordPress.com上撰寫(xiě)和編輯帖子和頁(yè)面時(shí)，所做的更改每隔幾秒鐘會(huì)自動(dòng)保存一次。在在編輯器右上方的發(fā)布模塊，你會(huì)看到從通知舉動(dòng)保存草稿到自動(dòng)保存到已保存。

以簡(jiǎn)書(shū)為例：簡(jiǎn)書(shū)中的編輯器即草稿箱，每次修改都會(huì)隨時(shí)保存，“發(fā)布文章”按鈕自動(dòng)變成“保存中…”以提示正在保存。

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

對(duì)于“已發(fā)布”的文章，再次編輯時(shí)，依然會(huì)出現(xiàn)“保存中…”字樣提示正在保存。已發(fā)布的文章自動(dòng)保存后，按鈕變成如下的“發(fā)布更新”，再次點(diǎn)擊后才會(huì)變成“已發(fā)布”。

3. 條件草稿存儲(chǔ)

特點(diǎn)：

• 每隔一段時(shí)間或者一個(gè)觸發(fā)條件自動(dòng)保存一次；
• 當(dāng)用戶(hù)手動(dòng)關(guān)閉文檔之后，自動(dòng)保存的版本會(huì)被清空（部分可選擇是否保存歷史記錄）；
• 如果是非正常關(guān)閉，如電腦死機(jī)或者斷電，異常自動(dòng)保存的版本會(huì)保存在硬盤(pán)上；
• 當(dāng)你打開(kāi)文件時(shí)，如果檢測(cè)到一個(gè)異常自動(dòng)保存的文件，它會(huì)提示你保存或者打開(kāi)該文件；

條件存儲(chǔ)顧名思義就是由某個(gè)條件觸發(fā)從而達(dá)到保存的目的，比如PohtoShop中的歷史記錄功能，就是根據(jù)用戶(hù)使用工具后到使用下一個(gè)工具前作為觸發(fā)條件進(jìn)行存儲(chǔ)記錄。不過(guò)因?yàn)椴襟E較為繁瑣這些操作存儲(chǔ)都為本地存儲(chǔ)，并未上傳云端。

Microsoft：對(duì)表單所做的任何更改將在更改后30秒自動(dòng)保存。

如果未對(duì)表單進(jìn)行任何更改，則在打開(kāi)表單時(shí)不會(huì)自動(dòng)保存。進(jìn)行更改后的30秒內(nèi)，將再次開(kāi)始自動(dòng)保存。某人當(dāng)前正在編輯的字段不包括在自動(dòng)保存中。如果其他人在編輯時(shí)更新了同一條記錄，那么當(dāng)自動(dòng)保存時(shí)，這些更改將被檢索并顯示在表單中。

以簡(jiǎn)書(shū)為例：簡(jiǎn)書(shū)編輯是在0.5S左右會(huì)自動(dòng)保存一次，通過(guò)抓包可以看到在編輯的時(shí)候如圖所示：

可以得知每次編輯之后簡(jiǎn)書(shū)都會(huì)向服務(wù)器對(duì)應(yīng)的url發(fā)送數(shù)據(jù)；需要注意的是發(fā)送的方式為put而不是post。

因此不難得出，在實(shí)現(xiàn)類(lèi)似自動(dòng)保存功能的時(shí)候，需要向服務(wù)器put方式發(fā)送數(shù)據(jù)，并且在檢測(cè)到鼠標(biāo)沒(méi)有輸入之后的0.5S左右自動(dòng)想服務(wù)器put一次數(shù)據(jù)。

簡(jiǎn)單地說(shuō)：通常用于向服務(wù)器發(fā)送請(qǐng)求。

• 如果URI不存在，則要求服務(wù)器根據(jù)請(qǐng)求創(chuàng)建資源，如果存在，服務(wù)器就接受請(qǐng)求內(nèi)容，并修改URI資源的原始版本?！狿UT請(qǐng)求那些封裝在Request-URI的實(shí)體。
• 如果Request-URI引用一個(gè)已存在的資源，則該封裝實(shí)體應(yīng)該作為原始服務(wù)器上的修改版本。
• 如果Request-URI不是指向一個(gè)已存在的資源，并且該URI可被請(qǐng)求的用戶(hù)代碼定義為新資源，則原始服務(wù)器可用此URI創(chuàng)建新的資源。
• 如果新的資源被創(chuàng)建，這個(gè)原始服務(wù)器就必須通過(guò)201（Created）響應(yīng)通知用戶(hù)代理。
• 如果已有資源被修改，則發(fā)送200或者204響應(yīng)，表示成功完成了該請(qǐng)求。
• 如果Request-URI既沒(méi)有創(chuàng)建也沒(méi)有修改資源，則應(yīng)給予適當(dāng)?shù)腻e(cuò)誤響應(yīng)來(lái)反映問(wèn)題本質(zhì)。實(shí)體的接受者不能忽略任何不理解或沒(méi)有實(shí)現(xiàn)的Content-*（如Content-Range）頭部，并且必須返回501響應(yīng)。
• 如果請(qǐng)求經(jīng)過(guò)緩存，并且Request-URI標(biāo)識(shí)出一個(gè)或多個(gè)當(dāng)前緩存的實(shí)體，則那些實(shí)體視為過(guò)期了，該方法的響應(yīng)不會(huì)被緩存。POST請(qǐng)求的URI表示處理該封閉實(shí)體的資源，該資源可能是個(gè)數(shù)據(jù)接收過(guò)程、某種協(xié)議的網(wǎng)關(guān)、或者接收注解的獨(dú)立實(shí)體。然而，PUT請(qǐng)求中的URI表示請(qǐng)求中封閉的實(shí)體-用戶(hù)代理知道URI的目標(biāo)，并且服務(wù)器無(wú)法將請(qǐng)求應(yīng)用到其他資源。
• 如果服務(wù)器希望該請(qǐng)求應(yīng)用到另一個(gè)URI，就必須發(fā)送一個(gè)301響應(yīng)；用戶(hù)代理可通過(guò)自己的判斷來(lái)決定是否轉(zhuǎn)發(fā)該請(qǐng)求。

三、提示保存

Toast提示保存也是我們最常見(jiàn)的提示，提示保存基本用于所有用到內(nèi)容型的產(chǎn)品。

當(dāng)監(jiān)測(cè)到用戶(hù)有編輯行為但沒(méi)有保存就想跳轉(zhuǎn)或離開(kāi)的時(shí)候，彈出一個(gè)溫馨的提示：您是否需要保存呢？

用戶(hù)可以選擇去保存或者直接離開(kāi)，用提示保存的辦法就可以基本杜絕用戶(hù)忘記保存的問(wèn)題。

四、總結(jié)

在做保存功能時(shí)候也要注意一些注意事項(xiàng)：

• 有些組件很難定義何時(shí)自動(dòng)保存。比如輸入框里，在編輯一大堆文字的時(shí)候，系統(tǒng)很難判斷何時(shí)用戶(hù)輸入完畢并做保存。
• 每做一步就生效，沒(méi)有容錯(cuò)余地。假想每一個(gè)操作執(zhí)行就立即生效不能反悔，那你真的不敢輕易操作表單了。一個(gè)閃失造成錯(cuò)誤或資損那可不是開(kāi)玩笑的。
• 頻繁保存造成的干擾和系統(tǒng)壓力。每一步操作就保存生效必然帶來(lái)每一步保存成功的提醒。頻繁的成功提示真的會(huì)很干擾用戶(hù)的沉浸操作。另外如此頻繁的調(diào)用保存接口對(duì)于系統(tǒng)也有一定壓力。

很多表單組件很可能你會(huì)覺(jué)得微不足道，但簡(jiǎn)單的組件也會(huì)有很多體驗(yàn)細(xì)節(jié)。我們?cè)谠O(shè)計(jì)時(shí)需要結(jié)合用戶(hù)心智、產(chǎn)品特點(diǎn)、場(chǎng)景、統(tǒng)一性等綜合考慮。

也許你會(huì)有設(shè)計(jì)規(guī)范，但當(dāng)已有的組件影響到了用戶(hù)體驗(yàn)和業(yè)務(wù)目標(biāo)時(shí)，你要去判斷組件是否不合時(shí)宜。

本文由 @阿東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自正版圖庫(kù) 圖蟲(chóng)創(chuàng)意