移动端UGC产品的内容发布入口应该怎么设计?

产品设计的基本原则:对产品业务最重要的操作按钮必须放在最顺手且最显眼的位置

写在前面

UGC=User generate content,即我们平时说的用户产生内容,指的是一个产品平台内的主要内容是由平台内自己的用户创建、上传的,而且内容的交互(赞阅踩评享藏等)也是由用户来完成,是移动互联网领域一个非常常见的形态,比如知乎、微博等等,我们现在正在看的简书亦然。

对于UGC产品来说,最重要的业务必定是【用户发布内容】,一个健康的UGC平台下,应该有着一群用户每天都在稳定地输出、更新内容。那么这样一个重要的操作应该如何设计?本文将罗列市面上比较主流和不那么主流的几种发布入口的设计,供大家参考。

一、驼峰式

这一种是市面上最常见的样式,我们常用的今日头条和简书就是采用这种样式。

今日头条的驼峰式发布入口
简书的驼峰式发布入口

此种设计通常把【新增内容】的入口居中在底部的TAB栏,用户可以很方便的用单手点击触发。之所以叫做驼峰式,是因为很多时候这个按钮会被UI设计师做的比较大,而且通常比TAB栏稍微突出一点,在视觉效果上就像一段凸起的弧形,看起来跟骆驼的驼峰一样。

如果是平台内存在多种形态的内容,比如有图文、单图、视频等等,通常点击【新增】按钮之后会有一个交互界面,让用户选择要发布的类型,同时向系统申请软硬件访问权限(视内容形态不同,一般会有相册、麦克风、摄像头、地理位置等等)。

二 、置顶式

这也是一种比较常见的设计,会把发布入口放在顶部导航栏的左边或者右边,之所以这么做,是因为这些产品有着其独特的业务侧重点。

以【下厨房】为例,它的发布入口放在了顶部的左上角:

下厨房的发布入口放在了左上角

那我们再看看他的底部TAB栏:

下厨房的底部TAB栏

我们可以通过这个TAB栏的设计来反推这款app的侧重点

  • 【下厨房】:是这款应用的首页位置,为用户提供内容浏览以及一些主要栏目的入口,与其他常规app一样,放在了最左边;

  • 【市集】:这个板块,如果我没记错的话,在早期的版本是没有的,那时候依稀还记得这个app的发布入口也是采用驼峰式布局,加入了这个业务之后,产品经理就把发布入口挪到现在的左上角了。这个业务是下厨房实现必要的商业尝试的重要一环,所以底部栏这个重要的流量入口也有它一份;

  • 【收藏】:作为一款菜谱工具类app,收藏菜谱绝对是最高频的用户操作,,因此把它放在中心位置,妥妥的没毛病;

  • 【信箱】:个人消息的集合,中规中矩放在右侧第二个;

  • 【我】:个人中心业务的入口,与其他App一样,放在最右边。

当然以上只是个人的一点马后炮,至于下厨房家的PM是否是这么个想法, 我们不得而知,(逃)

所以使用置顶式的原因之一,可能是侧重的业务有多个,而发布按钮作为要突出的一个,不再适合放置于底部TAB栏,应该单独提出来

我们再来看看另外一款采用置顶式设计的UGC产品:小红书

小红书的版面布局

我们首先很容易就发现了他的发布入口被放置在右上角,用一个相机的小icon来表示--因为这是个以照片为基础的UGC分享社区。

然后我们也可以发现,这款app与其他的UGC产品不一样,它的底部没有常规的TAB栏,取而代之的是左右两个角落的浮窗,分别是消息中心与购物车的入口。由于没有底部tab栏来承载,而发布入口是一个必须放置在首页显眼位置的业务,于是出现在顶部也是顺理成章的事情。

所以采用置顶式设计的另一个原因,可能是这款产品走精简风,并没有设置传统的底部TAB栏

小红书是一款主打[小而美]格调的产品,它的很多UI语言散发出一种独特的的风格,以及动态交互都是很有个性的,有兴趣的同学可以下载一个体验一波。(小红书快给我广告费)

三 、浮窗式

这是一个比较少见到的样式(其实老外的一些产品上面倒是蛮多机会见到的)。

在这种设计上,发布入口一般会以浮窗的形式出现在内容list页的右下角,用户在浏览内容的时候,可以很容易地用单手进行发布内容的操作。

但是这种样式不会直接放置在app首页的入口,而是一般会出现在UGC产品的某个专题活动的内页,用户可以在浏览该专题的同时,快速参与。

