无码一区二区三区中文字幕

從用戶場景拔高信息瀏覽體驗的交互設計策略

2023-8-30 鶴鶴

詳情頁不會僅僅承載房源基礎信息，也將是越來越多元化信息的承載體

眾所周知，鏈家在二手房業務中深耕多年，無論是線下服務體系和線上產品工具都處于行業內頭部水平。但相較于二手業務，新房業務的整體發展還存在較大差距，部分業務流程仍處于線上化建設中。

聚焦到經紀人的作業工具來看，二手和新房的產品使用體驗差異也很大，其中房源模塊的問題尤為突出。如果二手房源產品體驗是80分，那新房可能只有20分。而房源是新房經紀人最重要的作業模塊，在產品滿意度貢獻權重最高。但滿意度偏低，因此其體驗問題亟待解決。

圖1 節選自《2021H1新房經紀人滿意度調研報告》

一、為什么改版

1.改版契機：

新房信息質量正穩步提升

很長一段時間以來，新房房源詳情頁是被“棄用”的，大多數經紀人使用第三方工具獲取房源信息。最底層原因是內部工具上房源信息質量差（不全不準）。而質量差則是由于之前在新房基礎建設人力不足、產品迭代慢，不能滿足城市業務發展需求。

城市為保證各自發展，使用了更靈活的第三方工具進行新房信息傳遞。2021年上半年隨著項目「新房基礎信息建設」的進行，新房信息質量正穩步提升，且城市也在使用第三方工具中發現諸多問題，這正是新房房源詳情頁重振旗鼓的最好契機。

2.產品價值：

促進新房信息線上化正循環

作為新房信息線上化的其中一環，新房房源詳情頁起著信息呈現的作用。好的呈現方式能夠幫助經紀人更好地消費信息，讓經紀人認可平臺產品和服務，同時經紀人的正向反饋也能激勵生產新房信息的駐場們更有動力去維護信息，從而促進新房信息線上化的正循環。

圖2 新房信息線上化流程

3.現狀問題：

欠缺規劃，信息可讀性差

改版前，新房詳情頁繼承著二手房詳情頁的頁面結構，但由于業務場景不同，當前信息組織方式并不適合新房經紀人的作業場景。另外近一年內，詳情頁在沒有統籌規劃下，陸續接入了“各自為戰”的新內容模塊。

新房詳情頁逐漸出現信息冗余和混亂的問題，直接影響了信息的呈現效率和可讀性。比如在新房業務中房源圖片一般是效果圖，不能像二手房一樣通過圖片識別房源，經紀人表示不會優先關注圖片，但卻占據了首屏1/4的空間。

圖3 詳情?頭圖占據高優空間卻無實際作用

諸如此類的問題還有很多，但散點式的解決問題可能會引發新的問題，因此設計應該重新 回歸起點，從用戶 使用場景出發。

二、新房經紀人

真實的看房流程

通過訪談經紀人和觀察他們的實際作業操作，我們發現經紀人需要查看房源內容的場景可以分為兩種—— 熟悉樓盤和 回答客戶問詢，兩種場景下的行為目標和對房源信息的關注順序有所不同。

圖4 經紀人看房的真實過程

看房場景1：熟悉樓盤

在「熟悉樓盤」的場景下， 經紀人是在自己準備功課，無客戶時識別一些好樓盤來找客戶，這一場景下，經紀人會經歷以下四個步驟：

識別（樓盤是什么）

吸引（樓盤亮點）

深入（了解房源細節）

匹配（房與客）

需要按照經紀人的判斷邏輯展示房源信息，逐漸引導其做成合理判斷。

看房場景2：回答客戶問詢

與二手房經紀人駐扎在小區附近不同的是，新房經紀人的客戶多來自線上商機咨詢，即客戶在 貝殼APP上看到某個感興趣的樓盤后向經紀人發起咨詢。經紀人 需要在短時間內的交流給客戶留下好印象，讓客戶信任自己，才能進一步產生線下看房行為促進成交。

而信任的第一來源便是經紀人對于客戶問題的快速又專業的解答。這一場景下，經紀人通常經歷3個步驟：

識別（樓盤是不是客戶感興趣的）

定位（查找客戶問題的答案）

回復（解答客戶問題）

對樓盤熟悉度高的經紀人，能夠將大部分樓盤信息背誦下來，直接回復客戶。但對于大多數經紀人來說， 需要先查找到相關樓盤的信息。尤其是目前多數新房經紀人的司齡都時長較短，快速查找到信息則對他們來說十分關鍵。

三、快速聚焦的

信息閱讀體驗

基于以上兩種看房場景，我們可以發現，經紀人查看房源信息是一個有規律的漸進式的判斷過程，而經紀人在其中的心路歷程正是對詳情頁改版設計最根本的依據。而且我們也發現，目前經紀人所使用的第三方工具內容的組織方式也基本符合上述場景。

