社交APP-Same的产品和交互设计体验总结

手机里总有一些app是下载试用了之后不会卸载的app，而same这款app在我的手机中是呆的时间最长的一款，我并不经常打开它，即使在其体验出现各种问题时，比如闪退，引导页进不去app（需杀掉进程进入，偶尔一次可进去），但是却不舍得卸载它，因此，我一直在思考背后的原因。而作为做社交产品的设计师，有时候或多或少的会更关注一些社交类产品的设计，所以在此研究并总结一下same的产品和交互设计，希望自己能从中学习到很多。

same的产品理念

曾经看过一篇关于same的文章，其创始人许旭恒谈到same时，说：孤独也可成社交网络。想起这句话，打开自己的same，发现自己关注了一个频道：你所理解的孤独，如图1所示，看着里面的状态，想着之前看过的文章，各种大佬给same贴的标签：“状态社交”“反社交”“另类社交”；突然明白了same是一款什么样的社交产品，当每个人有着不同的经历时，那些发生的故事、情绪、感悟总会有相同的共鸣，而在现实生活场景中，我们会对别人说的话，一首歌，一部小说，一部电影产生共鸣；当思想上或感情上的相互感染而产生的这种情绪出现时，人也就会对人、物产生情感了。就像same的官网所描述的：和而不同，由9种频道模式，259616 个频道组成的，玩法多样，富有创造力的社区。每个人都是不同的，却能够很好的“和”，也许正因为“人与人的共鸣”，而共鸣可能来自于兴趣、状态、情绪、习惯等。

图1 same“你所理解的孤独”频道

曾经看到一篇文章将same的整个产品形态形容为：以时间和碎片化的生活状态为维度构建内容形态。但是想想似乎每一个社交产品的动态功能或朋友圈功能都是这样的产品形态，但是same相对于它们而言，更多的基于陌生人的弱关系社交，但same的共鸣理念使其又不会像陌生人社交产品的动态一样死气沉沉；在熟人社交产品中的内容更多的是了解朋友们的状态，而当我关闭了微信朋友圈，偶尔打开朋友圈想去发一条状态时，思索再三，标签选可见的人时，却发现在same中我完全不用顾忌太多，其实仅仅为了寻求一丝丝自己内心的传达，记录自己单纯地心情。“状态社交”其实一直都有，只是same将其更垂直了，细分了，搭建了一个平台，让你不再犹豫。

一直想谈一下same的目标用户到底是哪一类人，然而却真的无从下手。如果单从产品设计风格上来看，似乎目标用户应该有文艺小清新的特质；而从内容来看，每个频道似乎又应该有着不同的特点。也许，每个会与其他人产生共鸣的人都有可能成为same的目标用户吧！

    same的信息架构

基于自己的经验，简单谈了产品理念相关的内容，因为自己是交互设计师，还是要回归到设计上，来看一看same产品的设计思路。首先，我们来看一看same的基础信息架构，如图2所示。

图2 same的简单信息架构

由图中same的简单地信息架构可以看出，整个产品围绕着“频道”进行小而美的设计，整个产品架构清晰明了，功能也相对简洁。频道模块主要起到用户浏览内容，创建、搜索、关注频道的作用；而当用户在音乐频道播放音乐时，也会在频道页面出现快捷入口；另外，当用户创建了频道后也会显示“我创建的频道”入口。而发现主要是用户寻找频道，获取频道的途径，该部分内容主要由运营控制。而聊天模块更多是same中产生的消息的展示，包含系统消息、同感的消息（喜欢）、评论的消息、运营推广的消息。而个人中则主要展示用户已经发布的内容，更多的是记录和查看自己发布内容的作用。当用户在自由探索使用same的时候，其简单清晰的信息架构，能够帮助用户快速地认知same，并能够找到自己想找到的内容和频道。如果说频道种类庞大、玩法较多是same保持较高留存率的产品基础，那么，其简洁清晰符合用户认知的信息架构则是保持较高留存率的设计基础，如图3所示。

图3 same的高留存率（来自知乎same工程师）

   same中两个重要功能的交互设计

接下来，我想研究一下same中的最基本的2个功能：创建频道和频道内容。首先，来看一看创建频道功能。same的创建频道属性包含：打卡、文字、图文、音乐和电影，包含了现实生活场景下，能够与不同人产生共鸣的基本方式。创建频道的条件是：需要绑定手机号，且24小时之内只能创建一个频道。而不同频道的创建流程也会有着一定的差异，因此，笔者仅以纯文字频道创建成功的流程（暂不考虑创建失败）为例研究一下same频道创建的设计，如图4所示。

图4 same创建频道成功的流程

由上图可以看出，same“创建频道”的流程中有2处值得关注的点：查看创建频道介绍，填写频道内容。

点击“创建频道”入口时，same并没有直接进入选择频道属性页面（文字，打卡，图文等）；而是给了一个查看介绍的页面，告诉用户创建频道的好处以及限制条件。这样做难道不会把整个创建频道的流程变长么？仔细想了一想，same这样做的原因有这样几点：第一、创建频道时低频需求，用户不可能每天都在使用创建频道功能；第二、当用户不理解频道时什么时候，就直接进入选择频道属性页面，会造成用户不理解；第三，防止出错，创建频道的限制条件可预先防止用户在创建时出错。而为什么不把“介绍和限制条件”放到“频道属性”选择页面呢？我想应该是“一个页面只讲一件事情”。

