前言

數(shù)據(jù)保存是Web端工具的基礎(chǔ)功能，一般在產(chǎn)品和技術(shù)框架設(shè)計(jì)之初就已經(jīng)確定了數(shù)據(jù)保存的方式，后續(xù)不太會頻繁更改。

正因?yàn)槿绱?，在日常需求迭代中，設(shè)計(jì)師很容易忽略數(shù)據(jù)保存的過程，也很少質(zhì)疑當(dāng)前的保存機(jī)制是否合理，但是當(dāng)需要設(shè)計(jì)新模塊或產(chǎn)品時就會對保存有疑惑。

此外，保存也是一個受技術(shù)限制較大的領(lǐng)域，設(shè)計(jì)師需要對保存的技術(shù)類型有基礎(chǔ)認(rèn)知，因?yàn)樗鼤绊懕４嫔У倪壿嫼徒换バ问健?/span>

本文將會基于個人經(jīng)驗(yàn)，從設(shè)計(jì)表現(xiàn)和技術(shù)實(shí)現(xiàn)的角度聊聊Web端工具的數(shù)據(jù)保存。

「Chapter One」保存的對象

對于Web端工具產(chǎn)品來說，保存的對象可分為「文件數(shù)據(jù)」、「設(shè)置數(shù)據(jù)」、「用戶行為數(shù)據(jù)」。

1.1 文件數(shù)據(jù)

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

1.2 設(shè)置數(shù)據(jù)

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

用戶級別：數(shù)據(jù)保存在當(dāng)前用戶的賬號下，同一個用戶的所有文檔都會應(yīng)用該設(shè)置，比如酷家樂云設(shè)計(jì)工具的偏好設(shè)置。

組織級別：數(shù)據(jù)保存在組織級別，可能由組織管理員設(shè)置，同一個組織下的所有用戶都應(yīng)用該數(shù)據(jù)。

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

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

1.3 用戶行為數(shù)據(jù)

技術(shù)上經(jīng)常把「用戶是否進(jìn)行過xx行為」這樣數(shù)據(jù)保存在用戶級別或設(shè)備級別，用于差異化的引導(dǎo)、運(yùn)營方案。這類數(shù)據(jù)雖然不能被視為用戶資產(chǎn)，但對于產(chǎn)品設(shè)計(jì)來說至關(guān)重要。

<h2 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin: 8px 8px 16px; font-size: 20px; white-space: normal; line-height: 1.5; letter-spacing: -0.008em; color: rgb(23, 43, 77); border-bottom-color: rgb(255, 255, 255); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" background-color:="" rgb(255,="" 255,="" 255);"="" class="js_darkmode__19" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h2-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

「Chapter Two」保存的位置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)數(shù)據(jù)保存的位置，可以分為兩類：后端保存和前端保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常見的保存方式，觸發(fā)保存后，將方案數(shù)據(jù)上傳并存儲在服務(wù)器（云端），需要聯(lián)網(wǎng)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依賴網(wǎng)絡(luò)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.數(shù)據(jù)量大時會耗性能，可能會阻塞操作</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以緩存 (cache) 的方式將數(shù)據(jù)保存在瀏覽器中，一般采用的技術(shù)方案是 indexDB（如Figma)。即使將瀏覽器關(guān)閉，下次打開時仍能夠恢復(fù)數(shù)據(jù)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制（幾百兆）；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必須要同設(shè)備，且不能清除緩存；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有時間上限（大部分瀏覽器最多可以保存 30 天）</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">還有一種前端的臨時保存，即會話保存（sessionStorage），通常為了方便單次會話而設(shè)置，例如記住選項(xiàng)狀態(tài)、輸入框的內(nèi)容等，但只要關(guān)閉或刷新標(biāo)簽頁這些數(shù)據(jù)就會被清除。從嚴(yán)格意義上來說，會話保存不是真正的保存，本文不對此展開討論。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般會以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網(wǎng)絡(luò)或服務(wù)不穩(wěn)定造成的數(shù)據(jù)丟失。</span></span>
</p>

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Three」保存的觸發(fā)機(jī)制
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">從保存的觸發(fā)維度，可以將保存行為分為自動保存、手動保存、提示保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自動保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)保存的觸發(fā)條件，可將自動保存分為以下3種：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定時觸發(fā)保存以一定的時間間隔（通常采用幾分鐘 ~ 1 小時）周期性地自動觸發(fā)保存。這是酷家樂云設(shè)計(jì)工具目前采用的保存方式。這種自動保存能減少因軟件崩潰、斷電等特殊原因造成的數(shù)據(jù)丟失的影響，但仍無法避免數(shù)據(jù)丟失，需要手動保存作為輔助。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 條件觸發(fā)保存特定的用戶行為會觸發(fā)方案自動保存。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具體哪些行為需要觸發(fā)保存，則要結(jié)合業(yè)務(wù)邏輯和技術(shù)實(shí)現(xiàn)來共同確定。要注意的是，這類保存通常因技術(shù)原因而采用，用戶對其沒有預(yù)期，盡量不要讓它打斷或干擾用戶的操作。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 實(shí)時保存只要數(shù)據(jù)發(fā)生改變，立即觸發(fā)自動保存，無需用戶手動保存（盡管一些產(chǎn)品考慮到用戶習(xí)慣，仍會保留手動保存的交互）。部分產(chǎn)品會用間隔幾秒鐘的自動保存（如 Microsoft 365），效果基本等同于實(shí)時保存。實(shí)時保存能最大程度避免數(shù)據(jù)丟失，是Web端工具理想的保存觸發(fā)方式。但因?yàn)榧夹g(shù)原因，并非所有工具都能夠做到實(shí)時保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手動保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手動保存指用戶通過額外的操作觸發(fā)保存，通常為點(diǎn)擊「保存」按鈕或快捷鍵。部分有實(shí)時保存機(jī)制的工具不需要額外的手動保存（如Figma），但對于沒有實(shí)時保存的工具來說，手動保存的設(shè)計(jì)至關(guān)重要。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手動保存，用戶還是可能忘記保存。當(dāng)用戶離開工具或某個環(huán)境時，若程序監(jiān)測到有未保存的內(nèi)容會丟失，則將此風(fēng)險暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關(guān)閉瀏覽器/標(biāo)簽頁的方式離開，也可以在瀏覽器上設(shè)置類似的兜底提示對話框，但是對話框上的文案無法定制。</span></span>
</p>

