『壹』 產品筆記一:使用axure8.1製作手機app底部導航欄效果
使用工具:Axure pr 8.1版本。
製作效果如下圖:選中任意tab切換到對應界面,以及選中狀態的改變。
作為一名初學者,元件的組合選中以及拖動,動態面板的使用,中間還是有幾個細節需要注意的,筆者初學自己研究了好久,網路並沒有用,也許是關鍵詞不合適,總找不到合適的答案。好,廢話不多說,下面開始操作步驟。
1.1、創建導航欄母版,axure界面左側底部母版欄,點擊加號創建一個母版並命名。
1.2、雙擊母版,進入母版編輯頁面。在這里進行那些拖動等操作啦。
2.1、我們觀察到導航欄總共5個tab組成,每個tab里有兩個元素一張圖片,一個文本標簽。但是為了可以方便的設置寬高調整距離均分屏幕並且組合拖動設置點擊狀態等,我們將圖片和文本放到一個矩形框里。
2.2、拖動一個矩形到界面上,拖動一張圖片原件,一個文本標簽元件。如下圖,調整大小樣式等。
2.3、要想整體拖動這三個元件,那麼就要將這三個元件組合在一起。按住command鍵(我用的mac),選中矩形,圖片,文本標簽 右鍵-->點擊組合,即可將是哪個元件組合在一起。
2.4、點擊組合元件右鍵-->轉換為動態面板。雙擊它,會彈出下面的彈窗,輸入動態面板名稱。添加狀態:選中以及未選中兩個狀態。你可以先添加選中,然後雙擊選中狀態進入編輯選中狀態頁面,添加選中時的圖片,文字以及文字顏色等。然後回到動態面板點擊加號旁邊的復制可以復制選中的狀態,並命名為未選中,雙擊未選中去修改里邊的圖片以及文字顏色等即可。這樣間距之類的就不用去重復設置了。
2.5、其他四個tab只要復制第一個創建編輯好的動態面板去修改里邊的狀態的圖片和文字就好了,就不用重復創建了。
2.6、拖動到底部導航欄矩形內部調整好間距均分屏幕。
3.1、給每個tab點擊時要進入對應的頁面,那麼我們在下圖中添加5個對應的頁面。
3.2、選中第一個tab,在左側首頁屬性,點擊滑鼠單擊時。如下圖:
點擊鏈接,打開鏈接,當前窗口,點擊首頁,確定。
3.4、至此底部導航欄母版製作完畢。然後最後一步,將母版應用在各個頁面上。點擊右側底部導航欄,右鍵-->選擇將母版添加到頁面中。選擇全部全部頁面即可。
點擊首頁Tab,選中首頁時,其他tab的狀態需要變成未選中。這個是如何改變呢?通過頁面載入時,設置各個tab的狀態
4.1、比如點擊找車頁面,右側屬性,點擊頁面載入時。如下圖:
4.2、雙擊頁面載入時,彈窗,選擇設置面板狀態,找車選擇選中狀態,其他選擇未選中狀態。其他tab相同設置。如下圖:
至此,所有步驟完成。
發布預覽一下就可以了。