本次跟各位小伙伴一起學(xué)習(xí)使用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)商品分類(lèi)效果，本次案例是依照某易嚴(yán)選移動(dòng)端的商品分類(lèi)頁(yè)面，有了解的小伙伴可以去看一看。

下面就開(kāi)始剖解整個(gè)實(shí)現(xiàn)過(guò)程 ， 我們拿一小部分來(lái)講解就好了，就不畫(huà)一整個(gè)頁(yè)面了 。

一、準(zhǔn)備元件

拉出一個(gè)矩形（ w ：375，h ：200 ），邊框線(xiàn)條色值（ #E4E4E4 ），已此來(lái)作為整個(gè)分類(lèi)的背景框，如圖：

我們?cè)倮鲆粋€(gè)矩形（ w ：100 ，h ：50 ），再?gòu)?fù)制粘貼三個(gè)，矩形內(nèi) 和 元件明都為：“ 推薦專(zhuān)區(qū) ” 、“ 爆品區(qū) ” 、“ 鞋機(jī)專(zhuān)區(qū) ” 、“ 居家 ” ，然后如下圖排放起來(lái)：

為了美觀，上面我們把部分邊框線(xiàn)給隱藏起來(lái)，不知道的小伙伴們看看這里：（步驟：點(diǎn)擊矩形 – 界面右側(cè)樣式 – 邊框 – 選擇隱藏對(duì)象 ）

再繼續(xù)拉一個(gè)矩形（ w ：3 ，h ：26 ），填充色值（ #B3282D ），我們給它命名為：“ 小色塊 ” ，如圖擺放：

這樣我們就把一個(gè)商品分類(lèi)的背景和一級(jí)分類(lèi)做了出來(lái)，接下來(lái)繼續(xù)做一下二、三級(jí)商品分類(lèi)。

最后我們?cè)诶^續(xù)拉出 文本 和 占位符 ，如下圖擺放：

以上我只放了一個(gè)二、三級(jí)分類(lèi)出來(lái)，因?yàn)榍懊嫖覀冏龅囊患?jí)分類(lèi)有四個(gè)，所以需要各位小伙伴在這個(gè)的基礎(chǔ)上，再做三個(gè)二、三級(jí)分類(lèi)出來(lái)，然后放在一個(gè)動(dòng)態(tài)面板里面：

然后再如圖擺放 ：

這樣我們就把所有的商品基本元件都做好了，來(lái)繼續(xù)下一步操作 。

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

點(diǎn)擊選中所有的一級(jí)分類(lèi)，右鍵點(diǎn)擊 交互樣式設(shè)置 – 選中 – 字體顏色（ #B3282D ），點(diǎn)擊確定（ 確定之后再把第一個(gè)選項(xiàng) “推薦專(zhuān)區(qū)” 右鍵點(diǎn)擊 選中，意為頁(yè)面載入時(shí)，默認(rèn)選中 ）。

在繼續(xù)點(diǎn)擊選中所有的一級(jí)分類(lèi)，右鍵點(diǎn)擊 設(shè)置選項(xiàng)組名稱(chēng) – 命名：“一級(jí)分類(lèi)” 點(diǎn)擊確定。

然后所有的交互樣式就設(shè)置完了 。

三、設(shè)置交互用例

點(diǎn)擊選中一級(jí)分類(lèi) “ 推薦專(zhuān)區(qū) ” ，右側(cè)添加用例 鼠標(biāo)單擊時(shí) – 設(shè)置選中狀態(tài)為：ture ；設(shè)置移動(dòng) “ 小色塊 ” 為絕對(duì)位置 – x 軸為 [[This.x]] ,y 軸為 [[This.y+12]] – 動(dòng)畫(huà)：線(xiàn)性 – 時(shí)間：250毫秒 ； 設(shè)置動(dòng)態(tài)面板 “ 二、三級(jí)分類(lèi) ” 為推薦專(zhuān)區(qū) – 動(dòng)畫(huà)：向下滑動(dòng) – 時(shí)間：500毫秒 。

設(shè)置第二個(gè)一級(jí)分類(lèi)，設(shè)置選中、移動(dòng)都跟上面保持一致，以下就不一一復(fù)述了。不同的區(qū)域說(shuō)一下就好，因?yàn)?“ 爆品區(qū) ” 有上下兩個(gè)選中目標(biāo)，然后我們需要給它加一個(gè)條件。

如圖：

第三個(gè)一級(jí)分類(lèi) “ 夏季專(zhuān)區(qū) ” 跟 “ 爆品區(qū) ” 一致，設(shè)置不同而已。

第四個(gè)一級(jí)分類(lèi) “ 居家 ” 跟第一個(gè)差不多。

這樣我們的基本的點(diǎn)擊切換效果就做完了，預(yù)覽操作一波 。

現(xiàn)在我們已經(jīng)做好了點(diǎn)擊左側(cè)一級(jí)分類(lèi)時(shí)，右側(cè)的切換效果。后面我們要繼續(xù)做，當(dāng)我們上下拖動(dòng)時(shí)，左側(cè)的一級(jí)分類(lèi)也會(huì)跟著變動(dòng)。

四、進(jìn)階

我們現(xiàn)在所有一級(jí)分類(lèi)的設(shè)置用戶(hù)里，加上一個(gè) 選中時(shí) 的設(shè)置，如圖：

然后我們把二、三級(jí)分類(lèi)里面的每一模塊，都右鍵點(diǎn)擊轉(zhuǎn)換為動(dòng)態(tài)面板，意為在每一層內(nèi)容里，再給他加上一層動(dòng)態(tài)面板，用于我們要用它來(lái)設(shè)置我們的上下拖動(dòng)效果。

然后我們?cè)诟鱾€(gè)新增的動(dòng)態(tài)面板上設(shè)置鼠標(biāo)上/下拖動(dòng)時(shí)的設(shè)置，（ 注：第一個(gè)只有向上拖動(dòng)，第四個(gè)只有向下拖動(dòng) ）這里我直接把設(shè)置的條件放出來(lái)讓各位觀看。

如果覺(jué)得以上的設(shè)置看不太明白的話(huà)，稍后下載源文件查看即可。完成以上的設(shè)置，可以得到以下的效果 ：

以上就是本次移動(dòng)端商品分類(lèi)的所有制作流程內(nèi)容，稍后在留言區(qū)會(huì)有該源文件的百度云鏈接，感謝觀看 ~

#專(zhuān)欄作家#

Donny，微信公眾號(hào)：UE_diary，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。工作兩年多的產(chǎn)品交互設(shè)計(jì)師，不定分享一些產(chǎn)品交互細(xì)節(jié)。

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

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