哈嘍，大家好，我是設計大偵探的主理人廖爾摩斯。今年年初我參與到一款澳洲房產 SaaS 的產品設計，于是陸陸續續的體驗了一些國內外的房產行業產品。今天向大家分享一下近期我在鏈家 APP 房源詳情頁產品體驗中的一些收獲，希望這篇文章對你有所幫助和啟發。

往期拆解：

一、需求分析

在進行產品拆解前，我習慣以一個純小白用戶的角度去體驗和分析，模擬用戶真實的需求和使用場景，再去思考產品團隊會如何去制定設計策略。

1. 房源詳情頁的功能價值

房源詳情頁是指新房、二手房和租房的詳情頁面，主要為用戶提供房源的詳細介紹，比如房源的價格、戶型、面積、周邊配套設施等。房源詳情頁也是一個房源 APP 權重最高的頁面之一，它不僅是用戶訪問最高頻的頁面，而且對用戶的激活和留存發揮著關鍵性作用。

關于鏈家

鏈家是全國最大的新房及二手房交易平臺之一，是集房屋交易與家裝服務于一體的手機 APP，擁有二手房、新房、租房、裝修、商鋪辦公、賣房、查首付等眾多板塊，連接每個家的故事。

2. 用戶需求分析

1. 基本型需求：通過詳情頁能了解到一個房源的詳細信息，比如地理位置、平均單價、銷售情況、周邊配套設施等。
2. 期望性需求：從詳情頁能挖掘到更多有價值的信息，比如樓盤的升值空間、附近熱門學校、小區用戶真實的評價等。
3. 興奮型需求：超出用戶過去在線下或是其他產品使用中的體驗，比如從視覺上能感知到房源的真實場景，或是有比較創新的功能，能為用戶的購買提供有價值的決策。

3. 使用場景分析

1. 購房前：用戶產生購房的初步想法，通過房源詳情頁進行初步的調研，從中獲取基礎的信息，做一個初步的了解。
2. 決策中：在線下和銷售溝通后，主動尋找樓盤的詳細信息，比如搜集用戶口碑、周邊配套設施、周邊樓盤房價對比等。
3. 購房后：不定期查詢房產增值空間、周邊房價以及市場動態。

4. 設計策略分析

由于不涉及在線交易，房源詳情頁更像是一個產品聚合頁，主要以信息展示為主。我認為頁面的內容策劃是整個詳情頁設計最大的挑戰，不僅要讓用戶在狹小的手機屏幕中高效獲取到精準有價值的內容，還要考慮如何激發用戶的興趣，以及如何讓房源經紀人獲取到用戶的聯系方式保持進一步線索跟蹤。

二、內容拆解

房產的銷售主要分為新房和二手房，新房顧名思義就是全新的房源，一般以樓盤為單位，比如北京悅府，進入詳情頁后我們會發現它的側重點是樓盤的介紹。和新房不同，二手房是以房源為主體，側重點是房源本身，兩個頁面有很多相似的內容，但頁面的內容和權重并不相同。

1. 新房

① 導航欄

提供信息糾錯、房源對比、消息和分享四個功能。

信息糾錯：用戶可以對樓盤信息糾錯反饋。

設計亮點

一個貼心以及人性化的功能，不僅起到了用戶對房開商的約束和監督，而且從「處理進度」的內容看，用戶參與積極度很高。

房源對比：用戶可以添加其他樓盤進行綜合比較，比如均價、總價、戶型等維度，解決用戶的信息困擾。

設計亮點

功能亮眼，方便用戶可以加入其他樓盤進行多維度對比，為購房決策強有力支持，不過頁面設計過于粗糙，視覺體驗欠佳。

消息：跳轉至消息欄目，可查看實時的消息通知。

分享：房源分享，支持分享到微信和朋友圈。

設計缺陷

分享功能設計過于粗糙，甚至沒有朋友圈海報這些常見的分享形式。

② 櫥窗圖

