Il presente articolo è stato tradotto automaticamente.

Applicazioni moderne

Implementa la ricerca nelle app per Windows Store e Windows Phone Store

Rachel Appel

Ricerca è parte integrante della nostra vita digitale. Milioni di persone utilizzano siti come Bing e Google per trovare informazioni ogni giorno. Milioni più cercare attraverso il Web, applicazioni e dati proprietari negozi simili. Perché la ricerca è senza dubbio il più frequentemente usato digitale caratteristica, la mossa intelligente è aiutare gli utenti che più cercare facilmente con le applicazioni.

Come Windows facilita la ricerca

A causa delle differenze di fattore forma fisica del PC, tablet e computer portatili, i sistemi operativi Windows forniscono ricerca interfacce utente che comportarsi di conseguenza. Ad esempio, Windows Phone 8.1 utilizza Cortana per ricerca (per saperne di più Cortana a bit.ly/1nFGMxG). Apps può eseguire una ricerca personalizzata all'interno di un'applicazione di Windows Phone Store con o senza Cortana. Windows Phone basato su dispositivi hanno un pulsante hardware speciale per la ricerca, posizionato nella parte inferiore destra del telefono stesso, accanto al Windows (centro) e posteriore (sinistro) pulsanti.

Si può fare un certo numero di cose per richiamare la ricerca con Windows 8. Il modo più semplice è quello basta iniziare digitando mentre sei nella schermata Start di Windows. Che prende il via la ricerca globale, attraverso il dispositivo e Internet. Utilizzando un gesto tocco di colpo è un altro modo per richiamare la ricerca di dispositivi touch. Si potrebbe anche marmellata il mouse negli angoli in alto a destra o in basso a destra dello schermo per avviare la ricerca.

Infine, se voi vivere e morire di tasti di scelta rapida, è possibile utilizzare Windows + S per visualizzare il fascino di Windows Search. Iconografia non ha bisogno di cambiare a causa di fattori di forma. Quando un utente vede una lente di ingrandimento, sa che sempre significa ricerca.

Microsoft consiglia di utilizzare il controllo SearchBox, anche se è bene usare il fascino di ricerca (chiamato anche un contratto di ricerca) per la compatibilità. Si può leggere di più riguardo a bit.ly/1xkqwXN. Quando si utilizza il controllo SearchBox, puoi aggiungerlo alla tela dell'app o mostrarlo nella barra dell'app. Se la ricerca è uno dei metodi primari di interagire con la tua applicazione, si consiglia di presentarlo costantemente in tutta l'applicazione UI.

Una buona posizione è ovunque facilmente individuato su tela dell'app, solitamente l'angolo superiore destro. Applicazioni che si occupano di notizie, film, sport, testi accademici e rapporti finanziari sono grandi esempi di app che necessitano di una casella di ricerca. A volte gli utenti piacciono sfogliare pigramente, ma più spesso sanno quello che vogliono e preferiscono navigare direttamente ad essa tramite la ricerca.

Potreste essere interessati con una casella di ricerca prendendo troppo bene immobile dello schermo. Che è una preoccupazione legittima. Utilizzando un rivelatore icona di ricerca è un modo per mostrare un piccolo ma indicatore evidente ricerca visiva. Dopo che un utente fa clic o rubinetti sul rivelando ricerca glifo, il SearchBox si rivela così possono immettere una stringa e visualizzare risultati della ricerca.

È possibile utilizzare il SearchBox per trovare i dati localmente o globalmente. Come ci si potrebbe aspettare, ricerche globali sono quando l'app è l'accesso ai dati di fuori dell'applicazione stessa. Questo può essere un dispositivo rimovibile, rete o Internet. Se cercate attraverso i file come musica o immagini sul dispositivo, non dimenticate di impostare le funzionalità nel manifesto del programma.

Implementare la ricerca con il controllo SearchBox

Si possono integrare le caselle di ricerca nei vostri apps utilizzando XAML o HTML per le applicazioni Windows e Windows Phone negozio. I controlli e le chiamate API concettualmente funzionano allo stesso modo tra i diversi linguaggi, ma naturalmente con una sintassi diversa. Ricerca per l'accesso alla ricerca di codifica è anche più o meno lo stesso per quanto riguarda la complessità. Il codice deve eseguire gli stessi passaggi di base, e si applicano le stesse linee guida UX, indipendentemente dalla lingua.

