Windows Dev Center

Linee guida per lo zoom semantico

App di Windows: visualizzazione ingrandita e ridotta di un controllo dello zoom semantico

App di Windows: visualizzazione ingrandita e ridotta di un controllo dello zoom semantico

App di Windows Phone: visualizzazione ridotta e ingrandita di un controllo dello zoom semantico

App di Windows Phone: visualizzazione ridotta e ingrandita di un controllo dello zoom semantico

Descrizione

Il controllo dello zoom semantico consente all'utente di eseguire lo zoom tra due diverse visualizzazioni semantiche dello stesso contenuto. Una visualizzazione contiene un elenco di elementi raggruppati da una chiave, mentre l'altra visualizzazione contiene un elenco di chiavi di gruppo. Se si tocca una chiave di gruppo si torna alla visualizzazione ridotta degli elementi di tale gruppo.

Se l'insieme di dati è un elenco di esercizi fisici raggruppati per parte del corpo interessata, la visualizzazione ingrandita è un elenco di esercizi raggruppati per parte del corpo (gli elementi) e la visualizzazione ridotta è un elenco di parti del corso (le chiavi di gruppo). Con un set di dati ampio, la possibilità di ridurre la visualizzazione e vedere tutte le chiavi di gruppo su una pagina aiuta l'utente ad accedere rapidamente a un elemento distante, che, diversamente, richiederebbe molto scorrimento per essere raggiunto.

Esempi

Cattura di schermata che illustra il controllo zoom semantico standard

Cosa fare e cosa non fare

  • Usa la dimensione corretta delle destinazioni di tocco per gli elementi utilizzabili o interattivi. Per altre informazioni, vedi Linee guida per la selezione della destinazione.
  • Fornisci un'area di zoom semantico idonea e intuitiva. Spesso gli utenti avviano lo zoom semantico dall'interno dell'area che circonda gli elementi visualizzati. Fai in modo che l'area di zoom semantico sia sufficientemente ampia da abbracciare quest'area. In Windows Store, ad esempio, intorno all'elenco delle app c'è molto spazio vuoto in cui l'utente può poggiare le dita e fare zoom avanti o indietro.
  • Usa la semantica e le strutture intrinseche della visualizzazione.
    • Usa i nomi dei gruppi per gli elementi in un insieme raggruppato.
    • Usa un ordinamento (ad esempio cronologico per le date o alfabetico per un elenco di nomi) per un insieme non raggruppato, ma ordinato.
    • Usa le pagine per rappresentare una raccolta documenti.
  • Verifica che il layout dell'elemento e la direzione della panoramica non cambino in base al livello di zoom. I layout e le interazioni di panoramica devono essere coerenti e prevedibili in tutti i livelli di zoom.
  • Limita a tre il numero di pagine o schermate in modalità ridotta. Lo zoom semantico consente all'utente di passare rapidamente al contenuto. Un uso eccessivo della panoramica annulla questo vantaggio.
  • Non usare lo zoom semantico per cambiare l'ambito del contenuto. Ad esempio un album fotografico non dovrebbe mai passare a una visualizzazione cartella in Esplora file.
  • Non impostare bordi sui controlli figlio di un controllo dello zoom semantico. Se imposti bordi sia per il controllo dello zoom semantico che per i controlli figlio, il bordo del controllo dello zoom semantico e il bordo del controllo figlio incluso nella visualizzazione saranno entrambi visibili. Quando l'utente fa zoom indietro o avanti, i bordi del controllo figlio verranno ridimensionati con il contenuto, creando un effetto visivo sgradevole. Imposta un bordo solo nel controllo dello zoom semantico.

Istruzioni aggiuntive per l'uso

Lo zoom ottico altera le dimensioni e l'ingrandimento del contenuto. Lo zoom semantico passa la semantica (il significato) del contenuto presentato tra gli elementi raggruppati per chiave e un elenco di tali chiavi. Puoi ad esempio usare un controllo dello zoom semantico quando vuoi visualizzare un lungo elenco di dati raggruppati, ad esempio esercizi raggruppati per parte del corpo o nomi raggruppati per iniziale.

