B端产品设计中,弹窗可以做哪些事情?(三)

2019 年 12 月 31 日

B端产品设计中,弹窗可以做哪些事情?(三)

反馈


用户点击按钮、完成任务,或系统状态更新后,需要给用户一个明确的反馈,这是人机交互中的一个至关重要的部分。如果只有输入,没有输出,很容易造成用户的不良情绪,如困惑、怀疑、不信任等。告知用户发生了什么?结果如何?此外,容错是评价一个产品可用性的重要标志之一,我们要在用户可能“犯错”前给予必要的提示、警告。


1、重要操作确认


确认退出、确认删除、确认提交……需在弹窗中告知用户正在进行的操和可能带来的“危害”,减少用户犯错的可能。有的可使用非模态浮层,但最好能显示在操作触发区域旁边,以防止用户忽略提示。



2、告知操作结果


告知结果和影响,并引导用户接下来可进行的任务;



如果只是普通的告知用户操作成功(如申请成、删除成功、提交成功……),这里建议使用 toast 提示即可,让用户“了解”即可,而不需要特别用户关注和点击关闭。如果是操作失败,在告知结果同时,还需要告知用户失败的原因、需要做什么。



诸如导入等相对复杂、不可控和出错率较高的任务,在操作失败时还需要告知用户具体出错的位置,帮助用户快速定位原因并找到解决方案。



3、页面异常


断网、数据出错、系统崩溃等。


4、下线通知


页面登录超时,强制下线重新登录;账号被挤下等。


5、其他反馈类弹窗


小结


在 B 端 web 设计中,弹窗的视觉样式可以是多种多样的(本文也并未过多涉及这方面),但从功能上来说,无外乎以上所述信息展示、任务、反馈三大类型。一般来说,如果可以替代,我们应慎重和少使用弹窗。但了解弹窗的各种应用场景,可以方便我们更好地权衡设计方案:是否可用弹窗?是否只能用弹窗?用二级页面、浮层、甚至 toast 提示是否会更好……从另一个角度来说,了解弹窗的各种功能,对于我们梳理和规范现有产品框架、制定和完善设计交互及视觉规范来说,也是大有裨益的。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/pRvR6B2qK7nraKxCESdc3A


2019 年 12 月 31 日 14:44126

评论

发布
暂无评论
发现更多内容

架构师训练营 -Week 05 命题作业

华乐彬

极客大学架构师训练营 作业 一致性Hash算法

一致性hash算法

ashuai1106

极客大学架构师训练营

架构师训练营 - 第五周作业

teslə

采用负载均衡技术总结

superman

架构师训练营 - 第五周学习总结

hellohuan

极客大学架构师训练营

一致性哈希在分布式缓存上的实践

hellohuan

极客大学架构师训练营

《架构师训练营》第五周 命题作业

分布式缓存架构设计

李广富

第5周 技术选型:技术选型能力反映了架构师的综合水平(一)

陆不得

架构师 0 期 | 一致性 Hash 算法

刁架构

极客大学架构师训练营

架构师训练营第五周-总结

人世间

极客大学架构师训练营

Week5-作业

龙7

架构师训练营 week5 - 学习总结

devfan

分布式和异步的技术选型

拈香(曾德政)

缓存 分布式 极客大学架构师训练营 技术选型 异步

第五周命题作业

Geek_a327d3

架构师训练营 第五周 【学习总结】

小K

架构师训练营第五周作业

hiqian

架构师训练营 - 第五周 - 总结

sljoai

极客大学架构师训练营 第五周

架构师训练营第5周作业

0x12FD16B

java实现一致性 hash 算法

李广富

week5-作业一致性HASH算法的JAVA实现

蒜泥精英

缓存总结

ashuai1106

架构师 极客大学架构师训练营

第五周作业

重新来过

vue3.0 全局API的变化

志学Python

Vue Vue3

第五周总结

Geek_a327d3

2020-07-04-第五周学习总结

路易斯李李李

第五周总结

晨光

一致性Hash实现

olderwei

极客大学架构师训练营

架构师训练营第五周课后作业

竹森先生

极客大学 极客大学架构师训练营

第五周作业

晨光

Vue3 Composition API如何替换Vue Mixins

志学Python

Vue Vue3 composition-api

B端产品设计中,弹窗可以做哪些事情?(三)-InfoQ