电子商务网站设计 Axure教程初级电子商务网站设计-IC百科-上海羊羽卓进出口贸易有限公司

电子商务网站设计 Axure教程初级电子商务网站设计

发布时间 : 2024-10-06

作者 : 小编

访问数量 : 23

扫码分享至微信

Axure教程初级电子商务网站设计

从头开始学习创建一个电子商务网站

本教程将引导您逐步构建一个电子商务网站，在创建过程中，将使用Axure原型的多个核心功能：如母板、动态面板。我们将从头开始整个创建整个过程。

部件使用：图片、矩形、按钮形状、图片热区、动态面板、占位符、文本框、文本面板

交互事件：Onclick

动作：“移动面板”、“隐藏面板”、“设置面板状态为指定状态”、“将面板置于顶层”、“将面板置于底层”、“等待时间（毫秒）”

创建页首母板

创建新母板

第一步，创建一个有LOGO和导航的页首。在多个页面中都会使用到这个页首，所以将使用母板来制作页首。

在母板窗口，点击“添加母板”按钮。轻点新建的母板名称并修改名称为“Header”。

双击Header母板打开编辑窗口，在线框图窗口的顶部标签页，可以查看正在编辑的页面和母板。

如果标签页显示，正在编辑的页面为“Header”,那么Header母板己经被打开。

添加Logo图片

第二步从部件窗口拖图片部件到线框图中，双击图片部件导入压缩包中的“Logo.png”图片。

导入提示是否自动调整对象大小，如果需要自动调整就选择“确定”。图片会保持原大小被导入，而不按部件的大小导入。

添加导航按钮

接下来，在Logo下，添加3个按钮形状部件。

向下拖动部件窗口下拉条，找出按钮形状部件（不是按钮部件）。拖3个按钮形状部件到线框图。双击每个按钮部件修改部件文本，并修改部件标签内容分别为：Men’s, Women’s, 和Sale.

全选3个按钮形状，使用工具栏中的“线条颜色”设置按钮边线为白色（鼠标点击并在按钮上拖出一个选择区，即可全选3个按钮）。

添加水平线

添加一个水平线，将页首和下面的内容分开。

拖动"水平线"部件到线框图中，拖拽水平线左右两端的修改尺寸的控制柄，可以调整水平线的长度。用工具栏中的“线条样式”、“线条颜色”编辑样式为点虚线、颜色为蓝色。

在Home页面添加页首

从母板窗口拖页首母板到Home页面。定位在X:200;Y50

母板默认有粉色的遮罩，如果要关闭遮罩，可以在主菜单栏选择“线框图->显示母板遮罩”。

创建产品缩略图和“快速查看”按钮

添加产品缩略图

Home页面，拖入图片部件并交图片部件放在页首母板的下面。

双击部件导入 “Jeans1-1.png”文件，添加第二个图片部件，导入“Jeans2-1.png”文件。

按住shift键并拖拽图片一角，调整图片比例为宽150；高225。

添加“快速查看”按钮

拖一个按钮形状到第一张产品图片上，双击按钮形状修改文本为“快速查看”

“快速查看”按钮只有在鼠标经过图片时才会显示。所以要将图片转换为动态面板才可以动态的显示或隐藏按钮。右键按钮形状，快捷菜单选择“转换->按换为动态面板”，将图片放入动态面板中。

编辑名称并隐藏快速视图按钮

在动态面板管理窗口，修改动态面板名称为：QuickViewButton。修改名称可以让面板在设置交互时更易辨认。

右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”，将按钮设置为默认隐藏。这时动态面板会变成黄色。

动态显示按钮

使用“鼠标移入时”事件，设置当鼠标经过产品图片时显示“快速查看”按钮。

点击产品图片，在部性属性面板窗口的交互标签，双击“鼠标移入时”事件添加用例，打开用例编辑器。

添加“显示快速查看按钮”动作

左边栏中，选择“显示面板”。然后在右边栏中选中QuickViewButton复选框，配置显示的面板，点击确认。

主菜单栏选择“生成->原型”生成原型。移动鼠标经过产品图片，会显示“快速查看”按钮，但按钮一但显示，就不能隐藏了。提示:鼠标移出时与图像映射区域

使用鼠标移出时事件隐藏“快速查看”按钮，交互会出现错误。因为当鼠标经过“快速查看”按钮时，鼠标移出时事件就被启动，“快速查看”按钮将被隐藏。

可以在产品图片四边环绕图像映射区，再在图像映射区域上使用“鼠标移入时”事件，就可以隐藏“快速查看”按钮了。

图片映射区是可以设置交互和注释的透明区域。

创建图片“热区”

