Share via


選取文字和影像

本文介紹選擇和操作文字、圖像和控制項,並提供在應用程式中使用這些機制時應考慮的使用者體驗指導方針。

重要 APIsWindows.UI.Xaml.InputWindows.UI.Input

可行與禁止事項

  • 在實現自己的移駐夾 UI 時使用字型字符。 移駐夾是系統範圍內提供的兩個 Segoe UI 字體的組合。 使用字型資源可以簡化不同 dpi 的轉譯問題,而且適用於各種 UI 縮放比例。 在實現自己的移駐夾時,應共用以下的UI 特性:

    • 圓形的形狀
    • 在任何背景中都可見
    • 大小一致
  • 在可選取的內容周圍提供一個邊距以容納移駐夾 UI。 如果您的應用程式在無法平移/捲動的區域中啟用文字選取,請在文字區域的左側和右側允許 1/2 的移駐夾邊界,並在文字區域的頂部和底部兩側允許1 個移駐夾高度 (如下圖所示)。 這可確保向使用者公開整個移駐夾 UI,並盡可能減少與其他邊緣型 UI 的意外互動。

    text selection gripper margins

  • 在互動期間隱藏移駐夾 UI。 消除互動過程中移駐夾的遮蔽。 當移駐夾未被手指完全遮住或有多個文字選取移駐夾時,這非常有用。 這可消除在顯示子視窗時的視覺假象。

  • 不允許選擇控制項、標籤、圖像、專屬內容等 UI 元素。 通常,Windows 應用程式僅允許在特定控制項內進行選取。 按鈕、標籤和標誌之類的控制項不能選取。 評估選取是否對您的應用程式造成問題,如果是,請找出應禁止選取的 UI 區域。

其他用法指導方針

文字選取和操作對觸控互動帶來的使用者體驗挑戰有特別影響。 滑鼠、畫筆/手寫筆和鍵盤輸入是高度細微化的:滑鼠按一下或畫筆/手寫筆接觸通常會對應到單一像素,某個鍵已按下或未按下。 觸控輸入並未細微化;要將指尖的整個表面對應到螢幕上的特定 x-y 位置,並精確放置文字插入點是有困難的。

考慮和建議

使用透過 Windows 語言架構公開的內建控制項來建置應用程式,以提供完整的平台使用者互動體驗,包括選取和操作行為。 您會發現對於大多數 Windows 應用程式來說,內建控制項的互動功能就已經足夠。

使用標準 Windows 文字控制項時,無法自訂本主題中所述的選取行為和視覺效果。

文字選取

如果您的應用程式需要支援文字選取的自訂 UI,建議您遵循此處描述的 Windows 選取行為。

可編輯和不可編輯的內容

有了觸控,選取互動主要透過手勢來執行,例如:點選以設定插入游標或選取單字,以及滑動以修改選取範圍。 與其他 Windows 觸控互動一樣,計時互動僅限於用來顯示訊息 UI 的按住手勢。 如需詳細資訊,請參閱視覺回饋的指導方針

Windows 可辨識選取互動的兩個可能狀態,即可編輯狀態和不可編輯狀態,並相應調整選取 UI、回饋以及功能。

可編輯的內容

在點選單字的左半部範圍會讓游標緊鄰該單字的左側,而點選右半部範圍則讓游標緊鄰該單字的右側將遊標置於該單字的緊鄰右側。

下圖示範如何透過點選單字的開頭或結尾附近,來放置初始插入游標和移駐夾。

tap (or press and hold) left side of a word to place a caret and gripper at the beginning of that word. tap (or press and hold) the right side of a word to place a caret and gripper at the end of that word.

下圖示範如何藉由拖曳移駐夾來調整選取範圍。

drag the gripper in either direction to adjust selection (the first gripper remains anchored and a second gripper is displayed). drag either gripper to make subsequent adjustments.

下圖示範如何透過在選取範圍內或在移駐夾上點選 (也可以使用按住) 來叫用操作功能表。

tap (or press and hold) within the selection or on a gripper to invoke the context menu.

注意在單字拼字錯誤的情況下,這些互動作用會有所不同。 點選標示為拼字錯誤的單字,將會醒目顯示整個單字並叫用建議的拼字操作功能表。

 

不可編輯的內容

下圖示範如何透過在單字內點選來選取單字 (初始選取範圍中不包含空格)。

tap within a word to select it (no spaces are included in the initial selection).

按照與可編輯文字相同的程序來調整選取範圍並顯示操作功能表。

物件操作

在 Windows 應用程式中實作自訂物件操作時,盡可能使用相同 (或類似) 的移駐夾資源做為文字選取。 這有助於在平台內提供一致的互動體驗。

例如,移駐夾還可以用於支援調整大小和裁剪的圖像處理應用程式,或用於提供可調整進度列的媒體播放器應用程式,如下圖所示。

media player with progress gripper

具有可調整進度列的媒體播放器。

image with crop grippers

具有裁剪移駐夾的影像編輯器。

開發人員適用

範例

封存範例