关于APP社区模块的UI设计思考

最近啊，接到新的APP需求设计，是关于社区模块的UI设计；之前一直做消费APP，第一次接触社交性质的需求，赶紧去研究一下市面上活跃度很高的几款社交APP，分析一下他们的设计风格，臆想一下他们的设计理念。微信朋友圈、QQ空间、微博、脉脉、站酷等都是用户量很大的强社交APP，他们对于信息的呈现形式大同而小异。

微信最近的这次改编一开始也是让很多人感到不适，通过增大字重、增大留白、更加扁平化，一改之前老气呆板（过时）的设计，终于抓住了2018年流行设计风格的小尾巴，整个产品变得年轻大气了。

根据TX的产品用户调研，微信用户的年龄层次要比QQ用户大不少，这次的改版也是希望能通过年轻简洁的设计风格吸引更多年轻的用户（纯属意淫）。

微博也做了一次小的改版，把微博的发布功能移到了右上角；难道是考虑到了朋友圈右上角的发布功能已经培养了用户的使用习惯？我想只有拥有大量忠实用户的产品才敢这样改吧！

回到正题，作为社交APP的代表作品，朋友圈和微博的设计方式给很多想要做社交的APP提供的极有价值的参考。社交APP的内容产生形式是用户产生内容即UGC，用户产生内容有一个很重要的点是我们需要注意的，那就是内容的不可控；当然我们能通过大数据的形式过滤掉违反规则的内容，但是内容的质量没法控制，所以怎么来设计才能保证界面的美观性和易读性，是我们需要考虑的。

来分析一下社交APP的结构

1.首先它是Feed流形式，通过Feed流可以让用户不停的刷信息，从而留住用户更多的时间。

在仔细研究你会发现越来越多的APP都有Feed流，而且它们的布局也不相同。如果你没有对其有深入研究，

你根本不知道遇到这种页面该如何设计。

2.一条信息的组成元素：头像+昵称（名称）+文本+图片+时间+社交三大件（点赞/分享/评论）

这里面每个元素都可以拿来作为单独一个章节去解读分析，比如头像的方圆、时间的样式、图片的布局等。

3.每条信息以分割线或者分隔条区分。

社交APP信息组成元素分析之-头像的方圆

我接手产品UI设计前，头像的上传功能是直接把图片切成圆形保存在数据库；头像显示成圆形是没问题的，但是如果在其他地方如果也需要这个头像的话，它的扩展性就局限了；所以我把头像的上传功能改成裁剪成方形保存，在不同的页面灵活调用。

头像显示成方形还是圆形，其实没有严格的规定，除了微信用圆角矩形，其他大部分APP都是用的圆形，那么为什么大家都喜欢用圆形头像呢？因为人的头是圆的呗~~

其实可以从下面几个方面来考虑

1.考虑到页面整体元素的布局，上面我们分析过一条信息的构成元素：头像+昵称（名称）+文本+图片+时间+社交三大件（点赞/分享/评论）；大家可以看到一条信息中有两种类型的图片：头像和文章配图，文章配图大部分都是矩形的样式，那么为了区分两种图片的不同作用，把头像设计成圆形，能够快速地和文章配图区分开来。

2.考虑视觉感受，圆形更加柔和、焦点更集中、信息传递更简洁，不刻意强调又能直观的让人认出是头像；方形的视觉中心比较分散，承载的信息更多，适合做图片展示。

3.从体量上看，相同直径的圆形看起来比方形要小，把头像设计成圆形不经意间弱化了头像给人的视觉冲击，不会抢主体的风头，毕竟信息的展示不是以头像为主。

4.从产品的定位上讲，源于一个公司的设计师对产品的理解和企业文化的把控，老板就喜欢方形的，企业的基因里面崇尚方形，那么设计成方形反而符合公司的形象或者产品想要传达的理念。

以上纯属个人观点，不论正确与否，请尽情拍砖。

社交APP信息组成元素分析之-时间的样式：时间差

动态讲究的是一个“活”字，时间的即时性很重要，而时间的精确性对于动态而言没有那么重要，以时间差的形式显示时间，给人一种时间的流逝感，它是有生命的、是活的，而不是冰冷的静态的展示时间戳。

以时间差的形式展示时间，即用当前时间减去发布时间；格式：刚刚、xx分钟前、xx小时前、xx天前。

当时间的即时性和时间的长度相比，又会产生矛盾，如果把去年的动态也显示成XX天前，就不能直观的看出动态的时间；所以要约定一个规则，在一个时间段内以时间差的形式展示，超过了这个时间段以其他的形式展示。

微信朋友圈的时间格式是：

刚刚–1分钟以内

xx分钟前–≥1分钟 ＜60分钟

xx小时前–≥1小时 ＜24小时

昨天—≥24小时 ＜48小时

xx天前–≥2天