在产品图片上拖入一个图片热区，图片热区的四个边要比产品图片的四个边留多10px。

右键快捷菜单，选择“顺序->置于底层”，将图片热区放到产品图片和动态面板的下面。

使用图片热区隐藏动态面板

选中图片热区，双击部件属性窗口交互标签中的“当鼠标移入时”事件。用例编辑器中，左边栏选择“隐藏面板”动作，右边栏中点选QuickViewButtont复选框，选择确定。

详细产品弹出面板和图片播放器

创建详细产品弹出面板

添加矩形部件到线框图，修改矩形大小为：600*450，将矩形放在线框图页面的中间。

转换为动态面板并设置为隐

当“快速查看”按钮被点击时，详细产品弹出面板要动态的显示，所以将详细产品弹出面板转换为动态面板。

右键矩形，快捷菜单选择“转换->转换为动态面板”，并将转换的动态面板命名为“ProductPopup”。

在“快速查看”按钮被点击前，详细产品弹出面板要被隐藏，所以右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”。

快速查看按钮添加显示面板

现在给快速查看按钮添加交互，当快速按钮被点击时，显示详细产品弹出层.

动态面板管理窗口，双击QuickStartButton面板下的State1(状态1)，打开快速查看按钮编辑页，选择“快速查看”按钮，在Onclick事件中添加用例，设置用例动作“显示面板”，并将显示面板配置到显示ProductPopup。

关闭按钮添加隐藏面板动作

下一步，在“详细产品弹出面板”添加关闭弹出面板按钮

动态面板管理窗口，双击ProductPopup面板下的State1(状态1)打开状态编辑页，添加占位符在右上角。调整尺寸为：40*40。提示：在工具栏可以编辑部件尺寸。

placeholder面板OnClick事件用例，用例设置“隐藏ProductPopup”动作。

添加产品大图

在这步中，添加当点击缩略图时，产品图片播放的动画视图。

编辑详细产品弹出面板，拖入图片部件到线框图，双击导入“Jeans1-1.png”。将图片放到左上角。

添加产品缩略图

拖入3个图片部件到图片的下方，导入Jeans1-1, Jeans1-2, 和Jeans1-3，做为缩略图。拖拽图片边框调整图片尺寸时，按住shift键，保存图片按比例缩放。

建立图片播放动画窗口

我们下面将使用到一个叫“开窗”的技术，即我们将一个动态面板放置到另一个动态面板内。利用外部面板的尺寸，控制只显示里面动态面板的一部分。

右键产品大图，快捷菜单选择“转换->转换为动态面板”，将产品大图转换为动态面板。在动态面板编辑器中，重命名面板名称为““SlideshowWindow”。注意：部件属性窗口的标签栏也自随着面板重命名自动修改了名称。

将多产品图片转换为动态面板

动态面板编辑器中，打开SlideshowWindow面板的State1(状态1)，在Jeans1-1图片的右边添加Jean1-2和Jeans1-3图片。

要使用这三张图片在窗口中动态的切换，我们将三张图片转换为动态面板。

全选三张图片（按住shift键点击每张图片，或者点击拖动鼠标圈选所有图片）右键，快捷菜单选择“转换->转换为动态面板”，将三张图片转换为动态面板。在动态面板管理窗口重新命名动态面板为“SlideshowContent”。

添加OnClick事件移动动态面板

下一步，添加交互让SlideshowContent面板从左边移动到右边。

返回ProductPopup面板，点击第一个缩略图添加OnClick事件用例。在用例编辑器中，选择"移动面板"动作，设置移动面板SlideshowContent到坐标：X0；Y0。注意：要设置为移动到（绝对定位），而不是移动在（相对定位）。然后设置动画“摆动”，时间500ms。

重复设置另外两个缩略图

在另外两个缩略图上重复设置Click事件。因为图片的宽度是240px,所以第二个缩略图的事件动作设置为“移动SlideshowContent到 -240x,0y”。第三个缩略图动作设置为“移动SlideshowContent到-480x, 0y”。

如果想查看交互效果，可以生成原型，图片播放动画己经可以显示了。

“加入购物车”

创建“加入购物车”按钮

拖入按钮形状部件到弹出面板的右下角。在工具栏将按钮颜色设置为蓝色，字体颜色设置为白色。按钮形状文本修改为“Add to Cart”。

创建购物信息弹出面板

下一步，创建点击“Add to Cart”按钮时显示的“处理中”和“己添加”提示信息。

拖一个矩形部件到弹出面板的中间。设置背景色为淡灰色；字体颜色为黑色。编辑矩形文本为“Processing...（处理中）”。

右键矩形部件，快捷菜单中选择“转换->转换为动态面板”。右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”

添加“Added to Cart”状态

