跨場景界面整合設計-Feed、消息中心、個人中心三大場景協(xié)同升級復盤

0 評論 2348 瀏覽 21 收藏 13 分鐘

我們APP在不斷擴展功能和滿足用戶多樣化需求的過程中,面臨了新的挑戰(zhàn):如何提供一個既流暢又高效的用戶體驗。為了應對這一挑戰(zhàn),58同城決定對Feed、消息中心和個人中心這三大用戶高頻使用場景進行跨場景的價值整合設計,以實現(xiàn)更加個性化和連貫的用戶體驗。

58同城APP作為平臺級的產(chǎn)品,一直以來都在努力滿足用戶的需求,提供豐富多樣的功能和服務。但隨著應用功能的不斷擴展,以及群體需求的多樣化,如何在一個應用中實現(xiàn)流暢、高效的用戶體驗成為了我們面對的新挑戰(zhàn)。

我們不再滿足局限于單一場景的功能實現(xiàn),更加聚焦不同場景的價值整合與用戶體驗的連貫性。

因此,我們決定對Feed場景、消息中心場景及個人中心場景進行跨場景價值整合設計,以提供更加全面、個性化的用戶體驗。

我們整體項目歷程分為確定場景-確定目標及舉措-探索落地三個部分。

一、確定場景

為什么選擇這樣三個場景?

選擇feed場景、消息中心場景、個人中心場景進行同步升級,主要是出于對58目標用戶群體日常使用習慣和體驗觸點的深度理解。

首先,他們都是用戶在應用中高頻訪問和使用的部分。

其次,這三個場景在功能上具有一定的互補性。feed場景是信息的起點,提供了內(nèi)容展示和IM互動入口;消息中心則是信息的傳遞者,將重要信息推送給用戶;個人中心則是用戶管理這些信息、設置偏好的地方。

三者共同形成了一個完整的信息流動閉環(huán)。

更重要的一點,隨著用戶需求的多樣化,個性化和定制化服務變得越來越重要。通過同步優(yōu)化這三個場景的體驗,我們可以更加全面地了解用戶的興趣、偏好和行為習慣,從而為用戶提供更加個性化和定制化的服務。例如,根據(jù)用戶在feed場景中瀏覽歷史和消息中心的互動行為,可以為用戶推薦更加精準的服務和內(nèi)容。

二、確定目標及舉措

這三個場景貫穿了用戶的所有后續(xù)消費行為,以及商戶/服務者可觸達用戶的范圍。

從業(yè)務側(cè)來講,產(chǎn)品希望通過調(diào)控生態(tài)流量,讓更多的優(yōu)質(zhì)內(nèi)容可以呈現(xiàn),讓用戶更便捷地獲取信息,形成良性生態(tài)。

但線上的問題是,頁面承載力不足,空間不夠用,不能滿足業(yè)務流量分發(fā)訴求。

另一方面,我們的用戶又反饋界面模塊繁雜,找不到所需要的信息。

因此,為了解決產(chǎn)品和用戶的問題,我們確定了“效率”、“品牌溫度”、“一致”的核心設計目標,并進行后續(xù)的設計推導。

設計舉措

在體驗走查、數(shù)據(jù)摸排等前期準備的過程中,我們認識到這三個場景頁面在滿足用戶訴求的同時,要保證分發(fā)效率的穩(wěn)定,保證內(nèi)容展示效率,也就造成了之前大家不敢改,不能改的局面,但是僅通過表層的換膚,是無法達到產(chǎn)品易用的效果的。

所以我們基于“效率”、“品牌溫度”、“一致”的設計目標,以及根據(jù)前期多輪小迭代實驗的結(jié)果,與業(yè)務團隊共創(chuàng),去制定相關(guān)的迭代計劃。

  1. 改造形態(tài):致力于讓用戶更好找、更容易決策,同時承擔業(yè)務分發(fā)信息的訴求。
  2. 體驗煥新:結(jié)合我們新的“簡單、美好、輕量、一致”品牌調(diào)性,致力于為用戶營造更舒適、更親和的使用體驗。
  3. 探索新分發(fā)空間:探索新的分發(fā)空間及分發(fā)樣式助力業(yè)務達成活躍分發(fā)的目標。

三、探索落地

1. 改造形態(tài)

頁面形態(tài)層面,我們對小卡片結(jié)構(gòu)(feed卡片)、大容器框架(消息中心、個人中心)都進行了分析和重構(gòu)。

1)Feed卡片

