中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：Web后臺的菜單欄通常用來展示產(chǎn)品的整體功能導(dǎo)航，是最常用的Web組件之一，PM一定要了解并學(xué)會它的原型畫法。本文仔細(xì)介紹了用Axure畫出Web后臺產(chǎn)品的菜單欄組件的步驟與注意要點(diǎn)，希望對你有所啟發(fā)。

我們先來看下Web菜單欄的原型交互效果，詳見下圖或者訪問原型https://kgnha1.axshare.com

由于菜單欄比較常用并且畫起來比較麻煩，建議產(chǎn)品經(jīng)理根據(jù)本文的原型步驟制作一份菜單欄rp源文件，方便后續(xù)多個(gè)項(xiàng)目使用。

仔細(xì)查看上圖原型，會發(fā)現(xiàn)包含以下這些交互用例，接下來作者會詳細(xì)講解每一步如何通過Axure RP 9畫出來。

1. 默認(rèn)展開左側(cè)菜單的二級頁面
2. 處于某一頁面的時(shí)候，對應(yīng)菜單項(xiàng)都會處于選中狀態(tài)并呈現(xiàn)不同的樣式。
3. 點(diǎn)擊一級分類即可收起對應(yīng)的二級頁面，再次點(diǎn)擊即可展開。
4. 默認(rèn)進(jìn)入首頁，同時(shí)首頁對應(yīng)的菜單處于選中狀態(tài)。此時(shí)所有菜單處于展開狀態(tài)。

菜單欄通常有2級結(jié)構(gòu)，第一級菜單是分類，第二級菜單是頁面。一般位于頁面左側(cè)，并且是每個(gè)頁面都有它。

01 畫出無交互原型

1、先畫首頁文字。從默認(rèn)元件庫中拖動(dòng)“矩形1”到工作區(qū)合適位置，修改尺寸為(160,40)，雙擊輸入文字表示首頁，字號修改為16px，左側(cè)對齊然后左側(cè)邊距修改為40px。

2、再畫首頁圖標(biāo)。從默認(rèn)元件庫中拖動(dòng)“圖片”到矩形中合適位置，尺寸修改為(20,20)，樣式點(diǎn)擊“調(diào)整顏色”圖標(biāo)，勾選調(diào)整顏色，飽和度拖動(dòng)到最左邊變成0。

3、再畫首頁文字的選中樣式。右鍵點(diǎn)擊交互樣式，切換到選中狀態(tài)，然后勾選字色然后輸入藍(lán)色#0000FF，點(diǎn)擊“確定”按鈕。

4、再畫首頁圖標(biāo)的選中樣式。右鍵點(diǎn)擊交互樣式，切換到選中狀態(tài)，然后勾選圖像濾波，點(diǎn)擊“確定”按鈕。

5、再畫一級分類。方法同上述4步。

6、再畫二級頁面。方法步驟同1和3，除了字號保持默認(rèn)。根據(jù)需要復(fù)制多份二級頁面。

7、復(fù)制多份一級分類和二級頁面。

8、在左側(cè)頁面區(qū)域，添加文件夾來作為一級分類，添加頁面來作為二級頁面。然后右鍵分類名稱-重復(fù)-分支來快速復(fù)制。

9、同時(shí)選擇所有的菜單欄元件和頂部導(dǎo)航組件，然后右鍵點(diǎn)擊“轉(zhuǎn)換為母版”，然后命名為“菜單欄”。

10、在左側(cè)母版區(qū)域，右鍵母版“菜單欄”，點(diǎn)擊“添加到頁面中…”然后點(diǎn)擊“全選”，勾選“置于底層”，最后點(diǎn)擊確定。

11、生成原型HTML并查看原型效果。

02 畫出有交互原型

12、先畫進(jìn)入首頁的交互。雙擊母版“菜單欄”進(jìn)入，選擇首頁，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“打開鏈接”，鏈接到“首頁”，點(diǎn)擊“確定”按鈕。(需要提前選擇首頁文字&首頁圖標(biāo)并右鍵設(shè)為組合并命名為首頁)

13、再畫每個(gè)頁面的交互。右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“打開鏈接”，鏈接到“對應(yīng)的頁面”，點(diǎn)擊“確定”按鈕。

14、再畫一級分類的交互。同時(shí)選擇分類名稱&分類圖標(biāo)并右鍵設(shè)為組合并命名為一級分類；同時(shí)選擇多個(gè)頁面名稱并右鍵設(shè)為組合并命名為二級頁面。

然后點(diǎn)擊組合“一級分類”，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“顯示/隱藏”，目標(biāo)選擇組合“二級頁面”，操作選擇“切換”，點(diǎn)擊更多選項(xiàng)然后設(shè)置“展開收起”，點(diǎn)擊“確定”按鈕。(同理設(shè)置其他一級分類的交互。注意組合需要單獨(dú)命名，方便選擇目標(biāo))

15、設(shè)置首頁載入的交互。進(jìn)入頁面“首頁”，點(diǎn)擊空白區(qū)域，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“頁面載入時(shí)”，添加動(dòng)作“設(shè)置選中”，目標(biāo)選擇組合“首頁”，點(diǎn)擊“完成”按鈕。

16、設(shè)置頁面載入的交互。進(jìn)入頁面“頁面名稱”，點(diǎn)擊空白區(qū)域，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“頁面載入時(shí)”，添加動(dòng)作“設(shè)置選中”，目標(biāo)選擇“頁面名稱”，點(diǎn)擊“完成”按鈕(注意需要提前命名頁面名稱來方便選擇目標(biāo))

17、生成原型HTML并查看原型效果。

總結(jié)

如果頁面特別多，可以采用三級菜單欄，即第一級菜單是分類，第二級菜單是分類，第三級菜單是頁面。

另外Axure左側(cè)頁面結(jié)構(gòu)中也需要以相應(yīng)的分類名稱頁面名稱進(jìn)行使用，方便開發(fā)和測試?yán)斫狻?/p>

#相關(guān)閱讀#

Axure教程：制作APP折疊面板

APP下導(dǎo)航如何用Axure畫出來

#專欄作家#

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

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

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