35

腾讯设计师是如何做社交功能的?这里有一份实战案例复盘!

 5 years ago
source link: https://www.uisdc.com/tencent-social-function-design-dov?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

VN7b6b7.jpg!web

编者按:占据社交领域大半个江山的腾讯,到底是如何做社交产品的?今天用一个腾讯的实战案例,为你完整展现腾讯内部是如何从零开始构建社交功能的。

社交现状与痛点

mIbiAvV.gif

保持距离、经营人设、礼貌分寸,我们努力维系与迎合,去成为在社交关系中受欢迎的角色。曾几何时,人们在使用社交APP时越来越忐忑,「这句话这样说是否合适?」「是否影响到了我的公众形象?」「这样会不会太矫情?」又或是,大家开始抱怨社交产品上的红点提示,似乎永远也删不完。想联系的人找不到,不想联系的,却又碍于社交礼仪,只能礼貌的客套。许多人在问,那个想说什么就说什么的「我」去了哪儿?

痛点分析

美国社会学家格兰诺维特曾提出,人和人之间的连接分为「强」「弱」两种关系。强关系常产生于家庭成员、同事、同学等之间,他们在生活和工作中有较多的互动机会。由于已经有了固定的情感基础,社交动机以具体的「人」为维度,沟通与互动是主要场景。弱关系中,人与人之间联系较少,可能只是聊过几句或是打过招呼,人们关注的更多是信息的质量和信息的传播。

主流社交APP,在产品早期主要聚焦于强关系链。但随着用户数量的持续大量增长,私密性和封闭性逐步被打破。原本只承载强社交关系的圈子,变成了一个充满看客的强弱社交关系混合的广场。因此,虽然刺激用户社交的功能一直在不停地迭代与增加,用户却因为社交环境的变化,导致分享沟通更有负担。

YZZrQr6.jpg!web

解决方案与设计目标

关系,决定了人与人之间产生交互;场景,决定了人与人之间产生什么样的行为。具体的社交行为,是关系和场景这两个要素的叠加。为尝试解决现有的社交困境,DOV定位于「强关系」这一明确的关系链,清晰分隔混合的社交环境,聚焦于核心的密友社交场景,探索搭建合适的APP,为用户提供新的社交帮助。

引导用户导入

1. 建立合适的强关系群体

第一步,需要引导用户导入和建立合适的强关系联系人。我们将「强关系」定义为一个用户更好理解的概念──「密友」,根据基本的用户使用地图,我们在推荐渠道,新手引导和功能设定三个步骤上,突出「密友」的概念。

E3uEFnu.jpg!web

2. 从推荐渠道建立认知

首先,在各个推荐渠道中强调「密友」概念。用户需要通过一份「真假朋友大考验」,才能获得友谊的通行券。在诸多运营活动页面的设计中,DOV使用了同一套字体系统和类似的四方连续底纹,保证设计风格和氛围的统一化。整体设计风格偏娱乐化,同时兼顾DOV的品牌风格,深化产品在用户心中的形象定位,帮助用户首次接触DOV这个产品时,留下完整性的品牌印象。

IVz6fij.gif

3. 从闪屏页与新手引导教育用户

当用户首次登录DOV时,一则趣味化的小短片,也向用户表达了产品的主要核心:「虽然我们和多数人相识,却只能和少数人亲密。这里,是只属于你和密友们的新天地。」首屏小短片需要给用户营造一种热闹的气氛,视觉上会更加活泼来吸引用户的眼球,采用黄黑与黑白两种高对比的色彩去加重需要用户所悉知的内容。同样,在短片中延续整个DOV常用的四方连续的设计手法。

QzeeYf7.gif

4. 从功能的设定强化概念

尽管人们可以借助社交网络实现「好友」遍天下,但真正的密友屈指可数,而且数量基本保持不变,结交一个新朋友往往会冷落一个老友。在DOV的密友生态环境中,我们希望杜绝泛泛之交,去限制每个用户的密友的数量,从而让用户去珍惜每一个名额。视觉样式上采用卡片的形式,强化视觉上的个人意识。通过大投影的卡片来与背景的白色拉开层次距离,让整体卡片更加立体。同样,排版上采用左齐的排版设计样式,采用大字体的标题设计,偏向于海报的排版。

DOV的TAB页,如同一个所有好友的集居地。用户可以轻松地看到所有的好友每日状态,如果好友更新了日迹内容,好友的卡片会透传视频内容和未读数。点击好友卡片,就会以连续的小视频播放展示好友24小时内发布的生活小视频。

i6Fbee3.jpg!web