命名动态面板为“MessagesPopup”，并设置状态1名称为“Processing（处理中）”。

右键“Processing”状态，快捷菜单选择“添加状态”，添加状态2，重新命名状态2为“AddedToCart”。

创建“added to cart”信息

打开 “Processing”状态，右键点击矩形，快捷菜单选择“复制”。下一步

打开“AddedToCart”状态，右键空线框图，快捷菜单选择“粘贴”。

编辑按钮属性 - 设置当确认选项己经被添加到购物车时，按钮填充色为绿色。双击编辑按钮文本为“Successfully added to Cart（己成功加入购物车）”。

设置加入购物车交互

下一步，设置交互：点击“add to cart（加入购物车）”按钮，显示“Processing（处理中）”1秒钟，再显示“Added to Cart（己成功加入购物车）”1秒钟，然后隐藏弹出面板。

返回ProductPopup面板，选中““Add to Cart（加入购物车）”按钮。双击OnClick事件添加用例，打开用例编辑器。在这个用例中要添加5个动作。

添加显示/隐藏购物信息弹出面板动作

1.设置“MessagesPopup”面板到 ”Processing”状态。在右下角，在进行动画的下拉选单选择“淡入淡出”。注意：“设置面板到指定状态”动作将自动显示面板,所以不需要再添加“显示面板”动作。

2.等待1000毫秒，这个动作设置第一个面板在第二个运作发生前，持续显示1秒。1000毫秒=1秒。

切换购物信息弹出面板状态

3.设置面板状态到“AddedtoCart”。设置“MessagesPopup”面板从“Processing”状态切换到“AddedtoCart”状态。勾选“MessagesPopup”复选框，在复选框下方的“选择状态”下拉选单中，选择“AddedtoCart”状态。

4.再次等待1000毫秒。

添加隐藏购物信息弹出面板动作

5.隐藏面板。勾选MessagesPopup复选框，动画选择“淡入淡出”。

点击“确定”。生成原型并测试，新手电子商务网站制作教程部分介绍完毕。

- End -

高级电子商务网站设计

学习高级Axure特性，本教程学习创建可展示用户选购产品数量和计算总价的购物车。

本课程的学习基于前两级系列教程文档：初级电子商务网站设计、中级电子商务网站设计

部件使用：矩形、按钮形状、文本面板、动态面板、水平线

交互事件：OnPageLoad、Onclick

动作：“逻辑条件”、“设置变量/部件值”、“设置面板状态为指定状态”

在“加入购物车”信息面板插入数量

步骤1：命名信息面板部件

这一步，将设置AddedToCart状态中的文本，动态显示用户选择的数量下拉选单中的产品数量。

打开MessagesPopup动态面板的AddedToCart状态。点击状态中的矩型部件，在部件属性窗口命名部件为：AddedToCart。步骤2：添加“设置变量/部件值”动作

打开ProductPopup面板，点击“加入购物车”按钮。

双击用例1，添加加动作“设置变量/部件值”，点击“打开设置值编辑器”按钮。步骤3：使用局部变量储存值

设置条件表达值：部件文字AddedToCart等于值。然后点击“编辑文字”按钮。

在输入文字对话框，点击“添加局部变量”，设置局部变量表达式为：LVAR1=选中项于QuantityDroplist。步骤4：在“加入购物车”信息面板插入数量

下一步，将光标放在“Successfully”之前，在插入变量/函数下拉选单中选择“LVAR1”，在文本编辑框会插入“[[LVAR1]]”局部变量。

在“[[LVAR1]]”局部变量后输入 “个"，让整句为：[[LVAR1]]个己成功加入购物车。步骤5：列表中选择动作

点击确定，关闭输入文字对话框，返回用例编辑器。不要关闭用例编辑器对话框。

重要的下一步，移动前3步设置的动作，因为在MessagesPopup面板被隐藏之前产品数量就要被设置。步骤6：在动作顺序列表中上移动作

右键“设置变量/部件值”动作，选择“Move Action Up”。己可以直接拖动动作上移。

将动作移动到“设置MessagesPopup动态面板到AddedToCart状态”下，

生成原型，测试效果。

购物车&添加变量

步骤1：在页首添加购物车部件

在这一步中，在页首创建一个购物车，保存用户加入购物车的产品总数量

母板窗口打开Header母板，在母板右上角添加按钮形状。

设置按钮线条为白色，按钮文字加下划线，编辑按钮文字为“购物车”。设置悬停效果为：当鼠标悬停时取消下划线。步骤2：添加链接和购物车图标

在Page1中，添加购物车按钮的链接。然后，在站点地图窗口重命名Page1的名称为“Shopping Cart”。

