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

本教程将一步步指导您构建电子商务网站。在创建过程中，您将使用 Axure 的几个核心功能：例如主板和动态面板。我们将从头开始整个创建过程。

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

交互事件：

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

01

创建页眉母版

创建新主板

第一步是创建带有徽标和导航的页眉。此页眉将在多个页面中使用，因此将使用主模板来创建页眉。

在母版窗口中，点击“添加母版”按钮。点击新创建的母版的名称，将名称更改为“”。

双击母版打开编辑窗口。在线框窗口的顶部选项卡中，您可以查看正在编辑的页面和母版。

如果标签显示正在编辑的页面为“”，则表示主板已经打开。

添加徽标图像

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

导入时会提示是否自动调整对象大小，如需自动调整，选择“确定”，图片会以原始大小导入，不会按照元件大小导入。

添加导航按钮

接下来，在 Logo 下方添加三个按钮形状的小部件。

将小部件下拉栏向下拖动，找到按钮形小部件（不是按钮小部件）。将三个按钮形小部件拖到线框中。双击每个按钮小部件以修改小部件文本，并将小部件标签更改为：男士、女士和促销。

选择所有三种按钮形状，并使用工具栏中的“线条颜色”将按钮边框设置为白色（单击鼠标并在按钮上拖动一个选择区域以选择所有三个按钮）。

添加水平线

添加水平线以将页眉与下面的内容分开。

将“水平线”元件拖拽至线框中，拖动水平线左右两端的尺寸修改手柄，可以调整水平线的长度。通过工具栏中的“线条样式”和“线条颜色”编辑样式为虚线，颜色为蓝色。

向主页添加页眉

将页眉母版从母版窗口拖到主页。将其定位在 X:200;Y50

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

02

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

添加产品缩略图

在主页上，拖入一个图像组件并将其放置在页眉母版下方。

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

按住 Shift 键并拖动图像的一个角，将图像比例调整为宽度 150、高度 225。

添加快速查看按钮

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

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

编辑名称并隐藏快速查看按钮

在动态面板管理窗口中，将动态面板的名称更改为： 。更改名称可以使面板在设置交互时更容易识别。

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

动态显示按钮

使用“鼠标移入”事件设置“快速查看”按钮在鼠标经过产品图像时出现。

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

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

在左侧栏中选择“显示面板”。然后选中右侧栏中的复选框以配置要显示的面板，然后单击“确定”。

在主菜单栏中选择“->”，生成原型，将鼠标移到产品图片上，会出现“Quick View”按钮，但该按钮一旦显示，就无法隐藏。

提示：当鼠标移出图像地图区域时

如果使用事件来隐藏快速查看按钮，那么交互就会不正确，因为当鼠标经过快速查看按钮时，会触发事件，快速查看按钮就会被隐藏。

您可以在产品图片的四边围上图片地图，然后使用图片地图上的“鼠标移入”事件来隐藏“快速查看”按钮。

图片地图区域是一个透明区域，您可以在其中设置交互和注释。

创建图像“热点”

将图片热点拖到产品图片上。图片热点的四边应比产品图片的四边长 10px。

右键快捷菜单选择“订单->置于后端”，将图片热点放置到商品图片和动态面板的下方。

使用图像热点隐藏动态面板

选中图像热点厦门网络推广，双击组件属性窗口的交互选项卡中的“当鼠标移入时”事件。

在用例编辑器中，选择左栏中的“隐藏面板”动作，点击右栏中的复选框网络营销推广，并选择确定。

03

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

创建详细的产品弹出面板

给线框添加一个矩形组件，修改矩形的大小为600*450，并将矩形放置在线框页面的中间。

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

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

右键点击矩形，在快捷菜单中选择“转换->转换为动态面板”，将转换后的动态面板命名为“”。

在点击“快速查看”按钮之前，详细产品弹出面板必须处于隐藏状态，因此右键单击动态面板，在快捷菜单中选择“编辑动态面板->设置为隐藏”。

显示面板上添加了“快速查看”按钮

现在为快速查看按钮添加交互性，单击后将显示详细的产品弹出窗口。

