4個(gè)成為(wèi)标杆的超強體(tǐ)驗設計(jì)

如何從業務出發打造具有(yǒu)商業價值還(hái)能兼顧用戶體(tǐ)驗的設計(jì), 就通(tōng)過5個(gè)經典的重量級産品案例就給大(dà)家(jiā)安排明(míng)白~

今天和(hé)大(dà)家(jiā)聊一個(gè)很(hěn)多(duō)鐵(tiě)汁長年卡在P5/P6需要關心的命題——如何從業務出發打造具有(yǒu)商業價值還(hái)能兼顧用戶體(tǐ)驗的設計(jì)，此篇不談理(lǐ)論，就通(tōng)過5個(gè)經典的重量級産品案例就給大(dà)家(jiā)安排明(míng)白啥是“一拳超人(rén)”式體(tǐ)驗設計(jì)——就一個(gè)字“強”。

CASE 1. 滴滴出行(xíng)-xpanel

滴滴出行(xíng)應該屬于大(dà)家(jiā)的高(gāo)頻使用app，但(dàn)是使用的功能一般還(hái)是集中在叫車(chē)流程，所以鐵(tiě)汁們可(kě)能不太會(huì)關注到CDX設計(jì)團隊一個(gè)非常核心的設計(jì)成果——xpanel。

簡單來(lái)說xpanel就是一個(gè)附着于第一信息架構層級上(shàng)，垂直Y軸且支持X軸拓展滑動的Feed卡片位。內(nèi)容上(shàng)分為(wèi)“消息卡片”“主體(tǐ)卡片”“拓展卡片”三個(gè)維度，首屏保障除了“消息”與“主體(tǐ)”外三分之一“拓展卡片1”的露出。

但(dàn)在簡單的交互背後蘊藏的是基于業務的UGD（用戶增長設計(jì)）設計(jì)思考，這裏引用2018IXDC會(huì)上(shàng)滴滴主講人(rén)的原話(huà)來(lái)說就是：

