mxue/space

Interactive Commerce PlatformDesign for Gen Z

以直播互动与 AI 导购,连接内容发现和消费决策

Smiloop 内容流手机与手部前景

从功能满足到情绪共鸣

在商品高度过剩与信息爆炸的环境下,Z 世代长期处于学业、就业与社交压力叠加的状态,消费目的逐渐从“功能满足”转向“情绪调节与自我表达”
因此需要通过更具参与感与互动性的内容化购物体验,在决策过程中获得情绪补偿与即时反馈

内容消费场景背景

Context × Emotion × Conversion

思考中的人物时钟领带便签文件休息哭泣微笑惊喜

产品定位

核心
问题

互动吸引力问题

内容高度竞争,注意力稀缺
直播互动形式单一,停留依赖主播节奏
年轻用户偏好参与式、可反馈、可被看见的互动

在注意力竞争环境下,互动需要成为可参与的体验

决策效率问题

商品极度过剩,选择成本上升
用户需求模糊且情绪触发
传统搜索为一次性检索逻辑

决策需要被引导,而不是被放大

技术
趋势

趋势一:沉浸式内容终端发展

轻量化穿戴设备推动移动化直播
智能眼镜带来第一视角直播
全景拍摄与空间视频增强临场感

沉浸式内容终端

直播将从“固定机位展示”转向“行动过程共享”

趋势二:AI介入消费决策过程

搜索不再局限于关键词匹配,而能够通过
多轮对话逐步理解用户需求

AI 消费决策界面与应用入口

搜索正在从“工具”演变为“协助决策的系统”

设计
策略
不再让互动停留在评论与点赞层面,而是让用户的操作能够改变观看焦点、参与空间构建,并形成可被呈现的群体表达,从而提升参与的真实感与存在感
以可持续承接的对话机制替代一次性检索,使决策过程由筛选转为逐步明确

行为提取

围绕年轻用户的内容消费与购物决策,提炼“刷、探、评、比”四种核心行为:前三者强化沉浸参与,“比”提升决策效率,并据此搭建平台功能与体验

刷

以视频流为核心的浏览方式,通过连续的内容推荐形成沉浸式的观看与发现体验

探

用户在直播过程中主动参与画面与内容的探索,使观看从单向浏览转变为更具参与感的互动体验

评

在直播过程中通过评论与互动参与讨论,使观看过程成为具有参与感的沉浸式互动体验

比

更高效地在多个商品之间进行挑选比较或商品 PK,帮助用户更精准地完成选择与决策

两种模式切换的首页

内容平台多为混流呈现,传统电商则以不同入口分离,均增加路径或判断成本。首页提供视角切换,使用户在同一浏览场景中完成立场转换,兼顾沉浸体验与高效确认

默认首页、互动状态与核心动作
切换首页、互动状态与核心动作

购物模式商品卡片

在信息架构上,基于人因工程单手触控手机舒适区搭建清晰的视频商品卡片;强化核心信息(如商品价格、门店)以提升界面信噪比

手机拇指热区完整示意
商品卡片收起与展开状态

更多的卡片形式

针对不同类型对卡片进行差异化设计、引入视频随播卡片信息变化,让用户在刷视频过程中也能更清晰查看商品信息

拼团购、活动设计、商品热卖与限时折扣卡片
卡片信息随观看进度逐步展开

观看10秒,标题切换重点数据呈现

卡片从初始状态逐步展示标题与商品信息
初始卡片 标题切换 商品信息

沉浸式聚焦互动

在开启聚焦互动模式的全景 360° 直播过程中,用户对画面中的任意内容进行聚焦选择,随之强化该区域的视觉表现,并生成相应的视角变化与动态效果。使直播从固定镜头展示转向可被用户介入的沉浸式观看体验,增强参与感与临场感

( 点击聚焦 )

双击画面元素即可触发局部聚焦
系统自动放大并锁定视角

点击聚焦完整界面点击聚焦手势

( 聚焦展开 )

自动放大局部聚焦后
可以捏合交互切换至趣味视角

聚焦展开完整界面捏合切换手势

( 趣味视角 )

趣味视角(玻璃球)
支持一定范围内的视角切换

趣味视角完整界面趣味视角拖动手势

沉浸式场景追踪

在开启场景追踪的全景 360° 直播中用户可在直播过程中主动调整关注焦点与观看方向。这种可操控的观看方式突破了单一镜头分配逻辑,使用户从被动接收者转变为观看路径的主动建构者,提升沉浸程度与探索感