提供 VR 樣板間、實景圖、區位圖和項目現場等多種觀看形式和圖片資源，方便用戶可以多維度從視覺層了解樓盤詳細信息，其中 VR 看房可以稱得上是鏈家 APP 的一大特色和核心優勢。

VR 樣板間：點擊后進入 VR 樣板間，用戶可享受親臨現場般的視覺體驗。

設計亮點

非常亮眼的功能，視覺體驗極佳，而且還支持 VR 帶看，房產經紀人可以和買家實現同頻交流、同頻演示，極大提升了溝通效率。

③ 概覽

房源的基礎信息，包含房源標題、地址、標簽、參考均價、參考總價、戶型和開盤時間等內容。

④ 戶型

樓盤的戶型列表，點擊后可進入對應戶型的詳情頁介紹（頁面的內容和二手房相似，我們將會在下面詳細介紹）。這里我們需要了解一下戶型的概念，一個樓盤可以有 N 棟，每一棟會根據房屋的面積設計不同的戶型，一個戶型就是一套房源。

戶型快速詢問：系統默認設置了咨詢標簽，點擊就可以和經紀人直接溝通。

設計亮點

系統內置了常見問題咨詢的標簽，點擊就能自動發送給經紀人，提升操作效率。

特價房源：小區的特價房源，點擊直接跳轉至微信添加賣房經紀人。

價值分析：針對小區量身定制的價值分析報告，包含小區概述、交通概況、優缺點分析和增值空間等。

設計優點

向買家提供全面、專業、有價值的分析報告，為用戶的購買決策做有效的支撐。

⑤ 周邊

周邊配套和通勤：向用戶提供樓盤周邊的詳細信息，比如學校、醫院、購物廣場和休閑場所等配套設施。

設計亮點

通過定制化的地圖導航，對周邊配套資源一目了然，體驗友好。

周邊房價對比：提供樓盤和周邊新房及二手房的價格對比，點擊「查看更多」后還可查看更詳細信息。

設計亮點

設計了詳細試圖和價格試圖兩種方式，方便用戶可根據自己的偏好切換。

本地購房群：平臺為買家建立的購房群，點擊后跳轉至微信添加房源經紀人。

⑥ 詳情

樓棟總覽：用戶可通過此頁面查詢樓棟在售以及售罄信息。

設計缺陷

按鈕缺乏提示而且可點擊區域過小，用戶難以感知可點擊樓棟查看對應的信息。

樓盤詳情：樓盤的詳細信息，包括基本信息、銷售信息、小區概況和預售許可證等四大類信息。

設計缺陷

詳情頁面設計過于粗糙，信息密度過高，用戶閱讀體驗欠佳。

⑦ 動態

提供樓盤最新的動態消息，包括銷售信息、戶型更新、樓盤資訊和交房時間等。

② 點評

專家講房：平臺推薦的房產專家經紀人，點擊后可和專家進行對話。

真實點評：用戶對房源的真實評價。

買房問大家：用戶可在此欄目提出房源購買的相關問題。

設計亮點

非常貼心的功能，不僅支持用戶免費提問，而且可以通過歷史問答充分了解房源的相關問題，為購房提供充分的決策依據。

⑨ 精選

平臺為用戶精選的其他新房及二手房資源。

⑩ 菜單欄

在底部菜單欄，用戶可以對樓盤進行關注、電話咨詢和在線咨詢。

2. 二手房

① 導航欄

提供房源 PK、收藏、分享、消息和信息糾錯的功能。

房源 PK：和新房以樓盤 PK 不同，房源 PK 是以房源為單位，為用戶提供多套房源的總和對比。

設計亮點

可提供最多 5 套房源進行對比，支持房源基本信息、房評信息和房源實景三大類的綜合對比，信息完整、覆蓋面廣，極大提升用戶的操作效率。

設計缺陷

點擊「更多」，再次出現「房源對比」，功能重復。

② 櫥窗圖

除了 VR、戶型、圖片等形式，還加入了裝修靈感，用戶可一鍵查看房源的裝修效果，有效提升購買欲望。

