使用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

 

使用Axure來模擬Vogue網站