一、分析了哪些App

最近在做一个社交化导购 App Android MD 设计，Post 是其中重要的功能模块设计。在开始进行详细方案设计之前，我们快速做了Post功能模块的竞品设计分析，由于该产品定位是社交化导购类产品，考虑价值参考性，我们将竞品范围定义在关系内容类社交产品与社区化电商类产品，最终选择近30多个Android App。通过体验分析这30多个App，总结了一些基本的设计模式，作为设计资料库设计参考，在此分享给大家：

关系或内容社交类 App：

Facebook、Twitter、Instagram、Google 、Tumblr、Swarm、Pinterest、Path、Nice、微可拍、微博、微信。

社区电商类 App：

Wanelo、Fancy、The Hunt、Airbnb、小红书、美丽说、蘑菇街、豆瓣东西。

二、常见发布内容的类型

发布的类型很难定义，纬度太多，没有一致的划分标准。不同业务框架下，但也会呈现差异化的需求功能与设计方案。为了提炼出对我们价值的参考信息，我们抛开业务层，尝试解构发布的最小内容单元层，最终抽离出最小内容单元的设计模式。发布最小单元拆分为：图片、文字、视频、商品、标签、位置、人、链接、图片编辑（表情、贴纸、圈人、裁剪）、发布内容设置。

http://ww3/large/942b94fdjw1exwwbkl6nrj20sp0a4q42.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

三、发布的基础设计模式

发布的基础设计模式由两部分组成：一是最小内容发布单元的设计模式，比如图片设计模式，具体可能包含图片选择、图片编辑、图片编辑页面展示等；二是发布公共模块的设计模式，这一部分是所有发布设计共有的属性特征，比如发布入口的设计、提交发布后的状态设计、取消发布等。

发布入口设计模式

发布入口是指发布功能在 App 中的布点设计，作为一个功能性模块，发布的入口有6种常见设计模式：

以 FAB 按钮形式悬浮在页面中；

以TAB 工具栏形式固定展示页面底部；

展示在页面内容区域；

以操作按钮的形式展示在顶部 App Bar ；

展示在抽屉Nav Bar上;

在主导航采用底部 TAB 形式的App，发布入口展示在主导航TAB的中间位置。

以上6种设计模式适用不同的业务场景，它们有着各自不同的优劣势，具体需要结合业务来区分设计。

当一个App有多种类型的发布内容时，有2种设计模式，一是展开所有的发布类型入口，比如Twitter 所有发布类型都展示出来，点击发布文字即进入文字发布流程；二是默认隐藏所有的发布内容类型，点击展开所有的，比如Tumblr、Path。

不同页面的发布入口可能发布内容不同。一般发布入口只在特定页面展示，比如FAB模式的发布入口，在整个App中，有的页面需要展示，有的页面则隐藏，而不同页面下发布的内容项目也不一样，比如Google 的发布，当在某一小组中点击发布时，即发布范围是这个小组，而当在首页点击发布时，发布范围是整个App。

http://ww3/large/942b94fdjw1exwwd0e3evj20n20f8wj6.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

http://ww3/large/942b94fdjw1exwwdgdy0ij20my0exgpe.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

图片、视频设计模式

图片、视频设计模式主要包含：

1、选择图片视频，同时支持用户即时拍摄图片与视频；

2、选择完再进行编辑：滤镜、剪切等；

3、进入发布编辑页面，有些App 在发布编辑支持用户继续添加照片与编辑照片。

第一步选择图片视频有2种设计模式：一是直接展示所有相册的图片；二是展示一个默认相册的图片，支持用户筛选不同相册，在当前页面下拉列表的形式，或者通过一个新的相册列表页面。拍摄照片视频也有2种设计模式：一是展示在页面内容中；二是以工具栏的形式展现在底部或App Bar上。

http://ww4/large/942b94fdjw1exwwe0fm5jj20mz0fodl3.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

第二步编辑图片有2种设计模式：一是对于图片社交类应用来说，用户选择完图片即进入编辑图片，比如滤镜、剪切、贴纸、标签等；二是对一些对图片编辑优先级不高的应用，用户选择完图片即进入内容编辑页面，支持用户在内容编辑页面点击图片进入编辑，编辑图片多用iCon形式展示在图片上提示用户，或者什么都不展示，用户点击图片即进入图片的编辑页面。

第三步在内容编辑页面添加选择图片与编辑图片，选择添加图片2种做法：一是在页面图片附近位置增加添加入口；二是以工具栏的形式展示添加图片入口。

图片在内容编辑页面的展示有3种设计模式：一是小缩略图形式，比如微信；二是左右横向铺开展示，支持用户左右滑动，比如Google ；三是垂直方向铺开展示，比如Facebook。

