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

編輯導(dǎo)語：無論我們使用什么APP或者網(wǎng)站，往往都會下意識地去尋找菜單欄和標(biāo)簽欄，方便我們更快捷的查找到想要的信息。尤其是在使用移動端時，屏幕的大小讓我們更需要菜單的指引。那么在Axure原型設(shè)計中，移動端標(biāo)簽和菜單原型是如何應(yīng)用的呢？本文作者為我們進行了詳細地解答。

標(biāo)簽和菜單好比是一個分類器，將不同的內(nèi)容分門別類，用戶能夠通過標(biāo)簽和菜單快速找到對應(yīng)的內(nèi)容，所以標(biāo)簽和菜單在系統(tǒng)原型設(shè)計中是非常重要且常用的。

相比web端而言，移動端的屏幕更小，所以標(biāo)簽和才的應(yīng)用的場景就更廣闊了。

本文梳理了移動端常用的標(biāo)簽和菜單的原型，其中包括頁面菜單、側(cè)欄菜單、彈窗菜單、錨點菜單、頂部標(biāo)簽菜單和底部標(biāo)簽菜單。

一、頁面菜單

現(xiàn)在一些綜合型的app（微信、qq等）由于功能太多，都會有專門的菜單頁面，方面展示不同的內(nèi)容，使用頁面菜單頁方便用戶快速尋找到需要的內(nèi)容。

我們在畫這種頁面菜單的時候，一般是使用中繼器制作，由圖標(biāo)+文字的方式展示，點擊菜單內(nèi)容時跳轉(zhuǎn)至對應(yīng)的動態(tài)面板或?qū)?yīng)的頁面。

使用中繼器制作的優(yōu)點維護簡單，不需要重新設(shè)置交互，新增菜單列的時候，只需要更新中繼器表格即可。

二、側(cè)欄菜單

側(cè)欄菜單和頁面菜單很像，只不過是把頁面菜單變成在左側(cè)彈出的菜單，可以自由顯示和隱藏菜單，菜單顯示時不會離開原來的頁面，這種菜單即實用又美觀。

同樣的側(cè)欄菜單同樣是用中繼器制作，所以維護成為也低。

三、彈窗菜單

彈窗菜單和前兩者最大的區(qū)別是：彈窗菜單的菜單內(nèi)容少，他不會像前兩個菜單一樣把大多數(shù)或者全部的內(nèi)容頁面展示出來，彈窗菜單只是對當(dāng)前頁面內(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)位置，由于每個菜單移動的位置不一致，所以用中繼器制作反而不太方便，我們就用形狀文字添加移動的交互即可。

五、頂部標(biāo)簽菜單

頂部標(biāo)簽菜單，這種標(biāo)簽菜單的優(yōu)點是不暫用很多位置，不需要專門的頁面，也不需要彈窗，只需要在頂部預(yù)留一行文字的位置即可，用戶通過點擊不同標(biāo)簽切換內(nèi)容，方便快捷。我們同樣用中繼器制作，維護時更改表格文字即可。

六、底部標(biāo)簽菜單

底部標(biāo)簽菜單，和頂部標(biāo)簽菜單不一樣，頂部標(biāo)簽菜單會把所有的頁面標(biāo)簽顯示出來。

但是底部的標(biāo)簽菜單一般只顯示重要或者用戶常用的頁面，一般而言是4-5個標(biāo)簽。

底部標(biāo)簽菜單的好處就是方便用戶使用，用戶能夠很快速的切換到常用的頁面。我們設(shè)計底部標(biāo)簽菜單時，一般是由圖標(biāo)和文字組成，點擊后會有個選中效果，并跳轉(zhuǎn)至對應(yīng)的頁面。

七、Axure操作流程

1. 菜單中繼器制作

中繼器內(nèi)如下圖擺放，圖片+菜單標(biāo)題+向右符號+分隔線：

中繼器表格由menu列和picture列組成，memu列填菜單文字標(biāo)題，設(shè)置交互每項加載時讓菜單標(biāo)題的值=item.memu。

picture為菜單圖標(biāo)，鼠標(biāo)右鍵導(dǎo)入圖標(biāo)即可，設(shè)置交互每項加載時，讓圖片的值=item.picture。

3. 動態(tài)面板制作

如下圖所示，新建一個動態(tài)面板，state名改為對應(yīng)的菜單名，需要和中繼器表格內(nèi)一直哦，然后在各個面板放置對應(yīng)的內(nèi)容即可。

設(shè)置交互，鼠標(biāo)單擊菜單時，設(shè)置動態(tài)面板為對應(yīng)的頁面即可。

以上就是本期關(guān)于移動端常用標(biāo)簽和菜單的全部內(nèi)容，主要是基于我個人在實際工作中需要用到的原型，而設(shè)計出來的Axure組件。大家在設(shè)計原型的時候，可以根據(jù)實際情況需要選擇使用。

如果大家有所收獲，希望可以點贊鼓勵一下，也歡迎大家交流，謝謝。

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

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