I segreti per un design efficace basato su schede
Vuoi entrare in moda con un'interfaccia in stile carta? Questa è probabilmente una grande idea; le carte sono un'opzione popolare e user-friendly per tutti i tipi di design digitale su varie dimensioni del dispositivo.
La chiave del design di una carta è la creazione di qualcosa che gli utenti vogliono fare clic. (Questa è la chiave per una grande carta.) Una carta dovrebbe servire come contenitore per un determinato bit di contenuto - collegamento di contenuto, registrazione, lettore video e così via - con cui gli utenti vogliono interagire.
Ecco come lo progettate ...
Inizia con un contorno bianco e nero
Sembra piuttosto semplice: inizia con un wireframe bianco e nero per il design. Pensa all'intento della carta e quali parti di essa saranno cliccabili o toccabili. (L'intera carta può fungere da collegamento).
Pianifica elementi come spaziatura, immagini e tipografia in modo che tu possa vedere la carta senza colore o abbellimenti. Pensala come la fase della carta da gioco del design. Ci sono tutti gli elementi della carta. Sembra una struttura facile da capire?
Pensa a come lo useresti da questo stadio. Dove clicchi per un'azione? Il modello e il risultato sono chiari? Come fai a tornare o avanzare? Le risposte a queste domande dovrebbero essere pertinenti senza spunti come un pulsante rosso "clicca qui" che lampeggia sullo schermo.
Come per qualsiasi altro progetto, se la struttura non funziona in bianco e nero, probabilmente il design finale non funzionerà.
Usa la spaziatura esagerata
La sfida più grande quando si tratta di carte è la creazione di un design compatto che non si senta ingombra. È qui che lo spazio bianco entra in gioco. E vorrai usarne di più di quanto possa sembrare comodo all'inizio.
L'aggiunta di spazi bianchi darà agli elementi più spazio per respirare, rendendo la card complessiva più spaziosa e aumentando la leggibilità.
In generale, potresti voler iniziare con il doppio della spaziatura che potresti normalmente considerare tra gli elementi. Le grondaie dovrebbero essere molto larghe e l'interlinea potrebbe utilizzare anche la stanza in più. Lo spazio extra ti aiuterà a creare un design aperto e ad organizzare il contenuto in modo più chiaro. La scheda ha una trama piuttosto limitata e dovrebbe essere contenuta in un unico schermo su un telefono e una porzione dello schermo di dimensioni simili su dispositivi più grandi come tablet o desktop. Le carte possono anche competere con altre carte per l'attenzione su schermi più grandi. Gli spazi bianchi aggiunti aiuteranno l'intero design a sentirsi più aperto e facile da esplorare.
Aggiungi colori e sfumature naturali
Ora sei pronto per pensare al colore e all'ombreggiatura per il design. Mantieni l'aspetto naturale e imita la realtà nelle ombre e negli stili del design.
No, non stiamo parlando di skeuomorphism qui, stiamo parlando di creare colori con contorni e ombre naturali. Pensa a come verrà visualizzata una carta. L'utente dovrebbe avere la stessa sensazione che se lo tenesse effettivamente in mano.
Usa alcune delle regole di base della fisica per immaginare (e progettare) ogni carta come si terrebbe:
- L'illuminazione dovrebbe gettare alcune ombre sul retro e sul fondo.
- La parte più scura del design è probabilmente nella parte inferiore, grazie alle condizioni di illuminazione, che normalmente provengono dall'alto.
- Evita il contenuto nelle aree che sono necessarie per tenere la carta.
- I touchpoint (e gli inviti all'azione associati) dovrebbero essere punti focali e facili da interagire. (Proprio come il volto di una carta da gioco è al centro del design.)
- Una carta equivale a un bit di informazione.
Crea semplici livelli
Ora che stai pensando alla fisica, passa al livello successivo con una semplice stratificazione per creare uno stile di scheda unificato per l'intera interfaccia. Non sai da dove cominciare? Google Linee guida sulla progettazione dei materiali sono un ottimo punto di partenza.
"Nella progettazione dei materiali, le proprietà fisiche della carta vengono tradotte sullo schermo. Lo sfondo di un'applicazione ricorda la trama piatta e opaca di un foglio di carta.
Il comportamento di un'applicazione imita la capacità della carta di essere ridimensionata, mescolata e legata insieme in più fogli. Gli elementi che vivono al di fuori delle applicazioni, come lo stato o le barre di sistema, ricevono un trattamento diverso. Sono separati dal contenuto dell'app sotto di loro e non portano le proprietà fisiche della carta.
Spezzala e torna a rendere l'aspetto e l'aspetto fisico di un oggetto digitale. E se gli utenti vogliono toccarlo, vorranno cliccarlo. Il concetto è semplicemente così semplice.
Attenersi a caratteri tipografici semplici
Quando si parla di tipografia, i semplici sans serif sono spesso la risposta. Evita le opzioni super sottili o condensate perché possono essere un po 'più dure sugli occhi.
La maggior parte delle schede funziona meglio con due opzioni di carattere tipografico (anche se appartengono alla stessa famiglia): qualcosa per il corpo principale e un altro per il titolo o l'invito all'azione. Il fattore più importante quando si parla di tipografia è di ricordare di includere un sacco di contrasto in modo che gli elementi di testo siano facili da leggere. Ricorda di includere il contrasto tra i caratteri tipografici e il contrasto tra lo sfondo e gli elementi di testo per ogni carta.
Limita elementi dell'interfaccia utente
Ripeti dopo di me: una carta equivale a un'azione.
Ciò significa probabilmente che non è necessario includere una serie di elementi dell'interfaccia utente come i pulsanti dell'intero progetto.
Potresti non aver nemmeno bisogno di un pulsante in un design in stile carta.
Ma se pensi che gli utenti abbiano bisogno di un segnale visivo, basta un pulsante. Mantieni la forma e il design semplici: anche in questo caso l'approccio Material Design è una buona opzione e si limita a un solo pulsante.
Un pulsante è probabilmente l'unico elemento dell'interfaccia utente necessario. Questo è il tuo obiettivo di progettazione.
Conclusione
Non esiste una formula magica per la carta perfetta, ma ci sono alcune scelte progettuali che puoi incoraggiare ad incoraggiare ogni utente a fare clic (o toccare). Mantieni il tuo design centrato nella realtà, segui un approccio minimalista con abbondanza di spazio e contrasto, metti l'accento sulla tipografia semplice e crea una singola azione per ogni carta.
Seguire questo schema ti aiuterà a immaginare e concettualizzare meglio i progetti in stile carta con cui gli utenti vogliono interagire. Combina queste idee con la teoria del design e le tue abilità folli per un grande progetto che sarà divertente per gli utenti ed esteticamente di tendenza.