適用於 Visual Studio 的通用控制項模式

一般控制項

通用控件構成 Visual Studio 中大部分的使用者介面。 Visual Studio 介面中使用的最常見控件應該遵循 Windows 桌面互動指導方針。 本主題專屬於Visual Studio，並涵蓋增強這些Windows指導方針的特殊情況或詳細數據。

本主題中的常見控件

• 滾動條

• 輸入欄位

• 下拉式方塊和下拉式清單

• 核取方塊

• 選項按鈕

• 群組框架

• 文字控制項

• 按鈕和超連結

• 樹視圖

視覺化風格

樣式控件時要考慮的第一件事是控件是否會用於主題 UI。 標準UI中的控件是非主題UI，必須遵循 一般的Windows桌面樣式，這表示它們不會重新範本化，而且應該出現在預設控件外觀中。

• 標準 （公用程式） 對話框： 未設定主題。 不要重新範本。 使用基本控件樣式預設值。

• 工具視窗、文件編輯器、設計介面和主題對話框： 使用色彩服務的特殊主題外觀。

捲軸

滾動條應該遵循 Windows 滾動 條的常見互動模式，除非它們會隨著內容資訊而增強，就像在程式碼編輯器中一樣。

輸入欄位

如需一般互動行為，請遵循 文本框的 Windows 桌面指導方針。

視覺化風格

• 輸入欄位不應該在公用程式對話框中設定樣式。 使用控件的基本樣式內建。

• 主題輸入欄位只能用於主題對話框和工具視窗中。

特製化互動

• 只讀欄位會有灰色（已停用）背景，但預設 （使用中） 前景。

• 必要欄位應具有 <[必要> ] 做為水位線。 除了罕見的情況，您不應該變更背景的色彩。

• 錯誤驗證：請參閱 Visual Studio的通知和進度

• 輸入欄位的大小應該要符合內容，而不是符合顯示內容的視窗寬度，也不應任意比對長欄位的長度，例如路徑。 長度可能表示使用者對欄位中允許多少個字元的限制。

  
  輸入欄位長度不正確：名稱不太可能這麼長。

  
  正確的輸入欄位長度：輸入字位是預期內容的合理寬度。

下拉式方塊和下拉式清單

針對一般互動行為，請遵循下拉式清單和下拉式方塊的 Windows 桌面指導方針。

視覺化風格

• 在公用程式對話框中，不要重新建立控件的範本。 使用控件的基本樣式內建。

• 在主題 UI 中，下拉式方塊和下拉式清單會遵循控件的標準主題。

版面配置

下拉式方塊和下拉式清單應重設大小以符合內容，而不是符合所顯示視窗的寬度，或任意比對長字段的長度，例如路徑。

不正確：下拉式清單寬度太長，無法顯示內容。

正確：下拉式清單的大小是允許轉譯成長，但不會不必要的長。

核取方塊

如需一般互動行為，請遵循 複選框的 Windows 桌面指導方針。

視覺化風格

• 在公用程式對話框中，不要重新建立控件的範本。 使用控件的基本樣式內建。

• 在主題 UI 中，複選框會遵循控件的標準主題。

特製化互動

• 與複選框的互動絕不能快顯對話框或巡覽至另一個區域。

• 將複選框與第一行文字的基準對齊。

  
  不正確：複選框會置中於文字上。

  
  正確：複選框與文字的第一行對齊。

選項按鈕

針對一般互動行為，請遵循 單選按鈕的 Windows 桌面指導方針。

視覺化風格

在公用程式對話框中，請勿設定單選按鈕的樣式。 使用控件的基本樣式內建。

特製化互動

除非您需要在緊密配置中維持群組區別，否則不需要使用群組框架來括住無線電選擇。

群組框架

針對一般互動行為，請遵循 群組框架的 Windows 桌面指導方針。

視覺化風格

在公用程式對話框中，不要設定群組框架的樣式。 使用控件的基本樣式內建。

版面配置

• 除非您需要在緊密配置中維持群組區別，否則不需要使用群組框架來括住無線電選擇。

• 一律不要針對單一控件使用群組框架。

• 使用水平規則而非群組框架容器有時是可以接受的。

文字控制項

靜態文字欄位

靜態文字欄位會顯示唯讀資訊，用戶無法選取。 請避免將它用於使用者可能想要複製到剪貼簿的任何文字。 不過，只讀靜態文字可以變更以反映狀態的變更。 在下列範例中，資訊群組底下的 [輸出名稱] 靜態文字會變更，以反映對上面 [根命名空間] 文本框所做的任何變更。

