Concetto
Il concetto iniziale per questo progetto di design dell'interfaccia HMI è stato ispirato da un paesaggio cyberpunk futuristico che combina minimalismo e tecnologia all'avanguardia. Ispirandosi all'estetica high-tech e illuminata al neon del cyberpunk, il design mira a creare un'interfaccia visivamente accattivante ma allo stesso tempo intuitiva, che immerga il conducente in un ambiente futuristico. La sfida era bilanciare elementi visivi dinamici e high-tech con la praticità richiesta in un cruscotto automobilistico, assicurando che tutte le informazioni vitali fossero immediatamente accessibili senza sopraffare l'utente.
Dall'esplorazione visiva ai rendering 3D
L'esplorazione visiva si è concentrata sulla fusione di gradienti neon con sfondi scuri, sperimentando effetti di luce per trasmettere la tecnologia avanzata del veicolo. Le rendering 3D hanno simulato superfici riflettenti e illuminazione dinamica per impostare il tono degli schermi finali.
Convergenza nello stile finale
Gli elementi di design si sono fusi in uno stile visivo coeso, mescolando un'illuminazione al neon elegante, gradienti dinamici e una tipografia moderna. La coerenza è stata fondamentale, con ogni schermo che si integrava perfettamente nell'estetica generale, garantendo un'esperienza equilibrata e facile da usare. L'interfaccia ora emana sia tecnologia avanzata che un'atmosfera futuristica, allineandosi perfettamente con l'identità del veicolo.
Progettazione delle schermate finali
L'interfaccia finale è stata progettata con un focus su metriche chiave, come velocità, percentuale di carica e consumo di energia. Il layout è stato semplificato, con le informazioni posizionate per un facile accesso e leggibilità. Sono stati introdotti elementi interattivi e sottili animazioni per migliorare il coinvolgimento degli utenti, garantendo un'estetica pulita e moderna pur mantenendo la usabilità.
Sistema di Token di Design per Honda e Acura
Token di Design
Il principale obiettivo era quello di stabilire un framework di token di design che racchiudesse sia gli elementi visivi che interattivi di Honda e Acura. Il framework mirava a semplificare i processi di design e sviluppo per entrambi i marchi, garantendo un esperienza utente coesa attraverso i rispettivi sistemi di infotainment. Creando un sistema condiviso di token (come colori, tipografia, specifiche di layout), il linguaggio di design poteva essere facilmente scalato e personalizzato in base all’identità di ciascun marchio.
Tassonomia
Abbiamo introdotto una tassonomia dei token di design per strutturare e categorizzare i componenti del sistema. Questa tassonomia è stata fondamentale per organizzare i token di design in modo strutturato e scalabile. I componenti sono stati categorizzati in tre livelli principali:
Globale: Token che si applicano sia a Honda che ad Acura (ad es., tipografia, colori principali).
Unico: Token specifici del marchio (ad es., layout, stili dei componenti) che riflettono le identità individuali di ciascun marchio.
Fondamentale: Documentazione essenziale, comprese le convenzioni dei nomi, per una facile manutenzione e chiarezza.
Questa tassonomia ha aiutato a garantire che ogni token fosse correttamente categorizzato per un uso efficiente e una futura scalabilità.
Sfide
Durante lo sviluppo di questo sistema, abbiamo incontrato diverse sfide:
Personalizzazione del Marchio: Abbiamo dovuto trovare il giusto equilibrio nell'adattare i token per soddisfare le uniche esigenze di Honda e Acura, mantenendo comunque un framework di design complessivamente coerente.
Gerarchia dei Componenti: Chiare convenzioni di nomenclatura e categorizzazione erano necessarie per l'organizzazione efficace dei token di design.
Token Globali vs. Unici: Trovare il giusto equilibrio tra elementi globali condivisi (come la tipografia) e componenti specifici del marchio è stato fondamentale per mantenere l'individualità di entrambi i marchi.
Gestione dei File: Garantire una struttura organizzata per i file di Figma e gestire il controllo delle versioni era cruciale per mantenere il sistema snello.
Compatibilità Multipiattaforma: Garantire che i token di design funzionassero senza problemi su diverse piattaforme, assicurando coerenza nell'esperienza, indipendentemente dal dispositivo.
Una tassonomia ben strutturata era fondamentale per gestire efficacemente la complessità del sistema di design. Ha fornito chiarezza su come i token di design venivano categorizzati, denominati e organizzati, consentendo una migliore collaborazione tra i team e abilitando la futura crescita del sistema.
Convenzione di Nominazione dei Token di Design
Come parte del nostro lavoro con Honda e Acura, abbiamo stabilito una convenzione di denominazione dei token di design per garantire chiarezza, coerenza e scalabilità all'interno del sistema. Il formato di denominazione segue un approccio strutturato e gerarchico, che consente aggiornamenti senza soluzione di continuità, facile identificazione dei componenti e collaborazione efficiente. Di seguito è riportato il formato utilizzato per la denominazione dei token di design:
Formato di Denominazione:
[Categoria] / [Elenco Componenti] / [Tipo] / [Variante] / [Stato] / [Tema]
Il nome del token di design per "Azioni / Pulsante / Primario / Hover / Scuro" seguirebbe la convenzione di denominazione e apparirebbe così:
ACT/Pulsante/Primario/Hover/Scuro
Spiegazione:
ACT: Prefisso per Azioni (rappresenta la categoria)
Pulsante: Elenco componenti (elemento pulsante)
Primario: Tipo (stile primario)
Hover: Stato (effetto hover)
Scuro: Tema (variante modalità scura)