http://ww3/large/942b94fdjw1exwweeuwulj20n60ge77u.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />文字编辑设计模式

文字编辑没什么特别要说的。一般文字编辑都有文案提示，点击输入吊键盘提示文案消失，具体文案如发表一下评价、写点内容吧、添加照片说明等。

http://ww2/large/942b94fdjw1exwwepaah5j20sx088jsh.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />商品设计模式

商品发布是电商垂直类一种内容发布，基于不同业务有三种类型：

1、通过链接获取相关信息发布商品；

2、在内容发布中选择关联商品；

3、用户自行填写商品信息再发布。

通过链接获取发布商品的设计模式：

1、引导用户复制粘贴链接；

2、加载获取商品相关信息；

3、编辑商品发布相关信息；

4、发布商品，典型代表是豆瓣东西。

http://ww2/large/942b94fdjw1exwwf453j7j20sv0gugo5.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

在内容发布中选择关联商品：1 、选择用户已有的商品，通过账号关联用户的商品，比如用户已发布、收藏、购买的商品；2、复制链接获取商品信息，典型代表有The Hunt。

http://ww3/large/942b94fdjw1exwwfdzgsqj20hx0f40tl.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

通过用户自行填写的商品信息并发布商品，多见于电商类卖家发布商品，这里不展开说明。

位置设计模式

位置很少作为一个独立的发布内容，它常作为发布内容的一个子项，点击行动点自动获取发布者当前的位置，为用户提供一个可选择的列表，用户选择一个位置后即回到发布内容编辑页面。

http://ww1/large/942b94fdgw1exwwjtvv30j20mt0fhn0n.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

标签设计模式

标签有两种类型，一是Hashtag，在用户输入文字的前增加＃即可，没什么要特别说的；二是对整体发布内容的Tag。

整体内容Tag有两种设计模式：一是在编辑内容页面增加tag字段，二是为了强调Tag，在发布流程中前置或后置tag字段，甚至tag是必填项。

http://ww3/large/942b94fdjw1exwwg7piljj20fl0fp75m.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

贴纸、表情、圈人、滤镜、截图等图片编辑设计模式

这几种内容多用于社交类图片分享应用，比如Facebook/Instagram/Nice等，常见的设计模式有2种：

1、前置设计模式，即选择完图片后就进行图片编辑，一般功能模块以工具栏形式展示在底部，用户点击选择某一功能即可编辑图片。代表有Instagram、Nice。部分应用在内容编辑页面支持用户点击图片重新编辑，或者点击左上角的返回。

http://ww2/large/942b94fdjw1exwwgk70klj20jg0gnjvk.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

2、后置模式，即选择完图片后进行内容编辑页面，若用户想要编辑图片，可以在内容的编辑页面点击图片，一般图片的编辑行动点显示在图片上，用户点击图片即进入编辑页面，代表有Facebook。

http://ww4/large/942b94fdgw1exwwgxo9thj20ji0gracs.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

分组、范围、第三方分享等发布内容设置设计模式

分组、范围、第三方分享多是内容设置非必填内容，有两种设计模式：一是直接展示在页面内；二是展示在顶部或底部的Bar；不同的内容可能会包含一系列操作及附属内容，这里不再说明。

http://ww2/large/942b94fdgw1exwwh74ir5j20n80fidi6.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />

触发放弃发布设计模式

在内容编辑页面，点击左上角的行动点，有3种设计模式：1、返回至上一个层级；2、直接放弃发布，退出发布模式并至正常页面；3、弹出Alert让用户确认是否退出发布模式。

触发提交发布设计模式

触发提交发布设计模式有3种：

1、返回Home 页面展示发布过程状态，同时提交发布的内容被遮罩，发布成功后正常展示内容，发布失败用户可点击重试或删除，代表有Facebook/Nice/Twitter/Instagram。

http://ww4/large/942b94fdgw1exwwho31roj20pz0fb77l.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />2、在内容编辑页面遮罩一个层提示发布上传，上传成功展示发布内容的详情，上传失败提示用户，用户可以重新提交上传或者放弃，代表有Fancy/The Hunt。

http://ww3/large/942b94fdjw1exwwitpbi1j20hd0f43zz.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />3、在内容编辑页面遮罩一个层提示发布上传，上传成功返回至之前点击发布的入口页面，即从哪儿来再回到哪儿去。代表有Google  /Medium。

http://ww3/large/942b94fdjw1exwwijp5ehj20hc0f0wg6.jpgApp Post 设计的" TITLE="大厂都是怎么做 App Post 设计的" />