UI 100 #17_Dropdown 日記

Leeds
2 min readAug 8, 2018

--

2018/08/08

第一次用Protipie/

只看了官方付的一篇教學,結果有點手忙腳亂,但是整體來說就是拉節點、拉條件,但是不會用遮罩,我也不知道有沒有遮罩這種東西,所以很困擾。

設計重點

雨滴感/

如下圖的雨滴感覺,但是排過後,覺得字如果方向太多其中排在小小一顆雨滴裡也難以閱讀,所以只有重點字做傾斜和塊。

動態設計/

除了基本的滑入淡入淡出,上面的主選單還有一個漏斗狀的設計,希望可以漸進指向目前選到的區域,但是又因為底色不是單色,所以增加困難度。

基本動作:

滑鼠滑入感應區>
底色方塊移動>
指向三角形1移動&漸消失>
指向三角形2漸出現>
下方選單出現

滑鼠滑出感應區>
下方選單消失>
底色方塊淡出>
指向三角形1回原位

結論:搞得很複雜,因為找不到遮罩。

--

--