建站
咨詢
售后
建站咨詢
新聞中心
下導(dǎo)航是APP原型設(shè)計(jì)中常見的功能，如何快速高效的通過Axure畫出來呢？
成都創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷策劃、重慶小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十載以來，已經(jīng)為近1000家木屋各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的近1000家客戶與我們一路同行，見證我們的成長(zhǎng)；未來，我們一起分享成功的喜悅。
網(wǎng)上有不少文章講過如何畫下導(dǎo)航，要么方法特別復(fù)雜，要么步驟并不全面。典型的錯(cuò)誤有兩個(gè)，①使用多個(gè)動(dòng)態(tài)面板來嵌套實(shí)現(xiàn)下導(dǎo)航。②使用動(dòng)態(tài)面板來區(qū)分選中和未選中。
但是學(xué)會(huì)本文你可以100%模擬出微信、支付寶，淘寶，天貓app的下導(dǎo)航原型效果，點(diǎn)擊 預(yù)覽效果 。
接下來我會(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)，則用圖片元件?？s放到合適的大小。
處理一下三者的布局，最終得到導(dǎo)航按鈕。
（Axure功能理解比較深的童鞋，可以將前兩者合并成一個(gè)矩形實(shí)現(xiàn)，新手不建議這樣使用。）
設(shè)置導(dǎo)航按鈕樣式
以第一個(gè)導(dǎo)航按鈕為例，設(shè)置它每一個(gè)元素的交互樣式-選中。選中代表的是元素的另外一個(gè)狀態(tài)。
方框，改變矩形的背景色。
名稱，改變文字的顏色。
圖標(biāo)，使用另外一個(gè)圖片來替換。
以此類推，把其他三個(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)。所以使用組合來表示這個(gè)區(qū)域內(nèi)都是可交互熱區(qū)范圍。
我們已經(jīng)畫出了微信下導(dǎo)航的線框圖效果，接下來講解如何做出相似的交互效果。
生成固定位置母版
下導(dǎo)航是存在于所有的導(dǎo)航頁(yè)。所以需要把下導(dǎo)航原型放到不同的頁(yè)面。
選中這些元件，右鍵生成母版。
考慮到下導(dǎo)航在每個(gè)頁(yè)面中的位置是一樣的，所以將母版設(shè)為固定位置。
添加母版到導(dǎo)航頁(yè)
打開微信頁(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
網(wǎng)頁(yè)題目：原型設(shè)計(jì)：APP下導(dǎo)航如何通過Axure畫出來
文章鏈接：http://www.dlmjj.cn/article/cdoojdo.html
