多重下拉選單 #1: 設計概念和UI製作 • Figma 教學
1.8K views · 2024-12-27
UI DesignInteraction & UX
這一系列有兩集，我們來看要如何製作出多重/多層的下拉選單設計。
我們會用到比較複雜且有點花時間的互動設計，利用到變數Variables和Conditional。
第一集我們會看一下設計的概念，和把UI設計方面製作出來。
第二集是主要看Prototype互動設計的方面。
之前的單一下拉選單教學: https://youtu.be/wWbnwtm_C10
設計概念圖: https://drive.google.com/file/d/178v1ZkXE_PX5X9a6YtPztuAd88ubTv0j/view?usp=drive_link
設計檔案: https://drive.google.com/file/d/18IK3fQmpPR1wiGWIvMUC1-J9JmvehVyZ/view?usp=drive_link
[章節]
00:00 設計主題
00:36 設計概念
04:51 設計檔案預覽
05:58 UI介面設計: Style設定
09:24 UI介面設計: 選項按鈕條
21:03 UI介面設計: 選單設計
27:28 UI介面設計: 主下拉選單設計
32:31 設計段落觀看
33:14 額外: 選單滑動欄方式
#多重下拉選單 #多層下拉 #多層選單 #figma下拉 #figma多層下拉 #figma教學
我們會用到比較複雜且有點花時間的互動設計，利用到變數Variables和Conditional。
第一集我們會看一下設計的概念，和把UI設計方面製作出來。
第二集是主要看Prototype互動設計的方面。
之前的單一下拉選單教學: https://youtu.be/wWbnwtm_C10
設計概念圖: https://drive.google.com/file/d/178v1ZkXE_PX5X9a6YtPztuAd88ubTv0j/view?usp=drive_link
設計檔案: https://drive.google.com/file/d/18IK3fQmpPR1wiGWIvMUC1-J9JmvehVyZ/view?usp=drive_link
[章節]
00:00 設計主題
00:36 設計概念
04:51 設計檔案預覽
05:58 UI介面設計: Style設定
09:24 UI介面設計: 選項按鈕條
21:03 UI介面設計: 選單設計
27:28 UI介面設計: 主下拉選單設計
32:31 設計段落觀看
33:14 額外: 選單滑動欄方式
#多重下拉選單 #多層下拉 #多層選單 #figma下拉 #figma多層下拉 #figma教學