**解决什么实际问题**
这门课的核心价值在于打通 UI 设计从需求到落地的完整工作流。很多自学者容易陷入“只会画图”的误区，导致作品缺乏逻辑，无法应对实际业务场景。本课程侧重全链路实战，重点解决设计师如何理解产品逻辑、如何进行界面规范建立、以及如何处理多端适配等真实痛点。它不教炫技的视觉效果，而是训练你如何用设计语言准确传达产品意图，适合希望从“美工”向“产品型设计师”转型的从业者。

**适合什么基础**
门槛较低，但要求具备基本的设计常识。你不需要精通复杂的代码逻辑，但必须能熟练使用 Photoshop 进行基础操作，如图层管理、蒙版处理及简单的排版。如果你连 PS 的选区工具都没用过，建议先花两天时间补基础软件操作，再进入本课程。对于有一定 PS 基础，但缺乏完整项目经验、不知道如何组织一套完整界面规范的设计新手，这是非常对口的入门实战材料。

**建议学习路径与实操**
不要按顺序逐章死磕，建议先聚焦于“界面规范”与“交互逻辑”两个模块。这两块是区分初级与中级设计师的分水岭。先看如何建立设计系统（Design System），包括色彩体系、栅格系统和组件库搭建，这是保证团队协作效率的关键。接着重点研习实战案例部分，不要只看结果，要倒推设计师的决策过程：为什么选这个字号？为什么这里用弹窗而不是新页面？学完这部分，你应能独立产出一套包含首页、核心功能页及异常状态页的完整高保真原型，并能向产品经理清晰阐述设计背后的业务考量。

**资料配合练习方法**
资料包中的实战项目是核心，而非视频本身。建议采取“影随模式”：观看一段关于具体组件制作的讲解后，立刻暂停视频，自己在 PS 中从零绘制该组件，再对照视频检查细节差异。切忌全程挂机观看或盲目复制视频中的成品图。重点练习“修改”能力，比如老师做了一个电商列表页，你尝试将其改为 B 端后台管理页，调整信息密度与布局。这种基于现有框架的变体练习，能迅速建立肌肉记忆，让你在面对全新需求时，能熟练调用已有的设计规范进行组装与调整。避免囤积资料，每完成一个模块的练习，就整理一份自己的 UI 规范文档，这才是比视频更有留存的资产。

课程目录

