按钮设计是我们经常会遇到的一个类型，一个好的按钮其最重要的就是激起点击欲，让人忍不住去戳戳戳。
我们来看看下面这个按钮：
很普通，处处都很常见的一种按钮，没有任何点击欲。
那我们应该怎么做出她的点击欲呢？
其实就是要让按钮更有立体感，话不多说直接上干货！
可以用不同的颜色，放大一圈，形成对比：
上下错开一些让按钮的造型饱满立体一些，从原来的单一一层变为两层：
为了让按钮更立体我们可以把这两层个复制一层，往下移动几个像素：
这样按钮是不是就已经立体多了？别急，还有呢！
这里细节就比较多，想把按钮做到晶莹剔透可不容易，给大家好好讲一下。
先给图形加上一个内发光：
使用剪切蒙版，涂颜色或者再来一层内发光，加强这个效果：
复制一层，选用更深的颜色，向下移动，剪切蒙版到里面去，把按钮有一个明显的明暗分割线，形成这种光的层次和厚度：
沿着造型刻画高光，和边缘有些间隔：
在白色的底座上加入按钮的投影：
这样一个剔透，立体感强的按钮造型就完成啦！
那还能不能让点击欲更强一些呢？
放上文案看看：
就还是有点单对吧。
这种时候我们就可以从按钮的文案出发，加入一些图案，让它更生动！
比如这里的文案是“发射”，就联想到了火箭，我们可以绘制一个火箭出来。
把它加入到按钮上：
这样一个丰富且有点击欲的按钮就完成了！
并可以用同样的逻辑去延展别的按钮，让他们保持统一性：
增强按钮的点击欲的方式，其实就是让它变得立体且丰富。
1.层次：单独的一个色块，会很单薄，增加层次增加其在造型上的丰富度。
2.厚度：厚度可以让按钮变得更立体。
3.光影：让按钮富有变化，更立体和吸引人。
4.表像图形：一个关联文案信息的点缀图案，可以让人更有食欲。
作者：菜心轻量文 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
今天和大家分享用了几年的一个社交软件Instagram。发现这款软件整体的设计与体验有值得学习的地方，从10个维度分享分享，希望大家喜欢啦～～
下图是关于Instagram的从2010-2022整个图标变化的过程，从中能发现：
1.图标从拟物的风格慢慢变成扁平的风格。
2.从具象的相机变成更加简约线形的相机图标。
3.颜色越来越艳丽、明亮，给人年轻、炫彩、简约的设计感受。
4.从logo的变化中能看出页面将从拟物的时代跨进了扁平时代，也能折射Instagram界面必将是往极简、炫彩的方向走。
我重新临摹Instagram启动图标，发现里面有许多的设计小知识点值得学习。
例如：图标背景颜色有黄色、红色、紫红色、紫色，相邻的两个颜色互为邻近色，使得绘制出的背景自然而炫彩，非常不错的设计，渐变的融入也很自然。
当我们自己做渐变的图标背景时可以用两两相邻的颜色，让渐变融入的更自然。
明显的发现Instagram颜色跟色谱的规律一致，颜色从左到右色相的变化值在50度左右，4种颜色都是用的高饱和度、高明度的色彩，非常艳丽、明亮，利用渐变附在英文上做出英文版的logo。
iPhone 14的字体渐变也是用的这种方法，利用两两相邻的颜色来做渐变。连苹果、Instagram都在用，赶紧学起来吧，你也可以的～～
1.通过自己仔细的观察发现Instagram摄像头图标圆角是带有平滑过度的圆角，和普通的圆角不一样。
2.平滑圆角给用户的感受会更舒适、平滑、有活力，而普通的圆角显得更加生硬、不自然。
3.苹果的主题图标都是带有平滑过度的圆角而不是一个普通圆角，使得图标显得更加自然。
4.可以去看看之前原研哉帮小米设计的logo，会发现他们的logo给人干净会更加有活力、生命力，而不是使用这种普通圆角，而是一种平滑过度的圆角～
1.从Instagram的启动页面看出，Instagram追求的是简约、突出品牌色的方向。
2.主界面主要以用户发的图片为主而不是文字，往往图片比文字更容易产生阅读与反馈。
3.整体的界面简约、素白，图标都是统一用黑色线条的描边。
4.当自己关注的用户，发了一些视频，头像上附带Instagram的品牌色的圆形，在白色的界面用品牌色进行了点缀，让单调的界面更具有识别性。
Instagram的发现页面做的很不错，我重新绘制了这个页面，发现系统想推送给你的图片或者视频会做等比放大2倍处理，一屏显示图片或者视频至少有一个最大显示，给用户的感受是有主次。同时开发也能很好实现这种布局，具有一定的规律性。
在Instagram界面当用户发的图片超出5张时，图片下方的轮播点会出现变化，有大有小。
我重新绘制了一个用户发的7张图片的示例，当用户在左右滑动图片时，轮播的点会跟着动，同时会有大小的显示，暗示用户后面或者前面还有多张图片，有近大远小的感觉，非常细节的设计～（可以利用在自己的一些设计上）
1.在Instagram的用户界面，视频、多张图片、单张图片和置顶4种状态右上角有个图标的标识，让用户清晰知道图片的内容状态，提前给用户有个心理预期与区分。
2.当用户点击进去类似抖音的布局，可以进行上下滑动切换视频内容，双击可给该视频点赞，整体的体验很丝滑，没有任何的卡顿与拖沓。同时界面图标用线性的形式，布局统一、和谐。
Instagram整体的图标设计是线性的图标，线性图标给人的感觉是可点击、可操作的，同时感觉简洁明快的气质。图标的统一让每一个界面的视觉感受都是一致的。
这个界面放在你面前可能都会知道是Instagram这个应用，这个界面框架已经形成品牌意识。 Instagram几年一直没有更改这个布局，非常经典的设计，没有太多花里胡哨的图标与信息，只有简约的线性图标与用户发布的图片，克制的设计。也有很多相机应用、户外广告都借鉴了Instagram布局，已经在用户的心智里面了～
1.越来越多的企业的品牌色往鲜艳的方向走，突出品牌形象。
2.图片的排版不一定是同样大小的，可以有大有小，取决于更想给用户传达什么。
3.图标的统一性很重要，当整个app的图标风格都一致时，给用户的体验的感受也是一致的。
4.不断重复一个设计框架、设计组件时，会形成品牌意识，让用户记得你的产品。
百度小说是百度APP内的垂直频道，拥有过亿月活和行业最全的正版书籍。随着著作权保护意识逐步上升，越来越多的用户愿意为优质的资源和阅读体验付费。2019年底，为了满足用户消费升级所产生的一系列需求，百度小说初步建立了会员体系。经过两年多的打磨，我们不断提升会员的服务体验，并进行了多次优化升级，现在将我们的设计经验分享给大家。
一、设计背景
2021年我国数字阅读用户规模达到5.06亿，同比增长2.43%，半数以上用户愿意为电子阅读付费，占比最重的人群为19~25岁用户，达到44.63%（数据来源《中国数字阅读报告》），“Z世代”已经成为我国数字阅读的主要群体。随着消费升级，用户对服务的需求不断提升，更看重信息之上的附加价值，如认同感、归属感和仪式感。
二、改版原因
2019年，由于时间紧、任务重，我们完成了小说会员从无到有、从0-1的基础场景搭建。但随着设计趋势的变化，当时小说会员的设计风格与主流用户的喜好不完全匹配，在使用场景中也存在易用性不足、内容缺乏吸引力等问题。下图是2019年小说会员的界面。
同时，我们对小说用户进行了视频访谈，搜集了用户在使用会员服务中遇到的问题，如会员福利少、找不到会员专属内容、购买过程有卡顿等，最终梳理为的三大核心问题：身份感知弱、购买路径长和资源内容少。
三、设计目标
在小说会员亟待改版的背景下，我们结合业务目标、旧版核心问题和用户诉求，推导出了本次改版的设计目标—品牌化、链路化和服务化。
1、品牌化—强化会员品牌
小说会员作为百度APP众多会员之一，设计团队希望能带给阅读用户一些不同的品牌记忆点。
1）设计关键词
基于会员的主流用户、产品属性和用户诉求，我们衍生出以下关键词：年轻、品质、尊贵、超值。年轻用户群体的占比越来越高，新版的设计风格力求更好满足年轻用户的审美需求。
2）会员符号
符号是最直观的视觉元素之一，能够以最快的方式传递产品记忆点。在会员品牌符号设计的草图阶段，我们从字母V、VIP、钻石、王冠和小说IP白嘟嘟等多个方向进行了方案发散。最终采用了白嘟嘟图形与尊贵感的V形符号相结合的形式。该方案既延续了小说的视觉符号，又与竞品的会员标识形成差异，从而加深用户的品牌感知和视觉记忆。
3）会员色彩
为了确定更加独特的品牌色，设计团队搜集了大量的尊贵氛围图片，提炼出了玫瑰金，牙金，赤墨等8个具有品质感的颜色。在视觉初稿阶段，我们选择了玫瑰金和黄金两种主色进行了方案尝试。最终根据整体效果确定主色为明亮、高贵的玫瑰金，辅色为黑茶棕，深支子和漆黑的配色方案。新的配色方案让用户感受到新颖、现代，焕然一新。
4）会员图标
在图形元素上，为了增强亲和感，我们选择了圆润的面形图标样式，通过大圆弧和小圆角的细节处理，传递给用户一种年轻、品质的品牌印记。
5）信息传达
我们对会员购买页和权益详情页进行了布局重构，采用深色的背景衬托卡片信息，使得产品框架层和内容信息层更加明确，突出核心内容。
在各类场景中，我们通过会员品牌色彩、图形、符号和IP形象的渗透，强化会员品牌印记。
经过分析研究和实践，我们完成了主场景的设计升级。
2、链路化—精细化运营
就会员体验而言，我们需要关注用户在各种时间和各类场合下的需求，因此我们将会员的全链路状态分为时机、场景和人群三个维度。
1）时机
在不同的时机状态下，我们需要传递给用户不同的信息。只有深入剖析不同状态下的用户诉求，才能为其提供更好的服务。接下来我们从购买前、购买中、购买后和即将过期四个阶段阐述：
①购买前—权益/优惠信息引导
在用户购买前，我们强化了低价和省钱信息，让用户直观的感受到购买会员后的价格福利。为此我们从三个方向上进行优化，在开通购买页，外露省钱金额，帮助用户了解开通会员可享受的收益；在会员频道页，采用外露多项权益，让用户快速了解会员权益；在章节购买页，采用突出会员折扣和会员优惠价，让用户感受到开通会员的折扣福利。
②购买中—优化路径流程
在用户购买中，我们在会员购买链路环节进行简化，采用当前页弹出半层面板替代跳转至会员聚合页的方式，缩短等待加载时间；在章节付费链路环节，将商品选择区信息结构进行优化，减少多章购买的页面跳转，使得用户能够更流畅的完成支付，提升付费体验。
③购买后—强化权益感知
在用户购买后，鉴于付费用户对商品和服务品质有着更高追求，为此我们通过在各类重要入口展示会员权益，包括省钱金额、去广告次数以及各类场景VIP状态提示等方法，以达到强化用户的权益感知。
④即将过期—轻引导续费
在即将过期前，为了避免对用户造成强付费的不友好感知。过期前3天，我们采用了轻量化的形式告知用户续费，通过各类引导信息的提示，让用户知晓会员服务期限届满。
2）场景
我们在入口和功能场景中也进行了精细化设计，让用户更便捷地使用会员服务。为了突出会员优质内容和服务，我们设置了会员专属的频道和书库，方便用户选择。
在各类功能场景中，为了方便用户在使用功能的过程中随时购买，我们设置了多个功能场景的会员开通入口。让用户快捷享受会员服务。
3）人群
通过小说用户数据分析，我们将用户人群分为会员用户、潜在用户、新用户和过期用户。
为了让会员用户能够体验到区分于普通用户的尊贵感，我们在付费页、批量离线、TTS播放页和签到页等场景均采用了会员定制化的配色方案和引导提示，这样使得会员用户在体验服务的各类场景中有更强的身份专属性。
所谓潜在用户，是指仍在犹豫是否购买会员的用户。我们通过限时优惠券、激励视频试用15分钟、书架省钱提示、挽留弹窗和降级版免广告权益等方式，让潜在用户不仅可以先试后买了解会员权益，而且可以通过各类信息提示通晓会员体验，更好地判断是否通过会员服务减少付费金额和提升阅读体验。
我们针对新用户建立了新人见面礼活动，用户在新手福利活动期内可享受超值折扣开通会员，低价体验会员权益。而针对已过期的用户，我们通过下发优惠券、强化特权等形式唤醒用户，以免错过各类福利和特权。
3、服务化—提升会员服务
在内容为王的时代背景下，为了增加会员产品的核心竞争力，我们持续扩充会员书库的数量和类目、拓展会员权益，让用户阅读到更加丰富的小说内容和体验到更多权益的会员服务。小说书库的付费和免费书数量大幅扩充，且书籍类型新增了有声书和短篇故事，增添了小说资源的多样性。
在权益上，对内我们持续拓展会员特权，从最初的4项扩展为10项，新增了有声免费听、免费读故事、整本离线、专属字体、签到1.5倍书币等权益；对外我们联合其他产品，推出了会员赠礼和联合会员服务，用户可以根据自己的需求进行购买，享受组合购买的优惠。
通过多个版本的迭代，我们完成了会员体系的设计升级和落地，用户体验得到了显著提升。
四、未来规划
提升付费产品的用户体验是一个体系化的研究课题，需要各个角色通力合作，合力同行，开拓革新。将来我们还会不断探索，通过不断优化体验细节，不断增加用户权益感知，不断尝试方案创新，形成设计组合拳，为用户提供更好的服务。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
百度酒店以比价为核心特色，经历多次设计探索，初步建立了用户认知。
设计中通过“核心流程分析-明确用户关注信息-探索比价价值”的方式去制定设计策略，并在方案探索与落地阶段，通过思路发散、多轮数据验证与方案迭代，验证了“氛围感知强化、价值信息传达、聚合比价”等设计手段的作用，希望给服务和电商等比价类产品的设计师一些启发和参考。
一、项目背景
酒店住宿在线预订市场中，各个平台基于用户权益、运营补贴等差异进行着激烈的价格竞争，导致行业存在天然的价差。而在我们进行的一次酒店预订访谈中发现，超过半数的用户在预订酒店时会进行比价，而比价的用户中多数会使用2个以上的酒店APP。因此，在市场存在价差且用户有比价诉求的背景下，百度酒店通过接入多家供给及会员低价，旨在建立酒店聚合比价平台，为用户提供性价比最高的酒店搜索服务。
二、设计策略与落地触点
1.目标和策略制定
在上述背景下，我们与产品侧对齐业务目标，结合对用户诉求的分析，确定了设计目标。
为了达成设计目标，需要明确比价在酒店预订的各个触点下对用户的价值是什么，以探索比价如何发挥作用。下图列出了酒店预订的核心流程、核心模块及用户关注信息，由于用户在各个环节关注的信息不同，比价所能发挥的价值也就不同，因此基于比价是否影响用户进行选择和决策，我们又将核心流程分成服务报价选择前、服务报价选择时、服务报价选择后。
设计目标的实现也对应上述3个环节如下图：
2.明确落地触点
为了找到一些好的比价概念和价值的传达方式，以及提升比价体验的方式，我们进行了竞品调研，竞品包含酒店、商品等不同行业，调研结论归纳如下：
结合竞品调研结论，我们根据百度酒店的核心流程和触点进行了设计策略的拆解，建立了策略和落地的映射关系。
三、方案探索与落地
1.提升感知-让用户知道百度酒店可以比价
这一环节的设计目标是要让用户知道百度酒店可以比价，以吸引用户在百度酒店完成下单行为，因此清晰、有吸引力的比价元素设计十分重要。基于竞品调研内容，我们进行了设计探索。
1）酒店列表-氛围感知强化及价值信息传达
下图所示为酒店列表比价设计的探索过程，最初的方案，为了保证酒店信息的获取体验，采用了与传统酒店预订平台采用一致的结构和信息优先级，仅结合图片区域和价格做了比价信息的结合，但这种设计与传统酒店预订平台差异很小，比价感知和价值的传达效果并不好。因此设计侧转变思路，在酒店列表中通过更强化的模块来突出比价的感知，同时结合“比某平台低xx”的文案说明比价结果，传达“比价获得更低价”的感知。
酒店列表覆盖多个场景，为了建立百度酒店一致的体验和认知，我们将列表的设计覆盖到了搜索结果页和小程序的多个页面，如图所示。
2）房型及服务报价-基于低价推荐去强化比价
房型及服务报价模块对应酒店精准需求和酒店详情页，与酒店列表思路一致，方案在逐渐与传统酒店预订平台产生差异化，去强化比价、低价的感知，形成记忆点。
下图为搜索结果页的方案，最初外露了多个房型，以满足用户的选择诉求，但从用户行为数据来看，百度酒店的绝大多数用户会选择酒店的最低价房型及报价，因此我们调整设计方案，结合最低报价，用模块式的对比方式去强化比价，并通过“低价立省xx”的信息去传达低价感知。另外，这一部分的设计也和聚合比价有所结合，后面会进行详细的说明。
详情页的主要模块设计与搜索结果页基本一致，如下图所示，详情页中将最低报价作为低价房型推荐，以建立一致的比价认知同时便于用户快捷预订低价。另外，在常规的报价列表中，为了提升用户查找报价的效率，相比于最低价房型，采用了弱化的形式。最终方案上线后，数据上也取得了正向的效果，报价展现到预订点击的转化得到了提升。
3）“产品缝隙”中的比价概念渗透
“产品缝隙”并不像上述列表模块那样感知强烈，设计的目的是为了进一步加深“百度酒店可以比价”的用户印象。结合百度酒店的核心页面，我们重新设计了酒店列表和房型报价列表的加载态，利用“多资源方交替动效+文案说明”的方式，构建动态的比价感知，在用户进入页面或者进行筛选等场景时会出现。另外，我们也利用了小程序首页和详情页的页尾，在阅读结束时去传达全网比价的概念。
2.建立认知-聚合比价模式的构建
在竞品调研部分，我们提到了聚合比价模式，百度酒店由于报价复杂，也适合用这种方式去简化报价。
如图所示，常规酒店预订平台，同一房型（如标准大床房）会存在不同服务政策（早餐服务、取消规则、支付方式）的报价，而在百度酒店中，由于又加入了预订平台的差异，报价会更加复杂，数量更多且同质化严重，即服务政策相同，仅预订平台不同的报价多次出现，这就导致了报价列表的查看和选择效率较低。
聚合比价模式就是要将这些服务政策相同的报价聚合在一起进行比价，以简化报价列表提升选择效率，同时在服务相同的情况下，绝大部分用户会更倾向于低价，在报价聚合后，可以突出低价以便用户预订。
我们也在探索如何让聚合比价更简单，初始方案采用点击展开的形式，用户可以保持滑动浏览的交互体验，整个过程的交互体验比较流畅，但页面的层级关系较为复杂，用户认知成本高。因此我们又尝试了调起面板展示比价详情，让用户聚焦在当前报价的对比，并通过模块式的设计，清晰罗列了每个平台的服务、优惠明细等差异信息，让信息的对比更高效，同时强化低价平台，与前面的比价模块保持认知一致。
聚合比价模式下，存在了两种用户路径，如图所示。用户可以直接选择最低价资源方完成预订，也可以通过比价详情弹层，查看针对同一服务的所有平台报价，对比平台的详细服务、优惠差异后再选择预订。
这种预订模式的目的，一方面在教育用户建立百度酒店可以比价、可以买到低价的认知，另一方面也提升了用户选择低价平台的效率。另外，聚合比价要具有清晰的规则才能被理解和信任，在比价详情中，为了进一步降低认知成本，我们通过标题突出了聚合项，并增加了比价说明入口，让聚合规则更明确。聚合比价的方案上线后，报价的预订点击到成单转化也得到了提升。
另外，前文提到的精准需求搜索结果页和详情页的低价房型推荐也利用了这种模式，不过在比价感知上做了更强化的处理。用户可以在详情页直接点击各个平台报价完成预订，也可以点击文字部分查看房型详情，在页面底部的比价详情中完成报价的对比和预订。
3.强化记忆-比价价值感的再次强化
填单场景是在预订完成后，这个环节我们可以将比价的概念和价值再次展示给用户，以加深用户对比价的认知。这里的设计手段与“提升感知”阶段类似，如图所示为一些方案探索，在用户选择低价平台预订，点击跳转至填单页后，我们会强化用户“预订到最低价”以及“为用户节省xx元”的感知。另外，在用户提交订单时，会存在一定的加载时间，我们也利用了这里的“产品缝隙”，结合加载态继续传递低价、省钱的认知。
四、结语
回顾百度酒店的比价设计过程，我们以比价及低价感知传达、高效预订低价为设计目标，基于百度酒店的核心预订流程，探索比价在各个环节如何发挥作用，进而将设计目标的实现划分为了“提升感知、建立认知、强化记忆”三个阶段，并为业务带来转化提升。
提升感知过程结合流程中的主要模块，通过模块式对比形式、传达比价价值感、基于低价推荐强化比价、以及利用“产品缝隙”等手段，去吸引用户了解和使用比价；建立认知过程利用“聚合比价”模式去精简报价，同时结合对低价报价、低价平台的强化，让用户更便捷的预订低价；最后强化记忆的环节，我们进行了一些方案尝试，再次强调比价的价值。另外，为了建立一致的比价认知，整体的设计中也坚持一致性的原则。百度酒店的比价设计也在不断地尝试和优化中，希望能给用户创造更好的使用体验。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
通知是产品中极其重要的一部分，它能快速将内容的状态及变化通过不同的方式传达给用户，以便用户在收到信息后根据所传递的内容及时做出应对策略。
在这里，有一个很现实的问题，很多产品喜欢一股脑的把有效的/无效的、重要的/不重要的、用户想知道的/不想知道的等所有信息通通推送给用户。那么，你的推送渠道真的用对了吗？是否做了信息优先级区分？推送时间段是否有效？站在用户角度，下面这些场景你肯定碰到过：
◇ 手机屏幕总是频繁弹出信息，接二连三的震动、提示音让你一怒之下卸载了一些不太常用的APP；
◇ 桌面图标99+、主页的消息入口99+、进入消息分类还是99+，清理起来非常麻烦，还不如关闭几个分类通知，少一个也能缓口气；
◇ 一天少看了几个小视频，好不容易节省出来的流量被通知无情的消耗，还不如关闭系统通知权限来得快；
◇ 每隔一段时间，都要在手机短信中回复一大堆TD（退订），想吐的感觉；
◇ ......
在频繁地打扰下，用户关闭了一个个通知权限、甚至一度卸载APP。不难看出，好的消息通知能巧妙的将用户求留住（部分用户利用通知就能保持对微信、QQ的控制欲），做的不好就会起到负面作用、失去了消息通知的初衷，这里面最需要把控就是推送的一个“度”。
用户可能因为一条走心的推送而转化、也可能因为被打扰而放弃使用，站在设计角度，需尽可能打造让用户更喜欢的通知系统。那么，对于不同的业务需求及使用场景，又该如何差异化的进行消息推送，笔者通过本文进行分析总结，与大家一起了解。
一、消息推送的基本知识
二、消息通知渠道
三、让用户再次开启通知权限
四、提高触达率的小技巧
五、结语
消息通知是产品提供的一项服务，能够及时将产品的期待或内容的变化、根据其等级权重合理的通过不同渠道及时同步给用户，常见的如互动提醒、老用户召回、活动拉新、产品更新或帮助提醒等，通过站内红点、弹窗、短信、邮件等方式与用户进行信息交换。
用户层面，方便及时获取到想要知道的信息、以及对信息交换的控制权。例如：用户发布一条新的短视频想要对评论/点赞及时掌控、给心上人发了信息想在第一时间看到回复...等，产品也是借此用户对内容的控制欲，利用消息推送提升用户的使用体验。
产品层面，通过主动推送想让用户知道的信息，以达到新/老用户转化的目的。例如：通过手机短信形式发放优惠券对老用户召回、应用内通知或桌面推送对用户拉新...等，以此提高产品收益，获取更大的商业价值。
首先，一个好的消息系统首先需要将消息内容设计的全面，以便用户通过消息通知能准确无误的了解到对应内容；
其次，消息的触达方式需合理有效，必须提供便捷的操作入口以供用户及时反馈；
另外，为了避免过于打扰用户，需选择合理的推送渠道，提高用户触达概率及反馈效率。
消息通知渠道分为应用内通知应用外通知。应用内通知主要来源于消息中心或系统主动触发的弹窗来体现，而应用外通知包括桌面图标红点、手机短信、电子邮件、push、公众号信息（需绑定）等渠道推送。
1）消息功能入口
消息功能入口提示也称为红点提示，主要有底部Tad栏、首页右上角、个人中心右上角三种形式。当有新的通知出现时，对应图标的右上角会出现小红点提示，清晰明了，关于小红点设计，之前《小红点篇 | 用好这招，让用户的触达率大幅度提升！》这篇文章有详细说明。
红点提示的用户触达率较高，但需要用户在登录状态下才能查看，比如订单状态变化、用户与用户/产品之间的互动消息、产品活动通知等。
2）消息列表
当产品的消息类型较多时，点击消息功能入口即可跳转至二级分类列表。与上述相比，消息列表的内容则更加清晰，通过第一次消息入口功能的引导触发，这里的用户触达率将成倍增加。
3）弹窗通知
以弹窗的形式覆盖在页面内容顶层，阻碍用户的当前操作并迫使用户对弹窗做出决策，可以是系统主动弹出或用户手动触发，对用户的干扰极大。
弹窗通知最大的优势在于会100%被用户看到，无法忽略，否则将不能进行其他操作，很适合产品的一些重要事件提醒，例如应用升级、活动通知、优惠券引流等。
4）Toast 通知
Toast通知是用户在操作之后给出的即时反馈，与当前页面内容关联性极强，但不会中断用户的操作，出现的时间很短，一般持续3秒后自动消失，对用户的干扰也比较小。
需要注意的是，Toast容易在用户不注意的情况下被遗漏，所以适合用于操作后不影响大局、且不可二次操作、不可逆转的轻量提示，例如删除成功、提交成功等。
1）桌面小红点
小红点通常以圆点+数字的形式出现在图标右上角，用来提示应用内的未读消息数量，进入应用查看或清除后小红点则会消失。桌面小红点有一个必备前提，需要同时开启设备和应用内的通知权限方能接收提醒通知。
在部分应用中，桌面小红点具有较大的价值，能对用户产生积极的影响，使用频率得到进一定的提升。例如：社交类应用中的私信、评论、点赞等；商家端的咨询信息、下单提醒等，用户在看到后都会有强烈的点击欲望，对一些数据的提升起到推动作用。
2）PUSH推送
PUSH推送通知常见于设备顶部横幅（几秒后消失）、通知中心以及锁屏后的中部区域，用户可从卡片中的内容获取信息类型及重要程度，用以决策是否需要立即打开。
这种推送方式，用户几乎很难忽略，不处理的话会长时间浮于屏幕之上，非常适合价值及时效性较高的消息通知。除视觉提醒之外，还可通过听觉触达用户，例如支付号、微信的收款信息等，不过依然要同时开启设备和应用内的通知权限。
3）手机短信
短信推送是大家很熟悉的通知渠道了，毕竟现在都是用手机注册账号，手机号获取难度几乎为“0”，常见的有验证码短信（用户请求）、营销短信（产品推送）两种：
验证码类似“一问一答”的互动，没有什么特别的玩法；
营销类短信对于拉取新用户、老用户召回、节日/活动促销能起到不可替代作用，产品可通过短信发送图片、文字以及超链接，内容的时效性、用户的触达率都相对较高。
着重说明一点，因为短信通知的成本较高，在使用之前需要足够的思考分析，细分用户群体做到精准投放，避免所花费的成本与产生的价值不成正比。另外，如果需要放超链接，那么短信内容一定要有足够的说服力及吸引力，总是被用户当做诈骗短信删除、举报的话还不如不放。
为了减少对用户的打扰，让产品更人性化，一般会在短信结尾提供TD（退订）提示，用户回复即可取消后续的推送，但是否真的取消成功，这就得看产品了(¬◡¬)...
4）电子邮件
电子邮件推送方式使用的并不多，一方面需要产品有web端服务，纯粹的移动端APP邮件推送不会有什么效果；另一方面，绝大多数的用户登录电子邮箱并不频繁，还容易被用户一键清理或误删。
电子邮件唯一的好处就是用户可通过超链接直达内容出处，相比APP应用，免去了下载等一系列操作，还可以长时间滞留，便于用户随时查看或添加星标，处理时间段选择较为灵活，很适合web端服务。针对一些商业化的邮件推送，也需要花费一定的经济成本。
产品获取用户邮箱地址的难度较大（邮箱账号除外），不难理解，使用手机号一键登录、验证码登录、第三方账号登录远比邮箱地址登录要方便的多。除此之外，还可以通过个人设置的添加邮箱、问卷调查的邮箱地址预留来获取，不过这就要看用户的主动意愿了。
5）公众号消息
公众号背靠社交应用，普及程度及用户触达率是极高的，不过这需要产品利用部分业务、活动为导向，引导用户关注公众号后方能接收到消息通知。
目前公众号只能向用户发送符合部分场景要求的服务通知，例如刷卡通知、物流轨迹变化、商品购买等。如果预算足够的话，还可以购买公众号列表、内容详情页、朋友圈等产品广告位进行特定用户群体推送，无需用户关注也可以看到并进行转化。
用户一旦关闭通知权限，对产品来说无疑是一个损失，这意味着没有消息通知的推动，用户的使用频率以及与产品之间的互动显然会减少（就连夫妻之间都需要时常互动与沟通交流，何况对于有选择余地的产品），时间长了，用户转投其他产品的“怀抱”也不是不可能。
有没有想过，用户只是关闭通知权限而已，并没有卸载APP，真的就没办法了吗？是不是该做点什么...
用户之所以还未卸载APP，说明还有价值，归根结底，关闭通知权限的原因都是因为消息的“狂轰乱炸”带来的无尽骚扰，几乎没有例外，而产品还会添上一把火，用户再次打开APP时无底线的催促用户再度开启，耗尽用户最后一点耐心后，或许再也没有机会了。
这个时候，设计师考虑的不是频繁提醒用户开启，而是用户关闭通知的真正原因（“狂轰乱炸”只是概括），细化各种可能性，然后从中找出机会点，但凡有所改进都值得试一试，毕竟相比什么都不做不会更糟。这么解释似乎毫无说服力，下面举个例子：
当产品中的某项免费服务突然有一天开始收费了，但受到了大多数用户的抵触，这个时候你该怎么做，是无视用户诉求继续收费、还是恢复到之前的免费？这并不是一个选择题，继续收费会导致大量用户流失、恢复免费可能连维持运营成本都难，所以不经思索的选择草草收场、连下下策都算不上。用户抵触的原因可能收费过高或是与实际价值不符，有没有想过利用限时折扣、附加其他增值服务（成本较小）或者组合捆绑销售也不失为一种策略。
那么，到底该如何做既能愉快的发送消息通知、还能能挽回用户的心呢？
用户关闭通知权限，并非没有需求，最典型的就是在某宝、某东加了满满一“车”商品等待降价，然后抱怨消息通知太吵关掉了通知权限，最后就是无法收到折扣通知、还把问题怪在了APP身上，着实太冤。用户只要还有需求，通知权限就还有被重新开启的机会。
1）损失厌恶/利益引诱
首先，我们需要找出对应的价值点，利用优秀的文案给予用户思考的余地，用户每多思考一会，结果都有可能发生改变。
人们都讨厌失去，对于损失的不可控很难接受，在引导用户开启通知权限时，需要强调不开启会失去什么，毕竟面对“得到”和“失去”时，损失更加让人难以忍受，例如物流产品告诉用户“未开启通知，将错过重要的快递信息”。还可以通过激励等进行利益引诱，如“开启后能及时获取红包卡券、折扣通知”等，并提供快捷通道，促使用户重新开启通知权限。
2）消息分类/分别处理
每种类型的通知都不可能符合所有用户的“胃口”，针对社交、电商类产品，可将通知类型分类处理，用户希望接收哪种类型的消息单独开启即可。
例如支付宝将消息拆分为多个类型；京东还增加了午休免打扰设置，开启后在12：30-13：30不会收到任何消息提醒；微信群过多、消息太吵时，开启免打扰又担心错过重要人的信息，于是微信在去年上线了开启群消息免打扰后、可设置群内4个人的消息正常通知，算是比较人性化的设计了。
3）提供关闭/关不彻底
部分产品提供了关闭消息通知功能，但又关不彻底，这是产品基于妥协的基础上，依然在低频推送消息的“流氓”玩法，与用户完全关闭相比，已经算是不错的结果了。
常见于PC客户端，就像很多软件的插件一样，不管怎么关，总是无法彻底关闭，甚至还将开启操作伪装成其他内容引导用户误触；手机短信推送也会有这种情况，用户回复过“退订”后依然会收到相关短信。
这种方式需谨慎使用，在用户关闭通知后，需通过后续推送内容的质量、频率试探用户底线，然后逐渐提升，切不可无视用户操作。
反复推送相同的内容只会让用户更加反感，回复退订、卸载应用都可能在这一刻发生。
很明显，消息发出后，如果用户的触达率较高就没必要再次推送。反之触达率较低，重复推送会让用户有种被催促、胁迫的感觉，适得其反，触达率低有没有可能是文案不够友好、表达不够清晰或者吸引力不够？即便同一件事情，也尽量使用不同的表达方式，如何想办法重新引起用户的关注才是关键点。
中华文字博大精深，且有56个民族，其性格习惯各异，特别在利用当前社会热点、媒介进行的营销推送时，尽可能规避掉敏感信息，如地域/民族歧视、性暗示等。
很多时候，消息推送太少无法满足产品目标、太多则会惹恼用户导致通知权限被彻底关闭，所以不仅要考虑消息推送频率，更重要的是对受众群体进行分类、分别推送，不要每次都一股脑的将消息发给所有用户，当然，能做到千人千面（成本大）则会更好。
没有用户愿意在不明所以的情况下来看长篇大论的内容，需确保消息内容简单直接、清晰易懂，并符合用户认知习惯，还得保持友好的语气以及富有创造力的品牌形象。
处于营销目的时，可利用感兴趣的事件/事物勾起用户的点击欲望，例如网络热词、时下热点等，笔者虽然并不提倡“标题党”，但不得不说，很多标题党都能起到不错的效果。
消息通知需要一个有效操作入口，并且在消息内容中有对应的指向，点击应用内通知切换APP界面、应用外推送链接跳转至web页，从始至终都需要为用户提供一个查看更多内容或参与的有效途径。
消息通知设计的主要目的是在正确的时间、以正确的方式将内容呈现给用户，并提高产品的转化率，不管用户愿不愿意接受，这始终都是一个呈现信息的不错途径。
本文主要总结了消息的通知渠道、常见问题处理、提升用户触达率的方法，以帮助新手设计师快速掌握完整的消息系统。或许最终的结果事与愿违，但不能否认其魔力，需要做好的是确保消息内容质量、对应的受众群体及合理的推送渠道，相信总有一种方式适合你产品。
作者：大漠飞鹰CYSJ 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
前几天眼睛不太舒服，去医院做了一个检查（视疲劳导致）。因为要走商保，所以要使用社保卡，之前我记得用社保结算都需要去人工窗口，我刚过去就被一个穿着红马褂的大妈拦住说自助机也可以用社保，要我扫她胸前挂的码（可以快速到达电子社保二维码界面），扫完她就开始帮我点击操作。
她觉得我应该不会操作，所以让我看一遍，其实这个操作并不难，只是因为我不知道自助机上可以用，自助机周围也没引导操作流程。而且她这种方式让很多年纪大的人和外地过来看病的觉得你是个骗子，后面好几个人都还是去了窗口。
在B端产品中也有很多类似问题，用户不知道有这个功能、也不知道这个功能怎么使用，特别是一些大数据产品，专业性比较强。产品、技术都认为用户和他们一样都懂，实际上并不是，这个时候你需要提供一些邀请，引导用户进行使用。
邀请就是引导用户进行操作前的提醒和暗示，通常包括实时的提示信息和预期功能，以表明在下这个界面或下个界面可以做什么，这是成功的交互式界面关键所在。
例如：飞书我的空间，当鼠标停留在可编辑区域上时，就会实时地显示邀请（复选框），这个例子的缺点是鼠标如果不处于相应区域上，就不会显示邀请。
另一种方案是任何时候都显示邀请，例如：石墨文档我的桌面，复选框一直显示。
静态邀请就是通过直接在页面上给出交互提示，可以让用户随时看到期望的界面功能。
静态邀请主要有两种模式：引导操作邀请、漫游探索邀请
例如：华为云HECS服务器产品就给出1、2、3操作步骤 引导操作会占据页面较大的空间，同时也会吸引用户的眼球。所以在设计时需要思考一下，你希望引导用户执行什么操作，用户是否可以多次查看，这样有利于设计出明晰的页面和信息层。
另一种引导操作邀请叫作白板式引导。 意思很明确：现在只有一个空白页面，需要引导用户创建内容。
利用空白区域“变废为宝”，如何对该区域应有的功能给出提示，是诱导用户创建内容（填补空白）的有效方式。
与引导操作邀请关系密切的是漫游探索邀请。假设你重新设计了某个页面并添加了一组全新的功能，怎样才能保证用户恰当地使用新页面，同时发现新添加的功能呢？漫游邀请是向用户介绍新功能最好的方法。
1、漫游功能用户可能不想用，所以需要有可选功能，也就是可以跳过或关闭；
2、漫游功能不是“创可贴”不要乱用，只有针对精心设计的界面使用才能发挥价值；
3、设计漫游的关键在于保持简单，让它容易开始也容易停止。漫游应该只是页面本身的一个演示。脱离页面的“教程”式漫游很难起到作用。
静态邀请适合提示用户当前界面中包含什么功能。然而，许多调查试验表明，用户经常不会阅读指导说明性的文字。而在用户交互过程中，在他们需要的时候提供邀请则是一种不错的方式。动态邀请就是在用户交互过程中的某个点上吸引用户，并引导他们继续下一步操作。
吸引用户的一种方式是通过鼠标悬停来显示邀请
例如：飞书消息列表鼠标移入后， 背景变化的同时会有一个“勾”图标来吸引用户，鼠标移入上去后提示可以勾选完成，点击完成后消息移除列表。
1、当操作没有内容重要，而且希望界面整洁时，使用悬停邀请。
2、在实现悬停邀请时，可以通过改变光标、改变背景和显示提示条共同配合表明所邀请的操作
3、在交互的不同阶段，尽量点缀一些用户熟悉的元素，通过熟悉的概念引出新概念有助于用户快速理解新功能。最常见的元素是按钮、链接、下拉箭头和众所周知的图标。
4、通过距离表明邀请操作的目标对象。
唐纳德·诺曼将这个术语引入到设计领域。最经典的例子是门把手，门把手的预期功能是可以抓握、扭转或按压。屏幕元素可感知的预期功能没有物理属性，不过，由于习惯、术语、图形及一致性等原因，用户能够在某种程度上感觉到他们可以操作这些元素。
例如：第一张图飞书文档sheet页“加号”图标与第二张图“三个点”图标，就是一种预期功能邀请。用户没触发之前就能猜到触发后会是什么效果。
预期功能邀请之所以有效，是因为利用人们已知的习惯与认知引入交互，从而让用户顺利完成一连串操作。
1、通过人们习以为常、司空见惯的概念来引出新的、不熟悉的交互方式。
2、使用可感知的预期功能来给出邀请提示(例如，用向下的箭头表示可以打开下拉菜单，而用向上的箭头表示可以关闭菜单)
3、把邀请安排在适当的上下文中，特别是要靠近交互的主体。
设计邀请时怎么才能猜测用户的想法，也是一项重要挑战。如果用户下一步可能会执行多种操作，而事实上又不可能准确判断用户想法，那么面临的困难就会比想象的大很多。
在google sketchup （ 3D）绘图工具中，当鼠标点击某个点后，进行第二个点连接时，会有多种可能性，这个时候系统也不确定用户会怎样连接，但会给出对应的提示，比如：端点、中点、背面、侧面等点位来辅助用户进行连接。
例如：这种工作流场景个人觉得也算是一种，点击“加号”右侧会滑出面板，给出你可以添加的动作。 这种在交互期间以可见方式向用户表明系统推断出的用户想法被称为推论邀请。
图片类型的更多邀请，例如：站酷相关推荐
文字更多邀请，例如：QQ邮箱右侧最近联系人
精心设计的应用能够通过邀请体现出各自的细微差别，无论是静态还是动态，都是引导用户顺利进入下一个交互层次的有效方法。
谢谢观看！
搜索的本质是什么？无疑是内容的召回和信息的推荐。
可随着时代的发展和行业公司的内卷，不少公司除了持续优化搜索结果与推荐外，在搜索的体验和彩蛋上也是下了不少功夫，从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些，那有意思的大厂搜索交互。
大体上分为两类：彩蛋流和体验流
注重提升搜索过程中的趣味程度，以增加用户的好感度与产品印象/口碑。行业代表：谷歌浏览器、百度浏览器
可以说是搜索彩蛋的先行者，内置了很多搜索关键词的有趣彩蛋，如娱乐角色：搜索【灭霸】，页面右边会打响指，相关字段会被’毁灭‘掉
搜索【马里奥兄弟】，右边也有游戏里一样的点击彩蛋
还有各种有意思的搜索结果比如搜：is google down（谷歌关闭了吗），搜索结果优先显示：NO
再如搜索《银河系漫游指南》的一句话：the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。
而且在日常的节日、活动、热点运营上，谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与，可以已经形成一个稳定、具有品牌感的企业文化了。
如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的应该是搜索【黑洞】时，页面上会出现黑洞的吸入特效。
而且和谷歌相同，在其他的搜索关键词上，百度也是埋下了不少彩蛋，比如：搜索【翻转】，页面会左右翻过来
搜索【跳跃】，页面会在上下跳动
搜索【失重】，页面上的字会飘起来
而在【活动运营】上，百度也是很有心地进行着创新设计，力求给用户一种眼前一亮的感觉。比如每年的愚人节，搜索结果页上都有‘调戏’用户的创意设计，各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。
还有在【活动入口】的设计上也是特别有想法：在某年的圣诞节上，百度创新性地将活动入口’嵌套‘在结果页卡片中间，用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」
用这种充满创意+应景的的入口设计与引导方式，最大限度地降低漏斗，吸引让更多用户参与该活动。另外，百度搜索框上面的运营活动入口，也和谷歌有异曲同工之妙。
而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
注重提升搜索过程中的交互体验，以增加用户的操作效率与产品易用性。
代表：苹果产品、夸克浏览器
·iPhone
iPhone的【桌面搜索】除了能查询手机上的各种信息、文件，它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器，大大减少操作链路。
在iOS的原生键盘里，可以根据输入词检测+搜索对应的手机号码：当你输入 【打+我或通讯录好友+电话】时，键盘上会自动显示自己或好友的电话号码，点击号码就能自动粘贴在输入框中。
用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码，大大提升操作体验与效率
·Mac
在Mac电脑的工具栏上搜索相关帮助时，系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里，并减少寻找的操作路径，免去多余操作
在Mac电脑的‘系统偏好设置’里搜索帮助，在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时，该入口的聚光灯会更清晰些，特别容易找到搜索结果。
夸克浏览器除了传统的「点击搜索框」唤出输入栏外，在屏幕任意位置下滑手势同样可以唤出搜索框。
降低「需要往上手指移动，才能点击搜索框」的操作成本，让用户更快、更精准地触达搜索。
而且在输入网址或英文等字段时，搜索框下方会出现一个滑块区。点击就会变成长条的滑块，拖拽滑块即可改变光标位置。
而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
让用户更方便地将光标快速移动到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克还会前置搜索结果， 比如在搜索框中输入“某城市+天气”的关键词，上方就会以卡片的形式显示该地区最近一周的天气。
用户无需触发搜索、进入结果页才能看到想要查询的信息。
– END
数据保存是Web端工具的基础功能，一般在产品和技术框架设计之初就已经确定了数据保存的方式，后续不太会频繁更改。
正因为如此，在日常需求迭代中，设计师很容易忽略数据保存的过程，也很少质疑当前的保存机制是否合理，但是当需要设计新模块或产品时就会对保存有疑惑。
此外，保存也是一个受技术限制较大的领域，设计师需要对保存的技术类型有基础认知，因为它会影响保存生效的逻辑和交互形式。
本文将会基于个人经验，从设计表现和技术实现的角度聊聊Web端工具的数据保存。
对于Web端工具产品来说，保存的对象可分为「文件数据」、「设置数据」、「用户行为数据」。
「文件数据」是相互独立的内容，比如酷家乐的一个方案、Figma的一个文档都是文件数据，在文件A中触发保存并不会影响到文件B。文件数据是最主要的用户资产，若丢失会给用户造成很大的损失。
「设置数据」分不同的维度，主要有用户级别、组织级别、设备级别这三种。
用户级别：数据保存在当前用户的账号下，同一个用户的所有文档都会应用该设置，比如酷家乐云设计工具的偏好设置。
组织级别：数据保存在组织级别，可能由组织管理员设置，同一个组织下的所有用户都应用该数据。
设备级别：数据保存在设备（浏览器）上，同一个设备上的不同账号、不同文档都会应用此数据。区别用户级别和设备级别的保存很简单，只要清空浏览器缓存，看看数据是否变化即可。
一般来说，「设置数据」也是用户资产。但是设备级别的数据存在丢失的可能性，一般情况下不会存储大量重要的数据。
技术上经常把「用户是否进行过xx行为」这样数据保存在用户级别或设备级别，用于差异化的引导、运营方案。这类数据虽然不能被视为用户资产，但对于产品设计来说至关重要。
<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;">
<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:"">
<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>
<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:"">
<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:"">
<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:"">
<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:"">
<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:"">
<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.数据量大时会耗性能，可能会阻塞操作</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:"">
<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:"">
<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) 的方式将数据保存在浏览器中，一般采用的技术方案是 indexDB（如Figma)。即使将浏览器关闭，下次打开时仍能够恢复数据。</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:"">
<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:"">
<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:"">
<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.必须要同设备，且不能清除缓存；</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:"">
<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:"">
<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），通常为了方便单次会话而设置，例如记住选项状态、输入框的内容等，但只要关闭或刷新标签页这些数据就会被清除。从严格意义上来说，会话保存不是真正的保存，本文不对此展开讨论。</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:"">
<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端工具一般会以后端保存为主，前端保存为辅，这样能够最大程度避免因网络或服务不稳定造成的数据丢失。</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:"">
「Chapter Three」保存的触发机制
</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:"">
<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>
<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:"">
<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:"">
<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种：</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:"">
<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. 定时触发保存以一定的时间间隔（通常采用几分钟 ~ 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:"">
<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. 条件触发保存特定的用户行为会触发方案自动保存。</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:"">
<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:"">
<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. 实时保存只要数据发生改变，立即触发自动保存，无需用户手动保存（尽管一些产品考虑到用户习惯，仍会保留手动保存的交互）。部分产品会用间隔几秒钟的自动保存（如 Microsoft 365），效果基本等同于实时保存。实时保存能最大程度避免数据丢失，是Web端工具理想的保存触发方式。但因为技术原因，并非所有工具都能够做到实时保存。</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:"">
<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:"">
<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;">手动保存指用户通过额外的操作触发保存，通常为点击「保存」按钮或快捷键。部分有实时保存机制的工具不需要额外的手动保存（如Figma），但对于没有实时保存的工具来说，手动保存的设计至关重要。</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:"">
<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:"">
<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:"">
<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.「实时保存」保障性最好，在技术允许时推荐采用；</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:"">
<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. 因技术原因无法采用「实时保存」时，推荐使用「定时触发保存」 + 「手动保存」共同作用，也能较好地保障数据；</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:"">
<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. 「条件触发保存」通常是因技术原因而采用，用户对其没有预期，尽量不要让它打断或干扰用户的操作；</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:"">
<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. 在数据有丢失风险的时候需要提示用户保存，可根据用户的操作路径选用工具自身的提示或浏览器的提示。</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:"">
「Chapter Four」保存的触发设计<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:"">
<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 触发原则</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:"">
<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 点设计原则：</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:"">
</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:"">
<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:"">
<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>
<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:"">
</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:"">
<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:"">
<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:"">
<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>》一书中提到的“触发器”概念，可以将保存作为一个触发器。触发器是启动一系列动作的原点，分为系统触发器（系统被动触发）和手动触发器（用户主动触发）。</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:"">
</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:"">
<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 系统触发器</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:"">
<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个点，何时触发、触发频率。对Web端工具来说，有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:"">
<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.定时触发</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:"">
<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;">一个独立工具一般只有一个保存触发间隔设置，其间隔范围很广，可以是几秒钟、几分钟，甚至一个小时。一般会暴露给用户设置。建议产品设计师根据技术现状设定合理的时间，如果保存对性能有较大消耗，过于频繁的保存也会影响用户体验。可通过选择器给用户几个合适的选项，选项之间的时间间隔依次变大，总选项数不超过 5 个。</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:"">
<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.条件触发</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:"">
<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>
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:"">
<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;">现在已经有很多在线工具（如 Figma）实现了实时触发保存，对用户来说可以不用再理解保存这个概念，是一种认知上的减负，并且这种方式对数据保障的效果也最好。但是，仍然有设计师提出这种体验上的风险，比如没有容错余地、频繁保存造成的干扰和系统压力。</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:"">
<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 手动触发器</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:"">
<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;">对保存来说，「手动触发器」一般来说是一个保存按钮。在没有实时保存的创作类工具中，手动保存按钮的设计至关重要，一般会放在界面上方较显眼的位置，并设置快捷键 (Ctrl+S)，方便用户操作。</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:"">
<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;">而对于管理类工具，保存按钮一般位于页面下方，因为用户一般从页面上到下确认完内容后再进行保存。</span></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:"">
「Chapter Five」保存的反馈设计
</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;">
<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:"">
<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.自动保存的反馈对于自动保存，当保存结果无异常时，尽量减少对用户的干扰，尽量不使用全局提示 (Toast) 反馈。比较场景的做法是在工具某个固定位置，用图标或文字的状态变化作为反馈。</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:"">
<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;">比如说从云设计工具进入施工图时，因为技术原因需要保存方案，但可以将保存方案的进程与施工图加载的进程合并。</span></span>
</p>
b.手动保存的反馈对于手动保存，当保存结果无异常时，可使用全局提示（Toast）告知保存进度和保存结果，也可以用「保存」按钮的状态变化作为反馈。
<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:"">
<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:"">
<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;">当保存有异常时，应即时给予且较明显的异常反馈，并帮助用户排查问题。在设计保存异常反馈时，需注意以下 3 点：</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:"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;">哪些数据保存异常，是全局数据还是个别模块的数据，是否会因为非核心模块的保存异常而影响到整体用户进程，是否可以通过其他方式（如前端保存）让用户继续操作</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;">保存异常的原因是什么，用户可以通过何种操作解决问题（检查网络？重新登录？）</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;">当从异常恢复后，应该如何提示用户</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:"">
图片
</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:"">
Figma与保存异常相关的反馈 a.保存异常反馈；b.异常原因与解决方法；c.异常恢复提示
</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:"">
总结
</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:"">
<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;">最后总结一下，当我们接手一个新产品、新模块、新需求的设计时，应该如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">设计保存：</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:"">
<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:"">
<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:"">
<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:"">
<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;">最后，以用户使用工具的流程再检查一遍数据的产生和存储，是否会有遗漏，设计保存兜底。</span></span>
</p>
作者：酷家乐UED 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com