微信導航菜單：動態(tài)面板的不同實現(xiàn)方式.doc

《微信導航菜單：動態(tài)面板的不同實現(xiàn)方式.doc》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在學術論文-天天文庫。

1、微信導航菜單：動態(tài)面板的不同實現(xiàn)方式　　動態(tài)面板是Axure里最重要的元件之一，一些稍微高級一點的原型，都離不開動態(tài)面板的應用，因此一定要掌握動態(tài)面板的用法。　　　　作為動態(tài)面板的使用場景案例，導航菜單、自動幻燈片和屬性頁是非常適合于用來理解動態(tài)面板的用法。我們以微信的導航菜單為例，看看如何使用不同的方式來應用動態(tài)面板，最終的交互效果是一致的?！　〉谝粋€例子不復雜，但常常被作為典型案例來講解?！　?nèi)容區(qū)域+導航菜單作為一個動態(tài)面板　　這是其中最簡單的實現(xiàn)方式，并且易于理解。　　一、界面布局　　簡單布

2、局一下微信的界面，包括標題欄，內(nèi)容區(qū)域和導航菜單?！　?、添加一個標題欄，大小448*48，黑底白字，文字大小為20，居左對齊，左邊距為10　　　　2、添加一個有邊框矩形，大小448*580，灰色背景，只保留上、下邊框，雙擊矩形框，設置文字內(nèi)容為“微信內(nèi)容”，將矩形框放在標題欄下方　　　　3、添加一個灰色無邊框矩形，大小112*60，文字顏色為深灰色，設置文字內(nèi)容“微信”，作為導航菜單的按鈕，放在內(nèi)容區(qū)域的下方　　　　4、設置“微信”按鈕的交互樣式，選中按鈕，右鍵選擇“交互樣式”，設置選中狀態(tài)的文字

3、顏色為綠色（#46C01B）　　　　5、按ctrl鍵+“微信”按鈕拖動，復制三個相同矩形框，作為微信導航菜單的其它按鈕，修改文字分別為“通訊錄”、“發(fā)現(xiàn)”和“我”　　　　二、動態(tài)面板處理　　界面基本元件已經(jīng)添加完成，選中“微信內(nèi)容”矩形框和下方的四個導航按鈕，右鍵轉換為動態(tài)面板，命名為nav，將State1命名為“微信”：　　　　微信的導航菜單分為四部分內(nèi)容，因此我們可以將動態(tài)面板的”微信”再復制3份，以通訊錄為例，在狀態(tài)“微信”上右鍵，選擇“復制狀態(tài)”：　　　　修改復制出來的動態(tài)名稱為“通訊錄”：

4、　　　　雙擊通訊錄，打開動態(tài)面板，修改里面內(nèi)部部分的矩形框文字為“通訊錄列表”（這樣在切換導航菜單時可以看到確實切換到不同的狀態(tài)了）：　　　　同理，復制為“發(fā)現(xiàn)”和“我”兩個狀態(tài)，并修改其中的文字內(nèi)容，完成后，動態(tài)面板有四個狀態(tài)：　　　　微信在默認情況下，顯示的是導航菜單“微信”處于選中狀態(tài)，目前動態(tài)面板中狀態(tài)為“微信”是顯示在最上面，我們雙擊狀態(tài)“微信”打開，選擇“微信”按鈕，右鍵選擇“選中”：　　　　同理：　　雙擊打開狀態(tài)“通訊錄”，右鍵設置“通訊錄”按鈕為選中?！　‰p擊打開狀態(tài)“發(fā)現(xiàn)”，右鍵設

5、置“發(fā)現(xiàn)”按鈕為選中?！　‰p擊打開狀態(tài)“我”，右鍵設置“我”按鈕為選中。　　這樣，在切換到相關狀態(tài)時，當前狀態(tài)對應的按鈕即為選中狀態(tài)?！　∪討B(tài)面板事件處理　　這里有兩個地方需要添加事件處理：　　1、左右滑動內(nèi)容區(qū)域時切換動態(tài)面板狀態(tài)　　選擇前面的動態(tài)面板，雙擊添加“向左拖動結束時”事件：　　　　選擇動態(tài)面板　　添加“向左拖動結束時”事件　　設置面板狀態(tài)，選擇當前動態(tài)面板　　在向左滑動結束時，我們將動態(tài)面板設置為下一個狀態(tài)，即為“Next”　　設置動畫和退出動畫為“逐漸”，也就是淡入淡出效果　　同

6、更，添加“向右拖動結束時”事件，只是上面的第4步中的選擇狀態(tài)為“Previous”，其它設置相同?！　?、點擊導航菜單按鈕切換動態(tài)面板狀態(tài)　　擊導航菜單按鈕時的狀態(tài)切換，和上面的左右滑動的效果是一樣的?！　∥覀兿忍砑訝顟B(tài)“微信”中的四個按鈕?！　‰p擊打開第一個狀態(tài)——“微信”，選擇按鈕“微信”，添加單擊事件：　　　　選擇“微信”按鈕　　添加鼠標單擊事件　　設置面板狀態(tài)　　選擇動態(tài)面板nav　　設置狀態(tài)為“微信”，進入退出動畫為逐漸　　添加其它三個按鈕事件，步驟相同，選擇對應按鈕時顯示對應的狀態(tài)?！　?/p>

7、現(xiàn)在可以按下F5鍵預覽一下效果了：　　左右拖動內(nèi)容區(qū)域查看　　單擊導航菜單按鈕查看　　僅內(nèi)容區(qū)域作為一個動態(tài)面板　　導航菜單的實現(xiàn)方式有多種，下面我們使用另外一種方式，只將內(nèi)容區(qū)域作為動態(tài)面板，而將導航菜單按鈕獨立出來，不再放在動態(tài)面板中。　　一、界面布局　　界面布局部分和上面的方式完全一致，此處不再贅述，直接進入動態(tài)面板處理　　二、動態(tài)面板處理　　選擇內(nèi)容區(qū)域的矩形框，右鍵轉換為動態(tài)面板，命名為content，復制該狀態(tài)3個，修改狀態(tài)名稱分別為通訊錄、發(fā)現(xiàn)和我，并修改里面矩形框的文字內(nèi)容以便于識別

8、：　　　　將下方的四個按鈕分別命名為bWeixin,bTongxunlu,bFaxian,bWo，選擇按鈕“微信”，右鍵設置為選中狀態(tài)：　　　　三、事件處理　　同樣包括動態(tài)面板content的左右拖動處理，以及導航菜單按鈕的單擊事件。　　1、左右滑動內(nèi)容區(qū)域時切換動態(tài)面板狀態(tài)　　事件和第一種的方法一樣，只是需要再補充一下事件內(nèi)容，因為之前是整體切換動態(tài)面板的，而按鈕是在動態(tài)面板里的，但這次因為按鈕是獨立開來的，需要增加對按鈕的設置。　　左右滑動的事件里，只是設置了顯示