2.3产品原型制作（课件）《电子商务视觉设计》（电子工业出版社）

模块一 电商视觉设计认知 《电商视觉设计》 思维导图 网站商城整体设计 1 目录 CONTENTS 3 电商网站的视觉规划 电商视觉营销的规划 2 项目二 电商网站的视觉规划 项目背景 在全渠道数字化运营项目中，电商网站的建立和运营是其中一个重要的环节，为各项运营活动提供平台和载体。随着互联网的快速发展，电商网站也在日新月异中快速发展，同时消费者对电商网站也有了更高的要求，这种要求不仅体现在网站的功能方面，还体现在电商网站的视觉设计方面。 一个网站的视觉规划有利于网站的运营，一方面消费者能够清晰地看到电商网站的布局，可以迅速找到自己目标所在的位置，另一方面网站的色彩搭配也能够吸引到消费者。 进行电商网站视觉规划，需要在有效地产品需求分析基础上，清楚地了解产品需求，然后根据具体的产品需求进行产品概念设计，再在产品原型制作的指导下科学、有序地展开产品研发工作。 研究内容 产品需求分析 产品概念设计 产品原型制作 学习目标 1.了解产品需求分析的概念、内容； 2.熟悉产品概念设计的内容； 3.熟悉产品原型制作的理论知识。 知识目标 1.能够独立进行产品需求分析，并撰写需求报告； 2.能够根据产品需求分析，独立进行产品概念设计； 3.能够进行简单的产品原型制作。 技能目标 1.了解社会主义核心价值观，诚实守信，遵守职业道德； 2.具备积极主动的工作态度、较强的视觉审美与设计能力； 3.具备较强的沟通能力和良好的解决问题能力。 素养目标 任务三 产品原型制作 预备知识 一、认识产品原型制作 1.产品原型的定义 产品原型是设计方案的表达，是产品经理、交互设计师的重要产出物之一，可以让用户提前体验产品，供开发团队之间交流设计构想、展示复杂交互的方式。 预备知识 一、认识产品原型制作 2.产品原型的种类 产品设计原型按照精细程度来分，可分为低保真产品原型和高保真产品原型。 低保真产品原型：低保真原型是对产品进行较为简单的模拟图，简单地描述产品的外部特征和基本功能构架，只需要用简单的设计工具进行制作，用来表示最初的设计概念和思路。 高保真产品原型：相较于低保真产品原型图，高保真产品原型图的设计要求更高，全面展示产品功能、界面元素、功能流程的一种表现手段。原型图中无论是功能模块的大小，还是文案设计甚至所用的图标、图例、交互动作都使用真实素材，用户可直接看到产品的页面组成。 预备知识 二、产品原型制作工具Axure RP介绍 Axure RP是美国Axsure Software Solution公司旗舰产品，一个专业的快速原型设计工具，支持Windows和Mac OS,它能够让产品经理等设计人员快速创建应用软件或Web网站的线框图、流程图、原型和规格说明书。 预备知识 二、产品原型制作工具Axure RP介绍 工具栏区域：是页面编辑的一些快捷键操作区域，主要有字体、字号、颜色、边框样式、尺寸、位置等常规设置，保存、打开、剪切、撤销、粘贴、重做以及Axure本身自带的一些工具，如选择、连接、钢笔、格式刷等。 预备知识 二、产品原型制作工具Axure RP介绍 页面导航区域：展示了一个项目中所有的页面，原型中所有的页面都会按照层级结构显示在这里，支持创建文件夹，可以将页面分类管理：可以添加同级页面、添加子页面、修改页面级别、修改页面顺序，也可对页面进行重新命名操作、删除操作等。注意页面列表面板中的页面名称就是原型发布后生成的HTML文件名称，如需将这些HTML文件部署到自己的服务器或其他云平台上，最好采用英文命名方式，若是本地浏览可使用中文名称。 预备知识 二、产品原型制作工具Axure RP介绍 部件区域：也叫组件库或元件库，所有软件自带的元件以及手动导入的元件都在这里，这些元件是设计一个产品原型的“基础”。Axure默认提供三种不同类型的元件库：1.Default元件库，包含基本元件、表单元件、菜单、表格以及标记元件；2.Flow元件库，包含各种流程图元件，通过绘制流程图可以梳理复杂的业务流程；3.Icons元件库，包含各种常用图标，但只是为了方便原型制作，真实产品中一般不直接使用，需根据产品整体风格重新设计。这些元件操作起来很简单，把元件拖入设计区域即可使用，双击设计区域中的元件可修改其文本内容。 预备知识 二、产品原型制作工具Axure RP介绍 母版区域：当原型中有些元素需要重复使用时，可把重复元件制作成母版，方便随时调用。母版面板与页面导航面板相似，以列表的形式展现，支持创建文件夹以便分类管理。通常用于页面头部、菜单栏等的制作。 预备知识 二、产品原型制作工具Axure RP介绍 页面编辑区域：绘制产品原型的区域，用于排布元件位置、设置元件样式等。设置区域中有横向标尺、纵向标尺，最大支持20000像素×20000像素的原型，可以加入网格和参考线，进行辅助设计。注意设计区域中的原型样式和发布后的原型样式可能并不完全相同。 预备知识 二、产品原型制作工具Axure RP介绍 属性以及交互设置区域：在这里可以设置选中元件的样式，添加该元件相关的注释以及设置该元件的一些交互事件，例入鼠标点击时的事件等。 实施准备 掌握Axure RP操作理论知识，有助于学生顺畅地绘制产品原型图。产品原型图能够清楚地展示产品的基本框架、运作机制，直观地了解产品界面的样式、按钮的功能效果，理解产品的真实意图，因此产品原型制作是电商网站开发中至观重要的一环，可以有效地帮助产品设计、开发人员进行后续的网站视觉规划。 任务实施与分析 步骤1：利用前面所学知识，梳理出“生活类电商网站”——未来生活网的基本框架 任务实施与分析 步骤2：根据信息架构图发现需要制作6个Web网站页面，打开Axure RP软件，在“左侧”页面处进行文件夹的创建，如图所示。这里需要注意层级、页面逻辑结构的设置，首先明确网站所包含的模块。 任务实施与分析 步骤3：网站首页制作 步骤3.1：设置原型尺寸 选择要设计的页面，单击菜单中的“布局”——“栅格和辅助线”——“创建辅助线”，打开“创建辅助线”对话框，设置列数为1，列宽为1000（Web产品一般在PC端使用，通常页面宽度设置为1000像素左右），间距宽度为0，边距为0，设置行数为0，行高40，间距宽度为20，边距为0，勾选“创建为全局辅助线”，所有页面均被添加了辅助线。 任务实施与分析 步骤3：网站首页制作 步骤3.2：制作网站名称 在左侧的“元件库”中选择“一级标题”，拖拽到操作页面，然后输入网站名称“未来生活”，在右侧的“一级标题”处进行样式设置，如字体、颜色、字号，如图所示。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 （1）在左侧的“元件库”中选择“矩形”，通过拖拉到操作区，进行形状大小和颜色的调整。大小设置为X轴坐标0，y轴坐标130,宽度1000，高度39，颜色填充为#00CC66。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 （2）在左侧的“元件库”中选择“文本标签”创建标题，设置标题大小并设置行间距。如设置“所有商品分类”，大小设置为X轴坐标71，y轴坐标130,宽度175，高度39，颜色填充为#009900，字体黑体，颜色#FFFFFF，字号28，对齐方式居中。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 （3）设置“首页”标签，大小设置为X轴坐标275，y轴坐标130,宽度49，高度39，字体黑体，颜色#FFFFF，字号20，对齐方式居中。同样方式创建“台创园”、“消费帮扶”、“韩国馆”、“充值”“未来礼品”标签。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 （4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。 在左侧的“元件库”中选择“矩形1”，通过拖拉到操作区，进行形状大小和颜色的调整，依次制作出“水果”、“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”等子菜单，并分别命名tab1、tab2、tab3、tab4、tab5。可以设置无颜色填充#FFFFF，字体黑体，字号18号，居中。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 （4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。 要使鼠标选中或悬浮“水果”、“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”后，标签颜色变化且同一时刻这五个标签只能有一个被选中，其操作步骤如下： ①设置5个标签页选中时的交互样式：选中tab1、tab2、tab3、tab4、tab5。点击属性面板中的“选中”按钮，打开“交互样式设置”对话框，选择字体黑体，字号18，字体颜色#333333，填充颜色为#CCCCCC。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 （4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。 ②用同样的方法设置5个标签页鼠标悬浮时的交互样式。 ③选中tab1，勾选属性面板中的“选中”，设置标签1默认为选中状态，如图所示。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 （4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。 ④选中tab1、tab2、tab3、tab4、tab5。在属性面板中设置选项组名称为tab，即在同一时刻这三个标签只能有一个被选中，如图所示。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 要使点击“水果”、“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”后，分别出现对应的子菜单，需要使用左侧“元件库”中的“动态面板”，以制作“水果”的右侧子菜单为例，操作如下： ①将“动态面板”拖拉到操作区合适位置，填充颜色并命名“水果1”，然后拖曳“三级标题”到动态面板中添加文字，设置字体黑体，字号16号，居中。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 ②设置第一个父菜单“水果”，添加事件，当鼠标右击“水果”时切换到动态面板“水果1”。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 ③选择动态面板“水果1”，添加事件，使其鼠标离开时隐藏起来。 任务实施与分析 步骤3：网站首页制作 步骤3.3：制作导航栏 ③选择动态面板“水果1”，添加事件，使其鼠标离开时隐藏起来。 同样的方法，设置“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”的子菜单，使其鼠标单击时能显示子菜单，当鼠标移开子菜单时子菜单隐藏。 任务实施与分析 步骤3：网站首页制作 步骤3.4：制作单张海报图 （1）在左侧“元件库”中选择“图片”，拖拉到操作区，双击该元件可导入外部图片，也可在右侧的属性面板中单击“导入”按钮，如图2-28所示。若导入的图片过大，会询问是否进行优化，若选择“是”Axure会适当压缩图片，若选择“否”则以原图大小导入。 任务实施与分析 步骤3：网站首页制作 步骤3.4：制作单张海报图 （2）对导入的图片进行大小调整。拖曳图片四周和四角的定位点，可以改变图片的大小。按住Shift键同时拖曳可按原比例缩放，双击任何一个定位点可恢复至原来大小。 任务实施与分析 步骤3：网站首页制作 步骤3.4：制作单张海报图 （3）裁剪图片。经过等比例缩放后的图片还有些长，需要进行裁剪，如图2-35所示。在图片上单击右键，选择“裁剪图片”，拖动图像内部的定位点设置要裁剪的区域。 任务实施与分析 步骤3：网站首页制作 步骤3.4：制作单张海报图 （4）选中图片，点击工具栏中的“底层”按钮，将海报图设置为底层，这样在点击左侧的导航栏时出现的子菜单就会显示在海报上方。 任务实施与分析 步骤3：网站首页制作 步骤3.5：进行“好评如潮”、“新品上线”“买手力荐”等模块的设置。 （1）拖入3个“矩形1”到设计区域，竖向排开，分别填写文本为“好评如潮”、“新品上线”、“买手力荐”并命名，尺寸均为175像素×54像素，位置自行设置，同时设置字体黑体，字号20，字体颜色#000009，填充颜色为#66FF99。 任务实施与分析 步骤3：网站首页制作 步骤3.5：进行“好评如潮”、“新品上线”“买手力荐”等模块的设置。 （2）拖入左侧元件库的“矩形1”元件到3个标签的右侧，再分别拖动图片导入产品图片，然后添加产品说明文字。 任务实施与分析 步骤3：网站首页制作 步骤4：进行尾部的制作。这里重点展示该网站的特色：“18小时低温”、“0时差基本直供”、“64项检测”、“7*24小时营业”，因此网站的尾部设计简洁大方，操作如下： （1）拖入“矩形1”到设计区域，调整位置及大小，尺寸为842像素×170像素，填充颜色为#cccccc。 任务实施与分析 步骤3：网站首页制作 步骤4：进行尾部的制作 （2）添加文本标签，输入网站特点文字，设置字体、字号等基本要素，也可使用左侧的垂直线进行页面分割，使得更美观，如图所示。 任务实施与分析 步骤3：网站首页制作 上面是一个网站首页的简单制作，要设置更多页面，可参考此方法。注意进行文件夹下其他页面模块内容制作时，点击左侧页面中的文件夹，选择“子页面”，之后进行各模块内容的制作。 任务实施与分析 通过以上步骤即可完成对首页的设计，参考首页设计的步骤，对其他页面进行设计。 拓展知识 一、其他产品原型制作工具介绍 1.Visio Visio是微软公司所研发的办公软件之一，也是目前市场上主流的绘图软件。便于IT和商务专业人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件，它不仅可以将用户的思想、设计与最终产品演变成形象化的图像进行传播，而且还可以帮助用户创建具有专业外观的图表，以便理解、记录和分析信息、数据、系统和过程。 拓展知识 一、其他产品原型制作工具介绍 菜单栏：主要是各种菜单工具，包括设置字体、填充颜色等不同的功能； 形状栏：提供了各种图形可供设计； 编辑区：进行绘图制作。 拓展知识 一、其他产品原型制作工具介绍 2.墨刀 墨刀是一款在线原型设计工具。借助于墨刀，创业者、产品经理及UI/UX设计师能够快速构建移动应用产品原型，并向他人演示。 作为一款专注移动应用的原型工具，墨刀把全部功能都进行了模块化，用户也能选择页面切换特效及主题，操作方式也相对简便，大部分操作都可通过鼠标拖动来完成。 拓展知识 一、其他产品原型制作工具介绍 工具栏：主要是各种工具和设置，例如字体的设置。 页面管理区域：可以管理原型设计中项目的页面。 元素管理区域：管理页面上使用过的所有元素。 预览页面：是进行产品设计和预览的区域。 素材库：也称为“内置组件”，在产品原型设计时会用到， 基本设置（项目设置）：对一些基本信息的设置。 思考与总结 学员通过以上操作，完成对产品原型的制作，请学员在此基础上，进行思考并回答以下问题： 产品原型制作过程中需要注意哪些问题？ 能力提升 请用Axure软件设计一个淘宝服装网店，网店需要能够全面展示店铺的信息，包括首页、上衣、裤子几个层级，每个层级中需要有对应的商品展示。 $$