綜合前期調研的所有結論，包括對經紀人使用反饋的收集、第三方工具內容的分析和經紀人看房流程的梳理，最終確定了本次改版的設計目標和設計策略，如下圖所示：

圖5 改版目標及策略

1.頁面結構重建，

符合經紀人看房流程

新房房源詳情頁的作用就是幫助經紀人在兩種場景下能夠輕松完成任務，那么就需要沿著經紀人的心路歷程對詳情頁內容進行更加合理的信息結構設計。

改版方案中，綜合兩種場景的看房流程，將詳情頁整體內容進行梳理歸類。在刪除冗余信息后，按照“識別→吸引→深入→匹配”的順序排列，保證經紀人在自然向下瀏覽時毫不費力地獲取房源信息。

這一順序下，“識別→定位→回復”也能同時得到滿足。

圖6 新版詳情頁結構

2.整合強關聯信息，

減少閱讀跳點

在前期調研中發現一個痛點：明明是關系緊密需要一起閱讀的信息卻分散在多處位置，造成經紀人閱讀時出現跳點和斷點。比如在了解戶型信息時，經紀人通常需要一起看戶型格局圖、戶型樣板間，貝殼也提供了靜態圖、視頻講解和VR三種形式。

但在舊版詳情頁中，戶型模塊只能看到戶型圖，樣板間信息需在頁面頭圖中查看。當經紀人想完整地看幾個戶型的格局和樣板間時，不得不在兩個位置來回跳動，不僅操作麻煩，也在不停中斷閱讀進程。因此改版時，我們將戶型相關的信息都集中在戶型模塊，經紀人可一次性完整地獲取戶型信息。

圖7 戶型信息模塊優化前后對比

在經紀人深入了解樓盤信息時，會涉及到戶型、樓棟、小區概況、區位配套和開發商/物業共五個維度的信息。在舊版詳情頁中，小區概況信息放在了二級頁面且入口在頁面頭部位置，而戶型等其他信息則位于頁面中下部。這種結構給經紀人帶來一定困擾，有的經紀人以為壓根沒有小區概況信息，知道入口的經紀人則需要在中途切換位置。

因此改版方案中，我們按照真實物理空間中從小到大的順序，將戶型、樓棟、小區概況、區位配套依次排列，即便經紀人只關注某幾個模塊信息，也不會迷失于找入口。

圖8 樓盤詳細信息優化前后對比

3.縮短路徑，

實現信息快速觸達

在完成結構和單個模塊的內容閱讀體驗優化后，我們發現了另一問題：新房房源的信息體量很大，為了讓經紀人在一級頁面能夠獲得核心完整的信息，頁面高度已經達到5屏。而在「回答客戶問詢」場景下，經紀人則需要快速查找到某個位置靠后的模塊信息，那么如何解決這個問題呢？

舊版中有常規的模塊定位導航，但問題是該導航無法在首屏暴露，經紀人需要上滑頁面再左滑Tab導航找到對應模塊內容。在需要即刻回復客戶時，這種方式肯定是不夠快速的。

于是，我們便增加了快捷導航，它固定在可見屏幕的右側，經紀人可一鍵定位至模塊位置。目前快捷導航呈現的4個入口也是調研經紀人后挑選出的高頻使用模塊，同時這4個定位點也基本能夠均分整體頁面，即便想看其他模塊，也能輔助快速定位。

圖9 詳情?導航優化前后對比

除了在整體結構上縮短觸達路徑，在單個模塊的內容查看上也做了細節交互調整。比如作業規則模塊細分了6個子分類，舊版方案是需要橫滑查看的Tab導航，經紀人反饋不知道可以橫滑，甚至有人不知道可以點擊切換分類。新版方案則優化成了標簽導航并將分類全部展示，足夠直接。

圖10 客戶規則分類優化前后對比

四、能夠快速捕捉的

"顯著線索"

盤源詳情頁作為B端新房信息承載最重要的頁面，體量大且繁雜，當海量內容如決堤般襲來時，信息被割裂的更加碎片化，經紀人往往會感到失焦，從而引起心理抵觸。

而詳情頁面向90%為司齡時長較短的經紀人，處在業務熟悉階段居多，會停留較長時間查找信息，導致講盤或熟盤的過程體驗感降低。因此，如何在短時間內引導經紀人快速觸達到有用的“線索”，降低經紀人的信息理解成本，找到記憶打點的形式則顯得尤為重要。

詳情頁改版的核心目的在于打造快速聚焦的閱讀體驗，提升新房信息線上化的服務體驗。根據產品定位及改版目標，我們對盤源工具中高價值信息進行強化感知，凸顯視覺重點，弱化次要信息，在吸引經紀人快速定位的同時，盡可能降低頁面其余元素的干擾。因此提煉了以下“顯著線索”：

1.視覺聚焦線索

這里我們以萊斯托夫效應為設計的切入點-什么是來萊斯托夫效應？意指在同質類材料中具有差異化表現，視覺突出便于記憶，實際上說明了材料的特獨性對大腦處理信息時起到一定作用。