网易家的Lofter是其中一个例子,它的首页是使用的典型的驼峰式入口:

Lofter首页采用了驼峰式设计,中间的圆形是发布作品的入口

然后我们点击进入它的某个摄影专题,比如下方的[胶片],它又使用了浮窗式的设计:

LOFTER的专题页,发布按钮放置在右侧

Lofter是一款面向摄影爱好者的UCG平台,它里面提供了很多不同的摄影专题,那么在这些专题页中,需要突出的元素肯定是其他用户往这个专题投稿的内容,因此这些内容的展示,不应该被其他元素(如导航栏,其他栏目的入口等),但是又要提供一个快速参与的入口,所以采用小浮窗的形式,既不阻挡整体画面的展示,也可以让用户快速参与到话题。

四 、其他非主流打法

1. 双入口式

顾名思义,这种样式在一个页面上有两个发布入口,通常一个为主--承担大部分内容的发布,一个为辅--只发布某种特定类型的内容。

新浪微博就采用了这样的设计,它在顶部的左侧,加入了一个快速发布短视频内容的入口,然后在底部的TAB栏,有着另一个发布入口,承担了微博平台内主要的内容的发布,包括了图文/视频/直播等等(讲道理新浪微博已经越来越像一个大杂烩了)

新浪微博的双入口设计

其实微博这个左上角的视频发布,是模仿了Facebook前两个版本更新之后带来的新特性-视频滤镜,而且连第一次进入这个功能的引导界面都是一毛一样,但是微博的业务太繁杂了,既有图文微博,又有视频,还有直播,问答等等,总共16个类目之多,所以并不能像FB那样做成简洁的样式,反而有种不伦不类的感觉。这里给新浪微博一个呵呵。

FB点击左上角的相机按钮之后,进入内容发布的界面, 可以很方便的通过左右滑动的方式选择要发布的内容

同时这个故事告诉我们,产品经理不是不可以模(chao)仿(xi)别家的产品,但是一定要跟自家的产品业务相结合,不然就有种东施效颦的味道了。

2. 隐藏式

正如本人开头所说,一个UGC平台的健康运营,很依赖于用户的日常上传新内容,所以会把内容发布放置在非常显眼而且容易操作的位置,但是也有一些UGC产品把内容的浏览视作最重要的业务,不允许有任何元素妨碍这个业务,因此其他业务,即使也是非常重要的业务吗,也要为此让步,被隐藏或者被放置到其他非首页的界面。

Pinterest就是这么一个例子,可能一些人会把它视作一个素材网站来看待,但是如果我们剖析它的根本业务,它其实是一个遵循着[用户上传内容--其他用户对内容进行交互]这么一个典型的UGC业务闭环,因此应该把它理解成一个UGC产品。

那我们可以看看它的发布入口,它被放置在个人中心的顶部右侧位置,而不是像其他app那样放置在首页:

Pinterest的发布入口被隐藏在个人中心

而它的首页,则更专注于素材(即UGC内容)的展示与交互上:

Pinterest的首页,更加专注于内容的展示,使用了瀑布流的样式,并且摒弃了一切会干扰到用户浏览素材的按钮

可以说Pinterest的这一做法是非常聪明的,虽然作为一款非常依赖用户上传内容的UGC产品,但是在移动端上,用户打开app的目的更多是为了浏览素材和寻找创意,而上传内容的操作,其实更加会集中在PC上的WEB页面,因此直接把发布内容的入口给隐藏,一来保持界面的简洁,二来不会影响用户浏览素材。

3. 野路子式

前面介绍了我们平时比较常用的样式,其实市面上的app千千万,有相当一部分并不采用这些样式。

比如微信,把发布朋友圈的路径设计的比较深,如果用户要发布一条朋友圈,那么通常路径是这样的:

打开app--点击[发现]--点击右上角的相机按钮

这样中间其实是多出来了一个步骤。至于为什么这么设计,大概是张小龙的[工匠精神]吧,笑。

当然还会有其他一些比较[不走寻常路]的应用,并不一定说哪种是最好的,只能说一款产品必然有着更适合自身业务的设计方式。

最后

移动互联网时代,UGC是一种很重要的产品形态,如果有留意相关数据报告的话,我们会发现这类产品的用户打开率和占据用户使用设备时长比例上都是最高的,在这种背景下,UGC产品的前景是非常的开阔的,而且有了用户使用基础,我们在进行商业变现尝试的时候也会更加的容易。所以研究UGC产品对于产品经理来说是非常有必要的。

希望此文对大家有帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容