β

【产品体验】GeGe,格子世界里的匿名社交

青溪·札记 115 阅读

版本备注:GeGe V1.3.3.058( iPhone 4S)

一、产品概括

1、用户“匿名社交”的需求

1)倾诉分享
– 有话无人讲
– 分享奇思妙想
– 唠叨最新的碎碎念
– 信手涂鸦、新写的诗歌
– 等等

2)满足好奇心
– 看他人倾诉、分享的故事

2、GeGe独特的匿名社交机制

1)把世界分成了千千万万个格子,每个格子像一个个平行世界呈现着不同的生活。GeGe独特的世界分割方式,建立了独特的地理围栏,你和一群真实存在于你身边的人同处一个格子。

2)没有注册、没有关注、可以起个临时昵称或者完全匿名发帖

3)你所在的格子里,可以发帖、评论、顶、踩等等,分享你的奇思妙想;在别人的格子里,只能浏览他人发表的碎碎念、故事、想法。自己发的帖子,即使将来离开这个格子,仍然可以参与互动。

4)发帖子时只能拍照上传图片,禁用了从相册选择,让每张图片都是真实场景的重现

5)热门内容的产生,根据时间和投票(顶和踩)的情况综合排序

6)垃圾内容的处理,用户举报、踩的方式给帖子打分,分数超过-5就会自动消失。

二、主要功能模块

配图

三、交互分析

** 信息架构 **

配图

界面布局和交互操作:
– 开启定位、通知权限后,进入上图1界面,最底部是字符数从0增加至实际数字的动效。此时后台正在获取当前所在的精确位置。点击“进入”即可达到我在的格子详情页,如上图2.
– 在上图2的格子详情页,通过右滑手势或者点击“小房子”图标,可进入世界格子视图的界面,如上图3 。
– 在上图3,点击右下角的定位图标,可展开多个图标,包括我收藏的每个格子、热门格子漫游、当前区块图标。点击这些图标,世界格子会快速移动至对应的位置。
– 在上图3,点击左下角的“三线”图标,可展开上图5所示的通知、我的帖子、设置中心。
– 经过上述分析,可以发现,在格子详情页专注浏览、分享、交流互动;在世界格子视图界面,主要是发现更多、有趣的格子,而不拘泥于自己所在的格子。

1、首次使用GeGe

1)启动GeGe

配图

界面布局和交互操作:
– 启动界面除了常见的功能介绍之外,还有个特别的方式是开启定位和通知。只有当定位、通知开启后才能进入GeGe开始玩耍。
– 有个一致的细节体验是:在上图3界面,希望用户开启定位,所以定位图标会上下跳动,以吸引用户注意力,好像在说“点这里点这里”;同样的,在图4的界面,是希望用户开启通知,所以铃铛图标会左右摆动,也达到了吸引用户的效果。非常细致又一致的设计,赞一个~~
– 对比上图3、4、6,可以看出不可使用的图标置为不可用的状态,凸显可用的、鼓励用户点击的图标。

2)新手引导

配图

界面布局和交互操作:
– 点击图1的“开始玩耍”,进入图2界面通过一定的时间获取用户的精确地理位置。点击图2的“进入”,即可来到我在的格子的详情页,如上图3,通过“GeGe小学堂”来统一说明一些小细节。
– 当用户首次进入世界格子视图的界面、我不在的格子详情页时,采用类似的方式来介绍小细节。点击“向下箭头”可收起这些提示。

2、格子详情页

1)详情页的三种视图

配图

界面布局和交互操作:
– 格子详情页有两种类型——蓝色格子、红色格子,分别表示我在的格子、我不在的格子。
– 进入格子详情页时,默认上半部分显示地图,下半部分显示格子的基本信息、帖子,如图1、3。
– 在上图1、3界面,点击地图、或者下拉格子基本信息的色块背景区域,可进入地图大视图模式,如上图2、4 。此时点击文字“返回”/“向上”的箭头、或者上拉格子基本信息的色块背景区域,又可回到图1、3界面 。
– 在上图1、3界面,上拉格子基本信息的色块背景区域,可收起地图,如上图5 。
– 从上图可以看出,发帖子的“+”图标始终固定在页面右下角,用户可随时发帖。
– 在图3、4界面,可以看到地图上一些数字定位图标,表示该位置的发帖数。

