1、Axure原型設計：移動端標簽和菜單原型的應用編輯導語：無論我們使用什么APP或者網站，往往都會下意識地去尋找菜單欄和標簽欄，方便我們更快捷的查找到想要的信息。尤其是在使用移動端時，屏幕的大小讓我們更需要菜單的指引。那么在Axure原型設計中，移動端標簽和菜單原型是如何應用的呢？本文作者為我們進行了詳細地解答。 標簽和菜單好比是一個分類器，將不同的內容分門別類，用戶能夠通過標簽和菜單快速找到對應的內容，所以標簽和菜單在系統原型設計中是非常重要且常用的。 相比web端而言，移動端的屏幕更小，所以標簽和才的應用的場景就更廣闊了。 本文梳理了移動端常用的標簽和菜單的原型，其中包括頁面菜單、側欄菜單、

2、彈窗菜單、錨點菜單、頂部標簽菜單和底部標簽菜單。一、頁面菜單 現在一些綜合型的app（微信、qq等）由于功能太多，都會有專門的菜單頁面，方面展示不同的內容，使用頁面菜單頁方便用戶快速尋找到需要的內容。 我們在畫這種頁面菜單的時候，一般是使用中繼器制作，由圖標+文字的方式展示，點擊菜單內容時跳轉至對應的動態面板或對應的頁面。 使用中繼器制作的優點維護簡單，不需要重新設置交互，新增菜單列的時候，只需要更新中繼器表格即可。 二、側欄菜單 側欄菜單和頁面菜單很像，只不過是把頁面菜單變成在左側彈出的菜單，可以自由顯示和隱藏菜單，菜單顯示時不會離開原來的頁面，這種菜單即實用又美觀。 同樣的側欄菜單同樣是用

3、中繼器制作，所以維護成為也低。 三、彈窗菜單 彈窗菜單和前兩者最大的區別是：彈窗菜單的菜單內容少，他不會像前兩個菜單一樣把大多數或者全部的內容頁面展示出來，彈窗菜單只是對當前頁面內容的補充或者是放一些常用的功能（例如掃碼、搜索等），一般菜單行數為3-6行。 我們設計的時候，也是使用中繼器來制作，方便維護。 四、錨點菜單 錨點菜單和上面3個菜單不同，上面三種菜單，點擊菜單內容后都是跳轉到對應的頁面，但是錨點菜單點擊后不跳轉至其他頁面，只是滑動至頁面的對應位置，可以說是對本頁內容的快速搜索。錨點菜單經常應用于購物、外賣等app。 我們使用Axure設計的時候，一般會用錨點或者移動的事件，點擊菜單不

4、同的內容移動到對應位置，由于每個菜單移動的位置不一致，所以用中繼器制作反而不太方便，我們就用形狀文字添加移動的交互即可。 五、頂部標簽菜單 頂部標簽菜單，這種標簽菜單的優點是不暫用很多位置，不需要專門的頁面，也不需要彈窗，只需要在頂部預留一行文字的位置即可，用戶通過點擊不同標簽切換內容，方便快捷。我們同樣用中繼器制作，維護時更改表格文字即可。 六、底部標簽菜單 底部標簽菜單，和頂部標簽菜單不一樣，頂部標簽菜單會把所有的頁面標簽顯示出來。 但是底部的標簽菜單一般只顯示重要或者用戶常用的頁面，一般而言是4-5個標簽。 底部標簽菜單的好處就是方便用戶使用，用戶能夠很快速的切換到常用的頁面。我們設計底

5、部標簽菜單時，一般是由圖標和文字組成，點擊后會有個選中效果，并跳轉至對應的頁面。 七、Axure操作流程1. 菜單中繼器制作 中繼器內如下圖擺放，圖片+菜單標題+向右符號+分隔線： 中繼器表格由menu列和picture列組成，memu列填菜單文字標題，設置交互每項加載時讓菜單標題的值=item.memu。 picture為菜單圖標，鼠標右鍵導入圖標即可，設置交互每項加載時，讓圖片的值=item.picture。 3. 動態面板制作 如下圖所示，新建一個動態面板，state名改為對應的菜單名，需要和中繼器表格內一直哦，然后在各個面板放置對應的內容即可。 設置交互，鼠標單擊菜單時，設置動態面板為對應的頁面即可。 以上就是本期關于移動端常用標簽和菜單的全部內容，主要是基于我個人在實際工作中需要用到的