Introduzione a iPhone Design

Questo post è il primo di una serie di iPhone Design in 10 parti su Mobiletuts +. Ogni settimana, ci tufferemo in una varietà di aspetti su come progettare interfacce mobili belle e utilizzabili per iOS. Per ricevere un promemoria ogni volta che arriva un nuovo post in questa serie, assicurati di iscriverti tramite email o il nostro feed RSS!

Panoramica della serie

Sei un web designer, eccitato dall'idea di progettare app per iPhone, ma non sei sicuro di come iniziare? O forse hai progettato un paio di app, ma stai cercando di migliorare le tue abilità con alcune conoscenze fondamentali sul perché prendiamo certe decisioni di design per i dispositivi mobili? Questa serie è pensata sia per i designer alle prime armi che per i designer di livello intermedio che vogliono fare un grande successo nello spazio di progettazione mobile!

Gli argomenti che puoi guardare avanti in questa serie includono sia le tecniche pratiche che gli esempi, nonché la teoria del design correlata al mobile. Quello che segue è un elenco di ciò che copriremo nel corso di questa serie:

  • Progettare per il pubblico di iPhone e l'App Store
  • Come utilizzare i modelli di design per iPhone e iPad
  • Progettazione di app che utilizzano tutte le funzionalità iPhone disponibili
  • Come progettare per i diversi tipi di app per iPhone
  • Il processo di progettazione mobile
  • I pro e i contro dell'utilizzo di Apple Default vs. Grafica personalizzata
  • Comprensione del pubblico di destinazione dell'app
  • Suggerimenti per la progettazione di icone per iPhone e iPad
  • Strumenti di Mockup per iPhone e il processo Wireframing
  • Creazione di schermate e icone per iTunes

Progettare per Mobile vs Web

Non posso semplicemente iniziare a progettare app? Dopotutto, progettare per dispositivi mobili è solo progettare per uno schermo più piccolo, giusto?

Non proprio. La progettazione per dispositivi mobili è diversa dalla progettazione di siti Web o applicazioni desktop e le differenze si stanno moltiplicando rapidamente poiché un maggior numero di dispositivi mobili con funzionalità aggiuntive e considerazioni hardware univoche colpiscono il mercato. Diamo un'occhiata alle differenze tra la progettazione di web e mobile per ottenere una migliore comprensione di come gli utenti interagiscono con ciascuna piattaforma.

Progettare per il Web

Ai fini di questo articolo, il termine "web" si riferisce a siti Web e applicazioni Web basati su laptop / desktop. Quando progettiamo applicazioni basate sul web, in genere l'hardware su cui verrà visualizzato il nostro design è dato per scontato. Non abbiamo intenzione di raccogliere, inclinare o toccare i nostri monitor o laptop. In effetti, le interazioni tattili sono in genere limitate a:

  • Clic del mouse
  • Combinazioni di tasti
  • Ingresso microfono
  • Uscita audio altoparlante

Progettare per dispositivi mobili

Il cellulare è una bestia completamente diversa. Non solo lavoriamo con hardware nuovo e diversificato, ma il design mobile ha anche il potenziale per influire emotivamente in modi molto diversi. Il mobile è una piattaforma personale e incentrata sulla persona. Dopo tutto, pensa a ciò che chiamiamo molti di questi dispositivi: telefoni. Si adattano alla nostra mano, alla nostra tasca o accanto al nostro portafoglio. Li usiamo per fare telefonate e socializzare, e sono quasi sempre dalla nostra parte. Questi fattori influenzano tutti la nostra percezione emotiva del dispositivo.

