使用Axure来仿真Vogue网站

用户体验包括三部分：用户研究、视觉设计和交互设计。按顺序进行，在用户研究和视觉设计之后，开始交互设计，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。（见图十三、十四、十五）

图十三 左按钮加事件

图十四 右按钮加事件

图十五

效果图略

三、固定在右下方的导航，

“固定在下方的导航”只好这么称呼它，因为它也是菜单，但是不太全而且有返回顶部的功效：（见图十六）

图十六

制作方法不太难，事件要选好。

1拖入四个或五个rectangle组成一组并取名为01、02、03、04、05，再加下拉框和右侧弹出标示，取名01001、02001、03001、04001、05001。（见图十七）

图十七 五个rectangle叠在一起

2和菜单相同，要加两个case在onMouseEnter事件中，标示也需要加一个onMouseOut事件选择hide；01、02、03、04、05和其标示事件和下图（图十八、十九）

图十八 01加事件

图十九 01001加事件

四、反馈窗口，

反馈窗口是一个重要的功能，搜索，选择都需要它。如图二十

图二十

1在default 或bootstrat中选择forms，拖入一个Text
field 和Droplist。
（见图二十一）

图二十一 拉入元件

2取名输入“输入xxxxx”并变为灰色。（见图二十二）

图二十二 改变字体颜色

3加入事件onKeyUp，输入条件if text
on This equals " 输入要搜索的关键字"，选择set panel state。（见图二十三）

图二十三 添加set panel state