Figura 1 dimostra un SearchBox XAML. È possibile inserire questo controllo all'interno di qualsiasi controllo contenitore come un oggetto StackPanel. Come con altri controlli, deve legare la eventi quel fuoco in risposta all'utente richiamando la ricerca. Quando si utilizza il controllo SearchBox, non è necessario impostare l'icona di ricerca. Probabilmente vorrete impostare il FocusOnKeyboardInput a True. Che consente agli utenti di semplicemente iniziare a digitare per dare controllo messa a fuoco per il SearchBox, che rende per un'esperienza di ricerca più facile.

Figura 1 il SearchBox con suggerimenti utilizzando XAML e c#

<SearchBox x:Name="SearchBox" Height="35"
  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
  SuggestionsRequested="SearchBoxEventsSuggestionsRequested"  
  QuerySubmitted="SearchBoxEventsQuerySubmitted"
  FocusOnKeyboardInput="True"/>
public sealed partial class SearchBoxWithSuggestions :
  SDKTemplate.Common.LayoutAwarePage
{
  public SearchBoxWithSuggestions()
  {
    this.InitializeComponent();
  }
  private static readonly string[] suggestionList =
  {
    "ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
      "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang",
      "F#", "Haskell", "HTML", "Java", "JavaScript", "LISP",
      "Objective-C", "Pascal", "Perl", "PowerShell", "R", "Ruby",
      "Rust", "RPG", "SQL", "SmallTalk", "Small Basic", "Swift",
      "TypeScript", "Turbo C", "Visual Basic"
  };
  private void SearchBoxEventsSuggestionsRequested(
    object sender, SearchBoxSuggestionsRequestedEventArgs e)
  {
    string queryText = e.QueryText;
    if (!string.IsNullOrEmpty(queryText))
    {
      Windows.ApplicationModel.Search.
        SearchSuggestionCollection suggestionCollection =
        e.Request.SearchSuggestionCollection;
      int n = 0;
      foreach (string suggestion in suggestionList)
      {
        if (suggestion.StartsWith(queryText,
          StringComparison.CurrentCultureIgnoreCase))
        {
          Uri uri = new Uri("ms-appx:///Assets/laptop1.png");
          RandomAccessStreamReference imageSource =
            RandomAccessStreamReference.CreateFromUri(uri);
          suggestionCollection.AppendResultSuggestion(
            suggestion, "", n.ToString(), imageSource, suggestion);
        }
      }
    }
  }
  private void SearchBoxEventsQuerySubmitted(
    object sender, SearchBoxQuerySubmittedEventArgs e)
  {
    SearchListView.Items.Add(e.QueryText);
  }
}

In XAML, gli eventi SearchBoxEventsSuggestionsRequested e SearchBoxEventsQuerySubmitted sono due evento primario filo-ups che avrete bisogno. SearchBoxEventsSuggestionsRequested incendi una volta per ogni battitura entrato per catturare le sequenze di tasti in tempo reale. Come suggerisce il nome, SearchBoxEventsQuerySubmitted si verifica quando l'utente preme INVIO, clic, tocca l'icona di ricerca o altrimenti innesca una ricerca. L'evento SearchBoxEventsQuerySubmitted è dove si aggiunge il codice per eseguire la ricerca effettiva. Figura 1 Mostra entrambi gli eventi in azione.

In c#, la prima cosa che dovete fare è fornire un elenco di stringhe di ricerca da utilizzare come suggerimenti. Figura 1 indica una matrice di stringhe denominato suggestionList. L'elenco contiene i nomi di diversi linguaggi di programmazione. Il codice in Figura 1 viene illustrata un'implementazione di ricerca con il SearchSuggestionCollection. Quando il SearchBoxEventsSuggestions­richiesto evento incendi, argomento denominato "e" contiene il SearchSuggestionCollection a cui è possibile aggiungere query. Che si riflette nel Figura 1 quando la variabile suggestionCollection è dichiarata e impostata.

È possibile aggiungere query per il SearchSuggestionCollection attraverso i metodi AppendQuerySuggestion, AppendQuerySuggestions, AppendSearchSuggestion o AppendResultSuggestion. Suggerimenti risultato visualizzato nell'elenco stesso come suggerimenti di query, ma si lasciano passare dati aggiuntivi come un'immagine nel SearchBox.

