01

按鈕形狀的懸停樣式

步驟1：編輯按鈕形狀->編輯懸停樣式

這一步中，將在Header母板中，設(shè)置導(dǎo)航按鈕的懸停效果

母板窗口中雙擊Header母板，打開母板編輯頁。選擇第一個按鈕命名為“Men’s”。右鍵快捷菜單選擇“編輯按鈕形狀->編輯懸停樣式”。修改字體顏色并修改線條顏色為藍(lán)色。

步驟2：使用格式刷復(fù)制樣式

導(dǎo)航按鈕的懸停效果我們要應(yīng)用到所有導(dǎo)航按鈕上，我們可以使用格式刷把樣式復(fù)制到其它按鈕上。

點擊工具欄中的格式刷圖標(biāo)，選擇“Men’s”按鈕，然后點擊“復(fù)制”復(fù)制“Men’s”按鈕樣式。


步驟3：應(yīng)用復(fù)制樣式到“Women's”按鈕

下一步，選擇“Women’s”和“Sale”按鈕，在格式刷中點擊應(yīng)用。

在按鈕的左上角會顯示黑白方格，當(dāng)鼠標(biāo)經(jīng)過方格時，可以瀏覽懸停效果。

02

彈出式側(cè)邊導(dǎo)航

步驟1：添加和編輯菜單（縱向）部件

菜單（縱向）部件是快速創(chuàng)建經(jīng)典的彈出式菜單的快捷方式。

拖入菜單（縱向）部件到Header母板，右鍵點擊菜單項，快捷菜單中選擇“在之后添加菜單項”，添加兩個菜單項。編輯菜單項文本為：AxAp Picks, New Items, Hot Sellers, Vintage, Boutique。

步驟2：添加子菜單項

下一步，給“Hot Sellers”添加彈出式子菜單項，右鍵點擊“Hot Sellers”，快捷菜單選擇“添加子菜單”，創(chuàng)建3個子菜單，分別編輯文本為“Fall, Summer, Spring”。

返回Home頁面，由于Header母板樣式的修改，頁首的Header位置己經(jīng)移動了，點擊將它拖回原來的位置。

03

數(shù)量下拉選單/錯誤信息

步驟1：彈出面板添加下拉選單部件

這一步，在ProductPopup彈出面板添加“數(shù)量”下拉選單。定義邏輯條件,要求用戶在添加到購物車之前選擇一個數(shù)量。

打開ProductPopup彈出面板的狀態(tài)1，在“加入購物車”按鈕上面拖入下拉選單部件，在部件屬性窗口修改部件名稱為：QuantityDroplist。


步驟2：編輯下拉選單項

雙擊下拉選單編輯下拉選單項。

點擊綠色加號按鈕添加4個菜單項：Quantity, 1, 2, 3。選中Quantity項設(shè)置為默認(rèn)選項。


步驟3：添加錯誤信息面板的狀態(tài)

下一步，創(chuàng)建用戶沒有選擇數(shù)量時，顯示的錯誤信息面板。

MessagePopup動態(tài)面板添加一個狀態(tài)，命名為：Error

在Error狀態(tài)頁，添加矩形部件，填充色設(shè)置為紅色。編輯部件文字為“Please select a Quantity”。

步驟4：設(shè)置檢查數(shù)量條件

現(xiàn)在，“加入購物車”按鈕添加邏輯條件：如果用戶選擇了數(shù)量，顯示“處理中（Processing）”和“己成功加入購物車（Added to Cart）”狀態(tài)，否則，顯示錯誤狀態(tài)。

選擇ProductPopup面板的“加入購物車”按鈕，打開第一個用例并點擊“添加條件”。

設(shè)置條件表達(dá)為：如果選中項于QuantityDroplist不等于值Quantity。點擊確定返回用例編輯器。

步驟5：“加入購物車”按鈕添加第2個用例

當(dāng)?shù)?個用例中的條件表達(dá)式不為真時，添加第2個用例顯示錯誤信息。

右鍵“OnClick”，選擇“添加用例”。新添加的用例會自動加“Else If”到用例條件。


步驟6：添加顯示再隱藏面板動作

用例2添加下列動作：

1.設(shè)置動態(tài)面板“MessagesPopup”到“Error”狀態(tài)，500毫秒淡入淡出動畫。

2.等待時間（毫秒）

3.隱藏“MessagesPopup”面板，500毫秒淡入淡出動畫。

如果要測試交互效果，可以生成原型。

04

可滾動的產(chǎn)品介紹

步驟1：復(fù)制Lorem Ipsum文本

這一步中，在產(chǎn)品詳細(xì)介紹的產(chǎn)品介紹面板添加文本面板。文本的長度長于面板可見區(qū)域，所以要把產(chǎn)品介紹文本做成滾動的。

首先，截取一段Lorem Ipsum文本，可以到http://www.lipsum.com/地址截取，在本案例中，復(fù)制兩段文本內(nèi)容。

步驟2：產(chǎn)品描述中粘貼文本

ProductPopup面板中，拖入一個文本面板在產(chǎn)品圖片的右邊。

將Lorem Ipsum文本內(nèi)容粘貼到文本面板中，調(diào)整文本面板的寬度以適合顯示寬度。


步驟3：轉(zhuǎn)換文本為動態(tài)面板

右鍵文本面板，快捷菜單選擇“轉(zhuǎn)換->轉(zhuǎn)換為動態(tài)面板”，將文本面板轉(zhuǎn)換為動態(tài)面板。

在動態(tài)面板管理窗口，命名動態(tài)面板為“DescriptionText”。


步驟4：調(diào)整動態(tài)面板尺寸并設(shè)置為可滾動

拖動動態(tài)面板底部邊線，調(diào)整動態(tài)面板長度以適合顯示長度。

右鍵點擊動態(tài)面板，快捷菜單選擇“編輯動態(tài)面板->按需顯示垂直滾動條”，添加文本滾動條。

為防止“DescriptionText”面板覆蓋“MessagePopup”面板，所以右鍵“MessagePopup”面板，快捷菜單選擇“順序->置于頂層”。

05

使用自定義部件庫

步驟1：載入部件庫

下載VIM制作的Socal Media圖標(biāo)部件庫，在原型中使用下載的部件。

在部件窗口，選擇“線框圖->載入部件庫”。從壓縮文件包中導(dǎo)入部件庫文件夾 “social_media_icons_vim_interactive.rplib”

步驟2：添加Socal Media圖標(biāo)

向下拖滾動條，找到Facebook(32)部件，拖到“加入購物車”按鈕的左邊。繼續(xù)向下拖滾動條，找到Twitter(32)部件。拖到Facebook(32)部件的左邊。

完成設(shè)計，生成原型查看效果。

?