根據(jù)之前實驗的經(jīng)驗,《Feed流設計數(shù)據(jù)實驗》及9輪相關(guān)實驗數(shù)據(jù),我們明確了此次改版要解決的問題:卡片信息過載,視覺流線混亂及業(yè)務卡片關(guān)鍵信息不明顯。

我們對各大類卡片關(guān)鍵信息進一步梳理,刪減非必要信息,將來原來信息混排的方式調(diào)整為關(guān)鍵信息聚類的排版方式,然后放大特征點,共計8類卡片,體驗和數(shù)據(jù)均有了明顯的提升。

2)消息中心

消息中心作為重要的促轉(zhuǎn)化入口,我們用的就是拆解策略。我們將消息列表由原來的單一列表布局明確劃分為頭部氛圍區(qū)、快捷區(qū)、公告欄、列表區(qū)和權(quán)限通知區(qū)域。列表區(qū)將新消息及歷史消息進行了明確分組。

3)個人中心

個人中心,我們用的就是減法策略。明確產(chǎn)品核心目標,去除冗余;考慮功能可配置,精簡界面。頭部聚焦用戶的核心信息和資產(chǎn),然后是發(fā)布等常用功能回溯。瀏覽動線符合用戶預期。

2. 體驗煥新

在表現(xiàn)層特別是視覺語言這個層面,我們根據(jù)集團新使命“幫助人們安居樂業(yè)”及結(jié)合品牌語言的“朋友感&友好式”的設計理念,將設計調(diào)性定為“簡單、美好”。如何打造“簡單、美好”的設計體驗,我們通過腦爆及用戶調(diào)研,從中提煉出更為具象的的色彩、形狀、排版等方向。

在表現(xiàn)層特別是視覺語言這個層面,我們根據(jù)集團新使命“幫助人們安居樂業(yè)”及結(jié)合品牌語言的“朋友感&友好式”的設計理念,將設計調(diào)性定為“簡單、美好”。如何打造“簡單、美好”的設計體驗,我們通過腦爆及用戶調(diào)研,從中提煉出更為具象的的色彩、形狀、排版等方向。

1)形:符號融入

根據(jù)58品牌獨有的圖形元素風格及專屬的視覺符號,我們在界面進行了相關(guān)控件的視覺樣式或疊加效果呈現(xiàn),從而保持圖形元素也可擁有一致性可循。

在FEED卡片上,我們采用圖形疊加的方式,用連接式的標簽去表達58獨特的基因,滿足個性功能標簽的同時,提升卡片亮點。

在背景層面,我們也將基礎圖形與背景融入,讓整體頁面看起來更具呼吸感。

2)色:色彩明快

在色彩方面,我們在58四色及業(yè)務用色基礎上,拓展了透明度色板和飽和度色板,便于設計師靈活使用。

此外,我們通過互補色、鄰近色等設計方法擴展其他色相,給出了輕量、柔和的漸變色擴展,便于設計師打造清透的頁面。

3)質(zhì):層次分明

通過色彩及符號的組合運用,我們力爭讓界面看起來層次更清晰。圖標及文字層面我們也是加大強弱對比,讓用戶瀏覽順暢無礙。

4)情:擬人共情

最后,我們結(jié)合FACETEAM人物,給頁面增加生機,讓用戶感覺更親切。

3. 探新分發(fā)空間

我們也持之以恒的在創(chuàng)新方向上進行探索,分別在三個方向上進行了了設計嘗試,助力產(chǎn)品完成業(yè)務數(shù)據(jù)目標。

1)分發(fā)中間態(tài)

我們在Feed視頻卡片連接到詳情頁之間增加了視頻微列表,在保證核心任務的同時,增加了視頻內(nèi)容分發(fā)結(jié)合點。

2)拓展IM/個人中心分發(fā)場景

接受/交流/管理信息的各個節(jié)點,我們建議產(chǎn)品讓用戶找到更多相關(guān)內(nèi)容,而不是閱讀當前內(nèi)容就走,保證用戶盡可能多地停留在APP內(nèi)。

3)IM引入AI會話

在IM場景增加智能助手服務,將更優(yōu)質(zhì)的信息準確地傳達給用戶。

4. 總結(jié)與反思

這次改版升級不是一蹴而就,其中經(jīng)歷了許多次實驗、回滾、再嘗試,在品牌一致性上及創(chuàng)新探索層面,仍然有提升的空間,這次升級僅僅是一個開始。在此特別感謝每一個參與到該項目的同學,這是大家共同努力的成果。

設計團隊:于佳、孫非、崔登學、康盼盼、文雅、王曉彤、連盟、南小斐

本文由人人都是產(chǎn)品經(jīng)理作者【58UXD】,微信公眾號:【58UXD】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

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

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