UX 指南
這些指南涵蓋了建立能與 VS Code 原生介面及模式無縫整合的擴充功能的最佳實踐。在本指南中，您可以找到：
- VS Code 整體 UI 架構與元素的概要
- 針對擴充功能所貢獻 UI 的建議與範例
- 相關指南與範例的連結
在深入細節之前，了解 VS Code 的各個架構 UI 部分如何組合在一起，以及您的擴充功能可以在何處、以何種方式進行貢獻，這點非常重要。
容器
VS Code 介面大致可分為兩個主要概念：容器 (containers) 與 項目 (items)。一般來說，容器可以被視為 VS Code 介面中渲染一個或多個項目的較大區塊。
活動列
活動列 (Activity Bar) 是 VS Code 中的核心導覽介面。擴充功能可以貢獻項目到活動列，這些項目作為 檢視容器 (View Containers)，用於在主要側邊欄中渲染 檢視 (Views)。
主要側邊欄 (Primary Sidebar)
主要側邊欄 用於渲染一個或多個 檢視。活動列與主要側邊欄緊密結合。點擊貢獻的活動列項目（即檢視容器）會開啟主要側邊欄，其中會渲染與該檢視容器相關聯的一個或多個檢視。一個具體的例子是「檔案總管」。點擊檔案總管項目將開啟主要側邊欄，顯示資料夾、時間軸和目錄檢視。
次要側邊欄 (Secondary Sidebar)
次要側邊欄 同樣作為渲染檢視容器與檢視的介面。使用者可以將終端機或問題檢視等項目拖曳到次要側邊欄，以自訂其版面配置。
編輯器
編輯器區域包含一個或多個編輯器群組。擴充功能可以貢獻 自訂編輯器 (Custom Editors) 或 網頁檢視 (Webviews) 以在編輯器區域開啟。它們也可以貢獻 編輯器動作 (Editor Actions)，在編輯器工具列中顯示額外的圖示按鈕。
面板
面板 (Panel) 是另一個用於顯示檢視容器的區域。預設情況下，像終端機、問題和輸出等檢視可以在面板中一次以單一索引標籤檢視。使用者也可以像在編輯器中一樣，將檢視拖曳到分割版面中。此外，擴充功能可以選擇將檢視容器特別加入面板，而非活動列或主要側邊欄。
狀態列
狀態列 (Status Bar) 提供關於工作區與目前作用中檔案的關聯資訊。它會渲染兩組 狀態列項目。
項目
擴充功能可以將項目新增至上述的各種容器中。
檢視 (View)
檢視 可以透過 樹狀檢視 (Tree View)、歡迎檢視 (Welcome View) 或 網頁檢視 (Webview View) 的形式貢獻，並且可以被拖曳到介面的其他區域。
檢視工具列
擴充功能可以公開檢視專屬的 動作，這些動作會顯示為檢視工具列上的按鈕。
側邊欄工具列
針對整個檢視容器的動作也可以顯示在 側邊欄工具列 中。
編輯器工具列
擴充功能可以貢獻針對編輯器的 編輯器動作，直接出現在編輯器工具列中。
面板工具列
面板工具列 可以公開針對目前選定檢視的選項。例如，終端機檢視提供了新增終端機、分割檢視版面等動作。切換到問題檢視則會顯示另一組不同的動作。
狀態列項目
在左側，狀態列項目 針對整個工作區。在右側，項目則針對作用中的檔案。
通用 UI 元素
命令面板
擴充功能可以貢獻出現在 命令面板 (Command Palette) 中的命令，以快速執行某些功能。
快速選取 (Quick Pick)
快速選取 以多種方式擷取使用者的輸入。它們可以要求單選、多選，甚至是輸入自由格式的文字。
通知
通知 用於向使用者傳達資訊、警告與錯誤訊息。它們也可以用來顯示進度。
Webview
網頁檢視 可用於顯示自訂內容與功能，適用於超出 VS Code「原生」API 範圍的使用場景。
快顯功能表
與命令面板的一致性位置相反，內容選單 (Context Menus) 讓使用者能夠在特定位置執行動作或進行設定。
逐步教學
引導教學 (Walkthroughs) 為使用者提供了一致的體驗，透過具備豐富內容的多步驟檢查清單來引導使用者熟悉擴充功能。
設定
設定 讓使用者能夠配置與該擴充功能相關的選項。
