你也要开发小程序?交互细节特色少不了
听说你准备开发小程序,这套细节特色送给你
目录:1.来点交互的music?
2.来点交互的震动动?(待更)
1.来点交互的music?
如果你是一个苹果用户的话,你一定会沉浸于哪华丽的锁屏/开屏/支付声,如果不是的话,您可能也对转账收款声,或者是百度云下载完成的声音,更或许是钉钉的声音印象深刻
所以对我们来说,一个好的产品的声音交互细节少不了
本期的分享第一部分就是教你们如何设置一个交互的提示音
来提高用户的好感度
第一步:上资源:(百度劝退?不存在的,来个蓝奏云)
点击上车
第二步:上代码展示
(实际点击成果怎么展示呢这声音。。。。):
以一个点击按钮为例,
关键是讲解这个APIwx.createInnerAudioContext()
的调用,微信文档里实在是坑呀,光给你API没有说明,真让人心酸
下面是JavaScript的代码
#Javascript //这是给代码强调呀别复杂进去呀
//By 以太
const testAudio=wx.createInnerAudioContext()
testAudio:function(e){
testAudio.src='/images/111.ogg'
testAudio.play()
console.log(e)
},
第三步:讲解
首先,讲解一下这个功能的涉及到的
事件问题
点击查看官方对事件分类的介绍
在这里我选择的是bind:touchend
即手指触摸动作结束后响应
然后再回到上面的JavaScript部分,先是
const testAudio=wx.createInnerAudioContext()
了一下,个人习惯问题,可以忽略直接在下面调用然后就是用一个.再来一个src表示地址,这里有个bug,好像是只能用绝对路径哦,用play()表示开始播放。
第四步:思维发散
上面只是一个很简单的小例子,我们可以发散一下思维,怎么用才能让用户用你的产品用的开心呢?
场景1
:支付完成后,让用户感受到交易的实际存在
场景2
:代办事项完成后,点击勾上完成任务同时来一个完成提 示声
场景3
:某项操作成功/出错
场景4
:完成一个input后来个在界面展示出表单后再出现提示音·····················································································
而有些人可能想要实现一些复杂的操作,比如说完成一个input后来个在界面展示出表单后再出现提示音,哪就把这个放在那个表单展示的后面区域里,后浪们,你能看到这里,肯定是有想法的,一定已经想过怎么操作了,所以就动手亲自试试看吧,相信自己可以做到的,我会慢慢更新这个交互提示声的博客的,欢迎各位小伙伴的批评指正与一同学习。
不要脸的我想要你们的一个来支持一下我的创作
2.来点交互的震动动?(待更)
能不能更新就看大家能不能催催我了,我还要很多想法在想法库里,但是都还没分享出来