搜尋和在頁面中尋找Search and find-in-page

搜尋是使用者在您的 app 中尋找內容的主要方法之一。Search is one of the top ways users can find content in your app. 本文中的指導方針涵蓋搜尋體驗、搜尋範圍、實作,以及在內容中搜尋的範例等元素。The guidance in this article covers elements of the search experience, search scopes, implementation, and examples of search in context.

重要 API : AutoSuggestBox 類別Important APIs : AutoSuggestBox class

搜尋體驗的元素Elements of the search experience

輸入。Input. 文字是最常見的搜尋輸入模式,也是本指導方針的重點。Text is the most common mode of search input and is the focus of this guidance. 其他常見的輸入模式包括語音和相機,但它們通常需要與裝置硬體聯繫的能力,且可能要求 app 內額外的控制項或自訂 UI。Other common input modes include voice and camera, but these typically require the ability to interface with device hardware and may require additional controls or custom UI within the app.

零輸入。Zero input. 當使用者啟用輸入欄位後,在他們輸入文字前,您可以顯示所謂的「零輸入畫布」。Once the user has activated the input field, but before the user has entered text, you can display what's called a "zero input canvas." 零輸入畫布會經常出現在 app 畫布中,當使用者開始輸入查詢時,就會由自動建議取代這個內容。The zero input canvas will commonly appear in the app canvas, so that auto-suggest replaces this content when the user begins to input their query. 最近的搜尋歷程記錄、熱門搜尋、與內容相關的搜尋建議、提示和秘訣都是當作零輸入狀態內容的絕佳選項。Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for the zero input state.

Cortana 零輸入畫布的範例

查詢公式/自動建議。Query formulation/auto-suggest. 使用者一開始輸入,查詢公式就會取代零輸入內容。Query formulation replaces zero input content as soon as the user begins to enter input. 在使用者輸入查詢字串時,系統會提供他們持續更新的查詢建議或去除混淆選項,以協助他們加速輸入程序,並編寫有效的查詢公式。As the user enters a query string, they are provided with a continuously updated set of query suggestions or disambiguation options to help them expedite the input process and formulate an effective query. 查詢建議的行為建置在 自動建議控制項 中,而且也是在搜尋中顯示圖示 (像是麥克風或確認圖示) 的方法。This behavior of query suggestions is built into the auto-suggest control, and is also a way to show the icon inside the search (like a microphone or a commit icon). 除此之外的行為都屬於 app。Any behavior outside of this falls to the app.

查詢公式/自動建議的範例

結果集。Results set. 搜尋結果通常顯示在搜尋輸入欄位的正下方。Search results commonly appear directly under the search input field. 雖然這不是必要條件,但是輸入和結果並列可維持內容相關,並能讓使用者立即存取以編輯先前的查詢或輸入新查詢。While this isn't a requirement, the juxtaposition of input and results maintains context and provides the user with immediate access to edit the previous query or enter a new query. 這項關聯可透過以提示文字取代查詢,來進一步傳達。This connection can be further communicated by replacing the hint text with the query that created the results set.

可以有效率地編輯先前的查詢和輸入新查詢的方法,是在搜尋欄位重新啟動時反白先前的查詢。One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. 如此一來,任何按鍵輸入都會取代先前的字串,但字串會保留讓使用者可以移動游標位置來編輯,或在先前的字串後附加。This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string.

結果集可以透過任何能有效傳達內容的方式來顯示。The results set can appear in any form that best communicates the content. 清單檢視提供良好的彈性,非常適合大部分的搜尋。A list view provides a good deal of flexibility and is well-suited to most searches. 格線檢視適用於影像或其他媒體,而地圖可以用來傳達空間分布。A grid view works well for images or other media, and a map can be used to communicate spatial distribution.

搜尋範圍Search scopes

