編輯導語：LOFT式交互結構逐漸變得常見，那么這一交互結構有哪些優勢？一方面，這一交互結構給用戶帶來了新鮮感，解除了用戶疲勞；另一方面，這一交互結構也能一定程度上實現層級聯動。本篇文章里，作者就LOFT式交互做了分析，一起來看一下。

還不知道什么是LOFT結構的，可以查看我上一篇：百度竟然在APP里做起了空間設計？

最近在淘寶特色頻道和BOSS直聘也看到了同樣的結構，可以隱約感覺到這種交互結構逐漸成為主流設計趨勢的可能性。按照慣例，我們來逐步拆解分析一下該結構對于產品/業務的價值增益。

一、信息架構展平

以往界面在認知層面構建和用戶價值滲透之間，往往需要層級跳轉，跳轉就必然帶來操作成本和轉化漏損。

LOFT結構針對該問題進行了框架層的全局調優，在一個頁面中說了三件事：我是誰？我有什么？你能在我這做什么？極致壓縮了產品/服務的觸達路徑，和用戶的決策路徑。

二、層級聯動，決策提效

我們在餐廳點菜都會有這個體驗：落座之后打開點評去查看這家店的人氣top10菜品，然后喊服務員過來點單。

其中查看推薦榜單可以實時影響我們的下單決策，這是一種聯動體驗。

LOFT結構亦如此，用戶在心智層（底層）捕獲的內容可以實時影響其在決策層（浮層）的行為，比如在BOSS直聘浮層瀏覽職位時聯想到某些信息，促使用戶返回底層去查詢關聯信息，再回到浮層進行二次篩選；或在豆瓣影評浮層中看到某些細節時，回到底層去搜索相關電影介紹，再返回浮層繼續瀏覽。

三、布局創新，提升用戶愉悅感

傳統的縱向堆疊式布局，易引起失焦和感官疲勞。LOFT結構帶來的差異化創新體驗可以緩解疲勞感，且由于底層和浮層兩種空間形態各司其職，使整體頁面的表達有重點有層次，頁面豐富性相比傳統布局大大提升，提升用戶愉悅度。

愉悅度的提升會直接帶來頁面瀏覽時長的增長，提高產品/服務觸達概率，間接利于運營轉化。

上一篇發出后，立馬有同學提問：像淘寶商詳頁的評價區，是不是可以整個模塊做成LOFT浮層，嵌入商詳頁做成類似的結構？解決了看評價每次都要跳轉的問題。

乍看之下想法挺好，但從產品邏輯層面推導，該場景下LOFT結構缺乏合理性。

原因1：商詳頁的核心目標是引導下單購買，因此本身就是非常需要圖文、視頻多元信息去表達商品的重營銷陣地，需要給予相當的屏占比，不適合再出讓空間給到L評價區浮層。加之運營活動期間平臺和商戶會上線各種促銷banner、notice bar，導致原本擁擠的頁面更加捉襟見肘。

原因2：商詳頁底部具有最高優先級的操作通欄，如評價區浮層與通欄并存，則兩者占據的高度基本覆蓋了大拇指的便捷操作區，導致上滑瀏覽商品圖文詳情的有效距離縮短，影響信息捕捉效率。且由于與通欄并列布局，拉起評價區浮層的動作極容易引發誤觸操作，嚴重影響商品瀏覽體驗。

原因3：商品評價區也是圖文、視頻傳播的多維內容陣地，附帶的信息量并不少于商詳頁本身，如將兩者結構層級拍平會導致整個頁面信息量過載，失去重心和對比度，影響用戶構建產品心智。

以上，我認為商詳頁場景并不適合LOFT式結構的交互改造。

那什么樣的場景適用于該結構呢？我們可以看一下百度百科小程序、豆瓣影評、BOSS直聘公司詳情、淘寶特色頻道這幾個產品的特征。

1）百度百科里底層內容從屬于浮層

底層側重于對于明星/地點的圖文、視頻包裝，用直觀的內容快速構建用戶心智；浮層即原本的結構化詞條釋義，提供最基礎的信息查閱功能，浮層不支持瀏覽位置記憶。插一句，百科或許未必適合這種交互，看最新版已經把浮層占比大大提高，而且頂邊加了上滑引導，估計是收到了大量負面反饋。

2）豆瓣里影評和討論屬于電影關聯信息

底層是對電影評分、劇情、演職員、預告/花絮、短評等簡介，甚至包含了選座購票的場景化衍生功能；浮層是影評和討論，邏輯上影評也屬于電影關聯信息，因而底層下滑到底可以拉起影評浮層。從屬內容的前置曝光——復雜的嵌套式拓撲結構在前端被簡化。

3）BOSS直聘里JD列表從屬于公司詳情

底層是對公司發展沿革、業務、工商等基礎信息的介紹，甚至包含員工在社區發表的工作感受，以主客觀的信息構建用戶心智；浮層即職位列表，也是用戶到達該頁面的核心目標聚焦區域。BOSS比較好的一點在于，下滑瀏覽底層內容的時候，底部的小塊浮層會隱去，不干擾沉浸式瀏覽，且浮層支持瀏覽位置記憶。

4）淘寶特色頻道里導購模塊屬于SKU頻道

底層是為對應頻道構建產品心智的核心區域，幫助用戶在第一時間捕捉不同頻道的差異性，給用戶傳遞專屬感，甄選行業最核心的運營優質內容進行展現（摘自淘寶設計公眾號）；浮層整合了所有導購模塊，形成高集中度的轉化區域。因導購非內容傳播類，底層和浮層的內容多不需要聯動觀察，浮層也可以舍棄瀏覽位置記憶的功能點。

其他一些諸如導航、打車、外賣類產品界面也會采用地圖層+功能浮層的類似結構，但由于浮層的內容側重相關推薦和付費運營，與地圖層非強關聯，在信息架構上并非從屬關系，與上文的LOFT案例存在差異，大家在研究&設計的時候須重點區分。

本文由 @賞酒二兩 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議