AXURE 中分類,關于分類顯示的實現效果(以電商 商城產品分類為例) 適合初學者
實現后的效果是下面這樣的:
這個做法:其實很簡單:用動態面板的方法.現在一步步截圖給大家:
做一個基礎的,先做好左邊大的分類(上圖 3)
做一個詳細分類的動態面板。(上圖4)
動態面板含4種狀態(上圖5)
服飾鞋包(上圖6)
美容護膚(上圖7)
運動戶外(上圖8)
家具用品(上圖9)
如果你要問我,那個形狀是怎樣形成的,用矩形。實在不行就用直線。
用這種加直線的方式可以組合(上圖10)
下面我們來看下邏輯
鼠標移入某個分類,就讓某個分類的詳細分類顯示出來,所以我們將詳細分類的(4個狀態)動態面板覆蓋在上面,并隱藏。如下圖步驟:
1、設置每個大分類的交互,即鼠標移入某個大分類,就顯示這個大分類的小分類(動態面板對應的狀態),然后等待多長時間后,自動隱藏小分類(動態面板)
詳細的交互,以服飾鞋包為例(上圖11 ? 12其它分類,也同樣的方法添加同樣的交互)
將我們之前做好的動態面板,覆蓋分類上面,并隱藏。
隱藏是黃色的(上圖13)
這樣能運行就實現啦!試試看吧!
本文由 @Suha 原創投稿,并經人人都是產品經理編輯。未經許可,禁止轉載。
評論
既然想做的詳細,那我這有個復雜的需求你看能解決嗎:“當鼠標指向大分類時顯示了小分類,這時鼠標指向小分類,小分類依然顯示,然后鼠標指向空白的地方,小分類馬上消失?!?這個功能我想了挺久沒想出來咋整,就最后一步:“鼠標從小分類里任意時間移走,小分類能馬上消失”這個功能 不好整
我就是在找這個,也是想了好久不知道怎么去實現
我已經做出來了,要用動態面板。給動態面版兩個動態,動態1.隱藏小分類,動態2顯示小分類。大分類設置鼠標移入時顯示動態面板2 移出時顯示動態面板1
我也遇到了這個問題 具體應該怎么取實現呢?在線等
有更簡單的?介紹一下
說著的……做這么細致并沒有什么實際用途……
做麻煩了
介紹一下簡單的