有兩種方式可以顯示靜態文字資訊。

當沒有任何群組衝突時，靜態文字可以在對話框中單獨使用，而沒有任何內含專案。 決定方塊的額外行是否真的必要。 例如，顯示群組行所建立區段下的目錄路徑，如下所示：

文字控制件中的靜態文字資訊

在存在其他群組區域並包含資訊的對話框中，有助於可讀性，以及當區段可以隱藏或顯示時（如在 [屬性視窗 描述] 窗格中），或您想要與類似的 UI 一致時，請將靜態文字放在方塊中。 此群組方塊應該是單一規則，並以 色彩標示 ButtonShadow：

屬性視窗 中的靜態文字

唯讀文字框

這可讓用戶選取欄位內的文字，但無法加以編輯。 這些文本框會以一般 3D 刻線 ButtonShadow 加上填滿的框線。

當使用者改變相關聯的控件時，文本框可能會變成作用中（可編輯），例如核取/取消核取複選框或選取/取消選取單選按鈕。 例如，在如下所示的 [工具選項] 頁面中，未核取 [使用預設] 複選框時，[首頁] 文本框就會變成作用中。 >

唯讀文字框，顯示非使用中和作用中狀態

在對話框中使用文字

對話框中文字的主要指導方針：

• 未指定對話框中文本框、清單框和框架的標籤會以動詞開頭、只有第一個單字的初始大寫，並以冒號結尾。

  主題對話框中的文字控件會遵循 Windows 桌面 UX 指導方針 ，而且不會採用結束標點符號，但說明連結中的問號除外。

• 複選框和單選按鈕的標籤以動詞開頭，只有第一個單字的初始大寫，而且沒有結束標點符號。

• 按鈕、功能表、功能表項和索引標籤的標籤在每個單字上都有初始大寫（標題大小寫）。

• 標籤語應該與其他對話框中的類似標籤一致。

• 可能的話，請讓寫入器/編輯器在前往開發人員進行實作之前，先撰寫或核准文字。

• 除了索引標籤已足夠的特殊情況下，所有控件都應該有標籤。 適當時使用協助程序文字。

協助程序文字

包含在對話中，以協助使用者了解對話的目的，或指出要採取的動作。 只有在需要時，才應該使用協助程式文字，以避免雜亂的簡單對話。 協助程式文字的兩種變化為對話框和浮浮浮浮水印。

請遵循協助程式文字的常見位置，並選擇性地介紹新的區域。 協助程式文字的常見案例如下：

• 協助程式對話框中的文字，以提供有關如何與複雜對話互動的其他方向。

• 空白工具視窗或對話框中的浮浮浮浮水印文字，說明為何看不到任何內容。

• 描述窗格，例如 屬性視窗 底部。

• 空白編輯器中的浮浮水印文字，說明使用者應該採取哪些動作來開始使用。

對話方塊 Helper 文字

用戶體驗設計工具可能有助於判斷協助程式文字是否適當。 設計工具可以定義協助程式文字出現的位置，以及其一般內容。 用戶協助可以撰寫/編輯實際文字。

浮浮水印

對話受益於稍微不同的浮浮水印指導方針。 因為對話框可能會忙於許多UI元素（卷標、提示文字、按鈕和其他含有文字的容器控件），特別是當這些元素以黑色顯示時，水印在深灰色中表現得更好（VSColor： ButtonShadow）。 一般而言，浮浮浮水印會出現在控件內，例如具有白色背景的清單框（VSColor： Window）。

• 文字會以深灰色顯示（VSColor： ButtonShadow）。 不過，如果浮浮浮水印出現在中等灰色或其他色彩 （VSColor： ButtonFace： ） 背景上，且擔心其可讀性，請使用黑色文字 （VSColor： ： WindowText）。

• 浮浮水印可以置中或向左排清。 在制定對齊決策時套用標準設計規則。 無法在背景上選取浮

浮浮水印文字範例

內容特定 （動態） 文字

動態文字可以在對話框或無模式UI中使用兩種方式之一：做為動態標籤或動態內容。

• 動態標籤：動態文字的常見用法是在描述性面板中，提供所選項目的詳細資訊，例如在對話框中，其中包含顯示在右側方格中之元素的元素和屬性清單。 屬性方格的標籤可能是動態的，如此一來，當左邊選取專案時，右邊的方格會顯示該特定項目的資訊。

