編輯導(dǎo)語：在產(chǎn)品的迭代升級(jí)過程中，改版升級(jí)是常常會(huì)遇到的問題。文章從58本地交友當(dāng)前存在的問題出發(fā)，對(duì)產(chǎn)品的升級(jí)改版進(jìn)行了詳細(xì)的梳理，并對(duì)遇到的一些問題進(jìn)行了分析總結(jié)，供大家參考學(xué)習(xí)。

01?前言

從探探、陌陌到風(fēng)頭正盛的soul，社交產(chǎn)品賽道的競(jìng)爭(zhēng)早已進(jìn)入白熱化階段。58本地版交友在尋找差異化路徑提升用戶粘性的同時(shí)，也期望借助58app的流量吸引更多年輕的用戶群體。基于這一訴求，我們對(duì)交友設(shè)計(jì)語言進(jìn)行了煥新升級(jí)，致力為用戶創(chuàng)造更好的體驗(yàn)。

02?定位與問題

1. 產(chǎn)品定位

58本地版交友是一款集陌生人社交、實(shí)時(shí)視頻相親、紅娘服務(wù)為一體的在線社交平臺(tái)。聚焦下沉市場(chǎng)，主要功能有：三方視頻聊天、文字匹配、紅娘月老牽線搭橋、PK對(duì)戰(zhàn)等。為用戶提供戀愛交友服務(wù)，尋求精神共鳴和交流。

2. 用戶定位

根據(jù)調(diào)研數(shù)據(jù)來看，我們的用戶群體男女比例為2:1,以男性受眾為主。其中18-25歲的用戶是我們主要目標(biāo)群體，其他年齡段分布較為均勻。

3. 現(xiàn)有問題

我們可以先看下目前線上的舊版頁面：

從以上頁面中，我們不難發(fā)現(xiàn)一些問題：

1. 本地版交友與58主品牌缺乏連續(xù)性，透?jìng)髁Φ?，自身定位不明?/li>
2. 基礎(chǔ)體驗(yàn)搭建不完善，部分頁面老舊，組件較為雜亂；
3. 內(nèi)容信息層級(jí)混亂，節(jié)奏弱，影響用戶轉(zhuǎn)化；
4. 視覺效果欠佳，顏色使用偏女性化，與用戶群體性別分布相悖。

基于以上問題，此次改版主要集中于優(yōu)化核心頁面：交友、相親、動(dòng)態(tài)、聊天、個(gè)人中心5大tab。

4. 方向與探索

由此我們對(duì)目標(biāo)進(jìn)行了細(xì)分：

1. 框架重構(gòu)：對(duì)首頁進(jìn)行分層布局，明確信息層級(jí)，聚焦內(nèi)容，提高核心模塊觸達(dá)率；
2. 視覺升級(jí)：與58app靠攏，提升基礎(chǔ)色彩的映射。統(tǒng)一圖標(biāo)樣式，優(yōu)化核心入口的視覺表現(xiàn)；
3. 基礎(chǔ)體驗(yàn)：提升通用組件覆蓋率，加強(qiáng)用戶對(duì)產(chǎn)品的信賴感及辨識(shí)度。

明確改版方向后，設(shè)計(jì)師們進(jìn)行了一輪情緒板收集，圍繞本地交友特點(diǎn)“真實(shí)、交友、陪伴”三個(gè)關(guān)鍵詞，分人物、事件場(chǎng)景、物品、樣式風(fēng)格、情感特點(diǎn)5個(gè)維度發(fā)散腦爆。跳脫出固有思維方式，從多個(gè)維度來幫助產(chǎn)品實(shí)現(xiàn)業(yè)務(wù)訴求。

最終選定了幾種偏向的風(fēng)格代入到我們核心理念中：弱化裝飾、去多色、輕擬物、熱鬧活潑、暖色、圓潤不幼稚、親和力、突出內(nèi)容照片動(dòng)態(tài)。

03?視覺升級(jí)

1. 首頁梳理

用戶直觀了解產(chǎn)品的第一步，我們需要兼顧用戶需求和產(chǎn)品運(yùn)營訴求進(jìn)行整體規(guī)劃，合理地運(yùn)用首屏空間，來保證用戶的使用效率。

2. 優(yōu)化頭部入口

頭部四大金剛?cè)肟趯?duì)于流量分發(fā)的價(jià)值不言而喻。舊版的頭部入口以大面積色塊所呈現(xiàn)，視覺沖擊雖強(qiáng)，但也影響著整個(gè)頁面的視覺風(fēng)格走向，易造成頭重腳輕的視覺感受。我們對(duì)頭部入口進(jìn)行了多風(fēng)格嘗試：

在眾方案中選擇了這套簡(jiǎn)潔的圖標(biāo)，采用大圓角，向左微微傾斜15度角增添一分趣味感。配色上與58app首頁金剛位風(fēng)格保持連續(xù)性的同時(shí)，建立更多元的輔助色彩體系，讓品牌充滿元?dú)夂唾x有想象力。