2)浏览格子的基本信息、帖子等

配图

界面布局和交互操作:
– 在上图1界面,突出展示格子名称、将帖子数弱化展示。除了发帖按钮突出显示外,其他次要操作(重命名、分享这个格子、二维码分享、收藏这个格子)均收起在“更多”图标中,与格子名称临近显示。格子名称前面显示一个“小房子”图标,首次使用时可能不知道这里是否能点击,当摸索成功后,通过这个图标回到世界格子视图的记忆成本也不会太大。好在还提供了左滑手势回到世界格子界面的操作。帖子按照最新、热门、我的惊醒分类展示,默认看最新的帖子,在功能设计上也合情合理。
– 在上图2界面,点击某个待数字的定位图标,即可查看这里的帖子,如图3所示。点击背景区域即可回到图2。
– 当我不在这个格子时,发帖、互动是不允许的(我自己发的帖子除外),如图4、5 。当我点击发帖图标、或者帖子右侧的“顶”或“踩”的投票按钮时,会在界面顶部提示我无法操作、以及原因。
– 帖子列表,文字摘要最多为3行,超过时末尾用…提示;有配图时,图片显示在左侧、文字显示在右侧。有个小细节是,评论数、浏览数那一行信息是与帖子的文字内容对齐的这样的排版方式不错,避免了在有配图但文字内容较少时出现两行左右的留白。

3)发帖子

配图

界面布局和交互操作:
– 进入上图1界面时,光标默认置入文本输入框,提示用户“和周围的人分享些什么吧”。“临时昵称”较为弱化的放在文本框下方,相机图标用较为明显的绿色放在右上角,有吸引力、排版方式也不错。
– 输入临时昵称时,如果文字过多,输入框会适当变宽后固定,如果文字删减变少,输入框又回到初始宽度。
– 在功能分析时提到GeGe发帖时只支持拍照、不支持从相册选择图片,所以点击图1、2中的相机图标,会直接进入相机界面。用户拍摄的照片无需进行剪裁处理,直接将图片信息代入图发帖界面,如图4。
– 在图4中,点击图片上的“X”图标可直接删除此图片;如果点击图片上的其他位置,则进入图5所示的界面,通过左右滑动来切换滤镜,这个操作方式较为隐蔽。用户看到图片上有删除图标,一般不会去点击,除非误操作、或摸索用法。目前图片社交的做法通常是选择了照片、再通过滤镜处理图片,最后显示在发表界面。GeGe目前将滤镜功能弱化处理,是因为滤镜功能不那么重要,抑或是滤镜效果还不够好?
– 在图4中,如果已经有了一张图片,当用户再点击拍照时,新照片会替换掉旧照片。
– 发表以后的效果如图6所示,图片没能及时显示出来。

4)重命名格子

配图

界面布局和交互操作:
– 在上图1中,点击“更多”三点图标,显示如图2中的操作。点击“重新命名这个格子”,则隐藏操作按钮选择弹窗,显示重命名的弹窗,如图3 。
– 目前世界格子视图上,虽然有些格子仍旧是用经纬度表示,但不少位置式用 A地方 至 B地方、A及附近等表示。我还比较好奇这些名称时如何大批量更新的。

5)二维码分享

配图

界面布局和交互操作:
– 在图2界面,点击“二维码分享”进入图3界面,从界面上可以看到带有GeGe水印的二维码、底部显示了几个平台的分享入口。当点击界面时,显示图4所示的弹窗,用户可关闭此界面,也可保存图片。
– 保存的图片、分享到社交平台的图片均如图5所示,533px的宽和高的尺寸。

3、帖子详情页

配图

界面布局和交互操作:
– 图1、4分别是无配图的帖子、有配图的帖子。两个界面的区别是图4默认真是用户的配图,从顶部的页面指示器可以看到,左滑可以查看地图,点击配图或地图均可进入图5所示的界面,即全屏查看用户的配图。
– 在地图上通过光晕来标出发帖时大致位置。
– 从图1、4的蓝色、红色就可以看出它们分别是我在的格子、我不在的格子中的帖子。所以图1,界面底部提示“写评论”,图4则提示“不能评论”。注意,我自己发的帖子,不管我是否在格子里,都是可以写评论、互动的。
– 对比图1、3、4中的投票按钮,其中1、3是我顶过的帖子,用蓝色表示,没有操作过的按钮用灰色表示。