In termini di capacità hardware, ci sono un sacco di punti di interazione che influenzano direttamente le considerazioni sulla progettazione. Questi includono:

  • Rilevamento dei gesti (pizzico, tocco, trascinamento, ecc.)
  • Rilevamento singolo e multi-touch (consente l'interazione diretta con il contenuto)
  • Su schermo, tastiera software o wireless, tastiera fisica
  • Ingresso microfono (spesso utilizzato per attività come la navigazione)
  • Uscita audio altoparlante
  • Informazioni e feedback di localizzazione

Sei un buono per il cellulare?

Come designer abbiamo tutti punti di forza e di debolezza, aree di competenza e aree di disinteresse. Prima di saltare alle basi di iPhone Design, è una buona idea guardare le caratteristiche dei designer mobili di talento.

La buona notizia è che puoi imparare questo. La domanda è: quanto sei interessato a farlo? La progettazione per i dispositivi mobili richiede una dedizione per l'esperienza utente al di là di qualsiasi altra cosa di cui sia stato testimone nella progettazione per il web. Raramente creiamo interfacce mobili pensate per essere considerate e apprezzate puramente per il valore estetico. La grande maggioranza delle interfacce mobili è orientata ai compiti e focalizzata sull'utente.

La verità è che, con la maggior parte delle app mobili basate sull'utilità, le persone non guardano il tuo progetto da molto tempo. Se lo sono, hai fatto qualcosa di sbagliato, e se non riescono a capire come aggirare ciò che hai fatto di sbagliato abbastanza velocemente, se ne vanno. Cancellano. Poi scrivono una brutta recensione.

I designer che hanno la transizione più semplice verso i dispositivi mobili sono quelli che adottano un elevato standard di usabilità e creatività. L'idea che progettare per l'esperienza utente in qualche modo offusca in qualche modo il potenziale creativo è l'esatto opposto della realtà.

Progettare per dispositivi mobili è uno dei campi da gioco più eccitanti e creativi in ​​circolazione per i progettisti di oggi. È letteralmente un campo di gioco aperto, maturo per l'innovazione. Per spiegare cosa vuol dire essere un designer di dispositivi mobili, è meglio dare un'occhiata alla storia del design del prodotto.

Prima di poter acquistare un dispositivo mobile che eseguiva più attività, avevamo un prodotto che soddisfaceva un compito. Un telefono a toni, una sveglia, una torcia elettrica - ognuno di questi oggetti individuali richiedeva un team di sviluppo prodotto dedicato, un designer e un marketer.

Oggi, ovviamente, tutte queste attività possono essere eseguite su un solo dispositivo. Piuttosto sorprendente! Ciò che è bello è la stessa pianificazione, l'attenzione per i dettagli e il design estetico che sono stati inseriti nel telefono, l'orologio e la torcia di ieri sono ancora oggi dedicati a ciascuna di queste app!

Pensa non solo a "c'è un'app per questo", e invece a "c'è un prodotto per questo". Non stai solo progettando app. Stai progettando prodotti.

Il mobile è una tela vuota

La cosa più eccitante del design per i dispositivi mobili è che la maggior parte delle volte si sta lavorando da una tela veramente vuota. Naturalmente, ci sono regole di progettazione fondamentali e universali da considerare, ma la verità è che molte delle regole e delle aspettative di progettazione relative al mobile sono ancora in fase di definizione.

La sfida per i progettisti è quella di creare progetti che siano fedeli all'utente, al marchio e al compito da svolgere. A volte, ciò significa utilizzare controlli standard e fornire un'interfaccia puramente utilitaria. Altre volte significa ignorare tutti gli standard e creare un design completamente unico. In entrambi i casi, l'utente deve comprendere intuitivamente come utilizzare l'app in un istante.

Quale software devo utilizzare per progettare le app?

Questa è la prima domanda che i designer nuovi su mobile sembrano chiedere. Buone notizie, pixel pushers: è Photoshop! Detto questo, con la proliferazione di dispositivi, dimensioni dello schermo e risoluzioni, forme vettoriali (o oggetti vettoriali intelligenti) sono anche una parte importante della progettazione di dispositivi mobili.

La mia preferenza personale è creare forme vettoriali in Illustrator e copiare e incollare quegli oggetti in Photoshop come livello forma. Per gli oggetti vettoriali che non sono eccessivamente complessi, preferisco questo metodo sull'uso di oggetti intelligenti, quindi non cambio continuamente avanti e indietro da Photoshop a Illustrator.

Ci occuperemo di tutti i dettagli delle varie dimensioni dello schermo, risoluzioni, tipi di file immagine e dimensioni delle aree tocco in un altro post di questa serie: "Come utilizzare i modelli di progettazione per iPhone e iPad".

Come sono fatte le app?

Le app per iPhone sono state sviluppate utilizzando diversi metodi. Ci tufferemo in "Come progettare per diversi tipi di app iPhone" in un post successivo, ma, in generale, le app per iPhone sono scritte nel linguaggio di programmazione Objective-C utilizzando un programma Apple chiamato Xcode. Apple ti fornisce tutto il software di sviluppo di cui hai bisogno per creare un'app gratuitamente quando ti registri come sviluppatore Apple. Tuttavia, per installare il software, è necessario un computer Apple con l'ultima versione del sistema operativo OS X. Un'ulteriore considerazione è che per poter effettivamente creare e testare le applicazioni su un dispositivo fisico iPhone o iPod touch, è necessario iscriversi al programma Apple Developer e pagare una tassa annuale di $ 99 USD.

Perché alcune app sono basate su modelli e alcune progettate su misura?

Le app che vedi che sono "basate su modelli" di solito utilizzano gli elementi dell'interfaccia utente predefiniti forniti da Cocoa-Touch e seguono le linee guida standard per l'interfaccia utente di Apple. Queste linee guida definiscono standard grafici e schemi di utilizzo per gli elementi dell'interfaccia utente predefiniti e semplificano la creazione e la progettazione di un'app da parte di qualsiasi sviluppatore. In genere, si vede una barra di tabulazione nera nella parte inferiore e una barra di navigazione con titolo lungo la parte superiore. Le schede ti portano a diverse categorie di informazioni, mentre la barra di navigazione ti aiuta a navigare all'interno di tali categorie.

Le app che vedi che non incorporano gli elementi dell'interfaccia utente standard sono state progettate appositamente. Quasi tutti i giochi casual e seri sono progettati su misura e alcuni strumenti divertenti e app di utilità incorporano anche una grafica personalizzata.

La decisione di utilizzare la grafica personalizzata rispetto alla grafica standard si basa spesso sul budget complessivo disponibile per il progetto. Non è sufficiente avere il budget per progettare la grafica personalizzata; un budget deve esistere anche per uno sviluppatore per implementare la grafica personalizzata. L'integrazione personalizzata della progettazione di app può a volte essere molto difficile per lo sviluppatore o il team di sviluppo e tale ora può essere sommata!

Considerato il tempo e il denaro necessari per creare un'interfaccia utente personalizzata, è importante considerare la quantità di elementi grafici personalizzati per migliorare effettivamente l'esperienza utente oltre a quella disponibile con gli elementi dell'interfaccia utente forniti da Apple. Un buon esempio di un'app che fa solo una piccola cosa e che non ha davvero bisogno di molto design personalizzato è UDID Sender. Questa app acquisisce l'UDID dei tuoi dispositivi (simile al tag di licenza del tuo iPhone) e invierà un'e-mail a uno sviluppatore in modo da poter installare versioni di app pre-release per il beta testing. Questo tipo di app non ha davvero bisogno di grafica personalizzata.

Pronto per immergersi?

Grande! Il prossimo post di questa serie ti lascerà bagnare i piedi giocando con alcuni modelli di design prefabbricati. Ti illustrerò alcune nozioni di base su come progettare la tua prima app, compresi gli standard, le best practice e le regole e le regole di progettazione di base per i dispositivi mobili.

Un'offerta speciale di Jen Gordon @Tapptics

Inviami una e-mail e ti invierò un buono sconto del 20% per i download di anni su Tapptics!