設(shè)計(jì)沉思錄 | 交友語言煥新升級(jí)

1 評(píng)論 7091 瀏覽 22 收藏 12 分鐘

編輯導(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ìn)入白熱化階段。58本地版交友在尋找差異化路徑提升用戶粘性的同時(shí),也期望借助58app的流量吸引更多年輕的用戶群體?;谶@一訴求,我們對(duì)交友設(shè)計(jì)語言進(jìn)行了煥新升級(jí),致力為用戶創(chuàng)造更好的體驗(yàn)。

02?定位與問題

1. 產(chǎn)品定位

58本地版交友是一款集陌生人社交、實(shí)時(shí)視頻相親、紅娘服務(wù)為一體的在線社交平臺(tái)。聚焦下沉市場,主要功能有:三方視頻聊天、文字匹配、紅娘月老牽線搭橋、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ù)性,透傳力低,自身定位不明;
  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)鍵詞,分人物、事件場景、物品、樣式風(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)格嘗試:

在眾方案中選擇了這套簡潔的圖標(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)簡明的視覺認(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),造型簡化,適度加大了圓角,體現(xiàn)交友相對(duì)活潑的特點(diǎn)。選中的樣式與頭部金剛位相呼應(yīng),角度保持一致的同時(shí),顏色也延續(xù)58橙色,貼合我們溫暖親和的設(shè)計(jì)理念。

此次首頁煥新,我們希望通過更合理的布局來呈現(xiàn)高優(yōu)的內(nèi)容給用戶,串聯(lián)到接下來的“場景化消費(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ì),突出清新簡潔的氛圍。同時(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 寫的不錯(cuò)

    回復(fù)