电商详情页设计教程全集|需求分析与风格定位 ↗
学习需求分析与风格定位,为咖啡品牌写受众、渠道、尺寸和修订记录,设计前先确认用途。
去B站看教程 ↗用这个案例贯穿十个单元,也可以换成自己的工作任务。
设计学习者、品牌人员、电商与门店运营
可使用电脑和编辑文件;具体工具账号与费用以开课安排为准。
围绕本课程案例完成专属成果;通用任务表达与事实核验采用入门课程方法。
所属专题:AI内容创作与营销 · 使用模拟或获授权的资料练习。
先看对应教程,再用提示词和工具练习,最后核对自己的成果。
中文教程优先 · 原有课程与海外参考均保留
为虚构咖啡品牌写需求单
把模糊需求转成视觉任务
客户只说要高级感,反复改稿;先写清用途、对象、尺寸和修订要求。
学习需求分析与风格定位,为咖啡品牌写受众、渠道、尺寸和修订记录,设计前先确认用途。
去B站看教程 ↗学习需求目的、交付时间和不希望出现的设计内容,把咖啡品牌需求写成可以确认的任务单。
前往学习 ↗以信息关系与识别性原则检查设计需求,明确主次信息。
前往学习 ↗确认使用渠道、尺寸和输出要求,补全需求单。
前往学习 ↗把已确认主体、风格、环境写进生图任务,避免空泛审美词。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
从案例输入开始;先核对设备、账号与资料。
常见偏差:未做到“尺寸不是随意填”;未做到“不模糊成好看”。先指出原始证据,再修订对应字段或操作。
接着下一步将“尺寸、受众、用途与修订表”保存为单元1成果,供单元2“商业审美与渠道目标”选用;待确认项一并交接。
进入第2单元 · 商业审美与渠道目标 →比较3组视觉参考
用渠道和品牌目标判断审美
参考图很多,却不知道为什么合适;比较三组风格与渠道目标。
看海报分类,从三组参考中比较媒介、阅读距离与表达风格,说明设计方向怎样服务渠道目标。
去B站看教程 ↗阅读品牌视觉案例中的色彩、图形与品牌表达,给三组参考写适用场景及取舍理由。
前往学习 ↗从品牌色和使用场景比较三组视觉方向。
前往学习 ↗检查各参考图如何突出核心信息及使用留白。
前往学习 ↗将选中的方向转成风格参考,生成可比较的草稿。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元1的“尺寸、受众、用途与修订表”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
常见偏差:未做到“评价与业务用途有关”;未做到“参考不是自有素材”。先指出原始证据,再修订对应字段或操作。
接着下一步将“参考分析与设计方向说明”保存为单元2成果,供单元3“海报信息与视觉焦点”选用;待确认项一并交接。
进入第3单元 · 海报信息与视觉焦点 →设计活动标题、时间和行动入口
建立海报信息层级
海报堆满信息,用户找不到重点;突出标题、时间与行动入口。
看文案梳理,排列标题、时间和行动入口的阅读顺序,再检查活动信息是否完整。
去B站看教程 ↗学习模板编辑与导出方法,制作活动海报草案并逐字检查标题、时间及报名入口。
前往学习 ↗选择一种图文布局,先确定标题与主体位置。
前往学习 ↗按先活动标题、再时间地点、最后报名行动入口的顺序调整字号、间距与留白,在手机尺寸检查信息是否一眼可读。
前往学习 ↗按分组和识别性检查活动信息是否清楚。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元2的“参考分析与设计方向说明”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
豆包:把本单元资料整理进提示词,先完成文字分析或草稿,再核对。
Canva:上传素材排海报,标题在编辑器中校对
Leonardo.Ai:为咖啡店活动尝试三种主视觉方向,标注为创意示意。
Ideogram:制作带简短标题的活动海报,人工检查生成文字。
Pixlr:给活动图片裁切、调整尺寸并制作发布版本。
咖啡店:新品照片做一张宣传海报 →
Canva / 豆包
Canva:为门店活动制作海报和社交图片,核对文字与素材授权 →
Canva
Leonardo.Ai:为咖啡店活动尝试三种主视觉方向,标注为创意示意 →
Leonardo.Ai
Ideogram:制作带简短标题的活动海报,人工检查生成文字 →
Ideogram
常见偏差:未做到“未知价格日期不补”;未做到“主行动清晰”。先指出原始证据,再修订对应字段或操作。
接着下一步将“海报草案与阅读顺序检查”保存为单元3成果,供单元4“品牌参考与素材管理”选用;待确认项一并交接。
进入第4单元 · 品牌参考与素材管理 →整理一个小型品牌参考库
统一色彩、字体与素材来源
每次出图风格都不同;整理品牌参考、色值和素材使用说明。
看快速找图小窍门,整理小型品牌参考库;参考图仅供分析,不能自动视为可商用素材。
去B站看教程 ↗阅读品牌风格与模板锁定的思路,制定素材索引、色彩字体规范和允许修改的范围。
前往学习 ↗学习建立品牌调色板,把颜色集中管理。
前往学习 ↗记录主色、辅助色及屏幕与印刷色彩差异。
前往学习 ↗使用统一参考图,并保存各次生成的设置与结果。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元3的“海报草案与阅读顺序检查”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
豆包:把本单元资料整理进提示词,先完成文字分析或草稿,再核对。
Figma AI:整理品牌参考、颜色和素材组件
Midjourney:为同一品牌探索三种视觉氛围,记录提示词和选图理由。
Recraft:为同一品牌探索统一风格的插图和图形素材。
常见偏差:未做到“字体图片许可需核对”;未做到“概念不当客户实拍”。先指出原始证据,再修订对应字段或操作。
接着下一步将“风格板与素材索引”保存为单元4成果,供单元5“商品结构与场景细节”选用;待确认项一并交接。
进入第5单元 · 商品结构与场景细节 →对比商品参考与生成场景
核对商品结构和关键细节
商品场景好看但结构失真;保留真实参考并检查细节。
参考电商主图与详情图的制作演示,以商品实拍比对生成结果,逐项核对结构、数量和标识。
去B站看教程 ↗阅读商品图片与细节展示规范,建立商品结构核验表;2021版只作规范示例,发布前复查目标平台。
前往学习 ↗用参考图控制商品在画面中的位置和结构。
前往学习 ↗学习替换背景而保留主体的做法,核对边缘和外观。
前往学习 ↗理解商品主图与补充媒体的角色,选择真实展示所需视角。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元4的“风格板与素材索引”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
豆包:把本单元资料整理进提示词,先完成文字分析或草稿,再核对。
Photoroom:处理真实商品照片并核对轮廓不变
Adobe Firefly:制作一张品牌概念图,保持产品事实与AI创意表达分开。
ComfyUI:在测试环境运行一个图像工作流,核对模型许可、节点和输出。
Krea:从一张获授权的参考图探索视觉变化并比较细节。
Clipdrop:处理获授权图片中的背景或干扰区域,核对修复结果。
咖啡店:新品照片做一张宣传海报 →
Canva / 豆包
Adobe Firefly:制作一张品牌概念图,保持产品事实与AI创意表达分开 →
Adobe Firefly
ComfyUI:在测试环境运行一个图像工作流,核对模型许可、节点和输出 →
ComfyUI
常见偏差:未做到“不能改变商品结构”;未做到“效果图不冒充实物”。先指出原始证据,再修订对应字段或操作。
接着下一步将“商品图版本与细节核验表”保存为单元5成果,供单元6“门店空间与视觉方向”选用;待确认项一并交接。
进入第6单元 · 门店空间与视觉方向 →为模拟门店制作氛围提案
将空间需求变为视觉方向
门店氛围提案只有几个形容词;制作可比较的空间视觉方向。
参考门店案例的空间构件、材质、模型、灯光与渲染操作,为模拟门店制作氛围提案并注明施工条件待确认。
去B站看教程 ↗学习先完善硬装与材质再安排照明的操作步骤,将门店氛围提案与实际尺寸、施工条件待确认事项分开记录。
前往学习 ↗用主体、空间、材质、照明与构图生成概念方向。
前往学习 ↗上传布局参考,减少空间结构随意变化。
前往学习 ↗确定各方向的主色和情绪表达,说明方案差异。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元5的“商品图版本与细节核验表”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
常见偏差:未做到“不把效果图当现有店面”;未做到“不擅改建筑尺寸”。先指出原始证据,再修订对应字段或操作。
接着下一步将“空间参考与方案边界说明”保存为单元6成果,供单元7“轻量3D与展示思路”选用;待确认项一并交接。
进入第7单元 · 轻量3D与展示思路 →设计简单包装的展示视角
区分概念展示与可制造方案
包装展示角度单一;用简单3D参考探索视角和光线。
选择“P1 程序化啤酒杯包装”一节,参考包装模型的展示角度,制作概念图并注明尺寸待确认。
去B站看教程 ↗阅读包装案例中的形状、结构与产品呈现方式,整理展示角度和实际材料尺寸待确认清单。
前往学习 ↗学习 Scene to Image 中的场景、视角和灯光控制;效果图不作为精确工程模型。
前往学习 ↗以包装参考控制画面结构,检查轮廓是否改变。
前往学习 ↗比较同一包装在不同背景下的展示效果。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元6的“空间参考与方案边界说明”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
常见偏差:未做到“概念不当工程模型”;未做到“未知尺寸不补”。先指出原始证据,再修订对应字段或操作。
接着下一步将“概念展示与尺寸待确认清单”保存为单元7成果,供单元8“方案说明与客户反馈”选用;待确认项一并交接。
进入第8单元 · 方案说明与客户反馈 →将模拟反馈转成修订任务
解释选择并管理修改意见
客户反馈一句不好看,修改没有方向;把反馈转成具体调整。
学习开业活动海报修改案例,把模拟反馈转为标题、层级和入口的具体修订任务。
去B站看教程 ↗学习接受、拒绝与评论修改建议的方法,为设计方案说明保存原反馈、修改动作和确认状态。
前往学习 ↗按编辑、变体和下载操作保存修订版本。
前往学习 ↗将反馈拆成层次、分组与识别性问题再修改。
前往学习 ↗针对主体位置、比例和构图做可比较的调整。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元7的“概念展示与尺寸待确认清单”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
常见偏差:未做到“偏好不当客观错误”;未做到“未修改不标完成”。先指出原始证据,再修订对应字段或操作。
接着下一步将“方案说明与修改对照表”保存为单元8成果,供单元9“项目整理与作品集”选用;待确认项一并交接。
进入第9单元 · 项目整理与作品集 →整理一组品牌素材的制作过程
以需求、过程和结果呈现作品
做过不少图,却展示不出解决问题的能力;整理完整品牌项目。
学习作品集内容整合,将一组品牌素材的需求、参考、修改与成果整理为过程记录。
去B站看教程 ↗学习字段与画册视图的内容管理方式,按用途、版本与授权建立作品集素材索引。
前往学习 ↗挑选作品,加入目标、过程、修订与成果说明。
前往学习 ↗将同一品牌主图扩展到不同社媒版式,形成系列作品。
前往学习 ↗检查作品集里的配色是否保持统一。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元8的“方案说明与修改对照表”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
常见偏差:未做到“不伪造客户成绩”;未做到“作品状态如实”。先指出原始证据,再修订对应字段或操作。
接着下一步将“作品集页面与过程记录”保存为单元9成果,供单元10“交付文件与服务范围”选用;待确认项一并交接。
进入第10单元 · 交付文件与服务范围 →导出不同渠道的素材版本
规范文件版本和交付范围
交付一张图不够用;按渠道整理尺寸、格式和服务边界。
学习作品集规范,核对作品展示与源文件目录是否齐全,列出各渠道交付版本与服务范围。
去B站看教程 ↗学习下载格式与批量下载限制,导出不同渠道素材并检查命名、可编辑源文件及交付目录。
前往学习 ↗核对输出尺寸、分辨率和印刷要求。
前往学习 ↗下载与保存生成结果,整理可交付文件和源素材。
前往学习 ↗核对工具使用条件,写清生成素材和客户提供素材的使用边界。
前往学习 ↗外部学习资源 · 公开信息核对于 2026-10-05 · 视频及教程按对应操作选用,外部案例不等同于本课案例;账号与播放条件以原平台为准
读取单元9的“作品集页面与过程记录”,只带入本节所需部分;缺少成果先补齐或使用明确标注的教学参考。
常见偏差:未做到“不存在文件不说已交付”;未做到“授权随文件说明”。先指出原始证据,再修订对应字段或操作。
接着下一步汇总十个单元成果,检查可打开文件、来源、版本与未完成项。
整理成果,下载配套资料 →公开教程由原平台提供,账号与播放条件以原平台为准。有光正式授课安排另行确认。
配套案例输入、10个单元任务、成果模板与核验清单。
版本 2026-10-04 v3 · 教学起步资料,非已开班正式教材。包含模拟案例输入、十个单元任务、成果工作表、空白模板、检查清单与公开参考链接。基础表格为CSV,文档为TXT与Markdown。另含:十份单元演示与核验脚本、单元专属检查项、前后承接说明、补充案例数据;现有参考文件与代码示例另附。 含两种尺寸可编辑SVG教学排版。
使用模拟或获授权的资料,包内数字与记录不代表客户业绩;模型调用与工具费用另行确认。
应用 · 建议每单元教学60分钟,课后练习45分钟。正式课时另行确认。
十个单元均提交成果;按四项标准各0—2分评价,建议至少6/8分;隐私泄露、虚构关键事实或不可运行的核心代码须修订后复查。这是教学建议,不是认证标准。
建议每单元演示15分钟、练习30分钟、检查与答疑15分钟;工程交付另加30分钟调试。作业建议7日内提交,讲师确认实际反馈时间与补交规则。
十四门课程均已配套单元任务、提示词、工具与公开学习资源。外部教程用于辅助练习,完整成果仍需按本课检查清单完成;正式开课安排另行确认。
班期、教师和收费待确认;工具订阅与API费用另行核对。