解决什么工作场景

这门资料聚焦移动端 App 界面设计，但切入点不是“把图画好看”，而是从拿到一份模糊的产品需求开始，怎么一步步把它拆成可用的界面结构。它对应的真实工作场景是：产品经理丢过来几句功能描述，你要自己理出信息层级，画出草图和产品结构图，再落到具体页面的线框稿，而不是坐在 Figma 前等对方把每个像素都标好。对转行做 UI 的人来说，这一段往往是最缺的——很多人会临摹视觉稿，但一拿到原始需求就不知道从哪下手。资料里明确提到“不培养美工”，所以它的重心是让你先具备产品思维和结构能力，视觉表现是后续的事。

适合什么基础，建议先看哪几块

适合有一点软件操作基础、但没独立做过完整 App 页面的读者。如果你连界面工具的基本图形、编组都没碰过，建议先补一下再来看；如果你已经能画视觉稿但不会从需求推导结构，这门资料正好补这块。建议先看产品开发流程和产品需求解析这两节，理解一个需求是怎么从概述走到结构图的；然后再看线框图绘制部分，重点看详情页和列表页这两个典型场景，因为它们覆盖了信息密度、层级排序、操作入口放置这几个高频问题。草图和结构图那节别跳过，它是后面线框图能不能站得住的前提。

学完能独立做什么，资料怎么配合练习

学完之后，你应该能独立完成一个中等复杂度 App 模块从需求到线框图的全流程：拿到功能描述后自己梳理信息结构，画出产品结构图，再输出分类页、列表页、详情页的线框稿，并说清楚每个页面为什么这样排。练习时建议这样配合资料：先按视频里的模块照做一遍，理解推导逻辑；然后换一个你自己熟悉的产品（比如某个阅读类或社区类 App），用同样的步骤从零画一遍结构图和线框图，做完再和原 App 对比，看哪些层级你漏了、哪些入口位置不合理。线框图那几节不要只当成操作演示看，重点抓它怎么处理列表项的信息层级和详情页的内容分区，这两个点在真实项目里反复出现。资料本身不涉及高保真视觉和切图标注，所以视觉表现需要你另外补，但结构能力这一段练扎实，后面做视觉稿时不会乱。


我们不培养美工，我们培养具有产品思维的“UI设计师”

课程目录

*   第1章 课程介绍/

  *   1-1 导学视频.mp4 07:25

  *   1-2 产品开发流程.mp4 04:47

*   第2章 产品需求解析/

  *   2-1 产品概述梳理（新的）.mp4 04:23

  *   2-2 产品需求解析.mp4 11:29

  *   2-3 产品草图绘制.mp4 14:22

  *   2-4 产品结构图绘制.mp4 16:15

*   第3章 线框图绘制/

  *   3-1 问吧分类页线框图绘制.mp4 09:38

  *   3-2 问吧分类列表页线框图绘制.mp4 10:30

  *   3-3 问吧详情页线框图绘制.mp4 15:03

  *   3-4 知识列表页线框图绘制.mp4 12:10

  *   3-5 知识详情页线框图绘制.mp4 17:23

  *   3-6 知识专栏列表页线框图绘制.mp4 15:13

  *   3-7 问吧专栏问答页线框图绘制.mp4 08:23

  *   3-8 问吧专栏列表页线框图绘制.mp4 19:16

  *   3-9 我的频道线框图绘制.mp4 11:57

  *   3-10 积分商城商品页线框图绘制.mp4 09:21

  *   3-11 商品详情页线框图绘制.mp4 05:20

  *   3-12 发现页线框图绘制.mp4 20:37

  *   3-13 页面流程图绘制.mp4 07:32

*   第4章 设计准备/

  *   4-1 界面布局规范设计.mp4 05:14

  *   4-2 标准色规范设计.mp4 13:04

  *   4-3 文本规范设计.mp4 16:07

  *   4-4 控件规范 (上).mp4 17:36

  *   4-5 控件规范 (下).mp4 18:43

*   第5章 界面效果图设计/

  *   5-1 产品结构最终调整.mp4 05:58

  *   5-2 问吧分类页效果设计.mp4 21:19

  *   5-3 问吧分类列表页效果设计.mp4 28:41

  *   5-4 问吧详情页效果设计(上).mp4 25:10

  *   5-5 问吧详情页效果图设计（下）.mp4 17:06

  *   5-6 知识列表页（上）.mp4 21:57

  *   5-7 知识列表页效果图设计（下）.mp4 12:33

  *   5-8 知识详情页效果图设计（上）.mp4 26:24

  *   5-9 知识详情页效果图设计（下）.mp4 18:12

  *   5-10 积分商城商品页效果图设计（上）.mp4 23:34

  *   5-11 积分商城商品页效果图设计（下）.mp4 21:15

  *   5-12 发现_首页_效果图版块搭建.mp4 20:24

  *   5-13 发现_首页_文本与图标设计.mp4 17:37

  *   5-14 发现_首页_新闻版块设计.mp4 06:46

  *   5-15 发现_首页_底栏设计.mp4 11:15

  *   5-16 启动图标设计.mp4 23:03

*   第6章 Banner与启动画面设计/

  *   6-1 发现_首页Banner设计.mp4 17:37

  *   6-2 知识列表页Banner设计.mp4 16:24

  *   6-3 积分商城商品页_Banner设计.mp4 16:42

  *   6-4 APP引导页设计（上）.mp4 13:08

  *   6-5 APP引导页设计（下）.mp4 18:19

*   第7章 标注与切图/

  *   7-1 效果图标注演示.mp4 15:00

  *   7-2 效果图切图演示.mp4 13:54

*   第8章 项目设计经验总结/

  *   8-1 8-项目设计经验总结.mp4 06:46