2020-5-1 資深UI設計者
今天和大家聊一個很多朋友常年卡在 P5/P6 需要關心的命題——如何從業(yè)務出發(fā)打造具有商業(yè)價值還能兼顧用戶體驗的設計，此篇不談理論，就通過 4 個經(jīng)典的重量級產(chǎn)品案例就給大家安排明白啥是「一拳超人」式體驗設計——就一個字「強」。
滴滴出行應該屬于大家的高頻使用 app，但是使用的功能一般還是集中在叫車流程，所以大家可能不太會關注到 CDX 設計團隊一個非常核心的設計成果——xpanel。
簡單來說 xpanel 就是一個附著于第一信息架構(gòu)層級上，垂直 Y 軸且支持 X 軸拓展滑動的 Feed 卡片位。內(nèi)容上分為「消息卡片」「主體卡片」「拓展卡片」三個維度，首屏保障除了「消息」與「主體」外三分之一「拓展卡片1」的露出。
但在簡單的交互背后蘊藏的是基于業(yè)務的 UGD（用戶增長設計）設計思考，這里引用 2018IXDC 會上滴滴主講人的原話來說就是：
對特定場景垂直領域的深耕和挖掘，尋找「接觸點」，幫助獲取更多的功能、內(nèi)容、服務、特性、品牌、運營甚至是喜好……進而實現(xiàn)業(yè)務的「有效增長」（轉(zhuǎn)化、變現(xiàn)、留存）。
通俗一點解釋就是 xpanel 利用主卡與拓展卡之間的信息架構(gòu)關系，把拓展卡平衡的分為幾類，比如「與產(chǎn)品功能相關的卡片」「與運營相關的卡片」等。
把本來被 LBS 地圖一屏內(nèi)搶占的空間通過簡易的交互模式補償回來了，這樣既不打破用戶的核心體驗 focus 在地圖與主卡上，同時又增強了運營、功能的玩法與拓展，可謂雙贏。
根據(jù)這幾年滴滴 xpanel 的線上應用，拓展卡片基本挖掘涵蓋了以下場景的露出：優(yōu)惠福利、出現(xiàn)卡券、會員體系、安全相關、出行提醒、拉新導流、運營活動等，未來可拓展的價值內(nèi)容會更多。看著各路出行類 app 又紛紛長期沿用 xpanel 的設計，想必線上的數(shù)據(jù)反饋應該也是很正向的。
在上篇文章《多維度解析 | 抖音vs快手的產(chǎn)品設計策略差異》中的商業(yè)化模塊里簡要提及過抖音的 Topiew 超級廣告位，這里單獨拿出來和大家解析一下它究竟有多6。
從功能角度看，它是一個從開屏延續(xù)到端內(nèi)視頻信息流的廣告位，占據(jù)了用戶從進入抖音的第一視覺。
從交互角度看，topview 主要展現(xiàn)以開屏沉浸式視頻 3s 播放→淡出互動轉(zhuǎn)化組件 3s（完美融入原生視頻信息流），剩余操作手勢與功能等同原生視頻信息流。
在這樣一個有著 1 億+第一曝光的產(chǎn)品位置，單純只做常規(guī)靜態(tài)開屏穩(wěn)當入賬不香嗎？事實是抖音確實讓它不香了，沒有創(chuàng)新就沒有新的收獲。基于業(yè)務和當前產(chǎn)品形態(tài)下的交互模式使抖音有一個天時地利的優(yōu)勢——沉浸式體驗，在這樣的交互模式下給視頻化的開屏提供了很好的承接入口。從開屏開啟到融入信息流，在交互形態(tài)的切換中又為廣告內(nèi)容的播放時長贏得了更多時間。
更可怕的一點是 3s 播放后融入原生視頻信息流中的 TopView 除了正常收割廣告轉(zhuǎn)化帶來的單量，還可以通過右側(cè)的主頁鏈接輕松引流進行粉絲沉淀（今天就算你不買，先關注我，成為我的潛在用戶，來日我再推一個新商品視頻，你可以第一時間看見也許感興趣就買單了）。
說完這些大家仔細回憶一下平常我們接觸的有視頻廣告的視頻平臺，別說 60s、30s，15s 我們都嫌長，但為啥 TopView 顯得相對沒那么惹人煩呢（上次留的思考題）？個人認為除了抖音在選擇合作品牌時會傾向符合平臺氣質(zhì)的品牌合作（細數(shù)它合作過的品牌：Mac、寶馬、林肯、vivo 等）保障廣告質(zhì)量和提供「跳過」外，直接融入信息淡出的互動組件會不僅會給用戶新奇感，還會激發(fā)用戶的互動欲望。
最后看一組數(shù)據(jù)（與寶馬合作數(shù)據(jù)），曝光數(shù)：1.1 億+；有效播放率：53.82%；點擊率：13.26%。所以你猜一個最長可以展示 60s 的品牌視頻內(nèi)容、同時進行品牌粉絲沉淀、良好體驗帶來更高有效播放的億級曝光廣告位能值多少錢？
2016 年淘寶啟動了一個項目要做一款內(nèi)容化欄目——以視頻為主，每晚更新一期，類比「一千零一夜」的故事。
那么在滿滿當當?shù)奶詫氝\營區(qū)里該選擇哪一個來試玩這個有趣的「新欄目」呢？是在頭部的 10 宮格里再擠進去一個圖標呢？還是在熱門推薦里擠出一個 tab 呢？還是做一個懸浮的右下角的運營位？顯然都不太合適。
根據(jù)這款產(chǎn)品每晚 6 點鐘才可以使用，早上 7 點就會消失的游戲規(guī)則，最適配它的入口是一個不占界面原生空間，同時又有一定儀式感的位置。于是下拉 loading 的大空區(qū)成為了設計師們考慮的陣地。
△ 不知道這個banner為什么要排擠我
但地方選好了，又有了新顧慮。因為 iOS 的用戶基本被系統(tǒng)洗腦了下拉手勢，對于他們來說下拉=刷新，貿(mào)然在下拉刷新的手勢基礎上再疊加一個無關聯(lián)的結(jié)果顯然是有風險的。因此從交互上需要界定 2 個維度的指標來保障新欄目的體驗。
反復試錯 2 個指標數(shù)據(jù)的實際體驗之后，新欄目有了安身之所，賜名「二樓」。進入「二樓」的整體交互和現(xiàn)在的短視頻產(chǎn)品玩法基本雷同，全屏豎滑切換，小圖標帶貨。下拉加載位的開發(fā)，從普通 loading 動效到運營位的植入基本被各類電商平臺輕松復刻了，因此這一切看上去更沒什么了得，但對于原創(chuàng)來說那畢竟是 4 年前。
談到豆瓣我算是半個老用戶了，豆瓣自身是個比較復雜的集合多條業(yè)務線分支（「小組」「同城」「閱讀」「音影」……）的多生態(tài)產(chǎn)品，這里我們主要拿它 18 年 6.0 大改版中影音模塊的詳情頁大改造來說事兒。
△ 可能有很多人已經(jīng)忘記6.0前的豆瓣電影詳情頁長啥樣了，帶你回顧一下。
看完對比圖，視力正常的朋友乍一看都能看出 6.0 版詳情頁整容得有多成功。但具體成功在哪里，可能不僅僅是好看這么簡單。
大背景從海報上智能取色雖然不算是什么稀奇的做法，但是加了適度的漸變應用在這里也可以說是非常的恰到好處了。另外深底色和視覺比重加大的外鏈區(qū)都突顯了「第三方播放」與「購票選座」的視覺感知。讓用戶沉浸在電影詳情中并引導他們走向「豆瓣的主要收入來源之一——電影票分銷與第三方視頻播放產(chǎn)品引流」正好是 6.0 豆瓣改版一個「小小的目標」——更務實（商業(yè)化）。
從交互層面看，且不說評論頭部吸底這個事情是不是也是因為 6.0 商業(yè)化的影響（評論區(qū)增加「話題」進行重點運營），這個交互本身我覺得還是很強大的。強大的體現(xiàn)在于良好的空間收納能力與信息拓展能力。我給它起了個好聽的名字叫-疊加上滑板（不好聽也認了吧，畢竟也沒有內(nèi)部人員告訴我他們是不是起名字了）
這里可能又會有很多人質(zhì)疑它與用戶已洗腦的上滑手勢之間的沖突，這點解釋起來和上文淘寶「二樓」有些類似，區(qū)別是豆瓣并沒有做上滑速度 or 距離的臨界值，只是把滑動區(qū)域做了隔離。而對比它的效仿者 boss 直聘，人家倒是在交互上做了進一步優(yōu)化，適配自己的產(chǎn)品情況做了上滑疊層卡隱藏和上滑距離臨界值。
這個故事告訴我們，要抄也要抄得比人家的交互更優(yōu)秀才不丟人昂。
文章來源：優(yōu)設 作者：Nana的設計錦囊