項(xiàng)目總結(jié):以目標(biāo)為導(dǎo)向的設(shè)計(jì),房源管理體系改版重構(gòu)
導(dǎo)語(yǔ):租房是58重要的業(yè)務(wù)線之一,個(gè)人房源在租房業(yè)務(wù)線擁有絕對(duì)流量?jī)?yōu)勢(shì),為租房提供著源源不斷的動(dòng)力。幫助個(gè)人房東高效管理房源,減少管理成本,是提升房東端用戶體驗(yàn)的方式之一。設(shè)計(jì)團(tuán)隊(duì)圍繞這一目標(biāo),改版重構(gòu)了房源管理體系,希望房東在租前、租中、租后有更加順利流暢的體驗(yàn)。以下為本次設(shè)計(jì)思路和最終設(shè)計(jì)方案。
01?梳理架構(gòu)-尋找目標(biāo)
想知道用戶經(jīng)歷了什么,對(duì)用戶進(jìn)行調(diào)研是最快的方式。但在便捷的路徑?jīng)]有出現(xiàn)之前,用戶是很難告訴我們真正需要的是什么,就像福特所說(shuō):在汽車發(fā)明之前,人們只想要一匹更快的馬。此次改版我們對(duì)已有的出租路徑持續(xù)觀察,探索更便捷、自然的方式。
改版前,房源管理只作為房源出租流程中的一個(gè)階段,房東發(fā)布并上架房源后,可以對(duì)房源進(jìn)行管理,此時(shí)的房源管理我稱之為狹義的管理。
而對(duì)房東而言,房源只有“不出租/正在找租客/租出去”三種狀態(tài),基于此我們找到目標(biāo)突破點(diǎn),將管理的概念泛化到“租前、租中、租后”,從房東的角度做房源全生命周期管理,讓房源管理更扁平。
02?根據(jù)目標(biāo)-確認(rèn)整合內(nèi)容
根據(jù)目標(biāo)“從房東的角度做房源全生命周期管理”,我們面臨的第一個(gè)問(wèn)題就是統(tǒng)籌租前、租中、租后房東可能會(huì)做的所有的任務(wù)。
因?yàn)榉繓|所處狀態(tài)不同,所有的任務(wù)在不同階段表達(dá)的重點(diǎn)也需要有所區(qū)分,需要根據(jù)房東所處的不同時(shí)期,將房東必須要做、可能會(huì)做、平臺(tái)希望房東做等不同類型的任務(wù)整合。
03?內(nèi)容呈現(xiàn)-清晰自然的視覺(jué)落地
整合好不同階段需要的內(nèi)容后,作為設(shè)計(jì)師,需要讓所有管理頁(yè)統(tǒng)一、清晰自然、精致的視覺(jué)落地,在該項(xiàng)目中主要用了以下3點(diǎn)將其實(shí)現(xiàn):
讓不同出租階段房源管理頁(yè)有相同視覺(jué)表達(dá)在熟悉的頁(yè)面操作可以增加完成任務(wù)的信心;保證所有管理頁(yè)的一致性,可以減少房東的認(rèn)知成本。在房源不同的出租階段,房東的關(guān)注點(diǎn)是不一樣的,如何讓不同階段的房源管理頁(yè)具有一致性?
我們的方式是將不同任務(wù)模塊化,像疊積木一樣設(shè)計(jì),將同類型功能采用同樣的方式表達(dá),然后是根據(jù)頁(yè)面需要適配在所需界面中。我們整理了租前、租中、租后管理內(nèi)容, 并將每塊內(nèi)容表現(xiàn)出來(lái)。
把所有模塊統(tǒng)一整理后,需要對(duì)管理頁(yè)進(jìn)行適配測(cè)試。最終采用了房源狀態(tài)用通頂插圖與文字結(jié)合的方式展示,這樣使得所有頁(yè)面有了一個(gè)共同的基調(diào),其他各模塊采用了圓角卡片化處理,各模塊間、模塊內(nèi)部間距統(tǒng)一。
通過(guò)沉浸式的無(wú)標(biāo)題欄設(shè)計(jì)統(tǒng)一整體節(jié)奏,在小卡片上收攏間距,保證視覺(jué)呼吸感的同時(shí),保證一致性。
在單個(gè)頁(yè)面上減少因?yàn)槟K化而帶來(lái)的割裂感
對(duì)每個(gè)模塊固定展示,固然能保持他們的一致性,但在出租的各個(gè)流程中,每個(gè)階段需要做的主線任務(wù)是不一樣的,例如:
- case1: 租前,房源發(fā)布后,為了保證房源真實(shí)性,我們要求房東必須通過(guò)房源認(rèn)證后才可上架,對(duì)房東而言最主要的任務(wù)是提醒房東認(rèn)證;
- case2: 租中,房源上架后,房東更關(guān)心上架后的效果,房源的瀏覽量/收藏量/微聊/電話等;
- case3: 租后,房源下架后,管理頁(yè)更多側(cè)重在狀態(tài)展示,將房源整個(gè)生命周期的記錄顯露出來(lái)。
如何選擇更合理的方式引導(dǎo)用戶將每個(gè)頁(yè)面做到“合而不同”?
對(duì)每種狀態(tài)下的頁(yè)面逐個(gè)分析,我們將每個(gè)頁(yè)面中所有任務(wù)模塊按優(yōu)先級(jí)排序:主線內(nèi)容>輔線內(nèi)容>附加值內(nèi)容。
如租前,主線任務(wù)是提醒房東此時(shí)最需要做的事情是認(rèn)證房源,在頭部狀態(tài)上,不僅有與租中/租后相同的房源當(dāng)前狀態(tài)提示,還增加了任務(wù)節(jié)點(diǎn),讓房東明確的知曉當(dāng)前所處位置,加強(qiáng)對(duì)于整體房源上架流程透?jìng)?,明確當(dāng)前主線任務(wù)的重要性。
租前頁(yè)面管理頁(yè)面設(shè)計(jì)上,默認(rèn)“確認(rèn)個(gè)人信息”模塊展開(kāi),做認(rèn)證前最后的信息確認(rèn)工作,同時(shí)也保證了在首屏內(nèi)容足夠簡(jiǎn)潔清晰,保證主線任務(wù)順利進(jìn)行。
提升頁(yè)面精致感
提升頁(yè)面精致感,可以在用戶的潛意識(shí)中留下更優(yōu)質(zhì)的體驗(yàn)印象,也是視覺(jué)設(shè)計(jì)師提升設(shè)計(jì)稿質(zhì)量的有效方式。優(yōu)雅舒適的色彩和插圖、恰到好處的模塊修飾、增加微動(dòng)效等都可以提升頁(yè)面的精致感。
優(yōu)雅舒適的色彩和配圖:色彩可以簡(jiǎn)單直接的傳達(dá)感受,不同色彩傳達(dá)的內(nèi)容不同。可以根據(jù)房東對(duì)于出租各階段的感知不同,選取不同的色彩搭配傳達(dá)信息。
我們結(jié)合58app的主色橙色進(jìn)行合適的顏色搭配,最終選取了橙色、綠色、灰色、金色分別表現(xiàn)租前、普通房東的租中、金牌房東的租中、租后管理頁(yè)面。沉浸式的無(wú)標(biāo)題欄設(shè)計(jì),通頂?shù)念伾性黾颖憩F(xiàn)對(duì)應(yīng)階段的小插圖,輔助傳達(dá)信息,使頁(yè)面更加活潑。
恰到好處的模塊修飾
對(duì)不同功能模塊選取恰到好處的修飾,可以對(duì)模塊增加視覺(jué)吸引力,增強(qiáng)內(nèi)容表現(xiàn)力。
在租中房源數(shù)據(jù)模塊,在模塊背景增加了曲線圖,用以表現(xiàn)此處的數(shù)據(jù)效果;在加速出租模塊,右上角增加了向上箭頭,用以表現(xiàn)此處所內(nèi)容均可帶來(lái)加速效果;房源轉(zhuǎn)委托模塊,用了真實(shí)專業(yè)的中介形象,且中介形象超出模塊區(qū)域,打破了布局約束,讓頁(yè)面更靈動(dòng)透氣。
增加微動(dòng)效
過(guò)渡內(nèi)容增加微動(dòng)效,可以使頁(yè)面更柔和;重點(diǎn)內(nèi)容增加微動(dòng)效,可提升信息層級(jí),提高銷量。微動(dòng)效能夠給頁(yè)面帶來(lái)活力。在房源管理詳情頁(yè)的設(shè)計(jì)中,也分別在不同的地方使用了微動(dòng)效。
在沉浸式無(wú)標(biāo)題欄上滑時(shí),增加微動(dòng)效,使內(nèi)容和頂部的插畫元素過(guò)渡不突兀;打開(kāi)租中頁(yè)面時(shí),對(duì)每日房源數(shù)據(jù)數(shù)字用滾動(dòng)效果呈現(xiàn),增加視覺(jué)吸引力;若當(dāng)前房源有預(yù)約看房訂單時(shí),在icon上方增加數(shù)字提醒的同時(shí),對(duì)icon增加縮放+流光效果。
04?最后
此次房源管理詳情頁(yè)是從管理的架構(gòu)出發(fā),進(jìn)行管理概念和頁(yè)面重構(gòu)的改版,未來(lái)我們會(huì)對(duì)改版效果進(jìn)行一系列測(cè)試,有結(jié)論會(huì)繼續(xù)和大家分享,如有任何問(wèn)題,歡迎在留言區(qū)互動(dòng)~
作者:邵秀芬,UI設(shè)計(jì)師
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心
題圖來(lái)自Unsplash,基于CC0協(xié)議
感謝分享