編輯導(dǎo)語：我們?cè)谌粘９ぷ骰蛘邐蕵分薪?jīng)常會(huì)用到產(chǎn)品后臺(tái)，產(chǎn)品后臺(tái)很多與功能相關(guān)的組件，并且不同產(chǎn)品的后臺(tái)功能也不一樣；本文作者分享了關(guān)于用Axure畫出Web后臺(tái)產(chǎn)品的頂部導(dǎo)航組件的方法，我們一起來看一下。

Web后臺(tái)產(chǎn)品的頂部導(dǎo)航組件用來展示產(chǎn)品名稱logo以及用戶名和登錄退出等關(guān)鍵信息，PM一定要了解并學(xué)會(huì)它的原型畫法。

當(dāng)我們畫Web后臺(tái)產(chǎn)品原型頁面的時(shí)候，首先要考慮的是畫出頁面的導(dǎo)航組件（頂部導(dǎo)航、菜單欄、面包屑），然后再畫出頁面的內(nèi)容區(qū)域；前者存在于大部分頁面并且是一樣的，后者每個(gè)頁面都不太一樣。

那我們?nèi)绾斡肁xure畫出類似下圖的常見頂部導(dǎo)航組件效果，以及如何在后續(xù)的畫原型中使用它呢？接下來請(qǐng)查看詳細(xì)的步驟，也可以直接預(yù)覽頂部導(dǎo)航的原型地址https://rgewvb.axshare.com

一、如何畫出頂部導(dǎo)航

1）先畫導(dǎo)航背景

從默認(rèn)元件庫(kù)拖動(dòng)“矩形1”到畫布位置(0,0)，修改尺寸為1200*80px。

2）畫產(chǎn)品圖標(biāo)

從默認(rèn)元件庫(kù)拖動(dòng)“圖片”到畫布合適位置，修改尺寸為40*40px。

3）再畫產(chǎn)品名稱

從默認(rèn)元件庫(kù)拖動(dòng)“三級(jí)標(biāo)題”到畫布合適位置，雙擊輸入產(chǎn)品名稱。

4）再畫用戶名

從默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到畫布合適位置，修改雙擊輸入用戶名。

5）再畫退出按鈕

從默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到畫布合適位置，雙擊輸入退出，修改字體顏色為#0000FF。

6）同時(shí)選擇產(chǎn)品圖標(biāo)和產(chǎn)品名稱，右鍵點(diǎn)擊“組合”，然后點(diǎn)擊該組合，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)條件“單擊時(shí)”，添加動(dòng)作“打開鏈接”，鏈接到“首頁”，點(diǎn)擊“確定”按鈕。

7）點(diǎn)擊“退出”，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)條件“單擊時(shí)”，添加動(dòng)作“打開鏈接”，鏈接到“登錄”，點(diǎn)擊“確定”按鈕。

8）如需頂部導(dǎo)航相對(duì)于屏幕位置不變，則同時(shí)選擇相應(yīng)的元件然后右鍵點(diǎn)擊“轉(zhuǎn)換為動(dòng)態(tài)面板”，然后在右側(cè)邊欄“樣式”中勾選“固定到瀏覽器窗口”，水平固定選擇“居中”，點(diǎn)擊“確定”按鈕。

9）點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

二、如何使用頂部導(dǎo)航

頂部導(dǎo)航作為大部分頁面都需要用到的通用組件，那么我們是不是在對(duì)應(yīng)頁面都需要畫一遍呢？答案是否定的，我們可以使用Axure的母版特性來實(shí)現(xiàn)只畫一次，批量應(yīng)用到所需頁面。

10）同時(shí)選擇頂部導(dǎo)航的所有元件，右鍵點(diǎn)擊“轉(zhuǎn)換為母版”，然后在彈窗“創(chuàng)建母版”中輸入名稱“頂部導(dǎo)航”，然后點(diǎn)擊“繼續(xù)”按鈕。

11）點(diǎn)擊左側(cè)“母版”進(jìn)入相應(yīng)視圖，右鍵“頂部導(dǎo)航”，點(diǎn)擊“添加到頁面中…”，然后通過全選和選中子項(xiàng)，結(jié)合不選和取消選中子項(xiàng)來把所有需要頂部導(dǎo)航的頁面快速選中，最后點(diǎn)擊“確定”按鈕。

三、總結(jié)

大家可以根據(jù)我這篇文章制作適合自己的頂部導(dǎo)航組件，然后添加到自己的Axure元件庫(kù)中，后續(xù)畫Web后臺(tái)產(chǎn)品原型的時(shí)候就可以快速調(diào)用。

#相關(guān)閱讀#

如何用Axure畫出Web后臺(tái)產(chǎn)品的面包屑組件

如何用Axure畫出Web后臺(tái)產(chǎn)品的菜單欄組件

如何用Axure畫出Web后臺(tái)產(chǎn)品的編輯詳情頁

如何用Axure畫出Web后臺(tái)產(chǎn)品的列表組件：高級(jí)交互

#專欄作家#

浪子，個(gè)人微信langzipm，公眾號(hào)：浪子講原型(langzisay)。專注于Axure原型設(shè)計(jì)和產(chǎn)品規(guī)范。

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

題圖來自Unsplash，基于CC0協(xié)議。