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

[[203157]]

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

但是學(xué)會本文你可以100%模擬出微信、支付寶，淘寶，天貓app的下導(dǎo)航原型效果，點(diǎn)擊 預(yù)覽效果 。

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

畫出每個導(dǎo)航按鈕

每個導(dǎo)航按鈕都是由方框，名稱，圖標(biāo)3個元素組成。

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

名稱，使用文本元件。輸入文字代表導(dǎo)航名稱。

圖標(biāo)，則用圖片元件。縮放到合適的大小。

處理一下三者的布局，最終得到導(dǎo)航按鈕。

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

設(shè)置導(dǎo)航按鈕樣式

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

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

名稱，改變文字的顏色。

圖標(biāo)，使用另外一個圖片來替換。

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

設(shè)置導(dǎo)航按鈕鏈接

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

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

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

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

生成固定位置母版

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

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

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

添加母版到導(dǎo)航頁

打開微信頁面，將左下方的母版拖進(jìn)去。

以此類推即可…

設(shè)置導(dǎo)航頁的效果

當(dāng)位于微信頁面的時候，導(dǎo)航按鈕微信是不可點(diǎn)擊，但是樣式是點(diǎn)擊后的樣式效果。

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

以此類推…

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

固定導(dǎo)航相對于屏幕的位置

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

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

至此我們做出了和微信APP完全一樣的下導(dǎo)航原型和交互效果， 點(diǎn)擊預(yù)覽。

小結(jié)

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

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