UX分析:朋友圈的外链知多少?

用户体验设计的核心是用户,而用户是通过社交媒体相联系的,在设计app应用时,我们会更在意app内的使用,而会忽略app外的使用。当我在朋友圈里看到这些外链的时候就想到了要写这样一篇文章,略显粗浅笨拙,如有不当之处请不吝指教。“来跳坑吧,下载我吧,打开我吧”!


用户体验设计的核心是用户,而用户是通过社交媒体相联系的,在设计app应用时,我们会更在意app内的使用,而会忽略app外的使用。当我在朋友圈里看到这些外链的时候就想到了要写这样一篇文章,略显粗浅笨拙,如有不当之处请不吝指教。

UX分析:朋友圈的外链知多少?

你们知道吗?朋友圈的英文翻译是:moments,而不是friends circle哦~

微信早已成为制霸手机的应用之一,而朋友圈也无孔不入地影响着我们的生活,纵观朋友圈,我们一般会看到这几种形式:

  1. 公众号图文
  2. 原创照片(9图以内)配文字,或纯文字(长按生成)
  3. 火爆的h5图文
  4. 外链图文、视频或音乐

UX分析:朋友圈的外链知多少?

生成的外链非常常见,可以说“分享到朋友圈”也是各种app应用利用微信来激增自己的下载量或日活量的一项非常大的功能点。但其中的设计真的做得好吗?这篇文章我小试牛刀来分析一下关于朋友圈外链的用户体验设计。

根据上述案例,我可以看到所有的“朋友圈”内都包含三个元素:主题内容、跳转路径、功能诱导。

第一个元素:主体内容

由于朋友圈的内容一共就是六类:图、文、图文结合、音频、视频、H5(有动画非视频)。

撇开朋友圈自带的图、文、公众号图文,外链内容主要可以分为三类:图文、音频、视频。

1. 通常音频、视频都属于多媒体,所以在单个移动端页面实现的功能是有限的

  1. 音频通常一个页面即可实现播放和暂停,但不能快进倒退,如虾米音乐:
  2. 视频有的可以直接播放,有播放和暂停,快进和倒退,如AcFun,但有的需要单独页面展开,如bilibili播放器,同时自带App内的功能,如弹幕等。

UX分析:朋友圈的外链知多少?

2. 图文根据内容与功能分为两类,有限(全部显示)内容与可展开内容

(1)有限(全部显示)内容页尾结构基本与微信公众号的图文相似,如简书、好奇心日报

UX分析:朋友圈的外链知多少?

(2)生活文字阅读类的,如豆瓣、知乎等生成的外链可展开内容就有很多,而且还涉及到后文的跳转问题((1)中好奇心日报尾部紫色框出也属于可展开内容,但和知乎一样,不能直接打开,设置了门槛。),如图:

UX分析:朋友圈的外链知多少?

本元素的UX设计点

(1)内容排版

一般来说,生成朋友圈的外链排版是和App内部一样的,所以App的排版决定了外链内容的排版,但部分网站是响应式的,移动端外链有自己的排版形式。(关于这个问题,后文会说到,因为有些排版仅仅就是为了跳转。)

无论是那种,我们从用户角度出发,朋友圈外链的意义和需要操作的时间来归纳:

微信朋友圈的图文阅读,是用户的碎片化阅读,其受众和微信公众号图文受众是一致的,所以应该以信息的获取为主,主体内容可以通过学习微信公众号的图文排版,建议以清晰、大、核心内容的实现为排版的首要项,相对弱化复杂功能(当App内和微信外链中内容有不同时,过多、过大的引导下载标签不可取,后文有反例),以内容清晰为第一要义,如需实现更多的功能涉及到第二元素:跳转。

同样的,音频和视频中的信息是需要花比图文更多时间的获取的,所以以保留流畅的播放为首。设置播放门槛或其他功能,需要花用户更多时间操作,可以考虑通过跳转到单独页面来完成。

(2)标题

标题应该是主题元素中比较重要的一点,和视觉设计无关,但和用户体验设计有关,这一点很多设计师不会去注意,产品经理会注意更多。(题外话:因为我个人是从新媒体转行到UX/UE的,所以也会注意到这一部分)

在某种程度上说:一个标题决定了这个外链是否会被点开!

但并不是说,我们要学习一下公众号那些逆天的可以用来斗链接的标题。

(衍生阅读:《还在斗图?现在已经开始斗鸡汤文链接了》,会摘部分图对比出来,App外链确实不需要这样做,虽然h5中标题是重要营销手段,但目的不同,所以不完全值得效仿。)

