**《吴刚大讲堂》淘宝天猫网站设计零基础入门:从0到1构建专业店铺视觉体系**
在电商竞争日益激烈的今天,店铺视觉设计已不再仅仅是“美化页面”那么简单,它是品牌调性的直接投射,更是影响用户转化率的核心要素。本课程专为零基础学员打造,由资深电商设计专家吴刚主讲,系统拆解淘宝天猫网站设计的全套逻辑与实战技巧。无论您是想转型电商设计的新人,还是希望规范店铺形象的运营人员,这都是一门不可多得的体系化入门指南。
课程开篇即直击核心,深入剖析电商网站设计的“产品需求与设计逻辑”。许多初学者往往陷入“为了设计而设计”的误区,忽视了商业本质。本章节通过风格定位、根本需求点分析以及画面化表现方式,引导学员建立正确的 Design Thinking。您将学习到如何根据目标客群确立网站的调性与着眼点,并熟悉淘宝天猫平台严格的店铺设计规范及组件参数标准。此外,通过对真实个案的迭代分析,您将掌握如何在合规的前提下进行元素创新与应用。
紧接着,课程厘清了 UED(用户体验设计)与 EUI(界面实现)之间的逻辑关系。设计不能仅停留在概念层面,更需要框架与规范的支撑。本部分详细讲解了从架构思维到落地实现的完整链路,包括网站页面布局的规范及实操方法,帮助学员建立起“先骨架、后皮肉”的科学设计 workflow。
在技术实操层面,课程聚焦于电商网站最关键的两大区域——头部与首屏。头部作为用户进入店铺的第一触点,其背景制作、LOGO 呈现、凹槽效果以及 Iconfont 矢量素材的应用均有细致的步骤拆解。特别是导航按钮的布尔运算绘制技巧,能够大幅提升设计效率与精度。随后,课程深入首屏 Banner 的设计逻辑,讲解如何通过视觉冲击力定调整个店铺的格调,从而留住用户视线。
《吴刚大讲堂》不仅是一套软件操作教程,更是一次电商设计思维的全面重塑。它从理论逻辑到规范标准,再到具体组件的精细化制作,层层递进,确保学员不仅能“做出图”,更能“设计出价值”。如果您渴望在电商设计领域建立扎实的基础,这套课程将是您通往专业设计师之路的最佳起点。
课程目录
课程目录52 集
- 1-1 [电商网站的产品需求与设计逻辑] 01-电商网站设计的风格定位和网站设计的根本需求点分析 (22:14).mp4
- 1-2 [电商网站的产品需求与设计逻辑] 02-电商网站设计的风格定调的画面化表现方式 (10:44).mp4
- 1-3 [电商网站的产品需求与设计逻辑] 03-网站风格定位和调性选择的出发点和着眼点 (05:51).mp4
- 1-4 [电商网站的产品需求与设计逻辑] 04-店铺设计规范及各组件相关参数标准 (08:54).mp4
- 1-5 [电商网站的产品需求与设计逻辑] 05-淘宝天猫网站个案分析及网站元素迭代应用方法 (08:33).mp4
- 2-1 [电商网站的UED与EUI实现关系] 06-电商网站设计的UED架构与EUI落地之间的逻辑关系 (05:19).mp4
- 2-2 [电商网站的UED与EUI实现关系] 07-设计需要框架与电商网站设计规范及画面化实现 (08:42).mp4
- 2-3 [电商网站的UED与EUI实现关系] 08-网站页面布局规范及实操方法 (06:41).mp4
- 3-1 [电商网站头部区域规范标准与制作技巧] 09-头部区域背景制作方法及技术实现步骤 (10:18).mp4
- 3-2 [电商网站头部区域规范标准与制作技巧] 10-头部LOGO及官网名称区域制作及凹槽效果实现方法 (06:15).mp4
- 3-3 [电商网站头部区域规范标准与制作技巧] 11-关注图标的绘制及iconfont生成png矢量素材应用 (04:23).mp4
- 3-4 [电商网站头部区域规范标准与制作技巧] 12-电商天猫站官网头部区域制作方法及构图搭建 (05:01).mp4
- 3-5 [电商网站头部区域规范标准与制作技巧] 13-导航的制作及布尔运算绘制异形导航按钮 (07:58).mp4
- 3-6 [电商网站头部区域规范标准与制作技巧] 14-搜索框及官网顶部区域制作完成效果 (02:38).mp4
- 4-1 [电商网站首屏区域调性定调与实现技巧] 15-首屏Banner跨屏设计及Banner高度与背景设定 (03:19).mp4
- 4-2 [电商网站首屏区域调性定调与实现技巧] 16-网站首屏Banner的主图形绘制方法及相关参数调整 (06:48).mp4
- 4-3 [电商网站首屏区域调性定调与实现技巧] 17-网站主视觉的拓形和配色及技术方法实现分析 (03:55).mp4
- 4-4 [电商网站首屏区域调性定调与实现技巧] 18-主视觉配色方法及效果实现与细节修饰方法 (05:28).mp4
- 4-5 [电商网站首屏区域调性定调与实现技巧] 19-首屏主视觉中辅助图形的霓虹效果制作及图层混合模式调整 (05:00).mp4
- 4-6 [电商网站首屏区域调性定调与实现技巧] 20-首屏顶部射灯效果制作 (07:00).mp4
- 4-7 [电商网站首屏区域调性定调与实现技巧] 21-背景光带效果制作及其与画面细节调解关系 (05:41).mp4
- 5-1 [电商网站首屏区主视觉文案定调与实现技巧] 22-网站主视觉中心主文案字体变形的甩笔与连笔效果制作 (07:50).mp4
- 5-2 [电商网站首屏区主视觉文案定调与实现技巧] 23-画面主视觉的文案效果及围绕性文案在主视觉中的布局效果 (08:38).mp4
- 5-3 [电商网站首屏区主视觉文案定调与实现技巧] 24-荧光光斑的制作及应用 (05:48).mp4
- 5-4 [电商网站首屏区主视觉文案定调与实现技巧] 25-主文案高光条效果制作方法 (05:18).mp4
- 5-5 [电商网站首屏区主视觉文案定调与实现技巧] 26-电商官网首屏效果亮相及细节统一性调整 (08:14).mp4
- 6-1 [折扣与优惠信息效果打造方法] 27-抢购内容页面包屑的图形化分析 (04:27).mp4
- 6-2 [折扣与优惠信息效果打造方法] 28-文字信息图标化展现面包屑画面逻辑关系 (14:45).mp4
- 6-3 [折扣与优惠信息效果打造方法] 29-面包屑细节表现形式及画面美观度调整 (05:01).mp4
- 6-4 [折扣与优惠信息效果打造方法] 30-文案头部的系统化编组 (02:50).mp4
- 6-5 [折扣与优惠信息效果打造方法] 31-文案头部内容在不同屏的效率化置换 (03:00).mp4
- 6-6 [折扣与优惠信息效果打造方法] 32-点券画面化中在版心的位置平均分布法及应用 (02:48).mp4
- 6-7 [折扣与优惠信息效果打造方法] 33-布尔运算制作点券的齿轮效果 (07:01).mp4
- 6-8 [折扣与优惠信息效果打造方法] 34-优惠券信息的效率化成组生成及文案和按钮的排版 (04:07).mp4
- 6-9 [折扣与优惠信息效果打造方法] 35-优惠券的批量化更新及实现效果 (03:08).mp4
- 7-1 [爆款产品的展示与轮播效果打造] 36-爆款产品页面布局及版面分割方法 (04:04).mp4
- 7-2 [爆款产品的展示与轮播效果打造] 37-调整网页整体高度的方法 (03:18).mp4
- 7-3 [爆款产品的展示与轮播效果打造] 38-爆款产品轮播区的圆形设计及位置排版布局 (03:30).mp4
- 7-4 [爆款产品的展示与轮播效果打造] 39-爆款产品轮播图效果制作及投影反光效果实现方法 (04:08).mp4
- 7-5 [爆款产品的展示与轮播效果打造] 40-镇店之宝轮播图效果打造及整体统一性调整 (03:50).mp4
- 7-6 [爆款产品的展示与轮播效果打造] 41-爆款轮播组的效果打造实现 (05:35).mp4
- 8-1 [电商网站小Banner设计方法与风格统一性实现] 42-小Banner的品牌调性分析和设计分析 (05:06).mp4
- 8-2 [电商网站小Banner设计方法与风格统一性实现] 43-小Banner的技术分析及操作步骤分析 (02:52).mp4
- 8-3 [电商网站小Banner设计方法与风格统一性实现] 44-Banner背景效果的打造和完成 (03:08).mp4
- 8-4 [电商网站小Banner设计方法与风格统一性实现] 45-通道抠取模特头发与背景色分离 (09:05).mp4
- 8-5 [电商网站小Banner设计方法与风格统一性实现] 46-小Banner的模特合成及细节效果修饰完成 (07:28).mp4
- 9-1 [产品展示页面的布局与实现方法] 47-产品展示页面的空间布局及内容设计 (17:34).mp4
- 9-2 [产品展示页面的布局与实现方法] 48-产品展示页的内容抠取及填充完善 (05:19).mp4
- 9-3 [产品展示页面的布局与实现方法] 49-网站底部区域与头部统一性和风格调性呼应关系分析 (02:53).mp4
- 9-4 [产品展示页面的布局与实现方法] 50-底部区域的呼应关系的实现方法 (11:21).mp4
- 9-5 [产品展示页面的布局与实现方法] 51-网站整体设计思路回顾及重点难点解析 (08:43).mp4
- 9-6 [产品展示页面的布局与实现方法] 52-网页浏览效果及相关交互规则合理性分析与修正 (05:57).mp4






