L'especificació de disseny de materials de Google es va orientar originalment a la plataforma d'Android com una manera de suggerir la coherència del disseny a la plataforma.
01 de 06
Com crear una targeta de disseny de materials a Adobe Experience Design CC
Una vegada que els dissenyadors van començar a fer-ho i comprendre el pensament que hi havia darrere, Material Design s'ha convertit en una de les filosofies visuals més influents en disseny web i mòbil . Tot el que cal fer per veure què estem aconseguint és fer una cerca de disseny de materials a Pinterest i veureu centenars d'exemples i experiments en dispositius, tauletes i fins i tot llocs web.
L'aspecte fascinant de Material Design és que Google està pensant en com han d'aparèixer les aplicacions i que funcionen en dispositius mòbils, però els conceptes s'apliquen a qualsevol pantalla de qualsevol mida en qualsevol plataforma. Com afirma Google en el paràgraf inicial de l'especificació, "ens vam desafiar a crear un llenguatge visual per als nostres usuaris que sintetitza els principis clàssics del bon disseny amb la innovació i la possibilitat de la tecnologia i la ciència. Es tracta d'un disseny material. Aquesta especificació és un document viu que s'actualitzarà a mesura que continuem desenvolupant els principis i especificitats del disseny de materials ".
El material que es parla, en termes molt generals, és paper i un segell distintiu de Material Design és la targeta. Penseu en una targeta d'índex en una superfície i esteu en el bon camí. Una targeta és un element que conté fotografies, vídeos, enllaços de text, etc., però on es diferencien de la majoria dels dissenys interactius és que estan destinats a centrar-se en un sol subjecte. Les cartes tenen cantonades arrodonides, contenen ombres febles que indiquen que estan per sobre d'una superfície i, si estan totes en el mateix plànol, es coneix com una "col·lecció".
En aquest "Com fer" anem a crear una targeta basada en l'especificació. En lloc de crear la targeta amb una varietat d'eines d'imatge i dibuix, anem a venir des d'una adreça diferent. Anem a utilitzar les eines en Adobe's Experience Design que actualment es troba en una vista prèvia pública només amb Macintosh i és gratuïta. Podeu descarregar-lo aquí.
Comencem.
02 de 06
Creació d'Artboard del prototip a Adobe Experience Design CC
No hi ha manera evident de crear una pantalla d'Android des de la pantalla d'inici a Experiència Disseny CC (XD). El que solíem fer quan obrim XD és seleccionar l'opció iPhone 6 i, quan s'obre la interfície, seleccionem l' eina Artboard a la part inferior de la barra d'eines i seleccioneu Android Mobile des de les seleccions del panell Propietats cap a la dreta. A continuació, passem a l'eina de selecció, feu clic una vegada al nom de l'art de l'iPhone i suprimiu l'artboard. No més.
A la versió actual de XD, hi ha una petita fletxa al costat de l'iPhone 6 que, quan es fa clic, obre un menú desplegable. Des d'allà, seleccioneu la versió per a Android Mòbil i l'artboard Android Android seleccionat s'obre a la interfície.
Per assegurar-nos que tenim l'espai adequat de la pantalla per a la targeta, normalment ens dirigim cap al Sketch 3 i copieu i enganxeu una barra d'estat, una barra de navegació i una barra d'aplicacions des de la plantilla de disseny de material fins a l'artboard. Sketch 3.2 conté una plantilla de disseny de materials ( Fitxer> Nou de la plantilla> Disseny de materials ) i una altra molt bona és de Kyle Ledbetter que podeu obtenir aquí. Si no teniu Sketch, podeu copiar-los i enganxar-los des dels adhesius XD que trobareu a Fitxer> Obrir kit d'interfície d'usuari> Material de Google . També podeu descarregar-los des de Google per utilitzar-los a Photoshop, Illustrator, After Effects i Sketch.
03 de 06
Afegiu una targeta de disseny de materials a Adobe XD CC Artboard
Una de les característiques més útils de XD és la inclusió de Kits UI per a Apple iOS, Google Material i Microsoft Windows. En molts aspectes, afegeixen la paraula "Rapid" al terme "Rapid Prototyping". A més, faciliten el treball del dissenyador en què els elements comuns d'interfície d'usuari no han de ser recreats constantment en una aplicació de disseny com Photoshop, Illustrator o Esbós
L'element d'interfície d'usuari que necessitàvem era una targeta. Per arribar-hi, vam seleccionar File> Open UI Kit> Google Material i el kit obert com a nou document. L'element que necessitem s'ha trobat a la categoria Targetes.
El que ens agrada és que s'adhereixen a l'especificació de disseny de materials tal com s'estableix a les especificacions de blocs de contingut, així com a les especificacions de formatació i espai de text establertes a les especificacions de tipografia.
L'estil de la targeta que volíem era el que teníem a la part inferior esquerra. Simplement marqueem amb el ratolí i el copiem al porta-retalls. Lamentablement, XD no conté una interfície amb pestanyes per a documents oberts. El que fem és moure la finestra de document obert per un poc per revelar la que estem treballant, seleccionar-la i enganxar-la. Una altra forma de canviar ràpidament entre els documents XD oberts és prémer Command- ' .
04 de 06
Com editar un element de disseny de material en Adobe Experience Design CC
Quan la targeta de XD arriba del porta-retalls, no comencen a treballar amb ella. El primer que heu de fer és desagrupar la targeta perquè necessiteu accés al bit i a les peces que componen la targeta. Per fer-ho, seleccioneu la targeta i seleccioneu Object> Ungroup o premeu Shift-Command-G.
La vostra targeta ara es compon de tres parts:
- Caixa gris clar per a la imatge.
- Caixa gris mitjà per al text
- El quadre posterior utilitzat com a fons.
El primer pas és eliminar el quadre gris clar. El seu únic propòsit és actuar com a marcador d'espai per a la imatge, cosa que el converteix, si ho desitja, opcional.
La caixa amb el text és en realitat un gris fosc amb una opacitat del 50%. Aquesta caixa es pot utilitzar com a fons de text i podeu canviar l'opacitat del color i la caixa.
Tot i que no és immediatament evident, la caixa de color gris clar segueix l'especificació de disseny de material ja que les seves cantonades superiors estan arrodonides per 2 píxels. Tingueu en compte això si afegiu una imatge. També necessitarà les cantonades arrodonides que es poden afegir a una aplicació d'imatge o a XD.
Veient com aquest és l'estat de repòs de la targeta, també necessita una ombra. L'especificació deixa clar que hi ha una elevació de descans de la targeta de 2 píxels. Per afegir-ho, seleccioneu la forma de fons negre i configureu els valors Y i B (Blur) a 2 al panell de propietats.
05 de 06
Com afegir una imatge a la targeta de disseny de materials d'Adobe XD CC
Sabent que la targeta té 344 píxels d'amplada i l'àrea de la imatge és de 150 píxels d'alçada (la meitat de l'alçada del quadre gris clar ). Vam obrir la imatge a Photoshop, la tallem a la mida i la guardem mitjançant l'opció @ 2x al diàleg Exportar de Photoshop Caixa. S'ha importat la imatge a Adobe XD.
A continuació, arrossegà el quadre gris clar sobre la imatge del gravat i seleccioneu Object> Mask With Shape . El resultat va ser la imatge que recull els racons arrodonits de la forma. A continuació, vam traslladar la imatge a la seva posició final.
Amb la imatge en el lloc, després canviem el color de fons del quadre gris Mitjà, canviem el text i el color del text de l'enllaç.
06 de 06
Ús de la característica Grid d'Adobe XD CC
Amb la targeta completa, ara s'ha de situar adequadament d'acord amb les especificacions de disseny de materials. Això significa que hi ha 8 píxels a cada costat de la targeta i la targeta ha de tenir 8 píxels per sota de la barra d'aplicacions. Per fer-ho, feu clic una vegada al nom de l'artboard i, al tauler de propietats, seleccioneu Quadrícula. La quadrícula apareix sobre l'artboard.
La mida predeterminada de la graella és de 8 píxels que passen a ser la mateixa mida de quadrícula per al disseny de materials. Si necessiteu una mida diferent, canvieu el valor a l'àrea de la graella. Si voleu canviar el color de la graella, feu clic al color xip i seleccioneu un color del selector de colors resultant.
Amb la graella visible, feu clic a la targeta i la moguïs a la seva posició final.
Per finalitzar, vam seleccionar la targeta, premem el botó Repetir la graella i també hem canviat l'espai entre les targetes a 8 píxels.