UX分析:朋友圈的外链知多少?

上图所列举一些朋友圈外链标题都是比较正常的,强调格式的重要性。

我认为合理的规范格式有:

  1. 【图文标题格式】主题(文章题目)-作者/数据-App名称
  2. 【音频、视频媒体格式】数据-视频/音频名词-作者-App名称
  3. 【创意格式】突出分享者的心情的内容,以【事件】的描述为主,但这个是场景设计,要设计好App内的用户会在什么场景分享到朋友圈

为什么呢?

  • 因为文章本身应该是最吸引人的主题,放在前面,其次是作者或数据,因为这样有渲染大家都在阅读、赞同、关注等,那么就会使人想点开。
  • 音频、视频这种艺术媒体,题目和内容是需要理解时间的,而且往往不会直接引起共鸣,数据是最好的引起共鸣的方式。
  • 这里想表达一下对扇贝单词的溢美之词,因为【事件】的描述是非常能体现分享者的心理,用一个链接来直接说明ta干了什么事,大家快来给ta点赞!但不建议在这前面加上“扇贝打卡日记”。
  • 接上一点,关于App名称,如“扇贝打卡日记”或豆瓣这样App名称+栏目(豆瓣日记、豆瓣同城、豆瓣广播),我觉得应该是最后放的,或者根本不要,因为朋友圈的外链下面,微信已经替你写好来源了,所以写在最前面等于占用了外链标题字符显示限制的宝贵资源。
  • 另外有些用户在分享时会配文字,但字数有限且并不是所有用户会,所以我们不要指望用户自己去解释这个外链被分享的原因,我们只要感恩就好了!

第二个元素:跳转路径

朋友圈就是一个社交圈,用户在分享的时候是大多抱着“告诉朋友我看什么/做什么/喜欢(讨厌)什么/推荐/关注什么”这一心理,然后阅读这一链接是和分享者的一个互动,只是这一互动的环境不是在App里,而是在朋友圈。

换一句话理解,我们可以把朋友圈外链的内容看做是,某一个App中,用户甲与乙、丙、丁等的桥梁。能带你去目的地的桥才是好桥,能实现好的跳转逻辑的设计才是微信朋友圈外链设计的关键。

根据我个人的观察,朋友圈外链的跳转一共有5个路径:

路径一:下载app

UX分析:朋友圈的外链知多少?

路径二:app内打开

UX分析:朋友圈的外链知多少?

路径三:跳转注册(登陆微信号再绑定微信号注册)

UX分析:朋友圈的外链知多少?

路径四:跳转手机版(可以登录的)浏览器版

UX分析:朋友圈的外链知多少?

跳转浏览器的本质就是从路径四到路径一,还是让用户“下载App”。

这里有一个问题:手机版与app内的异同(对比案例:豆瓣)

UX分析:朋友圈的外链知多少?

我们可以清晰的看到,豆瓣的App和手机版大同小异,然而在手机版设置了各种“心机”,部分图文还是需要在App内才能打开,限制了手机版的功能,本质还是在引导用户下载。(路径四→路径一)

路径五:长按扫描二维码关注公众号

UX分析:朋友圈的外链知多少?

其实这就回到了微信内部,目的增加的是公众号的粉丝数量,好吧,但一般公众号图文的“阅读原文”里还是会放外链的,所以这么来来回回的,真是一大盘棋。

本元素的UX设计点

(1)跳转的目的设计——跳转逻辑

细心的你一定发现了,五个跳转路径中,除了路径五是回到微信内,满足某种策略需求,其他四个路径都是转化到微信外,下文主要就分析微信外。

  • 用户分两种,未注册、已注册;
  • 场景分两种,未下载App,已下载App。

那么就画个四象限图:

UX分析:朋友圈的外链知多少?

观察象限图,仔细想来(箭头指示方向,需要移动的就是第三象限),路径一最后还是会到路径二,通过下载再进入App内(第三象限→第四象限);路径三会到路径四(第三象限→第二象限)或是路径二(第三象限→第四象限)。
也就是说,外链最后的两个终点,要么是手机版,要么是App内。但其实手机版也是会引导用户去下载的,所以终点的终点是App内!

那么引导的核心就是:要么打开App,要么下载App。

