你的位置:首页 > 网页设计

[网页设计]使用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、双击面板取名为“动态面板”然后加入多个PanelStates 01、02、03、04……(有多少图片加多少)。(图八)

 

图八 添加panel states

3、双击01,点击PanelState Style里inport加入图片。02、03同样的方法。(见图九)

 

图九 面板加载图片

4、回到“动态面板”选择onPanelStateChange事件case1添加条件if stateof 动态广告 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 panelstate。若是想加左右按钮,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,拖入一个Textfield 和Droplist。(见图二十一)

 

图二十一 拉入元件

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

 

图二十二 改变字体颜色

 

 

3加入事件onKeyUp,输入条件if texton This equals " 输入要搜索的关键字",选择set panel state。(见图二十三)

 

图二十三 添加set panel state