後台管理系統常見UI元件
2024年11月5日



在這一年的工作中,負責的案子剛好就是屬於後台系統,而後台系統有可能資訊量及功能會非常龐大,而且元件不僅影響使用者的體驗,也直接關係到系統的效率和易用性,所以在元件的選擇和使用上就至關重要。
以下就整理了一些常見的UI元件,以及使用時機,開始吧~~~
導航欄(Navigation Bar)
導航欄是後台管理系統中最主要的元件,通常分為兩種:
側邊導航欄(Sidebar Navigation):屬於較常見的元件,尤其是在功能較多且較複雜的情況下使用。

頂部導航欄(Top Navigation Bar):因為對螢幕佔用的比例較少,所以當系統功能較少或需要更多橫向空間時可以使用。

而「側邊導航」和「頂部導航」是可以同時存在的,特別是在功能複雜的系統中,可以幫助使用者更有效的管理不同功能層級中的子功能及內容,在必要時「側邊導航」也能進行收合。
麵包屑導航(Breadcrumbs)
麵包屑導航通常用於顯示當前頁面的層級結構,特別適合層次結構較深的系統。
通過麵包屑導航,使用者可以清晰的知道自己所在位置,並且能快速返回上一層或首頁,提升操作的易用性及靈活性。

表格(Tables)
表格是展示和管理大量數據的重要元件。它們通常具備排序、篩選、分頁等功能,並且支持行內操作,如編輯、刪除或查看詳細信息。這使得數據管理變得高效且有條理。
按鈕(Button)
按鈕是觸發操作的主要手段,通常分為主要操作按鈕和次要操作按鈕。
主要操作按鈕(Primary Button):通常用於保存或提交等關鍵操作,顏色和樣式會較為顯眼。
次要操作按鈕(Secondary Button):用於取消、返回等輔助操作,設計上相對低調。
通知和警示(Notifications & Alerts)
通知和警示用於向用戶傳達系統消息或操作結果。這些元件通常會在用戶完成操作後顯示,並可以是即時消息、成功提示、錯誤警告或系統公告。設計上需要簡潔且不打擾用戶正常操作。
在這一年的工作中,負責的案子剛好就是屬於後台系統,而後台系統有可能資訊量及功能會非常龐大,而且元件不僅影響使用者的體驗,也直接關係到系統的效率和易用性,所以在元件的選擇和使用上就至關重要。
以下就整理了一些常見的UI元件,以及使用時機,開始吧~~~
導航欄(Navigation Bar)
導航欄是後台管理系統中最主要的元件,通常分為兩種:
側邊導航欄(Sidebar Navigation):屬於較常見的元件,尤其是在功能較多且較複雜的情況下使用。

頂部導航欄(Top Navigation Bar):因為對螢幕佔用的比例較少,所以當系統功能較少或需要更多橫向空間時可以使用。

而「側邊導航」和「頂部導航」是可以同時存在的,特別是在功能複雜的系統中,可以幫助使用者更有效的管理不同功能層級中的子功能及內容,在必要時「側邊導航」也能進行收合。
麵包屑導航(Breadcrumbs)
麵包屑導航通常用於顯示當前頁面的層級結構,特別適合層次結構較深的系統。
通過麵包屑導航,使用者可以清晰的知道自己所在位置,並且能快速返回上一層或首頁,提升操作的易用性及靈活性。

表格(Tables)
表格是展示和管理大量數據的重要元件。它們通常具備排序、篩選、分頁等功能,並且支持行內操作,如編輯、刪除或查看詳細信息。這使得數據管理變得高效且有條理。
按鈕(Button)
按鈕是觸發操作的主要手段,通常分為主要操作按鈕和次要操作按鈕。
主要操作按鈕(Primary Button):通常用於保存或提交等關鍵操作,顏色和樣式會較為顯眼。
次要操作按鈕(Secondary Button):用於取消、返回等輔助操作,設計上相對低調。
通知和警示(Notifications & Alerts)
通知和警示用於向用戶傳達系統消息或操作結果。這些元件通常會在用戶完成操作後顯示,並可以是即時消息、成功提示、錯誤警告或系統公告。設計上需要簡潔且不打擾用戶正常操作。


