設(shè)計(jì)沉思錄|從0到1構(gòu)建新趕集設(shè)計(jì)鏈路

0 評(píng)論 6586 瀏覽 11 收藏 9 分鐘

編輯導(dǎo)讀:隨著業(yè)務(wù)規(guī)模發(fā)展與調(diào)整,品牌創(chuàng)立之初的設(shè)計(jì)已經(jīng)不能滿足當(dāng)前業(yè)務(wù)要求,因此對(duì)品牌升級(jí)優(yōu)化迫在眉睫。本文作者從品牌感知出發(fā),詳細(xì)地介紹了趕集網(wǎng)視覺升級(jí)鏈路設(shè)計(jì)的過程,并對(duì)每個(gè)關(guān)鍵步驟進(jìn)行了梳理分析,與大家分享。

趕集網(wǎng)始創(chuàng)于2005年,2015年11月,與58同城正式合并?;厥字两瘢褮v經(jīng)15個(gè)春秋。多次的產(chǎn)品及視覺優(yōu)化升級(jí),讓它演進(jìn)成了新趕集。

在新趕集的產(chǎn)品生態(tài)下,除傾斜聚焦于招聘業(yè)務(wù)線外,對(duì)全站視覺體系的升級(jí)也迫在眉睫。那么,作為設(shè)計(jì)者,如何進(jìn)行全新的方案落地?今天我們就來看看:新趕集視覺重造之路。

01?品牌感知

對(duì)于用戶而言,首先最直接明了的感知就是視覺外觀的變化:顏色的冷與暖、明與暗,都會(huì)給用戶在心里埋下一顆種子,傳遞品牌的總體印象。可以說,品牌設(shè)計(jì)的調(diào)性高低便至關(guān)重要。將產(chǎn)品定位為“年輕自由的招聘平臺(tái)”的新趕集,故此在視覺層面就會(huì)向年輕元素傾斜。

02?關(guān)于用戶

縱觀整個(gè)市場(chǎng),用戶基本分類為:頭部金領(lǐng),中部白領(lǐng)及底部藍(lán)領(lǐng),三大類型。而趕集平臺(tái)則以人群基數(shù)最大最堅(jiān)實(shí)的藍(lán)領(lǐng)為主。此類用戶的特點(diǎn)是流動(dòng)性大、工作節(jié)奏高頻,所以更頻繁關(guān)注招聘平臺(tái)。

那么,新趕集的信息是否透明,更新是否及時(shí),是首要聚焦的問題。而正是因?yàn)楸晨?8集團(tuán),擁有整合業(yè)務(wù)的優(yōu)勢(shì)所在,我們的資源豐富程度有目共睹。

03?設(shè)計(jì)思路

結(jié)合人群特點(diǎn)來講,藍(lán)領(lǐng)用戶所在的城市屬于較為下沉的市場(chǎng),視覺元素盡量與簡(jiǎn)單易懂的較大文字和醒目的圖形元素相結(jié)合,使他們更習(xí)慣接受。這也正是作為設(shè)計(jì)者的思路切入口。

綜合業(yè)務(wù)訴求和用戶分析,得出趕集網(wǎng)改版后的平臺(tái)設(shè)計(jì)方向有以下4點(diǎn)關(guān)鍵詞:年輕、多元、精致、簡(jiǎn)潔。

04?改版方向

  1. 頁面層級(jí)梳理:單頁面注重內(nèi)容層級(jí)的劃分。容納更多內(nèi)容便于閱讀,方便用戶快速定位內(nèi)容或解決問題。
  2. 拆分功能區(qū)塊:分散用戶的操作。以頁面區(qū)塊代替導(dǎo)航分流,簡(jiǎn)化用戶的操作路徑。
  3. 優(yōu)化操作流程:合并精簡(jiǎn)頁面元素,明確主要功能,減少對(duì)用戶操作主線的干擾,提升用戶漏斗轉(zhuǎn)化。

05?設(shè)計(jì)落地

1. 年輕

在首頁區(qū)域,作為產(chǎn)品的第一視覺觸達(dá)點(diǎn),年輕化視覺傳達(dá)更為直接高效。

  • 品牌基調(diào):頭部運(yùn)用大面積品牌色,自上而下貫穿APP場(chǎng)景中,加深品牌記憶。
  • 卡片式:運(yùn)用卡片形式拆解和區(qū)分不同內(nèi)容。為用戶呈現(xiàn)最佳的視覺體驗(yàn)。
  • 空間感:大空間和主次對(duì)比的方法,讓用戶的視覺動(dòng)線對(duì)主次信息吸收更完整,同時(shí)增加卡片空間感,讓首頁feed流游覽起來更清楚。