Scorrere dai nomi che iniziano per A ai nomi che iniziano per Z può richiedere molti movimenti di scorrimento rapido. Grazie a un controllo dello zoom semantico possono essere necessari solo due tocchi: uno di zoom indietro verso l'elenco delle iniziali e uno di zoom avanti per passare alla Z.

Lo zoom semantico gestisce l'ingrandimento tra le sue due visualizzazioni. Una visualizzazione è una visualizzazione elenco o una visualizzazione griglia, contenente gli elementi o le chiavi di gruppo, come appropriato.

Per l'organizzazione e la presentazione del contenuto, lo zoom semantico usa due diverse modalità di classificazione, o livelli di zoom: una modalità a basso livello (o ingrandita) che viene in genere applicata per visualizzare tutti gli elementi in una struttura piatta, e una modalità ad alto livello (o ridotta), che visualizza gli elementi in gruppi e consente all'utente di esplorare e sfogliare velocemente il contenuto.

L'interazione zoom semantico si esegue compiendo i movimenti di avvicinamento e allontanamento delle dita (avvicinando le dita viene eseguito lo zoom avanti e allontanandole viene eseguito lo zoom indietro), mantenendo premuto il tasto CTRL mentre si agisce sulla rotellina del mouse, oppure tenendo premuto il tasto CTRL(con il tasto MAIUSC se non è disponibile un tastierino numerico) e premendo i tasti + o - sulla tastiera.

Guarda questo breve video per una panoramica sullo zoom semantico.

Esempi di app che possono usare lo zoom semantico includono:

  • Una rubrica che organizza i contatti in ordine alfabetico (o con altri sistemi) e presenta i dati usando le lettere dell'alfabeto. L'utente può eseguire poi lo zoom avanti su una lettera per vedere i contatti associati a tale lettera.
  • Un album fotografico che organizza le immagini in base ai metadati, ad esempio la data dello scatto. L'utente può poi eseguire lo zoom avanti su una data specifica per visualizzare la raccolta di immagini associate a tale data.
  • Un catalogo di prodotti che organizza gli elementi per categoria.

  • Altri esempi di layout di zoom semantico:
    IngranditoRidotto
    Esempio di layout ridottoEsempio di layout ingrandito
    Esempio di layout ridottoEsempio di layout ingrandito
    Esempio di layout ridottoEsempio di layout ingrandito
    Esempio di layout ridottoEsempio di layout ingrandito

     

Esplorazione con lo zoom semantico

Anche se è possibile esplorare il contenuto semplicemente mediante la panoramica e lo scorrimento (vedi Linee guida per la panoramica), l'uso combinato con lo zoom semantico offre potenti funzionalità di organizzazione ed esplorazione.

Panoramica e scorrimento sono utili per piccoli set di contenuto e distanze brevi. L'esplorazione di set di contenuto di grandi dimensioni, tuttavia, diventa rapidamente scomoda. Lo zoom semantico riduce notevolmente la sensazione di coprire grandi distanze durante l'esplorazione di grandi quantità di contenuto. Offre inoltre un accesso semplice e rapido a posizioni all'interno del contenuto.

Nota  

Lo zoom semantico non va confuso con lo zoom ottico (vedi Linee guida per lo zoom ottico e il ridimensionamento). Anche se le interazioni e il comportamento di base sono gli stessi (visualizzare più o meno dettagli in base a un fattore di zoom), lo zoom ottico fa riferimento alla regolazione dell'ingrandimento di un'area di contenuto o un oggetto, come una fotografia.

  • Scorrimento con jump

    Toccando il contenuto in modalità di visualizzazione ridotta verranno eseguiti lo zoom avanti e la panoramica del punto toccato, come mostrato nei tre schemi di seguito.

    Cattura di schermata che mostra la visualizzazione semantica originale.
    In formato ridotto, l'intero contenuto può fungere da destinazione selezionabile tramite tocco.
    Cattura di schermata che mostra un gesto tocco in una sezione della visualizzazione semantica originale.
    Tocco su una sezione di contenuto.
    Cattura di schermata che mostra la visualizzazione semantica successiva della destinazione del tocco.
    Ingrandimento e panoramica dell'area toccata.

     

  • Transizioni

    Per la transizione da un livello di zoom semantico all'altro viene usata un'animazione fluida di dissolvenza incrociata e ridimensionamento. Questo è il comportamento predefinito di Windows Touch e non può essere personalizzato.

