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