搜尋是常見的功能,且使用者會在介面和許多應用程式中遇到搜尋 UI。Search is a common feature, and users will encounter search UI in the shell and within many apps. 雖然搜尋進入點通常以類似的方式視覺化,他們提供搜尋結果的存取範圍卻從廣泛 (網頁或裝置搜尋) 到狹隘 (使用者的連絡人清單) 都有。Although search entry points tend to be similarly visualized, they can provide access to results that range from broad (web or device searches) to narrow (a user's contact list). 搜尋進入點應該與搜尋的內容並列。The search entry point should be juxtaposed against the content being searched.

部分常見的搜尋範圍包括:Some common search scopes include:

全域關聯式/精簡Global and contextual/refine. 跨多個雲端和本機內容來源搜尋。Search across multiple sources of cloud and local content. 包含 URL、文件、媒體、動作、app 等不同結果。Varied results include URLs, documents, media, actions, apps, and more.

Web。Web. 搜尋網路索引。Search a web index. 結果包含頁面、實體和解答。Results include pages, entities, and answers.

我的專區。My stuff. 跨裝置、雲端、社交關係圖等搜尋。Search across device(s), cloud, social graphs, and more. 結果會有所不同,但會受限於使用者帳戶的連接。Results are varied, but are constrained by the connection to user account(s).

使用提示文字傳達搜尋範圍。Use hint text to communicate search scope. 範例包括:Examples include:

「搜尋 Windows 和網際網路」"Search Windows and the Web"

「搜尋連絡人清單」"Search contacts list"

「收尋信箱」"Search mailbox"

「搜尋設定」"Search settings"

「搜尋地點」"Search for a place"

搜尋提示文字的範例

藉由有效傳達搜尋輸入點的範圍,您可以確保執行的搜尋功能會符合使用者的期望,並減少感到挫折的可能。By effectively communicating the scope of a search input point, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing and reduce the possibility of frustration.

實作Implementation

對於大多數應用程式,最好的做法是以文字輸入欄位當作搜尋進入點,它會提供顯著的視覺記號。For most apps, it's best to have a text input field as the search entry point, which provides a prominent visual footprint. 此外,提示文字也有助於探索性和傳達搜尋範圍。In addition, hint text helps with discoverability and communicating the search scope. 當搜尋為較次要的動作,或當空間有限時,搜尋圖示可以當作沒有伴隨輸入欄位的進入點。When search is a more secondary action, or when space is constrained, the search icon can serve as an entry point without the accompanying input field. 以圖示來視覺化時,請確定有足夠空間給強制回應搜尋方塊,如下面範例所示。When visualized as an icon, be sure that there's room for a modal search box, as seen in the below examples.

按一下搜尋圖示之前:Before clicking search icon:

搜尋圖示和已折疊之搜尋方塊的範例

按一下搜尋圖示之後:After clicking search icon:

在瀏覽功能表中搜尋的範例

搜尋一律使用指向右方的放大鏡字符當作進入點。Search always uses a right-pointing magnifying glass glyph for the entry point. 使用的字符是 Segoe UI Symbol,十六進位字元代碼是 0xE0094,且通常為 15 epx 字型大小。The glyph to use is Segoe UI Symbol, hex character code 0xE0094, and usually at 15 epx font size.

搜尋進入點有數種不同區域可放置,且放置的區域會傳達搜尋範圍和內容。The search entry point can be placed in a number of different areas, and its placement communicates both search scope and context. 跨應用程式經驗或從應用程式外部收集結果的搜尋,通常位於最上層的應用程式控制項內,例如全域命令列或瀏覽。Searches that gather results from across an experience or external to the app are typically located within top-level app chrome, such as global command bars or navigation.

隨著搜尋範圍變得狹隘或與內容相關,放置的位置通常會與搜尋的內容更直接相關,例如在畫布上、當作清單標題,或在內容相關命令列中。As the search scope becomes more narrow or contextual, the placement will typically be more directly associated with the content to be searched, such as on a canvas, as a list header, or within contextual command bars. 不論如何,搜尋的輸入與結果或已篩選內容間的關聯應該在視覺上清楚傳達。In all cases, the connection between search input and results or filtered content should be visually clear.

在可捲動清單的案例中,保持搜尋輸入為可見會非常有幫助。In the case of scrollable lists, it's helpful to always have search input be visible. 建議您可以讓搜尋輸入固定位置,內容則在它後方捲動。We recommend making the search input sticky and have content scroll behind it.

對於會根據使用者輸入即時篩選清單的內容相關/精簡搜尋,零輸入和查詢公式功能是選擇性的。Zero input and query formulation functionality is optional for contextual/refine searches in which the list will be filtered in real-time by user input. 例外狀況包括能使用搜尋格式化建議的查詢,例如收件匣的篩選選項 (收件者:<輸入字串>、寄件者:<輸入字串>、主旨:<輸入字串> 等等)。Exceptions include cases where query formatting suggestions may be available, such as inbox filtering options (to:<input string>, from: <input string>, subject: <input string>, and so on).

範例Example

本節中的範例說明放在內容中的搜尋。The examples in this section show search placed in context.

在 Windows 工具列當作動作的搜尋:Search as an action in the Windows tool bar:

在 Windows 工具列當作動作的搜尋之範例

在 app 畫布上當作輸入的搜尋:Search as an input on the app canvas:

在 app 畫布上搜尋的範例

在地圖應用程式的瀏覽窗格中搜尋:Search in a navigation pane in the Maps app:

在瀏覽功能表中搜尋的範例

內嵌文字搜尋最好留在很少存取的搜尋,或與內容高度相關的案例使用:Inline search is best reserved for cases where search is infrequently accessed or is highly contextual:

內嵌文字搜尋的範例

在頁面中尋找的指導方針Guidelines for find-in-page

「在頁面中尋找」可以讓使用者在目前的文字主體中尋找文字相符項目。Find-in-page enables users to find text matches in the current body of text. 文件檢視器、閱讀程式和瀏覽器是提供「在頁面中尋找」的最典型應用程式。Document viewers, readers, and browsers are the most typical apps that provide find-in-page.

可行與禁止事項Do's and don'ts

  • 在您的應用程式中放置具有「在頁面中尋找」功能的命令列,讓使用者可以搜尋頁面上的文字。Place a command bar in your app with find-in-page functionality to let the user search for on-page text. 如需位置詳細資料,請參閱「範例」一節。For placement details, see the Examples section.

    • 可提供「在頁面中尋找」的應用程式在命令列中應含有所有必要的控制項。Apps that provide find-in-page should have all necessary controls in a command bar.

    • 如果您的應用程式含有許多超越「在頁面中尋找」的功能,您可以在最上層的命令列中提供 [尋找] 按鈕,以做為另一個含有所有「在頁面中尋找」控制項之命令列的進入點。If your app includes a lot of functionality beyond find-in-page, you can provide a Find button in the top-level command bar as an entry point to another command bar that contains all of your find-in-page controls.

    • 當使用者在與觸控式鍵盤互動時,「在頁面中尋找」命令列應維持可見。The find-in-page command bar should remain visible when the user is interacting with the touch keyboard. 當使用者點選輸入方塊時,觸控式鍵盤就會顯示。The touch keyboard appears when a user taps the input box. [在頁面中尋找] 命令列應該上移,才不會被觸控式鍵盤遮掩。The find-in-page command bar should move up, so it's not obscured by the touch keyboard.

    • 在使用者與檢視互動時,「在頁面中尋找」應維持可用。Find-in-page should remain available while the user interacts with the view. 使用「在頁面中尋找」時,使用者必須與檢視中文字互動。Users need to interact with the in-view text while using find-in-page. 例如,使用者可能想放大或縮小文件,或是移動瀏覽檢視以讀取文字。For example, users may want to zoom in or out of a document or pan the view to read the text. 一旦使用者開始使用「在頁面中尋找」時,命令列應維持可用,並提供一個結束「在頁面中尋找」的 [關閉] 按鈕。Once the user starts using find-in-page, the command bar should remain available with a Close button to exit find-in-page.

    • 啟用鍵盤快速鍵 (CTRL+F)。Enable the keyboard shortcut (CTRL+F). 實作鍵盤快速鍵 CTRL+F 可以讓使用者快速叫用「在頁面中尋找」命令列。Implement the keyboard shortcut CTRL+F to enable the user to invoke the find-in-page command bar quickly.

    • 包含「在頁面中尋找」功能的基礎。Include the basics of find-in-page functionality. 下列是實作「在頁面中尋找」所需的 UI 元素:These are the UI elements that you need in order to implement find-in-page:

      • 輸入方塊Input box
      • [上一頁] 和 [下一頁] 按鈕Previous and Next buttons
      • 相符項目計數A match count
      • 關閉 (桌面專用)Close (desktop-only)
    • 檢視應強調顯示相符項目,並且要能捲動以顯示畫面上的下一個相符項目。The view should highlight matches and scroll to show the next match on screen. 使用者可以使用 [上一頁][下一頁] 按鈕和捲軸在文件中快速移動,或是使用觸控直接操作。Users can move quickly through the document by using the Previous and Next buttons and by using scroll bars or direct manipulation with touch.

    • 「尋找和取代」功能應和基本的「在頁面中尋找」功能相輔相成。Find-and-replace functionality should work alongside the basic find-in-page functionality. 對於擁有「尋找和取代」功能的應用程式,請確認「在頁面中尋找」不會影響「尋找和取代」功能。For apps that have find-and-replace, ensure that find-in-page doesn't interfere with find-and-replace functionality.

  • 包含相符項目計數器,讓使用者知道頁面上有多少文字相符項目。Include a match counter to indicate to the user the number of text matches there are on the page.

  • 啟用鍵盤快速鍵 (CTRL+F)。Enable the keyboard shortcut (CTRL+F).

範例Examples

可供輕鬆存取「在頁面中尋找」功能。Provide an easy way to access the find-in-page feature. 在行動裝置 UI 的這個範例中,「在頁面上尋找」會出現在可展開的功能表中兩個 [新增至] 命令之後:In this example on a mobile UI, "Find on page" appears after two "Add to..." commands in an expandable menu:

在頁面上尋找範例 1

選取「在頁面中尋找」之後,使用者可輸入搜尋字詞。After selecting find-in-page, the user enters a search term. 輸入搜尋字詞時可顯示文字建議:Text suggestions can appear when a search term is being entered:

在頁面上尋找範例 2

如果搜尋中沒有文字相符項目,則 [結果] 方塊中應顯示「沒有結果」文字字串:If there isn't a text match in the search, a "No results" text string should appear in the results box:

在頁面上尋找範例 3

如果搜尋中有文字相符項目,第一個字詞應該會以不同的色彩反白顯示,而後續的相符項目則會以該相同色系的較淡色調顯示,如下列範例所示:If there is a text match in the search, the first term should be highlighted in a distinct color, with succeeding matches in a more subtle tone of that same color palette, as seen in this example:

在頁面上尋找範例 4

在頁面中尋找具有相符項目計數器:Find-in-page has a match counter:

在頁面中尋找搜尋計數器範例

實作「在頁面中尋找」Implementing find-in-page

  • 文件檢視器、閱讀程式和瀏覽器是最有可能提供「在頁面中尋找」的應用程式類型,可讓使用者擁有完整的全螢幕檢視/閱讀體驗。Document viewers, readers, and browsers are the likeliest app types to provide find-in-page, and enable the user to have a full screen viewing/reading experience.
  • 「在頁面中尋找」功能是次要的,因此應放在命令列中。Find-in-page functionality is secondary and should be located in a command bar.

如需如何替您的命令列新增命令的詳細資訊,請參閱命令列For more info about adding commands to your command bar, see Command bar.