Share
Con l'imminente lancio del prodotto più nuovo e più brillante di Apple, l'Apple Watch (err, WATCH) ci sono molti designer là fuori che desiderano provare la sensazione che il nuovo giocattolo uscirà da Cupertino. Ci sono alcuni nuovi modi per interagire con il dispositivo; come quello di Apple forza il menu touch e corona digitale, così come molti elementi dell'interfaccia utente potresti già avere familiarità con pulsanti, stili di testo e interruttori, oh mio!
Prima di esplorare gli elementi dell'interfaccia utente presenti su Apple Watch, esaminiamo innanzitutto alcune delle nozioni di base da tenere a mente durante la progettazione di questo nuovo dispositivo. Al momento di scrivere l'Apple Watch deve ancora essere rilasciato, quindi se avete suggerimenti, commenti o correzioni fatemelo sapere su Twitter o nei commenti.
La homescreen Apple Watch già familiareInnanzitutto, Apple Watch è fisicamente collegato all'utente. Sii consapevole di questa connessione e di come farà sentire i tuoi utenti quando interagiscono con l'interfaccia utente.
Cosa pensi che le intenzioni di Apple siano nei confronti delle emozioni dei loro utenti con Apple Watch? Se questo spot è coerente con la strategia dei contenuti di Apple, le emozioni che trasmette sono felicità, eccitazione, stupore e meraviglia, il tutto trasmettendo un senso di personalizzazione con l'uso di diversi cinturini per orologi, colori e quadranti. Come potresti trasmettere quegli stessi sentimenti con il design della tua app di orologio? In che modo il fatto che l'orologio sia collegato all'utente cambia il modo in cui l'utente potrebbe percepire il design della tua app?
Apple Watch non è potente come il tuo nuovo smartphone. Quando si progetta per il web e il mobile, a volte sono colpevole di usare un'immagine carina su una più piccola. Nel caso dell'Apple Watch ci viene ricordato di mantenere le cose il più leggere possibile, perché quei kilobyte extra fanno davvero la differenza.
I dispositivi più esigenti sul web (telefoni di fascia bassa) hanno caratteristiche simili alla nuova tecnologia più cool (orologi intelligenti). Design per tutti, sempre.
- Todd Parker (@toddmparker), 19 marzo 2015
Gli utenti non vogliono un'esperienza lenta e fiacca. L'uso di immagini e animazioni più grandi non solo creerà un'esperienza utente scadente, ma probabilmente farà sì che l'app venga respinta quando arriva il momento di inviarla ad Apple.
Qualsiasi sviluppatore iOS #applewatch che abbia approvato le app utilizzando molta animazione: il mio utilizza molto e si preoccupa del rifiuto https://t.co/5tmnBY3Qm4
- Henry Ton (@archtrainer) 3 aprile 2015
Chiediti: "le mie animazioni sono davvero necessarie?" Le animazioni sono cattive se causano un ritardo, indipendentemente dalle loro qualità migliorative. Ricorda che stai costruendo qualcosa per un computer delle dimensioni di un francobollo che deve anche trasmettere i dati in modalità wireless dal telefono. Esiste un collo di bottiglia.
Fai finta di costruire un sito web nei primi anni '90 che ha bisogno di trasferire le sue informazioni su un modem 14.4k a un utente su un computer con un processore 386 e 2mb di ram. Non useresti font personalizzati, animazioni e librerie JavaScript di grandi dimensioni in questa situazione, vero? Mantieni le cose leggere. Costruisci per la velocità e rispetta il tempo dei tuoi utenti. Resistere all'impulso di abbagliare. Mantenere interazioni significative. Non usare animazioni inutili. Bere molta acqua. Sii gentile e rispettoso verso gli altri. Ascolta tua madre.
"Se misuri le interazioni con la tua app iOS in pochi minuti, puoi aspettarti che le interazioni con la tua app WatchKit vengano misurate in pochi secondi. Quindi mantieni le interazioni brevie interfacce semplici. "- Apple Watch Human Interface Guidelines
L'uso del colore e della tipografia è importante per il marchio della tua applicazione, ma ci sono alcune considerazioni importanti da tenere a mente.
"Color aiuta a fornire continuità visiva e branding per la tua app." - Apple Watch Human Interface Guidelines
Utilizzare in ogni caso caratteri personalizzati, ma tenere presente che il font di sistema è stato progettato per funzionare correttamente su questo nuovo dispositivo.
"Soprattutto, il testo deve essere leggibile. Se gli utenti non riescono a leggere le parole nella tua app, non importa quanto sia bella la tipografia. "- Apple Watch Human Interface Guidelines
I vantaggi del font di sistema (San Francisco) includono:
Gli stili di testo sono descrizioni semantiche degli usi previsti per i tuoi font. Esempi sono cose come Titolo, Corpo ecc. Probabilmente hai familiarità con gli equivalenti HTML di
e simili. Se si utilizzano gli stili di testo incorporati, si ottiene il supporto dinamico di tipo dinamico che risponde automaticamente alle preferenze di accessibilità degli utenti. Se si utilizzano caratteri personalizzati, è necessario eseguire alcune operazioni per adottare la funzione.
L'Apple Watch è più piccolo di uno smartphone, ovviamente. Tutto lo spazio disponibile deve essere usato in modo intelligente per rendere le interazioni che i tuoi utenti renderanno il più piacevole possibile. Mantieni i tuoi pulsanti di grandi dimensioni in modo che sia facile interagire con loro. Prendi in considerazione modi per utilizzare il menu di forzatura tattile per ulteriori opzioni. Resisti alla tentazione di mostrare il tuo logo nell'app, ci sono altri modi per marcare la tua app attraverso l'uso di colori e immagini che sono significativi e contestuali.
"Lo spazio su Apple Watch è un premio, e ogni occorrenza di un logo distoglie lo spazio dal contenuto che gli utenti vogliono vedere." - Apple Watch Human Interface Guidelines
Confronto relativo di iOSL'Apple Watch ha una lunetta intorno ai bordi che aggiunge imbottitura fisica ai tuoi progetti. Non è quindi necessario aggiungere margini ai bordi degli schermi.
a) schermo reale e b) cornice di vetro All'inizio sembra un po 'strano quando si sviluppa in Xcode, dato che non vedrai questa spaziatura ai bordi, ma tienilo a mente per i tuoi disegni:
Le app mostrano la stessa interfaccia su entrambe le dimensioni di Apple Watch, (38 millimetri e 42 millimetri) quindi, utilizzando le unità relative, puoi consentire ai tuoi articoli di crescere e ridursi per riempire lo spazio disponibile su entrambe le dimensioni. Lo schermo è sempre in modalità verticale: l'altezza è maggiore della larghezza.
| Dimensione del dispositivo | Larghezza (in pixel) | Altezza (in pixel) |
|---|---|---|
| 38 millimetri | 272 | 340 |
| 42 millimetri | 312 | 390 |
Nelle app WatchKit incontrerai due schemi di navigazione completamente diversi:
"Gerarchico" è un modello di navigazione che comprende un elenco di scorrimento verticale per consentire all'utente di effettuare una selezione (toccando) per schermo fino a raggiungere la destinazione desiderata.
"Basato pagina" è uno stile di navigazione a scorrimento orizzontale che indica la pagina corrente da una serie di punti lungo la parte inferiore della schermata dell'orologio.
Non è possibile combinare questi due sistemi nella stessa app ma è possibile visualizzare "fogli modali" indipendentemente dal tipo di navigazione.
Puoi pensare a un foglio modale come a una carta che offre all'utente un modo per completare un'attività. I fogli modali contengono una singola schermata o più schermi visualizzati in un layout basato su pagina. L'unica differenza tra i due è l'aggiunta di indicatori di punti nella parte inferiore dell'interfaccia basata su pagina.
Nota i punti di navigazione sulla seconda immagineNon aggiungere un pulsante di chiusura al tuo foglio modale, poiché ce n'è uno in alto a sinistra sullo schermo per impostazione predefinita. È sempre bianco, anche se puoi cambiare il testo da vicino a Annulla o qualcos'altro per aggiungere più significato. Un utente può anche chiudere un foglio modale scorrendo dalla sinistra dello schermo.
Qualsiasi pulsante che aggiungi ai tuoi fogli modali dovrebbe eseguire l'azione per cui sono progettati e chiudi il foglio modale, quindi l'utente non deve eseguire quel passaggio aggiuntivo. Apple suggerisce di non aggiungere una seconda interfaccia modale da quella iniziale, nel caso in cui si dovesse farlo potrebbe essere motivo di rifiuto al momento dell'invio dell'app. Se Apple mette in guardia contro qualcosa di solito è meglio ascoltare se non hai una buona ragione per non farlo.
Là può essere più modi per un utente di interagire con la tua app nelle generazioni future (come multi touch e nuovi gesti), ma per ora questi sono gli unici modi.
L'interfaccia di Glance è descritta da Apple come "un modo supplementare per consentire all'utente di visualizzare informazioni importanti dall'app". Pensa alle informazioni di cui potresti aver bisogno rapidamente su uno schermo, come l'ora. La tua app ha informazioni che l'utente vorrà consultare frequentemente? Prendi in considerazione la possibilità di creare uno "sguardo" per visualizzare tali informazioni.
Gli sguardi sono creati da una serie di modelli predefiniti per la metà superiore e inferiore dello schermo. Le occhiate non sono scorrevoli dall'utente e apriranno l'app alla schermata appropriata quando l'utente ne tocca una. Gli sguardi sono opzionali e non sono richiesti.
I gruppi sono contenitori per oggetti nella tua app, puoi considerarli un po 'come i div in html. I gruppi hanno un riempimento predefinito che puoi modificare o rimuovere, se lo desideri. Non hanno un aspetto predefinito, ma hanno attributi per l'impostazione di posizione, raggio dell'angolo, dimensione, margini e sfondo. È possibile impostare un gruppo sugli elementi di layout orizzontalmente o verticalmente ed è possibile nidificare gruppi all'interno di altri gruppi per creare layout più sofisticati.
Ecco alcuni dei modelli di gruppo superiore e inferiore per la schermata dello sguardo:
Modelli di gruppo superiore
Solo alcuni dei modelli di gruppo più bassiLe notifiche vengono visualizzate all'utente in due modi diversi: un aspetto breve e un aspetto prolungato.
Questi dicono all'utente quale app li sta comunicando e dà un titolo. Se l'utente abbassa rapidamente il polso o non tocca, la notifica viene ignorata. L'utente non deve interagire manualmente con la notifica per rimuoverlo. Il design della notifica di breve durata è basato su modelli e contiene l'icona dell'app, il nome dell'app e una stringa del titolo. Mantieni le stringhe del titolo più brevi e significative possibili.
Questi forniscono maggiori dettagli sulla notifica e sono più personalizzabili nel loro aspetto. La struttura di base è la stessa per tutte le app e include una fascia in alto che mostra l'icona e il nome dell'app, il contenuto personalizzato della tua app, fino a quattro pulsanti di azione e, infine, un pulsante di annullamento in basso.
Con questi concetti di base tenuti saldamente nella tua mente, esploriamo i diversi elementi dell'interfaccia utente di Apple Watch.
"Mentre progetti gli elementi grafici della tua app, ricorda che ogni elemento personalizzato dovrebbe avere un bell'aspetto e funzionare bene da solo, ma dovrebbe anche sembrare appartenere agli altri elementi nell'app, sia che siano personalizzati o standard." - Apple Guarda le linee guida dell'interfaccia umana
Le animazioni dinamiche devono essere trasferite dall'iPhone causando un inevitabile ritardo. Un'app di controllo può essere rifiutata a causa della forte dipendenza dalle animazioni, quindi usale solo per comunicare lo stato e fornire un feedback all'utente. L'uso gratuito delle animazioni non è raccomandato (anche se l'animazione è di un bambino che balla in modo esilarante simile alla vita). Archivia le animazioni pre-renderizzate utilizzando una sequenza di immagini statiche nel pacchetto di app WatchKit in modo che possano essere presentate rapidamente all'utente anziché trasferite dal telefono.
Usa le icone al posto del testo per i pulsanti posizionati uno accanto all'altro e non ne hai mai più di uno l'uno accanto all'altro (Apple dice in un'istanza di non utilizzare più di due pulsanti l'uno accanto all'altro e in un'altra istanza di non usare più di tre.)
Potrebbe sembrare ovvio, ma ricorda che le schermate di Watch sono piccole, quindi tieni i tuoi pulsanti più grandi possibile, non rendere difficile agli utenti toccare un pulsante. I pulsanti possono avere un'immagine o un set di colori per lo sfondo, nonché un colore diverso per il testo. Possono contenere un'etichetta o un oggetto di gruppo e hanno gli angoli arrotondati (il raggio dell'angolo predefinito è di 6 punti).
Il menu a sfioramento forzato visualizza il menu contestuale opzionale della schermata corrente (se ne è impostato uno) con un massimo di quattro azioni. Visualizzerà le azioni dall'alto verso il basso, da sinistra a destra, a seconda dell'ordine in cui vengono aggiunte al menu. Non scorrono.
Le azioni del menu (pulsanti) richiedono un'immagine e un'etichetta. L'immagine dovrebbe essere grafica al tratto e un unico colore con uno sfondo trasparente. Usa pesi linea appropriati per le dimensioni del dispositivo e la complessità dell'icona, tra 4px e 9px secondo Apple.
Ricorda il menu contestuale del tocco di forza, poiché questo è un modo nuovo ed eccitante per interagire con il dispositivo. Invece di aggiungere pulsanti aggiuntivi alla tua interfaccia, prendi in considerazione l'utilizzo del menu di scelta rapida del tocco forzato.
Le icone sono cerchi png. Puoi crearli come colori indicizzati per risparmiare spazio, 24 bit e nessuna trasparenza. Le icone non hanno testo su di esse nella schermata iniziale dell'orologio.
Scarica questo modello icona di Apple Watch da utilizzare nei tuoi progetti.
Dimensioni delle icone per un'app WatchKit su Apple Watch:
| Bene | Orologio 38mm (in pixel) | Orologio 42mm (in pixel) |
|---|---|---|
| Icona Centro di notifica | 48 x 48 | 55 x 55 |
| Icona di notifica Long-Look | 80 x 80 | 88 x 88 |
| Icona schermata iniziale | 80 x 80 | 80 x 80 |
| Icona di breve durata | 172 x 172 | 196 x 196 |
Dimensioni dell'icona per l'utilizzo dell'app Apple Watch su iPhone:
| Bene | @ 2x | @ 3x |
|---|---|---|
| Icona dell'app | 58 x 58 | 87 x 87 |
Usa un'immagine per tutte le dimensioni dello schermo. La velocità e l'efficienza sono estremamente importanti, quindi comprimi le tue immagini il più possibile. Prova a salvare i tuoi PNG con il colore indicizzato su uno sfondo nero pieno anziché su uno sfondo trasparente. Crea tutte le risorse immagine come @ 2x risorse; non è necessario creare immagini non Retina.
Comprimi i tuoi png con strumenti come tinypng, pngout e pngcrush. ImageOptim è una grande utilità gratuita per gli utenti Mac.
Le mappe sono schermate statiche di una posizione e non sono interattive. Toccando su una mappa porta l'utente all'app della mappa.
Un'etichetta è un modo elegante per dire "una stringa di testo statica". Non consente l'interazione diretta con l'utente, anche se può essere aggiornato in modo programmatico e può estendersi su più righe.
Il separatore è un elemento dell'interfaccia utente semplice ma prezioso: una linea per separare il contenuto.
I cursori consentono agli utenti di apportare modifiche toccando le immagini a sinistra ea destra. Se non fornisci immagini i valori di default sono un plus (+) e meno (-)
Gli switch offrono all'utente un modo per specificare una delle due opzioni. Acceso o spento, sì o no, ecc. Stilisticamente ti saranno familiari da iOS e includeranno sempre un'etichetta.
Una tabella presenta righe di dati in una singola colonna che l'utente può scorrere verticalmente. Mantieni le tabelle più piccole di 20 righe, poiché è più difficile scorrere oltre. Se hai più di 20 righe puoi dare all'utente la possibilità di caricarne altre. Le tabelle vengono ridimensionate dinamicamente in base al numero di righe che contengono. Di conseguenza, le tabelle ignorano eventuali restrizioni di altezza poste su di esse dai gruppi. Apple consiglia di non incorporare tabelle all'interno di gruppi.
Apple's Watch è un'emozionante nuova piattaforma che continuerà ad evolversi con la partecipazione di designer e sviluppatori e costruirà nuove incredibili esperienze. Le idee coinvolte con un dispositivo collegato all'utente e in grado di raccogliere la frequenza cardiaca e altre informazioni continueranno a evolversi. Fateci sapere se avete nuove idee su come lavorare al meglio e creare interessanti nuove interazioni con questi sistemi!
Accentsconagua