• 動態文字：在您需要以這種方式顯示特定資訊而非一般信息的實例中很有用，但應該小心不要過度使用。

如果您希望用戶能夠複製資訊，動態文字應該位於只讀文字欄位中。

按鈕和超連結

按鈕和連結控件（超連結）應遵循 超連結 的基本 Windows 桌面指引，以取得使用方式、文字、重設大小和間距。

在按鈕和鏈接之間選擇

傳統上，按鈕已用於動作，且超連結已保留供流覽使用。 所有情況下都可以使用按鈕，但在 Visual Studio 中已展開連結的角色，讓按鈕和連結在某些情況下更容易互換。

使用命令按鈕的時機：

• 主要命令

• 顯示用來收集輸入或做出選擇的視窗，即使它們是次要命令

• 破壞性或不可復原的動作

• 精靈和頁面流程中的承諾用量按鈕

請避免工具視窗中的命令按鈕，或是標籤需要兩個以上的字。 連結可以有較長的標籤。

使用連結的時機：

• 流覽至另一個視窗、檔或網頁

• 需要較長卷標或簡短句子來描述動作意圖的情況

• 按鈕會壓垮 UI 的緊密空間，前提是動作不是破壞性或不可復原的

• 在有許多命令的情況下，取消強調次要命令

範例

在狀態消息之後，InfoBar 中使用的命令連結

CodeLens 快顯視窗中所使用的連結

用於次要命令的連結，其中按鈕會吸引太多注意力

一般按鈕

Text

遵循UI文字和術語中的撰寫指導方針。

視覺化風格

標準 （未解說）

Visual Studio 中的大部分按鈕會顯示在公用程式對話框中，不應設定樣式。 它們應該會反映操作系統所指定按鈕的標準外觀。

主題

在某些情況下，按鈕可用於樣式化UI中，而且這些按鈕必須適當地設定樣式。 如需主題控件的資訊，請參閱對話方塊。

特殊按鈕

流覽。。。按鈕

[Browse...] 按鈕用於方格、對話框和工具視窗和其他無模式 UI 元素。 他們會顯示可協助使用者將值填入控件的選擇器。 此按鈕有兩種變化，長而短。

長 [流覽...] 按鈕

僅省略號簡短 [...] 按鈕

使用僅省略號簡短按鈕的時機：

• 如果對話框中有多個長 [流覽...] 按鈕，就像允許流覽數個字段時一樣。 針對每個 使用簡短 [...] 按鈕，以避免這種情況所建立的混淆存取密鑰 （&Browse and B&rowse 在同一個對話框中）。

• 在緊密的對話框中，或沒有合理的位置放置長按鈕時。

• 如果按鈕會出現在方格控件中。

使用按鈕的指導方針：

• 請勿使用存取金鑰。 若要使用鍵盤進行存取，用戶必須從相鄰的控件中定位。 確定定位順序會讓任何流覽按鈕緊接在欄位之後，即會填滿。 請勿在第一個句號下方使用底線。

• 將 Microsoft Active Accessibility （MSAA） Name 屬性設定為 Browse... （包括省略號），讓螢幕助讀程式將它讀為 “Browse”，而不是 “dot-dot-dot” 或 “period-period-period”。對於 Managed 控制件，這表示設定 AccessibleName 屬性。

• 除了瀏覽動作之外，永遠不要使用省略號 [...] 按鈕。 例如，如果您需要 [ 新增...] 按鈕，但沒有足夠的空間供文字使用，則必須重新設計對話框。

重設大小和間距

調整 [瀏覽...] 按鈕的大小

調整 [瀏覽...] 按鈕的間距

圖形按鈕

某些按鈕應該一律使用圖形化影像，且絕不包含文字來節省空間，並避免當地語系化問題。 這些通常用於欄位選擇器和其他可排序列表。

注意

用戶必須按索引標籤到這些按鈕（沒有存取鍵），因此請依合理順序放置這些按鈕。 將 name 按鈕的 屬性對應至它所接受的動作，讓螢幕助讀程序正確地解譯按鈕動作。

函式	Button
加
移除
全部新增
全部移除
上移
下移
刪除

重設大小和間距

圖形按鈕的大小調整與 [流覽...] 按鈕的簡短版本相同（26x23 像素）：

按鈕上圖形化影像的外觀，且不顯示透明色彩

超連結

