【有意思的BUG】分享按钮 分享功能
【分享按钮】是一个常见的功能,你可以把看到的有意思的东西分享到自己的BLOG、朋友圈之类的地方。
但是,分享出去的文本(也可以包含图片)在每个目标网站上面的格式并不是统一的,所以就存在了美感的三六九等。
举个例子,直观些:
下图是在某一个音乐网站,用户分享一首歌到自己微博里的操作

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

分享功能需要验证什么?按照上面圈起来的这几个区域说说,
【1】【进入详情页】-这个功能在微博常见,一般在分享操作的场景内不会出现BUG
【2】【文本】-每个目标网站上面的格式并不是统一的
(你看,在这个目标网站内,展示的效果并不是十分负责任。歌曲名称被截断了,这显然失去了分享歌曲的重点。用户的分享理由也没有突显出来,仅仅是包含在这2行文本内,不容易被注意到。用户体验太差了!!)
【3】【图片】-有的目标网站支持图片点击查看大图,有的目标网站点开后仍然展示缩略图(分析:第3方平台的原因)
所以【2】【3】真的非常影响用户体验,如果能优化这些细节就太好了。
【4】【视频】-展示给用户的样式是否一致
【5】来自【虾米音乐】-这个结果显然是正确的,你可能遇到“来自【null】”、“来自【分享按钮】”等等比较奇葩的情况
验证分享功能也会出现比较低级的失误:
【6】developer忘记给分享功能加URL,导致分享按钮是个摆设
【7】分享按钮的ICON对应了错误的目标网站地址
另外需要关注的也有分享功能的工作流,不过这个内容并不算作本篇文档讨论范围。总的来说,分享组件需要详细地验证,以便当全站其它模块需要引用到这个功能的时候,就不需要再投入精力去专门验证它了。
补充,在验证分享功能的时候,也可能存在以下BUG
【8】分享到第三方平台后,登录到第三方平台发现没有分享记录。(分析:某些第3方平台必须是手机验证用户才能发表原创内容。但是既然没有分享成功,又没有给予用户有效的提示,这算是BUG)
【9】分享过程是否自动给必填字段都传了值(标题、描述)(分析:一切额外的手动操作可以视为体验范围内的BUG)
【有意思的BUG】分享按钮 分享功能的更多相关文章
- bShare分享插件|自定义分享按钮|异步加载分享解决办法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项
<!--禁用微信分享按钮--> <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu' ...
- 9款经典华丽的CSS3分享按钮
如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...
- 人人API 分享到人人功能 修改版
最近在搞一个日程管理网站, 需要实现分享到人人功能, 所以找了一下人人API, 然后根据自己需要修改了一下. 首先得有一个人人给的js文件, 如下: var Renren = Renren || {} ...
- (转)微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项
<!--禁用微信分享按钮--> <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu' ...
- 为Hexo Next主题添加分享及打赏功能
博客地址:往事亦如风的博客 要想先看打赏和分享功能效果,请移步我的博客 打赏功能 因为next主题自带打赏功能,所以我们只需要在next的主题配置文件中找到如下代码,image文件夹是我在blog/s ...
- 微信小程序一个页面多个按钮分享怎么处理
首先呢,第一步先看api文档: 组件:button https://developers.weixin.qq.com/miniprogram/dev/component/button.html 框架- ...
- 纯CSS3实现的顶部社会化分享按钮
今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便.这些社会化分享按钮的图标文件来自google和bootstrap的字体文件 ...
- 纯css3实现的圆形旋转分享按钮
之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...
随机推荐
- HTML5+CSS3实现的响应式垂直时间轴
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name=&qu ...
- APP测试相关点归纳
APP测试相关点归纳 1.1测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为一两周,根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前需确认项目排期. 1.2测试资源 ...
- View学习(二)-View的测量(measure)过程
在上一篇文章中,我们介绍了DecorView与MeasureSpec, 下面的文章就开始讨论View的三大流程. View的三大流程都是通过ViewRoot来完成的.ViewRoot对应于ViewRo ...
- 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 ...
- Struts 之 通配符 路径匹配 常量用法 配置默认值
Struts 框架学习 Action的开发的几种方式 方式1 : 继承ActionSupport 如果使用Struts校验功能,必须继承此类 方式2 : 实现Action接口 方式3 :不继承 ...
- 对于所有对象都通用方法的解读(Effective Java 第二章)
这篇博文主要介绍覆盖Object中的方法要注意的事项以及Comparable.compareTo()方法. 一.谨慎覆盖equals()方法 其实平时很少要用到覆盖equals方法的情况,没有什么特殊 ...
- JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...
- JavaScript实现淡入淡出
<!DOCTYPE html> <html> <head> <title>css动画</title> </head> <b ...
- 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
- 入职15天,Angular2 小记!
ng 配置@ngModule({ imports: [ BrowserModule ], //导入模块 declarations: [ AppComponent ], //导入组件 providers ...