【分享按钮】是一个常见的功能,你可以把看到的有意思的东西分享到自己的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. HTML5+CSS3实现的响应式垂直时间轴

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name=&qu ...

  2. APP测试相关点归纳

    APP测试相关点归纳   1.1测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为一两周,根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前需确认项目排期. 1.2测试资源 ...

  3. View学习(二)-View的测量(measure)过程

    在上一篇文章中,我们介绍了DecorView与MeasureSpec, 下面的文章就开始讨论View的三大流程. View的三大流程都是通过ViewRoot来完成的.ViewRoot对应于ViewRo ...

  4. dashDB - Creating a table with CLOB column type

    In order to create a table with clob column type, the table has to be created with "ORGANIZE BY ...

  5. Struts 之 通配符 路径匹配 常量用法 配置默认值

    Struts 框架学习 Action的开发的几种方式 方式1 : 继承ActionSupport     如果使用Struts校验功能,必须继承此类 方式2 : 实现Action接口 方式3 :不继承 ...

  6. 对于所有对象都通用方法的解读(Effective Java 第二章)

    这篇博文主要介绍覆盖Object中的方法要注意的事项以及Comparable.compareTo()方法. 一.谨慎覆盖equals()方法 其实平时很少要用到覆盖equals方法的情况,没有什么特殊 ...

  7. JavaScript图片翻转

    <script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...

  8. JavaScript实现淡入淡出

    <!DOCTYPE html> <html> <head> <title>css动画</title> </head> <b ...

  9. 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结

    XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...

  10. 入职15天,Angular2 小记!

    ng 配置@ngModule({ imports: [ BrowserModule ], //导入模块 declarations: [ AppComponent ], //导入组件 providers ...