Progettazione di un sistema di navigazione basato sulla Gesture in applicazioni iOS

Grazie alla navigazione basata sulla getura, è diventata una pietra angolare del design moderno delle app iOS, consentendo interazioni fluide e intuitive che si sentono quasi fisiche. Riducendo l’affidabilità ai pulsanti e ai menu visibili, i gesti liberano il tessuto dello schermo e creano un’esperienza utente più coinvolgente.

Perché le funzioni di navigazione basate sulla gestura

Un'inversione per tornare indietro rispecchia l'atto di spingere un oggetto fisico da parte; un pizzico per ingrandire si sente come allungare o comprimere una superficie. Questo allineamento riduce il carico cognitivo e fa la navigazione secondo natura. Nelle applicazioni iOS, la navigazione basata su gesti può sostituire le barre di navigazione tradizionali, le barre di scheda e i pulsanti posteriori, portando a interfacce più pulite che si concentrano sui contenuti.

Gesti core in iOS Navigazione

Le linee guida per l’interfaccia umana di Apple (HIG) definiscono i gesti standard che gli utenti si aspettano di lavorare costantemente attraverso le applicazioni.

Nuota

Il gesto scorretto è forse il più versatile per la navigazione. Scorrendo a sinistra o a destra può passare tra le viste (ad esempio, in una galleria fotografica), rivelare un menu a barre laterali (swipe dal bordo sinistro in molte applicazioni basate sulla navigazione), o licenziare uno schermo (swipe back in un UINavigationController).

Toccare

In contesti di navigazione, un rubinetto può andare più a fondo in una gerarchia (ad esempio, toccando una riga in una vista della tabella) o innescare un'azione come aprire un foglio inferiore.

Pinch

I gesti di Pinch sono utilizzati principalmente per lo zoom su mappe, immagini e documenti. In navigazione, il pizzico può anche attivare una funzione di controllo tra modalità di dettaglio e di visione della griglia (ad esempio, zoomando su una vista della griglia).

Stampa lunga

Una lunga stampa (o forza tocco su dispositivi precedenti) rivela menu contestuali, anteprime o azioni più veloci senza navigare via. Ad esempio, la lunga pressione di un'anteprima del messaggio può mostrare opzioni di risposta senza aprire la conversazione completa.

Maglia di bordo

Scorrendo dal bordo dello schermo (il bordo sinistro per tornare indietro, il bordo destro per peek/pop su iPad) è un gesto di livello di sistema che le applicazioni dovrebbero rispettare a meno che non abbiano una ragione forte per sovrascrivere.

Principi di progettazione per la navigazione basata sulla gestura

La navigazione di gesto di successo non è solo l'attaccamento dei riconosciutori, ma richiede un approccio di progettazione olistico.

Scoperta

Gli utenti devono essere insegnati o intuitivamente capirli. Utilizzare suggerimenti visivi (ad esempio, una freccia sottile, un indicatore di trascinamento, o un overlay di tutorial sul primo lancio).

Consistenza

Se si utilizza un giusto filo per qualcos'altro, fornire un contesto chiaro. All'interno della vostra app, mantenere i gesti uniformi attraverso gli schermi.

Feedback

Ogni gesto deve fornire un feedback immediato e chiaro. feedback visivo (animando una vista accanto al gesto), feedback aptico (utilizzando UIImpactFeedbackGenerator o UINotificationFeedbackGenerator), e segnali audio (se del caso) confermano che il gesto è riconosciuto. Senza feedback, gli utenti possono scorrere ripetutamente, creando un'esperienza frustrante.

Accessibilità

Non tutti gli utenti possono eseguire gesti con precisione. Fornire metodi alternativi per la navigazione: pulsanti, tasti di scelta rapida (su iPad con tastiera), azioni personalizzate VoiceOver e supporto di controllo switch.

Evitare i conflitti

Quando i più riconoscitori di gesto sono attaccati alla stessa vista (o una vista genitoriale), possono sorgere conflitti. Ad esempio, un'irruzione per licenziare una carta potrebbe in conflitto con una striscia per scorrere all'interno della scheda.

Prestazioni

La gestione della gestura deve essere fluida. Le animazioni pesanti o i calcoli sincroni possono causare il gesto di ingabbiamento o di stutter. Usa [ e i suoi riconoscitori di gesto incorporati per il panning standard; per i gesti personalizzati, mantenere i metodi del manubrio leggeri e considerare l'utilizzo per le animazioni lisce.

Implementare Riconoscimenti Gestivi in iOS

iOS fornisce una serie di riconoscitori di gesto concreto sotto ]. Ecco come implementare i modelli di navigazione comuni.

Set di base

Istanturi un riconoscimento di gesto, imposta il suo obiettivo e azione, configura le proprietà (direzione, numero di rubinetti, ecc.), e attaccalo a una vista. Esempio per una navigazione in swipe:

let swipeBack = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeBack))
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

Configurazione avanzata

