用4个经典的重量级产品案例，告诉你什么是标杆式体验设计

今天和大家聊一个很朋常年卡在 P5/P6 需要关心的命题——何从业务出打造具有商业价值能兼顾用户体验的设计，此篇谈论，就通过 4 个经典的重量级产品案例就给大家安排啥是「一拳超人」式体验设计——就一字「强」。

滴滴出行-xpanel

滴滴出行应该属于家的高频使用 app，但使用的功能一般还集中叫车流程，所以家可能不太会关注到 CDX 设团队一非常核的设果——xpanel。

简单 xpanel 就一于第一信息架构层级，垂直 Y 轴且支持 X 轴拓展滑动的 Feed 卡片。内分「消息卡片」「主体卡片」「拓展卡片」三维度，首屏保障除了「消息」与「主体」外三分之一「拓展卡片1」的露出。

但在简的交互背后蕴藏的是基于业的 UGD（用户增长计）计思考，这引用 2018IXDC 会上滴滴主讲人的话来说就是：

对定景垂直领域的深耕和挖掘，寻找「触点」，帮助获取更多的功能、内容、服、性、品牌、运营甚至是喜好……进而实现业的「有效增长」（转化、变现、留存）。

通俗一点解释就 xpanel 利用主卡与拓展卡之间的信息架构关系，把拓展卡平衡的分几类，比如「与产品功能相关的卡片」「与运营相关的卡片」。

把本来被 LBS 地图一屏内抢占的空间通过简易的交互模式补偿回了，这样既不打破用户的核体验 focus 图与主卡，同时又增强了运营、功能的玩法与拓展，可谓赢。

根据这年滴滴 xpanel 的线上应用，拓展卡片基本挖掘涵盖了以下景的露出：优惠福利、出现卡券、会员体系、安全相关、出行提醒、拉新导流、运营活动等，未来可拓展的价值内容会更多。着各路出行类 app 纷纷长期沿用 xpanel 的计，想必线上的数据反馈应该也是正向的。

抖音-TopView

篇文章《多维度解析 | 抖音vs手的产品设策略差异》中的商业化模块里简提及过抖音的 Topiew 超级广告，这里单独拿出家解析一下它究竟多6。

从功能角度看，它是一个从开屏延续到端内视频信息流的告位，占据用户从进抖音的一视。

从交互角度看，topview 主展以屏沉浸式视频 3s 播→淡出互动转化组件 3s（完融入原视频信息流），剩余操作手势与功能同原视频信息流。

这样一 1 亿+第一曝光的产品置，单纯只常规静态屏稳当入账不吗？事实抖音确实让它不了，创新就新的收获。基于业务当产品形态下的交互模式使抖音一天时利的优势——沉浸式体验，这样的交互模式下给视频化的屏提供了很好的承接入口。从屏启到融入信息流，交互形态的切换中又广告内的播时赢得了多时间。

更可怕的一点是 3s 播放后融入生视频息流中的 TopView 除了正常收割广告转化带来的量，还可以通过右侧的主页链轻引流进行丝沉淀（今就算你不买，先关注，成为的潜在用户，来日再推一个新商品视频，你可以第一间见也许兴趣就买了）。

说这些大仔细忆一平我们接触的有视频广告的视频平台，别说 60s、30s，15s 我们都嫌长，但为啥 TopView 显得相对没那么惹人烦呢（上次留的思考题）？个人认为除了抖音在择合作牌时会倾向符合平台气质的牌合作（细数它合作过的牌：Mac、宝马、林肯、vivo 等）保障广告质量和供「跳过」外，直接融入信息淡的互组件会仅会给户奇感，还会激发户的互欲望。

最后看组数据（与宝合作数据），曝数：1.1 亿+；有效播放率：53.82%；击率：13.26%。所以你猜个最长可以展示 60s 品视频内容、时进品粉丝沉淀、良好体验带来更高有效播放亿级曝广告位能值多少钱？

淘宝-二楼

2016 年淘宝启动了个项目要做款内容化栏目——以视频为主，晚更新期，类比「千零夜」故事。

么在满满当当的淘宝运营区里该选择哪一个来试玩个有趣的「新栏目」呢？是在头部的 10 宫里挤进去一个图标呢？还是在热门推荐里挤出一个 tab 呢？还是做一个悬浮的右下角的运营位？显不太合适。

根据这款产品每晚 6 点钟可以使用，早 7 点就会消失的游戏规则，配它的入口一不占界面原空间，同时又一仪式感的置。于下拉 loading 的空区了设师们考虑的阵。

△ 不知道这banner什么排挤我

但地方选好了，有了新顾虑。因为 iOS 的用户基本被系统洗脑了下拉势，对于来说下拉=刷新，然在下拉刷新的势基础上再叠加一个无关的结果显然是有风险的。因此从交互上需要界定 2 个维度的指标来保障新栏目的体验。

• 下拉速度（速度临界：速度多？→刷新，多慢？→新栏目）——以速度优先衡指标（只速度，拉的距离再也→刷新）
• 下拉距离（距离临界值：拉多少距离进入新栏目？）——兼顾用户操作难度

反复试错 2 个指标数据的际验之，新栏目有安身之所，赐名「二楼」。进「二楼」的整互和现在的短视频产品玩法基雷同，屏竖滑切换，小图标带货。下拉加载位的开，从普通 loading 动效到运营位的植基被各类电平台轻松复刻，因此一切看上去更没什么得，但对原创来说毕竟是 4 年前。

豆瓣-叠加上滑板

谈到瓣我算是半个用户了，瓣自身是个比较复杂合多条业务线分支（「小组」「城」「阅读」「音影」……）多生态品，这里我们主要拿它 18 年 6.0 大改版影音模块详情页大改造来说事儿。

△ 可能有很多已经忘记6.0前瓣电影详情页长啥样了，带你回顾下。

看完对比图，视力正常的朋乍一看能看出 6.0 版详情页整容得有成功。但具成功在哪里，能不仅仅是看么简单。

背景从海报智能取色虽然不算什么稀奇的法，但加了度的渐变应用这里也可以非常的恰到好处了。另外深底色视觉比重加的外链区都突显了「第三方播」与「购票选」的视觉感知。让用户沉浸电影详中并引导他们走向「豆瓣的主收入源之一——电影票分与第三方视频播产品引流」好 6.0 豆瓣改版一「小小的目标」——务实（商业化）。

从交互层面看，且不论部吸底这事不也因 6.0 商业化的影响（论区增加「话题」行重点运营），这交互本身我觉得还很强的。强的体于良好的空间收纳能力与信息拓展能力。我给它起了好听的字叫-叠加滑板（不好听也认了吧，毕竟也内部人员告诉我他们不起字了）

这可能会有多人质疑它用户已洗脑的上滑势之间的冲突，这点解释起来和上文淘「二楼」有些类似，别是豆瓣并没有做上滑速度 or 距离的临界值，只是把滑动域做了隔离。而对比它的效仿者 boss 直聘，人家倒是在交互上做了进一步优化，适配的产品情况做了上滑叠层卡隐藏和上滑距离临界值。

这故事告诉我们，抄也抄得比人家的交互优秀不丢人昂。

小结

到这里 4 典的体验设 case 就家盘点完毕了，我们日常设中如果需借鉴也好不搬硬套，根据自己的产品业务况行配，理据抄。

最后多说一句，完此文最大的收获可能不是今你学会了多少种计界面的方法，而是一种计的思维，体点说也就是下次面的候再遇面官问你「你觉得现在产品计有哪些你觉得好的计可以聊聊吗」的候希望你能想起。

注作者的微信公众号：「Nana的设计锦囊」