設計亮點

裝修靈感這個功能的加入，在二手房場景中體驗起來實在太棒了，就像玩游戲一鍵換膚，瞬間可以看到一套老舊二手房煥然一新的感覺，而且視覺展示形式還分成上下兩屏同時對比的裝修前后的效果，極大增強用戶的購房意愿。

③ 概覽

和新房相比，二手房的信息更完整、更豐滿，基礎信息，包含房源標題、地址、標簽、參考均價、參考總價、戶型和開盤時間等內容。

設計缺陷

信息密度太高，欠缺合理的規劃，導致設計形式普通，可以考慮增加「展開-收起」或查看更多等交互形式來提升用戶的閱讀體驗。

④ 周邊

和新房一樣，以定制化的地圖向用戶展示樓盤周邊的詳細信息，比如學校、醫院、購物廣場和休閑場所等配套設施。

⑤ 房源

向賣家提供多維度的房源信息，比如經紀人評價、帶看動態等。

房源情況：提供經紀人和業主對房源的真實評價，加深買家對房源的了解。

房源動態：房源最新的帶看動態，點擊更多可查看歷史帶看動態（帶看次數越多，也可以理解為房源越受歡迎）。

房屋解讀：針對房源量身定制的專業解讀報告，包含優缺點分析、增值空間等，點擊咨詢經紀人可領取完整報告。

設計優點

通過高質量的房屋評估報告吸引用戶咨詢，并進一步獲取微信等聯系方式，引流方式簡單而不暴力。

房屋煥新：提供對房源重新裝修后的效果參考，覆蓋廚房、客廳、臥室等房間，帶給買家全新的房屋視覺體驗。

設計優點

非常亮眼的功能，進入詳情后還可以查看設計師對房源裝修的靈感和思路，極大增強買家的購房欲望，并能為平臺帶來新的變現方式。

大家還喜歡：平臺根據房源推薦的相似、優質戶型，給用戶提供更多的選擇參考和對比。

⑥ 小區

房源所在小區的詳細介紹，包括小區相似房源、解讀和點評等。

同小區成交：同小區其他成交房源，可以向經紀人咨詢成交價格參考。

同小區相似：同小區相似戶型的房源，提供最低價和最高價參考。

小區解讀：對于小區綜合情況的解讀，內容主要由經紀人錄制短視頻講解為主。

小區點評：小區業主、租客以及經紀人對小區真實的評價。

優質經紀人：平臺推薦的賣房經紀人。

設計優點

這個部分的內容策劃特別出彩，首先給用戶介紹小區基礎概況，然后提供同小區成交和戶型相似房源的參考，然后再對小區投資分析進行解讀，最后加入小區業主、租客和經紀人的真實評價，整體的閱讀節奏順暢、清晰、自然又能牢牢吸引住用戶。

⑦ 推薦

平臺為用戶推薦的其他二手房、周邊小區及現房等。

⑧ 菜單欄

在底部菜單欄，用戶可以添加房源經紀人微信以及電話咨詢和在線咨詢。

設計優點

點擊經紀人頭像，系統直接跳轉至微信添加好友界面，有效降低用戶流失率。

三、體驗總結

通過對兩個房源詳情頁的深度體驗和拆解，我們從內容、視覺以及體驗三個維度進行一下簡單的總結：

1. 內容層：整個頁面的設計策略清晰、內容創新，不僅為用戶提供準確、完整的房源基礎信息，還從周邊配套、業主點評等多維度向用戶提供有價值的分析，為用戶提供充足的購房決策支撐，其次還有很多亮眼的創新功能和設計，比如 VR 看房和裝修靈感。
2. 視覺層：視覺設計相對中規中矩，也許是由于內容過多，所以頁面總顯得擁擠和略微混亂，不過 VR 看房和裝修靈感這兩個功能豐富了房源的展示形式，向用戶提供了身臨其境般的視覺感官體驗，極大提升了用戶的視覺體驗。
3. 體驗層：內容邏輯清晰，視覺展示形式也豐富多樣，不過整個頁面設計了過多觸發聯系經紀人的按鈕，比如各種咨詢標簽，點擊后就直接發送給經紀人，接下來便是消息中心多條消息的送達，這讓用戶都不敢輕易點擊屏幕，體驗略微欠佳。

