呕心总结:微信H5分享设计的正确姿势,干货满满!

我推出的H5超过了百款,流量超过1万的估计有3、40款,甚至还推出过两款千万级都到了被微信封杀的地步。不管成功还是失败都有很多经验可以说,但今天的课题是怎么也不能略过的。

如果你要问我在微信里的H5怎么容易成功传播?这可能得花老长时间去总结。因为各个H5的目的,场景,类型,功能都不会相同,所以还得区分类型去介绍,一一道来并不现实。

但如果抛去各个H5的不同的地方,聚焦到共同的模块,这个问题就是我今天要说的:微信H5里分享模块的设计。这也是无论我做什么难度复杂度的H5,留出足够的时间去设计好一个分享模块是必不可少。

说是共同模块,毕竟所有在微信里的H5都有分享转发的功能。说它重要,是因为微信里H5的流量大多缘于朋友圈的分享、群的转发以及个人的转发,而其他类似公众号推文里的链接可以算得上一级裂变(或者叫种子流量),如果用户使用完阅览完没有主动分享,那流量很容易嘎然而止。

那单单这个分享模块要怎么设计?我接下来会渐进式的从业务逻辑和产品层面去介绍H5分享中涉及的各个元素:

一、不设计

先讲一下很多人犯的低级错误,就是不去设计分享模块。当然了,也是因为需要定制分享的信息需要代码层面的编写。

微信中H5如果不专门定制分享,将会使用html中的title的文字,并且没有缩略图,转发给个人或者群还会带上链接。用户操作分享时若是预览到分享出去后的效果是如此这般,大概转发欲望会减少大半。即便转发了,那好友在群或者朋友圈timeline里看到,想必看到的好友更多的感觉也是严重的不信任感而拒绝点击。

二、普通设计分享信息

要在微信里定制H5的分享信息,需要利用微信提供的jssdk来完成(具体实现本文不表)。在H5的JS脚本就可以编写分享的信息。

以下是示例代码:

  window.onload=function(){
    wx.onMenuShareTimeline({ //分享到朋友圈
      title:'春节人工智能对联',  //朋友圈显示文字
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //朋友圈缩略图
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      title:'春节人工智能对联',  //群分享和个人分享的主标题
      desc:'AI自动出对联',  //显示在群分享和个人分享的副标题,
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //群分享和个人分享的缩略图
    })
  }

这样的代码就定制好了,用户分享出去就能有相应的文字和图片,不会再有之前的不专业感。

三、设计分享文案

然而,平白无味的分享文案显然不会刺激到用户的点击,这时需要用上一些文案,可以参考微信公众号文章10W+的标题,这里我随便举个例子。

  window.onload=function(){
    wx.onMenuShareTimeline({ //分享到朋友圈
      title:'不看会后悔,这个春节让人工智能帮你出对联!',  //朋友圈显示文字
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //朋友圈缩略图
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      title:'不看会后悔,这个春节让人工智能帮你出对联!',  //群分享和个人分享的主标题
      desc:'我出了,就等你了',  //显示在群分享和个人分享的副标题,
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //群分享和个人分享的缩略图
    })
  }

四、信息随机化

经过上面的设计,这个文案已经达到95%的H5的分享的水准里。我看过极多的H5,大多只做到上面这步。

我接下来讲的设计是在信息上的定制化。

固然朋友圈出现一样的刷屏的效果是不错,但目前的用户对于如此千篇一律的分享信息已经有不少的抵抗力,这时我们要加入一些信息的随机化:

  window.onload=function(){
    let textList = [
      '不看会后悔,这个春节让人工智能帮你出对联!',
      '已经有很多人用这个人工智能来出对联了!',
      '大概时今年春节最好玩的人工智能产品...'
    ]

    let randomTitle = textList[Math.floor(Math.random()*textList.length)]
    wx.onMenuShareTimeline({ //分享到朋友圈
      title:randomTitle,  //朋友圈显示文字
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //朋友圈缩略图
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      //...略
    })
  }

以上的示例代码是在初始化时从预备字符串数组里随机抽出一条作为分享的文字,其他副标题和缩略图同理。这样子是以一种“避免撞衫”的方式刺激用户的分享操作。

五、信息个性化化

