---
# System prepended metadata

title: 介面元件介紹
tags: [uiux教學文件]

---

###### 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



