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

下面就開始剖解整個實現(xiàn)過程 ， 我們拿一小部分來講解就好了，就不畫一整個頁面了 。

一、準(zhǔn)備元件

拉出一個矩形（ w ：375，h ：200 ），邊框線條色值（ #E4E4E4 ），已此來作為整個分類的背景框，如圖：

我們再拉出一個矩形（ w ：100 ，h ：50 ），再復(fù)制粘貼三個，矩形內(nèi) 和 元件明都為：“ 推薦專區(qū) ” 、“ 爆品區(qū) ” 、“ 鞋機(jī)專區(qū) ” 、“ 居家 ” ，然后如下圖排放起來：

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

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

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

最后我們在繼續(xù)拉出 文本 和 占位符 ，如下圖擺放：

以上我只放了一個二、三級分類出來，因為前面我們做的一級分類有四個，所以需要各位小伙伴在這個的基礎(chǔ)上，再做三個二、三級分類出來，然后放在一個動態(tài)面板里面：

然后再如圖擺放 ：

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

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

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

在繼續(xù)點擊選中所有的一級分類，右鍵點擊 設(shè)置選項組名稱 – 命名：“一級分類” 點擊確定。

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

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

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

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

如圖：

第三個一級分類 “ 夏季專區(qū) ” 跟 “ 爆品區(qū) ” 一致，設(shè)置不同而已。

第四個一級分類 “ 居家 ” 跟第一個差不多。

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

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

四、進(jìn)階

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

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

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

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

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

#專欄作家#

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

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

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