本次來(lái)講解 PC 端電商首頁(yè)的商品分類(lèi)，如何在Axure里面實(shí)現(xiàn)。

以下依舊使用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)效果（ 理由：方便、快捷、不需要函數(shù) ）

先來(lái)看一下某東的 PC 首頁(yè)的商品分類(lèi)效果，下文將按照此效果實(shí)現(xiàn)出來(lái)：

（因gif圖比較大壓縮出現(xiàn)失真，各位看官將就一下）

一、準(zhǔn)備元件

1.拖出四個(gè)矩形，輸入文字 “ 一級(jí)分類(lèi) ” ，w 為：200 px ，h 為：50 px ；

2.在拖出一個(gè)矩形，w 為 400 px ，h 為200 px 。里面放入文本 “ 二級(jí)分類(lèi) ” 、“ 三級(jí)分類(lèi) ” ，然后如圖排放：

3.前面有四個(gè) “ 一級(jí)分類(lèi) ” ，二、三級(jí)分類(lèi)的展示也需要有四個(gè)，因?yàn)樗膫€(gè)一模一樣的話(huà)到時(shí)不好分辨，所以小伙伴們各自給做出一些區(qū)別取來(lái)。然后把四個(gè)一起放在一個(gè)動(dòng)態(tài)面板里面，命名：“ 二、三級(jí)展示 ” ，然后把該動(dòng)態(tài)面點(diǎn)擊隱藏。那如圖：

這樣所有的元件就都準(zhǔn)備好了，現(xiàn)在我們來(lái)開(kāi)始下一步操作 ~

二、設(shè)置交互樣式

1.全選四個(gè) “ 一級(jí)分類(lèi) ” ，右鍵點(diǎn)擊交互樣式設(shè)置 – 鼠標(biāo)懸停 – 填充顏色 – 色值 #F2F2F2 ，如圖：

2.點(diǎn)擊第一個(gè) “ 一級(jí)分類(lèi) ” ，設(shè)置 “ 鼠標(biāo)移入時(shí) ” – 設(shè)置面板狀態(tài) – 選擇 “ 二、三級(jí)分類(lèi) ” – 選擇狀態(tài) 1 ，進(jìn)入 / 退出動(dòng)畫(huà)為：逐漸 ，250 毫秒 ，選中 “ 如果隱藏則顯示面板 ” ，點(diǎn)擊確定（ 其他三個(gè) “ 一級(jí)分類(lèi) ” 類(lèi)似 1? 選擇 2 、3 、4 ）。如圖：

設(shè)置完以上的所有設(shè)置，我們已經(jīng)大致完成整個(gè)效果了，現(xiàn)在我們先來(lái)看一下效果：

設(shè)置完移入的效果，現(xiàn)在我們來(lái)設(shè)置鼠標(biāo)移出的效果，繼續(xù) ~

3.全選所有元件 、動(dòng)態(tài)面板 ，右鍵點(diǎn)擊 “ 轉(zhuǎn)換為動(dòng)態(tài)面板 ” ，然后點(diǎn)擊該動(dòng)態(tài)面板，設(shè)置屬性 “ 鼠標(biāo)移出時(shí) ” – 隱藏 “ 二、三級(jí)展示 ” ，動(dòng)畫(huà)為：漸變，250毫秒 。

這樣，我們基本的效果就都做完了，看效果：

這樣我們基本的使用就都實(shí)現(xiàn)了，已完成的小伙伴給自己點(diǎn)個(gè)贊 ~

然后我們?cè)賮?lái)看看某東在首頁(yè)以外的頁(yè)面，商品分類(lèi)是如何顯示 / 影藏的：

只要完成了以上效果的，看完之后是不是覺(jué)得很簡(jiǎn)單，開(kāi)始做吧 ~

四、進(jìn)階

1.拖如一個(gè)矩形，w 為：200 px ，h 為：40 px ，色值：#333333 ，輸入 “ 全部商品分類(lèi) ” 放在如圖位置：

2.把 “ 一、二、三級(jí)展示 ” 鼠標(biāo)移出時(shí)的設(shè)置刪除，然后隱藏 “ 一、二、三級(jí)展示 ” ，點(diǎn)擊 “ 全部商品分類(lèi) ” 設(shè)置屬性：“ 鼠標(biāo)移入時(shí) ” 顯示 “ 一、二、三級(jí)展示 ” ，動(dòng)畫(huà)為：逐漸，250毫秒，置于頂層，點(diǎn)擊確定；

3.繼續(xù)全選所有元件、動(dòng)態(tài)面板，右鍵點(diǎn)擊 “ 轉(zhuǎn)換為動(dòng)態(tài)面板 ” ，命名為：“ 全部商品分類(lèi) ” ，點(diǎn)擊 “ 全部商品分類(lèi) ” 設(shè)置鼠標(biāo)移入 / 移出的效果 ，如下圖：

完成以上所有設(shè)置就完成了，來(lái)看看以下效果：

該文件百度云鏈接：鏈接:https://pan.baidu.com/s/19d3wk15sfUKY3VDH8Eo7AQ 密碼:gim8

以上就是所有的效果解析，各位小伙伴是否學(xué)會(huì)了？

今天的文章就到這里結(jié)束了，如有相關(guān)問(wèn)題請(qǐng)?jiān)谙路搅粞裕覍⒁灰唤獯稹?/p>

謝謝大家 ??！

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

題圖來(lái)自 網(wǎng)絡(luò)