在动态面板管理窗口，双击面板下的（状态1），打开快速查看按钮编辑页面，选择“快速查看”按钮，在事件中添加用例，设置用例动作“显示面板”，配置要显示的显示面板。

添加隐藏面板操作以关闭按钮

接下来，在“详细产品弹出面板”中添加关闭弹出面板按钮

在动态面板管理窗口，双击面板下方的（状态1），打开状态编辑页面，在右上角添加占位符，调整大小为：40*40。提示：可以在工具栏中编辑组件大小。

面板事件用例，该用例设置了“隐藏”动作。

添加产品图片

在此步骤中，您将添加一个动画视图，当单击缩略图时播放产品图像。

编辑商品详情弹窗面板，将图片组件拖入线框内，双击导入“-1.png”，将图片放置在左上角。

添加产品缩略图

拖拽三个图片控件到图片下方网络营销策划方案ppt，分别导入-1、-2、-3作为缩略图，按住shift键拖动图片边框可以调整图片大小，并按比例保存。

创建图像播放动画窗口

下面我们将使用一种称为“窗口化”的技术，即把一个动态面板放在另一个动态面板里面，利用外层面板的尺寸，控件只显示内层动态面板的一部分。

右键点击产品图片，在快捷菜单中选择“转换->转换为动态面板”，即可将产品图片转换为动态面板。在动态面板编辑器中网络广告推广，将面板名称重命名为“”。注意：组件属性窗口中的标签栏也会随着面板的重命名而自动重命名。

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

在动态面板编辑器中，打开面板（状态 1）并将 Jean1-2 和 -3 图像添加到 -1 图像的右侧。

为了使这三张图片能够在窗口中动态地切换，我们将这三张图片转换成动态面板。

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

添加事件移动动态面板

接下来，添加交互以将面板从左向右移动。

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

10

对另外两个缩略图重复此操作。

对另外两个缩略图重复单击事件设置。由于图像宽度为 240px，因此第二个缩略图的事件操作设置为“移动到 -240x，0y”。第三个缩略图的操作设置为“移动到 -480x，0y”。

如果想看交互效果，可以生成一个原型，就会显示图片播放动画。

04

“添加到购物车”

创建添加到购物车按钮

将按钮形状组件拖到弹出面板的右下角。在工具栏中，将按钮颜色设置为蓝色青岛网络推广公司，字体颜色设置为白色。将按钮形状文本更改为“添加到购物车”。

创建购物信息弹出面板

接下来，创建单击“添加到购物车”按钮时出现的“正在处理”和“已添加”工具提示。

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

右键单击矩形元件，在快捷菜单中选择“转换->转换为动态面板”。右键单击动态面板长沙网络推广公司，在快捷菜单中选择“编辑动态面板->设置为隐藏”。

添加了“已添加到购物车”状态

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

右键单击“ ”状态，在快捷菜单中选择“添加状态”，添加状态2，并将状态2重命名为“ ”。

创建“已添加到购物车”消息

打开“”状态，右键单击矩形，在快捷菜单中选择“复制”。

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

编辑按钮属性 - 确认商品已添加到购物车时，将按钮填充颜色设置为绿色。双击可将按钮文本编辑为“已添加到购物车”。

设置添加到购物车交互

接下来设置交互：点击“添加到购物车”按钮，显示“（处理中）”1秒，然后显示“已添加到购物车”1秒，然后隐藏弹出面板。

返回仪表板并选择“添加到购物车”按钮。双击事件以添加用例并打开用例编辑器。在这个用例中，我们将添加五个动作。

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

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

2. 等待 1000 毫秒。此操作将第一个面板设置为在第二个操作发生之前显示 1 秒。1000 毫秒 = 1 秒。

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

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

4.再次等待1000毫秒。

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

5. 隐藏面板。选中复选框并选择“淡入淡出”作为动画。

点击“确定”。生成原型并进行测试。至此，本教程就结束了，初学者如何创建电子商务网站。

文章原创于金源网络科技有限公司：http://haimianbeibei.com/