使用Axure来仿真Vogue网站

2022-10-28 09:18:13

用户体验包括三部分：用户研究、视觉设计和交互设计。按顺序进行，在用户研究和视觉设计之后，开始交互设计，Axure是最好的交互设计的软件。

Vogue是著名的奢侈品品牌，网站设计“高大上”，用Axure来仿真Vogue，能够充分挖掘Axure的潜能。

Vogure 网站首页具有四大功能：菜单，旋转木马，固定在右下方的导航和反馈窗口。下面简单介绍如何用Axure来实现这四个功能。

一、菜单，

vogure有两级菜单，第一级如图一，显示在第一行。

图一

第二级菜单如下图二所示，当鼠标移到“鞋包”上时二级菜单就会出现。

图二

首先，来学习如何制作。

1、拖入多个rectangle并将其排成一排和输入名称，“首页、潮流、时尚…”。再拖入输入框rectangle当作下拉框使用，叫“rectangle”。Rectangle内可填充颜色、改变边框颜色，改变透明度等。（图三）

图三改变颜色边框和添加阴影

2、在下拉框内输入文字覆盖“潮流”一点，再点击Send to Back，然后隐藏。（见图四）

图四潮流覆盖在rectangle上

3、在“潮流”中加入onMouseEnter 和onMouseOut事件；onMouseEnter 事件中的case1选择条件if visibility of rectangle equals false，然后show，case2选择条件if cursor is not over area of rectangle，再hide。OnMouseOut事件中添加和onMouseEnter中case2相同条件。（下图图五）

图五潮流选择事件和actions

4在“rectangle”中选择onMouseOut事件选择hide “rectangle” 。（图六）

图六 rectangle添加事件

结果图略

小提示，Axure中事件和条件的说明：

1、事件，有onMouseEnter, onMouseOut, onClick, onLoad等事件机制。这些事件可以帮助做到和真正网页相同的效果。OnMouseEnter, 当鼠标移动到添加onMouseEnter事件的地方，就会触发事件，在该事件中，添加操作，如弹出下拉窗口；onClick则是点击触发，添加onClick事件的地方点击就会发生事件，如跳转到另一窗口；onLoad，在窗体装载完成后运行，添加onLoad事件后，在组件显示之前事件发生。

2、条件，例如：if state of “动态面板”equals 01。还有14种类似“state of xxx”的条件的开头，还有equals可换成其他。

二、旋转木马，

所谓“旋转木马”就是图七所示：

图七

图片和字幕会定时转动，按左右箭头或底下的灰色小点图片和字幕也会转动或跳转。

看着精美，做起来当然也很麻烦。用Axure仿真要加不少事件，来看看怎么做：

1、拖入一个rectangle 将其转变为动态面板（点击右键选择Convert to Dynamic Panel）。

2、双击面板取名为“动态面板”然后加入多个Panel
States 01、02、03、04……（有多少图片加多少）。（图八）

图八添加panel states

3、双击01，点击Panel
State Style里inport加入图片。02、03同样的方法。（见图九）

图九面板加载图片

4、回到“动态面板”选择onPanelStateChange事件case1添加条件if state
of 动态广告 equals 02，再选择move，wait和set panel state；加case2添加条件if state of 动态广告 equals 03，再选择move，wait和set panel state；加case3或case4相同的actions和相似的条件。（见图十、十一、十二）

图十添加条件

图十一设置好全部条件1

图十二设置好全部条件2

5、加onLoad事件wait和set panel
state。若是想加左右按钮，1拖入image加入图片放入合适的位置在“动态面板”中加，加入事件onClick选择set panel state，左右同样方法。还有跟着图片的一起走的圆点，几张图加几个点，加一个不同颜色的点覆盖那几个点，再加onClick 事件（别忘记坐标；还有Move to和Move by是不同的，Move to表示移动到哪一个位置如：（543，644），Move by表示移动几个位置如：（40，0），表示x移动40，y不动。），所有点加类似的actions。（见图十三、十四、十五）