Axure教程:導(dǎo)航欄收縮與展開
本文給大家講解一下如何在Axure中制作導(dǎo)航欄的收縮與展開,一起來看看~
本文將從以下3個方面展開:
- 需求分析;
- Axure關(guān)鍵點分析;
- 效果展示。
1. 需求分析
我們在做原型設(shè)計的時候,通常會遇到這樣的需求:點擊導(dǎo)航欄的某個一級菜單,則展開其下面的二級菜單,同時收起其他一級菜單下面的二級菜單。
如果使用Axure軟件來做原型設(shè)計,遇到此類需求的時候,我們應(yīng)該怎么進行需求分析呢?怎么將需求與Axure的功能進行匹配呢?
我們仔細研究需求就會發(fā)現(xiàn),需求的核心點在于:展開菜單的同時收起其他菜單,也就是說菜單的展開或者收起是有條件,在某些條件下需要展開或者收起??吹竭@里,我們是不是會想到Axure中的動態(tài)面板呢?動態(tài)面板可以實現(xiàn)元件的顯示及隱藏,正好和需求的訴求點是吻合的。
看到這里,相信大家已經(jīng)有思路了,用Axure的動態(tài)面板功能就可以實現(xiàn)該需求。下面接著講Axure的實現(xiàn)方式。
2. Axure關(guān)鍵點分析
通過上面的需求分析,我們已經(jīng)有了解決思路,即使用Axure動態(tài)面板功能來實現(xiàn)。其核心點在于什么時間點展開哪些動態(tài)面板,同時隱藏哪些動態(tài)面板。
下面為Axure關(guān)鍵點分析:
- 這里涉及到一級菜單和二級菜單,其中前者可以用矩形,后者需要用動態(tài)面板;
- 二級菜單用的動態(tài)面板默認隱藏,在點擊其對應(yīng)的一級菜單的時候才設(shè)置為顯示;
- 點擊一級菜單的時候,顯示其對應(yīng)的二級菜單動態(tài)面板,同時隱藏其他二級菜單的動態(tài)面板,并把下面的元件往上拉動;
- 只需設(shè)置第一個一級菜單的交互,可復(fù)制至其他的一級菜單然后做一些修改即可。
動作為:設(shè)置面板狀態(tài)
其他細節(jié),如鼠標懸停一級菜單時背景顏色顯示為淡藍色而鼠標點擊時顯示為綠色,這個可以通過設(shè)置矩形的交互樣式來實現(xiàn)。
3. 效果展示
效果展示網(wǎng)址為:https://2knrzw.axshare.com/
本文由 @翠baby 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!