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

本次跟各位小伙伴一起學習使用動態面板來實現商品分類效果，本次案例是依照某易嚴選移動端的商品分類頁面，有了解的小伙伴可以去看一看。

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

一、準備元件

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

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

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

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

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

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

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

然后再如圖擺放 ：

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

二、設置交互樣式

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

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

然后所有的交互樣式就設置完了 。

三、設置交互用例

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

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

如圖：

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

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

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

現在我們已經做好了點擊左側一級分類時，右側的切換效果。后面我們要繼續做，當我們上下拖動時，左側的一級分類也會跟著變動。

四、進階

我們現在所有一級分類的設置用戶里，加上一個 選中時 的設置，如圖：

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

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

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

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

#專欄作家#

Donny，微信公眾號：UE_diary，人人都是產品經理專欄作家。工作兩年多的產品交互設計師，不定分享一些產品交互細節。

本文原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議