LOFT式交互,真的普及開了
編輯導語: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協議
????
現在好多軟件都在用LOFT式交互結構,剛開始改版的時候還不是很適應,用過一段時間后感覺挺好用的,頁面有層次感。
豆瓣影評那個頁面的使用習慣培養了一大群人的心智
是被標題吸引進來的,以前只知道loft是房子的一種類型,看到這個標題還挺有趣的,看完之后了解了LOFT式交互結構了。
這篇文章寫得太詳細了,給作者點贊!
其實我不太了解LOFT式交互結構,看完這篇文章懂啦?。?/p>