2.1电商网站的视觉规划（教案）《电商视觉设计》（华东师范大学出版社）

《电商网站的视觉规划》课程教案 教学模块 项目二 电商网站的视觉规划 课时数 9 教学班级 主讲教师 教学目的和要求 知识目标 1.了解产品需求分析的概念、内容； 2.熟悉产品概念设计的内容； 3.熟悉产品原型制作的理论知识。 技能目标 1.能够独立进行产品需求分析，并撰写需求报告； 2.能够根据产品需求分析，独立进行产品概念设计； 3.能够进行简单的产品原型制作。 素养目标 1.了解社会主义核心价值观，诚实守信，遵守职业道德； 2.具备积极主动的工作态度、较强的视觉审美与设计能力； 3.具备较强的沟通能力和良好的解决问题能力。 教学手法 1.基础知识，教师利用讲授法和问答法，首先通过提问引发学生思考，让学生发表自己关于问题的见解，教师总结学生答案并讲授重要知识点； 2.重难点知识，教师利用任务驱动法，在课程开始前告知学生学习目标，引导学生围绕学习目标先自行探索、再进行合作探究，总结遇到的困难和问题，然后老师指导学生进行实操，梳理并总结出知识要点。 教学重 难点 重点： 1.掌握产品概念设计的内容； 2.撰写需求报告。 难点： 1.能够独立进行产品概念设计； 2.能够进行简单的产品原型制作。 教学要点设计 1.教师设置问题引发学生自主思考：我们在对产品需求分析的时候需要怎么开展呢？教师鼓励学生根据自己所学知识进行回答，教师结合案例讲解产品需求分析和产品概念设计。在学生对于产品需求有一定认识的基础之上，引导学生分组讨论，进行产品分析的内容的分析，有哪些注意事项，并在小组内推举代表发言。教师总结学生发言并将所有知识点进行系统讲解，为学生讲解撰写需求分析报告的要素，并结合案例讲解需求分析的工作流程；（135分钟） 2.教师在课程一开始，先设置问题，引发学生思考：如何理解产品概念设计？引导学生对问题进行讨论并陈述自己的认识，教师根据发言情况进行知识讲解产品概念设计的内容，并配合案例展示加深学生的印象和理解；实操部分，教师先行进行在产品概念设计规范和步骤讲解，在操作过程中将所有要点进行细致讲解，学生明白了如何操作后，进行独立练习，教师随时关注学生的进展并解决设计过程中遇到的各种问题；（135分钟） 3.教师在课程开始前，告诉学生本次课程的目标是认识产品原型制作，鼓励学生通过资料搜索与阅读、合作讨论等方式先自行了解相关内容。具体操作问题，教师演示利用Axure软件进行一个“生活类电商网站”高保真原型制作，并引导学生跟随老师共同操作，教师及时关注学生学习进展，对学生产生的疑问进行解答，并在课程结束前总结知识框架。（135分钟） 教学过程 任务一 产品需求分析 【预备知识】 一、认识产品需求分析 产品需求分析是进行产品设计的前提,是开发人员经过深入细致的调研和分析，准确理解用户和项目的功能、性能、可靠性等具体要求，将用户非形式的需求表述转化为完整的需求定义，从而确定系统功能的过程。 在产品需求分析的过程中需要注意删减和整合，删减是去掉不可能实现的需求，这些需求通常不切实际或者说以目前的技术难以实现；整合是合并类似或相同的需求，这样有助于后续的工作。 二、产品分析的内容 1.用户画像分析 2.竞品分析 3.用户场景分析 三、需求分析报告 在完成需求分析后，为了方便指导后续工作的进行，需要书写需求分析报告。需求阶段的成果包括用户需求报告、软件需求规格说明书。 1.用户需求报告 2.软件需求规格说明书 3.项目介绍 4.应用环境 5.功能规格 6.需求变更 7.产品提交 【任务实施与分析】 需求分析的工作流程，根据项目的复杂程度有所区别，但是总的来说，分成以下四个环节： 步骤1：获取需求 步骤2：分析需求 步骤3：整合需求 步骤4：形成报告 【拓展知识】 一、判断需求优先级的方法-四象限法则 四象限法则将需求等级划分为：重要且紧急，重要不紧急，不重要不紧急，不重要却紧急。 重要且紧急，必须尽快分配资源，抓紧时间来实现。 重要不紧急，需要花时间、精力去精细化处理好。如果不及时处理，就堆积到第一象限了。 不重要不紧急和不重要却紧急，虽然是不重要的事情，但它们也是需求，可以花费一定的时间统一去处理。注意这类需求要和前面的需求严格区分开来，不能因为边缘任务影响主线任务进展。 任务二 产品概念设计 【预备知识】 一、认识产品概念设计 产品概念设计是指由分析用户需求到生成概念产品的一系列有序的、可组织的、有目标的设计活动，产品概念设计的最终目的是开发新产品，而新产品必须满足用户需求，这就要求产品概念设计要以用户需求为重要设计依据。 二、产品概念设计的内容 通常在电商网站产品概念设计时，会用到信息架构图、功能流程图、页面流程图等三种图形： 1.信息架构图 2.功能流程图 3.页面流程图 三、设计规范 在产品概念设计的过程中，需要围绕需求进行，从得到的需求出发，根据现有的互联网设计技术进行产品概念设计。 在设计流程图的过程中，有以下基本要求： 1.有中心。这里的中心是指在产品概念设计时，需要围绕着“需求”进行，设计出来的网站，能够满足客户的需求。 2.切合实际。因为是设计，所以有很多的发挥空间，但产品概念设计影响后续的产品原型制作，所以整个产品概念设计过程中需要注意设计内容能够落地，进行实施。 【任务实施与分析】 通常情况下，产品概念设计的流程分为了以下四个步骤： 步骤1：研读需求报告，梳理产品框架 步骤2：设计信息架构图 步骤3：设计功能流程图 步骤4：设计页面流程图 【拓展知识】 一、产品概念设计的研究发展方向 随着科学技术的不断发展，产品概念设计的研究也必须向集成化、智能化、网络化、数字化的方向发展，进一步拓展产品概念设计的研究深度和广度。在研究内容上，要重视对概念设计内在规律、思维模式的研究；在研究对象上，要重视对复杂产品的概念设计研究；在实现技术上，要重视对网络技术和数字技术的应用研究。 1.复杂产品概念设计模型研究 2.统一产品模型描述方式的研究 3.协作式产品概念设计研究 4.人机协作的概念设计系统研究 任务三 产品原型制作 【预备知识】 一、认识产品原型制作 1.产品原型的定义 产品原型是设计方案的表达，是产品经理、交互设计师的重要产出物之一，可以让用户提前体验产品，供开发团队之间交流设计构想、展示复杂交互的方式。 2.产品原型的种类 产品设计原型按照精细程度来分，可分为低保真产品原型和高保真产品原型。 二、产品原型制作工具Axure RP介绍 Axure RP是美国Axsure Software Solution公司旗舰产品，一个专业的快速原型设计工具，支持Windows和Mac OS,它能够让产品经理等设计人员快速创建应用软件或Web网站的线框图、流程图、原型和规格说明书 【任务实施与分析】 下面利用Axure软件进行一个“生活类电商网站”高保真原型制作。 步骤1：利用前面所学知识，梳理出“生活类电商网站”——未来生活网的基本； 步骤2：根据信息架构图发现需要制作6个Web网站页面，打开Axure RP软件，在“左侧”页面处进行文件夹的创建； 步骤3：网站首页制作； 步骤3.1：设置原型尺寸 步骤3.2：制作网站名称 步骤3.3：制作导航栏 步骤3.4：制作单张海报图 步骤3.5：进行“好评如潮”、“新品上线”“买手力荐”等模块的设置 【拓展知识】 1、 其他产品原型制作工具介绍 1.Visio Visio是微软公司所研发的办公软件之一，也是目前市场上主流的绘图软件。便于IT和商务专业人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件，它不仅可以将用户的思想、设计与最终产品演变成形象化的图像进行传播，而且还可以帮助用户创建具有专业外观的图表，以便理解、记录和分析信息、数据、系统和过程 2.墨刀 墨刀是一款在线原型设计工具。借助于墨刀，创业者、产品经理及UI/UX设计师能够快速构建移动应用产品原型，并向他人演示。 作为一款专注移动应用的原型工具，墨刀把全部功能都进行了模块化，用户也能选择页面切换特效及主题，操作方式也相对简便，大部分操作都可通过鼠标拖动来完成。 思政小课堂 Web视觉设计是一门综合的艺术表现形式。电商网站视觉规划在实现产品需求功能的同时，也不能忽视电商视觉美学原理，在设计产品概念、绘制产品原型的时候，要将网站的功能性、实用性、便捷性与电商美学相统一，设计出简洁大方、美观实用的电商网站。 1 学科网（北京）股份有限公司 $$