恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
看不见的设计——关于“分享”的小细节
0.0°
2016-08-01 原创文章 经验/观点 举报 1544 4 3 0

“分享”可不只是设计一排按钮那么简单,它背后藏着很多细节。这篇文章就讲讲关于“分享”需要了解的细节和我的一些想法。

现在“分享”几乎成为网站的标配。每个网站都想让浏览者把自己的内容传播出去,于是只要是可以分享的地方就有那么一排分享按钮,甚至每张图片每个评论都有分享按钮。但是“分享”可不只是做一排按钮那么简单,它背后藏着很多细节。这篇文章我就讲讲关于“分享”需要了解的细节和我的一些想法。


分享的主体


分享,就是我要把这个东西告诉别人。打开一张网页,上面有那么多东西,我要告诉别人什么呢?这个就是分享的主体。一个页面不同位置的分享按钮都有着不同的分享主体。举个例子,我们对比一下落网期刊这里的两个分享按钮,我点击之后选择分享到微博。


Image title


分享的结果如下:上面的分享按钮分享的是这个期刊,而下面的按钮分享的是当前播放的这首歌。


Image title


可见,当我们给网站某处添加分享功能时,要想清楚分享的主体是什么。对于不同的分享主体做以区分,就更能体现出每个分享按钮的意义,当然一个页面还是不建议出现太多分享按钮。


分享的时机


“分享”的设计同质化比较严重,多数网站都是一排图标。对于用户来说,可能习惯了这种设计,无需“教育”就知道点这些图标可以进行分享。但是与其等待用户主动分享不如让分享按钮在合适的时机出现,让一切自然发生。


比如,阅读类产品可以在用户滑到文章底部时再提示分享,购物类网站可以在用户订单支付成功时引导分享。


分享的视角和内容


社交媒体一般都支持分享的内容自定义,即分享出去所呈现的样子是可以控制的。一般情况下,分享的内容包含以下四项:标题、简介、缩略图和链接。下图是在微信中将一篇文章分享给朋友时所呈现的样子,上面黑色的大字是标题,灰色的小字是简介,右边是缩略图,至于链接,则是当查阅者点开的时候跳转的页面。


Image title


由于这些东西是可以自定义的,所以我们可以让分享者分享出去的页面和查阅者点开看见的页面不一样。常见的是在微信中传播的小测试,比如在扇贝单词量测试中,分享者分享自己的测试结果,查阅者通过分享者的分享链接打开之后看见的不再是分享者的测试结果页,而是开始测试的页面,这样就形成了一个很好的传播链。


Image title


当然标题、简介、缩略图也可以根据分享者的当前操作状态随时修改,以达到不同的分享效果,吸引查阅者点击。比如上面的测试结果分享出去的标题就是:我的英语单词量竟然是5500,你也来测测吧。它是实时的,而不是一个不变的标题。


分享的特权


对于经过一些社交媒体认证的网站,在分享时是有一些特权的。比如在认证的微信公众号中设置安全域名就可以自定义分享内容,获得微博appkey的网站内容在分享时会被解析为linkcard。下图就是微博linkcard效果,未获得微博appkey的网站分享出去的内容里面带有链接就显示为蓝色的链接,但获得授权的分享出去就会显示为卡片的样式。


Image title



微信分享和其他分享


最后单独说说微信分享。在这些社交媒体中微信是个异类,因为对于分享按钮的点击响应微信和其他社交媒体不一样。一般来说点击分享按钮就会跳转到一个新的发布页面(发布微博、发表说说等),但是由于微信没有网页端的朋友圈,分享到微信就只能在移动客户端上操作。所以分享到微信就等同于用户需要使用移动设备扫码在微信内部打开再点击右上角的按钮分享。


“分享到微信”按钮实质上不算是分享,更像是一个提示。由于网页可以在多端打开,所以这个提示也需要根据当前打开设备环境来做不同适应。可以粗略地分为三类:桌面端浏览器、移动端非微信浏览器、微信内置浏览器。桌面打开一般会弹出二维码,提示使用手机扫码再分享;移动端非微信浏览器则是提示用户保存二维码并使用微信扫描;微信内置浏览器则直接提示点击右上角按钮进行分享。下图就是在三种情况下的不同提示效果。


Image title


当然,文字提示略显单薄,我们可以把这些提示做得有趣一点。之前大众点评一个特别火的H5的分享提示就融入了情境,很自然,不突兀。


Image title


关于“分享”的小细节,暂时想到这么多。可见,很常见的东西要是深究其细节也是非常复杂的。希望我们以后做这些很常见的功能时,也能把它做得细致入微,让人称赞。


原创文章,未经允许,请勿转载


Image title


更新:2016-08-01

收藏

4人已收藏

  • 14

    作品

  • 160

    粉丝

  • 1

    关注

  • 为了让更多人用上 Figma,我做了一个设计标注交付工具
  • 设计系统是什么?
  • Figma Handoff 设计标注插件
  • Figma 教程 | 文字工具

    猜你喜欢

      2016-08-01 原创文章 经验/观点 举报 1544 4 3 0

      看不见的设计——关于“分享”的小细节

      0.0°

      你确定要举报看不见的设计——关于“分享”的小细节

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年08月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录