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

微信最近的這次改編一開(kāi)始也是讓很多人感到不適，通過(guò)增大字重、增大留白、更加扁平化，一改之前老氣呆板（過(guò)時(shí)）的設(shè)計(jì)，終于抓住了2018年流行設(shè)計(jì)風(fēng)格的小尾巴，整個(gè)產(chǎn)品變得年輕大氣了。

根據(jù)TX的產(chǎn)品用戶調(diào)研，微信用戶的年齡層次要比QQ用戶大不少，這次的改版也是希望能通過(guò)年輕簡(jiǎn)潔的設(shè)計(jì)風(fēng)格吸引更多年輕的用戶（純屬意淫）。

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

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

來(lái)分析一下社交APP的結(jié)構(gòu)

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

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

你根本不知道遇到這種頁(yè)面該如何設(shè)計(jì)。

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

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

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

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

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

頭像顯示成方形還是圓形，其實(shí)沒(méi)有嚴(yán)格的規(guī)定，除了微信用圓角矩形，其他大部分APP都是用的圓形，那么為什么大家都喜歡用圓形頭像呢？因?yàn)槿说念^是圓的唄~~

其實(shí)可以從下面幾個(gè)方面來(lái)考慮

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

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

3.從體量上看，相同直徑的圓形看起來(lái)比方形要小，把頭像設(shè)計(jì)成圓形不經(jīng)意間弱化了頭像給人的視覺(jué)沖擊，不會(huì)搶主體的風(fēng)頭，畢竟信息的展示不是以頭像為主。

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

以上純屬個(gè)人觀點(diǎn)，不論正確與否，請(qǐng)盡情拍磚。

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

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

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

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

微信朋友圈的時(shí)間格式是：

剛剛–1分鐘以內(nèi)

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

xx小時(shí)前–≥1小時(shí) ＜24小時(shí)

昨天—≥24小時(shí) ＜48小時(shí)

xx天前–≥2天

微博（關(guān)注）的時(shí)間格式是：

剛剛–1分鐘以內(nèi)

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

xx小時(shí)前–≥1小時(shí) ＜24小時(shí)

昨天 HH:mm–≥24小時(shí) ＜48小時(shí)

MM-dd HH:mm–≥2天

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

站酷動(dòng)態(tài)的時(shí)間格式是：

剛剛–1分鐘以內(nèi)

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

xx小時(shí)前–≥1小時(shí) ＜24小時(shí)

xx天前–≥1天

站酷生活圈的時(shí)間格式是：

剛剛–1分鐘以內(nèi)

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

xx小時(shí)前–≥1小時(shí) ＜24小時(shí)

1天前–≥24小時(shí) ＜48小時(shí)

yyyy-MM-dd–≥2天

QQ空間的時(shí)間格式是：

今天 HH:mm–當(dāng)天

昨天 HH:mm—隔天

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

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

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

拋開(kāi)產(chǎn)品類(lèi)型，單從圖片的排版來(lái)說(shuō)，圖片的布局包括：拼圖式布局、瀑布流式布局、宮格式布局。

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

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

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

細(xì)心的同學(xué)可以發(fā)現(xiàn)，當(dāng)發(fā)布的圖片不是9張的時(shí)候，每個(gè)APP有各自的布局規(guī)則，那么這樣的規(guī)則是怎樣的呢？大家可以去閱讀以下這篇文章，對(duì)于圖片在APP中的布局寫(xiě)的很詳細(xì)：

你不知道的社交Feed流圖片布局

因?yàn)閰⑴c了相關(guān)的項(xiàng)目設(shè)計(jì)工作，所以有了以上個(gè)人的一點(diǎn)不成系統(tǒng)的小總結(jié)，很多結(jié)論或者觀點(diǎn)都是通過(guò)去下載相關(guān)的APP來(lái)自身演示得出的，并不代表APP的設(shè)計(jì)者就是這樣設(shè)計(jì)的，所以以上的觀點(diǎn)只是作為自己在設(shè)計(jì)過(guò)程中的一些理論依據(jù)；很多時(shí)候我們?cè)谠O(shè)計(jì)新領(lǐng)域的功能模塊時(shí)，不知道怎么著手開(kāi)始；在自身知識(shí)儲(chǔ)備不足的時(shí)候，親身去體驗(yàn)相關(guān)的產(chǎn)品就會(huì)成為我們獲取經(jīng)驗(yàn)、提升自己的一個(gè)有效途徑，幫助我們?nèi)グl(fā)現(xiàn)、去創(chuàng)新。

我在實(shí)際項(xiàng)目的設(shè)計(jì)過(guò)程中也遵循了這種宮格式的布局規(guī)則，有興趣的同學(xué)可以繼續(xù)往下閱讀。

項(xiàng)目已經(jīng)進(jìn)入開(kāi)發(fā)階段，借此機(jī)會(huì)，我又根據(jù)高保真設(shè)計(jì)稿調(diào)整了一遍UI設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范就是這樣通過(guò)一邊設(shè)計(jì)一調(diào)整而來(lái)，有興趣想要瞧瞧的可以點(diǎn)擊以下鏈接：https://www.sanquaner.com/610.html ；另外我把項(xiàng)目的重要模塊提煉出來(lái)，做成了工具包，方便以后在設(shè)計(jì)的時(shí)候隨時(shí)取用；下面也放出PSD源文件，有需要的同學(xué)可以下載。

APP UIkit PSD下載