那如何選擇保存的觸發(fā)機(jī)制？

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「實(shí)時保存」保障性最好，在技術(shù)允許時推薦采用；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技術(shù)原因無法采用「實(shí)時保存」時，推薦使用「定時觸發(fā)保存」 + 「手動保存」共同作用，也能較好地保障數(shù)據(jù)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「條件觸發(fā)保存」通常是因技術(shù)原因而采用，用戶對其沒有預(yù)期，盡量不要讓它打斷或干擾用戶的操作；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在數(shù)據(jù)有丟失風(fēng)險的時候需要提示用戶保存，可根據(jù)用戶的操作路徑選用工具自身的提示或?yàn)g覽器的提示。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Four」保存的觸發(fā)設(shè)計(jì)<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
</h1>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 觸發(fā)原則</span></span>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在開始聊具體的設(shè)計(jì)之前，先提出保存的 2 點(diǎn)設(shè)計(jì)原則：</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防錯</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是對方案數(shù)據(jù)的 最重要的 保障機(jī)制。穩(wěn)定的系統(tǒng)需要有可靠的保存機(jī)制，盡量避免各種原因造成的方案數(shù)據(jù)丟失。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">狀態(tài)可見</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反饋需及時有效，讓用戶知道當(dāng)前方案的存儲狀態(tài)，如果有異常也需要第一時間告知，并給出可行的解決方案。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書中提到的“觸發(fā)器”概念，可以將保存作為一個觸發(fā)器。觸發(fā)器是啟動一系列動作的原點(diǎn)，分為系統(tǒng)觸發(fā)器（系統(tǒng)被動觸發(fā)）和手動觸發(fā)器（用戶主動觸發(fā)）。</span></span>
</p>
<h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:&quot;">
</h4>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系統(tǒng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對系統(tǒng)觸發(fā)保存來說，主要需確定2個點(diǎn)，何時觸發(fā)、觸發(fā)頻率。對Web端工具來說，有3種主要的觸發(fā)模式：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定時觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一個獨(dú)立工具一般只有一個保存觸發(fā)間隔設(shè)置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個小時。一般會暴露給用戶設(shè)置。建議產(chǎn)品設(shè)計(jì)師根據(jù)技術(shù)現(xiàn)狀設(shè)定合理的時間，如果保存對性能有較大消耗，過于頻繁的保存也會影響用戶體驗(yàn)?？赏ㄟ^選擇器給用戶幾個合適的選項(xiàng)，選項(xiàng)之間的時間間隔依次變大，總選項(xiàng)數(shù)不超過 5 個。</span></span>
</p>

某設(shè)計(jì)工具偏好設(shè)置中的保存時間設(shè)置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.條件觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用戶行為也可觸發(fā)自動保存，如酷家樂云設(shè)計(jì)工具環(huán)境切換、新建樓層，水電工具的智能設(shè)計(jì)等，都會觸發(fā)方案保存。以下是一些常見的「條件觸發(fā)保存」時機(jī)，這些時機(jī)是由技術(shù)能力、業(yè)務(wù)要求共同決定的。設(shè)計(jì)師需要考慮如果這些時機(jī)觸發(fā)了自動保存，對用戶的操作會用什么影響。</span></span>
</p>

c.實(shí)時觸發(fā)

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">現(xiàn)在已經(jīng)有很多在線工具（如 Figma）實(shí)現(xiàn)了實(shí)時觸發(fā)保存，對用戶來說可以不用再理解保存這個概念，是一種認(rèn)知上的減負(fù)，并且這種方式對數(shù)據(jù)保障的效果也最好。但是，仍然有設(shè)計(jì)師提出這種體驗(yàn)上的風(fēng)險，比如沒有容錯余地、頻繁保存造成的干擾和系統(tǒng)壓力。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手動觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對保存來說，「手動觸發(fā)器」一般來說是一個保存按鈕。在沒有實(shí)時保存的創(chuàng)作類工具中，手動保存按鈕的設(shè)計(jì)至關(guān)重要，一般會放在界面上方較顯眼的位置，并設(shè)置快捷鍵 (Ctrl+S)，方便用戶操作。</span></span>
</p>

酷家樂云設(shè)計(jì)工具的保存位于頂部欄第一個分區(qū)

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而對于管理類工具，保存按鈕一般位于頁面下方，因?yàn)橛脩粢话銖捻撁嫔系较麓_認(rèn)完內(nèi)容后再進(jìn)行保存。</span></span></span>
</p>

