产品设计的基本原则:对产品业务最重要的操作按钮必须放在最顺手且最显眼的位置
写在前面
UGC=User generate content,即我们平时说的用户产生内容,指的是一个产品平台内的主要内容是由平台内自己的用户创建、上传的,而且内容的交互(赞阅踩评享藏等)也是由用户来完成,是移动互联网领域一个非常常见的形态,比如知乎、微博等等,我们现在正在看的简书亦然。
对于UGC产品来说,最重要的业务必定是【用户发布内容】,一个健康的UGC平台下,应该有着一群用户每天都在稳定地输出、更新内容。那么这样一个重要的操作应该如何设计?本文将罗列市面上比较主流和不那么主流的几种发布入口的设计,供大家参考。
一、驼峰式
这一种是市面上最常见的样式,我们常用的今日头条和简书就是采用这种样式。
此种设计通常把【新增内容】的入口居中在底部的TAB栏,用户可以很方便的用单手点击触发。之所以叫做驼峰式,是因为很多时候这个按钮会被UI设计师做的比较大,而且通常比TAB栏稍微突出一点,在视觉效果上就像一段凸起的弧形,看起来跟骆驼的驼峰一样。
如果是平台内存在多种形态的内容,比如有图文、单图、视频等等,通常点击【新增】按钮之后会有一个交互界面,让用户选择要发布的类型,同时向系统申请软硬件访问权限(视内容形态不同,一般会有相册、麦克风、摄像头、地理位置等等)。
二 、置顶式
这也是一种比较常见的设计,会把发布入口放在顶部导航栏的左边或者右边,之所以这么做,是因为这些产品有着其独特的业务侧重点。
以【下厨房】为例,它的发布入口放在了顶部的左上角:
那我们再看看他的底部TAB栏:
我们可以通过这个TAB栏的设计来反推这款app的侧重点
【下厨房】:是这款应用的首页位置,为用户提供内容浏览以及一些主要栏目的入口,与其他常规app一样,放在了最左边;
【市集】:这个板块,如果我没记错的话,在早期的版本是没有的,那时候依稀还记得这个app的发布入口也是采用驼峰式布局,加入了这个业务之后,产品经理就把发布入口挪到现在的左上角了。这个业务是下厨房实现必要的商业尝试的重要一环,所以底部栏这个重要的流量入口也有它一份;
【收藏】:作为一款菜谱工具类app,收藏菜谱绝对是最高频的用户操作,,因此把它放在中心位置,妥妥的没毛病;
【信箱】:个人消息的集合,中规中矩放在右侧第二个;
【我】:个人中心业务的入口,与其他App一样,放在最右边。
当然以上只是个人的一点马后炮,至于下厨房家的PM是否是这么个想法, 我们不得而知,(逃)
所以使用置顶式的原因之一,可能是侧重的业务有多个,而发布按钮作为要突出的一个,不再适合放置于底部TAB栏,应该单独提出来
我们再来看看另外一款采用置顶式设计的UGC产品:小红书
我们首先很容易就发现了他的发布入口被放置在右上角,用一个相机的小icon来表示--因为这是个以照片为基础的UGC分享社区。
然后我们也可以发现,这款app与其他的UGC产品不一样,它的底部没有常规的TAB栏,取而代之的是左右两个角落的浮窗,分别是消息中心与购物车的入口。由于没有底部tab栏来承载,而发布入口是一个必须放置在首页显眼位置的业务,于是出现在顶部也是顺理成章的事情。
所以采用置顶式设计的另一个原因,可能是这款产品走精简风,并没有设置传统的底部TAB栏
小红书是一款主打[小而美]格调的产品,它的很多UI语言散发出一种独特的的风格,以及动态交互都是很有个性的,有兴趣的同学可以下载一个体验一波。(小红书快给我广告费)
三 、浮窗式
这是一个比较少见到的样式(其实老外的一些产品上面倒是蛮多机会见到的)。
在这种设计上,发布入口一般会以浮窗的形式出现在内容list页的右下角,用户在浏览内容的时候,可以很容易地用单手进行发布内容的操作。
但是这种样式不会直接放置在app首页的入口,而是一般会出现在UGC产品的某个专题活动的内页,用户可以在浏览该专题的同时,快速参与。
网易家的Lofter是其中一个例子,它的首页是使用的典型的驼峰式入口:
然后我们点击进入它的某个摄影专题,比如下方的[胶片],它又使用了浮窗式的设计:
Lofter是一款面向摄影爱好者的UCG平台,它里面提供了很多不同的摄影专题,那么在这些专题页中,需要突出的元素肯定是其他用户往这个专题投稿的内容,因此这些内容的展示,不应该被其他元素(如导航栏,其他栏目的入口等),但是又要提供一个快速参与的入口,所以采用小浮窗的形式,既不阻挡整体画面的展示,也可以让用户快速参与到话题。
四 、其他非主流打法
1. 双入口式
顾名思义,这种样式在一个页面上有两个发布入口,通常一个为主--承担大部分内容的发布,一个为辅--只发布某种特定类型的内容。
新浪微博就采用了这样的设计,它在顶部的左侧,加入了一个快速发布短视频内容的入口,然后在底部的TAB栏,有着另一个发布入口,承担了微博平台内主要的内容的发布,包括了图文/视频/直播等等(讲道理新浪微博已经越来越像一个大杂烩了)
其实微博这个左上角的视频发布,是模仿了Facebook前两个版本更新之后带来的新特性-视频滤镜,而且连第一次进入这个功能的引导界面都是一毛一样,但是微博的业务太繁杂了,既有图文微博,又有视频,还有直播,问答等等,总共16个类目之多,所以并不能像FB那样做成简洁的样式,反而有种不伦不类的感觉。这里给新浪微博一个呵呵。
同时这个故事告诉我们,产品经理不是不可以模(chao)仿(xi)别家的产品,但是一定要跟自家的产品业务相结合,不然就有种东施效颦的味道了。
2. 隐藏式
正如本人开头所说,一个UGC平台的健康运营,很依赖于用户的日常上传新内容,所以会把内容发布放置在非常显眼而且容易操作的位置,但是也有一些UGC产品把内容的浏览视作最重要的业务,不允许有任何元素妨碍这个业务,因此其他业务,即使也是非常重要的业务吗,也要为此让步,被隐藏或者被放置到其他非首页的界面。
Pinterest就是这么一个例子,可能一些人会把它视作一个素材网站来看待,但是如果我们剖析它的根本业务,它其实是一个遵循着[用户上传内容--其他用户对内容进行交互]这么一个典型的UGC业务闭环,因此应该把它理解成一个UGC产品。
那我们可以看看它的发布入口,它被放置在个人中心的顶部右侧位置,而不是像其他app那样放置在首页:
而它的首页,则更专注于素材(即UGC内容)的展示与交互上:
可以说Pinterest的这一做法是非常聪明的,虽然作为一款非常依赖用户上传内容的UGC产品,但是在移动端上,用户打开app的目的更多是为了浏览素材和寻找创意,而上传内容的操作,其实更加会集中在PC上的WEB页面,因此直接把发布内容的入口给隐藏,一来保持界面的简洁,二来不会影响用户浏览素材。
3. 野路子式
前面介绍了我们平时比较常用的样式,其实市面上的app千千万,有相当一部分并不采用这些样式。
比如微信,把发布朋友圈的路径设计的比较深,如果用户要发布一条朋友圈,那么通常路径是这样的:
打开app--点击[发现]--点击右上角的相机按钮
这样中间其实是多出来了一个步骤。至于为什么这么设计,大概是张小龙的[工匠精神]吧,笑。
当然还会有其他一些比较[不走寻常路]的应用,并不一定说哪种是最好的,只能说一款产品必然有着更适合自身业务的设计方式。
最后
移动互联网时代,UGC是一种很重要的产品形态,如果有留意相关数据报告的话,我们会发现这类产品的用户打开率和占据用户使用设备时长比例上都是最高的,在这种背景下,UGC产品的前景是非常的开阔的,而且有了用户使用基础,我们在进行商业变现尝试的时候也会更加的容易。所以研究UGC产品对于产品经理来说是非常有必要的。
希望此文对大家有帮助。