跨場(chǎng)景界面整合設(shè)計(jì)-Feed、消息中心、個(gè)人中心三大場(chǎng)景協(xié)同升級(jí)復(fù)盤(pán)
我們APP在不斷擴(kuò)展功能和滿足用戶多樣化需求的過(guò)程中,面臨了新的挑戰(zhàn):如何提供一個(gè)既流暢又高效的用戶體驗(yàn)。為了應(yīng)對(duì)這一挑戰(zhàn),58同城決定對(duì)Feed、消息中心和個(gè)人中心這三大用戶高頻使用場(chǎng)景進(jìn)行跨場(chǎng)景的價(jià)值整合設(shè)計(jì),以實(shí)現(xiàn)更加個(gè)性化和連貫的用戶體驗(yàn)。
58同城APP作為平臺(tái)級(jí)的產(chǎn)品,一直以來(lái)都在努力滿足用戶的需求,提供豐富多樣的功能和服務(wù)。但隨著應(yīng)用功能的不斷擴(kuò)展,以及群體需求的多樣化,如何在一個(gè)應(yīng)用中實(shí)現(xiàn)流暢、高效的用戶體驗(yàn)成為了我們面對(duì)的新挑戰(zhàn)。
我們不再滿足局限于單一場(chǎng)景的功能實(shí)現(xiàn),更加聚焦不同場(chǎng)景的價(jià)值整合與用戶體驗(yàn)的連貫性。
因此,我們決定對(duì)Feed場(chǎng)景、消息中心場(chǎng)景及個(gè)人中心場(chǎng)景進(jìn)行跨場(chǎng)景價(jià)值整合設(shè)計(jì),以提供更加全面、個(gè)性化的用戶體驗(yàn)。
我們整體項(xiàng)目歷程分為確定場(chǎng)景-確定目標(biāo)及舉措-探索落地三個(gè)部分。
一、確定場(chǎng)景
為什么選擇這樣三個(gè)場(chǎng)景?
選擇feed場(chǎng)景、消息中心場(chǎng)景、個(gè)人中心場(chǎng)景進(jìn)行同步升級(jí),主要是出于對(duì)58目標(biāo)用戶群體日常使用習(xí)慣和體驗(yàn)觸點(diǎn)的深度理解。
首先,他們都是用戶在應(yīng)用中高頻訪問(wèn)和使用的部分。
其次,這三個(gè)場(chǎng)景在功能上具有一定的互補(bǔ)性。feed場(chǎng)景是信息的起點(diǎn),提供了內(nèi)容展示和IM互動(dòng)入口;消息中心則是信息的傳遞者,將重要信息推送給用戶;個(gè)人中心則是用戶管理這些信息、設(shè)置偏好的地方。
三者共同形成了一個(gè)完整的信息流動(dòng)閉環(huán)。
更重要的一點(diǎn),隨著用戶需求的多樣化,個(gè)性化和定制化服務(wù)變得越來(lái)越重要。通過(guò)同步優(yōu)化這三個(gè)場(chǎng)景的體驗(yàn),我們可以更加全面地了解用戶的興趣、偏好和行為習(xí)慣,從而為用戶提供更加個(gè)性化和定制化的服務(wù)。例如,根據(jù)用戶在feed場(chǎng)景中瀏覽歷史和消息中心的互動(dòng)行為,可以為用戶推薦更加精準(zhǔn)的服務(wù)和內(nèi)容。
二、確定目標(biāo)及舉措
這三個(gè)場(chǎng)景貫穿了用戶的所有后續(xù)消費(fèi)行為,以及商戶/服務(wù)者可觸達(dá)用戶的范圍。
從業(yè)務(wù)側(cè)來(lái)講,產(chǎn)品希望通過(guò)調(diào)控生態(tài)流量,讓更多的優(yōu)質(zhì)內(nèi)容可以呈現(xiàn),讓用戶更便捷地獲取信息,形成良性生態(tài)。
但線上的問(wèn)題是,頁(yè)面承載力不足,空間不夠用,不能滿足業(yè)務(wù)流量分發(fā)訴求。
另一方面,我們的用戶又反饋界面模塊繁雜,找不到所需要的信息。
因此,為了解決產(chǎn)品和用戶的問(wèn)題,我們確定了“效率”、“品牌溫度”、“一致”的核心設(shè)計(jì)目標(biāo),并進(jìn)行后續(xù)的設(shè)計(jì)推導(dǎo)。
設(shè)計(jì)舉措
在體驗(yàn)走查、數(shù)據(jù)摸排等前期準(zhǔn)備的過(guò)程中,我們認(rèn)識(shí)到這三個(gè)場(chǎng)景頁(yè)面在滿足用戶訴求的同時(shí),要保證分發(fā)效率的穩(wěn)定,保證內(nèi)容展示效率,也就造成了之前大家不敢改,不能改的局面,但是僅通過(guò)表層的換膚,是無(wú)法達(dá)到產(chǎn)品易用的效果的。
所以我們基于“效率”、“品牌溫度”、“一致”的設(shè)計(jì)目標(biāo),以及根據(jù)前期多輪小迭代實(shí)驗(yàn)的結(jié)果,與業(yè)務(wù)團(tuán)隊(duì)共創(chuàng),去制定相關(guān)的迭代計(jì)劃。
- 改造形態(tài):致力于讓用戶更好找、更容易決策,同時(shí)承擔(dān)業(yè)務(wù)分發(fā)信息的訴求。
- 體驗(yàn)煥新:結(jié)合我們新的“簡(jiǎn)單、美好、輕量、一致”品牌調(diào)性,致力于為用戶營(yíng)造更舒適、更親和的使用體驗(yàn)。
- 探索新分發(fā)空間:探索新的分發(fā)空間及分發(fā)樣式助力業(yè)務(wù)達(dá)成活躍分發(fā)的目標(biāo)。
三、探索落地
1. 改造形態(tài)
頁(yè)面形態(tài)層面,我們對(duì)小卡片結(jié)構(gòu)(feed卡片)、大容器框架(消息中心、個(gè)人中心)都進(jìn)行了分析和重構(gòu)。
1)Feed卡片
根據(jù)之前實(shí)驗(yàn)的經(jīng)驗(yàn),《Feed流設(shè)計(jì)數(shù)據(jù)實(shí)驗(yàn)》及9輪相關(guān)實(shí)驗(yàn)數(shù)據(jù),我們明確了此次改版要解決的問(wèn)題:卡片信息過(guò)載,視覺(jué)流線混亂及業(yè)務(wù)卡片關(guān)鍵信息不明顯。
我們對(duì)各大類卡片關(guān)鍵信息進(jìn)一步梳理,刪減非必要信息,將來(lái)原來(lái)信息混排的方式調(diào)整為關(guān)鍵信息聚類的排版方式,然后放大特征點(diǎn),共計(jì)8類卡片,體驗(yàn)和數(shù)據(jù)均有了明顯的提升。
2)消息中心
消息中心作為重要的促轉(zhuǎn)化入口,我們用的就是拆解策略。我們將消息列表由原來(lái)的單一列表布局明確劃分為頭部氛圍區(qū)、快捷區(qū)、公告欄、列表區(qū)和權(quán)限通知區(qū)域。列表區(qū)將新消息及歷史消息進(jìn)行了明確分組。
3)個(gè)人中心
個(gè)人中心,我們用的就是減法策略。明確產(chǎn)品核心目標(biāo),去除冗余;考慮功能可配置,精簡(jiǎn)界面。頭部聚焦用戶的核心信息和資產(chǎn),然后是發(fā)布等常用功能回溯。瀏覽動(dòng)線符合用戶預(yù)期。
2. 體驗(yàn)煥新
在表現(xiàn)層特別是視覺(jué)語(yǔ)言這個(gè)層面,我們根據(jù)集團(tuán)新使命“幫助人們安居樂(lè)業(yè)”及結(jié)合品牌語(yǔ)言的“朋友感&友好式”的設(shè)計(jì)理念,將設(shè)計(jì)調(diào)性定為“簡(jiǎn)單、美好”。如何打造“簡(jiǎn)單、美好”的設(shè)計(jì)體驗(yàn),我們通過(guò)腦爆及用戶調(diào)研,從中提煉出更為具象的的色彩、形狀、排版等方向。
在表現(xiàn)層特別是視覺(jué)語(yǔ)言這個(gè)層面,我們根據(jù)集團(tuán)新使命“幫助人們安居樂(lè)業(yè)”及結(jié)合品牌語(yǔ)言的“朋友感&友好式”的設(shè)計(jì)理念,將設(shè)計(jì)調(diào)性定為“簡(jiǎn)單、美好”。如何打造“簡(jiǎn)單、美好”的設(shè)計(jì)體驗(yàn),我們通過(guò)腦爆及用戶調(diào)研,從中提煉出更為具象的的色彩、形狀、排版等方向。
1)形:符號(hào)融入
根據(jù)58品牌獨(dú)有的圖形元素風(fēng)格及專屬的視覺(jué)符號(hào),我們?cè)诮缑孢M(jìn)行了相關(guān)控件的視覺(jué)樣式或疊加效果呈現(xiàn),從而保持圖形元素也可擁有一致性可循。
在FEED卡片上,我們采用圖形疊加的方式,用連接式的標(biāo)簽去表達(dá)58獨(dú)特的基因,滿足個(gè)性功能標(biāo)簽的同時(shí),提升卡片亮點(diǎn)。
在背景層面,我們也將基礎(chǔ)圖形與背景融入,讓整體頁(yè)面看起來(lái)更具呼吸感。
2)色:色彩明快
在色彩方面,我們?cè)?8四色及業(yè)務(wù)用色基礎(chǔ)上,拓展了透明度色板和飽和度色板,便于設(shè)計(jì)師靈活使用。
此外,我們通過(guò)互補(bǔ)色、鄰近色等設(shè)計(jì)方法擴(kuò)展其他色相,給出了輕量、柔和的漸變色擴(kuò)展,便于設(shè)計(jì)師打造清透的頁(yè)面。
3)質(zhì):層次分明
通過(guò)色彩及符號(hào)的組合運(yùn)用,我們力爭(zhēng)讓界面看起來(lái)層次更清晰。圖標(biāo)及文字層面我們也是加大強(qiáng)弱對(duì)比,讓用戶瀏覽順暢無(wú)礙。
4)情:擬人共情
最后,我們結(jié)合FACETEAM人物,給頁(yè)面增加生機(jī),讓用戶感覺(jué)更親切。
3. 探新分發(fā)空間
我們也持之以恒的在創(chuàng)新方向上進(jìn)行探索,分別在三個(gè)方向上進(jìn)行了了設(shè)計(jì)嘗試,助力產(chǎn)品完成業(yè)務(wù)數(shù)據(jù)目標(biāo)。
1)分發(fā)中間態(tài)
我們?cè)贔eed視頻卡片連接到詳情頁(yè)之間增加了視頻微列表,在保證核心任務(wù)的同時(shí),增加了視頻內(nèi)容分發(fā)結(jié)合點(diǎn)。
2)拓展IM/個(gè)人中心分發(fā)場(chǎng)景
接受/交流/管理信息的各個(gè)節(jié)點(diǎn),我們建議產(chǎn)品讓用戶找到更多相關(guān)內(nèi)容,而不是閱讀當(dāng)前內(nèi)容就走,保證用戶盡可能多地停留在APP內(nèi)。
3)IM引入AI會(huì)話
在IM場(chǎng)景增加智能助手服務(wù),將更優(yōu)質(zhì)的信息準(zhǔn)確地傳達(dá)給用戶。
4. 總結(jié)與反思
這次改版升級(jí)不是一蹴而就,其中經(jīng)歷了許多次實(shí)驗(yàn)、回滾、再嘗試,在品牌一致性上及創(chuàng)新探索層面,仍然有提升的空間,這次升級(jí)僅僅是一個(gè)開(kāi)始。在此特別感謝每一個(gè)參與到該項(xiàng)目的同學(xué),這是大家共同努力的成果。
設(shè)計(jì)團(tuán)隊(duì):于佳、孫非、崔登學(xué)、康盼盼、文雅、王曉彤、連盟、南小斐
本文由人人都是產(chǎn)品經(jīng)理作者【58UXD】,微信公眾號(hào):【58UXD】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于 CC0 協(xié)議。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!