對特定場(chǎng)景垂直領域的深耕和(hé)挖掘，尋找“接觸點”，幫助獲取更多(duō)的功能、內(nèi)容、服務、特性、品牌、運營甚至是喜好...進而實現業務的“有(yǒu)效增長”(轉化、變現、留存）。

通(tōng)俗一點解釋就是xpanel利用主卡與拓展卡之間(jiān)的信息架構關系，把拓展卡平衡的分為(wèi)幾類，比如“與産品功能相關的卡片”“與運營相關的卡片”等。

把本來(lái)被LBS地圖一屏內(nèi)搶占的空(kōng)間(jiān)通(tōng)過簡易的交互模式補償回來(lái)了，這樣既不打破用戶的核心體(tǐ)驗focus在地圖與主卡上(shàng)，同時(shí)又增強了運營、功能的玩法與拓展，可(kě)謂雙赢。

根據這幾年滴滴xpanel的線上(shàng)應用，拓展卡片基本挖掘涵蓋了以下場(chǎng)景的露出：優惠福利、出現卡券、會(huì)員體(tǐ)系、安全相關、出行(xíng)提醒、拉新導流、運營活動等，未來(lái)可(kě)拓展的價值內(nèi)容會(huì)更多(duō)。看着各路出行(xíng)類app又紛紛長期沿用xpanel的設計(jì)，想必線上(shàng)的數(shù)據反饋應該也是很(hěn)正向的。

CASE 2. 抖音(yīn)-TopView

在上(shàng)篇文章《多(duō)維度解析 | 抖音(yīn)vs快手的産品設計(jì)策略差異》中的商業化模塊裏簡要提及過抖音(yīn)的Topiew超級廣告位，這裏單獨拿(ná)出來(lái)和(hé)大(dà)家(jiā)解析一下它究竟有(yǒu)多(duō)6。

從功能角度看，它是一個(gè)從開(kāi)屏延續到端內(nèi)視(shì)頻信息流的廣告位，占據了用戶從進入抖音(yīn)的第一視(shì)覺。

從交互角度看，topview主要展現以開(kāi)屏沉浸式視(shì)頻3s播放→淡出互動轉化組件3s（完美融入原生(shēng)視(shì)頻信息流），剩餘操作(zuò)手勢與功能等同原生(shēng)視(shì)頻信息流。

在這樣一個(gè)有(yǒu)着1億+第一曝光的産品位置，單純隻做(zuò)常規靜态開(kāi)屏穩當入賬不香嗎？事實是抖音(yīn)确實讓它不香了，沒有(yǒu)創新就沒有(yǒu)新的收獲。基于業務和(hé)當前産品形态下的交互模式使抖音(yīn)有(yǒu)一個(gè)天時(shí)地利的優勢——沉浸式體(tǐ)驗，在這樣的交互模式下給視(shì)頻化的開(kāi)屏提供了很(hěn)好的承接入口。從開(kāi)屏開(kāi)啓到融入信息流，在交互形态的切換中又為(wèi)廣告內(nèi)容的播放時(shí)長的赢得(de)了更多(duō)時(shí)間(jiān)。

更可(kě)怕的一點是3s播放後融入原生(shēng)視(shì)頻信息流中的TopView除了正常收割廣告轉化帶來(lái)的單量，還(hái)可(kě)以通(tōng)過右側的主頁鏈接輕松引流進行(xíng)粉絲沉澱（今天就算(suàn)你(nǐ)不買，先關注我，成為(wèi)我的潛在用戶，來(lái)日我再推一個(gè)新商品視(shì)頻，你(nǐ)可(kě)以第一時(shí)間(jiān)看見也許感興趣就買單了）。

說完這些(xiē)大(dà)家(jiā)仔細回憶一下平常我們接觸的有(yǒu)視(shì)頻廣告的視(shì)頻平台，别說60s、30s，15s我們都嫌長，但(dàn)為(wèi)啥TopView顯得(de)相對沒那(nà)麽惹人(rén)煩呢（上(shàng)次留的思考題）？個(gè)人(rén)認為(wèi)除了抖音(yīn)在選擇合作(zuò)品牌時(shí)會(huì)傾向符合平台氣質的品牌合作(zuò)（細數(shù)它合作(zuò)過的品牌：Mac、寶馬、林肯、vivo等）保障廣告質量和(hé)提供“跳(tiào)過”外，直接融入信息淡出的互動組件會(huì)不僅會(huì)給用戶新奇感，還(hái)會(huì)激發用戶的互動欲望。

最後看一組數(shù)據（與寶馬合作(zuò)數(shù)據），曝光數(shù)：1.1億+；有(yǒu)效播放率：53.82%；點擊率：13.26%。所以你(nǐ)猜一個(gè)最長可(kě)以展示60s的品牌視(shì)頻內(nèi)容、同時(shí)進行(xíng)品牌粉絲沉澱、良好體(tǐ)驗帶來(lái)更高(gāo)有(yǒu)效播放的億級曝光廣告位能值多(duō)少(shǎo)錢(qián)??？

CASE 3.淘寶-二樓

2016年淘寶啓動了一個(gè)項目要做(zuò)一款內(nèi)容化欄目——以視(shì)頻為(wèi)主，每晚更新一期，類比“一千零一夜”的故事。

那(nà)麽在滿滿當當的淘寶運營區(qū)裏該選擇哪一個(gè)來(lái)試玩這個(gè)有(yǒu)趣的“新欄目”呢？是在頭部的10宮格裏再擠進去一個(gè)圖标呢？還(hái)是在熱門(mén)推薦裏擠出一個(gè)tab呢？還(hái)是做(zuò)一個(gè)懸浮的右下角的運營位？顯然都不太合适。

根據這款産品每晚6點鍾才可(kě)以使用，早上(shàng)7點就會(huì)消失的遊戲規則，最适配它的入口是一個(gè)不占界面原生(shēng)空(kōng)間(jiān)，同時(shí)又有(yǒu)一定儀式感的位置。于是下拉loading的大(dà)空(kōng)區(qū)成為(wèi)了設計(jì)師(shī)們考慮的陣地。

不知道(dào)這個(gè)banner為(wèi)什麽要排擠我

但(dàn)地方選好了，又有(yǒu)了新顧慮。因為(wèi)iOS的用戶基本被系統洗腦(nǎo)了下拉手勢，對于他們來(lái)說下拉=刷新，冒然在下拉刷新的手勢基礎上(shàng)再疊加一個(gè)無關聯的結果顯然是有(yǒu)風險的。因此從交互上(shàng)需要界定2個(gè)維度的指标來(lái)保障新欄目的體(tǐ)驗。

1.下拉速度（速度臨界值：速度多(duō)快？→刷新，多(duō)慢？→新欄目）——以速度為(wèi)優先衡量指标（隻要速度快，拉的距離再大(dà)也是→刷新）

2.下拉距離（距離臨界值：拉到多(duō)少(shǎo)距離進入新欄目？）——兼顧單手用戶操作(zuò)難度

反複試錯2個(gè)指标數(shù)據的實際體(tǐ)驗之後，新欄目有(yǒu)了安身之所，賜名“二樓”。進入“二樓”的整體(tǐ)交互和(hé)現在的短(duǎn)視(shì)頻産品玩法基本類同，全屏豎滑切換，小(xiǎo)圖标帶貨。下拉加載位的開(kāi)發，從普通(tōng)loading動效到運營位的植入基本被各類電(diàn)商平台輕松複刻了，因此這一切看上(shàng)去更沒什麽了得(de)，但(dàn)對于原創來(lái)說那(nà)畢竟是4年前。

CASE 4. 豆瓣-疊加上(shàng)滑闆

談到豆瓣我算(suàn)是半個(gè)老用戶了，豆瓣自身是個(gè)比較複雜的集合多(duō)條業務線分支（“小(xiǎo)組”“同城”“閱讀”“音(yīn)影(yǐng)”...）的多(duō)生(shēng)态産品，這裏我們主要拿(ná)它18年6.0大(dà)改版中影(yǐng)音(yīn)模塊的詳情頁大(dà)改造來(lái)說事兒。

可(kě)能有(yǒu)很(hěn)多(duō)人(rén)已經忘記6.0前的豆瓣電(diàn)影(yǐng)詳情頁長啥樣了，帶你(nǐ)回顧一下。

看完對比圖，視(shì)力正常的鐵(tiě)汁咋一看都能看出6.0版詳情頁整容的有(yǒu)多(duō)成功。但(dàn)具體(tǐ)成功在哪裏，可(kě)能不僅僅是好看這麽簡單。

大(dà)背景從海報上(shàng)智能取色雖然不算(suàn)是什麽稀奇的做(zuò)法，但(dàn)是加了适度的漸變應用在這裏也可(kě)以說是非常的恰到好處了。另外深底色和(hé)視(shì)覺比重加大(dà)的外鏈區(qū)都突顯了“第三方播放”與“購票(piào)選座”的視(shì)覺感知。讓用戶沉浸在電(diàn)影(yǐng)詳情中并引導他們走向“豆瓣的主要收入來(lái)源之一——電(diàn)影(yǐng)票(piào)分銷與第三方視(shì)頻播放産品引流”正好是6.0豆瓣改版一個(gè)“小(xiǎo)小(xiǎo)的目标”——更務實（商業化）。

從交互層面看，且不說評論頭部吸底這個(gè)事情是不是也是因為(wèi)6.0商業化的影(yǐng)響（評論區(qū)增加“話(huà)題”進行(xíng)重點運營），這個(gè)交互本身我覺得(de)還(hái)是很(hěn)強大(dà)的。強大(dà)的體(tǐ)現在于良好的空(kōng)間(jiān)收納能力與信息拓展能力。我給它起了個(gè)好聽(tīng)的名字叫-疊加上(shàng)滑闆（不好聽(tīng)也認了吧(ba)，畢竟也沒有(yǒu)內(nèi)部人(rén)員告訴我他們是不是起名字了）

這裏可(kě)能又會(huì)有(yǒu)很(hěn)多(duō)鐵(tiě)汁質疑它與用戶已洗腦(nǎo)的上(shàng)滑手勢之間(jiān)的沖突，這點解釋起來(lái)和(hé)上(shàng)文淘寶“二樓”有(yǒu)些(xiē)類似，區(qū)别是豆瓣并沒有(yǒu)做(zuò)上(shàng)滑速度or距離的臨界值，隻是把滑動區(qū)域做(zuò)了隔離。而對比它的效仿者boss直聘，人(rén)家(jiā)倒是在交互上(shàng)做(zuò)了進一步優化，适配自己的産品情況做(zuò)了上(shàng)滑疊層卡隐藏和(hé)上(shàng)滑距離臨界值。

這個(gè)故事告訴我們，要抄也要抄的比人(rén)家(jiā)的交互更優秀才不丢人(rén)昂。

小(xiǎo)結

到這裏4個(gè)經典的體(tǐ)驗設計(jì)case就和(hé)大(dà)家(jiā)盤點完畢了，我們在日常設計(jì)中如果需要借鑒也最好不要生(shēng)搬硬套，根據自己的産品業務情況進行(xíng)适配，有(yǒu)理(lǐ)有(yǒu)據的抄~

最後多(duō)說一句，看完此文最大(dà)的收獲可(kě)能不是今天你(nǐ)又學會(huì)了多(duō)少(shǎo)種設計(jì)界面的方法，而是一種設計(jì)的思維，具體(tǐ)點說也就是下次面試的時(shí)候再遇到面試官問你(nǐ)“你(nǐ)覺得(de)現在産品設計(jì)裏有(yǒu)哪些(xiē)你(nǐ)覺得(de)好的設計(jì)可(kě)以聊聊嗎”的時(shí)候希望你(nǐ)能想起我，hiahiahia~

本文标簽：