Mentre XAML è il concetto di una risorsa per impostare gli stili e le caratteristiche estetiche, HTML utilizza CSS per eseguire queste attività. Ad esempio, perché il <div> elemento in Figura 2 non contiene alcun riferimento a eventuali stili, utilizzerà il libreria Windows predefinito per JavaScript (WinJS) .win-searchbox classe che fa parte del CSS base WinJS.

Figura 2 il SearchBox con suggerimenti usando HTML e JavaScript

<div id="searchBox" data-win-control="WinJS.UI.SearchBox"></div>
(function () {
"use strict";
var suggestionList = ["ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
  "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang", "F#", "Haskell",
  "HTML", "Java", "JavaScript", "LISP", "Objective-C", "Pascal", "Perl",
  "PowerShell", "R", "Ruby", "Rust", "RPG", "SQL", "SmallTalk",
  "Small Basic", "Swift", "TypeScript", "Turbo C", "Visual Basic"];
var page = WinJS.UI.Pages.define("/html/S1-SearchBoxWithSuggestions.html", {
    ready: function (element, options) {
      var searchBox = document.getElementById("searchBox");
      searchBox.addEventListener("suggestionsrequested",
        suggestionsRequestedHandler);
      searchBox.addEventListener("querysubmitted", querySubmittedHandler);
      searchBox.winControl.focusOnKeyboardInput = true;
    }
  });
function suggestionsRequestedHandler(eventObject) {
    var queryText = eventObject.detail.queryText,
      query = queryText.toLowerCase(),
      suggestionCollection = eventObject.detail.searchSuggestionCollection;
    if (queryText.length > 0) {
      for (var i = 0, len = suggestionList.length; i < len; i++) {
        if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
          suggestionCollection.appendQuerySuggestion(suggestionList[i]);
        }
      }
    }
  }
function querySubmittedHandler(eventObject) {
    var queryText = eventObject.detail.queryText;
    WinJS.log && WinJS.log(queryText, "sample", "status");
  }
})();

Figura 3 Mostra i risultati di runtime di uno Figura 1 o Figura 2.

Figura 3 SearchBoxes con Query e risultato suggerimenti

Si noti il SearchBoxes in Figura 3 Visualizza filtrati suggerimenti basati su ciò che l'utente immette. Questa è una grande caratteristica. Fortunatamente, è qualcosa che il controllo SearchBox fa per voi automaticamente in XAML o HTML. Tuttavia, è necessario eseguire la ricerca effettiva te l'evento di presentazione di query. Ciò significa che spetta a voi per leggere i file, accedere alle banche dati e servizi Web o cercare sul Web.

Quando si accoda elementi per il SuggestionCollection, il metodo AppendResultSuggestion consente di fornire ulteriori informazioni rispetto al metodo AppendQuerySuggestion. Passare il testo, descrizione, immagine e testo alternativo per applicare gli elementi dell'elenco, come il codice in Figura 4 rivela. Figura 5 illustra lo screenshot di runtime nel codice in Figura 4 creerà.

Figura 4 codice per aggiungere immagini ai suggerimenti