现在添加购物车图标，拖入图片部件到线框图，双击图片部件导入“shoppingcart.png”文件。将图标放到购物车按钮的右边。步骤3：添加购物数量文本面板

下一步，添加记录用户己添加产品数量的文本面板。

拖入文本面板部件到购物车图标的旁边，编辑文本为“0”。在属性面板窗口命名部件为“CartQuantity”。步骤4：查看Home页面Header母板更新

双击“Home”页面查看修改。

因为添加了购物车按钮，Header母板移动了位置，按需要重新移动母板位置。步骤5：创建变量保存数量

这一步，添加变量保存产品总数量，在购物车中显示数量

打开ProductPopup面板的状态1，选择“加入购物车”按钮，双击用例1，打开用例编辑器，设置“设置变量/部件值”动作并打开“打开设置值编辑器”对话框。

在变量下拉选单，选择“新建...”，新建一个“TotalQuantityVar”变量。步骤6：添加局部变量

下一步，点击函数值（fx）按钮打开编辑文字对话框。

添加局部变量LVAR1，设置LVAR1等于选中项于QuantityDroplist。

然后，编辑文本编辑框中文字为“[[LVAR1 + TotalQuantityVar]]”，

表达的意思是，设置TotalQuantityVar变量等于TotalQuantityVar

变量加用户在下拉选单中选择的数量。步骤7：设置CartQuantity文本合计数量

现在，设置购物车边的文本面板显示产品总量

点击“设置值编辑器”的第一行表达式后的“+”号按钮，点击新增一行。设置第二行的条件表达式为：部件文字CartQuantity等于值。

然后点击编辑框，将原文本“0”修改为[[TotalQuantityVar]]。步骤8：生成原型

点击确定，关闭“编辑文字”、“设置值编辑器”、“用例编辑器”对话框。

生成原型，测试效果。

创建购物车页

步骤1：添加页首

这一步，设计购物车页面，显示购物车为空或当用户添加了产品到购物车时的产品总数和价格等信息。

在网站地图窗口，打开“Shopping Cart”页面，将Header母板拖入线框图中。步骤2：页面中添加本页标题

在header母板下添加矩形和水平线部件。编辑矩形部件文本“Shopping Cart”，设置线宽为粗。步骤3：创建购物车为空的信息

这一步，添加购物车为空的信息提示。

拖两个文本面板到本页标题的下面。设置第1个文本面板粗体，并编辑文本“购物车为空”。第2个文本面板，编辑文本“点击继续购物”，并在交互标签下添加链接到Home页面。步骤4：将提示信息转换为母板

选中两个文本面板并转换为母板（右键,转换->转换为动态面板）。调整动态面板宽度与Header母板一式，高度为300px。

命名动态面板为：ItemsPanel。命名面板状态1为：NoItems，添加状态2命名为：Items。步骤5：Items状态添加产品细节描述

现在添加产品信息及数量。

打开“ItemsPanel”的Items状态，拖图片部件到线框图，导入压缩文件包中的Jeans1-1.png文档，调整图片大小合适显示尺寸。添加3个文本面板。一个设置字体为粗体，编辑文字“AxGuy Jeans”。下面的文本面板设置文本为：In Stock，第三个放在页面中间，文本编辑为：Quantity:

命名“Quantity:”文本面板为“ItemQuantity”。步骤6：设置OnPageLoad事件显示正确的状态

现在，购物车里有两个状态，分别是：“Items”和“NoItems”。添加OnPageLoad（页面载入时）的交互，跟据购物车中的产品数量设置显示状态。

返回“Shopping Cart”页面，在页面交互标签中，双击OnPageLoad事件添加用例。步骤7：添加检查结果是0时的条件

下一步，添加用例条件为：变量值TotalQuantityVar等于“”。如果变量TotalQuantityVar值是为空，说明购物车中没有添加产品。

下一步，添加动作“设置ItemsPanel动态面板到NoItems状态”。步骤8：添加设置面板到Items状态动作

下一步，添加另一个用例，设置“ItemsPanel”面板到“Items”状态。

添加第2个OnPageLoad用例，这个用例不用添加用例条件，因为第2个用例默认会设置为“Else if True”。添加“设置面板状态为指定状态”动作，设置ItemsPanel到Items状态。步骤9：插入ItemQuantity和CartQuantity

当页面载入时，要初始化ItemQuantity和CartQuantity文本面板。

在页面交互窗口中，打开OnPageLoad事件的用例2，添加“设置变量/部件值”动作。设置第一个条件表达为：部件文字ItemsQuantity等于值。点击打开编辑文字对话框，在文本编辑框中，Quantity:后插入[[TotalQuantityVar]]变量。步骤10：插入TotalQuantityVar值