做后台系统或者网页工具，一定会遇到要给用户反馈的时候。表单提交成功、接口报错、复制完成、正在加载，这些场景如果都用浏览器自带的 alert，不仅会打断用户操作，弹窗还特别丑，整个站点的质感一下就掉下去了。这次整理了 3 款开源免费、可商用的网页消息提示库，能把这类反馈做得像手机 App 一样顺滑，滑入滑出都有动效，代码量还很少，引入就能用。
三款库的差别
Notyf 走极简路线，整包只有 7KB 左右，通知从顶栏或者底部滑出来，自带成功、失败、警告几种样式，几行代码就能用上，适合只想快速加个提示的场景。iziToast 功能最全，可以把通知固定在屏幕任意角落，支持进度条、操作按钮、自定义图标、自动关闭时间，做后台系统很合适。Notiflix 属于一站式方案，除了普通通知，还带确认框、加载遮罩、报告弹窗，等于把一整套交互反馈组件都配齐了，项目里需要这几种的时候用它能少引好几个库。
接入和使用
这三个库的用法都是一个套路，引入 JS 和 CSS，然后调一行方法。最简单的写法就是传一段文字，成功提示、失败提示、警告提示对应不同的样式和颜色，弹出来之后会自动消失，不需要用户手动关。表单校验提示、接口返回结果、按钮点击反馈，都适合用这类轻提示替代 alert 和 confirm。需要用户确认后才继续的操作，用 Notiflix 的确认组件，只要简单的成功失败提示，用 Notyf 体积最小。
用起来的几个经验
提示文字尽量短，一句话说清楚就行，太长用户懒得看完。成功提示一般两三秒自动消失就够，失败提示可以停留久一点，或者设置成需要手动关闭，避免用户没看到。同一个操作不要一次弹好几种提示，容易显得乱。位置上也建议统一，要么都在顶部，要么都在右下角，别一个页面里到处跳。这类小细节做好了，用户对站点的专业度感受会明显不一样。
这类提示库属于小工具，但用和不用，用户对站点的观感差别很大。三个库加起来体积也不大，完全可以都留着，按项目需要挑一个用。压缩包里放的是压缩后的 JS 和 CSS 文件，引入页面就能用，不需要额外依赖，附带的说明文档写了基础用法和常见配置。Notyf 和 Notiflix 是 MIT 协议，iziToast 是 Apache-2.0 协议，都可以放心商用。
暂无评论内容