起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識原型設計：APP下導航如何通過Axure畫出來
下導航是APP原型設計中常見的功能，如何快速高效的通過Axure畫出來呢？
網上有不少文章講過如何畫下導航，要么方法特別復雜，要么步驟并不全面。典型的錯誤有兩個，①使用多個動態面板來嵌套實現下導航。②使用動態面板來區分選中和未選中。
但是學會本文你可以100%模擬出微信、支付寶，淘寶，天貓app的下導航原型效果，點擊預覽效果。
接下來我會以微信APP為例，詳細講解每一步驟，學會之后可根據自身項目要求酌情刪減。
畫出每個導航按鈕
每個導航按鈕都是由方框，名稱，圖標3個元素組成。
方框，使用矩形元件。寬度=375/4=94px。高度建議50px左右。
名稱，使用文本元件。輸入文字代表導航名稱。
圖標，則用圖片元件?？s放到合適的大小。
處理一下三者的布局，最終得到導航按鈕。
（Axure功能理解比較深的童鞋，可以將前兩者合并成一個矩形實現，新手不建議這樣使用。）
設置導航按鈕樣式
以第一個導航按鈕為例，設置它每一個元素的交互樣式-選中。選中代表的是元素的另外一個狀態。
方框，改變矩形的背景色。
名稱，改變文字的顏色。
圖標，使用另外一個圖片來替換。
以此類推，把其他三個導航按鈕也做一下樣式。(矩形、文本元件可以使用格式刷快速復制交互樣式，圖片元件不行。)
設置導航按鈕鏈接
將每個導航按鈕的三個元素選擇，并生成組合。
然后給組合添加鏈接，跳轉到對應的頁面“微信、通訊錄、發現、我”。
為什么要這樣做？點擊導航按鈕的區域內，都可以跳轉。所以使用組合來表示這個區域內都是可交互熱區范圍。
我們已經畫出了微信下導航的線框圖效果，接下來講解如何做出相似的交互效果。
生成固定位置母版
下導航是存在于所有的導航頁。所以需要把下導航原型放到不同的頁面。
選中這些元件，右鍵生成母版。
考慮到下導航在每個頁面中的位置是一樣的，所以將母版設為固定位置。
添加母版到導航頁
打開微信頁面，將左下方的母版拖進去。
以此類推即可…
設置導航頁的效果
當位于微信頁面的時候，導航按鈕微信是不可點擊，但是樣式是點擊后的樣式效果。
所以需要設置當載入微信頁面的時候，選中該按鈕組合，并且禁用該按鈕的交互。
以此類推…
需要注意的是，同時只有一個導航按鈕處于選中狀態，所以需要把所有的導航按鈕選中并新建成單選組。
固定導航相對于屏幕的位置
如果你希望下導航原型和微信下導航一樣，固定在頁面的底部。
那么把這些導航按鈕選中并生成動態面板，然后右鍵固定到頁面指定位置即可。
至此我們做出了和微信APP完全一樣的下導航原型和交互效果，點擊預覽。
小結
本文是以微信APP為例，講解常用的功能該如何畫原型。鑒于視頻教程不是特別容易理解，所以寫成詳細的文章分享給大家。
本文用到的微信圖標和字體顏色等素材，提供下載https://www.jianguoyun.com/p/DYKpyqkQu4zdBRjPwzQ
相關閱讀
#專欄作家#
浪子，業務型PM，浪子PRD系列51prd.com，公眾號langzisay。
本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
網上一堆組件。直接套用就好了啊
求網上組件資源
我成功了 哈哈
大神，按照你說的步驟做的，三個元素設置了選中樣式，再組合，添加組合的跳轉頁面，但是點擊之后沒有任何變化，是哪里做錯了嗎
需要對組合設置交互事件“鼠標單擊時”，切換這3個元素的選中狀態。即可。
道理我都懂，但你給出的預覽效果頁，底部廣告剛好將底部導航欄擋住，這體驗就很扎心了啊
文字不跟著一起變成選中狀態是什么原因呀
沒有設置組合，或者設置交互事件”鼠標單擊時”的切換元素選中狀態的時候，沒有勾選組合。
我想問一下圖片怎么變顏色！
圖片沒有變顏色，選中狀態的圖片是另外一張。
說用4個面板切換比這種方法方便的人，可以說根本就沒有理解這種方法的方便之處。舉個例子，如果你要把其中的一個圖標換掉，你是不是要換四個面板中的圖標？而這種方法，只需要換一個圖標。
是的，這是母版的特性。
很多人都根本沒看懂這篇文章。雖然其中的方法并不難，但是組合到一起運用，就不是一般PM能夠會的了。
你的理解能力很贊。
大神可否詳解下這種和用動態面板實現的有何區別，小白有點沒吃透，謝謝啦
下導航用動態面板做，最多的優勢是可以做左滑右滑的優勢。
根本就做不到和真正APP的下導航交互效果。
并不能做到的哦。
另外和用什么原型軟件沒有關系。
通過改變元素選中狀態的樣式，實現選中效果，要設置的事件用例太多了吧
僅需設置一個，然后批量格式刷。這才是效率。
請問格式刷怎么用？
額，做好一個元件的樣式，然后點擊格式刷。然后點擊其他三個元件即可。
從不用muban ??
這個有這么復雜么？有更簡單的方法吧，比如動態面板，比如做4個頁面，點擊哪個顯示哪個，隱藏其他就ok了呀
麻煩先看清楚這種方法的原理，再對比動態面板來評價文章哈。
實現的方式比較多，你這種方式不建議
仁者見仁智者見智，文章不是對所有人都有用，所以如果覺得對您沒有幫助就不要多加消極性評論
何來消極評論，莫以小人之心。。。謝謝！
建議看懂這篇文章能夠實現什么樣的下導航，再來評價有幾種實現方式。
不裝逼會死？
覺得文章沒用，可以不看。
人身攻擊，挺沒意思的。而且還是個女孩子。
再說了，連文章都沒看懂就評價，只會顯得水平low。
1.我開始評論的只是不建議這么做，個人覺得沒必要浪費時間在這個上面。
2.我的評論從沒有消極和人生攻擊，仁者見人智者見智，你看到的和你理解的，只是你的心態是視野所能理解的東西。
3.LOW的是誰，我就不知道了。lower總是從最開始就認為人家的態度是消極的，還用仁者見仁智者見智（PS：你懂什么意思嗎？）
做人不要太尖酸刻薄