在這個(gè)信息內(nèi)容至上的年代，產(chǎn)品除了讓用戶更高效地獲取所需內(nèi)容，還要為用戶生產(chǎn)更多的價(jià)值。

1. 項(xiàng)目背景

同城部落作為58同城平臺(tái)全新功能模塊之一，有著平臺(tái)用戶需求目標(biāo)性強(qiáng)且具有群體性的特征，它是將相同興趣、目的和地理位置的用戶聚集到一起形成的交流平臺(tái)，用戶可以在這里更容易找到共同目標(biāo)，促進(jìn)用戶之間的交流與溝通，從而撮合用戶的共有需求，在用戶的溝通過(guò)程中通過(guò)明確主題與形式的引導(dǎo)，產(chǎn)生有價(jià)值的內(nèi)容來(lái)輔助用戶決策，增加用戶粘性，并逐漸形成用戶層級(jí)及更立體的用戶。對(duì)于一個(gè)社區(qū)，這是一個(gè)很重要的前提，意味著這個(gè)平臺(tái)能給對(duì)某類事情感興趣的人找到一個(gè)有價(jià)值的交流場(chǎng)所。

同城部落目前涵蓋了招聘和房產(chǎn)兩個(gè)業(yè)務(wù)功能，同時(shí)由此又發(fā)散出一些強(qiáng)相關(guān)的不同主題和內(nèi)容， 包括話題、討論、發(fā)布等用戶進(jìn)行社交的功能。

2. 設(shè)計(jì)思路

2.1 設(shè)計(jì)思維解密

在設(shè)計(jì)初期，首先需要用系統(tǒng)性設(shè)計(jì)思維去思考，這個(gè)方法分為業(yè)務(wù)、體驗(yàn)和品牌三個(gè)方向，同時(shí)也是設(shè)計(jì)中比較容易有所突破的地方，它強(qiáng)調(diào)從整體出發(fā)，先綜合，后分析，再綜合的思維模式。

因?yàn)橥遣柯涞闹饕肟谠谑醉?yè)腰部位置，而在首頁(yè)的頭部已經(jīng)有比較強(qiáng)的品牌露出的展示——10個(gè)入口圖標(biāo)，所以在這個(gè)項(xiàng)目中更多的是需要思考業(yè)務(wù)和體驗(yàn)兩個(gè)方向，通過(guò)這兩個(gè)方向來(lái)尋求設(shè)計(jì)上的一些突破點(diǎn)。

2.2 用戶需求分析

58同城部落的目標(biāo)用戶年齡集中在19-30歲，并且以藍(lán)領(lǐng)階層為主，占整個(gè)年齡段的近八成。而這個(gè)年齡段的人群面臨著剛畢業(yè)需要找工作，或者是去外地打工，需要租房，由于身處異地社交圈窄，迫切需要穩(wěn)定生活、交友等等，因此我們得出了以下關(guān)鍵詞：

通過(guò)把這些關(guān)鍵詞分為兩類，一個(gè)是對(duì)物質(zhì)追求上面的需求，另一個(gè)就是情感共鳴上的需求，由這兩個(gè)點(diǎn)依次細(xì)分為效率高、品類多、分類準(zhǔn)、互動(dòng)強(qiáng)，通過(guò)這四點(diǎn)分別對(duì)應(yīng)著設(shè)計(jì)目標(biāo)——提高設(shè)計(jì)一致性，提升體驗(yàn)與效率，以及增強(qiáng)頁(yè)面設(shè)計(jì)活力；產(chǎn)品目標(biāo)——促使人與人之間更快達(dá)成“交易”和豐富平臺(tái)內(nèi)容，提高留存率。

在入口頁(yè)增強(qiáng)了內(nèi)容的擴(kuò)展性和強(qiáng)化了入口分類，由于同城部落目前只涵蓋房產(chǎn)和招聘兩個(gè)內(nèi)容，在統(tǒng)一顏色背景上如何更好的區(qū)分不同屬性的內(nèi)容呢？就需要在內(nèi)容上做些區(qū)別，招聘是與人相關(guān)的，房產(chǎn)是與地理位置相關(guān)的，因此，分別用“頭像”和“坐標(biāo)”的圖形元素來(lái)表示跟人相關(guān)的招聘和跟地理位置相關(guān)的房產(chǎn)，讓用戶能第一時(shí)間感知并快速找到自己的需求目標(biāo)。

