中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

數(shù)據(jù)保存是Web端工具的基礎(chǔ)功能，然而在日常需求迭代中，設(shè)計師很容易忽略數(shù)據(jù)保存的過程，也很少質(zhì)疑當(dāng)前的保存機制是否合理。本篇文章就從設(shè)計表現(xiàn)和技術(shù)實現(xiàn)的角度來聊聊Web端工具的數(shù)據(jù)保存，感興趣的朋友快來看看吧。

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

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

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

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

一、保存的對象

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

1. 文件數(shù)據(jù)

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

2. 設(shè)置數(shù)據(jù)

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

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

3. 用戶行為數(shù)據(jù)

技術(shù)上經(jīng)常把「用戶是否進行過xx行為」這樣數(shù)據(jù)保存在用戶級別或設(shè)備級別，用于差異化的引導(dǎo)、運營方案。

這類數(shù)據(jù)雖然不能被視為用戶資產(chǎn)，但對于產(chǎn)品設(shè)計來說至關(guān)重要。

二、保存的位置

根據(jù)數(shù)據(jù)保存的位置，可以分為兩類：后端保存和前端保存。

1. 后端保存

后端保存是最常見的保存方式，觸發(fā)保存后，將方案數(shù)據(jù)上傳并存儲在服務(wù)器（云端），需要聯(lián)網(wǎng)。

局限性：

• 依賴網(wǎng)絡(luò)
• 數(shù)據(jù)量大時會耗性能，可能會阻塞操作

2. 前端保存

前端保存是指以緩存 (cache) 的方式將數(shù)據(jù)保存在瀏覽器中，一般采用的技術(shù)方案是 indexDB（如Figma)。即使將瀏覽器關(guān)閉，下次打開時仍能夠恢復(fù)數(shù)據(jù)。

局限性：

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

還有一種前端的臨時保存，即會話保存（sessionStorage），通常為了方便單次會話而設(shè)置，例如記住選項狀態(tài)、輸入框的內(nèi)容等，但只要關(guān)閉或刷新標(biāo)簽頁這些數(shù)據(jù)就會被清除。從嚴格意義上來說，會話保存不是真正的保存，本文不對此展開討論。

Web端工具一般會以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網(wǎng)絡(luò)或服務(wù)不穩(wěn)定造成的數(shù)據(jù)丟失。

三、保存的觸發(fā)機制

從保存的觸發(fā)維度，可以將保存行為分為自動保存、手動保存、提示保存。

1. 自動保存

根據(jù)保存的觸發(fā)條件，可將自動保存分為以下3種：

（1）定時觸發(fā)保存

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

（2）條件觸發(fā)保存

特定的用戶行為會觸發(fā)方案自動保存。具體哪些行為需要觸發(fā)保存，則要結(jié)合業(yè)務(wù)邏輯和技術(shù)實現(xiàn)來共同確定。要注意的是，這類保存通常因技術(shù)原因而采用，用戶對其沒有預(yù)期，盡量不要讓它打斷或干擾用戶的操作。

（3）實時保存

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

2. 手動保存

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

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

3. 提示保存

即便有手動保存，用戶還是可能忘記保存。當(dāng)用戶離開工具或某個環(huán)境時，若程序監(jiān)測到有未保存的內(nèi)容會丟失，則將此風(fēng)險暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關(guān)閉瀏覽器/標(biāo)簽頁的方式離開，也可以在瀏覽器上設(shè)置類似的兜底提示對話框，但是對話框上的文案無法定制。

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

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

四、保存的觸發(fā)設(shè)計

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

（1）防錯

保存是對方案數(shù)據(jù)的最重要的保障機制。穩(wěn)定的系統(tǒng)需要有可靠的保存機制，盡量避免各種原因造成的方案數(shù)據(jù)丟失。

（2）狀態(tài)可見

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

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

1. 系統(tǒng)觸發(fā)器

對系統(tǒng)觸發(fā)保存來說，主要需確定2個點，何時觸發(fā)、觸發(fā)頻率。對Web端工具來說，有3種主要的觸發(fā)模式：

（1）定時觸發(fā)

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

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

（2）條件觸發(fā)

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

（3）實時觸發(fā)

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

但是，仍然有設(shè)計師提出這種體驗上的風(fēng)險，比如沒有容錯余地、頻繁保存造成的干擾和系統(tǒng)壓力。

2. 手動觸發(fā)器

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

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

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

而對于管理類工具，保存按鈕一般位于頁面下方，因為用戶一般從頁面上到下確認完內(nèi)容后再進行保存。

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

五、保存的反饋設(shè)計

1. 成功反饋

（1）自動保存的反饋

對于自動保存，當(dāng)保存結(jié)果無異常時，盡量減少對用戶的干擾，盡量不使用全局提示 (Toast) 反饋。比較場景的做法是在工具某個固定位置，用圖標(biāo)或文字的狀態(tài)變化作為反饋。

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

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

（2）手動保存的反饋

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

2. 異常反饋

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

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

1. 哪些數(shù)據(jù)保存異常，是全局數(shù)據(jù)還是個別模塊的數(shù)據(jù)，是否會因為非核心模塊的保存異常而影響到整體用戶進程，是否可以通過其他方式（如前端保存）讓用戶繼續(xù)操作
2. 保存異常的原因是什么，用戶可以通過何種操作解決問題（檢查網(wǎng)絡(luò)？重新登錄？）
3. 當(dāng)從異?；謴?fù)后，應(yīng)該如何提示用戶

圖片a

圖片b

圖片c

Figma與保存異常相關(guān)的反饋 ：a.保存異常反饋；b.異常原因與解決方法；c.異?；謴?fù)提示

六、總結(jié)

最后總結(jié)一下，當(dāng)我們接手一個新產(chǎn)品、新模塊、新需求的設(shè)計時，應(yīng)該如何設(shè)計保存：

首先，確定保存對象，是文件數(shù)據(jù)、設(shè)置數(shù)據(jù)，還是用戶行為數(shù)據(jù)。一個完整的產(chǎn)品一般都會包含以上三者，但對于某個具體的需求，可能只涉及其中一兩種。

列出保存對象后，可以與產(chǎn)品、技術(shù)等團隊成員一起確定保存的位置（云端、瀏覽器）和保存的觸發(fā)機制（自動保存、手動保存、提示保存）。建議根據(jù)用戶流程在不同的觸點用不同的觸發(fā)機制，以最大程度保障數(shù)據(jù)安全。

接下來，根據(jù)保存對象、保存觸發(fā)機制，設(shè)計保存的交互，包含保存的觸發(fā)、保存的規(guī)則和保存的反饋。

最后，以用戶使用工具的流程再檢查一遍數(shù)據(jù)的產(chǎn)生和存儲，是否會有遺漏，設(shè)計保存兜底。

參考資料：

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