既然说到了“一个页面只讲一个事情”。我们来看看第二个关注的点：填写频道内容。为什么却没有“一个页面只讲一件事情”？一般的创建“群”的流程都会一步一步的创建；而same在此处却选择在一个页面填写所有的内容。思考了一下，原因如下：频道的创建流程在前面需要进行多次选择，已经将流程拉长，如果此处再采用一步一步的设计，将使整个创建流程过于冗长；而在一个页面填写表单和分类可以认为一件完整的事情，所以能够接受这样的设计，并在视觉和其他细节体验上适当优化，使其用户能够更简单的填写内容。

了解完创建频道，我们来看一频道内容页面，如图5所示，展示了same图文频道和音乐频道的频道内容。

图5 same音乐频道和图文频道

由上图中，我们可以发现，same的频道内容页面主要显示了不同的用户发布的内容，而基于不同的频道属性，则会产生不同的内容。在设计上，same 采用的还是 sns式的信息流，并将其信息切成一块块的卡片，使更具可读性；虽然same中的频道的种类多种多样，但是same采用了一致性的卡片，能够很好地带给用户一致性的体验。每一个卡片都将内容的最重要的信息展示出来，而可对内容进行的相应操作，比如同感、分享、评论，相对于内容则较为弱化，但并不影响用户使用。而针对不同的频道的内容，same可提供的发布方式也与之对应，比如发音乐仅可音乐配文字、发图片仅可文字配图片；常驻的发送状态条，作为高频的用户需求，在页面底部，方便清晰易操作。

而在顶部bar上，针对多样化的频道，same又进行了多样化的设计，同时又能保持一致性，比如音乐频道包含快捷播放功能和频道简介图标、而图片频道仅有频道简介图标；而上图中音乐频道中有19位用户在其中，频道简介图片则变化为19的图标，吸引用户点击查看，而19位用户在达成社交产品的产品目标上起到一定的作用，将其和并不是需要经常查看的频道简介页面完美的结合在一起，看似界面复杂化了，但是却达到了简化的目的。

same的多种多样的频道能够采用一致性的设计带给用户一致性的体验实属不易，感兴趣的同学可以下载same一个一个查看学习。

   same的运营相关功能的设计

研究完same的两个基本功能，想系统的研究一下same的运营相关功能的设计，same中的运营其实也是多种多样的，而最重要的一部分则是发现tab的运营和设计。笔者将same的运营总结为如下几个方面，如图6所示。

图6 same中多种多样的运营方式

由上图中可以看出，same的运营方式是多种多样的，包含活动、推送、推荐、更新、分类等方式。same作为一个内容类的产品自然是偏向于强运营的产品，强运营也能够帮助用户找到感兴趣以及与之共鸣的频道和内容，即当用户未关注任何频道时，也能够无障碍、顺畅的使用same。那么，我们就来看看same运营中最重要的"发现"的设计，如图7所示。

图7 same的发现和分类

如上图左侧的页面，我们能几乎完整地看到“发现”tab的设计，看不到的内容包括页面下侧的“分时推荐”和“用户推荐”。看到这个页面后，我思考了几个问题，如下：

第一、 “发现”中使用tab切换的设计来展示“推荐频道”和“更新频道”；

第二、分类仅作为一个按钮摆放在左上角；

第三、看不到的“分时推荐”和“用户推荐”。

针对第一点，可以发现same的运营策略可能更强调运营推荐的一些频道，而相对弱化了一些有更新内容的频道。从产品层面也可以理解，因为有更新内容的频道可能有成千上万个，而且更新的内容的好坏并不是能有运营人员决定的，但有更新内容却能表达出频道的活跃性。而运营推荐的频道则是运营从千万个频道中选出来的频道，以及为了达成产品目标而进行宣传的频道，自然其重要程度要高于更新频道。tab切换的形式能够很好的将更新频道露出，吸引用户进入查看，同时又凸显出运营推荐频道的重要性。

针对第二点，same并没有在首页中做很多产品做的事情，即把分类内容在首屏展示出来。其实从很多产品中可以发现分类内容首屏展示一般适用于工具类型的产品，且目标用户带有很强的目的性，而社区内容类的产品，都会将运营内容放到首屏，就像same所做的一样，“分类”放在屏幕左上角，能够让用户很容易的注意到“分类”，同时，又能够将首屏内容让给运营推荐的内容。而有趣的是，same的分类并不是像一般的产品一样做简单的分类，而是通过2种不同属性来进行分类，满足2类用户不同场景下的查找频道的需求。笔者特别喜欢第二种方式的分类，通过有趣的标题和插画很好的吸引用户的注意，这样的方式，根本不用担心用户不将所有分类浏览完整。

针对第三点：很多运营内容类的产品都会有这样的问题。因为移动端的屏幕较小，一个列表下来，肯定会有一些内容不能在一屏甚至两屏显示，而很多产品的分类较多的时候，就会采用顶部tab可滑动切换浏览的方式，就类似于百度贴吧和网易新闻。而same采用一个列表的方式，则可能是因为并没有特别多的分类，且推荐的内容并不多。且same的“更多”则直接指向一个频道或分类页面，分别显示same小秘书推荐、分类页面、用户推荐频道；这种方式可以让用户能够看到所有的历史推荐，而用户推荐又有很强的说服力，会让其他用户产生认同感。

另外，笔者还超爱same的一些场景运营相关的设计，如图8所示的睡前打卡，直接贴合了使用场景，打卡完成后会自动随机分配一个用户录的歌曲，将两个完全不相干的用户就这样联系起来了。

图 8 same的睡前打卡

总结

same中有各种各样的频道，甚至不同类型的频道有着完全不同的功能，same却能够很好的保持一致性，并且能够在这样的环境下，另辟社交的蹊径，希望same越来越好，让不同的人能够有相同的共鸣，彼此温暖。同时，也希望自己能够学习到更多的社交相关产品的设计。

文章来源：Lofter作者 alvinzsc