首先需要思考的是如何與整體58同城平臺(tái)的頁(yè)面相融合，并且頁(yè)面整體設(shè)計(jì)基調(diào)能保持一致，因此，在部落卡片顏色上舍棄了高亮與高飽和度的顏色，用淺灰色作為背景顏色，與整個(gè)頁(yè)面能更協(xié)調(diào)，并且能在視覺(jué)效果上突出上面圖標(biāo)入口內(nèi)容，從而產(chǎn)生自上而下的閱讀習(xí)慣，與下面其他模塊內(nèi)容也能相呼應(yīng)。

同時(shí)，在這兩種類型的圖標(biāo)顏色上延續(xù)了58Logo的四種品牌色——藍(lán)、紅、橘、綠，并對(duì)這四種顏色進(jìn)行輪換的形式。為了不使圖標(biāo)在整體頁(yè)面中顯得突兀，因此在品牌色基礎(chǔ)上適度降低了顏色飽和度，這樣就衍生出了8種不同組合狀態(tài)，并且與頂部輪播圖標(biāo)的顏色相呼應(yīng)，又能給用戶一種強(qiáng)感知的視覺(jué)體驗(yàn)。通過(guò)這種形式可以在同樣顏色背景上避免對(duì)不同內(nèi)容產(chǎn)生混淆，更容易讓用戶通過(guò)形狀來(lái)加深和鞏固記憶，更快速高效達(dá)到目標(biāo)。

2.3 詳情頁(yè)排版節(jié)奏把控

進(jìn)入詳情頁(yè)后，整個(gè)頁(yè)面分為上下兩個(gè)層級(jí)：分類信息區(qū)和信息內(nèi)容區(qū)。分類信息區(qū)是商圈名或具體職業(yè)信息的展示地方，并且也有著個(gè)人的一些操作內(nèi)容，如自己發(fā)布和回復(fù)的帖子入口、消息提醒以及切換商圈等；信息內(nèi)容區(qū)則是用戶積極討論的區(qū)域，由于信息量很大，如何更好的將信息歸納和分類成了這部分最關(guān)鍵的部分。

由于同城部落整體屬于社區(qū)性質(zhì)，文字信息較多，因此在字號(hào)上不能太小，以免對(duì)用戶造成識(shí)別干擾。在用戶討論上做了三個(gè)層次，首先為標(biāo)題，也是用戶最關(guān)心和最先看到的內(nèi)容，因此這部分文字內(nèi)容需要著重突出；第二則是正文內(nèi)容，屬于標(biāo)題的附屬信息，所以這部分需要稍弱化于標(biāo)題，但是也要在用戶可視范圍內(nèi)；第三則是輔助信息，包括用戶id、瀏覽歷史、時(shí)間、回貼量等，這部分是附帶信息，在用戶迫切想得到目標(biāo)信息時(shí)需要把這部分內(nèi)容做出退讓，由于這部分內(nèi)容不能進(jìn)行操作，所以需要弱化于標(biāo)題和正文信息。在這部分內(nèi)容之間會(huì)穿插些話題卡片，既能為產(chǎn)品導(dǎo)量，讓用戶對(duì)自己感興趣的話題有參與感，又能緩解信息過(guò)于密集的現(xiàn)狀，讓用戶在瀏覽信息期間能有節(jié)奏的閱讀，不會(huì)過(guò)于枯燥。

底部button用大圓角矩形代替以往拉通的長(zhǎng)方形形式，增加友好型，促使用戶點(diǎn)擊，并且由于長(zhǎng)期置底，在視覺(jué)層面上可以顯得更通透，并且對(duì)底部?jī)?nèi)容也不會(huì)全部遮擋。

3. 思考與總結(jié)

同城部落最終目標(biāo)是讓用戶在58除了找工作找房子之外，還希望通過(guò)它能拉近用戶之間的距離，讓用戶之間無(wú)縫聯(lián)系。在這個(gè)信息內(nèi)容至上的年代，通過(guò)此產(chǎn)品讓用戶更高效地獲取所需內(nèi)容，同時(shí)為用戶生產(chǎn)更多的價(jià)值。

作者：李穎菲，視覺(jué)設(shè)計(jì)師，愛(ài)好多肉的設(shè)計(jì)師一枚

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@李穎菲

題圖來(lái)自 Pexels，基于 CC0 協(xié)議