产品交互的特别体验

主题：如何从业务出发打造具有商业价值还能兼顾用户体验的设计
简单交互背后是基于业务的UGD设计思考

一：滴滴出行的卡片xpanel设计方案

2184ab961f84478088750df94460f837.gif

通俗讲就是利用主卡与拓展卡之间的信息架构关系，把拓展卡平行分为几类，如产品、运营相关。
“对特定场景垂直领域的深耕和挖掘，寻找接触点，帮助获取更多的功能、服务、特性、品牌、运营甚至是喜好，进而实现业务的转化、变现、留存等有效增长”

image.png
优点：整合页面卡片模块，定位卡片的重要层级，增强相关运营，功能玩法的拓展。

2.抖音的TopView超级广告位

7B3079B2990241C8BD2711CDF865CDEB.gif

功能角度：从用户打开app后延续到端内视频信息流的广告位，占据了用户从进入抖音后的第一视觉。

交互角度：开屏沉浸式视频0-3s播放——淡入互动转化组件3-6s（完美融入原生视频信息流）——互动组件高亮6-59s——循环停止60s-2遍循环停止，高亮操作。融入视频流后，操作手势与功能等同于原生视频流。 image.png
优点：创新常规静态广告开屏。基于业务和当前产品形态下的交互模式（沉浸式体验）。为视频广告闪屏页提供了很好的串接入口。从开屏到融入视频信息流，在交互形式的切换下为广告内容的播放时长赢得更多时间。结合产品功能特性，融入后广告方除了正常转化流量带来的直接转化，还可以通过右侧的主页链接轻松引流进行粉丝沉淀，增加更多曝光。
高质量的广告视频及背后大品牌的背书，使得这种形式的广告没那么烦人。直接融入产品本体会带给用户更多的新鲜感，激发用户互动欲望。

3.淘宝等电商的首页内二楼
2016年淘宝启动了app内的内容以视频为主，每晚6点至早上7点开放的故事栏目。

B1E639833F4549ABB81F5298809698F3.gif

内容位置在不占界面原生空间，没有新增一个金刚区icon，或者热门banner推荐，悬浮运营图片来跳页面。而是根据产品触发时间的规则及特殊仪式感的形式，放到了下拉loading的大空白区域。
避免移动端用户基础下拉刷新手势的冲突，在交互上需要界定的两个维度的指标来保障体验。
a.下拉速度（速度临界值范围决定 刷新或是新栏目），以速度来衡量指标（只要速度过快，拉距离再大也是刷新）
b.下拉距离（距离的临界值：拉倒多少距离进入新栏目），兼顾单手用户操作难度。
这样进入二楼后，整体交互与短视频产品玩法雷同，沉浸式下滑体验。
下拉加载位开发，从菊花到微动效，再到运营位植入以及被用户所接受。

image.png

4.豆瓣视频详情页改版-上滑页面内弹窗

image.png
image.png

改版几个点：
a.大背景从海报的智能取色，增加适度渐变应用。
b.加大“第三方播放”和“购票选座”这类主要收入来源转化模块的视觉比重，更商业化

c.交互增加了底部的页面内二级可触发的弹窗区域，具有良好的空间收纳能力与业务拓展能力。默认信息区域的上滑手势冲突的解决方案是直接把滑动区域做隔离。同样的交互控件，boss直聘继续优化了滑动默认信息内容时控件隐藏和触发控件后上滑距离临界值。 4D8538150AAE49FAB247C698FF10CD87.gif
8CB648A00AB245E9A2EDD67899A14247.gif