整體而言，鏈家 APP 的房源詳情頁設計得非常優秀，特別是對頁面內容的規劃，專業、完整、清晰而又創新，真正為用戶創造了興奮型需求，讓用戶在進入 VR 看房那一瞬間，感受到了這個產品的魅力，創造了這個產品的 Aha-Moment！

設計亮點

1. 新房-功能糾錯：一個貼心以及人性化的功能，不僅起到了用戶對房開商的約束和監督，而且從「處理進度」的內容看，用戶參與積極度很高。
2. 新房-房源對比：功能亮眼，方便用戶可以加入其他樓盤進行多維度對比，為購房決策強有力支持，不過頁面設計過于粗糙，視覺體驗欠佳。
3. 新房-VR 樣板間：非常亮眼的功能，視覺體驗極佳，而且還支持 VR 帶看，房產經紀人可以和買家實現同頻交流、同頻演示，極大提升了溝通效率。
4. 新房-戶型快速詢問：系統內置了常見問題咨詢的標簽，點擊就能自動發送給經紀人，提升操作效率。
5. 新房-價值分析：向買家提供全面、專業、有價值的分析報告，為用戶的購買決策做有效的支撐。
6. 新房-周邊配套和通勤：通過定制化的地圖導航，對周邊配套資源一目了然，體驗友好。
7. 新房-買房問大家：非常貼心的功能，不僅支持用戶免費提問，而且可以通過歷史問答充分了解房源的相關問題，為購房提供充分的決策依據。
8. 二手房-房源 PK：可提供最多 5 套房源進行對比，支持房源基本信息、房評信息和房源實景三大類的綜合對比，信息完整、覆蓋面廣，極大提升用戶的操作效率。
9. 二手房-裝修靈感：裝修靈感這個功能的加入，在二手房場景中體驗起來實在太棒了，就像玩游戲一鍵換膚，瞬間可以看到一套老舊二手房煥然一新的感覺，而且視覺展示形式還分成上下兩屏同時對比的裝修前后的效果，極大增強用戶的購房意愿。
10. 二手房-房屋解讀：通過高質量的房屋評估報告吸引用戶咨詢，并進一步獲取微信等聯系方式，引流方式簡單而不暴力。
11. 二手房-房屋煥新：非常亮眼的功能，進入詳情后還可以查看設計師對房源裝修的靈感和思路，極大增強買家的購房欲望，并能為平臺帶來新的變現方式。
12. 二手房-小區：這個部分的內容策劃特別出彩，首先給用戶介紹小區基礎概況，然后提供同小區成交和戶型相似房源的參考，然后再對小區投資分析進行解讀，最后加入小區業主、租客和經紀人的真實評價，整體的閱讀節奏順暢、清晰、自然又能牢牢吸引住用戶。
13. 二手房-菜單欄：點擊經紀人頭像，系統直接跳轉至微信添加好友界面，有效降低用戶流失率。

設計缺陷

1. 新房-分享：分享功能設計過于粗糙，甚至沒有朋友圈海報這些常見的分享形式。
2. 新房-樓棟總覽：按鈕缺乏提示而且可點擊區域過小，用戶難以感知可點擊樓棟查看對應的信息。
3. 新房-樓盤詳情：詳情頁面設計過于粗糙，信息密度過高，用戶閱讀體驗欠佳。
4. 二手房-房源 PK：點擊「更多」，再次出現「房源對比」，功能重復。
5. 二手房-概覽：信息密度太高，欠缺合理的規劃，導致設計形式普通，可以考慮增加「展開-收起」或查看更多等交互形式來提升用戶的閱讀體驗。

歡迎關注作者微信公眾號：「設計大偵探」