private void SearchBoxEventsSuggestionsRequested(object sender,
  SearchBoxSuggestionsRequestedEventArgs e)
{
  string queryText = e.QueryText;
  if (!string.IsNullOrEmpty(queryText))
  {
    Windows.ApplicationModel.
      Search.SearchSuggestionCollection suggestionCollection =
      e.Request.SearchSuggestionCollection;
    int n = 0;
    foreach (string suggestion in suggestionList)
    {
      if (suggestion.StartsWith(queryText,
        StringComparison.CurrentCultureIgnoreCase))
      {
        Uri uri = new Uri("ms-appx:///Assets/laptop.png");
        RandomAccessStreamReference imageSource =
          RandomAccessStreamReference.CreateFromUri(uri);
        suggestionCollection.AppendResultSuggestion(
          suggestion, "", n.ToString(), imageSource, suggestion);
      }
    }
  }

Figura 5 SearchBox con risultato suggerimenti e immagini

L'argomento di immagine passato alla classe AppendResultSuggestions è un tipo di IRandomAccessStreamReference dalla Windows.Stor­età.Flussi dello spazio dei nomi. Se stai usando JavaScript, dovrete creare un Uri utilizzando lo stesso metodo di CreateFromUri. Questo è in contrasto con il solito modo di impostare un'immagine in HTML con un attributo src.

A questo punto, avete un lavoro SearchBox e suggerimenti con testo e immagini. Il passo successivo è quello di visualizzare i risultati della ricerca. In XAML e HTML, è possibile aggiungere una pagina di risultati di ricerca pre-definito per la visualizzazione e interazione con i risultati. Visual Studio fornisce modelli di pagina con il codice che visualizza risultati della ricerca con un elenco filtrato di dati che fornisci. Perché queste pagine sono personalizzabili, è possibile visualizzare i risultati esattamente come si desidera.

Quando si aggiunge un SearchResultsPage dalla finestra di dialogo Nuovo File nel Visual Studio, crea una pagina con un controllo ListView per visualizzare i risultati della ricerca. Per ulteriori informazioni sull'utilizzo di ListView, vedere il mio dicembre 2013, "Tutto si bisogno per sapere circa il controllo ListView" (msdn.microsoft.com/magazine/dn532209). Naturalmente, non è obbligatorio, si utilizza il modello di pagina di risultati di ricerca — è possibile incorporare ovunque risultati di ricerca nella UI che ha senso ed è più facile per l'utente. Quando lo fai, assicurati di che controllare le linee guida UX prima.

Orientamenti di ricerca UX

Se l'utente non può mai trovare nulla, o ha difficoltà cercando, lui sarà più in grado di votare il male nel deposito di app. Peggio ancora è quando un utente non acquista app perché non funziona la ricerca nella versione di prova.

Perché la ricerca è tale funzionalità utilizzate frequentemente, prendetevi il tempo per farlo diritto sia pagato e prova apps. Ecco alcuni suggerimenti su come implementare la ricerca nelle app e sollevare tali valutazioni:

• Se la ricerca è una caratteristica frequente dell'app, posizionarlo dove gli utenti possono immediatamente trovare e utilizzare.
• Aiutare gli utenti con i suggerimenti di query e risultato. Gli utenti si basano su suggerimenti per rapidamente spostarsi in tutta l'applicazione ed eseguire azioni.
• Visualizzare i risultati quindi sono facili a scremare. Informazioni aggregate sono l'amico di voi e l'utente. Il punto della ricerca è quello di presentare informazioni agli utenti in modo che possano fare una scelta su quali dati di perseguire.
• Assicurarsi che la casella di ricerca funziona con una tastiera touch, così come le tastiere fisiche.
• Supporto Ctrl + F tasti di scelta rapida per la ricerca di testo nella tua app (solo Windows).

Molti di questi punti sono estetici in natura. Semmai, linee guida Windows UX peccare presentando pezzi meno ma più importante di informazioni.  Un utente deve essere in grado di spostarsi indietro suo precedente percorso dai risultati della ricerca attraverso un pulsante indietro. Per recuperare o aggiornare le tue conoscenze sulla navigazione nelle applicazioni Windows Store, leggere la mia colonna agosto 2013, "Essentials navigazione nelle applicazioni Windows Store" (msdn.microsoft.com/magazine/dn342878).

È sempre necessario fornire suggerimenti di ricerca, soprattutto sul telefono. Nessun utente vuole immettere una query di ricerca e ricevere nessun ulteriore aiuto. È anche molto più difficile da digitare rapidamente e correttamente su dispositivi di piccole dimensioni. Gli utenti di telefonia hanno limitati o meno metodi di input. Dover toccare solo le parole intere rende difficile da usare app e frustra l'utente.

Stai cercando la conclusione

Come potete vedere, implementando un'esperienza piacevole ricerca è facile da fare per le applicazioni Windows e Windows Phone negozio. Aggiunta funzionalità di ricerca non solo rende l'app più robusto, ma offre agli utenti l'accesso facile a una caratteristica importante e frequentemente utilizzata. Tenete a mente si può cercare dati globali e locali.

Don' t dimenticare di rivedere e seguire le istruzioni descritte in questo articolo e quelli Microsoft descrive a bit.ly/1BQ5fGZ quando si implementa la ricerca nell'app.

---

Rachel Appel è un consulente, autore, mentore ed ex dipendente di Microsoft con più di 20 anni di esperienza nel settore IT. Lei parla a conferenze di settore superiore come Visual Studio Live!, DevConnections, MIX e altro ancora. Sua competenza si trova all'interno di sviluppare soluzioni che allineare business e tecnologia concentrandosi sullo stack Microsoft dev e aprire il Web. Per ulteriori informazioni su Appel, visitare il suo Web site a rachelappel.com.

Grazie al seguente Microsoft esperto tecnico per la revisione di questo articolo: Frank La Vigne