A especificación de deseño de material de Google orixinalmente estaba destinada á plataforma Android como unha forma de suxerir consistencia de deseño na plataforma.
01 de 06
Como crear unha tarxeta de deseño de material en Adobe Experience Design CC
Unha vez que os deseñadores comezaron a atravesalo e comprenden o pensamento detrás, Material Design converteuse nunha das filosofías visuales máis influentes en deseño web e móbil . Todo o que cómpre facer para ver o que estamos a recibir é facer unha busca de deseño de material en Pinterest e verá centos de exemplos e experimentos en dispositivos, tabletas e ata sitios web.
O aspecto fascinante de Material Design é que Google está pensando en como deberían aparecer as aplicacións e traballar en dispositivos móbiles pero os conceptos están a ser aplicados a calquera pantalla de calquera tamaño en calquera plataforma. Como afirma Google no parágrafo inicial das especificacións, "desafiámonos a crear un linguaxe visual para os nosos usuarios que sintetice os principios clásicos de bo deseño coa innovación e posibilidade de tecnoloxía e ciencia. Este é o deseño material. Esta especificación é un documento vivo que se actualizará mentres seguimos desenvolvendo os principios e especificidades do deseño de materiais. "
O material falado, en términos moi xerais, é papel e un selo de Material Design é a tarxeta. Pense nunha tarxeta de índice nunha superficie e está no camiño correcto. A tarxeta é un elemento que contén fotos, vídeos, ligazóns de texto, etc., pero onde se diferencian da maioría dos deseños interactivos, están destinados a centrarse nun único tema. As cartas teñen esquinas redondeadas, conteñen sombras débiles que indican que están por riba dunha superficie e se están todas no mesmo plano denomínaselle "colección".
Nesta "Como a" imos crear unha tarxeta baseada na especificación. En vez de crear a tarxeta cunha variedade de ferramentas de imaxe e deseño, imos chegar desde unha dirección diferente. Imos utilizar as ferramentas en Adobe's Experience Design que actualmente está nunha vista previa pública de Macintosh e é gratuíta. Podes descargalo aquí.
Comezamos.
02 de 06
Creación de The Prototype Artboard en Adobe Experience Design CC
Non hai forma evidente de crear unha pantalla de Android desde a Pantalla de inicio en Deseño de experiencia CC (XD). O que fixemos cando abrimos XD é seleccionar a opción iPhone 6 e, cando se abre a interface, seleccionamos a ferramenta Artboard na parte inferior da Barra de ferramentas e seleccionamos Android Mobile das seleccións do panel Propiedades á dereita. A continuación, pasamos á ferramenta de selección, fai clic unha vez no nome do iPhone e elimina o artboard. Nunca máis.
Na versión actual de XD, hai unha pequena frecha ao lado do iPhone 6 que, ao facer clic, abre un menú despregable. A partir de aí, ábrese na interface a opción de seleccionar a versión para Android Mobile e o Android artboard móbil seleccionado.
Para garantir que teñamos o espazo de pantalla axeitado para a tarxeta, acostumamos dirixirnos a Sketch 3 e copiar e pegar unha barra de estado, barra de navegación e barra de aplicacións desde a plantilla de deseño de materiais ata o cadro artístico. Sketch 3.2 contén un modelo de deseño de materiais ( File> New From Template> Design Material ) e outro realmente bo é de Kyle Ledbetter que pode obter aquí. Se non tes Sketch, podes copialo e pegalo dos adhesivos XD que se atopan en File> Open UI Kit> Google Material . Tamén podes descargalas de Google para usar en Photoshop, Illustrator, After Effects e Sketch.
03 de 06
Engadir unha tarxeta de deseño de materiais a un Adobe XD CC Artboard
Unha das características máis útiles de XD é a inclusión de UI Kits para Apple iOS, Google Material e Microsoft Windows. En moitos aspectos, eles engaden a palabra "Rapid" ao termo "Rapid Prototyping". Tamén facilitan o traballo do deseñador en que os elementos comúns de IU non teñen que ser constantemente recreados nunha aplicación de deseño como Photoshop, Illustrator ou Esbozo.
O elemento de IU que necesitabamos era unha tarxeta. Para chegar a el seleccionamos File> Open UI Kit> Google Material e o kit se abriu como un novo documento. O elemento que necesitabamos atopouse na categoría Cartas.
O que máis nos gusta disto é que se adhiren á especificación de deseño de materiais tal e como se establece nas especificacións de bloques de contido, así como as especificacións de formato de texto e espazo especificadas na tipografía.
O estilo de tarxeta que queriamos era o que quedaba na parte inferior esquerda. Simplemente marcárono co noso rato e copiémolo no portarretallos. Desafortunadamente, XD non contén unha interface separada para documentos abertos. O que facemos é mover a fiestra de documento abaixo abaixo un pouco para revelar o que estamos a traballar, seleccionalo e pegar. Outra forma de cambiar rapidamente entre os documentos XD abertos é premer Command- ' .
04 de 06
Como editar un elemento de deseño de material en Adobe Experience Design CC
Cando a tarxeta en XD chega dende o portapapeis, non comenzo a traballar con el. O primeiro que tes que facer é desgrupar a tarxeta porque necesitas acceso ao bit e pezas que compoñen a tarxeta. Para facelo, seleccione a tarxeta e seleccione Obxecto> Desagrupar ou prema Shift-Command-G.
A súa tarxeta está composta por tres pezas:
- Caixa gris claro para a imaxe.
- Caixa gris media para o texto
- A caixa traseira usada como fondo.
O primeiro paso é eliminar a caixa gris claro. O seu único propósito é actuar como marcador de posición para a imaxe que o faga, se elixe, opcional.
A caixa co texto é realmente un gris escuro cunha opacidade do 50%. Esta caixa pode usarse como fondo de texto e pode cambiar a opacidade da cor ea caixa.
Aínda que non é inmediatamente evidente, a caixa gris claro segue a especificación de deseño de material porque as súas esquinas superiores están redondeadas por 2 píxeles. Teña presente isto se está a engadir unha imaxe. Tamén necesitará as esquinas redondeadas que se poden engadir a unha aplicación de imaxe ou a XD.
Vendo como este é o estado de descanso da tarxeta tamén necesita unha sombra. A especificación deixa claro que hai unha altura de descanso da tarxeta de 2 píxeles. Para engadir isto, seleccione a forma de fondo negro e configure os valores de Y e B (Borrar) en 2 no panel de propiedades.
05 de 06
Como engadir unha imaxe á tarxeta de deseño de materiais en Adobe XD CC
O coñecemento da tarxeta é de 344 píxeles de ancho e a área de imaxe ten 150 píxeles de alto (a metade da altura da caixa gris claro ). Abrimos a imaxe en Photoshop, cortábaa ao tamaño e salvouna usando a opción @ 2x no diálogo Exportar de Photoshop caixa. A imaxe foi importada en Adobe XD.
A continuación, arrastramos a caixa gris claro sobre a imaxe no papel e seleccionamos Obxecto> Máscara con forma . O resultado foi a imaxe que recollía as esquinas redondeadas da forma. Entón trasladamos a imaxe á súa posición final.
Coa imaxe no lugar, cambiamos a cor de fondo da caixa de gris Medio, cambiamos o texto ea cor do texto da ligazón.
06 de 06
Usando a función Adobe XD CC Grid
Coa tarxeta completa, agora ten que estar correctamente colocada de acordo coa especificación de deseño de material. Isto significa que hai 8 píxeles a cada lado da tarxeta e que a tarxeta ten que ser de 8 píxeles por baixo da barra de aplicacións. Para facelo, prema unha vez no nome do artel e, no Panel de Propiedades, seleccione Cadea. A grella aparece sobre o taboleiro.
O tamaño predeterminado da grade é de 8 píxeles, que son o mesmo tamaño de grilla para o Deseño de materiais. Se precisas un tamaño diferente, cambia o valor na área da grilla. Se desexa cambiar a cor da grilla, faga clic no chip de cor e elixa unha cor do selector de cor resultante.
Coa grade visible, faga clic na tarxeta e mova á súa posición final.
Para terminar, seleccionamos a tarxeta, prememos o botón Repeat Grid e cambiamos o espazo entre as tarxetas ata os 8 píxeles.