短视频社交App交互设计实战，更深入的看透互联网产品的本质

软考考证

课程简介

《短视频社交App交互设计实战，更深入的看透互联网产品的本质》短视频社交App交互设计实战，更深入的看透互联网产品的本质【技能收获】学完可掌握：短视频 / 自媒体运营。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通

已有 0 人浏览发布 2026-09-15 更新 2026-09-15

这门课的标题里有两个关键词容易被忽略：一个是「交互设计实战」，一个是「看透产品本质」。前者说明它不是纯讲工具的软件课，后者说明它想聊的是产品逻辑，而不是画几个高保真页面就收工。真正值得挖的点，在于它把短视频社交这一类产品的交互拆开讲，而不是泛泛地谈「用户体验很重要」。

课纲的含金量在哪

短视频社交App的交互设计，难点集中在三块：信息流如何组织、单条内容页面如何做沉浸、以及围绕内容的社交动作怎么摆。课纲如果覆盖到这三块，说明它有真实的产品拆解，而不是停在设计规范层面。你可以重点看它有没有涉及：推荐流与关注流的切换逻辑、上下滑动的交互边界、评论/点赞/分享这些动作的位置与优先级、拍摄入口与消费入口之间的切换成本。这些是短视频产品区别于普通信息流App的地方，也是判断课纲是否「深」的分水岭。

有没有从「用户为什么划走」倒推交互设计，而不只是讲「怎么做好看」；
有没有把竞品的交互做横向对比，而不是只讲一个理想模型；
有没有涉及内容发布侧的完整链路，还是只盯着观看侧。

哪些章节值得精看

属于「可快速过」的，通常是概念铺垫和设计原则罗列的部分，扫一眼就能进实战。真正该精读的是拆解具体页面和具体交互决策的章节，尤其是带对比、带取舍分析的地方。如果某节在讲「为什么这个按钮放这里而不是那里」「为什么这个手势不冲突」，那基本是这门课里信息密度最高的段落，值得放慢速度、动手在自己熟悉的App上验证一遍。综合实战的项目章节也别只当作业做，重点看它在需求到方案之间怎么做权衡，那才是交互设计真正值钱的部分。

资料包怎么拆开用

这类课程的配套通常分三层：章节笔记、实战素材、可复用的参考产物。建议的用法是——笔记用来在复盘时快速定位知识点，而不是当教材通读；实战素材留到最后独立复现Demo时再打开，避免被现成答案带着走；至于可参考的交互产物，别直接拿来改，先自己出一版，再对照差异，差异本身就是最好的学习材料。用作面试前的回顾，笔记足够；用于写进作品集，只有你独立复现的那一版才算数。

一点提醒

课程自带摘要里提到的运营、运维岗位那一串，和交互设计实战基本对不上号，看的时候直接忽略，别被误导成「学完能转行做运维」。另外，案例产品本身会迭代，视频里的界面未必和现在一致，学的是背后的判断逻辑，不是某一次改版的截图。把这一点想清楚，这门课的「看透产品本质」才不是一句空话。

短视频社交App交互设计实战，更深入的看透互联网产品的本质

课程推荐

视频目录（75 节）

* 1-1 课程简介 .mp4

* 2-1 实战项目定位与需求分析 .mp4

* 2-2 从用户需求到功能需求 .mp4

* 2-3 KANO模型 .mp4

* 2-4 对需求做减法 .mp4

* 3-1 功能结构图定义 .mp4

* 3-2 功能结构图绘制（一） .mp4

* 3-3 功能结构图绘制（二） .mp4

* 3-4 功能结构图绘制（三）.mp4

* 3-5 功能结构图绘制（四） .mp4

* 3-6 功能结构图绘制（五） .mp4

* 4-1 信息架构设计定义.mp4

* 4-2 信息架构设计（一） .mp4

* 4-3 信息架构设计（二） .mp4

* 4-4 信息架构设计（三） .mp4

* 4-5 信息架构设计（四） .mp4

* 5-1 操作流程图定义 .mp4

* 5-2 用户场景设计 .mp4

* 5-3 短视频拍摄编辑发布操作流程图绘制.mp4

* 5-4 短视频分流程图绘制 .mp4

* 5-5 好友管理操作流程图绘制 .mp4

* 6-1 动态-产品结构图 .mp4

* 6-2 消息中心-产品结构图 .mp4

* 6-3 我的-产品结构图 .mp4

* 6-4 拍短视频-产品结构图4 .mp4

* 6-5 产品结构图查漏补缺 .mp4

* 7-1 页面交互图-上 .mp4

* 7-2 页面交互图-下 .mp4

* 8-1 好友-动态列表原型设计 .mp4

* 8-2 附近-动态列表原型设计 .mp4

* 8-3 短视频详情原型设计 .mp4

* 8-4 附近-短视频详情原型设计 .mp4

* 8-5 发布用户空间原型设计 .mp4

* 8-6 加好友原型设计.mp4

* 8-7 拍摄短视频原型设计 .mp4

* 8-8 编辑与发布短视频原型设计 .mp4

* 8-9 拍摄短视频子页面原型绘制 .mp4

* 8-10 编辑短视频子页面原型绘制 .mp4

* 8-11 消息中心原型绘制(一) .mp4

* 8-12 消息中心原型绘制(二) .mp4

* 8-13 个人中心原型绘制 .mp4

* 8-14 控件原型绘制(一) .mp4

* 8-15 控件原型绘制(二) .mp4

* 8-16 原型页面交互图绘制 .mp4

* 9-1 短视频拍摄发布-页面流程(上) .mp4

* 9-2 短视频拍摄发布-页面流程(下) .mp4

* 9-3 好友管理-页面流程(一) .mp4

* 9-4 好友管理-页面流程(二) .mp4

* 9-5 好友管理-页面流程(三) .mp4

* 9-6 好友管理-页面流程(四) .mp4

* 10-1 交互文档说明.mp4

* 10-2 项目基本说明 .mp4

* 10-3 常用控件 .mp4

* 10-4 网络异常 .mp4

* 10-5 加载机制 .mp4

* 10-6 缓存机制 .mp4

* 10-7 手势操作 .mp4

* 10-8 屏幕旋转与中断机制 .mp4

* 10-9 声音控制与信息显示 .mp4

* 10-10 原型交互说明（1） .mp4

* 10-11 原型交互说明（2） .mp4

* 10-12 原型交互说明（3） .mp4

* 10-13 原型交互说明（4） .mp4

* 10-14 原型交互说明（5） .mp4

* 10-15 原型交互说明（6） .mp4

* 10-16 原型交互说明（7） .mp4

* 10-17 原型交互说明（8） .mp4

* 10-18 原型交互说明（9） .mp4

* 11-1 交互演示原型定义 .mp4

* 11-2 进度条的分段.mp4

* 11-3 进度条的控制 .mp4

* 11-4 进度条的删除.mp4

* 11-5 特效编辑交互处理 (1).mp4

* 11-5 特效编辑交互处理 .mp4

* 12-1 实战总结 .mp4