下導(dǎo)航是APP原型設(shè)計(jì)中常見(jiàn)的功能，如何快速高效的通過(guò)Axure畫出來(lái)呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

名稱，改變文字的顏色。

圖標(biāo)，使用另外一個(gè)圖片來(lái)替換。

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

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

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

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

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

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

生成固定位置母版

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

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

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

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

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

以此類推即可…

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

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

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

以此類推…

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

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

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

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

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

小結(jié)

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

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

相關(guān)閱讀

原型設(shè)計(jì)的道、術(shù)、器

Axure原型設(shè)計(jì)：Axure原型加流程圖功能的高效結(jié)合

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議