Per un controllo più granulare, utilizzare il protocollo del delegato. Ad esempio, per consentire un gesto di scorrimento solo quando il dito dell'utente inizia vicino al bordo sinistro (swipe di uscita per il retro):

func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
 guard let swipe = gestureRecognizer as? UISwipeGestureRecognizer else { return false }
 let location = swipe.location(in: view)
 return location.x < 30
}

Gestione semplificata della Gestizione

Quando si tratta di visioni o di visualizzazioni di raccolta, è necessario consentire gesti per lavorare insieme. Utilizzare per restituire per gesti compatibili, e per impostare le priorità.

Transizioni doganali

Per una navigazione completamente guidata da gesti, accoppia i riconoscitori di gesti con transizioni controller di visualizzazione personalizzate. Ad esempio, implementa una transizione pop interattiva che segue il dito dell'utente, simile al gesto posteriore iOS predefinito. Ciò comporta l'utilizzo e collegandolo a un gesto pan o swipe nel delegato del controller di navigazione.

Progettazione di una navigazione del menu con Gestures (Example)

Molte applicazioni iOS moderne utilizzano un menu hamburger che scorre da sinistra. Un'alternativa basata su gesti potrebbe essere un'alternativa per rivelare un pannello laterale (come la vista divisa dell'iPad).

  1. Collegare un segno di gesto della padella bordo alla vista principale del contenuto (con bordi: .left).
  2. In seguito a un gesto, aggiungete una vista menu off-screen a sinistra; in seguito, modificate, aggiornate la sua posizione x proporzionalmente; alla fine, animatela completamente aperta o chiusa in base alla velocità/posizione.
  3. Fornire un pulsante per gli utenti che non possono scorrere.
  4. Utilizzare per animazioni interattive per consentire il ribaltamento della media.

Questo modello può essere esteso a fogli inferiori, pannelli di lato destro o schede scorrevoli.

Test e aggiornamento della navigazione della Gesti

I riconoscimento della gestura possono comportarsi in modo inaspettato su diversi dispositivi, con schermo diviso, o quando sono coinvolti gesti di sistema (ad esempio, indicatore di casa, switcher app).

Strumenti e metodi

  • Xcode Debugger:[[] Visualizzare gli stati del riconoscimento del gesto (possibile, iniziato, cambiato, terminato, cancellato, fallito) utilizzando il pannello di debug della vista.
  • Ispettore di accesso:[] Verificare che gli utenti di VoiceOver possano accedere a ogni azione.
  • User Testing:[] Osservare i veri utenti che eseguono gesti; nota esitazione, trigger accidentali, o tentativi ripetuti.
  • Monitoraggio delle prestazioni:[] Controllare i tassi di frame durante l'esecuzione dei gesti utilizzando strumenti Core Animation.

Pitfalls comuni

  • I trigger accidentali:[] Un'inversione da tornare potrebbe essere interpretata male quando l'utente sta cercando di selezionare una riga.
  • Confezioni di Gesture di sistema:[] Su iPhone con Face ID, l'indicatore di casa scorre può in conflitto con i gesti a fondo altezza.
  • Scoperta della povertà:[] Se gli utenti non sanno che esiste un gesto, si bloccano. Utilizzare a bordo, suggerimenti persistenti, o interfaccia utente che rivela pulsanti dopo un timeout.

Accessibilità e Design Inclusivo

La navigazione basata sulla gestura non deve escludere gli utenti con i difetti del motore.

  • Controlli alternativi:[] Ogni azione attivata dal gesto dovrebbe essere disponibile tramite un tasto o una scorciatoia da tastiera. Ad esempio, un'azione di scorrimento-to-delete può anche essere una lunga pressione che mostra un pulsante Elimina.
  • VoiceOver:[] Usa per esporre le azioni di gesto come azioni chiamate. Ad esempio, “Swipe back” può diventare un'azione personalizzata nel rotore.
  • Ridurre il movimento:[] Rispetta l'impostazione [; sostituire i menu parallax o slide-in con semplici transizioni di dissolvenza quando richiesto.
  • Touch Alloggi:[[]] Sii consapevole di AssistiveTouch e Touch Alloggi che modificano il comportamento del gesto—non assumere un punto di contatto è esatto.

Conclusioni

Progettare un sistema di navigazione basato su gesti nelle applicazioni iOS è un modo potente per creare un'interfaccia utente coinvolgente e moderna. Comprendendo i principi fondamentali dei gesti, seguendo i principi di progettazione di Apple, e priorità accessibilità, è possibile costruire la navigazione che si sente naturale e senza sforzo. Inizia con gesti standard di sistema, aggiungere quelli personalizzati solo quando migliorano sinceramente l'esperienza, e sempre testare con una base utente diversificata.

Per ulteriori informazioni, consultare le Linee guida di interfaccia umane , , la documentazione di riconoscimento della gestura[[, e l'articolo eccellente “]]]Progettazione delle interazioni fluide” da WWDC 2018.