Le specifiche di Material Design di Google erano originariamente rivolte alla piattaforma Android come un modo per suggerire la coerenza del design sulla piattaforma.
01 di 06Come creare una scheda di design del materiale in Adobe Experience Design CC
Una volta che i designer hanno iniziato a sondarlo e a capire il modo di pensarci dietro, Material Design è diventata tranquillamente una delle filosofie visive più influenti nel web e nel mobile design. Tutto quello che devi fare per vedere che cosa stiamo ottenendo è fare una ricerca di Material Design su Pinterest e vedrai centinaia di esempi ed esperimenti su dispositivi, tablet e persino siti web.
L'aspetto affascinante di Material Design è che Google sta pensando a come le app dovrebbero apparire e lavorare sui dispositivi mobili, ma i concetti vengono applicati a qualsiasi schermo di qualsiasi dimensione su qualsiasi piattaforma. Come afferma Google nel paragrafo iniziale della specifica, "Ci siamo sfidati a creare un linguaggio visivo per i nostri utenti che sintetizzasse i principi classici del buon design con l'innovazione e le possibilità della tecnologia e della scienza. Questo è il design dei materiali. Questa specifica è un documento vivente che verrà aggiornato man mano che continuiamo a sviluppare i principi e le specifiche del design dei materiali. "
Il materiale di cui si parla, in termini molto generali, è la carta e la carta è un segno distintivo di Material Design. Pensa a un indice su una superficie e sei sulla strada giusta. Una carta è un elemento che contiene foto, video, link testuali e così via, ma dove si differenziano dalla maggior parte dei progetti interattivi, essi sono pensati per concentrarsi su un singolo soggetto. Le carte hanno angoli arrotondati, contengono deboli ombre che indicano che si trovano sopra una superficie e se sono tutte sullo stesso piano vengono indicate come una "collezione".
In questo "How To" creeremo una scheda basata sulle specifiche. Piuttosto che creare la carta con una varietà di strumenti di imaging e disegno, arriveremo da una direzione diversa. Utilizzeremo gli strumenti in Adobe Experience Design, che è attualmente in anteprima pubblica solo per Macintosh ed è gratuito. Potete scaricarlo qui.
Iniziamo.
02 di 06Creazione della tavola da disegno prototipo in Adobe Experience Design CC
Non esiste un modo evidente per creare uno schermo Android dalla schermata iniziale in Experience Design CC (XD). Quello che facevamo prima di aprire XD è selezionare l'opzione iPhone 6 e, quando l'interfaccia si apre, selezioniamo lo strumento Tavola da disegno nella parte inferiore della barra degli strumenti e selezioni Android Mobile dalle selezioni nel pannello Proprietà sulla destra. Quindi passiamo allo strumento di selezione, facciamo clic una volta sul nome della tavola da disegno di iPhone e cancelliamo la tavola da disegno. Non piu.
Nella versione attuale di XD, c'è una piccola freccia accanto all'iPhone 6 che, quando si fa clic, apre un menu a discesa. Da lì puoi selezionare la versione per Android Mobile e l'interfaccia per Android Mobile selezionata si apre nell'interfaccia.
Per assicurarci di avere lo spazio schermo adeguato per la scheda, di solito ci dirigiamo verso lo Sketch 3 e copiamo e incolliamo una barra di stato, una barra di navigazione e una barra delle applicazioni dal modello di progettazione dei materiali nella tavola da disegno. Lo schizzo 3.2 contiene un modello di design del materiale (File> Nuovo da modello> Design materiale) e un'altra molto buona gratis è di Kyle Ledbetter che puoi ottenere qui. Se non hai Sketch, puoi copiarli e incollarli dagli adesivi XD trovati in File> Apri kit UI> Materiale Google. Puoi anche scaricarli da Google per l'utilizzo in Photoshop, Illustrator, After Effects e Sketch.
03 di 06Aggiunta di una scheda di progettazione del materiale a una tavola da disegno Adobe XD CC
Una delle caratteristiche più utili di XD è l'inclusione di kit di interfaccia utente per Apple iOS, Google Material e Microsoft Windows. Per molti aspetti, aggiungono la parola "Rapid" al termine "Rapid Prototyping". Inoltre rendono il lavoro del progettista più facile in quanto gli elementi comuni dell'interfaccia utente non devono essere costantemente ricreati in un'applicazione di disegno come Photoshop, Illustrator o Schizzo.
L'elemento dell'interfaccia utente di cui avevamo bisogno era una carta. Per arrivarci abbiamo selezionato File> Apri kit UI> Materiale Google e il kit è stato aperto come nuovo documento. L'elemento di cui avevamo bisogno è stato trovato nella categoria Carte.
Ciò che amiamo di questi è che aderiscono alle specifiche di Material Design come stabilito nelle specifiche di Content Blocks e alle specifiche di formattazione e spaziatura del testo contenute nelle specifiche di Typography.
Lo stile della carta che volevamo era quello in basso a sinistra. Lo facciamo semplicemente con il mouse e lo copiamo negli appunti. Sfortunatamente, XD non contiene un'interfaccia a schede per i documenti aperti. Quello che facciamo è spostare un po 'la finestra del documento aperto per rivelare quella su cui stiamo lavorando, selezionarla e incollarla. Un altro modo per passare rapidamente tra i documenti XD aperti è premi Comando- ".
04 di 06Come modificare un elemento di design del materiale in Adobe Experience Design CC
Quando la carta in XD arriva dagli appunti non iniziare a lavorare allegramente con essa. La prima cosa che devi fare è separare la carta perché è necessario accedere al bit e ai pezzi che compongono la carta. Per fare ciò, selezionare la carta e seleziona Oggetto> Separa o premi Maiusc + Comando-G.
La tua carta è ora composta da tre pezzi:
- Scatola grigio chiaro per l'immagine.
- Scatola grigia medio per il testo
- La scatola posteriore usata come sfondo.
Il primo passo è eliminare la casella grigio chiaro. Il suo unico scopo è quello di fungere da segnaposto per l'immagine che lo rende, se si sceglie, opzionale.
La casella con il testo è in realtà un grigio scuro con un'opacità del 50%. Questa casella può essere utilizzata come sfondo del testo e puoi modificare il colore e l'opacità della casella.
Sebbene non sia immediatamente evidente, la scatola grigio chiaro segue le specifiche di Material Design in quanto i suoi angoli superiori sono arrotondati di 2 pixel. Tienilo a mente se aggiungi un'immagine. Avrà anche bisogno degli angoli arrotondati che possono essere aggiunti a un'applicazione di imaging o in XD.
Visto come questo è lo stato di riposo della carta, ha bisogno anche di un'ombra. La specifica chiarisce che c'è un'elevazione a riposo della carta di 2 pixel. Per aggiungere questo, selezionare la forma dello sfondo nero e impostare i valori Y e B (Sfocatura) su 2 nel pannello delle proprietà.
05 di 06Come aggiungere un'immagine alla scheda di design del materiale in Adobe XD CC
Conoscere la scheda è larga 344 pixel e l'area dell'immagine è alta 150 pixel ( metà dell'altezza del riquadro grigio chiaro Abbiamo aperto l'immagine in Photoshop, l'abbiamo ritagliata alla dimensione e salvata usando l'opzione @ 2x in Photoshop Esporta come la finestra di dialogo. L'immagine è stata importata in Adobe XD.
Abbiamo quindi trascinato il riquadro grigio chiaro sull'immagine presente sul tavolo di montaggio e selezionato Oggetto> Maschera con forma. Il risultato è stata l'immagine che ha raccolto gli angoli arrotondati della forma. Abbiamo quindi spostato l'immagine nella sua posizione finale.
Con l'immagine in posizione, abbiamo quindi modificato il colore di sfondo della casella Grigio medio, modificato il testo e il colore del testo del collegamento.
06 di 06Utilizzo della funzione Griglia Adobe XD CC
Una volta completata la scheda, ora deve essere posizionata correttamente in base alle specifiche di Material Design. Ciò significa che ci sono 8 pixel su entrambi i lati della carta e che la carta deve essere 8 pixel sotto la barra delle applicazioni. Per fare ciò, fare clic una volta sul nome della tavola da disegno e, nel pannello Proprietà, selezionare Griglia. La griglia appare sopra la tavola da disegno.
La dimensione della griglia predefinita è di 8 pixel, che è la stessa dimensione della griglia per Material Design. Se è necessaria una dimensione diversa, modificare il valore nell'area Grid. Se si desidera modificare il colore della griglia, fare clic sul chip del colore e scegliere un colore dal Selettore colore risultante.
Con la griglia visibile, fai clic sulla carta e spostala nella sua posizione finale.
Per finire, abbiamo selezionato la carta, fatto clic sul pulsante Ripeti griglia e modificato anche la spaziatura tra le carte a 8 pixel.