但现实存在这样一个问题,大多网站是app和web网站同时运营的,移动设计和web是两套不同设计,只不过有的页面是通过响应式解决的,那么我们需要考量手机版和app版能不能保持一致?

  • 简书就是很好的例子,手机版=App版。
  • 知乎手机版内部增加了二维码的路径五,但主体内容其实就是和App内容一样。
  • 豆瓣是比较特殊的,所以用来做了上述对比的案例,但手机版最后还是会引导到App内。

几乎都是殊途同归,因为所有外链最后都是从哪儿来回哪儿去,能分享出去,也可以引流回来,桥的两头都是通路。
同理,音频、视频都最终会引导下载App,在App中打开。

那么所有的跳转逻辑都是一套,如图:

UX分析:朋友圈的外链知多少?

一般App的内部使用流程都是很清晰的,从App到分享外链,功能都很完整,但从外链到App的过程基本是为了帮助产品经理、运营人员达成增新用户数、增加日活的KPI的,所以我们的UX设计师是不是也注意到了这一点了呢,是真的为了用户而服务的吗?
通过理顺以上跳转的逻辑,可以精确你的UX设计了。

试问以下几个问题:

  • 用户是不是会在朋友圈看到而去下载?
  • 用户是不是非要在App内打开?
  • 所有的跳转流程中会不会让用户得到好的体验?在哪个步骤会放弃操作?

(2)引导跳转的视觉设计

这个部分就是提醒用户进行跳转,增加了用户下载App的几率。上述列举的App都有这样的设计:

  1. 根据页面层次分:有加载在页面的内部的提示、页面外部的提示;
  2. 根据部署位置分:顶部提示、底部Tab提示,与内容相关的跳转提示标签;
  3. 根据显示效果分:有悬浮的提示、可隐藏的提示。

除了视觉表现,这个设计可以更多创意的发挥,但关键是要符合自己App的气质,前文中已经有很多案例了,(MONO、扇贝单词,好奇心日报都是我个人比较欣赏的,清晰简洁,符合原App气质),期待各位设计师的大作!

种类太多,列举不过来,选了这三个补充一点自己的想法的:

UX分析:朋友圈的外链知多少?

  • 下厨房:产品经理真的好拼!霸道总裁爱上我的节奏,但真的好吗?用户看到了根本不敢点开~
  • 网易云音乐:极简,美观,大方,逻辑清晰,终极要义:要么“下载”,要么“打开”!(就是我上文罗里吧嗦一堆的,用四个字就概括啦!)看到这一点,就想到一本书:《简约至上——交互式设计四策略》,删除不必要的,组织要提供的,隐藏非核心的(适时出现),信任该转移的,推荐阅读。
  • 豆瓣:屏霸!点开朋友圈,看到这么大的图,只有一个想法,关掉它,好在是可以关的。可隐藏是个好功能,把选择权给了用户。(但此处有打个巴掌给个枣的感觉。)

第三元素:功能诱导

其实,这个元素基本就可有可无,因为上述两个元素设计好了,基本就是一个完整好评的朋友圈外链设计了,但真正的功能并不是在朋友圈实现的,而是App,所以外链的设计都是围绕“让用户下载!下载!下载!”(重要的话说三遍,想想下厨房的引导下载符为什么要这么无孔不入)

因为外链的存在就是比图文多交互的内容,浏览的页面就是App不登录的状态,所以所有的功能都是App本身的功能,并不需要额外添加,而这里的交互,就是让用户顺利成章从朋友圈到App,五个路径就是给用户的挖的坑,都在说:

“来跳坑吧,下载我吧,打开我吧”!

综合之前列举过的的页面,整理出用户交互的动机:

UX分析:朋友圈的外链知多少?

UX分析:朋友圈的外链知多少?

本元素不需要分析UX设计点,从什么功能中来回什么功能中去,分享外链的场景设计,才是朋友圈外链的源头。如果非要说点什么,我个人的看法是,那就是设计有良好互动功能的App就好了!

总结

微信朋友圈外链的UX要素:

  • 0.标题引人入胜
  • 1.核心内容清晰
  • 2.播放功能流畅
  • 3.跳转逻辑走通
  • 4.引导提示简洁
  • 5.载入内容轻盈
  • 6.根源还是App分享场景

ps:其实平时我们还会看到一种图片,虽然不是外链,但标有分享来源,如:

UX分析:朋友圈的外链知多少?

  • 单读含二维码的图片分享是可以扫描跳转到下载App的页面的,安卓手机可以直接跳转进入App内,这种用户体验很简洁流畅,还言简意赅。也无强硬的让你下载的意图,如果用户看着有共鸣自然会下载。(而不是遵照背着KPI的产品经理苦心安排好的提示去下载)
  • 网易云音乐无二维码的图片是为了提升本身App的用户体验而设计的。