镜头聚焦跟随物体,画面转换视角,增加沉浸感

沉浸式场景追踪主界面与远近视角变化

主题弹幕墙

在开启主题讨论模式的直播中对实时评论内容进行 AI 识别与整合,将不同的用户观点以可视化上墙弹幕形式呈现。通过对群体态度与观点数量的动态展示,使评论区从零散表达转化为可被看见的公共讨论空间,强化群体参与氛围

更简洁更少的滚动评论
更互动主播互动与观点量化
主题弹幕标题与话题问题组件玩法标题话题题目
用户评论:登山鞋必须好,872

AI 识别评论并归类
观点上墙并呈现数量

该观点首发用户头像

主题弹幕墙状态一完整界面主题弹幕墙状态二完整界面

搜索方式重构的 AI 导购

核心问题

现有 AI 搜索在精准购物中体验断裂。一次性检索打断用户需求细化过程,操作流程不连贯。对话区的推荐商品呈现可能引发用户对商业因素的质疑,同时限制商品连续浏览与比较,影响探索体验

设计策略

通过对话持续累积并保留用户需求状态,使需求细化可回溯、可调整,并在对话与商品浏览切换中既保持需求条件不被打断,又保持传统搜索池的筛选方式。维持探索与精准搜索的连续性

需求连续性对话需求累积
可回溯调整
决策可控性用户可理解结果来源
并能自主调整与筛选
AI 导购搜索框、对话流与搜索池结构示意图

交互流

AI 导购完整交互流程

轻量认知・商品引导卡片

低认知负荷的商品引导卡片,以简洁卡片化形式呈现复杂信息,降低理解成本,让用户更轻松读懂商品介绍信息再做出选择

多卡片呈现进度

选择选项后自动切换下一张卡片,或者左右滑动查看卡片

纯文本导购选项卡

根据商品信息解释确认对商品的需求,或者询问更多

需求确认

商品关键信息选择完毕后进行总结,用户确认需求并查看商品

商品引导卡片完整手机界面
推荐信息源商品池完整手机界面

商品视觉信息卡片

部分抽象的商品信息(视觉类型等),AI 抓取商品图片进行解释,消费者选择更直观

商品视觉信息卡片是否选购按钮
需要吗我要了

推荐信息源

商品讲解卡片中增加商品信息来源,既增强用户对信息等信任感知,又强化用户参与进入内容消费行为

直播讲解卡片
直播讲解信息源卡片
三方视频卡片
第三方视频信息源卡片

引导决策
而非放大决策

无需消费者自己阅读大量对比数据后比较
而是基于用户关注的维度对所选商品进行排序

商品选择并暂存完整界面
多商品维度排序完整界面

对比维度排序

可以根据对话记录智能生成排序维度,或者输入新的维度进行排序对比

商品对比&加购的
更多交互方案

针对商品对比与加购流程进行方案探索,通过强化 Agent 的智能辅助能力,减少用户的重复选择和非重点信息干扰,并衔接完成对比后的下单流程

展示三个优选商品及最优推荐的完整组件

展示前3款优选商品,并通过跑马灯边框与霓虹按钮突出 TOP1,适用于高信任场景

展示两个优选商品及购买入口的完整组件

展示2款优选商品,精简信息以降低阅读负担,促进转化

商品对比与优选完整界面
选中商品后的加购与支付完整界面

其他界面

服务入口与订单功能个人中心界面抽屉界面消息界面
Smiloop 内容、互动、导购、交易与个人中心完整界面合集
Smiloop 品牌、字体、颜色和图标视觉规范
视频市集消息购物车我的喜欢收藏 加购点赞分享搜索照相评论购物车状态 喜欢状态更多功能扫码二维码设置订单优惠 浏览记录商品足迹清除客服历史对话待发货待付款 待收货待评价售后定位抽屉关闭
加购图标完整关键线规范

0~1的设计复盘

需求洞察

用户体验洞察+竞品 / 行业趋势调研→产品目标

范围定义

确定产品的功能模块
与内容呈现范围
+用户行为定义

结构框架

建立信息结构
与功能结构
+梳理用户任务流程→可操作的页面原型
与用户操作路径

视觉表达

视觉风格 / 元素+设计原子→分子组件 → 模块→界面设计稿

设计验证

用户测试与体验评估→设计评估结果→设计迭代