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

編輯導語：我們可以使用中繼器制作很多頁面原型，比如一個產品的后臺有很多功能，那么我們可以使用中繼器進行制作；本文作者分享了關于用Axure制作中繼器菜單的教程，我們一起來了解一下。

菜單是系統里面的框架，雖然Axure目前是制作原型的主流工具，但是axure里面并沒有自動菜單的元件，這樣導致很多新手不懂怎樣做一個高保真高交互的菜單原型，所以作者今天教大家用中繼器制作一個菜單的原型模板。

本案例主要介紹同一頁面內的跳轉，即通過中繼器菜單實現動態面板的跳轉交互，下面就是制作完成的效果了：

原型預覽地址：https://vsvlu6.axshare.com/#g=1

下面我們一起開始學習吧~~~

一、材料準備

圖片元件——菜單的圖標內容，起到美化的作用。

文本標簽——菜單的文字標題。

背景框——用于制作移入選中變色和單擊禁用的變色，這里要設置交互樣式，選中時為灰色，禁用時為藍色。

中繼器——將上面三個元件組合到一塊，然后復制到中繼器內部，如下圖所示擺放。

中繼器表格增加3列：pic、title、jinyong。

pic對應圖片元件，即菜單的圖標，在中繼器表格內右鍵導入圖片即可，之后我們會設置到圖片元件。

title對應文本標簽，即菜單文字標題，之后我們會做設置文本的交互。

jinyong是一個標記，標記鼠標點擊了哪行菜單，默認是標記第一行的菜單，所以在第一行默認填1。

表格如下圖所示填寫即可：

矩形和圖片——矩形是用于制作菜單的背景，選一個深色一點的背景，如果菜單不多下面有空白的地方可以找個圖片適當美化一下。

動態面板——用于放置頁面內容，有多少個菜單就創建多少個state，然后需要將state的名字改成和title列名字對應，案例中的state分別是產品介紹、產品用戶、用戶需求、功能清單、產品架構、名稱解釋和全局說明。動態面板里各業需要展示的內容大家可以自己放置。

二、交互制作

1. 中繼器每項加載時交互

設置文本——將文本標簽的值設為title列的值，即Item.title。

設置圖片——這里考慮到有些菜單不需要圖標的情況，所以我們需要需要分條件設置，如果該行pic的值不為空（有圖片），將圖片元件的值設為pic列的值，即Item.pic；如果該行pic的值為空（無圖片），我們就隱藏圖片元件。

禁用背景——如果該行jinyong的值為1，那么我們就禁用該背景。

2. 菜單組合移入移出時交互

鼠標移入菜單組合時——我們需要選中背景為真，因為前面設置了背景選中時會變灰色，這樣的有一個移入變色的效果了。

鼠標移出菜單組合時——我們需要選中背景為假，這樣相當于恢復原樣，取消了菜單移入變色的效果，這組交互是對應的。

3. 菜單組合鼠標單擊時時交互

鼠標單擊菜單組合時，我們要實現兩個效果，第一個是點擊后背景變成藍色，第二個是打開動態面板內對應的頁面。

背景變成是通過jinyong列的值的決定的，所以鼠標單擊時，我們所以標記所有行，把所有行jinyong列的值改成0，然后在更新當前行，把該行的jinyong值設為1，這樣就實現是變成的效果。

最后我們設置動態面板狀態，設置值為Item.title，這樣動態面板就會打開和菜單文字相同的頁面。

這樣我們就做好了動態面板菜單的框架了，以后可以直接使用，是不是很方便呢？

那以上就是本期全部內容了，我們下期見，88~~

本文由 @做產品但不是經理 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。