├──#1#–一、全链路设计师认知/ │ ├──#1#–预习课程/ │ │ ├── [240K] #1.1#–【重要】课前预习指导.pdf
 │ │ ├──#2#–一、基础认知/ │ │ │ ├── [322K] #1.2.1#–【先看】本节指导.pdf
 │ │ │ ├── [157K] #1.2.2#–1.1UI设计概论.pdf
 │ │ │ ├── [129K] #1.2.3#–1.2什么是UI——UI相关术语解释.pdf
 │ │ │ ├── [323K] #1.2.4#–1.3理解手机屏幕相关概念.pdf
 │ │ │ ├── [232K] #1.2.5#–1.4UI设计师需要做什么.pdf
 │ │ │ ├── [265K] #1.2.6#–1.5UI设计中有哪些设计风格.pdf
 │ │ │ └── [ 46K] #1.2.7#–1.6养成良好的UI设计学习习惯.pdf
 │ │ ├──#3#–二、行业资源/ │ │ │ ├── [221K] #1.3.1#–【先看】本节指导.pdf
 │ │ │ └── [154K] #1.3.2#–2.1网易设计师的推荐书单.pdf
 │ │ ├──#4#–三、软件安装/ │ │ │ └── [ 69K] #1.4.1#–【先看】本节指导.pdf
 │ │ ├──#5#–四、零基础PS软件教程讲解人：aiki老师/ │ │ │ ├── [ 71K] #1.5.1#–【先看】本节指导.pdf
 │ │ │ ├── [305M] #1.5.10#–4.7字体笔刷安装方法.mp4
 │ │ │ ├── [153M] #1.5.11#–4.8文字排版.mp4
 │ │ │ ├── [458M] #1.5.12#–4.9图层样式.mp4
 │ │ │ ├── [ 84M] #1.5.13#–4.10头发扣取.mp4
 │ │ │ ├── [113M] #1.5.14#–4.11双重曝光海报.mp4
 │ │ │ ├── [ 53M] #1.5.15#–4.12矢量工具讲解.mp4
 │ │ │ ├── [ 67M] #1.5.16#–4.13钢笔工具.mp4
 │ │ │ ├── [ 59M] #1.5.17#–4.14钢笔工具实操-胡萝卜大圣.mp4
 │ │ │ ├── [ 75M] #1.5.18#–4.15布尔运算.mp4
 │ │ │ ├── [211M] #1.5.19#–4.16矢量卡通人物.mp4
 │ │ │ ├── [ 12K] #1.5.2#–PS零基础课程素材下载1.pdf
 │ │ │ ├── [ 13K] #1.5.3#–PS零基础课程素材下载2.pdf
 │ │ │ ├── [ 26M] #1.5.4#–4.1什么是PS.mp4
 │ │ │ ├── [ 39M] #1.5.5#–4.2PS界面介绍.mp4
 │ │ │ ├── [100M] #1.5.6#–4.3图层功能.mp4
 │ │ │ ├── [357M] #1.5.7#–4.4PS选区功能.mp4
 │ │ │ ├── [407M] #1.5.8#–4.5图像合成.mp4
 │ │ │ └── [694M] #1.5.9#–4.6人像磨皮.mp4
 │ │ ├──#6#–五、零基础AI软件教程讲解人：木松子旭老师/ │ │ │ ├── [ 12K] #1.6.1#–AI零基础1-21节课程素材下载（在电脑上打开本节下载）.pdf
 │ │ │ ├── [ 54M] #1.6.10#–第9节课路径查找器做图标.mp4
 │ │ │ ├── [ 54M] #1.6.11#–第10节课线段工具与描边.mp4
 │ │ │ ├── [ 59M] #1.6.12#–第11节课描边风插画案例实操.mp4
 │ │ │ ├── [ 39M] #1.6.13#–第12节课画笔工具和自定义画笔.mp4
 │ │ │ ├── [ 61M] #1.6.14#–第13节课钢笔工具实例操作.mp4
 │ │ │ ├── [ 67M] #1.6.15#–第14节课网格工具实例操作.mp4
 │ │ │ ├── [ 22M] #1.6.16#–第15节课渐变工具.mp4
 │ │ │ ├── [ 51M] #1.6.17#–第16节课Shaper工具插画案例实操.mp4
 │ │ │ ├── [104M] #1.6.18#–第17节课文字工具.mp4
 │ │ │ ├── [ 65M] #1.6.19#–第18节课图像描摹实例操作.mp4
 │ │ │ ├── [ 39M] #1.6.2#–第1节课认识illustrator.mp4
 │ │ │ ├── [124M] #1.6.20#–第19节课混合艺术之糖果字.mp4
 │ │ │ ├── [ 51M] #1.6.21#–第20节课混合艺术之立体字与播放界面.mp4
 │ │ │ ├── [174M] #1.6.22#–第21节课封面设计以及其他工具讲解.mp4
 │ │ │ ├── [ 31M] #1.6.3#–第2节课认识界面与基础设置.mp4
 │ │ │ ├── [ 38M] #1.6.4#–第3节课新建文档存储文档.mp4
 │ │ │ ├── [ 36M] #1.6.5#–第4节课视图操作.mp4
 │ │ │ ├── [ 34M] #1.6.6#–第5节课选择工具、编组、图层.mp4
 │ │ │ ├── [ 25M] #1.6.7#–第6节课形状工具.mp4
 │ │ │ ├── [ 17M] #1.6.8#–第7节课复制粘贴对齐工具.mp4
 │ │ │ └── [117M] #1.6.9#–第8节课路径查找器.mp4
 │ │ ├──#7#–有余力的同学补充学习：AI实例进阶教程/ │ │ │ ├── [ 12K] #1.7.1#–AI实例进阶1-17节素材下载（在电脑上打开本节下载）.pdf
 │ │ │ ├── [ 54M] #1.7.10#–第9节扁平树木.mp4
 │ │ │ ├── [ 63M] #1.7.11#–第10节卡通人物（一）.mp4
 │ │ │ ├── [ 61M] #1.7.12#–第11节卡通人物（二）.mp4
 │ │ │ ├── [ 45M] #1.7.13#–第12节黄金比例之斗牛犬.mp4
 │ │ │ ├── [125M] #1.7.14#–第13节日式描边风格插画.mp4
 │ │ │ ├── [ 33M] #1.7.15#–第14节描边风手势插画.mp4
 │ │ │ ├── [225M] #1.7.16#–第15节紫色小镇场景插画.mp4
 │ │ │ ├── [ 56M] #1.7.2#–第1节自律改变自我.mp4
 │ │ │ ├── [229M] #1.7.3#–第2节腊肠犬（一）.mp4
 │ │ │ ├── [ 54M] #1.7.4#–第3节腊肠犬（二）.mp4
 │ │ │ ├── [367M] #1.7.5#–第4节圣诞场景之老人.mp4
 │ │ │ ├── [ 26M] #1.7.6#–第5节圣诞场景之雪人.mp4
 │ │ │ ├── [ 31M] #1.7.7#–第6节圣诞场景之圣诞树.mp4
 │ │ │ ├── [ 43M] #1.7.8#–第7节圣诞场景之雪橇车.mp4
 │ │ │ └── [ 67M] #1.7.9#–第8节圣诞场景.mp4
 │ │ └──#8#–六、sketch基础课程/ │ │ ├── [ 63M] #1.8.1#–第1节神奇de添加按钮.mp4
 │ │ ├── [ 25M] #1.8.10#–第10节穿越de原型功能(交互动画制作).mp4
 │ │ ├── [ 97M] #1.8.2#–第2节厉害de布尔运算(小头像绘制).mp4
 │ │ ├── [ 65M] #1.8.3#–第3节好玩de图层样式(轻拟物icon绘制).mp4
 │ │ ├── [ 75M] #1.8.4#–第4节牛逼de剪刀工具(MBE风格绘制).mp4
 │ │ ├── [ 84M] #1.8.5#–第5节快捷de遮罩工具(音乐界面绘制).mp4
 │ │ ├── [ 67M] #1.8.6#–第6节走心de综合训练(播放界面绘制).mp4
 │ │ ├── [ 61M] #1.8.7#–第7节给力de创建元件(列表界面绘制).mp4
 │ │ ├── [ 43M] #1.8.8#–第8节卖萌de共享式样(喜欢界面绘制).mp4
 │ │ └── [102M] #1.8.9#–第9节帅呆de导出功能(icon、界面导出).mp4
 │ └──#2#–系统认知全链路设计师/ │ ├── [ 82M] #2.1#–1.1.1系统认知全链路设计师(220129).mp4
 │ └── [125M] #2.2#–1.1.2全链路设计师核心技能(220129).mp4
 ├──#2#–二、流行风格图标与插画设计/ │ ├──#1#–第1节UI设计基本功图标绘制/ │ │ ├── [166M] #1.1#–2.1.1UI设计基本功-图标绘制与布尔运算(220130).mp4
 │ │ └── [213K] #1.2#–【打卡1】2.1.1UI设计基本功-图标绘制与布尔运算.pdf
 │ ├──#2#–第2节产品启动图标的设计/ │ │ ├── [211M] #2.1#–2.2.1产品启动图标风格解析与绘制(220130).mp4
 │ │ ├── [205K] #2.2#–【打卡2】2.2.1产品启动图标风格解析与绘制.pdf
 │ │ ├── [171M] #2.3#–2.2.2（上）启动图标的创意设计案例(220130).mp4
 │ │ ├── [ 27M] #2.4#–2.2.2（下）番茄铅笔布尔运算方法(220130).mp4
 │ │ └── [210K] #2.5#–【打卡3】2.2.2启动图标的创意设计案例.pdf
 │ ├──#3#–第3节情感化设计/ │ │ ├── [264M] #3.1#–2.3.1产品中的情绪化设计与情绪表情绘制(220130).mp4
 ?? ?? [ 21K] #3.2#C2.3.1л-飨زģ壩.pdf
 │ │ ├── [246K] #3.3#–【打卡4】2.3.1产品中的情绪化设计与情绪表情绘制.pdf
 │ │ ├── [159M] #3.4#–2.3.2APP的情感化设计(220130).mp4
 │ │ ├── [208K] #3.5#–【打卡5】2.3.2APP的情感化设计.pdf
 │ │ ├── [153M] #3.6#–2.3.3情感化产品头像设计(220130).mp4
 │ │ └── [229K] #3.7#–【打卡6】2.3.3情感化产品头像设计.pdf
 │ ├──#4#–第4节MBE风格设计/ │ │ ├── [130M] #4.1#–2.4.1MBE风格插画艺术与发展史(220130).mp4
 │ │ ├── [235K] #4.2#–【打卡7】2.4.1MBE风格插画艺术与发展史.pdf
 │ │ ├── [201M] #4.3#–2.4.2MBE建筑插画设计及视觉应用(220130).mp4
 │ │ ├── [ 19K] #4.4#–2.4.2建筑引导页（素材模板）.pdf
 │ │ └── [216K] #4.5#–【打卡8】2.4.2MBE建筑插画设计及视觉应用.pdf
 │ ├──#5#–第5节轻拟物图标设计/ │ │ ├── [140M] #5.1#–2.5.1轻拟物设计的应用(220129).mp4
 │ │ ├── [ 77K] #5.2#–【打卡10】2.5.1轻拟物设计的应用「初级」.pdf
 │ │ ├── [127M] #5.3#–2.5.2轻拟物图标产品中的应用（一）(220129).mp4
 │ │ ├── [ 89K] #5.4#–【打卡11】2.5.2轻拟物图标产品中的应用（一）「初级」.pdf
 │ │ ├── [ 88M] #5.5#–2.5.3轻拟物图标产品中的应用（二）(220129).mp4
 │ │ ├── [ 89K] #5.6#–【打卡12】2.5.3轻拟物图标产品中的应用（二）「中级」.pdf
 │ │ ├── [148M] #5.7#–2.5.4图形与图层样式的结合(220129).mp4
 │ │ └── [ 92K] #5.8#–【打卡13】2.5.4图形与图层样式的结合「中级」.pdf
 │ ├──#6#–第6节引导页及空白页设计/ │ │ ├── [104M] #6.1#–2.6.1APP中的引导页设计(220129).mp4
 │ │ ├── [ 89K] #6.2#–【打卡14】2.6.1APP中的引导页设计「初级」.pdf
 │ │ ├── [165M] #6.3#–2.6.2引导页设计的操作(220129).mp4
 │ │ ├── [ 90K] #6.4#–【打卡15】2.6.2引导页设计的操作「高级」.pdf
 │ │ ├── [ 89M] #6.5#–2.6.3APP当中的空白页面讲解(220129).mp4
 │ │ ├── [ 86K] #6.6#–【打卡16】2.6.3APP当中的空白页面讲解「初级」.pdf
 │ │ ├── [103M] #6.7#–2.6.4APP当中的空白页面设计(220129).mp4
 │ │ └── [ 86K] #6.8#–【打卡17】2.6.4APP当中的空白页面设计「中级」.pdf
 │ ├──#7#–第7节2.5D视觉设计风格提升/ │ │ ├── [139M] #7.1#–2.7.12.5D的设计理论及规范(220130).mp4
 │ │ ├── [ 79K] #7.2#–【打卡19】2.7.12.5D的设计理论及规范制作「初级」.pdf
 │ │ ├── [209M] #7.3#–2.7.2绘制2.5d场景(220130).mp4
 │ │ └── [ 74K] #7.4#–【打卡20】2.7.2绘制2.5D场景「高级」.pdf
 │ └──#8#–第8节肌理插画视觉设计/ │ ├── [105M] #8.1#–2.8.1肌理视觉效果与应用场景(220130).mp4
 │ ├── [ 85K] #8.2#–【打卡21】2.8.1肌理视觉效果与应用场景「初级」.pdf
 │ ├── [265M] #8.3#–2.8.2肌理风格的元素应用一(220130).mp4
 │ ├── [204M] #8.4#–2.8.3肌理风格的元素应用二(220130).mp4
 │ ├── [ 76K] #8.5#–【打卡22】2.8.3肌理风格的元素应用二「高级」.pdf
 │ ├── [167M] #8.6#–2.8.4提高视觉插画艺术性(220130).mp4
 │ └── [ 82K] #8.7#–【打卡23】2.8.4提高视觉插画艺术性「中级」.pdf
 ├──#3#–三、商业运营与品牌设计/ │ ├──#1#–第1节产品运营常用插画场景/ │ │ ├── [ 18K] #1.1#–第三章第一周课程源文件+优秀作业（附件1）.pdf
 │ │ ├── [ 95K] #1.10#–【打卡28】3.1.4立体质感的卡通形象设计（一）.pdf
 │ │ ├── [223M] #1.11#–3.1.5立体质感的卡通形象设计（二）(220131).mp4
 │ │ ├── [ 18K] #1.2#–第三章第一周课程源文件+优秀作业（附件2）.pdf
 │ │ ├── [152M] #1.3#–3.1.1卡通动物插画设计(220131).mp4
 │ │ ├── [101K] #1.4#–【打卡25】3.1.1卡通动物插画设计.pdf
 │ │ ├── [188M] #1.5#–[有更新]3.1.2用户头像扁平插画(220131).mp4
 │ │ ├── [101K] #1.6#–【打卡26】3.1.2用户头像扁平插画.pdf
 │ │ ├── [225M] #1.7#–3.1.3卡通形象表情设计(220131).mp4
 │ │ ├── [106K] #1.8#–【打卡27】3.1.3卡通形象表情设计.pdf
 │ │ └── [159M] #1.9#–3.1.4立体质感的卡通形象设计（一）(220131).mp4
 │ ├──#2#–第2节多种风格场景设计/ │ │ ├── [266M] #2.1#–3.2.1扁平类建筑插画该如何设计(220131).mp4
 │ │ ├── [114K] #2.2#–【打卡29】3.2.1扁平类建筑插画该如何设计.pdf
 │ │ ├── [261M] #2.3#–3.2.2描边风汽车插画设计(220131).mp4
 │ │ ├── [105K] #2.4#–【打卡30】3.2.2描边风汽车插画设计.pdf
 │ │ ├── [249M] #2.5#–3.2.3鼠绘2.5D小房子插画（选做）(220131).mp4
 │ │ └── [113K] #2.6#–【打卡31】3.2.3鼠绘2.5D小房子插画（选做）.pdf
 │ ├──#3#–第3节品牌设计/ │ │ ├── [156M] #3.1#–3.2.4森林大场景插画技法（一）(220131).mp4
 │ │ ├── [196M] #3.10#–3.3.4黄金比例设计猫咪logo(220131).mp4
 │ │ ├── [ 87K] #3.11#–【打卡37】3.3.4黄金比例设计猫咪logo「中级」.pdf
 │ │ ├── [499M] #3.2#–3.2.5森林大场景插画技法（二）(220131).mp4
 │ │ ├── [113K] #3.3#–【打卡33】3.2.5森林大场景插画技法「高级」.pdf
 │ │ ├── [104M] #3.4#–3.3.1黄金比例和斐波那契数列(220131).mp4
 │ │ ├── [ 97K] #3.5#–【打卡34】3.3.1黄金比例和斐波那契数列（选做）「高级」.pdf
 │ │ ├── [174M] #3.6#–3.3.2黄金比例设计鲸鱼logo(220132).mp4
 │ │ ├── [ 85K] #3.7#–【打卡35】3.3.2黄金比例设计鲸鱼logo「中级」.pdf
 │ │ ├── [194M] #3.8#–3.3.3黄金比例设计兔子和音符LOGO(220132).mp4
 │ │ └── [ 92K] #3.9#–【打卡36】3.3.3黄金比例设计兔子和音符LOGO（选做）「中.pdf
 │ ├──#4#–第3节第二小节/ │ │ ├── [ 94M] #4.1#–3.3.5字体认知与基础字体设计方法(220132).mp4
 │ │ ├── [ 95K] #4.10#–【打卡43】3.3.9系统了解宋体字的设计方法.pdf
 │ │ ├── [ 76M] #4.11#–3.3.10黑体字的花样玩法(220132).mp4
 │ │ ├── [ 94K] #4.12#–【打卡44】3.3.10黑体字的花样玩法.pdf
 │ │ ├── [166M] #4.13#–3.3.11利用Ai画笔工具设计字体(220132).mp4
 │ │ ├── [109K] #4.14#–【打卡45】3.3.11利用Ai画笔工具设计运营字体（选做）.pdf
 │ │ ├── [186M] #4.15#–3.3.12字体效果设计的多种方法(220132).mp4
 │ │ ├── [101K] #4.16#–【打卡46】3.3.12字体效果设计的多种方法（选做）.pdf
 │ │ ├── [256M] #4.17#–3.3.13利用ps中的3D功能设计立体字效(220132).mp4
 │ │ ├── [ 96K] #4.18#–【打卡47】3.3.13利用ps中的3D功能设计立体字效（选做）.pdf
 │ │ ├── [131M] #4.3#–3.3.6运营字体设计之钢笔造字法(220132).mp4
 │ │ ├── [ 88K] #4.4#–【打卡40】3.3.6运营字体设计之钢笔造字法.pdf
 │ │ ├── [ 96M] #4.5#–3.3.7创意字体的快速设计技巧(220132).mp4
 │ │ ├── [ 84K] #4.6#–【打卡41】3.3.7创意字体的快速设计技巧.pdf
 │ │ ├── [198M] #4.7#–3.3.8利用西文字库设计汉字(220132).mp4
 │ │ ├── [ 82K] #4.8#–【打卡42】3.3.8利用西文字库设计汉字.pdf
 │ │ └── [100M] #4.9#–3.3.9系统了解宋体字的设计方法(220132).mp4
 │ ├──#5#–第3节第三小节/ │ │ ├── [ 45M] #5.1#–3.3.14LOGO多种风格表现手法(220130).mp4
 │ │ ├── [100M] #5.2#–3.3.15LOGO的标准化制图(220130).mp4
 │ │ ├── [119K] #5.3#–【打卡49】3.3.15LOGO多种风格表现手法（选做）.pdf
 │ │ ├── [159M] #5.4#–3.3.16字母交叉LOGO设计(220130).mp4
 … 其余 4

44 项略，目录共 644 项