例如詳情頁是一座山，我們可以通過“峰頂”和“谷底”的對比來抓取眼球，同等于用夸張或強化的形式去吸引注意力，直觀的幫助經紀人明確焦點信息是什么，從而降低其腦力資源的消耗。

如何聚焦信息？首先需要對盤源關鍵信息進行有效的聚類整合，其次無限貼合業務場景，獲取不同階段下經紀人的關注點及訴求，再以合適的差異化表現形式配合信息節奏，優化整體信息的透傳路徑。

（1）拆解功能，聚類整合

人的大腦擅長處理具有區塊感的內容，塊狀信息能夠快速抓住用戶焦點，我們可以把盤源詳情頁拆解成顆粒度不一的各類模塊，再進行歸納收攏。

對比舊版詳情頁中的盤源基礎信息結構散亂，對經紀人的閱讀及認知造成一定負擔，所以在設計中，我們把頁面拆解成樓盤賣點、基礎信息以及作業內容三大結構，在頭部信息處理上，將盤源賣點與基礎信息利用Z軸空間關系劃分了層級，重色塊與白卡片互相襯托，形成強烈對比，在保證賣點凸顯的同時也能強化卡片信息；

圖11 詳細?頭部優化前后對比

舊版頁面的戶型模塊與樣板間信息呈現位置不同，導致經紀人的閱讀割裂感很強，因此在新版設計中，對戶型信息做了功能比重的協調處理。基于熟盤或講盤特點，經紀人及客戶對于戶型圖的需求較高，因此在視覺上擴大其占比，強調一眼定位戶型模塊，同時集合三種功能，使卡片結構更加緊密，讓經紀人在有限的空間內能夠快速找到對應功能，提升整體的閱讀及操作效率。

圖12 戶型功能優化前后對比

（2）色彩定位，視覺抓取

由于人們的視覺更容易受到更大面積的影響，所以利用色彩差異化，對經紀人最為關注的賣點及激勵信息進行了色彩輔助突出，通過放大視覺對比，減輕經紀人的閱讀壓力、從而達到有效快速聚焦的目的。

首先樓盤賣點是輔助新手經紀人作業的核心信息，在特定場景下需要第一時間幫助決策和溝通，因此頭部以大面積藍色背景做襯托，在視覺上輔助經紀人快速定位，并與基礎信息進行了區域分割，在視覺上更聚焦于核心話術，便于更快找到且即時表達。

其次新房經紀人賦予激勵和規則的了解訴求比較大，需要實時關注政策及傭金激勵等變化情況，此類信息也是最能刺激經紀人后期的作業效果，所以在設計上做了較為夸張的處理。卡片采用對視覺搶眼的紅色背景，輔助“喇叭”插畫形式襯托內容，加深經紀人對于公告信息的認知和記憶。

圖13 色彩輔助效果圖

整體從屏效層面來說，頭部利用了色彩差異劃分了信息組，能夠保證在首屏快速聚焦到詳情?最核心的三塊信息，比舊版?面大大提升了信息觸達的效率。

2.認知理解線索

此次改版出發點是讓經紀人們能夠做到“傻瓜式閱讀”，盡可能降低其認知理解成本。我們可排列文本邏輯順序，明確引導路徑，從而形成有效焦點的內容組，讓用戶輕負擔地找到有用信息。

圖14 “傻瓜式”閱讀策略

（1）貼近用戶，彌補斷層

若想讓用戶感到好用，設計的核心還是要了解用戶當下目標，并去不斷貼近其工作路徑及閱讀習慣，站在對方視角去感知頁面呈現的效果是否達到目的，拉齊心智彌補認知斷層，防止以自身視角做判斷。

（2）給予規律，優化結構

根據線性瀏覽習慣，盤源基礎信息的呈現需要保證服務者的講盤順序及閱讀邏輯，在新版設計中，對有邏輯關系的信息產生聯系，給予規律性，保證經紀人的理解轉化。

我們基于理解順序及習慣，可對應表達價格、盤源屬性及標簽的親疏關系，通過緊密度讓用戶感知到信息組的規律。例如，盤源基礎卡片是要引導經紀人先關注盤源的相關價格，因此價格關聯的信息間距更緊密，其次是用途、面積、位置等屬性相關，最后利用標簽概括總結樓盤特性，再次強調整體盤源特點，從而由淺至深的強化用戶認知和記憶。

此次改版的視覺側重點是將信息差異放大，打造一定的記憶點，使得經紀人在進入詳情頁時，可不仔細查看信息，即可大致定位模塊內容，從而進行快速瀏覽，提升整體的信息閱讀效率。在這個過程中，不僅需要對業務場景下經紀人的作業邏輯進行把控，合理的梳理信息關系以及具有良好的表達形式，同時更多的是需要平衡自身感知與用戶感知，明確目標用戶的感知顆粒度大小，以對方視角有側重性的強化信息，這樣才能提升服務體驗。

文章來源：優設作者：姜佳欣

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.devb.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務