3. 整合推薦區(qū)域

相親直播作為平臺(tái)的主要收益點(diǎn)，在首頁的強(qiáng)引流入口也是一大重點(diǎn)。針對(duì)線上的樣式，我們對(duì)該區(qū)域做了信息的整合：

1. 信息降噪：去除重復(fù)出現(xiàn)的用戶名和不必要的年齡展示，聚焦于照片本身，同時(shí)對(duì)人像展示區(qū)域進(jìn)行了擴(kuò)充；
2. 營造環(huán)境氛圍：增加pk狀態(tài)標(biāo)簽，拉高情緒峰值，提升使用頻次；
3. 增強(qiáng)真實(shí)感：弱化“查看更多”按鈕狀態(tài)，展示用戶的真實(shí)頭像，加入微動(dòng)效增加互動(dòng)感。

4. 優(yōu)化推薦列表

在內(nèi)容化設(shè)計(jì)上我們也需要更明確的認(rèn)知，保持一定的韻律感和統(tǒng)一性，給用戶內(nèi)容豐富但結(jié)構(gòu)簡(jiǎn)明的視覺認(rèn)知。

改版前：

1. 標(biāo)簽樣式多，排布不均，指向性不明；
2. 頭像和動(dòng)態(tài)結(jié)構(gòu)布局主次不明，缺乏視覺焦點(diǎn)；
3. “私聊”按鈕樣式突出，干擾用戶查看動(dòng)態(tài)照片；

改版后：

1. 強(qiáng)化動(dòng)態(tài)照片，減少展示數(shù)量，降低視覺疲勞；
2. 整合標(biāo)簽樣式，突出榮譽(yù)類勛章視覺表現(xiàn)；
3. 適度加大留白空間，提升閱讀舒適度；
4. 弱化“私聊”按鈕，降低對(duì)圖片的干擾。

5. tab欄煥新

延續(xù)同城的風(fēng)格樣式，未選中態(tài)依舊以線性來表現(xiàn)，造型簡(jiǎn)化，適度加大了圓角，體現(xiàn)交友相對(duì)活潑的特點(diǎn)。選中的樣式與頭部金剛位相呼應(yīng)，角度保持一致的同時(shí)，顏色也延續(xù)58橙色，貼合我們溫暖親和的設(shè)計(jì)理念。

此次首頁煥新，我們希望通過更合理的布局來呈現(xiàn)高優(yōu)的內(nèi)容給用戶，串聯(lián)到接下來的“場(chǎng)景化消費(fèi)”滿足用戶在直播間沉浸式情感體驗(yàn)，配合玩法策略，從而提升整套流程的轉(zhuǎn)化效率。

6. 直播、動(dòng)態(tài)、消息頁

為保持與58平臺(tái)規(guī)范的一致性，此次在直播相親頁、最新動(dòng)態(tài)頁、消息中心以同城平臺(tái)組件為基準(zhǔn)進(jìn)行體驗(yàn)優(yōu)化升級(jí)，減少兩者承接間的割裂感。

7. 個(gè)人中心

同時(shí)我們對(duì)個(gè)人中心也進(jìn)行了視覺升級(jí)。此次去除了頭部之前大面積重色，進(jìn)行輕量化設(shè)計(jì)，突出清新簡(jiǎn)潔的氛圍。同時(shí)將各層級(jí)功能入口以卡片的形式進(jìn)行聚合，使整體信息層級(jí)變得更加清晰。

8. 其他頁面展示

設(shè)計(jì)的初期，大家會(huì)跳脫出束縛，往更大膽的方向進(jìn)行探索，包括但不限于產(chǎn)品功能、運(yùn)營策略、圖片展示布局等。發(fā)散過后，在提案的過程中我們也會(huì)根據(jù)可行性進(jìn)行收攏，這樣的流程也能幫助我們產(chǎn)生更多新穎的設(shè)計(jì)想法，同時(shí)也降低了無法落地的風(fēng)險(xiǎn)。

04?總結(jié)

以上，是本地版交友視覺語言升級(jí)的原因以及思考過程。從前期的腦爆、樣式拼貼、情緒圖片收集、關(guān)鍵詞提煉，設(shè)計(jì)語言歸納定位、明確設(shè)計(jì)原則，再到方案設(shè)計(jì)、深化、評(píng)選階段，整體的規(guī)律是一個(gè)發(fā)散-收緊-發(fā)散-收緊的過程。

在此過程中，我們也希望能夠洞察用戶潛在的交友需求與痛點(diǎn)，切換不同的視角帶給用戶可用、易用與充滿情感的體驗(yàn)。不再專注于孤立的觸點(diǎn)，更多地著力于構(gòu)建完整的體驗(yàn)閉環(huán)，提升設(shè)計(jì)創(chuàng)造更多價(jià)值的可能性。

作者：柳毅鴻，視覺設(shè)計(jì)師

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

題圖來自pexels，基于CC0協(xié)議