从零开始学习创建电子商务网站本教程

无需加好友免费技术支持

从零开始学习创建电子商务网站

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

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

交互事件：Onclick

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

01

创建页面母板

1

创建新母板

第一步，创建一个LOGO导航页面。这个页面将用于多个页面，因此将使用母板制作页面。

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

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

如果标签页面显示，正在编辑的页面是Header”,那么Header母板已经打开了。

2

添加Logo图片

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

如果需要自动调整，则选择确定导入提示是否自动调整对象大小。图片将保持原始大小导入，而不是根据部件大小导入。

3

添加导航按钮

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

向下拖动部件窗口，找出按钮形状部件（不是按钮部件）。将三个按钮形状部件拖到线框图中。单击每个按钮部件修改部件文本，修改部件标签：Men’s, Women’s, 和Sale.

选择3个按钮形状，使用工具栏中的线色将按钮边缘设置为白色（点击鼠标并将选择区域拖出按钮，选择3个按钮）。

4

添加水平线

添加一条水平线，将页面与以下内容分开。

拖动"水平线"在线框图中，拖动水平线左右两端修改尺寸的控制手柄，调整水平线长度。工具栏中的线条风格和线条颜色编辑风格为点虚线和蓝色。

5

在Home页面添加页首

从母板窗到主母板Home页面定位X:200;Y50

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

02

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

1

添加产品缩略图

Home将图片部分拖入页面，并将图片部分交给页面主板下方。

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

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

2

添加快速查看按钮

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

快速鼠标通过图片时，才会显示快速查看按钮。因此，只有将图片转换为动态面板，才能动态显示或隐藏按钮。右键按钮形状，快速菜单选择转换到动态面板，将图片放入动态面板中。

3

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

在动态面板管理窗口修改动态面板名称：QuickViewButton。修改名称可以使面板在设置交互时更容易识别。

右键动态面板，快捷菜单选择编辑动态面板->设置为隐藏

4

动态显示按钮

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

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

5

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

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

主菜单栏选择生成->原型生成原型。移动鼠标通过产品图片显示快速查看按钮，但一旦显示按钮，就无法隐藏。

提示:鼠标移出时与图像映射区域

使用鼠标移出时，事件隐藏快速查看按钮，交互会出错。因为当鼠标通过快速查看按钮时，事件就会启动，快速查看按钮就会隐藏。

快速查看按钮可以在产品图片的四面环绕图像映射区域，然后在图像映射区域使用鼠标移入事件。

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

6

创建图片热区

将产品图片拖入图片热区，图片热区的四个边比产品图片的四个边多10个px。

右键快捷菜单，选择顺序->放在底部，将图片热区放在产品图片和动态面板下。

7

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

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

03

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

1

创造详细产品弹出面板

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

2

将其转换为动态面板，并将其设置为隐藏的

点击快速查看按钮时，应动态显示详细产品弹出面板，因此将详细产品弹出面板转换为动态面板。

右键矩形，快捷菜单选择转换->转换为动态面板ProductPopup”。

点击快速查看按钮前，应隐藏详细产品弹出面板，因此右键动态面板和快速菜单选择编辑动态面板->隐藏。

3

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

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

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

4

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

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

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

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

5

添加产品大图

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

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

6

添加产品缩略图

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

7

建立图片播放动画窗口

我们将使用一种叫做打开窗户的技术，即我们将一个动态面板放置在另一个动态面板中。使用外部面板的尺寸来控制内部动态面板的一部分。

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

8

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

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

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

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

9

添加OnClick事件移动动态面板

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

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

10

重复设置另外两个缩略图

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

若要查看交互效果，可生成原型，图片播放动画本身可显示。

04

加入购物车

1

创建加入购物车按钮

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

2

创建购物信息弹出面板

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

将矩形部件拖到弹出面板的中间。背景颜色为浅灰色；字体颜色为黑色。编辑矩形文本为Processing...(处理)。

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

3

添加“Added to Cart”状态

命名动态面板MessagesPopup并设置状态1名称为Processing(处理)。

右键“Processing状态，快速菜单选择添加状态AddedToCart”。

4

创建“added to cart”信息

打开 “Processing状态，右键单击矩形，快速菜单选择复制。

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

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

5

购物车交互设置

下一步，设置交互：单击add to cart按钮显示(添加购物车)Processing(处理)1秒钟，然后显示Added to Cart(成功加入购物车)1秒钟，然后隐藏弹出面板。

返回ProductPopup选择面板Add to Cart按钮。OnClick添加事件用例，打开用例编辑器。在此用例中添加5个动作。

6

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

1.设置“MessagesPopup”面板到 ”Processing状态。在右下角，在动画的下拉选择中选择淡入淡出。注：将面板设置到指定状态的动作将自动显示面板，因此无需添加显示面板动作。

2.等待1000毫秒，在第二次操作之前，将第一个面板设置为连续显示1秒。1000毫秒=1秒。

7

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

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

4.再等1000毫秒。

8

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

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

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