Axure原型設(shè)計：移動端標簽和菜單原型的應(yīng)用

Axure原型設(shè)計：移動端標簽和菜單原型的應(yīng)用標簽和菜單好比是一個分類器，將不同的內(nèi)容分門別類，用戶能夠通過標簽和菜單快速找到對應(yīng)的內(nèi)容，所以標簽和菜單在系統(tǒng)原型設(shè)計中是非常重要且常用的。相比web端而言，移動端的屏幕更小，所以標簽和才的應(yīng)用的場景就更廣闊了。本文梳理了移動端常用的標簽和菜單的原型，其中包括頁面菜單、側(cè)欄菜單、彈窗菜單、錨點菜單、頂部標簽菜單和底部標簽菜單。一、頁面菜單現(xiàn)在一些綜合型的app（微信、qq等）由于功能太多，都會有專門的菜單頁面，方面展示不同的內(nèi)容，使用頁面菜單頁方便用戶快速尋找到需要的內(nèi)容。我們在畫這種頁面菜單的時候，一般是使用中繼器制作，由圖標+文字的方式展示，點擊菜單內(nèi)容時跳轉(zhuǎn)至對應(yīng)的動態(tài)面板或?qū)?yīng)的頁面。使用中繼器制作的優(yōu)點維護簡單，不需要重新設(shè)置交互，新增菜單列的時候，只需要更新中繼器表格即可。二、側(cè)欄菜單側(cè)欄菜單和頁面菜單很像，只不過是把頁面菜單變成在左側(cè)彈出的菜單，可以自由顯示和隱藏菜單，菜單顯示時不會離開原來的頁面，這種菜單即實用又美觀。同樣的側(cè)欄菜單同樣是用中繼器制作，所以維護成為也低。三、彈窗菜單彈窗菜單和前兩者最大的區(qū)別是：彈窗菜單的菜單內(nèi)容少，他不會像前兩個菜單一樣把大多數(shù)或者全部的內(nèi)容頁面展示出來，彈窗菜單只是對當前頁面內(nèi)容的補充或者是放一些常用的功能（例如掃碼、搜索等），一般菜單行數(shù)為3-6行。我們設(shè)計的時候，也是使用中繼器來制作，方便維護。四、錨點菜單錨點菜單和上面3個菜單不同，上面三種菜單，點擊菜單內(nèi)容后都是跳轉(zhuǎn)到對應(yīng)的頁面，但是錨點菜單點擊后不跳轉(zhuǎn)至其他頁面，只是滑動至頁面的對應(yīng)位置，可以說是對本頁內(nèi)容的快速搜索。錨點菜單經(jīng)常應(yīng)用于購物、外賣等app。我們使用Axure設(shè)計的時候，一般會用錨點或者移動的事件，點擊菜單不同的內(nèi)容移動到對應(yīng)位置，由于每個菜單移動的位置不一致，所以用中繼器制作反而不太方便，我們就用形狀文字添加移動的交互即可。五、頂部標簽菜單頂部標簽菜單，這種標簽菜單的優(yōu)點是不暫用很多位置，不需要專門的頁面，也不需要彈窗，只需要在頂部預(yù)留一行文字的位置即可，用戶通過點擊不同標簽切換內(nèi)容，方便快捷。我們同樣用中繼器制作，維護時更改表格文字即可。六、底部標簽菜單底部標簽菜單，和頂部標簽菜單不一樣，頂部標簽菜單會把所有的頁面標簽顯示出來。但是底部的標簽菜單一般只顯示重要或者用戶常用的頁面，一般而言是4-5個標簽。底部標簽菜單的好處就是方便用戶使用，用戶能夠很快速的切換到常用的頁面。我們設(shè)計底部標簽菜單時，一般是由圖標和文字組成，點擊后會有個選中效果，并跳轉(zhuǎn)至對應(yīng)的頁面。七、Axure操作流程1.菜單中繼器制作中繼器內(nèi)如下圖擺放，圖片+菜單標題+向右符號+分隔線：中繼器表格由menu列和picture列組成，memu列填菜單文字標題，設(shè)置交互每項加載時讓菜單標題的值=item.memu。picture為菜單圖標，鼠標右鍵導入圖標即可，設(shè)置交互每項加載時，讓圖片的值=item.picture。3.動態(tài)面板制作如下圖所示，新建一個動態(tài)面板，state名改為對應(yīng)的菜單名，需要和中繼器表格內(nèi)一直哦，然后在各個面板放置對應(yīng)的內(nèi)容即可。設(shè)置交互，鼠標單擊菜單時，設(shè)置動態(tài)面板為對應(yīng)的頁面即可。以上就是本期關(guān)于移動端常用標簽