超連結非常適合以瀏覽為基礎的動作，例如開啟 [說明] 主題、強制回應對話框或精靈。 如果超連結用於命令，它應該一律會顯示UI的可見且明顯的變更。 一般而言，認可動作的動作（例如[儲存]、[取消] 和 [刪除] 會使用按鈕更能傳達。

撰寫樣式

遵循使用者介面文字的 Windows 桌面指引。 請勿使用「深入瞭解」、「告訴我更多」或「取得協助」片語。 相反地，片語說明連結文字，以說明內容所回答的主要問題而言。 例如，「如何? 將伺服器新增至伺服器總管？」

視覺化風格

• 超鏈接應該一律使用 VSColor 服務。 如果超連結未正確設定樣式，當使用中或流覽後顯示不同色彩時，它會閃爍紅色。

• 除非連結是完整句子中的句子片段，例如浮浮水印，否則請勿在控件休息狀態包含底線。

• 暫留時不應顯示底線。 相反地，對使用者的意見反應是連結作用中的稍微色彩變更和適當的連結游標。

樹狀檢視

樹視圖提供將複雜清單組織成父子群組的方式。 用戶可以展開或折迭父群組，以顯示或隱藏基礎子專案。 您可以選取樹檢視中的每個專案，以提供進一步的動作。

樹視圖可視化樣式

展開器

樹視圖控件應符合 Windows 和 Visual Studio 所使用的展開器設計。 每個節點都會使用展開器控件來顯示或隱藏基礎專案。 使用展開器控件可為在 Windows 和 Visual Studio 中遇到不同樹檢視的使用者提供一致性。

正確：使用展開器控件的適當樹視圖節點樣式

不正確：樹視圖節點的樣式不正確

選取項目

在樹視圖內選取節點時，反白顯示應該展開至樹視圖控件的完整寬度。 這可協助使用者清楚識別他們選取的專案。 選取色彩應該反映目前的 Visual Studio 主題。

正確：醒目提示選取的節點符合樹視圖控件的整個寬度。

不正確：選取節點的醒目提示不符合樹視圖控件的整個寬度。

圖示

只有在圖示有助於以可視化方式識別專案之間的差異時，才會在樹視圖控件中使用。 一般而言，圖示應該只用於圖示攜帶資訊的異質性清單中，以區分元素的類型。 在使用圖示的同質清單中，通常會被視為雜訊，而且應該避免。 在此情況下，群組圖示 （parent） 可以傳達其中項目的類型。 此規則的例外狀況是，如果圖示是動態的，並且用來指出狀態。

捲軸

如果內容符合樹視圖控件，則滾動條應該一律隱藏。 滾動條可以在可捲動的視窗中隱藏或半透明，而且當包含樹視圖的視窗有焦點，或停留在樹視圖本身時，就會顯示。

垂直和水準滾動條都會顯示，因為內容已超過樹視圖控件的限制。

樹視圖互動

操作功能表

樹檢視節點可以在操作功能表中顯示子功能表選項。 一般而言，當使用者以滑鼠右鍵按下專案或按下 Windows 鍵盤上的功能表鍵並選取專案時，就會發生這種情況。 請務必讓節點取得焦點並加以選取。 這有助於用戶識別子功能表所屬的專案。

產生操作功能表的專案會取得焦點，以通知使用者已選取的專案。

鍵盤

樹視圖應該能夠使用鍵盤來選取專案和展開/折疊節點。 這可確保導覽符合我們的輔助功能需求。

樹視圖控件

Visual Studio 樹狀目錄控制項應遵循常見的鍵盤流覽：

• 向上箭號： 透過向上移動樹狀結構來選取專案

• 向下箭號： 藉由向下移動樹狀結構來選取專案

• 向右箭號： 展開樹狀結構中的節點

• 向左箭號： 折迭樹狀結構中的節點

• 輸入機碼： 起始、載入、執行選取的專案

Trid （樹檢視和網格線檢視）

嘗試的控件是包含方格內樹視圖的複雜控件。 展開、折疊和流覽樹狀結構應該遵守與樹視圖相同的鍵盤命令，並新增下列內容：

• 向右箭號： 展開節點。 展開節點之後，它應該會繼續巡覽至右邊最接近的數據行。 瀏覽應該會在數據列結尾停止。

• 索引標籤： 流覽至右邊最近的儲存格。 在數據列結尾，瀏覽會繼續下一個數據列。

• Shift + Tab： 瀏覽至左側最接近的儲存格。 在數據列的開頭，瀏覽會繼續到上一個數據列中最右邊的單元格。

Visual Studio 中嘗試的控件