β

微信设计亮点(1):发语音,如何给予用户实时的反馈

青溪·札记 235 阅读

#学习优秀设计# 发语音,不仅仅是按住说话,来看看设计师如何优雅的处理那些边界场景。

Case 1:录音太短的提示

1)反馈时机
– 手指按压在“按住说话”按钮上,松开时判断说话时间不足1秒时提示

2)反馈方式和内容
– 半透明背景的吐司提示
– 文案“说话时间太短”,配上感叹号图标来引起注意
– 1秒左右吐司提示消失
配图

Case 2:长按“按住说话”按钮

1)反馈时机
– 手指按压非点击时提示

2)反馈方式和内容
– 按钮的背景色变为按压状态
– 按钮的文案变为“松开结束”(手指按压时很难注意到文案变化,此提示较隐蔽但很有必要)
– 显示黑色半透明背景的提示,配有话筒、音量刻度、文案
– 话筒表示录音、刻度随音量变化而跳动、绿色的小气泡背景颜色闪动(这些提示都用来告知用户,录音正常进行中)
– 文案提示“手指上滑,取消发送”(提供回退、撤销路径)

Case 3:按住说话时,手指上滑(接上一个场景)

1)反馈时机
– 手指上滑离开按钮时

2)反馈方式和内容
– 黑色半透明背景的提示
– 图标从话筒变为回转箭头
– 提示文案变为“松开手指,取消发送”,同时用红色背景色突出文案

同时保留用户撤销此操作的路径,即当手指下滑回到“按住说话”按钮区域时,又回到了Case 2的提示状态。

Case 4:录音时间超过50秒

1)反馈时机
– 从51秒开始倒计时

2)反馈方式和内容
– 黑色半透明背景的提示
– 大字体的数字倒计时
– 文案不变,仍然是“手指上滑,取消发送”

Case 5:录音时间超过60秒(接上一个场景)

1)反馈时机
– 语音时长到达60秒

2)反馈方式和内容
– 自动发送语音,最长60秒
– 黑色半透明背景的提示,告诉用户“说话时间过长”,并配以感叹号图标(此图木有截到…)

Case 6:正在发送语音

1)反馈时机
– 松开手指或达60秒自动发送时,还未发送成功前

2)反馈方式和内容
– 聊天界面,语音小气泡前面显示菊花转图标(即使网络未连接,几分钟内仍然在转动没有停止发送、也没有提示失败;关闭进程进入仍然如此)
– 聊天列表,箭头[语音](表示语音未正在发送)

Case 7:发送语音失败

1)反馈方式和内容
– 红色的感叹号图标显示在语音小气泡前
– 点击感叹号,弹窗询问是否重新发送;点击“重发”开始发送

配图

全篇完,关于微信发语音功能,如果你发现了更多细节,欢迎留言告诉我。

欢迎关注我的微信公众号:青溪札记(qingxizhaji)
一枚交互设计师,正在这里分享产品体验记录、交互设计思考心得、阅读笔记、生活乱弹。

二维码

作者:青溪·札记
关注 产品设计、知识管理、阅读

发表评论