Considerazioni e consigli

La responsabilità di definire i due livelli semantici nelle tue app è affidata a te.

Quando progetti la modalità ridotta, poniti queste domande:

  • In che misura devono variare la struttura e la presentazione delle informazioni in base al livello di zoom?
  • L'inserimento di suggerimenti o segnaletica semplificherebbe l'esplorazione dei dati?
  • Quale quantità di contenuto offre una visualizzazione semantica utile, riducendo al minimo panoramica e scorrimento?

Queste considerazioni sono spesso in conflitto. Vorrai probabilmente un contenuto complesso e ricco di informazioni, in modo che gli utenti sappiano come muoversi al suo interno, ma è necessario bilanciare queste informazioni con la lunghezza totale del livello semantico. Se gli utenti devono usare molto la panoramica nella modalità ridotta, si perde il principale vantaggio offerto dallo zoom semantico—la rapidità di esplorazione.

Esercitazioni pratiche su Windows 8

Se vuoi provare lo zoom semantico e altre funzionalità chiave di Windows 8, scarica le esercitazioni pratiche su Windows 8. Queste esercitazioni forniscono un'introduzione dettagliata modulare alla creazione di un'app di Windows Store di esempio in un linguaggio di programmazione scelto da te, come JavaScript e HTML o C# e XAML.

Aspetto e interazione

L'aspetto di un controllo dello zoom semantico dipende da quale delle sue visualizzazioni è mostrata (ciascuna visualizzazione è un controllo visualizzazione elenco o un controllo visualizzazione griglia). Quando è ingrandito, lo zoom semantico appare sotto forma di un elenco di elementi raggruppati sotto intestazioni chiave; se ridotto, appare sotto forma di un elenco di chiavi.

Se si tocca un elemento ingrandito lo si seleziona oppure si passa alla relativa pagina dei dettagli. Se la visualizzazione è ridotta e si tocca una chiave di gruppo, si ingrandisce il gruppo nella visualizzazione.

Nota  

Windows: l'interazione zoom si esegue compiendo i movimenti di avvicinamento e allontanamento delle dita (avvicinando le dita viene eseguito lo zoom avanti e allontanandole viene eseguito lo zoom indietro), mantenendo premuto il tasto CTRL mentre si agisce sulla rotellina del mouse, oppure tenendo premuto il tasto CTRL (con il tasto MAIUSC se non è disponibile un tastierino numerico) e premendo i tasti + o - sulla tastiera.

Nota  

App di Windows Phone Store: se la visualizzazione è ingrandita e si tocca un'intestazione della chiave di gruppo, viene ridotta.

Argomenti correlati

Per progettisti
Linee guida per interazioni utente comuni
Interazioni tramite tocco
Per sviluppatori (HTML)
Aggiunta di controlli SemanticZoom
Guida introduttiva: aggiungere un controllo SemanticZoom
Guida introduttiva: Puntatori
Guida introduttiva: Gesti e manipolazioni DOM
Guida introduttiva: Gesti statici
Guida introduttiva: Gesti di manipolazione
SemanticZoom
Windows.UI.Input
Per sviluppatori (XAML)
Guida introduttiva: Input tocco
Guida introduttiva: Gestione di input puntatore
Windows.UI.Xaml.Input
Per sviluppatori (app di Windows Runtime in DirectX con C++)
Risposta all'input tramite tocco (DirectX e C++)
Esempi (WinJS)
Esempio di SemanticZoom HTML per controlli personalizzati
Esempio di raggruppamento di oggetti ListView e SemanticZoom HTML
Esempi (DOM)
Esempio di scorrimento, panoramica e zoom HTML
Input: Esempio di gesti istanziabili
Esempi (API di app di Windows Store)
Input: Esempio di manipolazioni e gesti (JavaScript)
Input: Esempio di gesti di Windows 8
Input: Esempio di eventi di input utente XAML
Esempio di scorrimento, panoramica e zoom con XAML
Esempi (DirectX)
Esempio di input tramite tocco DirectX
Input: Esempio di manipolazioni e gesti (C++)

 

 

Mostra:
© 2015 Microsoft