Modello di design per dispositivi mobili

Questo articolo illustra cosa contiene il modello di interfaccia utente e per quali scopi può essere utilizzato.

Scopo

Lo scopo di questa app è aiutare gli sviluppatori a creare applicazioni mobili intuitive, coerenti e ottimizzate. Realizzando app pensate appositamente per l’esperienza mobile, queste diventano più utili sui dispositivi mobili.

L’app fornisce un esempio di come si presenta un’applicazione Tulip e mostra layout di passaggi comuni che possono essere utilizzati nelle applicazioni. Descrive gli elementi che un layout di base, un’intestazione e un piè di pagina dovrebbero contenere, rendendo più facile per gli sviluppatori di app iniziare a lavorare con le applicazioni Tulip. Il modello semplifica notevolmente la creazione delle app, consentendo agli sviluppatori di copiare e incollare i layout delle schermate nelle proprie applicazioni. Ciò non solo fa risparmiare tempo, ma garantisce anche un aspetto uniforme per tutte le app realizzate utilizzando questa guida.

Configurazione

La risoluzione è fondamentale per le app mobili a causa dell’ampia gamma di dimensioni dello schermo sui diversi dispositivi. L’app offre attualmente due opzioni per le impostazioni mobili: “Mobile Landscape” e “Mobile Portrait”. Per i dispositivi mobili più recenti, si consiglia di utilizzare le risoluzioni 19,5:9 in verticale e 19,5:9 in orizzontale.

Panoramica delle funzionalità

I primi 6 passaggi fungono da guida alla progettazione, illustrando i colori, i pulsanti, le icone dei pulsanti e la tipografia utilizzati nelle applicazioni. Definendo questi elementi, diventa più facile mantenere un’interfaccia coerente all’interno di un’azienda o di un’istanza.

Nella fase "Colori", gli utenti possono visualizzare tutti i colori utilizzati nella creazione dell’applicazione, insieme ai corrispondenti codici esadecimali. Se è necessario applicare una modifica di colore in più fasi, è possibile salvare qualsiasi colore come variabile per garantire la coerenza in tutta l’app.

Le fasi «Pulsanti» e «Icone dei pulsanti» definiscono i pulsanti di uso comune sia per le app in modalità chiara che in modalità scura, insieme alle relative icone. Le icone dei pulsanti possono essere utilizzate insieme al testo per migliorare la leggibilità e risparmiare spazio quando il significato dell’icona è immediatamente chiaro. Ogni icona dovrebbe avere un significato coerente in tutte le fasi dell’app e, idealmente, in tutte le app presenti nell’area di lavoro.

L’ultima fase di questa sezione è quella dedicata alla tipografia, che definisce le dimensioni e gli stili dei caratteri per i titoli e i testi dei paragrafi. Per le app mobili, si raccomanda di mantenere la dimensione dei caratteri superiore a 20px e di garantire un elevato contrasto con lo sfondo per una migliore leggibilità.

La sezione successiva aiuta gli sviluppatori di app a progettare il layout di base più adatto alla propria app. Fornisce diverse intestazioni e piè di pagina che possono essere copiate e incollate nel layout di base. L’aggiunta di una barra di navigazione al layout di base migliora il flusso di lavoro degli utenti, consentendo loro di passare a diverse fasi, aggiornare la pagina o controllare lo stato delle macchine. Lo sviluppatore dell’app può scegliere se utilizzare il layout di base con tema chiaro o scuro.

L’app include inoltre una serie di passaggi per i modelli di fase e una serie di passaggi per i layout di fase. Questi includono menu, finestre modali, istruzioni di lavoro, acquisizione di immagini e altro ancora.

Ulteriori approfondimenti

Per conoscere le migliori pratiche di progettazione delle app, consulta l'articolo qui.

Per saperne di più sulla progettazione di applicazioni per dispositivi mobili , consulta la discussione della community sulle migliori pratiche relative all’interfaccia utente (UI) e all’esperienza utente (UX) su dispositivi mobili.