虽然步骤三已经能让用户的分享信息相对“不撞衫”,但其实还能够做到千人千面的效果。

  window.onload=function(){
    let randomNumber = Number((Math.random()*19).toFixed(1))+80
    wx.onMenuShareTimeline({ //分享到朋友圈
      title:`我身边已经有${randomNumber}的朋友在玩这个人工智能对联了`,  //朋友圈显示文字
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //朋友圈缩略图
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      //...略
    })
  }

这个例子使用随机数字从80%-99%之前随机出一个一位小数的百分数:

而在带PK属性的一些H5尤为适合,诸如“我PK掉了56.5%的朋友”这样带有挑衅语气的分享语往往能带来奇效,促进点击参与欲望。

  window.onload=function(){
    let userInfo = getUserInfo()
    wx.onMenuShareTimeline({ //分享到朋友圈
      title:`${userInfo.nickname}推荐你玩这个人工智能对联!`,  //朋友圈显示文字,使用微信昵称
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:userInfo.headimgurl,  //朋友圈缩略图,使用微信头像
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      //...略
    })
  }

这个例子在是在初始化时使用微信网页授权功能先获取微信的个人信息(包括头像、昵称):

不过这个授权会带来一定的体验的负面影响,因为获取用户授权是需要跳转一个页面点击同意按钮才返回原H5的,这个我们可能通过一些方式尽量减少不友好的感觉。(这又是另一个课题,暂不表)

很多H5不止是浏览的功能,还有一定的交互操作,所以在出结果时可以再进行个性化的定制

  /*
  * 初始化分享
  */
  window.onload=function(){
    wx.onMenuShareTimeline({ //分享到朋友圈
      //...略
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      //...略
    })
  }
  /*
  * 出结果后的分享
  */
  getDuilian(){
    wx.onMenuShareTimeline({ //分享到朋友圈
      //...略
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      title:`我用人工智能出了一副对联,横批是${duilian.hengpi}`,  //群分享和个人分享的主标题
      //                                 ↑↑↑哈哈拼音代码
      desc:'我出了,就等你了',  //显示在群分享和个人分享的副标题,
      link:'https://www.kuashou.com/h5/couplet/index.html',  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //群分享和个人分享的缩略图
    })
  }

上面的例子把经过人机交互操作生成的结果放在了分享文字里,同时具备了千人千面以及完成体验流程的特质,也是我个人很喜欢的方式:

上面三个例子并不是独立的,更多时候可以依据不同的H5场景灵活运用例子中提到的技巧。

六、分享链接个性化

本来写这篇文章时打稿是写以上五点,写完的时候想起还有一个最复杂最有门槛的处理。

  getDuilian(){
    wx.onMenuShareTimeline({ //分享到朋友圈
      //...略
    })
    wx.onMenuShareAppMessage({ //群分享和个人分享
      title:`我用人工智能出了一副对联,横批是${duilian.hengpi}`,  //群分享和个人分享的主标题
      desc:'我出了,就等你了',  //显示在群分享和个人分享的副标题,
      link:`https://www.kuashou.com/h5/couplet/index.html?openId=${userInfo.openid}`,  //分享出去的链接,
      imageUrl:'https://www.kuashou.com/h5/couplet/img/share.jpg',  //群分享和个人分享的缩略图
    })
  }

注意看link处,分享的链接加上了参数openId,值就是分享者的openId。openId是微信给每位微信用户的一个唯一的id,起到识别用户类似身份证的效果。

带上这个openId能做什么?且看下面H5页面里的这段示例代码:

<!DOCTYPE html>
//...略
<body>
  <div>你的朋友<span id="friendNickname">{friend.nickname}</span>已经玩了,就等你了。</div>
</body>
</html>

我们可以利用一些手段(同样这里不表),在用户通过分享出来的链接点击之后看到相应的你的好友的头像/昵称等信息,这进一步增加了信任感。

前段时间看到一个信息,说抖音就是利用类似的方案来实现作为第三方产品却能一定程度上收集到用户之前的好友关系网,很厉害的操作。相对来说这个逻辑比较复杂,我过去只在几个H5里这么运用,因为没有将功能封装出来,单个实现的成本略高,并不常使用。

相信看了之前提到的这几步,结合自己的能力,利用提到的几个技巧Tips,一定能把分享这个模块---做大做强,再创辉煌(四川话,无名之辈台词)