以上内容是我因为阅读了《界面设计模式》(个人读书笔记的思维导图整理)中“利用社交媒体”这一章节而展开的一些思考,主要针对目前自身在使用的部分App案例进行截取和分析。共计使用了55张截图,对比分析了11个App案例(加上微信本身的话是12个),一张流程图,一张思维导图,一张象限图。希望大家喜欢,图片都很大,点开阅读更佳!

感谢读完全文,但愿可以带给大家一些启发,与君共勉!比心~

 

作者:Eliza(森森),UX、交互设计新人、1年产品运营&用研、2年新媒体运营

本文由 @Eliza 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24351/

(0)
CatherineCatherine
上一篇 2017-05-08 09:53
下一篇 2017-05-08 11:46

相关推荐

  • apple watch 中文手册:Apple Watch 整体架构

    整体功能预览 总体而言,WatchKit第一版SDK提供的功能远远超出了我的期望。因为我原本以为第一版WatchKit可能侧重于对iOS Today Extension功能的延伸,而不是真正开发Watch App。所以当知道真相后,我即惊讶又感到…

    2015-06-15
  • 除了灵感,还有什么方法能帮你想出新的idea【UXRen译#174】

    作者: Mind Tools Editorial Team |  翻译:Chen Jing,校审:包子   “我们要 think differently!”“这个得有些新想法!”“我们要更有创意!”这些声音是否在你工作的场所越来越多? 面对复杂,开放和不断变化的挑战…

    交互专题 2017-08-07
  • 临时框这种交互方式,产品经理请慎用

    临时框是每个产品的标配,每个产品经理都会遇到临时框的交互设计,那么哪些算是临时框?警告窗口、操作列表、toast等分别在什么时候使用才符合一定的产品交互规范?本文就来讨论一下临时框以及它的使用场景和规范。

    2017-05-14
  • 手机无线设计8个交互设计原则

    产品设计的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机无线设计8原则: 原则1:用户界面应该是基于用户的心里模型,而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常…

    2015-04-08
  • 2个方向4个维度,探索电商运营活动中的交互设计

    设计是为了达成一定的商业目标服务的,设计本身是我们的表达手段,在达成业务及用户目标的过程中需要一定的设计指导准则以达到优秀的使用体验。本文作者将针对电商运营活动的交互设计,讨论了交互设计师需要如何思考?

    2017-05-06
  • 【优秀作业展示】交互设计基础(二)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第二期申婉彤产品设计15101高铁购票界面设计地点选择日期选择车次车座选择身份认证界面支付界面支付宝支付银行卡支付01Te...

    2018-04-22
  • 2015-2016交互体验趋势

    移动产品篇: 2015年移动应用数量增长依然强劲,但是移动交互体验却在发生着变化。较之去年层出不穷的新颖形式,今年交互体验趋势中,更多的是某一个方面的体验优化与深耕,而较少有创造性的引领者出现。这说明移动…

    2015-04-20
  • 五个提升用户体验的分析要素

    原文链接:https://uxdesign.cc/analytics-for-better-ux-c0128c0da55e用户体验是区分产品优劣的核心元素。为了提高转化率,你会试着仔细的检查产品的用户体验,但是应该如何着手呢?你要如何找到痛点并弄清用户的真正需求呢?不去研究调查就编造借口,觉得你知道确切问题所在当然是很轻松的。但是你必须保持谦卑,机敏,通过客观的分析来得出结论。流行的分析软件挺多的,列举一些:Google Analyti...

    2018-03-02
  • 好的交互设计能促进“内容消费”

    现在的人们,每天都消费着大量的快餐文化,海量的内容、体验、感知往往都只是一看而过,真正停下脚步独立的思考已经越来越少了。茫茫产品的出现,如何利用瞬间的体验和舒服的交互让用户“停”下来,为你的产品花费时间,促进产品的内容消费,已经是一个产品经理值得深入思考的话题。

    2017-05-19
  • 不是首发!互联网女皇报告中文完整版发布

    腾讯科技讯 6月1日,有“互联网女皇”之称的玛丽·米克尔今天在美国Code大会上发布了2017年的互联网趋势报告,腾讯科技第一时间推出完整中文版。关注腾讯科技微信号(ID:qqtech),回复“女皇2017”,可获得中英文PDF版…

    2017-06-01