Web端工具如何设计「保存」

数据保存是Web端东西的根底功用，一般在产品和技能结构规划之初就现已承认了数据保存的方法，后续不太会频频更改。

正由于如此，在日常需求迭代中，规划师很简单疏忽数据保存的历程，也很少质疑当时的保存机制是否合理，可是当须要规划新模块或产品时就会对保存有疑问。

此外，保存也是一个受技能约束较大的范畴，规划师须要对保存的技能类型有根底认知，由于它会影响保存收效的逻辑和交互方法。

本文将会依据个人经历，从规划体现和技能完成的视点聊聊Web端东西的数据保存。

关于Web端东西产品来说，保存的目标可分为「文件数据」、「设置数据」、「用户行为数据」。

「文件数据」是彼此独立的内容，比方酷家乐的一个计划、Figma的一个文档都是文件数据，在文件A中触发保存并不会影响到文件B。文件数据是最首要的用户财物，若丢掉会给用户形成很大的丢掉。

「设置数据」分不同的维度，首要有用户等级、安排等级、设备等级这三种。

用户等级：数据保存在当时用户的账号下，同一个用户的一切文档都会运用该设置，比方酷家乐云规划东西的偏好设置。

安排等级：数据保存在安排等级，或许由安排管理员设置，同一个安排下的一切用户都运用该数据。

设备等级：数据保存在设备（浏览器）上，同一个设备上的不同账号、不同文档都会运用此数据。差异用户等级和设备等级的保存很容易，只需清空浏览器缓存，看看数据是否改动即可。

一般来说，「设置数据」也是用户财物。可是设备等级的数据存在丢掉的或许性，一般状况下不会存储许多重要的数据。

技能上常常把「用户是否进行过xx行为」这样数据保存在用户等级或设备等级，用于差异化的引导、运营计划。

这类数据虽然不能被视为用户财物，但关于产品规划来说至关重要。

依据数据保存的方位，能够分为两类：后端保存和前端保存。

后端保存是最常见的保存方法，触发保存后，将计划数据上传并存储在服务器（云端），须要联网。

局限性：

前端保存是指以缓存(cache)的方法将数据保存在浏览器中，一般选用的技能计划是indexDB（如Figma)。即使将浏览器封闭，下次翻开时仍能够康复数据。

局限性：

有巨细约束（几百兆）

有必要要同设备，且不能铲除缓存

有时刻上限（大部分浏览器最多能够保存30天）

还有一种前端的暂时保存，即会话保存（sessionStorage），一般为了便利单次会话而设置，例如记住选项状况、输入框的内容等，但只需封闭或改写标签页这些数据就会被铲除。从严厉意义上来说，会话保存不是真实的保存，本文不对此展开讨论。

Web端东西一般会以后端保存为主，前端保存为辅，这样能够最大程度防止因网络或服务不安稳形成的数据丢掉。

从保存的触发维度，能够将保存行为分为主动保存、手动保存、提示保存。

依据保存的触发条件，可将主动保存分为以下3种：

（1）守时触发保存

以必定的时刻距离（一般选用几分钟~1小时）周期性地主动触发保存。这是酷家乐云规划东西现在选用的保存方法。这种主动保存能削减因软件溃散、断电等独特原因形成的数据丢掉的影响，但仍无法防止数据丢掉，须要手动保存作为辅佐。

（2）条件触发保存

特定的用户行为会触发计划主动保存。详细哪些行为须要触发保存，则要结合事务逻辑和技能完成来一同承认。要注意的是，这类保存一般因技能原因此选用，用户对其没有预期，尽量不要让它打断或搅扰用户的操作。

（3）实时保存

只需数据发生改动，当即触发主动保存，无需用户手动保存（虽然一些产品考虑到用户习气，仍会保存手动保存的交互）。部分产品会用距离几秒钟的主动保存（如Microsoft365），作用根本等同于实时保存。实时保存能最大程度防止数据丢掉，是Web端东西抱负的保存触发方法。但由于技能原因，并非一切东西都能够做到实时保存。

部分有实时保存机制的东西不须要额定的手动保存（如Figma），但关于没有实时保存的东西来说，手动保存的规划至关重要。

即使有手动保存，用户仍是或许忘掉保存。当用户脱离东西或某个环境时，若程序监测到有未保存的内容会丢掉，则将此危险露出给用户，用户能够挑选保存或许直接脱离。假如用户经过直接封闭浏览器/标签页的方法脱离，也能够在浏览器上设置相似的兜底提示对话框，可是对话框上的案牍无法定制。

