最近啊，接到新的APP需求設計，是關于社區(qū)模塊的UI設計；之前一直做消費APP，第一次接觸社交性質的需求，趕緊去研究一下市面上活躍度很高的幾款社交APP，分析一下他們的設計風格，臆想一下他們的設計理念。微信朋友圈、QQ空間、微博、脈脈、站酷等都是用戶量很大的強社交APP，他們對于信息的呈現(xiàn)形式大同而小異。

微信最近的這次改編一開始也是讓很多人感到不適，通過增大字重、增大留白、更加扁平化，一改之前老氣呆板（過時）的設計，終于抓住了2018年流行設計風格的小尾巴，整個產品變得年輕大氣了。

根據(jù)TX的產品用戶調研，微信用戶的年齡層次要比QQ用戶大不少，這次的改版也是希望能通過年輕簡潔的設計風格吸引更多年輕的用戶。

微博也做了一次小的改版，把微博的發(fā)布功能移到了右上角；難道是考慮到了朋友圈右上角的發(fā)布功能已經培養(yǎng)了用戶的使用習慣？我想只有擁有大量忠實用戶的產品才敢這樣改吧！

回到正題，作為社交APP的代表作品，朋友圈和微博的設計方式給很多想要做社交的APP提供的極有價值的參考。社交APP的內容產生形式是用戶產生內容即UGC，用戶產生內容有一個很重要的點是我們需要注意的，那就是內容的不可控；當然我們能通過大數(shù)據(jù)的形式過濾掉違反規(guī)則的內容，但是內容的質量沒法控制，所以怎么來設計才能保證界面的美觀性和易讀性，是我們需要考慮的。

來分析一下社交APP的結構

1.首先它是Feed流形式，通過Feed流可以讓用戶不停的刷信息，從而留住用戶更多的時間。

在仔細研究你會發(fā)現(xiàn)越來越多的APP都有Feed流，而且它們的布局也不相同。如果你沒有對其有深入研究，

你根本不知道遇到這種頁面該如何設計。

2.一條信息的組成元素：頭像+昵稱（名稱）+文本+圖片+時間+社交三大件（點贊/分享/評論）

這里面每個元素都可以拿來作為單獨一個章節(jié)去解讀分析，比如頭像的方圓、時間的樣式、圖片的布局等。

3.每條信息以分割線或者分隔條區(qū)分。

社交APP信息組成元素分析之-頭像的方圓

我接手產品UI設計前，頭像的上傳功能是直接把圖片切成圓形保存在數(shù)據(jù)庫；頭像顯示成圓形是沒問題的，但是如果在其他地方如果也需要這個頭像的話，它的擴展性就局限了；所以我把頭像的上傳功能改成裁剪成方形保存，在不同的頁面靈活調用。

頭像顯示成方形還是圓形，其實沒有嚴格的規(guī)定，除了微信用圓角矩形，其他大部分APP都是用的圓形，那么為什么大家都喜歡用圓形頭像呢？因為人的頭是圓的唄~~

其實可以從下面幾個方面來考慮

1.考慮到頁面整體元素的布局，上面我們分析過一條信息的構成元素：頭像+昵稱（名稱）+文本+圖片+時間+社交三大件（點贊/分享/評論）；大家可以看到一條信息中有兩種類型的圖片：頭像和文章配圖，文章配圖大部分都是矩形的樣式，那么為了區(qū)分兩種圖片的不同作用，把頭像設計成圓形，能夠快速地和文章配圖區(qū)分開來。

2.考慮視覺感受，圓形更加柔和、焦點更集中、信息傳遞更簡潔，不刻意強調又能直觀的讓人認出是頭像；方形的視覺中心比較分散，承載的信息更多，適合做圖片展示。

3.從體量上看，相同直徑的圓形看起來比方形要小，把頭像設計成圓形不經意間弱化了頭像給人的視覺沖擊，不會搶主體的風頭，畢竟信息的展示不是以頭像為主。

4.從產品的定位上講，源于一個公司的設計師對產品的理解和企業(yè)文化的把控，老板就喜歡方形的，企業(yè)的基因里面崇尚方形，那么設計成方形反而符合公司的形象或者產品想要傳達的理念。

社交APP信息組成元素分析之-時間的樣式：時間差

動態(tài)講究的是一個“活”字，時間的即時性很重要，而時間的精確性對于動態(tài)而言沒有那么重要，以時間差的形式顯示時間，給人一種時間的流逝感，它是有生命的、是活的，而不是冰冷的靜態(tài)的展示時間戳。

以時間差的形式展示時間，即用當前時間減去發(fā)布時間；格式：剛剛、xx分鐘前、xx小時前、xx天前。

當時間的即時性和時間的長度相比，又會產生矛盾，如果把去年的動態(tài)也顯示成XX天前，就不能直觀的看出動態(tài)的時間；所以要約定一個規(guī)則，在一個時間段內以時間差的形式展示，超過了這個時間段以其他的形式展示。

微信朋友圈的時間格式是：

剛剛–1分鐘以內

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

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

昨天—≥24小時 ＜48小時

xx天前–≥2天

微博（關注）的時間格式是：

剛剛–1分鐘以內

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

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

昨天 HH:mm–≥24小時 ＜48小時

MM-dd HH:mm–≥2天

yyyy-MM-dd HH:mm–＞1年

站酷動態(tài)的時間格式是：

剛剛–1分鐘以內

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

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

xx天前–≥1天

站酷生活圈的時間格式是：

剛剛–1分鐘以內

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

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

1天前–≥24小時 ＜48小時

yyyy-MM-dd–≥2天

QQ空間的時間格式是：

今天 HH:mm–當天

昨天 HH:mm—隔天

xx月xx日 HH:mm–兩天以后

通過幾個主流社交APP的動態(tài)列表截圖和提煉出來的時間格式可以看出，對于最新的（一天以內）動態(tài)時間顯示格式是一致的，這樣說明了動態(tài)的時效性能夠帶給用戶更強的互動性；超過一定時間段的信息時間格式表現(xiàn)出了差異化，這個可以根據(jù)自身產品的定位和運營策略靈活設置。

社交APP信息組成元素分析之-圖片的布局

拋開產品類型，單從圖片的排版來說，圖片的布局包括：拼圖式布局、瀑布流式布局、宮格式布局。

拼圖式布局：圖片的大小、格式不固定，可以根據(jù)圖片的質量或者想要傳達的主次進行個性化排版；給人的感覺就是簡潔清新好看，這樣的布局對圖片的質量要求很高，對用戶的審美要求也高，導致這種布局的APP的門檻比較高，一般是小眾的、專業(yè)的、個性的產品，或者是PGC（平臺/專家產生內容），而不是普通用戶產生內容；很顯然這種圖片的布局不適合社交APP，倒是很適合雜志APP或者攝影APP。

瀑布流式布局：非常適合圖片的展示，也特別符合沉浸式瀏覽方式，是網頁設計中比較流行的一種布局方式；如果應用在APP上，也只能在圖片分享平臺有展示的空間；所以也不適合社交類APP。

宮格式布局：最常見的就是九宮格布局，通過上面分析社交APP的元素構成，我們會發(fā)現(xiàn)九宮格布局是社交APP最常用的一種圖片布局方式。

原創(chuàng)：三圈兒哥