专业的短链接生成工具
链接域名
短网址有效期
盘点 | 滴滴、抖音、淘宝、豆瓣这4个成为标杆的超强体验设计
更新时间：2025-5-2 21:03:09 作者：爱短链
今天，我想和大家谈谈铁汁多年卡P5/P6需要关注的命题——如何从业务开始创建具有商业价值和用户体验的设计，本文不谈论理论，通过五个经典的重量级产品案例安排你了解什么是一拳超人体验设计——一个词强。
CASE 1. 滴滴出行-xpanel 滴滴出行应该属于每个人的高频使用app，但使用的功能一般集中在叫车过程中，铁汁可能不太注意CDX设计团队是一个非常核心的设计成果——xpanel。
简单来说xpanel它是一个垂直Y轴，附着在第一信息架构层上，支持X轴的扩展和滑动Feed卡片位置。
内容分为三个维度：新闻卡、主卡和扩展卡。
第一个屏幕保证了除新闻和主体外扩展卡1三分之一的曝光。
但在简单的互动背后，它是基于业务的UGD设计思维(用户增长设计)在此引用2018IXDC会上滴滴主讲人的原话是: 寻找具体场景垂直领域的接触点，帮助获得更多的功能、内容、服务、特点、品牌、运营甚至偏好…然后实现业务的有效增长(转化、实现、留存)。
流行的解释是xpanel利用主卡与扩展卡的信息架构关系，将扩展卡的平衡分为与产品功能相关的卡、与运营相关的卡等几类。
把本来被LBS通过简单的交互模式补偿地图一屏中占用的空间，既不打破用户的核心体验focus在地图和主卡上，同时增强了操作和功能的玩法和拓展，可谓双赢。
根据滴滴这几年xpanel对于在线应用，扩展卡的基本挖掘涵盖了以下场景：优惠福利、优惠券、会员制度、安全相关性、旅行提醒、新分流、运营活动等，未来将有更多可扩展的价值内容。
看看各种旅行类别app又长期使用xpanel在线数据反馈也应该非常积极。
CASE 2. 抖音-TopView 多维分析 | 抖音vs《快手产品设计策略差异》中的商业模块简要提到了抖音Topiew超级广告空间，这里单独拿出来和大家分析一下它有多6。
从功能的角度来看，它是一个从开屏延续到端内视频信息流的广告空间，占据了用户从进入抖音的第一视觉。
从互动的角度来看，topview主要展示开屏沉浸式视频3s播放→淡出交互转换组件3s(完美融入原生视频信息流)，剩余操作手势和功能等同于原生视频信息流。
这样一个有1亿 第一个曝光的产品位置，单纯做常规静态开屏稳当入账不香吗？事实是音真的让它不香，没有创新就没有新的收获。
基于业务和当前产品形式的交互模式，抖音具有正确的时间和地点的优势——沉浸式体验，为视频屏幕开放提供了良好的入口。
从打开屏幕到融入信息流，它为广告内容的播放时间赢得了更多的时间。
更可怕的是3s播放后融入原生视频信息流TopView除了正常收获广告转换带来的订单量外，粉丝沉淀也可以通过右侧主页链接轻松排水（即使你今天不买，也要先关注我，成为我的潜在用户，明天我会推出一个新的商品视频，你可以第一次看到你可能感兴趣）。
说完这些，让我们仔细回忆一下我们通常接触的视频广告平台，更不用说60了s、30s，15s我们都太长了，但为什么呢？TopView看起来没那么烦人(上次留下的思考题)？就我个人而言，我认为抖音在选择合作品牌时倾向于与平台气质的品牌合作其合作品牌：Mac、宝马，林肯，vivo除了保证广告质量和提供跳过外，直接融入信息的互动组件不仅会给用户一种新奇感，还会激发用户的互动欲望。
最后看一组数据(与宝马合作的数据)，曝光率:1.1亿 ；有效播放率:53.82%；点击率:13.26%。
所以你猜一个最长可以显示60s品牌视频内容，同时沉淀品牌粉丝，良好的体验带来更高1亿曝光广告空间值多少钱？ CASE 3.淘宝-二楼 2016年，淘宝推出了一个内容栏目——以视频为主，每晚更新一期，类比一千零一夜的故事。
那么，在满满的淘宝运营区，我们应该选择哪一个来尝试这个有趣的新栏目呢？头部的10个宫格里挤进另一个图标？还是在流行的推荐中挤出一个？tab呢？还是在右下角做一个悬挂的操作位置？显然不合适。
根据该产品每晚6点才能使用的游戏规则，游戏规则将在早上7点消失。
最适合它的入口是一个位置，不占据界面的原始空间，有一定的仪式感。
所以下拉loading大空区已成为设计师考虑的阵地。
不知道这个banner为什么要排挤我？ 但是选择了地方，又有了新的顾虑。
iOS下拉手势基本上是系统洗脑的，对他们来说是下拉手势=刷新，在下拉刷新手势的基础上叠加一个不相关的结果显然是有风险的。
因此，有必要定义两个维度的指标，以确保新列的体验。
1.下拉速度(速度临界值:速度有多快？→刷新，多慢？→新栏目)-以速度为优先指标(只要速度快，拉的距离再大→刷新） 2.下拉距离(距离临界值:进入新栏目的距离是多少？)-考虑单手用户操作难度 经过反复尝试和错误两个指标数据的实际体验，新栏目有了一个定居的地方，并被命名为二楼。
进入二楼的整体互动与当前的短视频产品基本相同，全屏垂直滑切换，小图标带货。
下拉加载位的开发，从普通loading从动态效果到操作位置的植入基本上很容易被各种电子商务平台复制，所以所有这些看起来都，但毕竟是四年前。
CASE 4. 豆瓣-叠加滑板 说到豆瓣，我是半个老用户。
豆瓣本身就是一个复杂的多条业务线分支(小组、同城、阅读、音影…）多生态产品，这里我们主要以18年6.0大改版中影音模块详情页大改造为例。
很多人可能已经忘记了6.0之前豆瓣电影的详情页面是什么样子了，带你回顾一下。
看完对比图，可以看出6.0版详情页整容有多成功。
但是成功在哪里，可能不仅仅是好看。
虽然大背景从海报上智能着色并不少见，但在这里添加适度的渐变应用也可以说是非常恰当的。
此外，深背景色和视觉比例增加的外链区突出了第三方播放和选票的视觉感知。
让用户沉浸在电影细节中，引导他们走向豆瓣的主要收入来源之一——电影票分销和第三方视频播放产品排水，正好是豆瓣6.0改版的小目标——更务实(商业化)。
从互动的角度来看，更不用说评论头部底部是否也是由于6.0商业化的影响（评论区域增加了关键操作的主题），我认为互动本身仍然非常强大。
强大的体现在良好的空间存储能力和信息扩展能力上。
我给它起了一个好名字——叠加滑板（不好，毕竟，没有内部人员告诉我他们是否命名） 这里可能有很多铁汁质疑它与用户洗脑的滑动手势之间的冲突，这与上述淘宝二楼有些相似，区别是豆瓣没有滑动速度or距离的临界值只隔离滑动区域。
与它的模仿者相比boss直聘时，人们进一步优化了互动，适应了自己的产品情况，做了上滑叠层卡隐藏和上滑距离的临界值。
这个故事告诉我们，抄袭比别人的互动更好并不丢人。
小结 这里有四个经典的体验设计case盘点完了，如果我们在日常设计中需要借鉴，最好不要生搬硬套，根据自己的产品业务情况进行适应，合理抄~ 最后，读完这篇文章后，最大的收获可能不是你今天学到了多少设计界面的方法，而是一种设计思维，具体来说，下次面试面试官问你你认为现在产品设计你认为好的设计可以谈论希望你能想到我。
-END- 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
CASE 1. 滴滴出行-xpanel 滴滴出行应该属于每个人的高频使用app，但使用的功能一般集中在叫车过程中，铁汁可能不太注意CDX设计团队是一个非常核心的设计成果——xpanel。
简单来说xpanel它是一个垂直Y轴，附着在第一信息架构层上，支持X轴的扩展和滑动Feed卡片位置。
内容分为三个维度：新闻卡、主卡和扩展卡。
第一个屏幕保证了除新闻和主体外扩展卡1三分之一的曝光。
但在简单的互动背后，它是基于业务的UGD设计思维(用户增长设计)在此引用2018IXDC会上滴滴主讲人的原话是: 寻找具体场景垂直领域的接触点，帮助获得更多的功能、内容、服务、特点、品牌、运营甚至偏好…然后实现业务的有效增长(转化、实现、留存)。
流行的解释是xpanel利用主卡与扩展卡的信息架构关系，将扩展卡的平衡分为与产品功能相关的卡、与运营相关的卡等几类。
把本来被LBS通过简单的交互模式补偿地图一屏中占用的空间，既不打破用户的核心体验focus在地图和主卡上，同时增强了操作和功能的玩法和拓展，可谓双赢。
根据滴滴这几年xpanel对于在线应用，扩展卡的基本挖掘涵盖了以下场景：优惠福利、优惠券、会员制度、安全相关性、旅行提醒、新分流、运营活动等，未来将有更多可扩展的价值内容。
看看各种旅行类别app又长期使用xpanel在线数据反馈也应该非常积极。
CASE 2. 抖音-TopView 多维分析 | 抖音vs《快手产品设计策略差异》中的商业模块简要提到了抖音Topiew超级广告空间，这里单独拿出来和大家分析一下它有多6。
从功能的角度来看，它是一个从开屏延续到端内视频信息流的广告空间，占据了用户从进入抖音的第一视觉。
从互动的角度来看，topview主要展示开屏沉浸式视频3s播放→淡出交互转换组件3s(完美融入原生视频信息流)，剩余操作手势和功能等同于原生视频信息流。
这样一个有1亿 第一个曝光的产品位置，单纯做常规静态开屏稳当入账不香吗？事实是音真的让它不香，没有创新就没有新的收获。
基于业务和当前产品形式的交互模式，抖音具有正确的时间和地点的优势——沉浸式体验，为视频屏幕开放提供了良好的入口。
从打开屏幕到融入信息流，它为广告内容的播放时间赢得了更多的时间。
更可怕的是3s播放后融入原生视频信息流TopView除了正常收获广告转换带来的订单量外，粉丝沉淀也可以通过右侧主页链接轻松排水（即使你今天不买，也要先关注我，成为我的潜在用户，明天我会推出一个新的商品视频，你可以第一次看到你可能感兴趣）。
说完这些，让我们仔细回忆一下我们通常接触的视频广告平台，更不用说60了s、30s，15s我们都太长了，但为什么呢？TopView看起来没那么烦人(上次留下的思考题)？就我个人而言，我认为抖音在选择合作品牌时倾向于与平台气质的品牌合作其合作品牌：Mac、宝马，林肯，vivo除了保证广告质量和提供跳过外，直接融入信息的互动组件不仅会给用户一种新奇感，还会激发用户的互动欲望。
最后看一组数据(与宝马合作的数据)，曝光率:1.1亿 ；有效播放率:53.82%；点击率:13.26%。
所以你猜一个最长可以显示60s品牌视频内容，同时沉淀品牌粉丝，良好的体验带来更高1亿曝光广告空间值多少钱？ CASE 3.淘宝-二楼 2016年，淘宝推出了一个内容栏目——以视频为主，每晚更新一期，类比一千零一夜的故事。
那么，在满满的淘宝运营区，我们应该选择哪一个来尝试这个有趣的新栏目呢？头部的10个宫格里挤进另一个图标？还是在流行的推荐中挤出一个？tab呢？还是在右下角做一个悬挂的操作位置？显然不合适。
根据该产品每晚6点才能使用的游戏规则，游戏规则将在早上7点消失。
最适合它的入口是一个位置，不占据界面的原始空间，有一定的仪式感。
所以下拉loading大空区已成为设计师考虑的阵地。
不知道这个banner为什么要排挤我？ 但是选择了地方，又有了新的顾虑。
iOS下拉手势基本上是系统洗脑的，对他们来说是下拉手势=刷新，在下拉刷新手势的基础上叠加一个不相关的结果显然是有风险的。
因此，有必要定义两个维度的指标，以确保新列的体验。
1.下拉速度(速度临界值:速度有多快？→刷新，多慢？→新栏目)-以速度为优先指标(只要速度快，拉的距离再大→刷新） 2.下拉距离(距离临界值:进入新栏目的距离是多少？)-考虑单手用户操作难度 经过反复尝试和错误两个指标数据的实际体验，新栏目有了一个定居的地方，并被命名为二楼。
进入二楼的整体互动与当前的短视频产品基本相同，全屏垂直滑切换，小图标带货。
下拉加载位的开发，从普通loading从动态效果到操作位置的植入基本上很容易被各种电子商务平台复制，所以所有这些看起来都，但毕竟是四年前。
CASE 4. 豆瓣-叠加滑板 说到豆瓣，我是半个老用户。
豆瓣本身就是一个复杂的多条业务线分支(小组、同城、阅读、音影…）多生态产品，这里我们主要以18年6.0大改版中影音模块详情页大改造为例。
很多人可能已经忘记了6.0之前豆瓣电影的详情页面是什么样子了，带你回顾一下。
看完对比图，可以看出6.0版详情页整容有多成功。
但是成功在哪里，可能不仅仅是好看。
虽然大背景从海报上智能着色并不少见，但在这里添加适度的渐变应用也可以说是非常恰当的。
此外，深背景色和视觉比例增加的外链区突出了第三方播放和选票的视觉感知。
让用户沉浸在电影细节中，引导他们走向豆瓣的主要收入来源之一——电影票分销和第三方视频播放产品排水，正好是豆瓣6.0改版的小目标——更务实(商业化)。
从互动的角度来看，更不用说评论头部底部是否也是由于6.0商业化的影响（评论区域增加了关键操作的主题），我认为互动本身仍然非常强大。
强大的体现在良好的空间存储能力和信息扩展能力上。
我给它起了一个好名字——叠加滑板（不好，毕竟，没有内部人员告诉我他们是否命名） 这里可能有很多铁汁质疑它与用户洗脑的滑动手势之间的冲突，这与上述淘宝二楼有些相似，区别是豆瓣没有滑动速度or距离的临界值只隔离滑动区域。
与它的模仿者相比boss直聘时，人们进一步优化了互动，适应了自己的产品情况，做了上滑叠层卡隐藏和上滑距离的临界值。
这个故事告诉我们，抄袭比别人的互动更好并不丢人。
小结 这里有四个经典的体验设计case盘点完了，如果我们在日常设计中需要借鉴，最好不要生搬硬套，根据自己的产品业务情况进行适应，合理抄~ 最后，读完这篇文章后，最大的收获可能不是你今天学到了多少设计界面的方法，而是一种设计思维，具体来说，下次面试面试官问你你认为现在产品设计你认为好的设计可以谈论希望你能想到我。
-END- 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。
本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。
如有侵权行为，请联系网站管理员删除，。
