下導航是APP原型設計中常見的功能，如何快速高效的通過Axure畫出來呢？

[[203157]]

網(wǎng)上有不少文章講過如何畫下導航，要么方法特別復雜，要么步驟并不全面。典型的錯誤有兩個，①使用多個動態(tài)面板來嵌套實現(xiàn)下導航。②使用動態(tài)面板來區(qū)分選中和未選中。

但是學會本文你可以100%模擬出微信、支付寶，淘寶，天貓app的下導航原型效果，點擊 預覽效果 。

接下來我會以微信APP為例，詳細講解每一步驟，學會之后可根據(jù)自身項目要求酌情刪減。

畫出每個導航按鈕

每個導航按鈕都是由方框，名稱，圖標3個元素組成。

方框，使用矩形元件。寬度=375/4=94px。高度建議50px左右。

名稱，使用文本元件。輸入文字代表導航名稱。

圖標，則用圖片元件?？s放到合適的大小。

處理一下三者的布局，最終得到導航按鈕。

（Axure功能理解比較深的童鞋，可以將前兩者合并成一個矩形實現(xiàn)，新手不建議這樣使用。）

設置導航按鈕樣式

以第一個導航按鈕為例，設置它每一個元素的交互樣式-選中。選中代表的是元素的另外一個狀態(tài)。

方框，改變矩形的背景色。

名稱，改變文字的顏色。

圖標，使用另外一個圖片來替換。

以此類推，把其他三個導航按鈕也做一下樣式。(矩形、文本元件可以使用格式刷快速復制交互樣式，圖片元件不行。)

設置導航按鈕鏈接

將每個導航按鈕的三個元素選擇，并生成組合。

然后給組合添加鏈接，跳轉(zhuǎn)到對應的頁面“微信、通訊錄、發(fā)現(xiàn)、我”。

為什么要這樣做？點擊導航按鈕的區(qū)域內(nèi)，都可以跳轉(zhuǎn)。所以使用組合來表示這個區(qū)域內(nèi)都是可交互熱區(qū)范圍。

我們已經(jīng)畫出了微信下導航的線框圖效果，接下來講解如何做出相似的交互效果。

生成固定位置母版

下導航是存在于所有的導航頁。所以需要把下導航原型放到不同的頁面。

選中這些元件，右鍵生成母版。

考慮到下導航在每個頁面中的位置是一樣的，所以將母版設為固定位置。

添加母版到導航頁

打開微信頁面，將左下方的母版拖進去。

以此類推即可…

設置導航頁的效果

當位于微信頁面的時候，導航按鈕微信是不可點擊，但是樣式是點擊后的樣式效果。

所以需要設置當載入微信頁面的時候，選中該按鈕組合，并且禁用該按鈕的交互。

以此類推…

需要注意的是，同時只有一個導航按鈕處于選中狀態(tài)，所以需要把所有的導航按鈕選中并新建成單選組。

固定導航相對于屏幕的位置

如果你希望下導航原型和微信下導航一樣，固定在頁面的底部。

那么把這些導航按鈕選中并生成動態(tài)面板，然后右鍵固定到頁面指定位置即可。

至此我們做出了和微信APP完全一樣的下導航原型和交互效果， 點擊預覽。

小結(jié)

本文是以微信APP為例，講解常用的功能該如何畫原型。鑒于視頻教程不是特別容易理解，所以寫成詳細的文章分享給大家。

本文用到的微信圖標和字體顏色等素材，提供下載 https://www.jianguoyun.com/p/DYKpyqkQu4zdBRjPwzQ