扁平设计已经流行了好几年,但是过于扁平的设计会让整体空间层次混乱,在DOV的设计中大量运用卡片以及大投影的设计来为空间层次感增效。同样在动态的设计中,我们给2D图形赋予更多的伪3D的一种动态质感,让整体动态以及界面的视觉呈现上更加立体,让层次更加丰富细腻。

BVBzYn6.gif

维系与加强已有的情感基础

引导用户导入了强关系链联系人之后,如何维系与加强已有的情感基础就成了主要的目的。在网络上,社交情感的维系依靠信息,特别是真正有价值的属于「你与我」的独有的信息。在交互设计中,参照实际的物理的社会互动因素,可极大提升用户界面的参与感和趣味性。

n6Zv6jf.jpg!web

1. 实时体现社交情感温度

DOV的AIO背景,从视觉层面体现实时的社交情感温度。背景颜色会随着聊天热度变化从淡漠的浅灰色逐渐升温到柔情的橙黄色,最终到达至炙热的红紫色。通过视觉表达上的色温感受来透传好友之间的亲密热度。

RBNBJfj.gif

i2aMBfb.jpg!web

2. 即时同步行为状态

好友的意义,除了实际的沟通,精神上的陪伴感也非常重要。当两个用户同时出现在AIO窗口中时,会激活「小状态」功能。他或者正在写着什么给你,或者正在等待着你说话。这些依据用户行为触发趣味性动效,可以有效的拉近情感空间。即便地理位置上也许相隔甚远,但通过一块共同的屏幕,却仿佛就在眼前。

合理运用迪士尼的动画设计原则,更加拟人化的动态设计可以更好地调动用户的内心情绪,夸张的表现手法也同样会赋予UI界面更多的戏剧性效果。

B3mIJrM.gif

3. 丰富信息交换的载体

视频,能传达丰富的信息。但传统的视频聊天作为一种非常需要双人同步在线的重社交方式,存在天然痛点。比如旅行途中,我想给朋友看看我正在进行时的美景美食,朋友却在会议中,不能接收视频聊天邀请。鉴于此,DOV新设定了一个同框功能,允许只打开一方的摄像头,并且默认语音静默。这样如果用户想将现在所处的环境展示给朋友,就不需要发起一个非常重的视频聊天,而只需要打开同框功能,将摄像头内拍摄到的内容作为AIO背景同步给好友。

而当时间点方便时,好友也可以选择加入同框,成为一个类似视频聊天的体验。此时,按下「记录」的按钮,就生成了一张拍立得质感的记录图片,沉淀在AIO内,成为友谊的见证。

ayua2em.gif

4. 提升信息交换的效率

强关系的一大特征在于有高频的信息交换诉求。在QQ,微信等诸多社交软件的培养下,异步发布自己的生活点滴和心情,分享给好友,已经成为了一种非常天然的心理诉求和用户习惯。作为好朋友,常常会互相告知所在的位置,心情,所做的事情等等。DOV在AIO内加入了一个「此时此刻」功能,可以快速拉起摄像头拍摄现在的场景,再加上简单有趣的图像化状态说明。相比一本正经的汇报现状,更强调分享生活小点滴,以及自己的碎碎念和小心情,是一种更具有趣味性和轻量化的沟通分享能力。

jUZjMbu.gif

5. 创建更多C2C沟通场景

当朋友们在谈论社交网络中的内容时,经常说一句话是「嘿,你看到那张照片了吗?」DOV将C2C的沟通起点,前置于观看场景。当用户看见朋友的生活小视频时,可以用消息和轻互动直接开启聊天。异步分享成为了即时沟通的社交动机,因此而开启更多的可能的沟通场景。

同时,DOV的分享体系下,视频不仅仅是一种异步分享方式,而是想对着所有好友说的碎碎念。所以,相比一般发在朋友圈里的那种展现美好生活形态的记录,DOV内更多的是我的各种好的、坏的、大的、小的、当下心情与境遇。因此,朋友的即时反馈就极为重要。好友的回复,是对分享发表的直接正向鼓励,可以有效的刺激更多的内容产出。

mYryEbm.gif

总结

年轻一代往往希望更纯粹的社交,让沟通分享脱离功利,回归纯粹的友谊。围绕着这种年轻人的新诉求,为他们搭建舒适贴心的沟通与分享场景,一直以来,都是DOV的产品创新设计的主路径。或许将来的社交潮流,更多的是小社交,每个人都有自己的小圈子,既有独立性,也有合作性,而且各有各自的规则,私密和公开相结合,去正式化,去平台化。社交模式创新的尝试,路阻且长。但望,流年笑掷,未来可期。

最后,附上DOV二维码,欢迎大家下载体验。

ABNn2ib.jpg!web

2aiyea7.jpg!web

JJniay2.png!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK