+    Tecnologie Mobili -    Lezione 3
+                                                                               2    Tabelle        E’ la vista principal...
+                                                  3    Tabelle                                              Gruppi       ...
+                                                                            4    Tabelle        Quando la selezione di u...
+                                                                            5    Tabelle        Le tabelle di tipo group...
+                                                                         6    Tabelle        Tutti gli elementi grafici ...
+                                                                                7    Tabelle        Le tabelle possono f...
+                                             8    Tabelle              Dr. Paolo Casoto, Ph.D - 2011
+                                                                                       9    Tabelle e celle        Le ce...
+                                           10    Tabelle e celle            Dr. Paolo Casoto, Ph.D - 2011
+                                           11    Tabelle e celle            Dr. Paolo Casoto, Ph.D - 2011
+                                                                                          12    Tabelle        Quando ut...
+                                                                                  13    Tabelle         Mostrare informa...
+                                                                                14    Tabelle        Fornire all’utente ...
+                                             15    Tabelle              Dr. Paolo Casoto, Ph.D - 2011
+                                                                                  16    Tabelle        Evitare celle con...
+                                                                              17    Tabelle         Nelle celle di defau...
+                                                                              18    Tabelle        Al fine di evitare il...
+                                                                               19    UITextView        Una UITextView è ...
+                                                                     20    UITextView        La UITextView non supporta ...
+                                                                          21    UITextView        La vista può gestire, ...
+                                                                                    22    UIWebView        Vista finaliz...
+                                         23    UIWebView          Dr. Paolo Casoto, Ph.D - 2011
+                                                                                         24    UIWebView        Utilizza...
+                                                                                    25    UIAlertView        Un alert, c...
+                                                                                    26    UIAlertView        Un alert de...
+                                                                                   27    UIAlertView        NON ESAGERAR...
+                                                                                28    UIAlertView        Non utilizzare ...
+                                                                                  29    UIAlertView        Non utilizzar...
+                                                                               30    UIAlertView        Non mi stancherò...
+                                                                       31    UIActionSheet        Componente utilizzata ...
+                                                                           32    UIActionSheet        Su iPhone l’UIActi...
+                                                                                  33    UIActionSheet        L’UIActionS...
+                                                                                  34    UIActionSheet        Richiedere ...
+                                                                                35    UIActionSheet        Su iPhone inc...
+                                                                     36    UIActionSheet        Utilizzate il colore ros...
+                                                                               37    Viste modali        Viste presentat...
+                                           38    Viste modali            Dr. Paolo Casoto, Ph.D - 2011
+                                                                                  39    Viste modali        L’obiettivo ...
+                                                                                    40    Viste modali        Sull’iPad ...
+                                                                                    41    Viste modali        Su iPad è ...
+                                                                                  42    Viste modali        Utilizzare u...
+                                                                               43    Indicatori di attività        Compo...
+                                                                                  44    Indicatori di attività        Ut...
+                                                                           45    Selettore di data / ora        Il compo...
+                                                       46    Selettore di data / ora         Data e orario               ...
+                                                                  47    Selettore di data / ora             Data         ...
+                                                                         48    Pulsante di dettaglio        Indica che u...
+                                                                          49    Pulsante Info        Utilizzato per most...
+                                                                              50    Etichetta (UILabel)        Consente ...
+                                                                                  51    Indicatore dell’attività di rete ...
+                                                                                       52    Indicatore di pagina       ...
+                                                                       53    Indicatore di pagina        Da utilizzare p...
+                                                                        54    Picker        Visualizza un insieme di val...
+                                                                                                    55    Picker        ...
+                                                                                                   56    Progress View   ...
+                                                                                  57    UIButton        Elemento fondame...
+                                                                                  58    UIButton             Pulsante di...
+                                                                                     59    UIButton        Selezionato: ...
+                                                           60    UIButton        Mantenere i titoli contenuti e con     ...
+                                                                                    61    Barra di ricerca        Compon...
+                                                                               62    Barra di ricerca        Preferiti: ...
+                                                                           63    Barra di ricerca        Prompt: consent...
+                                                                                  64    Barra di ricerca        La barra...
+                                                                                65    Segmented Control        Insieme d...
+                                                                                       66    Segmented Control        Un...
+                                                                             67    Slider        Una slider è un control...
+                                                                                  68    Stepper        Variante dello sl...
+                                                                       69    Switch        Interruttore per la gestione ...
+                                                                                    70    UITextField        Concludiamo...
+                                                                                 71    UITextField        Deve essere la...
+                                                       72    Icone e pulsanti di sistema    Da utilizzarsi    all’interno...
+                                           73    Icone e pulsanti di sistema            Dr. Paolo Casoto, Ph.D - 2011
+                                                        74    Icone e pulsanti di sistemaIl testo è tradotto inautomatico...
+                                           75    Icone di sistema della tabbar            Dr. Paolo Casoto, Ph.D - 2011
+    Domande ???    Grazie a tutti per    l’attenzione                   Dr. Paolo Casoto, Ph.D - 2011
Upcoming SlideShare
Loading in …5
×

Corso Tecnologie Mobile - Lezione 3

936 views

Published on

Corso Tecnologie Mobile ENAIP FVG - Udine, anno 2011. Slide della terza lezione. Dal design delle applicazioni iOS alla definizione dei singoli elementi grafici dell'interfaccia.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
936
On SlideShare
0
From Embeds
0
Number of Embeds
111
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Corso Tecnologie Mobile - Lezione 3

  1. 1. + Tecnologie Mobili - Lezione 3
  2. 2. + 2 Tabelle   E’ la vista principale nelle applicazioni iOS   Lista a colonna singola di elementi selezionabili   Da iOS 5.0 è stata introdotta anche la possibilità di selezione multipla degli elementi   L’utente può scorrere il contenuto della tabella mediante drag verso l’alto o verso il basso.   L’utente può selezionare una cella all’interno della tabella mediante il tap. La cella selezionata può assumere una specifica colorazione finalizzata a fornire feedback all’utente sull’avvenuta selezione. Dr. Paolo Casoto, Ph.D - 2011
  3. 3. + 3 Tabelle Gruppi Piana Dr. Paolo Casoto, Ph.D - 2011
  4. 4. + 4 Tabelle   Quando la selezione di una riga comporta la navigazione all’interno di una schermata di dettaglio (e.g.: da lista ricette a dettaglio ricetta) al ritorno la riga rimarrà selezionata per alcuni istanti.   Le righe della tabella possono essere suddivise per sezioni (modalità piana di visualizzazione) o per gruppi.   Le tabelle piane si estendono per l’intera larghezza della vista, sono caratterizzate da celle con sfondo bianco, separate dalle etichette delle singole sezioni ed eventualmente arricchite da un indice alfanumerico a lato. Dr. Paolo Casoto, Ph.D - 2011
  5. 5. + 5 Tabelle   Le tabelle di tipo grouped mostrano gruppi di righe che non si estendono per l’intera larghezza dello schermo.   Una tabella contiene sempre almeno un gruppo di elementi con almeno un elemento per gruppo.   Ciascun gruppo può essere preceduto e seguito da un testo specifico.   Il gruppo sono visualizzati su uno sfondo caratteristico color blu striato. Le righe di un gruppo hanno uno sfondo bianco crema.   Le tabelle grouped non possono avere indici. Dr. Paolo Casoto, Ph.D - 2011
  6. 6. + 6 Tabelle   Tutti gli elementi grafici di una tabella piana possono essere modificati:   Aspetto ed altezza delle celle;   Sfondo;   Comportamento in caso di selezione e colori di feedback;   Separazione delle celle (e.g.: bordo, line singola);   Aspetto delle etichette di sezione ed altezza;   Eventuali viste aggiuntive in testa e coda alla tabella   E.g.: immagini di testata. Dr. Paolo Casoto, Ph.D - 2011
  7. 7. + 7 Tabelle   Le tabelle possono fare uso di un insieme di elementi applicabili a tutte le possibili tabelle.   Gli elementi, visualizzabili a livello di riga, possono essere finalizzati a molteplici utilizzi:   Selezionare la riga ed indicare all’utente che la riga può avere una vista di dettaglio.   Ordinare le righe della tabella.   Inserire o eliminare le righe della tabella. Dr. Paolo Casoto, Ph.D - 2011
  8. 8. + 8 Tabelle Dr. Paolo Casoto, Ph.D - 2011
  9. 9. + 9 Tabelle e celle   Le celle della mia tabella, estensioni della classe UITableViewCell possono essere personalizzate o utilizzare un insieme di 4 stili predefiniti:   UITableViewCellStyleDefault: immagine opzionale a destra e titolo in nero grassetto.   UITableViewCellStyleSubtitle: come il precedente ma con la presenza di sottotitolo in grigio con font minore.   UITableViewCellStyleValue1: titolo in nero a destra e, sulla stessa riga, sottotitolo allineato a sinistra con font più piccolo e di colore blu.   UITableViewCellStyleValue2: titolo con font blu più piccolo a sinistra e, sulla stessa riga, sottotitolo più grande in grassetto nero. Dr. Paolo Casoto, Ph.D - 2011
  10. 10. + 10 Tabelle e celle Dr. Paolo Casoto, Ph.D - 2011
  11. 11. + 11 Tabelle e celle Dr. Paolo Casoto, Ph.D - 2011
  12. 12. + 12 Tabelle   Quando utilizzare una tabella:   Per mostrare all’utente un insieme di opzioni fra le quali scegliere.  Checkmark   Per consentire una navigazione gerarchica fra un insieme di contenuti.   E.g.: lista delle tipologie di ricette (nazionali, regionali)  lista delle ricette friulane  Frico   Indicatore di Disclosure Dr. Paolo Casoto, Ph.D - 2011
  13. 13. + 13 Tabelle   Mostrare informazioni concettualmente raggruppabili.   Mostrare elenchi di informazioni il cui accesso potrebbe essere reso più agevole dalla presenza di un indice alfabetico.   E.g.: Lista delle ricette accessibili per ordine alfabetico.   Nel caso di utilizzo dell’indice alfanumerico è necessario evitare di utilizzare elementi aggiuntivi all’interno delle celle della tabella.   Fornire all’utente sempre feedback sull’avvenuta selezione di una cella della tabella, anche nel caso in cui si provveda a visualizzare una vista alternativa.   Considerare la possibilità di utilizzare celle dinamiche, in grado di modificare le proprie dimensioni in fase di selezione Dr. Paolo Casoto, Ph.D - 2011
  14. 14. + 14 Tabelle   Fornire all’utente una reattività immediata anche in caso di tabelle chiamate a visualizzare molti dati   Visualizzare prima i contenuti testuali e solo successivamente immagini o contenuti multimediali, ove caricati.   In alternativa caratterizzata la vostra tabella con una vista che descriva all’utente lo stato di caricamento delle informazioni   E.g.: applicazione Facebook, che consente il riempimento progressivo della tabella in accordo all’interazione dell’utente Dr. Paolo Casoto, Ph.D - 2011
  15. 15. + 15 Tabelle Dr. Paolo Casoto, Ph.D - 2011
  16. 16. + 16 Tabelle   Evitare celle con altezza variabile nella modalità piana, preferendovi la modalità raggruppata.   Questa riflessione vale, ad esempio, quando le celle possono riportare contenuti testuali di dimensione variabile, collocati su più righe.   Gli stili value 1 e value 2 sono particolarmente indicati per la modalità di visualizzazione raggruppata.   Mantenere succinte le etichette con contenuti di tipo testuale, per evitare che il testo risulti troncato. Dr. Paolo Casoto, Ph.D - 2011
  17. 17. + 17 Tabelle   Nelle celle di default è importante la brevità, per evitare di troncare informazioni fondamentali.   Nelle celle con sottotitolo è meno critico l’eventuale troncamento della descrizione, poiché per sua natura meno importante per l’utente rispetto alla comprensione dell’elemento.   Nelle celle value1 evitare di avvicinare troppo fra loro titolo e valore, al fine di garantire la corretta leggibilità di entrambi.   Nelle celle value2 evitare la di troncare il testo per non perdere l’allineamento verticale delle componente e la loro leggibilità. Dr. Paolo Casoto, Ph.D - 2011
  18. 18. + 18 Tabelle   Al fine di evitare il troncamento possiamo andare ad operare sia sull’altezza della cella sia su eventuali comportamenti ad hoc per ciascuna celle in accordo con lo specifico testo associato alla cella   E.g.: tronco solo se supera le 2 righe   Attenzione a non ricadere nel problema di tabelle con celle ad altezza variabile.   Se gli stili di default non fanno al caso vostro è comunque possibile definire un proprio stile personale per la visualizzazione delle celle di una tabella Dr. Paolo Casoto, Ph.D - 2011
  19. 19. + 19 UITextView   Una UITextView è una vista finalizzata all’inserimento ed alla visualizzazione di testo su più righe.   Eventualmente è possibile disabilitare l’inserimento del testo, utilizzando la vista in sola lettura   Appare come un rettangolo dai bordi arrotondati con la presenza delle barre di scorrimento ove il contenuto superi la dimensione della vista stessa.   Quando l’utente esegue un tap sulla vista, appare automaticamente la tastiera virtuale con l’opportuna modalità di inserimento Dr. Paolo Casoto, Ph.D - 2011
  20. 20. + 20 UITextView   La UITextView non supporta formattazione del testo in essa contenuto   Un carattere ed uno stile per l’intero testo.   In caso sia necessario visualizzare contenuti com formattazione è opportuno scegliere una vista UIWebView utilizzando contenuti in formato HTML Dr. Paolo Casoto, Ph.D - 2011
  21. 21. + 21 UITextView   La vista può gestire, dalla versione 3.0 di iOS, in modalità automatica il riconoscimento di un insieme di entità presenti all’interno del testo.   In particolare è possibile abilitare la UITextView all’identificazione di:   Link ad indirizzi Web, caratterizzati da un URL completo o parziale;   Indirizzi email;   Numeri di telefono. Dr. Paolo Casoto, Ph.D - 2011
  22. 22. + 22 UIWebView   Vista finalizzata alla visualizzazione di contenuti HTML   Versione utilizzabile all’interno delle proprie app del browser Safari Mobile del quale abbiamo discusso nelle precedenti lezioni.   Presenta tutte le caratteristiche e le limitazioni di Safari Mobile, con la possibilità per il programmatore di consentire all’utente la navigazione fra un insieme di contenuti   Non è presente la barra degli indirizzi: la navigazione risulta forzata ai soli contenuti resi fruibili dal programmatore. Dr. Paolo Casoto, Ph.D - 2011
  23. 23. + 23 UIWebView Dr. Paolo Casoto, Ph.D - 2011
  24. 24. + 24 UIWebView   Utilizzate la UIWebView solo quando è strettamente necessario per la corretta fruizione della vostra applicazione:   Formattazione complessa dei contenuti di un’area di testo, al fine di superare le limitazioni della UITextView   Contenuti dinamici resi disponibili da un server esterno   E.g.: Feed RSS cui la nostra applicazione può avere accesso   Integrazione con componenti ad hoc pre-esistenti   E.g.: form per l’invio di dati sensibili, form per l’invio di ordini   Per navigare c’è già SAFARI MOBILE !!! Dr. Paolo Casoto, Ph.D - 2011
  25. 25. + 25 UIAlertView   Un alert, come abbiamo visto in più occasioni, è una finestra modale che è possibile utilizzare per inviare all’utente informazioni importanti che richiedono la sua attenzione e la sua interazione.   L’utente deve confermare l’alert per chiuderlo e poter utilizzare le funzionalità dell’applicazione   Proprio a causa dell’eccezionalità dell’evento, l’alert appare come una vista non innestata all’interno delle viste esistenti   Vista con sfondo trasparente e messaggio centrale, con asse z > di tutte le altre viste sullo schermo. Dr. Paolo Casoto, Ph.D - 2011
  26. 26. + 26 UIAlertView   Un alert dei seguenti elementi al suo interno:   Uno o più pulsanti   Titolo   Messaggio   Fino a due campi di testi per l’inserimento dei dati, di cui uno dei due con visualizzazione sicura in stile password (con i pallini a sostituire le lettere digitate).   Lo sfondo ed il colore degli alert non possono essere modificati dal programmatore, per coerenza ed uniformità all’interno della piattaforma. Dr. Paolo Casoto, Ph.D - 2011
  27. 27. + 27 UIAlertView   NON ESAGERARE CON GLI ALERT !!!   Sono elementi con un forte impatto cognitivo sull’utente, non utilizzarli per fornire informazioni poco utili o legate al normale corso di utilizzo della applicazione   Trovate altre modalità per attirare lo sguardo dell’utente sulle informazioni importanti Dr. Paolo Casoto, Ph.D - 2011
  28. 28. + 28 UIAlertView   Non utilizzare gli alert per richiedere conferma all’utente sull’esecuzione di azioni potenzialmente pericolose   E.g.: cancellazione di una ricetta   Meglio fare uso di un UIActionSheet   Non utilizzare per descrivere il completamento di una operazione di lunga durata che non ha incontrato errori.   Meglio utilizzare un indicatore di progressione o di attività.   Spesso questa regola è ignorata, soprattutto quando le attività hanno a che fare con download di contenuti di grandi dimensioni. Dr. Paolo Casoto, Ph.D - 2011
  29. 29. + 29 UIAlertView   Non utilizzare gli alert per notificare errori che l’utente non ha modo di risolvere.   E’ più importante notificare all’utente la potenziale soluzione al problema o il comportamento contingente da adottare.   Cercate di mantenere il titolo breve e limitato ad una sola riga.   Evitare contenuti poco significativi come “Errore” o “Attenzione”. E’ un alert, serve a comunicare proprio errori o messaggi, non serve ricordarlo all’utente. Dr. Paolo Casoto, Ph.D - 2011
  30. 30. + 30 UIAlertView   Non mi stancherò mai di ricordare l’importanza dei messaggi all’interno degli alert:   Testi brevi, precisi ed efficaci!!!   Se l’alert ha una funzionalità di conferma (in generale preferitevi gli UIActionSheet per questa finalità) è meglio utilizzare due pulsanti con colori differenti, così disposti:   Azione potenzialmente negativa: pulsante ANNULLA a destra con colore chiaro, in maggior risalto.   Azione potenzialmente positiva: pulsante ANNULLA a sinistra con colore scuro. Dr. Paolo Casoto, Ph.D - 2011
  31. 31. + 31 UIActionSheet   Componente utilizzata per visualizzare un insieme di opzioni relative ad uno specifico compito avviato dall’utente Dr. Paolo Casoto, Ph.D - 2011
  32. 32. + 32 UIActionSheet   Su iPhone l’UIActionSheet appare sempre come una finestra sovrapposta alla app dell’utente, in modalità modale.   I margini laterali ed inferiore sono collegati al bordo del dispositivo   Su iPad l’UIActionSheet appare sempre come PopoverViewController in sovraimpressione rispetto alla applicazione dell’utente. Dr. Paolo Casoto, Ph.D - 2011
  33. 33. + 33 UIActionSheet   L’UIActionSheet è caratterizzato da almeno due pulsanti, la cui pressione ne causa la chiusura e l’esecuzione dell’azione richiesta dall’utente.   Non è presente alcun testo o messaggio descrittivo: le azioni dell’utente devono essere contestuali rispetto all’apparizione del controllo   Fornire azioni alternative che l’utente può attivare in virtù della specifica attività, senza attributire a tali azioni una presenza permanente all’interno dell’interfaccia. Dr. Paolo Casoto, Ph.D - 2011
  34. 34. + 34 UIActionSheet   Richiedere all’utente conferma dell’intenzione di eseguire una specifica azione potenzialmente dannosa   E.g.: cancellazione di un contatto dalla rubrica, cancellazione di un account email   Su iPhone è importante coordinare il colore dell’UIActionSheet con i colori delle barre di navigazione o degli strumenti, al fine di ottenere un risultato graficamente omogeneo   E su iPad ??? Dr. Paolo Casoto, Ph.D - 2011
  35. 35. + 35 UIActionSheet   Su iPhone includere sempre un pulsante per la chiusura della componente senza l’esecuzione di alcuna azione.   Posizionatela sempre per ultima, in modo da forzare gli utenti a leggere le altre alternative   Ricordatevi che l’utente legge dall’alto verso il basso.   Su iPad utilizzate o meno le animazioni a seconda che l’interazione sia iniziata dall’utente all’interno o all’esterno di un popover. Dr. Paolo Casoto, Ph.D - 2011
  36. 36. + 36 UIActionSheet   Utilizzate il colore rosso per le azioni potenzialmente distruttive   Perché rosso, dove trovate questa metafora ???   Non abusatene, poiché perderebbe il suo significato e l’immediatezza visiva.   Ricordatevi sempre che non è opportuno utilizzare liste troppo lunghe di attività e mai e poi mai rendere la lista scrollabile a causa dei troppi elementi. Dr. Paolo Casoto, Ph.D - 2011
  37. 37. + 37 Viste modali   Viste presentate in sovrapposizione alla applicazione con controllo esclusivo dell’interazione utente   L’utente non può interagire con alcun elemento dell’interfaccia collocato su un livello inferiore rispetto alla vista modale   Che cosa vi ricorda (10 slide fa) ???   Una vista modale può occupare differenti aree dello schermo, in particolare su iPad, in accordo con lo specifico utilizzo. Dr. Paolo Casoto, Ph.D - 2011
  38. 38. + 38 Viste modali Dr. Paolo Casoto, Ph.D - 2011
  39. 39. + 39 Viste modali   L’obiettivo principale delle viste modali è consentire l’esecuzione di una attività autoconclusiva che non ha altri elementi di interazione con il resto della app.   E.g.: inviare una mail precompilata da una app per la richiesta di preventivi   E.g.: inviare un SMS precompilato per l’accesso ad un sistema di controllo remoto.   Su iPhone è fondamentale anche per le viste modali, che appaiono a schermo intero, il coordinamento estetico Dr. Paolo Casoto, Ph.D - 2011
  40. 40. + 40 Viste modali   Sull’iPad le viste modali possono apparire in 4 modalità differenti:   Schermo intero: visualizzazione di task complessi   Pagina: visualizzazione 768 px di larghezza ad altezza variabile in accordo con l’orientamento   E.g.: composizione di una mail   Form: vista centrata rispetto allo schermo con dimensione 540 px x 620 px con possibilità di visualizzazione della tastiera virtuale.   Contestuale: dimensionalità della vista corrente, per l’utilizzo all’interno di split o popover controller Dr. Paolo Casoto, Ph.D - 2011
  41. 41. + 41 Viste modali   Su iPad è opportuno evitare di collocare viste modali al di sopra di un popover visualizzato   Meglio chiudere il popover e successivamente visualizzare la vista modale.   Esplicitare sempre il titolo della attività per la quale è stato necessario avviare una vista modale   Fornire feedback all’utente, anche in questo caso, sullo stato della vostra applicazione. Dr. Paolo Casoto, Ph.D - 2011
  42. 42. + 42 Viste modali   Utilizzare uno stile coerente anche per l’animazione da utilizzarsi per la visualizzazione delle viste modali all’interno della vostra applicazione:   Ingresso verticale: apparizione della vista dal basso verso l’alto ed uscita in senso contrario.   Ingresso orizzontale: analoga alla transizione fra i controller all’interno di una navigazione gerarchica basata sulla barra di navigazione.   Pagina curvata: transizione che richiama la metafora del blocco appunti, con visualizzazione della vista modale quale pagina collocata al di sopra della vista attuale. Dr. Paolo Casoto, Ph.D - 2011
  43. 43. + 43 Indicatori di attività   Componente finalizzata alla visualizzazione dell’avanzamento di un task   L’animazione dell’indicatore rappresenta l’esecuzione del task.   Può essere caratterizzato dalla presenza di una eventuale etichetta esplicativa.   Gli utenti non interagiscono con questa tipologia di controllo.   Non indica quanto manca ma solo se l’attività è in corso!!! Dr. Paolo Casoto, Ph.D - 2011
  44. 44. + 44 Indicatori di attività   Utilizzare gli indicatori in particolare nel caso di processi lunghi che potrebbero essere soggetti a blocco o fallimento   E.g.: upload o download di file dalla rete Internet   Non utilizzare l’indicatore senza animazione   Può fornire una informazione erronea ed indicare all’utente che il processo cui fa riferimento è bloccato e non in esecuzione   Gestire opportunamente dimensioni e colori dell’indicatore al fine di garantire l’integrità estetica. Dr. Paolo Casoto, Ph.D - 2011
  45. 45. + 45 Selettore di data / ora   Il componente UIDatePicker è finalizzato alla selezione di un orario o di una data da parte dell’utente.   Composto da un insieme di ruote (fino a 4), ciascuna delle quali associata ad una specifica semantica (e.g.: giorno, mese, anno).   La selezione dell’utente è il risultato del valore delle singole ruote, che l’utente può ruotare con la gesture drag o flick.   La dimensione è fissata e pari a quella della tastiera virtuale su iPhone in modalità portrait Dr. Paolo Casoto, Ph.D - 2011
  46. 46. + 46 Selettore di data / ora Data e orario Orario Dr. Paolo Casoto, Ph.D - 2011
  47. 47. + 47 Selettore di data / ora Data Conto alla rovescia Dr. Paolo Casoto, Ph.D - 2011
  48. 48. + 48 Pulsante di dettaglio   Indica che un elemento della interfaccia grafica, alla pressione, può presentare un insieme di informazioni di dettaglio.   L’informazione di dettaglio è associata, generalmente, in una vista secondaria.   Può essere utilizzato all’interno delle celle di una tabella o all’interno delle annotazioni che possono essere collocate all’interno di una mappa. Dr. Paolo Casoto, Ph.D - 2011
  49. 49. + 49 Pulsante Info   Utilizzato per mostrare una view di informazioni e configurazione della applicazione.   Alla pressione varia automaticamente la luminosità del pulsante stesso.   Sull’iPhone l’utilizzo del pulsante Info tipicamente rivela una schermata di configurazione sul retro della schermata corrente.   Non è adatto all’utilizzo su iPad. Meglio utilizzare lo spazio fornito dallo schermo di dimensione maggiore. Dr. Paolo Casoto, Ph.D - 2011
  50. 50. + 50 Etichetta (UILabel)   Consente la visualizzazione di testo statico, non modificabile dall’utente (ma dal programmatore via codice).   Utilizzata generalmente per mostrare piccole porzioni di informazione   Importante mantenere sempre la leggibilità dell’etichetta !!!   Non rinunciate alla leggibilità a favore di colori e caratteri caratterizzati da scarsa leggibilità. Dr. Paolo Casoto, Ph.D - 2011
  51. 51. + 51 Indicatore dell’attività di rete   Indica l’utilizzo della connettività Internet da parte di una delle applicazioni del sistema.   Non ha alcuna interazione con l’utente e sparisce al termine del processo di download dei dati.   Da utilizzare solo nel caso in cui prevediate che il trasferimento dei dati posso richiedere più di un paio di secondi.   In caso contrario l’utilizzo dell’indicatore non è consigliato, poiché di durata inferiore rispetto alla lunghezza dell’animazione Dr. Paolo Casoto, Ph.D - 2011
  52. 52. + 52 Indicatore di pagina   L’indicatore di pagina è utilizzabile quando vi sono, all’interno di una schermata, più oggetti delle quali uno solamente risulta visibile.   Un pallino per ciascuna pagina disponibile, con il colore bianco per la pagina selezionata.   Selezionando un pallino la pagina associata è selezionata e resa visibile.   I pallini non possono essere variati in dimensione e colore, vincolando l’utilizzabilità del componente allo sfondo utilizzato dalla applicazione   In modalità ritratto è possibile ospitare fino ad un massimo di 20 pallini.   Eventuali pagine in più saranno posizionate al di fuori dei margini dello schermo. Dr. Paolo Casoto, Ph.D - 2011
  53. 53. + 53 Indicatore di pagina   Da utilizzare per visualizzazioni orizzontali e non quale alternativa alla navigazione gerarchica   Ho più pagine a disposizione su un unico livello.   E’ opportuno centrare l’indicatore verticalmente rispetto al margine inferiore della vista aperta ed al margine inferiore della applicazione, ove non incide sulla visibilità delle informazioni presentate dalla vista pur rimanendo accessibile agli utenti.   In generale da evitare su iPad Dr. Paolo Casoto, Ph.D - 2011
  54. 54. + 54 Picker   Visualizza un insieme di valori generici fra i quali l’utente può effettuare la selezione. Dr. Paolo Casoto, Ph.D - 2011
  55. 55. + 55 Picker   Versione generica del selettore di data ed ora, con i medesimi vincoli all’aspetto grafico   Colore, dimensione vincolata alla tastiera virtuale   Da utilizzare quando gli utenti hanno familiarità con i valori contenuti all’interno del selettore   La maggior parte dei valori, infatti, risulta non visibile agli utenti, a differenza delle tabelle.   Non sono il controller indicato per grandi quantità di dati che possono variare in maniera dinamica (preferire una tabella)   Utilizzare una barra di selezione translucida per mostrare informazioni contestuali rispetto alla selezione, al di fuori del picker.   Su iPad è preferibile, a causa delle dimensioni, utilizzare il picker solo all’interno di un popover controller. Dr. Paolo Casoto, Ph.D - 2011
  56. 56. + 56 Progress View   Vista finalizzata ad evidenziare lo stato di avanzamento di un processo o di una attività.   Due stili differenti di visualizzazione:   Default: barra bianca con dimensione tale da renderla ideale come contenuto principale della schermata;   Barra: versione ristretta, da integrarsi all’interno di una barra degli strumenti.   La barra scorre da sinistra a destra rappresentando, in percentuale, lo stato di avanzamento del processo.   L’utente non ha alcuna interazione con la barra.   Personalizzabile in termini di colore o immagine da utilizzare per il riempimento, al fine di renderla maggiormente aderente con la propria applicazione Attenzione: solo il thread principale può Dr. Paolo Casoto, Ph.D - 2011 aggiornare la barra !!!
  57. 57. + 57 UIButton   Elemento fondamentale per l’interazione con il sistema da parte dell’utente   Cattura il tap dell’utente su una specifica area dello schermo.   3 modalità:   Rettangolo arrotondato: modalità di default per la visualizzazione dei pulsanti   Custom: pulsante trasparente, che può essere personalizzato dall’utente mediante definizione delle immagini di sfondo al pulsante o mediante la definizione dell’immagine principale   Nel caso non si voglia utilizzare il campo titolo del pulsante Dr. Paolo Casoto, Ph.D - 2011
  58. 58. + 58 UIButton   Pulsante di sistema: associato ad un insieme di icone o di testi standard, utilizzati dalle applicazioni di sistema   Mantenere elevato il tasso di consistenza fra le applicazioni (testi ed icone)   Per ciascun pulsante posso definire il modo in cui appare in 4 stati differenti:   Normale;   Rollover: come appare il pulsante quando l’utente sta effettuando il tap sul pulsante stesso;   iOS genera un effetto feedback di default anche senza l’implementazione del rollover Dr. Paolo Casoto, Ph.D - 2011
  59. 59. + 59 UIButton   Selezionato: utilizzata per gestire i pulsanti in modalità interruttore   Il pulsante cambia stato a seguito della pressione passando, ad esempio, da on ad off.   Disabilitato: il pulsante è visibile ma non può essere utilizzato dall’utente.   E.g.: disattivo il tasto “Nuovo libro” quando l’utente ha superato il numero massimo di libri che possono essere aggiunti alla sua applicazione per la gestione della propria biblioteca domestica. Dr. Paolo Casoto, Ph.D - 2011
  60. 60. + 60 UIButton   Mantenere i titoli contenuti e con iniziali di ciascun termine significativo in maiuscolo.   Garantire la leggibilità di font e colori utilizzati per i titoli.   Consente la gestione di molteplici varianti dell’evento tap   E.g.: tocco al di fuori della superficie, inizio tocco, et al. Dr. Paolo Casoto, Ph.D - 2011
  61. 61. + 61 Barra di ricerca   Componente che consente all’utente di inserire un testo da utilizzare nell’ambito di una ricerca testuale.   Riporta per default l’icona della ricerca (lente) sul lato sinistro.   Alla pressione della barra la tastiera virtuale appare automaticamente.   La barra di ricerca può includere, inoltre, un insieme di elementi aggiuntivi da utilizzare per fornire all’utente un insieme più ampio di funzionalità:   Placeholder: testo finalizzato ad informare l’utente sullo stato del controllo o sulle attività che possono essere eseguite. Dr. Paolo Casoto, Ph.D - 2011
  62. 62. + 62 Barra di ricerca   Preferiti: pulsante che consente all’utente di accedere ad informazioni preferite alle quali è opportuno accedere con rapidità.   E.g.: locazioni preferite, contatti preferiti, et al.   Pulsante clear: consente all’utente di svuotare il campo di ricerca e ripristinare lo stato della ricerca. E   x grigia all’interno di un cerchio sul lato destro del campo di inserimento testuale.   Icona dei risultati: mostra all’utente una informazione immediata sui risultati prodotti dalla ricerca Dr. Paolo Casoto, Ph.D - 2011
  63. 63. + 63 Barra di ricerca   Prompt: consente di sovrapporre alla barra di ricerca un eventuale titolo esplicativo.   Utilizzate sempre barre di ricerca nelle vostre applicazioni, mai campi testuali   Mantenere la consistenza con le applicazioni di sistema.   In generale la barra è posizionata nella parte più in alto dello schermo, soprattutto in caso di utilizzo congiunto con tabelle di elementi   Rende la barra maggiormente evidente per l’utente. Dr. Paolo Casoto, Ph.D - 2011
  64. 64. + 64 Barra di ricerca   La barra di ricerca può essere ulteriormente arricchita da una barra che determina il contesto di ricerca.   E.g.: ricerca fra i messaggi di posta in arrivo all’interno di una app che funge da client mail.   Prende il nome di scope bar   Dimensione e posizione possono variare in accordo con l’orientamento del dispositivo   Da utilizzarsi quando la ricerca può richiedere la presenza di un parametro che determina il contesto della ricerca   Senza dover ricorrere ad un Segmented control   Lo scopriremo nella prossima slide… Dr. Paolo Casoto, Ph.D - 2011
  65. 65. + 65 Segmented Control   Insieme di pulsanti di dimensione proporzionale al loro numero, disposti linearmente, con selezione esclusiva   Quando uno dei pulsanti è selezionato, automaticamente gli altri pulsanti del controllo sono deselezionati.   Attenzione alla lunghezza del testo di ciascun pulsante:   La lunghezza è uguale per tutti i pulsanti del controllo, indipendentemente dal testo che ospitano.   Garantire per ciascun pulsante una superficie di almeno 44x44 punti   Vi ricordate perché parlo di punti e non di pixel ??? Dr. Paolo Casoto, Ph.D - 2011
  66. 66. + 66 Segmented Control   Un pulsante del segmented control può contenere immagini e testo ma non contemporaneamente.   Mantenere la consistenza fra i pulsanti: se decidete di utilizzare le immagini al posto del testo fatelo per tutti i pulsanti e viceversa.   Da utilizzarsi per richiedere all’utente di svolgere specifiche selezioni mutualmente esclusive, con un numero ridotto di possibili scelte.   Oltre 4 pulsanti il controller risulta di difficile utilizzo e lettura. Dr. Paolo Casoto, Ph.D - 2011
  67. 67. + 67 Slider   Una slider è un controllo utilizzato per variare un valore numerico all’interno di uno specifico intervallo.   Muovendo la componente circolare della slider l’utente ne può variare il valore.   Utilizzabile sia in verticale sia in orizzontale.   E’ possibile definire le immagini agli estremi della slider al fine di rendere maggiormente esplicito il significato dai valori all’estremo dell’intervallo.   In generale personalizzate la slider solo se necessario a migliorare l’efficacia della vostra UI. Dr. Paolo Casoto, Ph.D - 2011
  68. 68. + 68 Stepper   Variante dello slider, utilizzato per modificare valori numerici di una quantità costante.   Da utilizzarsi in particolare quando la variabilità dei dati è relativamente bassa e non richiede una operatività semplificata come nel caso della slider   E.g.: numero delle stampe. Difficilmente gli utenti ne chiederanno più di una copia… Dr. Paolo Casoto, Ph.D - 2011
  69. 69. + 69 Switch   Interruttore per la gestione di informazione booleana con mutua esclusione.   Basato su una metafora semplice e comune a tutti gli utenti, quella degli interruttori degli elettrodomestici:   E.g.: On/Off   Può essere personalizzato ma, come per i controlli precedentemente descritti, solo se necessario. Dr. Paolo Casoto, Ph.D - 2011
  70. 70. + 70 UITextField   Concludiamo la carrellata con uno dei componenti fondamentali, il campo di inserimento testuale a singola riga   Ricordate che per la gestione di righe multiple abbiamo visto insieme il componente UITextArea.   Rettangolo dai bordi arrotondati con tastiera virtuale che compare automaticamente in caso di selezione da parte dell’utente.   Possibilità di specializzare l’aspetto della tastiera in accordo con la specifica semantica del campo di testo.   E.g.: campo “telefono” che consente l’inserimento di soli numeri. Dr. Paolo Casoto, Ph.D - 2011
  71. 71. + 71 UITextField   Deve essere la scelta ultima per l’inserimento dell’input da parte dell’utente   Scrivere è una attività onerosa dal punto di vista cognitivo, soprattutto nel caso della tastiera virtuale.   Preferire inserimento di informazioni mediante liste o picker !!!   E’ possibile semplificare l’attività dell’utente utilizzando un testo di aiuto all’interno del campo che ne descriva la semantica all’utente.   Testo in grigio che sparisce in fase di inserimento da parte dell’utente. Dr. Paolo Casoto, Ph.D - 2011
  72. 72. + 72 Icone e pulsanti di sistema Da utilizzarsi all’interno delle barre di navigazione e delle barre degli strumenti Visualizzabili in modalità piana o bordata Dr. Paolo Casoto, Ph.D - 2011
  73. 73. + 73 Icone e pulsanti di sistema Dr. Paolo Casoto, Ph.D - 2011
  74. 74. + 74 Icone e pulsanti di sistemaIl testo è tradotto inautomatico da iOSnelle diverse linguedei dispositiviutente Dr. Paolo Casoto, Ph.D - 2011
  75. 75. + 75 Icone di sistema della tabbar Dr. Paolo Casoto, Ph.D - 2011
  76. 76. + Domande ??? Grazie a tutti per l’attenzione Dr. Paolo Casoto, Ph.D - 2011

×