酷家樂賬號設(shè)置頁面

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Five」保存的反饋設(shè)計(jì)
</h1>

<h3 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin-top: 10px; font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin-left:="" 8px;="" margin-right:="" 8px;"="" class="js_darkmode__98" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h3-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">

5.1 成功反饋

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自動保存的反饋對于自動保存，當(dāng)保存結(jié)果無異常時，盡量減少對用戶的干擾，盡量不使用全局提示 (Toast) 反饋。比較場景的做法是在工具某個固定位置，用圖標(biāo)或文字的狀態(tài)變化作為反饋。</span></span>
    </p>

當(dāng)某些條件觸發(fā)保存時，甚至不需要讓用戶感受到保存的發(fā)生，因?yàn)橛脩魧Ρ４媸菦]有預(yù)期的，建議將保存的過程與其他過程合并。

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說從云設(shè)計(jì)工具進(jìn)入施工圖時，因?yàn)榧夹g(shù)原因需要保存方案，但可以將保存方案的進(jìn)程與施工圖加載的進(jìn)程合并。</span></span>
    </p>

b.手動保存的反饋對于手動保存，當(dāng)保存結(jié)果無異常時，可使用全局提示（Toast）告知保存進(jìn)度和保存結(jié)果，也可以用「保存」按鈕的狀態(tài)變化作為反饋。

    <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
        <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 異常反饋</span></span></strong>
    </h2>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)保存有異常時，應(yīng)即時給予且較明顯的異常反饋，并幫助用戶排查問題。在設(shè)計(jì)保存異常反饋時，需注意以下 3 點(diǎn)：</span></span>
    </p>
    <ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:&quot;font-size:14px;">
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些數(shù)據(jù)保存異常，是全局?jǐn)?shù)據(jù)還是個別模塊的數(shù)據(jù)，是否會因?yàn)榉呛诵哪K的保存異常而影響到整體用戶進(jìn)程，是否可以通過其他方式（如前端保存）讓用戶繼續(xù)操作</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存異常的原因是什么，用戶可以通過何種操作解決問題（檢查網(wǎng)絡(luò)？重新登錄？）</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)從異常恢復(fù)后，應(yīng)該如何提示用戶</span></span>
        </li>
    </ul>

圖片a

圖片b

圖片c

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        圖片
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        Figma與保存異常相關(guān)的反饋 a.保存異常反饋；b.異常原因與解決方法；c.異常恢復(fù)提示
    </p>
    <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
        總結(jié)
    </h1>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后總結(jié)一下，當(dāng)我們接手一個新產(chǎn)品、新模塊、新需求的設(shè)計(jì)時，應(yīng)該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設(shè)計(jì)保存：</span></span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先，確定保存對象，是文件數(shù)據(jù)、設(shè)置數(shù)據(jù)，還是用戶行為數(shù)據(jù)。一個完整的產(chǎn)品一般都會包含以上三者，但對于某個具體的需求，可能只涉及其中一兩種。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存對象后，可以與產(chǎn)品、技術(shù)等團(tuán)隊(duì)成員一起確定保存的位置（云端、瀏覽器）和保存的觸發(fā)機(jī)制（自動保存、手動保存、提示保存）。建議根據(jù)用戶流程在不同的觸點(diǎn)用不同的觸發(fā)機(jī)制，以最大程度保障數(shù)據(jù)安全。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下來，根據(jù)保存對象、保存觸發(fā)機(jī)制，設(shè)計(jì)保存的交互，包含保存的觸發(fā)、保存的規(guī)則和保存的反饋。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后，以用戶使用工具的流程再檢查一遍數(shù)據(jù)的產(chǎn)生和存儲，是否會有遺漏，設(shè)計(jì)保存兜底。</span></span>
    </p>

作者：酷家樂UED      來源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司