2. 多元

作為用戶留存重點(diǎn)轉(zhuǎn)化的場(chǎng)景,人脈圈的社交及趣味性,是視覺年輕化最好的發(fā)酵池。

  • 標(biāo)簽化:因社交屬性的特殊性,人群肯定會(huì)有一部分共性,這樣才會(huì)產(chǎn)生共鳴效應(yīng),所以在設(shè)計(jì)上對(duì)標(biāo)簽的處理做了簡(jiǎn)化處理,快速傳達(dá)的效果。
  • 圖文流:圖文信息傳達(dá)的主次,對(duì)于用戶的游覽率和理解程度都至關(guān)重要,如果先圖后文,就會(huì)有折返跑式的思考,所以我們采用了先文后圖的設(shè)計(jì)方法,讓文圖傳播的更簡(jiǎn)單。

  • 趣味性:Feed流中會(huì)有讓用戶去參與的互動(dòng)場(chǎng)景,根據(jù)調(diào)研反饋,如果用較為常規(guī)的設(shè)計(jì)呈現(xiàn),用戶的交互欲望會(huì)較低。所以在這些設(shè)計(jì)上,融入了強(qiáng)視覺、對(duì)比色、有互動(dòng)的設(shè)計(jì)語言,提升用戶參與度的同時(shí)增加了用戶黏性。

3. 精致&簡(jiǎn)潔

消息作為即時(shí)通訊最重要的一環(huán),頁面的視覺呈現(xiàn)要起到穿針引線,承上啟下的作用。而這個(gè)時(shí)候的年輕化元素就會(huì)從多面性轉(zhuǎn)變到簡(jiǎn)單。比如:

  • 通透性:對(duì)于有意向的崗位,面試前期的溝通尤為重要,為了打破僵局消息頁面采用了通透性極高的留白方式,結(jié)合卡片分層,讓整個(gè)聊天頁面變得簡(jiǎn)單輕松。
  • 統(tǒng)一結(jié)構(gòu):考慮到消息的多樣性及類型,重新歸納了聯(lián)系、邀約、面試、反饋和結(jié)束等環(huán)節(jié)等層級(jí),統(tǒng)一了卡片結(jié)構(gòu),讓用戶使用起來更簡(jiǎn)單。

  • 新面試形態(tài):因國(guó)內(nèi)疫情影響,在今年合力打造了視頻AI面試,對(duì)此特進(jìn)行了人性化引導(dǎo)設(shè)計(jì),降低用戶使用成本的同時(shí),完善了體驗(yàn)流程閉環(huán)。

總的來說,設(shè)計(jì)的方向延展是以產(chǎn)品定位拆解而來,一步步的落實(shí)到每一個(gè)環(huán)節(jié),讓年輕的趕集用新的設(shè)計(jì)語言來與用戶進(jìn)行了一場(chǎng)深度溝通。

06?集思廣益,團(tuán)隊(duì)協(xié)作

在這次大規(guī)模的升級(jí)改版中,不光在設(shè)計(jì)層面有了新的探索發(fā)現(xiàn),對(duì)于團(tuán)隊(duì)協(xié)作完成項(xiàng)目上來講,也是頗有收獲。

在保證一致性的情況下,我們也對(duì)提效有同樣高的要求。結(jié)合每個(gè)時(shí)期的目標(biāo),團(tuán)隊(duì)快速確定方向及設(shè)計(jì)語言并周知,自下而上的去推動(dòng)項(xiàng)目的落地,做到設(shè)計(jì)場(chǎng)景化表達(dá)。用情感化、沉浸式、低成本的設(shè)計(jì)場(chǎng)景,優(yōu)化用戶體驗(yàn)。

07?設(shè)計(jì)規(guī)范及沉淀

繼此次改版之后,又趁熱打鐵,在設(shè)計(jì)新趕集設(shè)計(jì)規(guī)范上,進(jìn)行統(tǒng)一設(shè)計(jì)和歸納總結(jié)。明確組建化原子設(shè)計(jì)(5點(diǎn)層級(jí):原子、分子、組織、模版、頁面),把細(xì)分顆粒度作為一個(gè)個(gè)可復(fù)用的組建進(jìn)行有序拼裝,來幫助設(shè)計(jì)師快速搭建產(chǎn)品,大幅提升生產(chǎn)效率。根據(jù)以上設(shè)計(jì)與策略支撐,產(chǎn)品上線后的數(shù)據(jù)方面整體向好。

 

作者:王鵬飛,視覺設(shè)計(jì)師

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!