那怎么挑选保存的触发机制？

「实时保存」保证性最好，在技能答应时引荐选用；

因技能原因无法选用「实时保存」时，引荐运用「守时触发保存」+「手动保存」一同作用，也能较好地保证数据；

「条件触发保存」一般是因技能原因此选用，用户对其没有预期，尽量不要让它打断或搅扰用户的操作；

在数据有丢掉危险的时期须要提示用户保存，可依据用户的操作途径选用东西本身的提示或浏览器的提示。

在开端聊详细的规划之前，先提出保存的2点规划准则：

（1）防错

保存是对计划数据的最重要的保证机制。安稳的体系须要有牢靠的保存机制，尽量防止各种原因形成的计划数据丢掉。

（2）状况可见

引证《微交互》一书中说到的“触发器”概念，能够将保存作为一个触发器。触发器是发动一系列动作的原点，分为体系触发器（体系被迫触发）和手动触发器（用户主动触发）。

对体系触发保存来说，首要需承认2个点，何时触发、触发频率。对Web端东西来说，有3种首要的触发形式：

（1）守时触发

一个独立东西一般只要一个保存触发距离设置，其距离规模很广，能够是几秒钟、几分钟，乃至一个小时。一般会露出给用户设置。主张产品规划师依据技能现状设定合理的时刻，假如保存对功能有较大损耗，过于频频的保存也会影响用户体会。可经过挑选器给用户几个适宜的选项，选项之间的时刻距离顺次变大，总选项数不超越5个。

某规划东西偏好设置中的保存时刻设置

（2）条件触发

特定的用户行为也可触发主动保存，如酷家乐云规划东西环境切换、新建楼层，水电东西的智能规划等，都会触发计划保存。以下是一些常见的「条件触发保存」机遇，这些机遇是由技能才能、事务要求一同决议的。规划师须要考虑假如这些机遇触发了主动保存，对用户的操作会用什么影响。

（3）实时触发

现在现已有许多在线东西（如Figma）完成了实时触发保存，对用户来说能够不必再了解保存这个概念，是一种认知上的减负，而且这种方法对数据保证的作用也最好。

可是，依然有规划师提出这种体会上的危险，比方没有容错地步、频频保存形成的搅扰和体系压力。

对保存来说，「手动触发器」一般来说是一个保存按钮。

在没有实时保存的创造类东西中，手动保存按钮的规划至关重要，一般会放在界面上方较显眼的方位，并设置快捷键(Ctrl+S)，便利用户操作。

而关于管理类东西，保存按钮一般坐落页面下方，由于用户一般从页面上到下承认完内容后再进行保存。

酷家乐账号设置页面

（1）主动保存的反应

当某些条件触发保存时，乃至不须要让用户感受到保存的发生，由于用户对保存是没有预期的，主张将保存的历程与其他历程兼并。

比方说从云规划东西进入施工图时，由于技能原因须要保存计划，但能够将保存计划的进程与施工图加载的进程兼并。

（2）手动保存的反应

哪些数据保存反常，是大局数据仍是单个模块的数据，是否会由于非中心模块的保存反常而影响到全体用户进程，是否能够经过其他方法（如前端保存）让用户持续操作

保存反常的原因是什么，用户能够经过何种操作解决问题（查看网络？从头登录？）

当从反常康复后，应该怎么提示用户

图片a

图片b

图片c

最终总结一下，当咱们接手一个新产品、新模块、新需求的规划时，应该怎么规划保存：

首要，承认保存目标，是文件数据、设置数据，仍是用户行为数据。一个完好的产品一般都会包括以上三者，但关于某个详细的需求，或许只触及其间一两种。

列出保存目标后，能够与产品、技能等团队成员一同承认保存的方位（云端、浏览器）和保存的触发机制（主动保存、手动保存、提示保存）。主张依据用户流程在不同的触点用不同的触发机制，以最大程度保证数据安全。

最终，以用户运用东西的流程再查看一遍数据的发生和存储，是否会有遗失，规划保存兜底。

参考资料：

DanSaffer.微交互[M].人民邮电出版社.2013.

作者：亦陆，大众号：群核科技用户体会规划

本文由@酷家乐用户体会规划原创发布于人人都是产品司理，未经许可，制止转载

题图来自Unsplash，依据CCO协议。

该文观念仅代表作者自己，人人都是产品司理渠道仅供给信息存储空间服务。