4、世界格子视图

配图

界面布局和交互操作:
– 从图1可以看到,每个格子都有图标对应。最下面蓝色定位的是“当前区块”,对应图2;红色光晕图标是“热门格子漫游”,对应图5;深圳大学时我收藏的格子,对应的是界面4 。不过,如果不是仔细对比,很难发现每个格子上的色块图标表示的意思。
– 对特定场所的格子,会有特别的标示,比如图4的学校、图5的草莓音乐节。
– 图3是加载中的格子,用灰色的三条横线表示暂时未加载出来。这一点在GeGe上应用挺频繁,比如查看我的发帖时,如果内容为空,同样用灰色的三条横线表示。
– 用户手势滑动浏览世界格子时,会显示当前所在的省份、城市、区,如图3、5 。
– 格子中有、无帖子的文案时不同的,有帖子时提示文案是“这个格子已经有 XX 条帖子被发布了,快来看看吧”;无帖子时提示文案是“这是个孤独的区块,快来成为第一个殖民者吧”。

5、通知、我的帖子、设置中心

配图

界面布局和交互操作:
– 通过手势左右滑动或点击对应的Tab,可以在三个模块之前切换。
– 通知,默认显示,大概是因为这个功能可以加强用户之间的互动交流,相比其他两个模块更为重要。
– 如图2、3,我的帖子界面,同样可以用左右滑动手势在我的帖子、参与的帖子之前切换。界面顶部显示我的积分,大概是因为积分与发帖数量、参与热度有关?当用户滑动查看更多帖子时,我的帖子、参与的帖子Tab固定在顶部。

6、扫描二维码

配图

界面布局和交互操作:
– 入口在如图1的设置中心
– 使用时需获取访问照片的权限,有权限时直接进入图3所示的界面。可以直接扫描二维码,也可以点击右下角的图片进入本地相册,选择带有GeGe二维码的图片,即可立即进入该格子的详情页。
– 如果我选择一个不带有GeGe二维码的图片,该图片会被半透明的背景蒙住,同时在中间显示一个“X”图标。
– GeGe进入相册界面后,如果我的相册又有了新的照片,这里不能实时显示出来,只能从相册返回再进入才显示最新的照片。
– 对比上图的几个界面,发现文案没有统一,有的是二维码、有的是邀请码。

7、一致性

配图

设计亮点:
– 图1是我浏览界面时,收到的通知,提醒我有人踩了我的帖子,可选择忽略也可点击进入帖子详情页查看;图2、3均是我操作后的反馈。虽然是不同类别的提醒,但是通过一致的方式来显示,个人觉得挺不错。
– 在GeGe这款App中,加载最新的帖子等等都是采用图4所示的加载方式、图标也统一采用GeGe的logo 。

8、手势操作、动效的使用

配图

GeGe使用的动效非常丰富,比如:
– 格子详情页、帖子详情页几种视图的切换效果。
– 上图中,从帖子详情页回到格子详情页时,手势左滑如图2,帖子详情页会自动下落直至消失,末尾还有一个微小的跳动
– 在世界格子视图,界面底部左右两个图标,点击之后图标隐藏和显示时的动效非常丰富。
这些动效的使用,确实让整个设计动感很多,也能够提升操作的愉悦感。

四、总结

相比以往的匿名社交,GeGe特别的不仅仅是产品机制,设计上也非常亮眼——不常见却好用的设计模式、丰富的动效、细腻的视觉效果,值得好好把玩的一款App。

欢迎关注我的微信公众号:青溪札记(qingxizhaji)
一枚交互设计师,正在这里分享产品体验记录、交互设计思考心得、阅读笔记、生活乱弹。

二维码

作者:青溪·札记
关注 产品设计、知识管理、阅读
原文地址:【产品体验】GeGe,格子世界里的匿名社交, 感谢原作者分享。

发表评论