很多人误以为 UI 设计就是画个好看的界面，甚至以为只要精通 Photoshop 就能胜任岗位。实际上，企业招聘时更看重的是从需求分析、交互逻辑到视觉落地的全链路能力。这门课程旨在解决“只会画图不懂业务”的断层问题，通过六个模块的系统训练，把设计思维贯穿到开发交付的全过程。它不是软件操作教程，而是一套职业工作方法论，适合那些已经具备基础审美，但缺乏商业项目实战经验，或者需要从平面设计转型产品设计的初学者。
适合谁学，以及前置准备
基础门槛与学习心态
课程门槛相对较低，只需要掌握简单的 PS 软件操作和对设计常识有基本认知即可，不需要深厚的艺术背景。然而，“简单操作”不等于“随意涂改”，你需要保持对细节的敏感度。这门课特别适合三类人：一是刚接触设计、不知道如何向客户或产品经理交代设计逻辑的学生；二是长期从事视觉制作、希望拓展交互与产品思维以晋升资深岗位的从业者；三是准备转行 UI 但作品集缺乏完整案例、面试时常被问“为什么这么设计”而语塞的求职者。如果你是纯代码人员，想通过设计文档更好地与设计师协作，这门课关于需求拆解的部分也极具参考价值。切勿抱着“看完视频就会做”的心态学习，UI 设计是手眼脑的协调，必须动手模仿，否则知识无法内化。
建议的学习路径与重点突破
核心模块拆解与实操策略
不要从头到尾线性观看，建议先关注“全链路认知”与“实战项目”两个板块。首先，明确 UI 设计师在团队中的上下游关系：上游是产品经理的需求文档，下游是前端的切图与还原。重点学习如何从模糊的业务需求中提取关键交互流程，绘制低保真线框图，再逐步过渡到高保真视觉设计。在实战部分，课程提供了多个典型案例分析，建议挑选其中一个完整项目（如电商详情页或后台管理系统），从头到尾独立复刻一遍。重点关注规范化的设计交付物准备，包括组件库的搭建逻辑、标注规范以及切片导出细节。这些看似枯燥的基础工作，恰恰是区分“业余爱好者”与“职业设计师”的分水岭，也是面试中常被用来考察候选人落地能力的关键点。
学完能做什么及资料配合方法
能力验证与作品集打磨
学完这门课，你应当能够独立承接一个中型产品的设计需求，输出包含用户流程图、高保真界面图及交互说明文档的完整方案。你不仅能画出漂亮的界面，更能清晰阐述设计决策背后的逻辑，例如为什么这个按钮放在那里、为什么采用这种配色体系。在实际操作中，务必利用课程配套的资料包进行对照练习。不要只是浏览，要将案例中的设计源文件（注意版权，仅用于学习拆解）打开，逐一分析图层结构、命名规范及样式应用。尝试修改其中一个页面，模拟真实工作中的需求变更，看自己能否快速调整并保持风格统一。最终，将你的练习成果整理成两份不同风格的案例（如 C 端与 B 端各一），作为求职作品集的核心内容。记住，没有经过反复推敲和逻辑自洽的设计，只是精美的海报，而非专业的 UI 方案。只有通过这种“拆解-修改-重建”的循环，才能将课程知识转化为真正的职场竞争力。
课程介绍
本课程来自网易微专业，（高清完结版），是一门UI设计教程。学习本课程只需掌握简单的PS软件操作和设计常识。本课程分为6大学习模式，培养全链路设计能力，边学边做，多例实战项目迅速积累经验，快速实现就业。
课程目录
├──#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 … 其余 444 项略，目录共 644 项
