【分享按钮】是一个常见的功能,你可以把看到的有意思的东西分享到自己的BLOG、朋友圈之类的地方。

但是,分享出去的文本(也可以包含图片)在每个目标网站上面的格式并不是统一的,所以就存在了美感的三六九等。

举个例子,直观些:

下图是在某一个音乐网站,用户分享一首歌到自己微博里的操作

下图是已经把歌曲分享到用户自己微博里的样子

分享功能需要验证什么?按照上面圈起来的这几个区域说说,

【1】【进入详情页】-这个功能在微博常见,一般在分享操作的场景内不会出现BUG

【2】【文本】-每个目标网站上面的格式并不是统一的

(你看,在这个目标网站内,展示的效果并不是十分负责任。歌曲名称被截断了,这显然失去了分享歌曲的重点。用户的分享理由也没有突显出来,仅仅是包含在这2行文本内,不容易被注意到。用户体验太差了!!)

【3】【图片】-有的目标网站支持图片点击查看大图,有的目标网站点开后仍然展示缩略图(分析:第3方平台的原因)

所以【2】【3】真的非常影响用户体验,如果能优化这些细节就太好了。

【4】【视频】-展示给用户的样式是否一致

【5】来自【虾米音乐】-这个结果显然是正确的,你可能遇到“来自【null】”、“来自【分享按钮】”等等比较奇葩的情况

验证分享功能也会出现比较低级的失误:

【6】developer忘记给分享功能加URL,导致分享按钮是个摆设

【7】分享按钮的ICON对应了错误的目标网站地址

另外需要关注的也有分享功能的工作流,不过这个内容并不算作本篇文档讨论范围。总的来说,分享组件需要详细地验证,以便当全站其它模块需要引用到这个功能的时候,就不需要再投入精力去专门验证它了。

补充,在验证分享功能的时候,也可能存在以下BUG

【8】分享到第三方平台后,登录到第三方平台发现没有分享记录。(分析:某些第3方平台必须是手机验证用户才能发表原创内容。但是既然没有分享成功,又没有给予用户有效的提示,这算是BUG)

【9】分享过程是否自动给必填字段都传了值(标题、描述)(分析:一切额外的手动操作可以视为体验范围内的BUG)

【有意思的BUG】分享按钮 分享功能的更多相关文章

  1. bShare分享插件|自定义分享按钮|异步加载分享解决办法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项

    <!--禁用微信分享按钮--> <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu' ...

  3. 9款经典华丽的CSS3分享按钮

    如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...

  4. 人人API 分享到人人功能 修改版

    最近在搞一个日程管理网站, 需要实现分享到人人功能, 所以找了一下人人API, 然后根据自己需要修改了一下. 首先得有一个人人给的js文件, 如下: var Renren = Renren || {} ...

  5. (转)微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项

    <!--禁用微信分享按钮--> <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu' ...

  6. 为Hexo Next主题添加分享及打赏功能

    博客地址:往事亦如风的博客 要想先看打赏和分享功能效果,请移步我的博客 打赏功能 因为next主题自带打赏功能,所以我们只需要在next的主题配置文件中找到如下代码,image文件夹是我在blog/s ...

  7. 微信小程序一个页面多个按钮分享怎么处理

    首先呢,第一步先看api文档: 组件:button https://developers.weixin.qq.com/miniprogram/dev/component/button.html 框架- ...

  8. 纯CSS3实现的顶部社会化分享按钮

    今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便.这些社会化分享按钮的图标文件来自google和bootstrap的字体文件 ...

  9. 纯css3实现的圆形旋转分享按钮

    之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...

随机推荐

  1. 微信小程序知识总结及案例集锦

    微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档 认真跟着文档看一遍,相信有vue前端经 ...

  2. 算法——蛮力法之选择排序和冒泡排序c++实现

    这次实现的是蛮力法中的两个例子,选择排序法和冒泡排序法,使用的编译环境是vs2013,下面对这两个算法做一个简单介绍,然后是两个算法的c++实现代码. 选择排序法比较的范围是整个列表,每次扫描结束找出 ...

  3. XManager与SecureCRT

    使用Xmanager前,服务器必须已经安装好X11所需的各种运行包.运行下列命名检查安装情况,没有的话请自行补上. rpm -qa|grep x11 1.DISPLAY环境变量 export DISP ...

  4. 取得system32文件夹下面文件的写入权限

    取得system32文件夹下面文件的写入权限 TAKEOWN /F %SystemRoot%\system32\riched32.dll ICACLS %SystemRoot%\system32\ri ...

  5. 95后实习生的远程办公体验(asp.net mvc\C#技术栈)

    这个月我们做了一件别人看起来很疯狂的事情,就是让一批95后的实习生实行远程办公,效果还不错,于是写此文总结一下. 其实认真算算,我自己的远程工作经验有十年了吧,在北京工作的时候天气不好就申请在家办公, ...

  6. 一个move_uploaded_file()引起的PHP异常与错误的深入理解

    背景:我在公司开发一个产品Excel导入到数据库的功能,写起来挺快的,用phpexcel几下就写好了,本地测试挺顺的,git push上去,项目负责人部署到测试环境,就出现问题了.具体问题一句话不好说 ...

  7. electron 使用 node-ffi C++ 动态链接库(DLL)

    一.为什么需要使用DLL 需要使用系统 API 操作或扩展应用程序: 需要调用第三方的接口API,特别是与硬件设备进行通信,而这些接口 API 基本上都是通过 C++ 动态链接库(DLL)实现的: 需 ...

  8. Ambari安装之部署3个节点的HA分布式集群

    前期博客 Ambari安装之部署单节点集群 其实,按照这个步骤是一样的.只是按照好3个节点后,再做下HA即可. 部署3个节点的HA分布式集群 (1)添加机器 和添加服务的操作类似,如下图 之后的添加a ...

  9. ES6中的箭头函数

    关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...

  10. 【Django】url传递参数

    1.  url传递参数的特殊字符 在压缩后,可能出现  +  -  = 空格  这类特殊字符,需要在传递前进行url编码  urllib.enquote(string) 获取参数后 urllib.un ...