###### tags: `uiux教學文件` # 介面元件介紹 ## 表單元件 | 項目 | 樣式 | 連結 | | -------- | -------- | -------- | | 複選 | ![](https://i.imgur.com/1AypaeG.jpg) | | | 單選 | ![](https://i.imgur.com/JYTqWtB.jpg) | | | 下拉 |![](https://i.imgur.com/83rfs8K.jpg) | | | 切換switch |![](https://i.imgur.com/4eszHh5.jpg) | | | 時間選擇 | ![](https://i.imgur.com/CR9VmDL.jpg) | | | 單行文字框 |![](https://i.imgur.com/xoR9wHP.jpg) |[More](https://www.instagram.com/p/CgRZ9IvL--2/) [More](https://www.instagram.com/p/ClkA9XfIFO3/) | | 多行文字框 | ![](https://i.imgur.com/L0Cyavc.jpg) | | | 密碼 |![](https://i.imgur.com/7s3uiat.jpg) | | | 按鈕 | ![](https://i.imgur.com/FeR4I3q.jpg) | [More](https://www.instagram.com/p/CHPq79MFtoz/) [More](https://www.instagram.com/p/Cfy4XRIMkg_/) | |佔位字placeholder | ![](https://i.imgur.com/SlSSuSL.jpg) | | ## 資訊組件 | 項目 | 樣式| 連結 | | -------- | -------- | -------- | | 麵包屑 Breadcrumb | ![](https://i.imgur.com/zqi1jf0.jpg) | | | 分頁 Pagination |![](https://i.imgur.com/KwbEUbr.jpg)| | | 標籤 |![](https://i.imgur.com/VqyFtYU.jpg)| | | icons |![](https://i.imgur.com/n7HhPge.jpg) | [More](https://www.instagram.com/p/CdYI9odsrdF/) | | 輪播 carousel |![](https://i.imgur.com/RZzqVwx.jpg) | | | 通知Notifications |![](https://i.imgur.com/nUFPRMI.jpg)![](https://i.imgur.com/UAtbJRI.jpg) | | | 彈出視窗 | ![](https://i.imgur.com/D1HYYio.jpg) | | | 提醒 tooltip |![](https://i.imgur.com/T7WyhJG.jpg) | | | 圖卡資訊card |![](https://i.imgur.com/5naVU4y.jpg) | | #### 參考資料 1. http://preview.themeforest.net/item/neptune-multipurpose-bootstrap-5-admin-dashboard-template/full_screen_preview/33492192?_ga=2.167086781.2020649092.1676791286-855231248.1613180785&_gac=1.221367018.1674093336.CjwKCAiAzp6eBhByEiwA_gGq5IneSK9Bb-Y65PrEy0vpSTThZ_NddSXiAe-iLlTeTfKUzY0bk2G-yhoCcesQAvD_BwE 2. https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html 3. https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886