Transcripciones
1. ♥ whats en este curso de diseño de Adobe XD: Hola a todos. Bienvenido a mi curso sobre diseño de materiales Android usando Adobe X'd Y estaremos
viendo todas las especificaciones de diseño de materiales dadas por Google Material diseñado a Point y te
mostraré cuáles son las diferentes especificaciones fuera de la lista de botones diferentes artículos y cómo puedes diseñar usando las directrices y restricciones de diseño de materiales de Google y crear APS de aspecto
impresionante. Por lo que estaremos discutiendo todas las posibilidades que funcionan incluso en el material de Google diseñado
para apuntar, que es la última versión de diseño de materiales de Google. Ahora las herramientas que estaremos usando son que obedecen a X'd. Si eres un gran hizo en Adobe X'd, deberías tomar mis otros cursos o otros cursos sobre Toby X'd, porque no te voy a enseñar los conceptos básicos que se ofrecen más de 60. Entonces si vamos a estar usando Adobe X'd para diseñar principalmente y para entregar diseñado para desarrolladores, estaremos usando Siplin God eres tú. Y también estaremos utilizando humos u otras herramientas en línea para generar nueve activos de parche para tu android. APS. Si no sabes de nueve pases, no te preocupes. Vamos a aprender todas esas cosas en este curso. Y si estás familiarizado con Adobe, en realidad deberías poder diseñar abs android de aspecto impresionante y estaremos diseñando y aplicación android, que es básicamente una aplicación de Android real para médicos en juke it. Entonces esto es lo que estaremos diseñando el ejercicio. Y antes de eso, estaré cavando en muchos detalles fuera de diferentes especificaciones. Cómo puedes usar diferentes colores, cómo puedes crear esquemas de color y equipos de color, que es una nueva adición al material de Google diseñado para apuntar, que se llama equipo. Por lo que estaremos haciendo equipo sobre AB usando todo el color, primaria
secundaria todas sus cosas. Entonces te voy a enseñar muchas cosas en este curso. Entonces si tienes alguna pregunta o alguna curies sobre cuáles son los problemas con respecto a este curso puedes contactarme. Puedes enviarme un correo electrónico, puedes enviarme un mensaje. Yo estoy muy respondida. Yo realmente esta nacida dentro de 24 son así que necesitas saber. No te preocupes por el deporte que te voy a dar. Por lo que también estaremos creando más lecciones si obtienes algún problema o tienes algunas peticiones fuera creando cualquier otra lección, voy a estar creando eso para ti. Entonces empecemos a diseñar APS de Android sobre cómo podemos entregar nuestra aplicación para android. Desarrolladores de tiendas. Aprendamos eso juntos. Nos vemos pronto dentro de este curso.
2. ♥ cómo ver este curso?: Por lo que esta es la parte importante. Si ya has visto mi diseño android con curso de photoshop, entonces vas a saltarte muchos ejercicios y mucho de diferentes clases porque
están duplicados en este curso extra. Por lo que las conferencias on convivir y tienen el corazón y el inicio de su título, vas a ver en Lee. Estos esto es específico solo para los estudiantes que han visto mi o ya han visto mi clase, que es ah, diseño de material
android usando para la tienda. Entonces, uh, si has visto ese vaso entero has hecho ese vidrio perfectamente. Entonces te vas a saltarte las conferencias. Por lo que las únicas conferencias que vas a ver nuestras que tienen algún ícono duro en el inicio su título. Para que puedas ver en la barra derecha con los títulos de conferencias son lo que necesitas dedo Solo tienes que ver las lecciones donde tienen el corazón. Yo fui al inicio, así que te voy a mostrar mi pantalla. ¿ Qué significa ese ícono del corazón y cómo te vas del dedo del pie? Basta con ver esos iconos duros. Si ya has visto mis y correctas pistas de diseño de material con photoshop porque algunas fuera de las conferencias son el mismo 50%. Casi el material. ¿ Al igual que qué es el diseño de materiales de Google Cómo funcionan todas estas cosas. Ellos son los similares. Estos son los contenidos similares a bordo de los cursos. Entonces no quiero desperdiciarte el tiempo. Si ya has visto mi curso, entonces vas a saltarte las conferencias y ver sólo las conferencias con el corazón. De acuerdo, entonces este es el propósito de esta lección. Entonces te voy a mostrar mi pantalla. ¿ A qué es ese ícono duro parece. Entonces pasemos a la pantalla. Está bien. Entonces, um hey, como pueden ver, estoy en este momento, sumando estas lecciones en mi vista de maestros del señor Dror. Y se puede ver esto. Ahí hay un corazón pequeño. Voy a inicio de esta lección. Entonces esto es a lo que me refiero. Entonces si ves esto duro, lo
tengo significa que es la nueva lección y está en la lista. Lo que obedece a X'd. Y si ya has comprado mi otra clase que esta es la diferente lección de la otra. Por lo que necesitas verlo así si lo tienes. Si estás empezando esta clase desde cero y no has lavado ninguno de mis otros cursos o mis otras clases al final están diseñadas, entonces solo puedes ver con normalidad. De acuerdo, entonces espero que hayan entendido el concepto fuera de este corazón y cómo soy yo. Necesitas lavar esta clase. Pasemos a la siguiente lección.
3. Qué es resolución y densidad de pantalla: ahora en este apartado, nos vamos de pie. Comience con las diferentes densidades de pantalla de resolución fuera de pantalla de tipo. ¿ Qué es la resolución de pantalla DP I y qué es el SP? Pixeles escalables y densidad DP Los cerdos independientes es así Estos son todos los términos que necesitas
dominar antes de entrar en photoshop o adobe X T o incluso bosquejar para empezar a diseñar tu abs
android. OK, ahora, en esto menos y primero vamos dedo del pie, cuida la resolución de pantalla versus la densidad de pantalla. De acuerdo, entonces en esta lección, vamos a cubrir estos dos. Pasemos de pie nuestro primer tobogán. Ahora. En primer lugar, vamos a ver cuál es la diferencia entre la densidad de pantalla y la resolución de pantalla . La resolución de pantalla siempre está en píxeles, que es que mi teléfono móvil es de 9 20 píxeles por o 10 80 píxeles por 9 20 píxeles, que es resolución full HD o 12 80 píxeles por 7 20 o 5 40 píxeles por 9 60 imágenes. Entonces estos son cerdos diferentes, malas resoluciones que ¿cuántos males de cerdos hay en tu pantalla? De acuerdo, entonces es el número total de píxeles en un dispositivo de visualización. Podría ser tu pantalla led o podría ser tu pantalla de cinco k, por lo que habrá un conteo de píxeles que estos muchos pixeles thes muchas puertas dardos digitales están presentes en esta pantalla. De acuerdo, ahora, sobre la densidad de pantalla significa lo densa que es esta pantalla con el número off cerdos escaparon. Por lo que es el número de conteo off imágenes dentro de una pulgada fuera de pantalla. De acuerdo, así que al gusto, se
puede ver por aquí en el lado derecho, hay dos pantallas fuera del mismo tamaño. OK, entonces son ambas, como pantallas de cinco pulgadas o cuatro pulgadas aplicaciones móviles pantallas móviles y se puede ver el número apagado de píxeles en ellas son diferentes. Esto es más que el derecho es más denso que el izquierdo izquierdo. Uno tiene el mismo tamaño de pantalla de tamaño de pulgada, pero tiene menos píxeles. Por lo que las imágenes de esta pantalla izquierda serán menos nítidas. De acuerdo, así sucesivamente Y las imágenes de esto por aquí en la pantalla derecha serán más nítidas y tendrán más resolución y más píxeles. Entonces es igual que podrías haber escuchado fuera del término en ti cuando imprimes algo que este es un 300 dp imprimo o 600 peopie I imprimo Así es básicamente puntos de dinero de casa la impresora ha impreso en una pulgada del papel. OK, entonces si es 600 peopie I o 600 pulgada de punto de puerta del FBI, se
va a imprimir del dedo del pie $600 en esa sola pulgada. De acuerdo, entonces tendrá más colores y vivirá más natural y tendrá más crujiente. Se puede decir experiencia. Por lo que aquí puedes ver hay ejemplo de que 10 80 píxeles por 9 20 resolución y densidad es 401 pulgadas de punto
oscuro o DP. Yo bien, creo que has entendido lo que esto realmente significa. Ahora les voy a mostrar ejemplos fuera de mis dos pantallas móviles diferentes y su
resolución real y su densidad. De acuerdo, ahora se puede ver del lado derecho tengo este introspecto. Se trata de una aplicación móvil, aplicación
para Android. Puedes instalarlo en tu teléfono Android. Y en realidad, si vas a esta pestaña de visualización, puedes ver diferentes tamaños por aquí. De acuerdo, ahora o vamos a ir a esta densidad horizontal y densidad vertical. Se puede ver que es 403.41 db I Así que este es el dp I real, que es de mancha oscura pulgada fuera de la pantalla. Es pantalla de muy alta resolución en la parte superior. Por aquí, se pueden
ver 10 80 píxeles y en el lado izquierdo se pueden ver 1920 píxeles. Por lo que es una actividad casi. Pantalla SD Foon. Y es de Samsung básicamente. Y esta es en realidad la pantalla fuera de mi propio dispositivo móvil que estoy usando. Por lo que la pantalla mide 5.46 pulgadas. De acuerdo, entonces es básicamente esta distancia diagonal. En realidad, esto se diagnostica distancia. No es la distancia de derecha a izquierda ni el todo mucho ancho que es. Entonces en base a estos cálculos, realidad, lo que hice es dividir mi número total de píxeles divididos por mi dp. A mí y a mí nos quitaron la talla de mi pantalla. OK, entonces si mi pantalla tiene 10 80 pixeles de ancho, voy a dividir por la puerta Spottings Rdp I 403.41 y me va a dar 2.67 pulgadas, por lo que tiene casi 2.7 pulgadas de ancho. De acuerdo, entonces así es como vamos con el dedo del pie. Obtén la relación entre la resolución de pantalla y los ojos DP fuera de las densidades de la pantalla. Aquí hay otro ejemplo. Este es mi viejo teléfono Samsung teléfono Android, y se puede ver lo que Aquí tiene casi cinco pulgadas pantalla casi, creo, medio menos que la pantalla anterior. Pero se puede ver por aquí la densidad horizontal es de casi la mitad a 21 GPS. Por lo que las imágenes en la pantalla que puedes ver por aquí incluso esta pantalla corta se ve un poco pixilada y no es tan clara como una pantalla anterior. Por lo que esta es una diferencia diferente entre DP I. Si estás comprando algún teléfono móvil y rifle, necesitas saber cuánto dp i desporto. este momento, hay alimentos que están soportando 6 40 db I. Así que son imágenes de muy alta resolución y muy precisas. Se pueden ver los videos y colores y todo más preciso que éste. Son más densos con exiliados con colores, por lo que aquí se puede ver la pantalla. Pero he calculado es de 2.44 pulgadas y son tamaños de píxel reales. 5 40 imágenes por 9 60 imágenes. Por lo que espero que tenga industria esta densidad versus resolución. ¿ Qué es la resolución y qué es la densidad? Además, si vas a las pantallas led o a la mayoría de los monitores, puedes ver que hay dos. De acuerdo, son cuatro K's y full en realidad pantallas. Tienen diferentes resoluciones y diferente densidad de salida es de los dispositivos apple, aunque ahí estés usando un Mac book pro o yo americano y hago su densidad siempre es casi el doble que las pantallas de Windows o normales o de PC, aunque hay mucho fuera nuevas alergias y monitores que vienen y tienen más densidad y más resolución y crean unos píxeles y píxeles de baile en espacios más pequeños. No, espero que hayan entendido esta diferencia entre densidad y resolución de pantalla y
densidad de pantalla . Espero que disfruten de esta lección. Y no olvides instalar este introspecto Abit es gratis y pasar a esta pestaña de display y ver cuáles son tus dispositivos deportivos. ¿ Cuál es la densidad de tu dispositivo? Cuáles son los cerdos es resolución de píxeles fuera de tu dispositivo y espero verte pronto en la siguiente lección
4. Relación de DP y PX: en esta lección, vamos a hablar de lo que es DP, que es densidad, píxeles
independientes y lo que en realidad son píxeles. Entonces, ¿cuál es la diferencia entre estos dos y cómo puedes usar y convertir estos puntera entre sí? Si estás usando para tienda o algún cerdo l diseños basados en Ok, así que empecemos ahora. En la pantalla, se
puede ver que hay tres dispositivos diferentes con tres densidades diferentes. 1er 1 es 1 60 dp, que es muy menos denso y muy tienen muy bajo número de gachas de exults. Entonces hay 2 40 p A, que es un dp medio I y luego tenemos la calle cuando llegó TDP I o extra alta definición alta definición y mancha oscura en tu pantalla de definición. Ahora se puede ver que hay un botón o en la parte inferior. Por aquí. Se puede ver esto es un botón azul y botón azul oscuro, y es del mismo tamaño en todos estos tres dispositivos Lo es. Y si el tamaño está en píxeles ahora puedes ver en esta pantalla izquierda tenemos menos píxeles. Por lo que está buscando crear. Ahora, en la pantalla media, tenemos más píxeles. Y ahora este mismo ejercicio se ve un poco pequeño. Ahora, en esta pantalla, tenemos demasiadas fotos. Por lo que tenemos Esta pantalla es densa con exiliados respaldados de cerdos. Entonces si estamos usando algunos cerdos mentas Meyer enfermas, va a pasar a esto. Entonces si creo un botón y quiero que sea preciso en todas estas tres pantallas, ¿qué debo hacer? Debería crear otro monumento. Son otro dedo escamas mis años. Entonces va a ser independiente de la densidad, para que no dependa de la densidad. Entonces ahora se puede ver lo haría aquí, si defino este botón en los DP's son imágenes independientes de densidad, mis programadores son se va a ver igual en todos estos dispositivos. OK, entonces se va a escalar 1 50% en este 1 200% o este y va a ser que va
a resolver todos mis problemas. Entonces por eso android, un diseño material. Se les ocurrió esta unidad de millones de píxeles, que es DP dist densidad imágenes independientes. Por lo que estos píxeles, estos monumentos, si le dan a sus cuartos que mi botón será de 200 dp vacío por 36 TB de altura. Va a seguir siendo el mismo proporcional a su tamaño de pantalla en todos estos tres dispositivos , aparecerá igual. De acuerdo, entonces este es el problema. Por qué crearon DP en lugar de píxeles. Porque los píxeles se van a ver más pequeños una vez que lleguemos a Ah, pantalla de
mayor densidad. No, te
voy a mostrar un ejemplo fuera de la misma app introspecta que instalé en mi
dispositivo android . Y se puede ver si se mira en la parte superior por aquí los cerdos, mal arte y 80 píxeles. Parte avert en DP es de 3 60 db. Y ahora si miras esta pantalla, nuestros píxeles son diferentes, pero los píxeles independientes de densidad son los mismos. Se trata de 3 60 dp void. De acuerdo, entonces si define un botón como un 300 DP para la pantalla, quiere que tome como, 300 DP, es que va a verse igual en estos dos dispositivos, aunque su resolución de pantalla o la número de píxeles son diferentes. Entonces así es como vamos a utilizar los DP's. Nuestros tamaños serán los mismos y ah, el principal monumento DP para cualquier pantalla de aplicación móvil. Si estás usando sistema Android y escribir diseño de material, serán 3 60 dp por 6 40 dp Vale, así que solo ten esto en cuenta y vamos a cuidar todos tus variados en las próximas lecciones. No te confundas con cómo voy a usar estos DP's en mi fotoshop o en cualquier otro
software de diseño . De acuerdo, así que salgamos adelante y nos vemos pronto en la siguiente lección.
5. Conversión de Dp a Px de herramientas en línea: en este s y les voy a mostrar algunas herramientas en línea con ustedes pueden convertir fácilmente píxeles en sus DP's on. Y éste es uno de ellos cerdos. Cerdos enfermos colocan ciudad y se puede ver por aquí en este fondo se puede entrar a los píxeles. 48 pixels. Estos son los píxeles. Ya sabes, DPS pmm pulgadas puntos cualquiera mi año significaba que quieres convertir toe dp está bien, Y vas a seleccionar este mtp I En este momento voy a cuidarme esto en otra lección. Estos son cubos de exult y ciudad y mantener esto estos ajustes como son y se puede ver si lo cambio a 100 y ahora se puede ver si empezamos con este MDP I Mis 100 pixeles
van a ser iguales que 100 dp también en este DVD p I es 1 33 cerdos es el mismo 100 db en pantallas HDB
I. Va a ser 1 50 fotos en exceso dp I estas pantallas de densidad Atmore, tienen mayor densidad. Se puede ver esto es de 200 píxeles el doble del tamaño del tamaño real. Se trata de 100 píxeles. Pero en este X db I es el doble del tamaño. Después se ha triplicado el tamaño que tiene cuatro veces el tamaño. Es por eso que llamamos a estas pantallas 1.5 x dos x tres x cuatro X s. por eso las llamamos así porque son el doble de tamaño o 1.5 de tamaño o algo así. Entonces así es como puedes convertir. También puedes seleccionar en estos diferentes iconos de lanzamiento de una APP. Estos son de diferentes tamaños. 36 48 imágenes y estos son todos tamaños de píxel. 1 44 96 Barra de acción Tamaños contextuales pequeños, iconos de
notificación 24 fotos y se puede ver en XX dp i Este 24 habla. El ALS se va a haber multiplicado por tres porque es de tres x pantalla. 72 píxeles es el tamaño y en cuatro salida es 96 imágenes porque tenemos más píxeles y pantallas más densas en las pantallas de mayor resolución o más altas de DPS. Ahora veamos otro taburete, que va a ser más sencillo que ese. Ahora ya puedes ver me voy de pie checar esta línea de base Esta es la 1 60 MDP itis yendo a la línea de base fuera de tus diseños todos diferentes son para el diseño de material android. Ahora, si selecciono como 50 pixeles de tamaño apagado, se
puede ver que en L d P i, que es sonido puntual cinco x básicamente se multiplica por 50.75 Así que 50 db será 37.50 Los cerdos es ahora mismo. No creo que haya tal vez cuatro o cinco personas en todo el planeta que usaban este LDP. Entonces vamos con el dedo del pie. Cuida toda esta fuerza por cinco resoluciones al norte de esta. Por lo que mdb ojos básicamente Avanex, que es la línea de base estándar. Entonces todo lo más profundo será igual dedo del pie las mismas ficciones de las que tenemos en realidad P I, que va a ser 1.5 por lo que multiplicado por 1.5 son 75 pixeles, lo que puedes ver que estás obteniendo la relación entre los DP y los píxeles en diferentes estos densidades y pantallas resoluciones y se puede ver por aquí a salir se va a multiplicar por dos, que es para ex sdp I y luego XX sdp I tres x multiplicado por 31 50 triple X HDP I Se va a multiplicar por cuatro,
y se puede ver aquí tenemos 200 píxeles, por lo que 50 50 DP va a ser de 200 píxeles en estas pantallas estas pantallas thes pantallas grandes o de alta densidad y lo mismo para otras. De acuerdo, entonces espero que no hayas destruido esa relación sobre cómo puedes calcular los diferentes tamaños de
píxel para diferentes DP's en diferentes resoluciones de densidad de pantalla. Un trabajo extra, tres x y cuatro x Vamos a hablar más de STP XXV p A. En las próximas lecciones. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección.
6. ¿Qué son los Buckets? de densidad?: Ahora vamos a hablar de lo que nuestros cubos de densidad y ¿por qué los necesitamos? ¿ Y por qué queríamos crear nuestros activos gráficos? Nuestro Gran Bretaña es nuestros iconos en múltiples versiones diferentes fuera de cada mapa de bits que vamos a crear. De acuerdo, Entonces si estás diseñando un botón o un ícono para tu aplicación móvil android, vas a extraer el mismo ícono en remolque casi tres o cuatro tamaños diferentes. ¿ Y por qué necesitamos eso? Porque vamos a soportar diferentes dispositivos. Uno tiene más pixeles. Densidad del mezclador. Uno tiene menos uno y uno otro el cual es de muy alta densidad. Por lo que necesitamos icono separado tamaños separados botones de apagado para cada uno de ellos. De lo contrario, ¿qué va a hacer? ¿ El sistema android se va a escalar tu única imagen? Si estás usando sólo una sola imagen, se
va a escalar tu imagen y se va desenfocar el dedo del pie. Se va a producir sangre en tu pantalla. De acuerdo, así pixelado se verá borrosa y pixelada, así que no necesitamos eso. Entonces vamos a estudiar que diferentes cubos de densidad y hay como toneladas fuera diferentes dispositivos los cuales son los cuales tienen diferentes cerdos, revoluciones
enfermas y cubos de densidad. Y vamos con el dedo del pie. Clasifíquelas en tres o cuatro en este cubetas diferentes. OK, así que vamos a ver. ¿ Cuáles son estos? De acuerdo, ahora en la pantalla hay cinco cubos de densidad diferentes. Uno que he omitido, que es LDP, que no creo que necesites diseño de dedo para o para desarrollado. De acuerdo, así que este es su MDP de referencia. Gané 60 GPS. Por lo que cualquier dispositivo que tenga resolución o densidad que esté más cerca de este 1 60 va a caer en este cubo que cualquier dispositivo que tenga 2 40 p a r más cerca de este 1 20 toe 210. Van a estar en esta densidad, luego pantallas de densidad extra alta. Se trata de dos X, todas las pantallas que tienen algo más cerca de 3 20 Van a caer en esto. Entonces tenemos 40 db i o XX sdp I tres x pantalla y todas las diferentes pantallas que tienen pantallas de
alta extra alta definición. Van a estar por aquí, densidad, así contra las pantallas. Y luego tenemos esta pantalla extra extra alta densidad que van a ser 6 40 db I y van a caer en esta categoría. Ahora puedes ver que he mostrado la misma caja azul o con diferentes tamaños en la pantalla. El motivo es que este es el mismo tamaño de píxel fuera de la misma carga que va a aparecer en diferentes pantallas como esta. De acuerdo, entonces si tenemos este botón que es de este tamaño, son exenciones como tal vez 200 por 100 píxeles. Van a ser 350 cuadros como éste un poco más grande, 1.5 veces más grande en la pantalla a Buda. Dos veces más grande en este, tres veces más grande en éste y cuatro veces más grande en éste. Para que veas cómo podemos crear diferentes activos para todas estas pantallas. Necesitamos un activo, y necesitamos diferentes tamaños diferentes fuera de ese activo para lucir todas estas
pantallas DPS diferentes . Ahora vamos a ver un ejemplo Ahora ya puedes ver esta es la imagen tomada del
material de Google diseña su propia documentación de línea, y puedes ver u escuchar que han mostrado cómo diferentes tamaños y cómo diferentes iconos o imágenes ellos se van dedo del pie tienen diferentes resoluciones o escalas en diferentes ojos DP o pantallas
de densidad. Ahora puedes ver que esta es nuestra línea de base. Entonces si un icono es como 48 por 48 píxeles en este tamaño basal, se va un poco más grande. 1.5 veces encendido, Http. I que on to X at X HDP I extra altura y densidad pantallas las siguientes dos
pieles extra alta densidad para que puedas ver cómo es este tamaño. Skilling uno x 1.5 x dos x tres X y cuatro x Así que esto es necesario tener estos puntos en tu mente que estamos diseñando tal vez para este, o vamos a usar una plantilla que fuimos. Vamos a diseñar para cuellos y vamos a exportar nuestros gráficos a todos estos tamaños
diferentes donde puedes hacer eso en para la tienda y obedecer X t sketch en cualquier software que estés usando. Entonces, no es necesario que te preocupes por eso. Nos vamos a cuidar y quitar eso en las próximas lecciones. Espero que hayan entendido, chico diferente este DP ojos, cubos, tensamente cubos tienen y por qué nos preocupamos por ellos y cómo podemos. Vamos a esperar diferentes tamaños fuera de diferentes imágenes para lucir todas estas pantallas de densidad y densidad de alta densidad. Espero que disfruten de esta lección. Pasemos a la siguiente lección.
7. Herramienta en línea para resolución de la pantalla, tamaño y densidad: Está bien. Ahora les voy a mostrar una herramienta muy sencilla, que es de material design material dot io slash dispositivos, y se puede ver aquí se pueden ver todas las diferentes alturas y píxeles escritos. DP en puntos relaciones de aspecto fuera de sus dispositivos, pulgadas y centímetros, dimensiones de
pantalla y la plataforma, y también se puede ver en el lado derecho, dice Density. Entonces si hago clic en él, puedes ver estas son las pantallas con un mdb I o dispositivos de densidad media. Chromebook 11 chromebook 30. Estas son dimensiones muy grandes puedes ver estas son pulgadas, y si vamos dedo del pie, te
hago ver que tiene diferentes tamaños. Y si navegas por eso, puedes ver si vas a este tres X, puedes ver que hay dispositivos de 5.1 pulgadas, y puedes ver aquí tenemos Sony Xperia e Itis 5.2 y 2.5 es el pueblo y 4.5 pulgadas la altura de sus dispositivos. Entonces estas son todas las diferentes resoluciones, y puedes ver aquí está la resolución de pantalla. Aquí está el cirujano en los DP's, y también puedes ver que hay diferentes dimensiones DP para otros dispositivos como Google Pixel Excel Order. Entonces si estás diseñando para algún dispositivo específico como Nexus cinco para Nexus seis como puedes ver u escuchar a continuación un seis o seis p, tienen Dp's dimensional cuatro Lemon por 7 31 Pero van a caer en 3.5 XXX como dp I. Por lo que estos básicamente están tomando esos conjuntos de este cubo de densidad, y hay diferentes tamaños. Puedes navegar por ahí si quieres. Si estás buscando un dispositivo específico, puedes mirar el aspecto de aspecto. Ratios. Dispa's Ocultar Una resolución de pantalla en Cerdos es también densidad de
pantalla, pantalla, dimensión y pulgadas y centímetro, y también la plataforma sobre lo que están trabajando. Entonces todo eso se trata de esto. Dispositivos de diseño de materiales esquiados, y puedes mirar hacia fuera para todos los diferentes tamaños si quieres. Oh, espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección
8. ¿Qué son los tamaños de tipos de SP en el diseño de materiales de Android?: ahora en este s y vamos a hablar de pixel escalable o SP. Esta es otra unidad que el diseño de material androide está usando pero para diferentes propósitos. Ahora todos ustedes ya han escuchado y hemos hablado de píxeles independientes de densidad DP para su resolución y diseños de pantalla y diferentes dimensionamiento de diferentes botones y aseveraciones. Pero este SP es cuatro fuerza como similar al BB. Es para nosotros por la fuerza y va a salvar los cuatro ajustes en el
diseño de materiales soportados . Entonces cada vez que vas a dar tu talla son tus cuatro tamaños a tus desarrolladores
vas a hablar en sp's y pixeles escalables. Para que tus desarrolladores sepan que este diseñador realmente conoce mis cosas. De acuerdo, entonces la principal diferencia es que SP ndp en realidad son iguales. Pero SP se va dedo del pie guardar todos los ajustes. Por lo tanto, configuras lo grande que es. Muy es audaz o norte o algo así. Por lo que este va a ser un dedo relativo de tus tamaños de pantalla. Entonces si estás usando SP en tus cuatro tamaños, va a ser relativo a tu pantalla y densidades, y va de dedo del pie del mismo tamaño, Va a aparecer en el mismo tamaño en diferentes dispositivos. Ahora les voy a mostrar un ejemplo fuera de 20 s antes así en diferentes densidades. Por lo que tenemos nuestras próximas pantallas de 1.5 x dos x tres x y cuatro X. Ahora puedes ver me parecen divertidos 20 pixeles que está en mtp I porque en MDP I esta es la proyectada y stevia. Mis píxeles de pantalla reales van a ser iguales del dedo del pie del SP o DB real. De acuerdo, entonces 20 s p es igual a 20 pixels en mi mtp I que es nuestra densidad basal. Entonces tenemos 1.5, por lo que puedes ver 20 multiplicarse por 1.5 30 30 pixels. Ahora se puede ver que esta frontera básicamente está cambiando porque sólo tomar un ejemplo como este es una carga y este es un texto en el botón. Ahora, si ves en este tamaño la amargura pequeña por lo que el texto pequeño se ve muy bien, pero en este tamaño, ese texto si usas los mismos cerdos mal valor del texto por aquí se va a quedar muy pequeño y se va a ser ilegible. La capacidad de plomo sufrirá mucho. También la legibilidad. Entonces lo que vamos a usar es que vamos a usar la realidad cuatro tamaños, que son SP. Entonces esto va a ser 30 porque en realidad es y se va a traducir del dedo del pie SP, que es igual a 20 s, ser multiplicado por 1.5 30 20 múltiplo siempre a físico, 40 y 20 múltiples siempre tres es igual a 60 píxeles y 20 se multiplican antes 80 picks es. Entonces si estás diseñando para tres dispositivos X o dispositivos de dos semanas de 1.54 X, necesitas multiplicar tus cuatro tamaños con esa relación de densidad y cuando vas
a hablar con tus desarrolladores al respecto, no
vas a darles tamaños en pixeles. Ahora vas a platicar con Espy. Esta es en realidad la diferente escala tipográfica off android material design, que es de que se puede ver aquí tenemos el botón, todas las tapas 14 sp, tamaño
mediano. Están usando un robot de lujo. Esto es básicamente roboto y se puede ver este es el tamaño de los subtítulos. Regular 20 sp tamaño corporal, un tamaño corporal, también. Puedes usar 14 SP regular. Todo lo que puedes usar medio 14 SB o SP medio para escritorio. Entonces si estás diseñando para escritorio usando el diseño de materiales para las aplicaciones stop chrome o algo así, vas a usar estos tres valores. Entonces tenemos títulos que pueden ver medio 20 SP Titulares van a ser 24 SP y superiores. Se puede ver esta obra de teatro también se está dirigiendo Desesperado era más grande encabezamiento mostrar árboles mucho más grande y exhibición para es muy, muy grande rumbo. Entonces esto se llama básicamente escalas tipográficas y he hablado mucho de ellas tipográfico, ritmo radical y escalas tipográficas en mi curso tipografía para diseñadores y desarrolladores . Entonces así es como han desarrollado este SP. Se va a quedar igual porque no depende de los píxeles. Es píxeles capaces. Básicamente, espero que hayas entendido el concepto fuera de las escalas tipográficas de material de SP y ah android y cómo vamos a usar diferentes tipografías y tamaños para diferentes exhibiciones de en pantalla. Dos títulos subtítulos, órganos de órganos básicamente para párrafos, subtítulos y cargas. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección
9. ♥ cómo funciona la unidad DP en Adobe XD: bien ahora en la distancia. Y vamos a hablar de diseño seco en el uso de Adobe X'd. ¿ Qué tamaño de archivo o plantilla son tablero de arte que vamos a utilizar. Se trata de Adobe X T. Y en esta pantalla, esta pantalla de bienvenida se puede ver ahí tenemos este móvil android, y vas a hacer clic en él y se va a empezar con y derecha Libro de corazón móvil. Por lo que es muy fácil en esto, así que sé extra porque no es Ah ah, cerdos, software
mal basado. Se trata de un software basado en vectores, y es más fácil diseñar en él. De acuerdo, así que solo arrastra y elipse así, y ,
uh ,
Jack, alguna imagen por aquí, y vas a crear algo similar a ese mismo botón otra vez, y yo soy va a crear algo por aquí. Entonces si no sabes usar este adobe x t, puedes tomar mi curso de adobe X'd,
tengo ah,curso tengo ah, completo de toda regla desde la bigness hacia Marte nivel todo lo que he discutido dentro de este curso. Entonces si no sabes cómo usarlo, puedes ir a revisar ese curso. O incluso puedes mandarme un mensaje dedo del pie conseguir ese curso con un descuento o algo así otra vez. Entonces vamos a usar algún texto por aquí. Este soy yo. Algo así. Este es el mismo ejercicio que estoy haciendo para Ah, en photoshop. No he hecho foto shop en el anterior Escucha que vas a hacer por aquí, y voy a usar este vehicular o aquí así, y puedes usar algo. Contrata algo así. Entonces voy a arrastrar esta imagen de mi hija. ¿ Y se puede ver qué? Aquí, esta imagen y una cubiertas por aquí. Y también tu nombre. Sí. Ve, o algo así. Y yo voy a encargarme del resto. ¿ De acuerdo? Entonces crea algo como esto en Edo, Android Mobile y Ah, una cosa más. Me gustaría si da click en este borde de arte con talla. aquí es de 3 60 por 6 40 Si quieres aumentar la piel o quieres diseñar para algo así como 411 de ella y ah, 411 con y 700 algo 1937 fue la altura para los próximos seis o dispositivos más grandes como, Ah, Samsung s ocho o algo así se puede diseñar específicamente para ellos Si lo desea. Puedes usar algo como esto Ahora hay una cosa más que me gustaría discutir por aquí, que es diferente a la tienda de fotos. Es que en un no b x d Siempre vas a diseñar en una X. De acuerdo, Así que si vas por aquí y vas a exportar overhead export y seleccionado, puedes ver si vas a Android, vas a seleccionar qué MDP yo eras utilizando. De acuerdo, entonces vas siempre a seleccionar este 100 MDP yo y solo vas a exportar todos tus activos con eso? Vamos a hablar más tarde de esto aseveraciones y de estos problemas ahora mismo quiero que crees algo como esto y lo harías en el medio. De acuerdo, Algo así y recién exportado son sacar una captura de pantalla de tu este diseño y cumbre en esta asignación. ¿ De acuerdo? También puedes enviar tu trabajo vía respuestas de preguntas si lo deseas. Ah, así que si no puedes enviar usando asignación o podrías haber omitido asignaciones, puedes hacerlo más adelante. Entonces espero que hayas disfrutado de esta lección, cómo vas a crear diferentes tableros de arte sobre qué tamaño X o densidad estás diseñando, yendo a diseñar. Eso será X'd. Pasemos a la siguiente lista.
10. El primer proyecto para estudiantes: Ahora bien, este es el momento de tu primera asignación, y va a ser muy sencillo. Necesitas abrir tu Adobe X'd y crear un nuevo documento el cual va a ser el
tablero de arte fuera de Android Mobile, que es 3 60 por 6 40 Ya sabes cómo abrir esta plantilla. Y si no lo sabes, puedes dar click en los tableros de arte y dejarme el seleccionado y puedes ver aquí tenemos este móvil
android y también puedes excesos desde la primera pantalla fuera de este adobe X t. Y ahora lo que tenemos que hacer es necesitas dedo del pie. Usa tu imagen si quieres. Ah, si no quieres usar tu email, puedes usar cualquier otra imagen. Pero prefiero que uses tu imagen como puedes ver. Esta es mi imagen. Usa algo como esta imagen de avatar. Entonces puedes decir algo esencias o, um, bases
dem o como sea tu nombre. De acuerdo, entonces vas a escribir algún texto introductorio sobre ti tal vez. ¿ Qué estás haciendo? ¿ Qué trabajo estás haciendo? ¿ Qué buscas de cuáles son las cosas que te gustan ¿Qué? ¿ Cuáles son las cosas que te gusta leer? Como puedes ver aquí, he mostrado mis intereses, y al final, vas a usar esta carga. Uh, el dedo del pie tiene algo de sombra en él y texto blanco. Y va a ser todo gorras porque la mayoría de los botones en diseño de material android son todos gorras. Ahora sobre el tamaño es esta cosa va a ser 1 10 por 1 10 dp que en realidad es del mismo tamaño en adobe x t Así que solo 1 10 por 10 esto va a ser 20 sp o ah, cerdos
escalables males. Entonces esto también va a ser 16 tamaño y este es este texto en este botón también va a ser 16. El tamaño del botón será de 200 por 48 BP's Así que por qué te estoy dando esta tarea solo para que te familiarices con todas estas tallas en eso que dip tamaños y tamaños utilizados en adobe excusas Van a ser lo mismo que estás diseñando para Avanex. Una vez que hayas completado esta tarea, vas a sacar una captura de pantalla de esta. También puedes usar este cable de software gratuito para acortar tu pantalla. Y una vez que es como en principio, puedes seleccionar en esto y puedes Fue algo así. Pantalla de captura cortada y cargada. Y muéstrame tus diseños. Juego otra manera de salir Extraer tu este android material diseñadores goto exportar todos los
aburridos de arte y vamos a seleccionar este android y seleccionar un cuatro carpetas donde quieras exportar y
exportar nuestros nuestros toros de arte. De acuerdo, ahora vamos a navegar por el dedo del pie que para carpeta de exportación Si haces doble clic en él y puedes ver aquí lo tenemos. Y ah, usemos algo en el medio, tal vez exceso dp uso este tamaño y solo lo subo, ¿
OK? Y yo lo voy a revisar. Entonces solo para asegurarte de que, ya
sabes, entender algunas de las cosas y cómo puedes empezar a diseñar fácilmente con Adobe X'd. Entonces si tienes dificultad para usar y obedecer a X t, puedes tomar mi otro curso tipo de prototipo de diseño X T en Colaborado, que va a cubrir todos los conceptos básicos. De acuerdo, entonces estoy deseando ver tu asignación, tu rostro, tus gustos y disgustos y ¿qué estás planeando en el futuro? Espero ver pronto tus diseños. Empecemos a hacer tu primera tarea ahora.
11. Regiones de UI de material de Android: no. Antes de entrar en nuestro diseño, vamos a familiarizarnos con lo que son diferentes estructuras y agua. Las diferentes regiones de interfaz de usuario. ¿ Y cuáles son sus nombres fuera del diseño de materiales de Android? Porque necesitamos dedo del pie familiarizarnos con ello porque vamos a hablar con nuestros desarrolladores sobre eso. Y cuando estábamos diseñando, necesitamos saber cuál es el nombre de esta región en sistema diseñado por Android. Entonces, empecemos. OK, ahora, primero, vamos a ver esta imagen por aquí. Este es material son tus lineamientos y puedes ver qué? Aquí. Este es nuestro Akbar, que es que podrías haber visto mucho de título APS por aquí en Primary Toolbar. Esta es área de contenido. Esta es la barra inferior donde tenemos navegación inferior aquí. Algunos iconos, tal vez tres o cuatro. Este es básicamente este color azul claro tipo Seoane. Esto se llama botón de acción flotante. Ahora, la izquierda, se
puede ver esto es lado nunca, que también se llama navegación dibujada. Cajón de navegación. Sorteo de Knave. Está bien, así que está a la izquierda. Y si tocas aquí en el ícono del menú de hamburguesas, se va a tobogán por aquí. Ahora puedes ver que esto es correcto. Navegación. Se va a ampliar algunos fuera de las zonas. Si tocas en algún lugar, se va deslizando dedo del pie hacia adentro. Pero se puede ver que hay un poco de diferencia entre lado. Nunca. Y ahora mismo lado nunca tienen más prioridad. Se va a llevar toda la pantalla. En tanto que esta navegación derecha, va a salir de la barra de estado. De acuerdo, entonces la parte superior, que es la zona más oscura, se llama barra de estado. De acuerdo, ahora, si miras la estructura de establecer, también
es la misma. Apenas un poco gastado. No vamos a diseñar en este momento para tablet. Pero si estás diseñando para tablet y esa parada, necesitas verlos porque aquí hay pocas opciones más. Como se puede ver. ¿ Qué? Aquí y escritorio más. Tenemos una barra de herramientas secundaria u otra barra de herramientas con la herramienta principal, pero porque tenemos más espacio. Por lo que este diseño de material de diseño es realmente impresionante. Se está expandiendo con su, ya
sabes, tamaño
de pantalla. De acuerdo, así que pasemos a la siguiente. De acuerdo, Así que
ustedes agentes, pueden ver separadores verticales. Cómo lo están usando Se trata de divisor horizontal. Por aquí en la cima. Este es divisor vertical. Apenas preguntó línea gris y ah, separando el área izquierda de la derecha. De acuerdo, entonces han dicho que si quieres crear algo así, necesitas usar espacio en blanco en lugar de, ya
sabes, crear muchas regiones diferentes. No intentes crear demasiadas regiones, solo una región y usaste espacio en blanco para separar otros elementos, como autos y otras cosas. De acuerdo, así que hablemos ahora. Barras de herramientas. Ahora todos ustedes han visto los taburetes en la parte superior. Tienen diferentes herramientas como estas. Ah, tales iconos. Thes tres dardos, que es mucho más. Yo sólo iba a mostrarte más muchos artículos. Y este es el título aquí. Estas se denominan barras de herramientas y se puede ver que hay muchas variaciones para estas barras de herramientas. Hay barras de herramientas delgadas, barras herramientas de
un proveedor de bits. Y luego hay barras de herramientas que se han desprendido. Estos son para vistas de tablet y escritorio. Esta es otra barra de herramientas llamada barra de herramientas de tarjetas. Ya sabes, puedes ver aquí han usado algún estilo de tarjeta fuera del camino interfiere para crear esta barra de herramientas. Esta es barra de herramientas flotante y ésta está desligada. OK, así que no quiero meterme en ah muchos detalles, pero hay que saber que a estos les dicen barras esta es barra de abajo porque muchas veces su diseñador, van a hablar con sus desarrolladores y creo que deberían estar al mismo ritmo. Al menos saben cómo sobre qué llamar a diferentes elementos y cómo van a interactuar. De acuerdo, ahora lo principal, hablemos de este aire. Pero esto es muy importante porque cada app va a tener este Akbar. Y una vez que vamos a empezar a diseñar, vamos a ver sus diferentes especificaciones. Pero ahora mismo vamos a ver lo que son diferentes porciones. Estos son iconos de acción. Estos nunca son íconos, que va dedo del pie deslizarse hacia arriba nuestro cajón de navegación. Se trata de muchos iconos para ver más opciones de menú. Esto es tal y estos son más iconos de acción. Puedes poner uno o dos iconos por aquí. De acuerdo, así que aquí hay diferentes variaciones fuera de los equipos de luz y oscuridad. Se puede ver por aquí. Esto es como él. Habla con él. También se puede ver la sombra es un poco más clara en nuestro aquí de un más oscuro por aquí. De acuerdo, entonces hay una cosa más. También puedes hacerlo transparente. Entonces cualquier color que esté en el fondo fuera de tu aplicación en toda la pantalla, se va a fundir dedo en esto. Por lo que estas son opciones diferentes. Estas son otra app. Colores abstractos como tengo este color azul y un poco azul más oscuro para esta barra de estado. Y no vamos a mirar estas especificaciones de diseño en este momento. De acuerdo, Ahora puedes ver aquí tenemos ah, menús. Y ah, puedes ver estos son menús. Cuando pases por aquí, vas a ver esto o lugar tocar en esta zona. Este es un icono de filtro. Este es el filtro de flecha abajo. Se llama huelga en. Y si haces click en este, se va a mostrar esto. De acuerdo, Así que un poco sobre cómo se va a ver esta barra de estado y cómo vas a,ya
sabes, ya
sabes, usarla en el sistema de diseño de Android. De acuerdo, Ahora se puede ver que va a estar en la parte superior, y ihsaa No voy a entrar en las tallas Vamos a entrar en las tallas están en DP's en la siguiente lección. Ahora mismo, sólo
estamos, ya
sabes, vamos a mirar cuáles son diferentes áreas y cómo podemos representarlas o cómo pueden variar en diferentes apariencias. De acuerdo, así que voy a bajar ahora. Se puede ver por aquí. Aquí hay otro color basado en contenido que han tomado de este fondo. Este es un poco transparente pero es negro. 000 20% 0 atrás. Ok, entonces tienen a Jean. Están cambiando la opacidad realmente me encanta cómo,ya
sabes,
cambian ya
sabes, las cosas ahí en sistema de diseño seco o diseño de material androide. Ahora aquí puedes ver tenemos la parte de estado de acciones. A este estado se le ha impedido tomar el color de aquí. Esta es la barra de estado de vida 70% blanco f f f. Así que hay muchas variaciones que necesitas dedo del pie. Mantén tu mente abierta que si estás diseñando algo en diseño de material android, puedes tener muchas variaciones para este título de policía. Pero ahora esta es la barra de navegación de Android. Está presente en algunos fuera de los teléfonos. En su mayoría teléfonos de Google, supongo. Y va a ser oscuro y claro. Lo que sea. Puedes usarlo si quieres. Ah, está bien. Entonces hablemos del lado. Nunca se sabe el lado nunca va a ocupar tanto espacio y dejó algunos fuera del espacio por aquí. Se va superposición de dedo en todos los elementos detrás de ella. De acuerdo, entonces estos son ejemplos diferentes. Déjame mostrarte. Este es el ejemplo de la izquierda. Nunca. Y vamos a ver qué? Su ejemplo fuera del ahora mismo. De acuerdo, así que voy a jugar esto. Por lo que esto es ahora mismo se puede ver el deslizamiento interior justo en el área de contenido. Por lo que se trata más de esta imagen. Por lo que han abierto la imagen que puedes liderar. Se puede volver atrás. De acuerdo, así que esto es justo ahora en realidad está actuando como hombres adicionales. Hombres, hombres tú por esta imagen. De acuerdo, así que esta es la diferencia. Si te estás preguntando por qué hay ahora mismo, pero no te dejó nunca el lado. Nunca. Esta es la diferencia. Esto se va a llevar toda la pantalla, y no se puede hacer nada por aquí mostrando algunos fuera de la pantalla detrás. Pero se va del dedo el ahora mismo va a tomar toda la pantalla, y te va a mostrar más opciones sobre el mismo área de contenido. Simplemente va a ocupar el área de contenido, no toda la pantalla. De acuerdo, ahora estos son marcos blancos o tarjetas, supongo. De acuerdo, así que es solo, um solo ten en cuenta que la mayor parte del contenido en android su sistema de diseño es de 100 materiales de diseño. Está en la forma fuera de estas tarjetas, y van a ser así. Ten algo de sombra. Este es el botón encendido. Y tenemos múltiples cartas. Toma un exceso de otros autos así y se puede ver lo que aquí cardado contenido y se expande y colapsa. Y esto es un enfocado su bar en móviles y otras cosas. Por lo que estos son todos los elementos tarjetas, barras de
navegación, barra de
estado o sistema, área de contenido de la barra
principal, barra
inferior. De acuerdo, entonces les voy a dar otro ejemplo. Al igual que yo te enseño esto es ah, barra
inferior. Se puede ver aquí está la navegación y navegación, y en la parte superior de ella, se
puede ver tenemos favoritos explorar una cuenta de manera similar, ésta y ésta estos son tres equipos y estos son básicamente la navegación inferior que va a ser global para toda la app. Global significa que se va a quedar. Apegarse a este fondo durante toda la aplicación o alguna porción ofrecida. Entonces esto es, creo, todo sobre todas las diferentes regiones que has estudiado todas las tarjetas Detener barra de estado en un área de
contenido de barra navegación inferior izquierda nunca o dibujar tarro izquierdo y derecha navegación y acción
flotante botón. De acuerdo, Entonces espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
12. Cómo funciona el diseño de materiales: De acuerdo, veamos qué es el equipo o lo básico del diseño de material de Android. Ahora, este diseño de material androide se basa en el apilamiento de papel uno encima del otro. Ahora, se
puede ver en este diagrama a la derecha hay dos elementos. Uno es este papel, papel
blanco. Y hay otro botón o y un Papel de forma redondeada encima de él. Se puede ver esto es Z exceso. Por lo que todo en su diseño de material es elevado con fácil acceso. De acuerdo, entonces cada elemento tiene ah, espesor del
material fuera de un dp. De acuerdo, Entonces, como la gente, la gente tiene un grosor muy ligero. Papel muy delgado, pero tiene algo de grosor. De acuerdo, Así que el papel y las cosas encima uno del otro, simplemente similar el dedo del pie apilando papel en la parte superior, uno al otro, como el origami. Puedes Estás creando pocos diseños o interfaces poniendo diferentes botones. Diferentes barras de aire en la parte superior. Fuera de la base están el papel base. ¿ Sabes cuánto más distante? Un elemento es de otro va a estar sumido en Z exceso. ¿ Cuánto es? Ah, elevado desde la base. De acuerdo, Así que diferentes elementos tienen diferentes animaciones y sombras, pero en este momento nos vamos a hablar de eso en la siguiente lección sobre elevación y sombras. Diferentes sombras materiales. Ahora mismo necesitamos ver y entender. Esta es la cosa de exceso y eje y excesos que a cuánto se le quita un espesor? Algo como puedes ver tu cabeza aquí es un smartphone y es enfermedad está sumida en Z OK, z exceso se va a estar tomando Va a tener unos tres d forma. Si quitamos este fácil acceso de lo que es, sólo hacer el o bidimensional. Por lo que para hacer este efecto tres d y estos botones y sombras, están usando básicamente dos sombras. Entonces aquí tenemos, ah, una sombra de la luz clave una luz y la sombra de la luz ambiental. Luz ambiental significa que va a ser luz muy afilada y se puede ver que tienen
sombras suaves en el lateral. Y ahí está tenemos aclarar sombras oscuras porque la luz está en algún lugar por aquí en la parte superior y combinando ambas tienen esta sombra mixta, que es básicamente sombra androide. De acuerdo, entonces todo esto está trabajando con el eje Z para que puedas ver este trabajo. ¿ Es este botón o este elemento se eleva desde este fondo usando esta sombra. Por lo que son, se
puede decir, fingiendo ser como tres elementos D y usando la sombra y esta elevación. En la siguiente lección, vamos de pie. Ver qué son diferentes. Sombras y elevaciones y agua, diferentes elevaciones para diferentes elementos. De acuerdo, entonces cada elemento tiene diferente elevación, cuánto más alto es y cuánto elevado está desde la base. Entonces pasemos a la siguiente lección.
13. Sombras de material: De acuerdo, ahora, en esto está en, vamos a ver el diseño de material Android, las sombras y la elevación y cómo realmente funcionan entre sí. Vale, Ahora, antes de entrar en más detalles, puedes acudir a esta hija material, tus guías de barra barra barra recursos vida slash sombras hija CML y no, puedes ver aquí tenemos boceto ilustrador y para el archivo show. Y también puedes abrir este archivo de boceto en Adobe X'd. Entonces si tienes un no, sé extra, puedes usar este. De acuerdo, entonces tienen que sombras umbra y penumbra de uno es más oscura. Sombra a éste. Y éste es más ligero o suave. Shero y ah, tienen todas diferentes, ¿sabes? Ah, lineamientos para cuánto o cuánto va a difundir cuánta OPEP es, cuánta sangre va a tener. Por lo que estos son todos ajustes diferentes. Pero no vamos a recordar nada de eso porque ya podemos descargar estos tres para un espectáculo, archivar nuestro archivo ilustrador o archivo de boceto y usarlos. De acuerdo, Ahora vamos a ir a este efecto de elevación. ¿ De acuerdo? Ahora la elevación significa que cuánto en la distancia en el eje Z es de un elemento a otro . Entonces si un elemento como este está en la parte inferior, se
puede ver que tiene que dp elevación. Tiene algo de sombra y se puede ver que se eleva desde esta base. Esta es la gran base en el Eric. Por aquí es para dp elevado desde la base. Por lo que tiene sombra muy suave, No algo. Cuando algo va a ser más elevado, va a tener más sombra y más extendido de la sombra. De acuerdo, entonces es muy natural. Ahora puedes ver aquí tenemos Este es el diagrama. Aquí tenemos el eje Z Y si ZX se mueve en la parte superior y la distancia entre estos dos elementos es de 60 p Así que básicamente la elevación de este y éste es de 60. Ser elevación significa que la distancia desde la parte superior hacia fuera un elemento este inferior uno, los dos temerosos por lo que este. De acuerdo, entonces la distancia entre éste y éste va a ser la elevación. Pero, ¿cuánto? Este papel stop se eleva desde el de abajo. De acuerdo, entonces si lo
tienes, eres tienes dos manos. Basta con solapar el de arriba y ver cuánto van las distancias entre puerto fuera de ellos. Esta es básicamente la elevación. Ahora has captado la idea fuera de elevación. Toda esta elevación está controlada por la sombra. Si usted Si algo es más elevado, tiene más sombra extendida alrededor de él y tiene más sombra, sombras
más oscuras. Eso es todo lo que necesitamos recordar. Y se puede ver. A continuación te presentamos las elevaciones apremiantes de diferentes elementos. Ahora bien, si algo es más elevado como puedes ver elevación y DPS 24 significa que
va a estar en la parte superior de cualquier otro elemento. Entonces si aparecen algunos cuadros de diálogo o algún recolector de color algo está apareciendo en la pantalla, no se
puede hacer nada más. Por lo que esto va a ser tener más elevación y tener más sombra redondeada de lo que tenemos Navigation draw Rij. Nuestro modelo de hoja inferior de 12 dp es barra de acción flotante. Los han visto muchas veces los enyesados en círculo y después tenemos sub menú. Entonces tenemos este fondo. Son tarjetas manuales con barrido. Tienen una DB off de elevación y luego tenemos la barra de snack de seis botones de acción flotante. Y luego tenemos esta merienda Abbott. Pero básicamente es parte de status un poco de staters, que se ha hecho algo o tu email sus correos electrónicos han sido borrados o algo
así . Entonces tenemos este re indicador fresco país rápido Tal barra tal materia que todo esto tiene tres alzado apagado. Tres dp. Después tenemos carta de elevación de reposo, botones
corridos, elevación de detención. Estos son los botones que tienen ah, arrestar significa que no están siendo presionados o no están siendo tocados. Por lo que una vez
que estén presionados, van a tener algún efecto diferente de sombra. Y este es el interruptor. Tiene un dp por lo que casi no tienen sombra. De acuerdo, entonces aquí tenemos el diagrama donde se puede ver qué Aquí, 24 estas son las elevaciones así y esto es básicamente fácil acceso de abajo a arriba. Y éste está en lo más alto. Esto se está superponiendo todo lo demás. Esto se superpone a todos estos elementos, y esto se superpone a todos los elementos debajo de él. Entonces así es como esta elevación y esta eh? Las sombras de diseño de material de Android están funcionando Ahora. Se puede ver aquí tenemos esta acción flotante, pero este es un ejemplo muy bonito. Y entonces tenemos este AARP son ahora se puede ver en bar está un poco abajo en la elevación, por lo que tiene sombras más claras, ¿
OK? Y si nos fijamos en esta barra extra flotante, tiene más propagación y más médico a su alrededor, tiene más propagación. Por lo que está arriba en el eje Z, por lo que tiene más sombra. Entonces así es como va a funcionar. Entonces tenemos este cajón de knave app en el lado izquierdo. puede ver lo que tiene elevación de Mawr que contiene tanto botón de acción flotante en una barra. Por lo que se está solapando a ambos. Su sombra se superpone a todos los elementos detrás de ella. Tiene elevación hacia fuera 16 para que puedas ver acción flotante. Pero está detrás de ella. También hay un cuerpo detrás de él. Entonces estos son algunos ejemplos más de cómo van a funcionar estas sombras. Han dicho que esta acción flotante tiene alguna buena sombra porque es elevada. Debe mostrar elevado por aquí porque esto se puede ver esta Ah abaaoud en el en la parte posterior. También tiene algo de sombra para que puedas leer todas estas. Cuáles son sombras diferentes y cuáles son valores diferentes. Pero no vamos a recordar todo esto. Se puede ver que estamos aquí para DP Detenir botón y presionado Estado es que va a ser un DP significa que el botón va a ser elevado más. Una vez que lo presionas e interactúas con
él, va a subir en el eje Z. De igual manera, éste se puede ver qué aquí? Una vez que algo
se presiona, va a tener más elevación y sombra más suave. Está más arriba. Se puede ver que la próstata es el doble del estado de reposo. Estado de reposo significa botón normal que no se presiona ni en tráfico e interactúa con. Y una vez que lo presionas, se
va del dedo del pie, mueve hacia arriba o hacia abajo y tiene algunas diferencias de sombra. Aquí tenemos esta tarjeta de tarjeta es básicamente ésta esta ficha de información y tiene descanso . Se investigue el deber contemplado. 80 ser No, puede ver que tiene más sombra porque se levanta y luego tenemos estos menús sub menús . Tienen más. Se puede ver el sub menú tener más sombra porque está en la parte superior fuera de este menú. Entonces tenemos estos diálogos. Van a estar en lo más alto. Y luego tenemos este cajón de broche 16 dp Ha compartido por aquí a la derecha. Esta es la hoja inferior mortal. Se llama. posible que lo hayas visto cuando intentas compartir algo de alguna app como Facebook o algo así. Ah, nuestra comparte tu foto e intenta dar click en el compartir pero Y te va a mostrar que vas a compartir Gmail. Pasar el rato Google o lo que sea. Por lo que se llama hoja inferior mortal. Entonces tenemos este tres indicador fresco tres dp También es botón y luego tenemos estos tal país de código de barras. Se puede ver esto es tal barra y tiene un dicho duradero para atornillar State tres dp en este es snack bar. Esto es básicamente sólo una acción de una sola línea. Algo así como ese indicador en la barra de indicación 60 p Entonces tenemos el interruptor. Este es el interruptor y tiene una elevación dp off. Entonces creo que todo eso se trata de esto. Ah, elevación y sombras. Te voy a mostrar cómo tengo estas sombras. He descargado material Io archivo PST Y ahora puedes ver aquí tenemos todas las sombras así que no necesito recordar todos los ajustes a tal vez tres d p tengo todas las sombras
conmigo Déjame mostrarte Estas son todas las camisas, sombras a la derecha se puede ver Y tenemos ah, cuatro dp. Y básicamente hay dos sombras porque las luces eran dos luces, Hay así que hay dos sombras de gota. Uno es este 176 y 10 24% que es Ah, un poco de sombra ligera. Recuerda, creo. Y ésta es Sempra, y no estoy seguro de si son palabras francesas, así que podría no estar pronunciándolas. Correcto. De acuerdo, entonces así es como tienen efecto múltiple de multiplicación, porque estas sombras se van a mezclar juntas para que puedas descargar adelante y descargar estas sombras materiales de los recursos. Piensa que voy a apoyar todos los enlaces de recursos para que puedas descargarlos y experimentar con estos. Espero que hayan entendido este concepto de elevación y sombra material. Y de verdad quiero que aprendas esto porque tengo no he visto ningún curso ni nadie predicando todas estas cosas diferentes. Entonces pensé que debería hacer el curso más detallado sobre diseño de materiales, así que espero que disfruten de la sesión. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
14. cuadrícula de 8 puntos en Adobe XD y diseño de materiales: árbol. Te voy a mostrar qué es el sistema de cuadrícula de ocho puntos y por qué el diseño Android Mobile o el diseño material de
Google lo usa. De acuerdo, así que ahora mismo estoy en Adobe Exit E y, ah, puedes crear nuevo tablero de arte, y vamos a usar este móvil android, y te voy a mostrar tanto la cuadrícula cuadrada como el diseño para y escribir más mordeduras. ¿ De acuerdo? No. En primer lugar vamos a ir a esta cuajada, asegúrate de haber seleccionado este tablero de arte, y las columnas iban a usar nuestros seis, y en ambos lados iban a dejar margen 16 puntos. Por lo que esta es su grado básico para el diseño. Por lo que seis columnas en ambos lados. Escrito de columna de 16 margen es 48 espacio Qatar entre diferentes columnas. ¿ Lo es? Entonces esto está ahí. Básicamente. Ahora vamos a replicar esto presionando el arte o la tecla de opción. Y ahora vamos a cambiar a la plaza. De acuerdo, Así que tamaño cuadrado se puede utilizar ya sea usarlo porque hay codicia se basa en
sistema de cuadrícula de ocho puntos . Entonces vamos a dividir las calificaciones de su o cada caja. Esta cada caja de traducción dedo dedo del pie. Ocho puntos son así los ocho dp's. Supongo que sí En este momento, voy a usar cuatro. Ahora. Por qué estoy usando para Porque son grado tipográfico o su línea base tipográfica es dama toe con esta línea de base de cuatro db. De acuerdo, entonces están usando cuatro líneas DP puntera, ya
sabes, alinean su tipografía y separan impuestos unos de otros o la distancia entre dos líneas en cualquier mazos. De acuerdo, pues déjame mostrarte un ejemplo. Esa zona dentro y voy a escribir algo por aquí con este tamaño de 16 y voy a usar uh, Roberto, quiero Digamos hola, querida. De acuerdo, así que ahora puedes ver su traje para tabla encima. De acuerdo, Ahora, ya puedes ver si miras a puerto fuera de estas letras, están sentados en estas thes líneas fuera de cuatro dp. De acuerdo, así se puede ver aquí la línea está sentada por aquí. Entonces hay un hueco fuera de casi dos cajas por aquí. Por lo que una brecha DB entre ambos fuera de ellos y luego esta línea también está tocando esto en la parte inferior. Entonces así es como están mintiendo se va a sentar el dedo del pie así. De acuerdo, Entonces si voy a usar 16 aunque vaya a usar 16 puntos y luego vamos a usar 24 que está ahí mintiendo altura. Por lo que puedes ver así es como se va dedo del pie se ve así el espaciado de líneas. Necesitas dedo del pie. Siempre asegúrese de que es un múltiplo off cuatro. Entonces si voy a 20 se va a sentar de nuevo en las líneas por aquí. Entonces así es como está funcionando su alineación de texto nuestra línea base de texto. También puedes usar algo como esto para que también puedas soltar botones por aquí en. Van a ser traducidos dedo del pie de nuevo similar al DP. Por lo que ahora mismo mi tamaño de saldo es de 10 dp completo de ancho y 36 dp de alto. Así que asegúrate de que estabas usando algo así. De acuerdo, así que alejemos el zoom y veamos cómo está Looking S O. Esta es la cuadrícula. Ustedes canoas dedo del pie una línea en mis años, Sus elementos según toa allí, ocho dp creed o cuatro píxel DP. Genial. De acuerdo, así que esto es básicamente cuatro representado Estoy usando Es igual en remolque. Ocho. O es similar a ADP porque cuatro es un múltiplo off. De acuerdo, entonces nuestros ochenta múltiplo de cuatro. Por lo que ambos son cuatro es básicamente la mitad de él. Entonces esto tiene sentido. OK, entonces por si estás diseñando en Adobe X T, creo que deberías tratar de usar este cuadrado gran cuero que éste. A lo mejor este puedes usar para el diseño, pero me voy me encantaría ver usando este derecho Una cuadrícula cuadrada fuera de la plaza, tamaño cuatro dp y usar el Android Mobile Art Board Y eso es todo lo que necesitas. De acuerdo, entonces espero que hayan disfrutado de este grado de maquetación y ocho DPP excel Mayores 40 personas celebran y cómo he presentado en Adobe X'd. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
15. Matrices y espaciado verticales en el diseño de aplicaciones de Android: No. Ya has entendido lo que es una línea de rejilla DP o un sistema de corriente de ocho puntos y cómo se construye sobre él el diseño de materiales de
Enright. Ahora vamos a entrar en más detalles sobre el espaciado vertical, cómo diferentes elementos tienen diferentes alturas, cómo se han mantenido estas alturas y por qué todo este diseño de material se ve único y elegante cuando se diseña cualquier aplicación en él. Ahora todo se basa en el dimensionamiento vertical, las líneas y el espaciado, y todo este sistema, va a trabajar en conjunto junto con tu ocho puntos o un cred DP. Entonces, empecemos. Te voy a mostrar Este es el documento que descargué de Google Material Design y está en Adobe Illustrator. Y ahora se puede ver que se trata de más líneas clave móviles y espaciado. Ahora hay algunas cosas que quieres entender. ADP es el bloque más pequeño o el cuatro DP es el tamaño de bloque más pequeño en el
diseño de material android . Ahora, cada vez que construyes algo, aunque estés construyendo una casa, debe
haber bloques pequeños y debe haber algunos bloques más grandes. Por ejemplo, todas tus ventanas tendrán el mismo tamaño. Por lo que este es un bloque más grande. No es igual al tamaño del ladrillo que estás usando. Entonces todos los ladrillos, son del tamaño más pequeño, que va a ser un TBI,
por ejemplo, y, por ejemplo, ejemplo, el tamaño de bloque de segundo tamaño. ¿ Quieres usar un bloque más grande, quieres usar 56 db para eso? Entonces en el diseño de material android, si miras por aquí, fija, incremental, determina, determina con off estructural tú elementos. Por lo que en su mayoría los elementos U. Tienen su tamaño de inclement 50 60 p, por lo que están usando este descanso más grande para sus elementos U. Entonces está la segunda cosa, que es la clave de dimensionamiento vertical. Ahora cómo se dimensionarán los diferentes elementos. ¿ Cuál será la distancia entre ellos? Está construido sobre todos estos bloques fuera de diferentes tamaños. ADP La clave de color es este A deep es el tamaño 16 dp que 24 48 64 56 70 a 80 un idiota. Por lo que todo el diseño de material androide se basa en estos bloques de construcción. Tenemos 123456789 tipos fuera de diferentes tamaños de ladrillo, y los vamos a utilizar para construir nuestro diseño de material android. Ahora, el dimensionamiento
vertical también va del dedo del pie. Determinar los tamaños fuera de los diferentes elementos. También, los márgenes horizontales van a estar por aquí. Entonces te voy a mostrar. Sólo déjame encender el dimensionamiento de llaves por aquí. Ahora se puede ver tengo ah habilitado mis líneas clave verticales y se puede ver básicamente están mostrando los márgenes y las pinturas ahora a la izquierda y a la derecha. Si tú si me acerco, puedes ver a la izquierda y a la derecha. Hay un margen de descuento 16 db en ambos lados. Es margen igual y todo el texto que está por aquí a la izquierda. Se alinea con 72 dp off distancia de la frontera en el lado izquierdo. Por lo que el texto tiene un petting o margen off 72 ambos lados tienen 16 dp off márgenes en ambos lados. De acuerdo, veamos otras cosas. Se puede ver cómo esto se va a quedar muy bien en todos los diferentes dispositivos. Ahora puedes ver por aquí. Hay doble margen de 16 y 32 utilizados en esta aplicación de teléfono donde tienen más iconos por aquí alineados por aquí. Por lo que ahora se puede ver que hay dos márgenes por aquí 16 y 32. Por lo que dieron un poco más de cabello marginal cuando hay un mejor ni aquí. Por lo que dieron un poco más de espaciado para este contenido dentro de esta zona por aquí. Está bien. De igual manera, se
puede ver por aquí. Este es cajón de navegación, y puedes ver aquí tenemos 56 tamaño dp, que es otro tamaño de ladrillo,
nuestro tamaño de elemento principal. Y el resto es casi lo mismo. 16. 70 a 16. Una vez que entiendas esto, puedes diseñar fácilmente APS de gran aspecto. Y no será un misterio para ti que cómo diseñar usando el diseñador de materiales Coogan diseño de
materiales. De acuerdo, ahora vamos a volver a esta clave de dimensionamiento de partículas, y voy a resaltar lo que son diferentes. Simplemente esconde este, y voy a resaltar este tamaño inky. Ahora, si miras estos colores, van a estar presentes en esto o 80 de aquí. Ahora se puede ver este rojo era igual a un DP. Entonces una distancia lateral dp entre estos dos elementos, entonces tenemos ocho y 8 16 db y entre tenemos una línea separada. Déjame duro esto y mostrarte. Puedes ver que sabes cómo funciona perfectamente el espaciado. A esto se le llama ritmo vertical. Han creado un ritmo vertical agradable, hermoso usando estas líneas clave y bloques verticales de tamaño clave. Y ah, Ahora si miras este,
éste es morado. Déjame ver. Se trata de 72 DP de tamaño en Hyde. Esto es vertical con ellos. Entonces todo lo es. El dimensionamiento está en vertical Ahora esto es Ah, azul
pálido. A ver. Qué es un azul pálido azul pálido es 48 dp. Entonces esto es, uh esto es 40 años DP. Por lo que este es de 48 dp Un color azul agudo que es de 50 60 p que es tu barra de aire. Es en 50 60 p. Así que si tienes este archivo, puedes calcular fácilmente todo el sistema de dimensionamiento diferente fuera del diseño del material y
será un pedazo de pastel para ti. Se puede ver que esto es un poco morado. Esto es azul, entonces estos también se soplaron. Significa que creo que esta es una o dos líneas de TB por aquí. Abramos ahora los márgenes horizontales. Estos son los mismos que hemos discutido antes de 16. 72. Todas estas líneas tienen 16 dp de ancho y toda esta distancia es de aquí a aquí Es 72 db y el texto está alineado en el 72. Están de un lado. De acuerdo, Entonces espero que hayan disfrutado de esta lección y hayan entendido qué hace este
dimensionamiento vertical y cuáles son los esquís? Estos son todos los bloques de construcción fuera de diferentes tamaños para el diseño de material android. Una cosa más que quiero mencionar aquí hay unas cajas de límite nacidas para cada elemento que puedes ver aunque cada elemento es diferente estos iconos a su alrededor o algo así . Pero son caja de límite, que es el tamaño real en este diseño de material android es diferente. Por lo que este es 56 por 56 DP. El cabello es el botón. Y creo que éste es ah, tal vez 48 dp, supongo. Y estos iconos son 2040 personas iban a hablar de estos iconos más adelante en la siguiente lección. Espero que hayan entendido esta clave. Líneas
verticales, ritmo
vertical, espaciado vertical. Si no sabes qué es el artículo vertical, tengo un curso completo sobre tipografía, vertical de ellos y todas esas cosas. Si quieres llevarte eso, puedes llevarte eso. Espero que hayan disfrutado de esta lección. Pasemos al siguiente.
16. Buttons e iconos para diseño de aplicaciones de Android: en esto. Escucha, vamos a hablar de botones, iconos y tamaños de objetivo táctiles. Y cuáles son las pinturas aplicadas dedo del pie los iconos en dispositivos android y diseño de materiales. Ahora hay estándar para cualquier objetivo táctil porque eres iconos y tus botones, serán interactivos. Por lo que si alguien va a tocar el dedo del pie sobre
ellos, debe ser igual dedo del pie su tamaño de dedo. O al menos es más fácil para ellos golpearlo. Por lo que el tamaño estándar 48 antes de la a. D. B. Y se basa en la investigación que el tamaño de los dedos de cada dedo tamaño voltea de 7 a 10 milímetros. Entonces, según eso, su tamaño es de casi nueve milímetros escribiendo 48 dp Así que están usando nueve milímetros para su estándar. Entonces si estás diseñando tu app en diseño móvil android o cualquier tipo off app móvil, debes cuidar el tamaño estrella Stargate para nuestra U. S. Creo que es un poco diferente, pero para Android es 48 dp. Por lo que ahora se puede ver del lado derecho Hay esta acción. Iconos están en el Anbar y luego tenemos Ah, aquí tenemos áreas más capaces con son las imágenes con las que puedes tocarlas. Y ah, ahí está este ícono más por aquí. Esto también es interactivo. Y ahora puedes ver Déjame mostrarte qué es cómo están usando diferentes secciones por aquí . Entonces, ¿este es tu ícono por aquí? Tiene que dp off bateo a su alrededor. Se puede ver el área blanca. Tiene algo de espacio. Por lo que es básicamente para dp encendido y encendido. Esto se puede ver de nuevo. Hay casi dos dp por todos lados o tal vez cuatro, supongo. Entonces se puede ver alrededor que tienen más acariciar o espaciar esta zona rosa se puede ver qué? Aquí. Entonces este es tu ícono y por todos lados es un cuatro dp off pendiente. Así que ten eso en cuenta que si tu icono es de 48 dp off size, debe
haber si estás diseñando Eres un diseñador de iconos para Android Mobile Labs. Tus iconos deben tener un petting o cuatro dp en todos los lados. Se puede ver qué golpeó Este es un blanco táctil. Entonces en este caso, el icono tamaños reales 40 db Pero son capaces tamaño o objetivo táctil El área de destino es 48 dp Ahora se trata de un icono que es iconos pequeños estándar. Se trata de 24 males de cerdos o 24 salsas o DP. Y si lo miras, puedes ver. Pero son blanco táctil. L siempre será de 48 dp y la distancia entre estas herramientas a las zonas. Déjame mostrarte. Se puede ver lo que escuchan todos los iconos de puntos. 40 DP Estos son desviar nuestros iconos. Yo llamo a los
pequeños, pequeños iconos que van a ser 24 dp Touch Target estará en ambos serán 48 dips o DP . Y también hay una cosa más que la distancia entre hacer estas áreas capaces de dedo debe ser igual a 80 pieza. Por lo que ADP brecha entre ellos para que puedas ver u oír, escuchar. Tenemos una profunda brecha entre ellos y de nuevo en este apartado. Estamos aquí se puede ver, desacuerdo y de acuerdo hay un tope de un DP entre ellos. Por lo que esta es su área táctil. Eso es objetivo, y la brecha es un debate entre ellos. Para que ese usuario no extrañe a los hombres Señorita, ya
sabes, Señorita Hábito. Creo que esto sería poco paso en falso y dar click en otro lugar si quieres. Si quiere dedo del pie click en Disagreed, puede
que no termine tocando por aquí. Entonces aquí tenemos otra vez. El tamaño de los botones, que es de 30 60 p, es la altura mínima fuera de la carga. Esta es la altura mínima cualquier botón que estas diseñando y escribir diseñador móvil Android Model design 30 60 p es la altura y 48 db es en realidad el objetivo táctil, por lo que debes tener algún relleno alrededor para gestionar este tamaño. Entonces estás acariciando farol. El peso debe ser de 48 DP. De acuerdo, así que una cosa más. Estos iconos de aquí se llaman iconos del sistema, sus iconos de Android. Y si quieres estos iconos, puedes ir a esto un material dot io slash iconos. Puedes buscar cualquier icono o puedes navegar por todos estos iconos. Basta con hacer click en cualquiera de ellos para que sea seleccionado y podrás ver en la parte inferior
verás 24 dp 32 db 48 de DP. Cualquiera que sea la talla que quieras en blanco o negro y pick on SPG. Creo que s cuál es lo mejor si quieres P y G's o formas de iconos que puede generar para ti. Puedes seleccionar cualquiera de estos iconos. En realidad, utilizo estos iconos en mi AP en el ejercicio final en esta lección, así que asegúrate de que puedes descargar de ellos iconos de dot ru slash material y puedes descargar estos iconos. Y ahora voy a ir de pie este para mostrarles algunos fuera del estado apagado de sus botones y lo diferentes tipos de cargas que tienen. Entonces tenemos uno este botón de acción flotante. Tiene este sencillo enunciado y esto realmente sugirió dónde lo tienen tiene una
sombra ID más extendida . Entonces tenemos este botón plano. Esto está dispuesto una recta. Entonces esto es normal. Pero en esto es un área de objetivo táctil, esto es de nuevo botón normal encendido. Tiene algo de sombra a su alrededor. Por lo que estos son dos estilos de patentes. Entonces tenemos el mismo botón, oprimido y discapacitado. Ahora, en el caso fuera de éste, la próstata tendrá algún borde redondeado como esta camisa gris y discapacitado tendrá esto crear discapacitado pero lo molestan. Por lo que se trata de dos equipos diferentes oscuros y claros. Y hay una cosa más. De acuerdo, ahora te voy a mostrar otro tipo de iconos que se llaman app de lanzador. Iconos de iconos de producto del material Diseño de Google hará diseño de material y todos estos iconos puede ver esto es la pantalla disparada de mi dispositivo Samsung Device Android, y se puede ver por aquí estos son todos el icono que están en 48 DP. Tengo un curso completo sobre la creación de estos iconos de aplicación de lanzador de iconos de producto Si lo deseas, puedes diseñar ahí tu propio icono APS. Si haces lo que puedes, echa un vistazo a ese curso para que estos sean otros iconos. Entonces los iconos reales, que vamos a usar en nuestra manzana llamados iconos del sistema y estos se llaman iconos
del producto. Entonces si quieres más detalles sobre diferentes sistemas de cuadrícula y guiar su uso para desarrollar estos sistemas de diseño de iconos, puedes ir a estas pautas de diseño realmente directrices, estilo e iconos. Te voy a vincular esto te va a mostrar este enlace compartir este enlace contigo, y espero que hayas disfrutado de este icono tamaños, tamaños de
botones y todo esto fuera de usabilidad que cuanto toque objetivo necesitamos? Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección
17. Tabletas de materiales: en esta lección. Vamos a ver los dabs off android diseño de material y por qué los usamos. ¿ Cuáles son los diferentes tipos de estas puñaladas? ¿ Y cuáles son las métricas y especificaciones de diseño? ¿ Cuáles son los tamaños en DB o dips para estos pasos? De acuerdo, así que empecemos. No. En primer lugar vamos a ver cuáles son los componentes de las puñaladas. Son de dos tipos. Existen dos tipos de pestañas. Uno son pasos fijos que puedes ver en esto en esta zona del viernes, hay tres pestañas y no son herbales escolares. Entonces si tienes, como, por aquí cuatro o cinco toques, entonces estarán saliendo de la pantalla y podrás desplazarte entre cuatro o cinco pestañas
diferentes. Abs fijos, van a ser tres. Arregla los grifos y solo puedes desplazarte entre estos tres, pisarlos y mover el dedo del pie esa sección. Ahora habrá etiquetas tabuladoras presentes en ellas. Puedes usar cualquier color fuera de tu propia marca o tu propio sitio web, o tu propia aplicación, o el color que quieras en tus pestañas móviles. Y eso es todo. Está bien. Ahora, ¿por qué los usamos? Esta es la segunda pregunta básicamente las pestañas. Ellos te van a ayudar a agrupar tu contenido y proporciona el lujo de ins off mostrando el contenido del grupo. Ahora aquí puedes ver que hay diferentes tipos de aplicaciones de pestaña. Dónde puedes aplicar hace y cómo puedes aplicar Aquellos hay uno a la izquierda puedes ver por defecto su barra más fija ahí. Pero esto es un bar. Este se va a paginar título o tu título de solicitud. Entonces tenemos otro. Otra aplicación fuera que se extendió en bar y fijó en bar. Se puede ver aquí tenemos apenas tres artículo. Por eso se llaman fijos y se puede ver u oír. Entonces tenemos este pellizco pizca de contenido escolar barras de pestañas. No hay un bar en la parte superior y apenas estas tres secciones estaban aquí y entonces tenemos ah tal barrido con estas malditas barras. Entonces tenemos Estos son los pergaminos herbales sus barras. Ahora puedes ver que la diferencia entre los rebeldes de tornillo y los fijos es que los fijos van a empezar desde el borde de esta sección. De acuerdo, así que borra toda tu aplicación de lona o android, y va a empezar con eso. Creo que va a estar a casi 72 db de aquí. Se puede ver que esto está alineado correctamente con cada uno fuera de ellos. El texto de estos ítem Uno y título de paz. De igual manera, puedes ver aquí tenemos con iconos, las mismas pestañas con iconos. Y estos son los que vamos a utilizar en nuestro diseño de aplicaciones en con photoshop y Adobe X'd. Esto es lo que utilicé. Esto es con el ícono y el título por aquí. De acuerdo, entonces cada puñalada tiene título, que va a estar en todo en gorras, todas gorras. Se pueden ver favoritos cercanos tres desde el todo gorras. Por lo que estos aire para pestañas de escritorio, Si estás diseñando para escritorio tal vez o tablet, tal vez puedas ver estos. Voy a incluir el enlace. Ok, ahora hay algunas cosas que debes considerar mientras usas estos malditamente buzz primero es que se van dedo del pie grupo contenido similar. De acuerdo, entonces si están familiarizados con los mecenas de diseño, que es lo que he discutido en mi experiencia de usuario diseño para escuelas más grandes, pueden
verlos aquí en el lado izquierdo Música, películas, libros, juegos. Por lo que son categorías fuera de una tienda. Por lo que hay diferentes categorías y puedes comprarlas a ellas. Ahora, aquí del lado derecho, este ejemplo está un poco equivocado. Por lo que se han desesperado de que no se pueda hacer algo como esto. avistamientos de modismo en perfil ayudan porque todos son diferentes. Um, todas
son categorías diferentes, así que así puedes ver tu cabello. No eso absolutamente Entre los destinos son muy importantes dentro de la tienda. Por lo que estos no están relacionados entre sí. Estos son básicamente la agrupación de este contenido. Por lo que las películas se agrupan en un contenido una sección, una pestaña. Entonces esta es su primaria Tú de manera similar por aquí puedes ver que solo necesitas el dedo del pie aliándolos así. No se pueden usar. Ah, apilados
verticalmente uno encima del otro. Hay una cosa más. No hay algún menú son el sub su bar. No se puede hacer algo así. Sólo hay una categoría importante. Esto es básicamente diseño de navegación mecenas eso necesitan cuidarlos. De igual manera, hay una aplicación más que si estás usando ah, nombre
muy grande vas a usar algo como esto. Nuevas llegadas e hija Dort. No se puede usar así al mundo entero. Y también se puede. Debe minimizar el tamaño de cuatro. Creo que los cuatro tamaños diferentes por aquí. Está bien. Está bien. Entonces eso es todo esto es la pestaña fix. Tres artículos de los que tenemos pestañas diferentes. De acuerdo, entonces esto es lo que queremos discutir Por aquí. Especificaciones, pestañas
fijas. Está bien. Ahora puedes ver los tamaños del grifo. DP de 40 años, que es un tamaño de tap estándar que todos los elementos capaces donde necesitas tocar pero tu dedo Deben tener 48 db de altura. No es cierto para los botones. Botones tienen 40 30 60 purificados. Pero tienen relleno incluido con ellos. Por lo que de nuevo van a ser 48 básicamente. De acuerdo, entonces se puede ver qué pelo 20 dp es el relleno inferior de este texto. Por lo que necesitas mover tu texto 20 dp desde la línea inferior de estos dabs 12 bp es el margen entre las pestañas en ambos lados, los márgenes
derecho e izquierdo van a ser de 12 dp. Y eso es todo lo que pienso. OK, ahora hay algunas cosas más como yo. De acuerdo, entonces quiero este dedo porque vamos a usar este. Entonces necesitas dedo del pie conseguir qué? En realidad, los monumentos son para estas barras de pestañas con iconos. Ahora puedes ver aquí las cubiertas inferiores están a 16 db de la parte inferior. Y hay una brecha de 10 dp off entre este ícono y este texto para el ícono. Cancelo nuestro estándar 24 dp para todos los iconos del sistema como puedes ver por aquí. Este es un icono de este tipo. Este es más icono de menú icona. Todos son 24 dp's toda la altura de esta puñalada nuestro incluyendo el ícono de aquí es de 72 TB. Entonces esto es lo que vamos a, ya
sabes, usar en nuestra app. Entonces necesitas dedo del pie. Crees que cuáles son las especificaciones? Es necesario tenerlos en cuenta. 16 de fondo desde abajo 10 db en la distancia entre ícono y éste vamos a utilizar mecenas
ya hechas y te vamos a usar como él. Entonces no necesitas recordar todas estas No pienses que vas a recordar todas estas de manera similar aquí corazón. Más especificaciones. 40 años DP 24 db 12 BP desde abajo para los iconos y algunas especificaciones más que puedes ver por aquí. Estos son para las pestañas, que van a ser inescrutables. Danza. Puedes ver tu escuela de cabello Las pestañas herbales tienen un margen de 72 D p off izquierdo, que va del dedo del pie alinear este texto con este y puedes ver que está un poco afuera. El bar amarillo está fuera de éste, así que creo que va a ser algo así como 56 o 64 por aquí. Y esto parece una brecha de 16 bebés por aquí. Entonces así es como se va a jugar un juego 20 dp desde abajo 12 12 dp 12 db en ambos lados y ah, hay algunas especificaciones más Puedes leerlas u escuchar máximo. ¿ Cuál es un tamaño DP máximo para cada paso a 64 dp Y cuál es el mínimo? De acuerdo, así que estas son todas las cosas que quiero que miren. No necesitas memorizarlos todos. Pero si estás diseñando algo específico para escritorio o tablet, quizá necesites echarles un vistazo. De acuerdo, Entonces eso es todo sobre pestañas. ¿ Cuáles son los diferentes tipos de pestañas fix y school sobre? ¿ Cuál es una diferencia distinta entre ellos? Uno está dividiendo todo el tabulador en tres. Y uno está empezando desde, uh, de aquí. Está bien. Para que se pueda ver qué golpeó. Entonces esta es la mayor diferencia. Hay diferencias un poco fuera entre las especificaciones. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección.
18. Tamaño de Appbar y especificaciones en Diseño de materiales de Google Diseño de materiales de Google: en esta lección. Te voy a mostrar ¿cuáles son las magias apagadas en Bar? Porque los Abbott se iban de pie. Cuídate de éste una y otra vez. Vamos a diseñar cada aplicación tendrá. Casi todas las aplicaciones tendrían esto en el bar en la parte superior. Por lo que ahora puedes ver vamos a entrar a los colchones de esta agua. La distancia ¿Está todo bien? Por lo que ya hemos discutido en 16 pixels ¿El margen en ambos lados y 72 es el
margen izquierdo para nuestro relleno para este título o el texto? Por lo que ahora se puede ver en ambos ejemplo esto es un poco gastado aparte y esto es un poco corto y bar. En ambos casos, la distancia desde la izquierda es de 72 dp y la altura fuera de la barra de aire es de 8 56 Siempre
será de 56. Se puede ver esta es la zona donde tenemos este 56. Y estos son los iconos de 24 db iconos. Y tienen este stock tanto. Ese es el objetivo 48 dp a su alrededor. Se puede ver esto son las cajas azules por aquí. Y si miras por aquí. Se puede ver de nuevo. Tenemos 16 pp en el margen izquierdo para estos iconos y ah, la parte inferior Ropa de cama para el texto será de 20. Entonces esto es esto. Necesitas tomarlo. Jake murió en mente que tu título será 20. DP está lejos de este fondo. De acuerdo, entonces en este caso, el expandido. El total de altura fuera de la parte aérea es de 1 28 dp's Y en este caso es de 50 60. Ahora, veamos un ejemplo muy bonito de un proyecto de aplicación real Título del proyecto monumental, descripción
del aeropuerto. Ahora puedes ver en este ejemplo te está mostrando que cómo se debe usar todo este sistema fuera de la línea y métricas de colchones desordenados. Por lo que se puede ver este es el 56. Este es un pero entonces tenemos este 80 para esta zona y se tp ojos usan para el acariciamiento. Ahora 80 más ocho es igual a 88 que es su mayor tamaño de bloque. Se puede ver lo que estoy consiguiendo ahora otra vez, se
puede ver el siguiente es de 72 dp para esta descripción fuera de este proyecto. Pero de nuevo, han usado 16 DP de apuestas fuera. Ahora 72 más 16 vuelve a ser 88 por lo que estos dos bloques son 88. Pero lo son. Tienen distancias de crianza mediante el uso de los diferentes márgenes y camisas alrededor de ellos en la parte inferior, y se puede ver así es como han creado este hermoso diseño. Ahora puedes ver todo este sistema si entiendes todo este sistema, que cómo puedes manejarlos y despejar diferentes bloques con camas y diferentes alturas. Usando este sistema de grupo de ocho puntos y ocho líneas clave de puntos y colchones, puedes crear un hermoso ritmo vertical, y yo creo un aspecto impresionante APS. Ahora bien, si te preguntas ¿cuál es el tamaño fuera del estado? Pero son 24 DP's. Entonces si olvidé mencionarlo como barra de estado superior donde tenemos esta señal de batería de tiempo, tiene la altura de 24 Dp's. Creo que eso es todo para mí. Si tienes alguna pregunta o algún problema, puedes preguntarme. Entonces Así que viste en la siguiente lección
19. Lista de diseño de materiales: De acuerdo, Ahora, en esta lección, vamos a hablar de listas. Has visto estas listas en tu bandeja de entrada de Gmail y muchas otras APS, como tus contactos en todo este tipo de tal vez no, las listas tienen el bit igual y tienen reglas. Se puede ver qué aquí. Y están llamando a un azulejo básicamente, porque van a muy en diferentes tamaños. De acuerdo, entonces si tienes un contenido más pequeño, vas a usar un azulejo más pequeño, y si tienes un contenido más grande, vas a usar un tamaño de neumático más grande. Entonces estas son básicamente reglas que puedes ver por aquí. Vamos directamente hacia las especificaciones y todos estos tamaños diferentes. De acuerdo, así que esto es lo básico de la derecha y la izquierda. Este elemento de lista, toda
tu área de lista, va a tener una caricia o márgenes fuera 16 y 16 por aquí, Entonces el texto, que es el estándar 72 será el alineamiento de la izquierda. Tendrá 72 dp y ah, lista ítem bodas serán 16 en ambos lados. Esto es lo mismo que se puede ver por aquí. De acuerdo, así que una cosa más donde realmente te quiero dedo del pie. ¿ Quién es éste? De acuerdo, para que puedas ver por aquí. Este es el principal marginal aquí para toda la lista. Por lo que van a ser ocho dp Antes de iniciar la lista. El total de altura de toda esta lista será de 48. Es el mínimo. Entonces si tienes lista de ítems de una sola línea donde solo tienes una línea de texto
vas a usar este pequeño azulejo pequeño que es 48 y el siguiente te dejaré mostrar el siguiente estilo. Ok, entonces aquí está el siguiente tamaño de estilo, que va a ser 56. Entonces si recuerdas en mi conferencia colchones y ritmo vertical, tienen diferentes estilos. Para el último 1er 1 fue 48 que este en 6 56 Y el siguiente va a ser 72. Así que ten eso en cuenta que leer top hay usando un tipi para toda la lista. Después tienen 56 56 56 56 para todos estos. Ahora pasemos al siguiente. Y aquí puedes ver que tienen algunos iconos de acción a la derecha. Por lo que el ajuste de la izquierda es el mismo. Entonces tenemos el ícono de sección por aquí, que será de 24 dp y todo el elemento de lista lista única El tamaño del artículo es 56. tamaño táctil es 56 el margen en los lados del tablero fuera de este ícono, por ejemplo, si tienes alguna caja jack o algo así, es 16 y 16 en ambos lados. Entonces esto es si tienes algo de acción, estamos aquí y déjame ir al siguiente, que estaremos usando en nuestro diseño. Es a línea de ítem y este va a ser elemento de lista fuera de dos líneas y el tamaño de azulejo
será de 72 Teepees relleno y todo es igual. Simplemente vamos a usar este. Por lo que estas son todas dos líneas diferentes, elementos de
una sola línea fuera de este diseño de material los cuales son elementos de lista llamados diales. Su estructura es casi la misma. Simplemente los tamaños son diferentes para diferentes contenidos. Entonces si tienes ah, contenido
grande o dos líneas, entonces vas a usar este azulejo más grande, que es 72. Esta es la misma estructura con algún icono 72 tamaño de azulejo, incluso ver qué aquí Ahora, esta es la lista de tres líneas. Se puede ver el tamaño del azulejo ahora es 88 porque tenemos más contenido, por lo que necesitamos más espacio entre ellos. Este es el ejemplo aquí en el lado derecho. Bandeja de entrada de Gmail. Está usando una Nikon por aquí Puedes ver por aquí y será 24 talla 16 al menos de derecha e izquierda. Y ese azulejo tamaños 88 dp. Entonces creo que estaremos diseñando usando este 88 dp en nuestros diseños. Y este es su maquetación. Cómo se presenta todo en su vertical ellos en tipografía es en una línea de base de cuatro g p. Entonces puedes ver que están mostrando que 44 estás viviendo dedo del pie un profundo tu cabello entonces, Ah, cuatro db por aquí entre estas dos líneas. Entonces creo que están usando algo así. Por lo que también están mostrando cómo el texto está básicamente alineado en su ritmo vertical. Entonces creo que todo eso se trata de estas tres líneas. Dos líneas, listas de
una sola línea. Si quieres dedo del pie consigue más los días que puedas. Voy a enlazar esta página por aquí para ver todas las especificaciones. Y eso es todo. Si tú, si de verdad quieres dedo del pie, ve la gran lista, que están en imágenes imagen buena lista, que no voy a entrar en cada detalle de este diseño de material porque es de cualquier gran sistema. Espero no te engaño que usando todas estas especificaciones, pero creo que al menos deberías conseguir una postura sobre ellas o echarles un vistazo. Por lo que espero que hayan disfrutado de esta lección de lista. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente lección.
20. Pintar en diseño de materiales: Hay muchos componentes fuera del diseño de material de Android, pero voy a simplemente mirar una visión general sobre Lee, los que son judíos, en
su mayoría en la mayor parte del ábside. Y los he visto muchas veces diseñadores o desarrolladores usándolos una y otra vez. Por lo que hoy voy a hablar de navegación inferior Ahora navegación inferior. Hay dos o tres cosas que debes tener en cuenta que en la navegación inferior, va a estar brindando el acceso directo del dedo del pie la porción fuera de tu app. En segundo lugar, habrá de 3 a 5 destinos de nivel superior, por lo que solo habrá 3 a 5 ítems de navegación inferior que no podrá exceder de cinco. Así que ten en cuenta que de 3 a 5 hay una cosa más que la altura de esta
navegación inferior se puede ver por aquí Este es el que el y debe ser de 56 db y el tamaño del icono que es todo ya el estándar va a ser de 24 por 24 dp. Una cosa más es que máximo con off cualquiera off este off ellos se puede tener 1 68 db y mínimo off. Http Ahora déjame ir abajo y puedes ver por aquí. Aquí tenemos barra de navegación inferior. Esta es básicamente la barra de navegación sistema Android Mobil y esta es la barra de navegación . Y se va dedo del pie han rastreado acceso a tres porciones cercanas favoritos y recientes. De acuerdo, entonces una cosa más es que el texto con ellos debe ser muy corto. Entonces no uses tus favoritos de todo el tiempo ni algo así. Necesitas ser muy conciso. ¿ Por qué? Usando el texto por aquí? Vale, Ahora, cuando deberíamos usar esta navegación inferior cuando quieras que tu usuario tenga acceso a cualquier parte off la parte abs al instante el día están fuera de igual importancia y quieres que ellos accedan desde cualquier parte de la app se puede tener esta navegación de fondo eso se puede ver qué aquí? Estacion de 3 a 5 nivel superior de similar importancia. Por lo que este es el propósito principal fuera de esta parte de la navegación también puedes ver aquí tenemos algunos ejemplos
más fuera de esta barra de navegación de fondo fijo. También hay cuando intentas escolarizar arriba o abajo, va a aparecer cuando vamos a desplazarnos hacia arriba. Ahí está en cualquier misión o aquí déjame mostrarte. De acuerdo, entonces sobre los colores puedes colorearlos así. Pero no intentes usar meticuloso así. Si tienes ah fondo de color para toda la pestaña son puedes usar pelea en la parte superior Off it es si es tiene ah, color
más oscuro y puedes ver este es muy en blanco puro Y los otros iconos, están un poco fuera Ah, transparente. Entonces tal vez 70% o 60% transparentes y se mezclan en el fondo de la misma. Entonces así es como vas a usar o diseñar eso de otra manera. ¿ Es ésta una barra blanca con el color para la resaltada y otras se
incrementarán . Entonces estos son dos estilos. Déjame mostrarte. Estos son dos videos que puedes ver u escuchar. Están demostrando que cómo aparecerá. Entonces una vez que se desplaza hacia arriba o hacia abajo. De acuerdo, así que me desplazé hacia abajo y de cualquier scroll hacia arriba, va a aparecer. Entonces así es como va el cambio de dedo en cualquier minuto. Por lo que este diseño de material android es
muy, muy específico en el uso y todas las animaciones y todo. Y realmente me encanta esta cosa al respecto. Porque esta es la animación de desvanecido cruzado deshilachado sobre cómo puedes usar estos dabs. Se puede ver cuándo está presente la pestaña activa. Se puede ver el texto y yo llamo al barco. Subir. De acuerdo, entonces el inactivo está en el medio y el otro se mueve hacia arriba. Por lo que se puede ver esta es la animación. Por eso se ve muy cool. Debido a que las pestañas activas, se
están moviendo hacia arriba en el aire en la dirección. OK,
ok , Ahora vamos a ver las especificaciones fuera de este fondo Navegación. Éste es uno fijo. Se va a quedar igual aquí en incluir toda la app. Y se puede ver la altura es de 50 60 p que ya discutimos. Y ahora está el asunto cómo vamos dedo del pie diseñó esta porción. No, el Deb activo para esto se puede ver la distancia desde la parte inferior es de 10 dp y desde la parte superior , es de 60 p para este icono. Se puede ver esto. Es que siempre será 24 dp porque es un tamaño estándar de iconos del sistema para el diseño de
material android . Y puedes ver ahora que esta diferencia entre este estado inactivo y este estado activo es la fuerza ojos Puedes ver los cuatro tamaños diferentes También, puedes ver el ícono está de color y el icono se mueve hacia arriba Así puedes ver por aquí para talla más grande. Una vez que se incrementa el tamaño del teléfono, tenemos menos espacio por aquí. Por lo que lo movieron para que puedas ver ahora tiene 60 ser top marginal top ropa de cama, y el un estado inactivo tiene ocho db topping se puede ver aquí es cualquier misión cómo se ve . Se ve realmente genial cuando, ya
sabes, pasan de un estado a otro. Tan buena retroalimentación. Si no sabes qué es la retroalimentación, necesitas ver mi curso de diseño de experiencia de usuario. De todos modos, se
puede ver aquí es el máximo es un petting off 12 dp en ambos lados. Creo que esto es estándar entre su diseño de aplicaciones 12 db 12 dp en ambos lados y ah, eso es todo. Si quieres mirar las otras vistas como las vistas de tablet, puedes seguir adelante y mirarlas y también puedes ver aquí tenemos de nuevo los mismos eventos, lo mismo puedes ver esto es solo el ícono. Entonces las especificaciones un poco diferentes 16 dp de la parte inferior Y esto es de nuevo el ícono con el texto y tiene la misma distancia de una cosa más es ese ícono toe La distancia entre el ícono y el texto es de 60 p Así que esto es otra cosa también puedes ver activo te mínimo pájaro 90 db Esto es con icono y el texto máximo fue a este y máximo activo te Podría ser éste. De acuerdo, entonces el mini miembro lo si
tienes, puedes ver aquí tenemos las pequeñas dabs. 123 Estos son un poco más pequeños, por lo que el mínimo Brit es para ellos. Pero sólo el icono es 56. Entonces si estás planeando usar cuatro o cinco por aquí, necesitas dedo del pie usar este patrón en lugar de usar solo el texto y los iconos ambos fuera de ellos Así puedes usar este para que puedan caber fácilmente en este espacio. Entonces eso es todo lo que pienso si quieres, para que puedas seguir adelante y ver todas estas especificaciones. Está bien. Y ahora hay una cosa más que me gustaría que te mostraras. Es ésta una barra de navegación inferior. ¿ Cuál es la elevación de la misma y por qué están utilizando esta elevación? ¿ Se puede ver qué? ¿ Aquí? Aquí tenemos snack bar, botón de acción
flotante y contenidos flotando un snack bar general. Tienen la misma elevación, que es de 60 B. Si no conoces la elevación, deberías ver la conferencia de elevación de la que he hablado antes. Elevación significa que cuánto
alto, Mayor será en la jerarquía en el índice Z. Por lo que puedes ver cuerpos de navegación inferiores ADP para picar sobre el
botón de acción flotante de la barra de refrigerio porque generalmente necesitas aceptar acceder a él e ir a diferentes porciones dentro de tu app. Dichas cajas dijeron a BP porque será la porción A de tu contenido. Najjar se va a apoderarse de todos los de porque va a ser 16 dp en elevación. Por lo tanto, ten en cuenta estas cosas. Este es un sistema muy bonito Off Z index y diferentes sombras. ¿ Y qué elemento se superpone? ¿ Cuál? Entonces eso es todo sobre barra de navegación inferior. Pasemos a la siguiente lista
21. Nav lateral en el diseño de materiales: Ahora vamos a hablar del lado. Nunca lo es. Esta será una conferencia muy corta. Por lo que el lado nunca va a aparecer. Tocas en este Ah, ícono de
hamburguesa o aquí y puedes ver que este es nuestro lado. Nunca. Ahora hay pocos colchones y reglas que nos van a guiar el tamaño de este lado. Pero ahora el tamaño de este tamaño máximo será de 3 20 dp Porque necesitamos tener algo de
sobrecarga de espacio para que los usuarios puedan tocar y se va a desaparecer del dedo del pie. Entonces pantalla con la regla simple es pantalla con menos 50 60 Ser así están viviendo como 50 60 b por aquí. Por lo que puedes usar de nuevo tap o aquí y ah, tener esto desaparecido. Entonces eso es todo lo que creo así Ten eso en cuenta que eres. Si utilizabas algo como éste, lo estás dimensionando correctamente. Entonces, no intentes apoderarte de toda la pantalla por lo que los usuarios estarán tendrán problemas para pisar aquí. Entonces la regla básica es esta 11 cosa más que quieres dedo del pie Considera lo que aquí es Se va a superponer en todas tus pantallas anteriores. Tiene una elevación hacia fuera 16 dp. Entonces va a estar en la parte superior de todo tu contenido, tu navegación inferior, tu navegación superior, tus dabs. O aquí se va dedo del pie. superponen a todos ellos. Además, se
puede ver en la barra de bus de estado por aquí. Cuando se mueva por aquí, la barra de estado va a estar en la cima de esta. Y será,
ah, ah, parte transparente y en parte opaca. Entonces esto es esto va a pasar una vez que usted sobre este cajón va a salir. Esto va a pasar así. Por lo que se puede ver este es el fondo. Y hay un fondo oscuro en la parte superior que se multiplica en este fondo. Entonces tiene Ah, un
poco de transparencia, como tal vez 30 40% de transparencia. Entonces creo que todo se trata de esta navegación lateral y ah, espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección.
22. Balanza tipográfica que estoy usando en Adobe XD: hemos cubierto los conceptos básicos del color y todos los juegos cercanos en las últimas lecciones. Ahora vamos a ver cómo va a jugar un papel la tipografía y qué escala y tamaños estoy usando en mi app. Ahora solo hay cinco tamaños que estoy usando, que son de Google Material design escala tipografía y el punto tomó 34 es el
encabezado principal el encabezado más grande que estoy usando para mi nombre de título de título fuera de mi aplicación en la
pantalla frontal . Entonces estoy usando 20 puntos para mi título en la APP, título de
aplicación APP dentro del dentro de la aplicación de diseño de materiales y estoy usando medio 4 a 8 con 20 y este es mi texto corporal el cual es de 16 puntos regulares Roberto y luego el texto pequeño Roberto 12 puntos regulares y también puedes usar medio por aquí si quieres. Entonces se va a quedar así. Sí lo hace. De acuerdo, así que esto es una cosa, entonces estoy usando 14 puntos para los enlaces. Este también es un medio para, por lo que es un poco ticker que el Ford regular. Entonces estas son toda la fuerza. Estoy usando estos en todas las configuraciones que estoy usando. También estoy usando 14 puntos para el texto más pequeño. Algunos lugares en algunos lugares. Entonces déjame mostrarte mi diseño real en Adobe X'd para mostrarte cómo estoy usando todas estas tallas . De acuerdo, Ahora puedes ver aquí tenemos el diseño real y puedes ver por aquí si hago click en este título. Doble click. Se trata de 20 roboto mediano. Entonces este es apt title que estoy usando. Esto es ah, 14 puntos medio porque es las especificaciones del diseño de material de Google eso estas barras
atrevidas. Tienen todas las gorras. 14 puntos medio. Entonces si miras este,
este es body decks medio 16 puntos medio y el texto más pequeño. Si haces doble clic en él, es 12 puntos regular Roberto. Entonces también por aquí, puede ver es de 14 puntos medio roboto regular, y eso es Ah, creo que estos son todos los tamaños que estoy usando. Entonces, um, si te mueves hacia ver la pantalla de acogida, Ok. Entonces aquí tenemos esta primera pantalla, voy a acercar un poco. Está bien. Ahora puedes ver aquí tenemos la pantalla completa y este teléfono es básicamente 34
agonía extra audaz . Y ese es todo el tamaño de teléfono que estoy usando. Esto es de nuevo 16 puntos para los campos de pilas se puede ver u escuchar 16 puntos regulares Roberto . Entonces básicamente 16 puntos es mi cuerpo formado y se usa mayormente en la mayoría de los lugares en los botones de aquí. Y este es de nuevo el pequeño teléfono, que es 12 frontera regular 12. Y así es como vas a crear estas tipografías de aspecto impresionante, diferentes elementos. Se van a quedar muy bien juntos porque necesitamos crear alguna jerarquía tipográfica . La tipografía tenía nuestra llave por aquí. Algunas cosas deben ser un más grande con la importancia, y algunas cosas deben ser más pequeñas, con las menos las cuales son menos importantes. Entonces todo eso se trata de esta tipografía y cómo la estoy usando dentro de mi app. Entonces nos vemos pronto en la siguiente sección y ah, vamos a diseñar un crear mirando hacia arriba
23. Esquema de color de maestro en el diseño de materiales 2.0: Ahora bien, si quieres ser un gran diseñador, solo
hay dos cosas que necesitas dominar. Uno es la tipografía y el segundo es el esquema de color. Ahora bien, si quieres construir un gran esquema de color fuera del diseño de materiales, debes entenderlo. Y hay pocos conceptos básicos y hay pocos principios que debes seguir. Y tu esquema de color será impresionante. De acuerdo, así que aquí hay dos cosas o pocas cosas que te voy a dar con el dedo. Está bien. Entonces para cualquier buen esquema de color, creo que solo necesitas matarnos. Y si seleccionas esos dos asesinos crean, puedes muy ellos. Puedes agregar algunas variantes claras y oscuras de ese dedo chica aparece la construcción. Esquema, Esquema de
colores. Ahora aquí puedes ver esto es paleta de diseño de materiales y han demostrado que este es tu color
primario, que va a ser sobre el color principal. Y este es el segundo regular. Ahora se puede ver a la Mikola prima que han seleccionado en el medio. No es demasiado claro, no oscuro. Y pero el segundo regular que han seleccionado va a ser un poco En el lado más ligero, hay dos cosas más que hay que ver. Si miras de cerca esto, sé primaria. Se escribe invitación. Y si miras la secundaria, está escrita con color negro. Ahora lo que significa eso es que significa esa relación de contraste entre el texto y el fondo . Aquí puedes ver el texto y el fondo lo La relación de contraste es crear. Será fácilmente visible y legible. Por lo que estas son algunas cosas que debes tener en cuenta. Se trata de configuraciones diferentes para el mismo color. Claros, oscuros, tonos
más claros. En Dhere, tenemos acciones más ligeras y escudos más oscuros, opacos. Pasemos por el dedo del pie paleta de esquema de color real donde te están mostrando todas las instrucciones. Está bien. Ahora bien, si entiendes este gráfico o discolor esquema, puedes construir cualquier esquema de color con tu diseño de material o diseño de aplicación Enright o cualquier otro AB. Ahora puedes ver aquí tenemos dos asesinos. Esta es nuestra prima. Irregular. Esta unicidad y esto se acabó. Segundo regular. Ahora puedes ver este es el color primario de la izquierda. Entonces tenemos variante primaria, que es de un color más oscuro, que vamos a utilizar para nuestras barras de estado y alimentar los elementos aquí que tenemos. Ah, muy ligero compartió la variante primaria. Aquí tenemos menos saturados. Tenemos er muy local y está un poco en el lado vital o en el lado ligero. De acuerdo, entonces tenemos este muy afilado segundo regular y el segundo Revere Ian un color un poco más oscuro. Entonces, en realidad, solo
están usando dos colores. Y estos son la varianza de estos verdaderos colores. De acuerdo, así que esto es una cosa. ¿ De acuerdo? Ahora, lo segundo es que el color que te vas a usar como texto en estos colores. Se puede ver en thes dos colores más oscuros o más nítidos. Están usando el blanco como texto y en todos estos colores están usando el negro. De acuerdo, entonces lo que significa eso es si miras el lado inferior de aquí en los últimos 80. Por aquí, en primaria, en secundaria, en fondo, en superficie, en ella. Esto básicamente es mostrar de qué color vamos a usar en qué fondo o qué color Primerica o así si estaba usando químico, Como se puede ver en primaria significa que vamos a usar color blanco. Se puede ver por aquí en el prime. Mikola. Por lo que todas las variantes fuera de estos colores primarios que estos dos villians van a usar este valor f f f en secundaria. Se puede ver que se trata de dos rebeliones secundarias y segundas estaban usando el negro. Esto está en segundo queda en secundaria. Vas a usar negro un poco en cualquier segundo regular en enter. Vamos a usar F f f porque en local es rojo brillante Así que vamos a usar el color blanco en esto Puedes ver u oír que están usando vital o ella y en superficie sobre superficie significa todos
los fondos utilizados en el diseño del material. Entonces si tu aplicación tiene algún fondo y el contenido se está desplazando sobre ese fondo, se va a llamar superficie. Entonces naturalmente la superficie es básicamente blanca en todos y diseños de materiales y el fondo va a ser Oops. OK, entonces la superficie son básicamente tus tarjetas. Entonces si tienes algunos guardias de diseño de material fluyendo, te
voy a mostrar en tan solo un segundo. Entonces todos los autos, toda la información encima de tu fondo, va a grabar superficie
es básicamente tú eres todas las tarjetas de información o cualquier,
um, um, bloques de
información en el diseño de material de tu aplicación móvil app. Por lo que van a ser blancos donde se deben por defecto, su blanco Además, el fondo es blanco y están diciendo que en superficie vamos a usar este color
como texto sobre fondo. Vamos a usar este color. Entonces básicamente, su idea principal detrás de todo este esquema de color es la relación de contraste. Para que veas que están manteniendo una buena relación de contraste entre el texto y el fondo . Por lo que ese es su propósito principal detrás de todos estos esquemas de color. No, Si nos fijamos en estos esquemas de color, puede ver que este es color primario y están mostrando cómo se puede hacer un esquema de
color diferente usando estos acres primos. De acuerdo, entonces este es un ejemplo Este es otro en el que están usando tercera luz compartida fuera la misma Primerica aprovecha esto publicar un color claro y veamos la interacción fuera este primario y segundo asiduos. Se puede ver aquí tenemos primaria en segunda primaria oscura para la barra de estado y luego esto es fuerte abundante. Por lo que puedes ver ahora se ve genial porque tenemos más colores y vamos a ver aquí su ejemplo. Tenemos más colores por aquí, así que un color, que es nuestro segundo regularmente, va a ser para nuestras acciones primarias. Aquí tenemos el editor ahí mostrando cómo puedes usar otros. Y así es como se usa el otro color y el sobre color se puede ver el sobre color es blanco . Se puede ver en edición Pelea en fondo. Este es el fondo Blanco. Este es el Este es nuestro, um se puede ver tarjeta. Esta es la tarjeta elevada. Tiene sombra. También es blanco, y el color que está usando es negro. Entonces así es como está demostrando que esta es la accesibilidad. Por lo que una vez que te muevas al tono más claro, vas a usar la alerta negra para mantener la relación de contraste entre el fondo y el color de primer plano. Está bien. Ahora bien, si se quiere comprobar la relación de contraste entre colapsado, puede comprobar con esta herramienta de relación de contraste en línea, y creo que es contraste a realmente emitido o tranquilo. Y puedes usar colores por aquí como puedes ver. He agregado do asesinos de un esquema de color. Uno es este dos e. Dewey para el texto. Y esto es por el fondo y se puede ver aquí tenemos un buen tema de contraste. Debe estar por encima de cuatro. Entonces así es como puedes comprobar tus ratios de contraste. Ahora les voy a mostrar paleta de diseño de material de boleta muy antigua, que fue traída en 2000 y 14. Y estos son los principales asesinos básicos para todo eso pellets. Ahora, se
puede utilizar en material diseñado para apuntar o que es la última versión. Puedes hacer equipo a tu app con tu color personalizado para que no necesites limitar tus sitios web o nuestro diseño de material para android usando esta paleta de colores. Ahora, en la lección menos, vamos a ver la herramienta de color, que está dada por el diseño de materiales de Android. Entonces pasemos a la siguiente escucha.
24. Herramientas de color de Google en línea: De acuerdo, ahora en esto. Escucha, voy a hablar de este material colateral de diseño, y así es como podemos usarlo. Y es puntera online por diseño de materiales. Y se puede ver que este es su paladar. Y tienen el morado rayado y el púrpura índigo azul claro Gussie encendido. Por lo que tienen los colores específicos. Entonces cómo puedes usar esto es primero click en esta primaria, y puedes ver aquí he creado algunos de los otros esquemas, Así que haz click en la primaria y selecciona tu particular. Por lo que puedes ver ahora he seleccionado este color primario en el medio este esquema de color, también
puedes usar este. De acuerdo, entonces este es mi color primario. Tan bien. Después haga clic en la secundaria y ah, seleccionemos ésta como mi segunda regular. O tal vez éste. Ups. No me gusta este, así que voy a cambiar a éste. No, vamos a seleccionar algo. Bourbon. A lo mejor un morado como. De acuerdo, Así que sean los colores que elijas, voy a ir con este color amarillo, y ya puedes ver ahora este es un buen aspecto un buen esquema de color con este rojo y amarillo y está en un poco apagado Pincus compartido. Entonces así es como puedes crear. Y te va a mostrar algunos fuera de los temas de accesibilidad como puedes ver estas diferentes pantallas, cómo se van a ver tus pestañas, y así se van a ver el texto y otros elementos. Esta es tu barra lateral. Nunca. Estos son tus guardias de texto. Y esta es la lista, creo. Y así es como si pasas a esta accesibilidad, puedes ver que te va a mostrar que el texto negro no es visible ilegible en éste, también el negro. Por eso la prueba no es elegible, no elegible. Entonces estos son algunos problemas, y creo que lo serán porque cada color no es visible en cualquier otro color. Por lo que debes seleccionar si ya sea negro o bien vía texto para el propósito de legibilidad que puedes ver por aquí. Estos son todos negros compartidos, por lo que son realmente visibles en este, y estos son dos blancos, y esta es otra camisa ligera puesta, como compartida. Se va a usar negro. Entonces esto es lo que puedes, cómo puedes construir tu esquema de color y también, puedes exportarlo. Toe y Reid son EU o corte, Ben. No sé mucho al respecto porque creo que va a estar en archivo examen material, pero no estoy seguro de que tal vez sus cuartos o desarrolladores sepan más al respecto. Además, si vas a esta pestaña personalizada, puedes seleccionar cualquier color que quieras. Por ejemplo, si quiero usar algo como esto para el segundo regular y para el color primario, quiero algo, uh, así. Está bien. Para que puedas seleccionar cualquier color personalizado que quieras, así que déjame volver atrás y ver cómo se ven mis colores y artículos. Por lo que lo secundario es un gran aburrida. Entonces lo voy a mover por aquí a algún lado. Por lo que ahora puedes ver he seleccionado ambos colores personalizados para mi color primario y secundario. Realmente no me gusta experimentar dentro de esta herramienta. No estoy seguro, Pero como diseñador, me gusta mi tienda de fotos. O tal vez Adobe X'd donde yo pueda experimentar con relaciones de contraste y esquemas de color yo mismo. Entonces esto es solo por donar alguna idea de que cómo va a quedar tu app ahora
voy a cambiar a mi o B x d Pero te voy a mostrar cómo experimenté estos
esquemas de color . Ahora puedes ver aquí en mi adobe x t tengo este esquema de color prime y pocas
combinaciones siguientes estuvieron aquí. Estoy usando de nuevo un teléfono para el título fuera de esa app y Roberto para todos en todas partes Este es el estilo de enlace 14 puntos, 18 puntos para el texto crear y ahora puedes ver estos otros colores para el gris. Este es el gran asesino Este es un color de texto primario No es negro lleno es comer para comer, para comer y puedes ver aquí Si miras de cerca, hay una línea negra sobre esta recta un círculo y Thies, tengo usado como mi estado es este es el tono más oscuro y estoy usando color claro en él solo para mejorar la accesibilidad. De igual manera, por aquí estoy usando el starker compartido este como mi barra de estado. Este es mi color primario. Este es mi segundo tono adulto regular para Gran Bretaña fuera del mismo segundo regular. Ah, y estoy usando vital donde y ah, la accesibilidad realmente apesta para este, pero creo que es bastante visible. Entonces me estoy poniendo en base basándome en mis ojos. De acuerdo, Entonces este es mi color de enlaces. Y este es mi color de error. Ahora se puede ver así es como experimento construyendo esquema de Michael. Ahora bien, si miras esto, estos son básicamente gracia azul. No son puros vidriados crea Están construidos a partir de este color primario. Y también se puede ver este sculler si voy a éste una circular. Yo lo construí en base a este color azul. Entonces si haces clic en este color azul y te mueves todo el camino hasta el regular, vas a crear otro regular para este esquema de color. De acuerdo, así es como he logrado crear este tono más oscuro fuera de este regular para otros estados . Otra vez. El color de la ONU para estos otros estados será este blanco como éste. Y ah, eso es todo. Creo que puedes entender cómo creé este esquema de color. Voy a compartir este archivo contigo, así que no te preocupes. Se puede abrir en adobe X t No
tengo ningún archivo para la tienda, pero creo que lo haré en vista previa de imagen muerta fuera de éste, puedas relacionarte con eso. Entonces todo eso se trata de estos esquemas de color y cómo puedes usar diferentes herramientas y cómo
puedes experimentar dentro de tu para la tienda y adobe herramientas extra. Si tienes el entendimiento básico off sobre colores y colores primarios y secundarios, puedes crear cualquier esquema de color. Espero que estas lecciones ayuden. Estás mucho encendido, y si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
25. ♥ descargar kit de UI de material para Adobe XD: No. Vamos a utilizar Adobe X T para crear diseño de materiales y el diseño fuera de mi aplicación. Y antes de que
empecemos a hacer esto, vamos a descargar pocos activos o ustedes I kits, que vamos a utilizar para desarrollar rápidamente este diseño. De acuerdo, así que ahora, como saben, ese material androide diseñado para apuntar o versión más reciente del diseño original se ha perdido. Eso Son pocos los brotes de pegatinas que faltan. Entonces te voy a mostrar lo que necesitas para descargar. Necesitas descargar este android. ¿ Compro gran historia simple A. Esta es la alegría impresionante que puedes descargar. Después está esta hoja de pegatinas componentes los cuales estaban presentes antes de este material android diseñado para apuntar. Ah, y ahora no está disponible. Pero voy a compartir el link Mi google driving para que puedas descargar este principalmente. Vamos a usar este y leer tu g y por simple paseo directo. Tú. Entonces déjame mostrarte dónde puedes descargarlo. Material diseñado para obtener dot com slash y justo en el camino. Esto es por gran estudio simple y puedes descargar la figura de Adobe X t para la tienda CC Onda sketch 40 toe 4.2 o 42. Esto es lo que puedes escuchar puedes descargar. Y una vez que hayas descargado esto, déjame mostrarte Es un um muy grande un montón de archivos. Puedes descargar la división X si quieres dedo del pie. También puedes descargar el para compradores y si quieres, Pero vamos a necesitar este. Por lo que una vez que hayas descargado y extraído estos archivos, tendrás este archivo. Y Reggie, ¿por qué? Por arroyos y pastoralmente? Si hago doble clic y lo abro, les voy a mostrar que tiene todos los componentes,
incluso la hoja de pegatinas y todo lo que hay en ella. Entonces no necesitamos el segundo. Nadie cabeza. Déjenme alejar. Y ahora se puede ver en la parte superior. Tienen todos los componentes por aquí. Guardias, diferentes elementos de menú, menús
extendidos, diferentes barras de aire, diferentes pestañas en diferentes costas o llamarlos. De acuerdo, entonces eso es todo lo que necesitamos. Basta con descargar este, y vamos a usar estos componentes toe, arrastrarlos hasta nuestras pantallas y copiarlos y usarlos para crear un diseño de aspecto impresionante que es éste. De acuerdo, entonces, um, empecemos y asegurémonos de descargar todo esto. Además, hay una cosa más que vamos a usar. Voy a usar bibliotecas CC abiertas por bibliotecas en la nube por adobe. Y lo que puedes hacer por aquí es que generé esto en mi tienda de fotos. Básicamente esta biblioteca de la ciudad. Si no quieres usarlo, asegúrate de haber creado todo este esquema de color antes de empezar a diseñar algo. De acuerdo, Entonces lo que vas a hacer es que te vas de pie. Déjame mostrarte el camino. Entonces, en la siguiente lección, vamos a crear primera plantilla y te voy a mostrar cómo puedes usar todos estos colores y crear el esquema de color antes de comenzar en este diseño. Entonces pasemos a la siguiente lección.
26. Inicio de acceso de diseño parte 1 - Aplicación médica con Android: antes de empezar a diseñar en y más de una x t Te voy a decir pocas cosas que son muy necesarias. El número uno es que Adobe Extra es un vector tude. Por lo que en Adobe X'd asegurarme de que estás diseñando en Vanek. Entonces lo que sea que estés diseñando el tamaño de tu tablero de arte será de 3 60 por 6 40 db y
en realidad está en debates. Por lo que cada monumento es tal como es, como se especifica en el diseño de material androide. Por lo que no tienes que preocuparte por convertirlo a lo están multiplicando dos o tres X si
estás usando para la tienda. Entonces así es como vamos a iniciar nuestros diseños. Entonces voy a crear un nuevo archivo y dar click aquí y tenemos este androide mobile click sobre él y puedes ver aquí tenemos este archivo. Este es nuestro tablero de arte inicial. Se puede ver aquí tenemos el tablero de arte. Si no sabes mucho de Adobe, Éxtasis debería tomar mi curso, que es un gran curso de enfermeras a nivel experto para Adobe X'd, un prototipo no b x d persona diseñada, quiero decir, colaboró con desarrolladores que es el nombre o título fuera de ese curso. Entonces primero, vamos a crear nuestra pantalla de inicio de sesión. Por lo que se trata de una pantalla de inicio de sesión. Es de 3 60 por 6 40 dips o Dp's y nuestro color de relleno o color de fondo es pelea. No necesitamos ninguna y mucho fuera. Si lo desea, puede utilizar el diseño de cuadrícula cuadrada, que va dedo del pie tener en él. Talla ocho. Puedes usar eso si quieres. Ah, éste. Puedes usar algo así si quieres, pero ahora mismo lo voy a ocultar. De acuerdo, entonces primero necesitamos que nuestros antecedentes estén listos por aquí. Por lo que vamos a arrastrar nuestra imagen de fondo desde nuestra carpeta de activos. Por lo que aquí tenemos nuestra carpeta de activos. Arrastremos esta imagen de fondo por aquí y pasemos a ésta y la dejemos caer por aquí así. De acuerdo, entonces vamos a usar algo como esto. Hagámoslo un poco más grande. ¿ De acuerdo? Ahora, lo que vamos a hacer es que vamos a superponer un rectángulo por aquí el cual va
al mismo tamaño fuera de este tablero de arte. Vamos un poco fuera de la frontera a su alrededor, presione TV y seleccionado, y vamos a usar este reproductor de fondo. Por lo que Bagram resplandece valles serán cinco, no la opacidad. ¿ Qué? ¿ Este? Voy a usar cinco por aquí. Ups. No estoy seguro de cuál es su problema con esto. Basta con hacer click una vez cinco va a ser cantidad. El brillo va a ser ocho, y la opacidad va a ser del 30%. Entonces necesitamos algo como esto, que está un poco apagado brillante porque nuestro texto debería ser lo suficientemente visible por aquí . Entonces este es nuestro antecedente ahora. Se pueden seleccionar a ambos, y creo que deberíamos encerrarlos para que no los movamos accidentalmente por aquí. De acuerdo, Ahora vamos a arrastrar nuestro logo a nuestro archivo. Eso arrastró el logo y lo dejó caer por aquí. Es muy grande. El tamaño que voy a usar es de 1 20 dp Oops. Maravilla y PIB tamañar este tamaño. Voy a usar por aquí. Alinémoslo en el medio y desde la parte superior. Va a ser 72 salsas en la pieza. Ahora vamos a usar algún texto, que va a ser agonía. Entonces vamos a cambiar de dedo agonía GP va Quién está bien Así que vamos a cambiar embarazada otra vez y la talla va a ser de 6 34 p. T. Así que este es el mismo tamaño que está y tablero extra. Entonces aquí tenemos nuestro texto. No, vamos a usar texto para la segunda línea. Voy a arrastrar el dedo del pie algo como esto y nos vamos con el dedo del pie. Copia ese texto desde aquí. Ahí hay ropa, los archivos extra. De acuerdo, entonces aquí está nuestro texto de la pantalla de inicio de sesión. Vamos a tratar de arrastrarlo encima de eso, Ver qué pasa. Hagámoslo ahora. De acuerdo, entonces nuestro texto Israel aquí, vamos a cambiar la fuerza del dedo del pie Roberto Voter regular. Y van a ser 14 puntos. Algo así. Entonces voy a usar así. Entonces creo que acaba de copiar la primera línea. Por lo que necesitamos copiar el resto fuera de ella línea central lo de ti. Presiona V. Lo vamos a volver a alinear. Ya sabes esto Así 15. 15 ahora en a o b x d Vas a presionar la tecla de opción Artur. Entonces si quieres ver las distancias entre dos elementos por lo que es siete. Voy a lograrlo. Ocho aquí baja la diferencia entre ser comprado de ellos. Ahora vamos dedo del pie arrastra unos cuantos fuera de los campos de nuestro kit diseñado. Necesitamos estos. Entonces yo estos creé personalizado Lee. Entonces me creé a mí mismo. Pero ahora lo voy a arrastrar de Ana. ¿ Te gusta? Descargamos. Entonces, abramos eso. ¿ Entiendo esto es un cubo. Encontremos que esos campos de texto son largos y honorarios. Entonces aquí tenemos los temores de entrada que acercan. De acuerdo, este es el campo de entrada activo y esto está inactivo. Entonces tenemos que textuar campos, texto
oculto. Necesitamos enfocar uno. Y necesitamos éste Necesitamos estos para Básicamente, podríamos necesitar también éste que está enfocado centro como éste,
porque en algunos lugares, porque en algunos lugares, básicamente
estamos sintiendo sobre el campo de texto. Entonces vamos a copiar todos estos. Vamos, ¿
ves? Y vamos dedo del pie goto Nuestro archivo lo basó con cabello así. Por lo que estos son tamaños estándar, así que no necesitamos dedo del pie preocúpate por diferentes diseños y todo loco. OK, así que aquí tenemos, vamos a llamarlo Boss Word. Y esta va a ser mi contraseña Ok, entonces no necesitamos esto ni aquí. ¿ De acuerdo? Entonces voy a quitar este Dilute. Esto también discutió, señor, lo
vamos a tener justo aquí y, uh, colores. Vamos a tratar con ellos más adelante porque vamos a tener algún color generado por aquí porque necesitamos todos los colores de esta biblioteca CC que creé en Vidin para la tienda. Esta es nuestra biblioteca de la ciudad. Entonces ahora vamos a hacer es voy a seleccionar este traslado a la biblioteca de la ciudad, click en este texto negro. Esto es a Ito ego e No. Junto con eso, puedes usar de manera similar Puedes hacer lo mismo, verdad? Haga clic y agregue color a los activos. Entonces si vas dedo del pie esta zona de SX, puedes ver ahora este color de texto se ha agregado. Ahora, si vamos de nuevo, dedo del pie, vamos como éste. Y si volvemos a ir, tenemos otro color, que es el status gris azul. Creo que esto es por esta textura. Puedes usar este medio gris azul. Entonces ahora este desgaste de color de nuevo lo va a agregar por aquí. Esto se puede hacer de forma manual. Solo puedes crear unos cuantos. Conectar está por aquí con el mismo color. De acuerdo, Entonces si sabes cuál es el color, por ejemplo, a Ito Ito puedes usar que tiene un valor decimal. Este es el método manual que te voy a mostrar. OK, entonces puedes usar algo así. Entonces No, es este color que puedes hacer click derecho y artículo en este momento. Ya está agregado. Entonces no me está mostrando la opción. que puedas crear diferentes cajas fuera que sean crear todo tu esquema de color antes comenzar este diseño y añadidas a tus colores. Y luego puedes simplemente hacer clic aquí y aplicar ese Philip en lugar de usar la biblioteca CC. Entonces si no sabes cómo hacer bibliotecas U C C o ponerlas en marcha, puedes usar algo así. De acuerdo, así que esto está hecho. Este es nuestro correo electrónico. De acuerdo, así que esto va a ser correo electrónico. Algo así. De acuerdo, entonces esto está básicamente deshabilitado. Siente que me voy de pie, usa éste en lugar de éste. O tal vez podamos usar esta contraseña uno y cuatro. Vamos a usar esta enfermedad. Está bien. Lo deja libre. Este. Tenemos básicamente a los alimentos. Y el color para esta barra va a ser el asesino, que es nuestro este color activo, segundo reactivo. Entonces este es nuestro color activo destruyendo que esta parte es nuestra aquí. Pasemos a estas capas y veamos con la marca de tipo me voy de pie esperemos por aquí. Algo así, y va a usar el mismo color. Por lo que primero rechaza, agrega este color a nuestros activos y mueve dedo del pie las afirmaciones y selecciona éste y usa este color. De acuerdo, así que tenemos sobre campo de texto listo. Hay una cosa que no está presente porque es versión más antigua fuera de estos temores tecnológicos, que está en la parte superior pequeña etiqueta, que, como se puede decir, etiqueta
flotante, que es el nombre real off ese patrón que están usando en dos puntos. Además, vamos a agregar un correo de pelo, algo así, y vamos a usar el mismo color, este. Entonces esta es una nueva recámara que ha estado entre en, uh, este nuevo material diseñado para apuntar. Y si veo la distancia
, van a ser 16. Eso es crear. Ahora puedes ver este es el diseño real que debemos estar buscando. A ver, ¿cuál es la distancia entre estos dos? Hagámoslo un poco menos. De acuerdo, entonces creo que se ve genial. Simplemente necesitamos representar que así es como debe verse. Vamos a moverlo un poco por aquí. ¿ De acuerdo? Entonces también, creo que esto es muy delgado, así que voy a hacer la altura a, Así que es un poco visible en la parte superior fuera que también,
voy dedo del pie, um,
usa el dedo um, del pie de relleno, tienen algo así como un 40% porque parece listo. Muy hecho en este back on.
27. Los de inicio de acceso parte 2 2 de la cara 2: De acuerdo, Así que pasado Virginie para entrar. Este es el correo electrónico. Todo hecho. Vamos a generar un botón por aquí, así que vamos a crear la carga. Por lo que el botón serán 42 DP altas esperanzas Necesito 42 por aquí, y va a usar 80 recogido. Entonces si quieres aumentar, puedes aumentar a 90 algo. Creo que esto se ve mejor. Elimina el borde y nuestro color primario. WAAS este. De acuerdo, entonces voy a usar este azul primario en este botón. Esto es lo que usamos y Pecho V y vamos bien, no
escuchamos. De acuerdo, así que necesito tener 24. Usemos 24 diferencia entre estos dos. De acuerdo, Ahora vamos a agregar el texto de inicio de sesión por aquí, lo cual es muy fácil. Logan 14 no será del tamaño que vamos a usar. Nosotros vamos a usar 16 o aquí para la carga, y regular y blanco será el texto. De acuerdo, alinémoslo en el turno medio. M. C. Y es una mentira en el vamos a añadir algunas esquinas redondeadas para dp off crudeza y aceptar algo sombra por aquí. Apenas van a ser dos y seis y el color de la sombra. Podemos usar el mismo color de sombra como este, que es nuestra colección primaria. Además, agrega este color por aquí en los colores del documento y ah, eso es agregar esto como una sombra. De acuerdo, Ahora podemos usar algo así como el 50%. De acuerdo, así es como vamos a dar forma a nuestras sombras. OK, Ok. Entonces esto se hace. Vamos al aire. Olvidó la contraseña Por aquí. Este va a ser un color de enlace, que era diferente. Era de color azul. Entonces, alinémoslo en medio con esto. Algo así. Ahora me voy de nuevo con el dedo. Abre mi biblioteca sissy con mi biblioteca sissy. Siguiente. Cerrado este archivo No guardar. De acuerdo, entonces C c biblioteca, Vamos a abrir biblioteca cc de nuevo, y luego voy a usar este enlace Brugler. De acuerdo, así que esta es nuestra contraseña olvidada. Y, um, si quieres, puedes moverlo un poco, dirigieras, o tal vez mantenerlo aquí así. Entonces no se preocupe por ello. De acuerdo, Entonces una cosa más que necesitamos por aquí, que es un nuevo do G B puertas Siguiente. Ver camino. El color es éste. Por lo que va a usar selector de color, dedo del pie recoge este color. De acuerdo, este es nuestro mazos. Color Neutra Chipotle está aquí. Ve. Por lo que este crear color de cuenta básicamente va a ser alertas de enlace. Agrega esto a nuestros colores de documentos por aquí y también a nuestro Essex, Ya
sabes, vamos a alinearlo en el medio. Seleccione este texto. Estaba decolorido. De acuerdo, así que terminamos con esto. Si quieres subrayar justo esto, puedes usar eso aquí así en un txt. Y ahora está subrayado. Esto es en lo que usamos en nuestro diseño de tienda de fotos. De acuerdo, entonces creo que esto es genial. Alinémoslo en el medio. Todo. Alinearlo en el medio. De acuerdo, así que nos olvidamos de añadirle algo de sombra. Entonces vamos a añadir algo de sombra y el color de la sombra será algo. Se lo dijo a ella. Pasémoslo al 50%. Algo así. Está bien. ve genial. Nuestras sombras lucen geniales. Si desea agregar el estado superior de pequeño, puede agregarlo o lo vamos a ocultar en una pantalla de inicio de sesión. Por lo que si quieres agregarlo, puedes arrastrarlo desde esta zona por aquí. Y vamos a ver si tenemos una parte de status negro oscuro. De acuerdo, así que aquí lo tenemos. Si haces zoom en este,
es básicamente tener esta barra de estado y podemos copiarla y básica por ahí. Siguiente. Mejor lo o aquí está encendido. Vamos a hacer transparente esta película. Y así es como vamos a usar esta pantalla. Por lo que el relleno de ese status cuerpos transparentes y tenemos algo de tiempo y todo por aquí. Por lo que nuestra esta pantalla ha sido completada. Bitácora y piel. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
28. Pantalla de registro para aplicación médica con Android: De acuerdo, Ahora vamos a crear pantalla de registro. Y antes de pasar a la pantalla de registro, son
pocas las cosas que quiero. Oh, te
lo digo por aquí, cuál es? Esta etiqueta de correo electrónico va a ser de 12 puntos o 10 puntos. En photoshop, utilizamos 10 puntos, y aquí vamos a usar 12 puntos porque se ven muy pequeños y lo alinean con este texto overhead. OK, una cosa más que usamos y puedo por aquí un cheque. Mark, voy si quieres. Tobe, trae ese ícono por aquí. Puedes hacer eso e ir a los iconos. Y esta es nuestra comprobación de línea de base. Vamos a moverlo adentro. Nuestro que será documento extra y lo moverá por aquí así. Vamos a moverlo adentro. Y debe tener algunas peleas por aquí, que van a ser 12 de este. Por lo que voy a usar este color de mis aseveraciones este color para este. Por lo que voy a seleccionarlo y dar clic en este color. Entonces aquí tenemos este cheque. Mark, si quieres dedo del pie, haz algo así. De acuerdo, Ahora esta pantalla está completa. Vamos a seguir adelante. a la pantalla de registro. Voy a duplicar este. Estoy presionando arte y dar click en el nombre. Y así es como completas conseguir que se inscriba. Pantalla de registro. De acuerdo, ahora nuestro estatus, pero se va a cambiar porque tenemos algunos pelos ab Ottawa puestos. Y estas cosas se van a mover porque no necesitamos esta contraseña, y esto se va a cambiar. Toe, um, ya
tengo una cuenta, y esto se va a iniciar sesión? No, algo así. De acuerdo, Entonces también, este botón se va a cambiar para crear cuenta, así que vamos a cambiar este botón suspiros. A continuación, hazlo un poco más grande. Esa es L. Una línea central. Se turna. ¿ Ver? De acuerdo, así que tenemos esto crear cuenta y todo por aquí en profundidad. Será lo mismo. Hagámoslo un poco más pequeño. A continuación, hazlo 100. Las abejas y nosotros vamos a mover todo hacia arriba. A lo mejor por aquí, porque necesitamos un campo de texto más por aquí, que va a ser el número de decisión de nuestro América. Entonces vamos a mover esto a continuación. Esto va a ser en medio. Eso es grupo ellos controlan o comandan G toe,
agruparlos y nos vamos del dedo del pie. Nómalo bonito en. Ahora. Si desea crear símbolos a partir de estos botones, puede hacer clic derecho y crear este indulto como un símbolo hace símbolo. Pero ahora mismo lo voy a dejar así. De acuerdo, entonces tenemos este correo enfocado. Mongie, este es nuestro correo electrónico. Esta es nuestra contraseña. Y necesitamos un campo más, que va a ser Oh, bueno aquí. Y va a estar bien. Siguiente. Ver la distancia entre ellos. Creo que las distancias no menos. Entonces lo vamos a mover por aquí así. Por lo que estoy usando una distancia de 16 dp se puede ver en el lado izquierdo. Me está mostrando la distancia entre todos estos y aquí estoy usando 24 por aquí. De acuerdo, así que entre el botón y el campo de texto 24 dp ahora voy dedo del pie agrupar todo por aquí en una forma kwon ji. Y este es nuestro formulario de registro de granja. De acuerdo, entonces ,
no, podemos moverlos así. Entonces esto es más fácil para mí ya sabes, control. De acuerdo, entonces tenemos algo por aquí. Eso es todo. Jane, el texto a Ok, ahora vamos dedo del pie arrastrar la barra superior arriba. Entonces vamos a eliminar esta,
uh, uh, barra de
estado, y vamos a agarrar otra por aquí y ponerla por aquí. De acuerdo, entonces vamos a ir a esto, ¿verdad? Consigo a este Judio impresionante un niño que nos está haciendo la vida más fácil. Entonces vamos a ir a la cima. Donde tenemos las pars de aire el próximo año es el, um, bar que necesitamos por aquí. Um, está bien, así que tal vez podamos usar este porque tiene el botón Atrás y tal vez necesitemos volver. Volver a la pantalla de inicio de sesión. Entonces gastemos usar este. Se trata de barras de herramientas y de las que se habló ¿Es ésta? 12344 escritura. De acuerdo, así que esto es para mañana y ver todo lo que puedes usar este dedo cinco. Usemos los 500. Vamos. Y ahora lo vamos a basar por aquí, y la magia va a pasar. Ups. Entonces no sucede por aquí. OK, así que moviéndose en la parte superior y el color para éste. Si recuerdas va a ser barra de herramientas. BG. A ver, ¿cuál es el color de este? Por lo que vamos a usar este color para esto, y la parte superior va a ser el estado. Parte B G va a ser decolor color más oscuro. Entonces, veamos qué está pasando. De acuerdo, así que esto es un pequeño problema por aquí. Nos vamos a trasladar a nuestros activos, y no hemos agregado este color. Este es nuestro color azul primario. Añadamos decolor. Agrega color a los activos y también necesitamos otro color, que era este color más starker en este 118 a 9 40 Así que vamos y este color 18 a 94 D. Vale, así que vamos a añadirlo por aquí. Y también vamos a hacer click derecho y color a la SX. Ahora tenemos dos colores por aquí. Uno es un color un poco más oscuro, y otro es un color más claro. Entonces vamos,
um, um, otra vez a la taburete bar. Esta es una herramienta sobre el fondo, y este es nuestro principal regular. Creo que éste es nuestro color primario. Y si pasamos a este, veamos qué está pasando aquí. Entonces este es el básicamente el color. Ah, esto es más ligero. En la parte superior de status, esto va a ser más oscuro. De acuerdo, entonces ahora pueden ver que tenemos el mismo arreglo por aquí. Vamos,
um, um, cambio de título
basado. Cambiémoslo para inscribirnos con herramientas GP. De acuerdo, Ahora puedes ver que necesitamos mover un poco nuestras cosas hacia abajo. Si quieres dedo del pie, quita la sombra alrededor de esto en. Esta es la sombra. Si quieres moverte, la sombra quitó la sombra. Si quieres quedarte con la sombra, puedes quedártelo. Pero voy a usar este equipo. Son suaves. Las cosas están abajo, Así que voy a usar 80 pieza 80 para este ícono. No quiero que sea muy grande. Necesito más espacio por aquí porque los judíos ya se sabe que está en esta app está usando esta app. De acuerdo, así que vamos a mover esto un poco por aquí porque no quiero dedo del pie, ya
sabes, cambio. Ah, dimensionando este. Yo quería ser el mismo 80 por aquí porque si lo muevo hacia abajo, es que va a ser difícil adaptarse con el Tom lo haría aquí. Una cosa más vamos del dedo del pie al centro. Alinear así este Perdón. Aunque quieras tenerlo por aquí, no
creo que vaya a ser Ah, gran asunto o aquí. Está bien. Por lo que creo que nuestro diseño para esta pantalla es completo si quieres. Oh, quédate con las sombras. Puedes quedarte con las sombras. Usemos las sombras de aquí. De acuerdo, entonces nuestra pantalla de registro está completa. Si tienes alguna pregunta o alguna sugerencia o algo sobre la escuela para que no entiendas nada me puedes hacer preguntas, cualquier pregunta,
incluso preguntas de números ¿Alguna pregunta sencilla? Antorcha ser tímido. Intenta preguntarme cada vez que tengas algún problema, acuerdo? Para que puedas ver nuestro a pantallas. Date de alta y se completan los registros. Pasemos a la siguiente lección donde vamos a ir de pie hacer más al respecto y, ah, vamos a crear nuestra pantalla de dashboard
29. Diseño de tabletas de tableros en el diseño de materiales: De acuerdo, ahora, en esta lección, vamos a crear esta pantalla de tablero. Pero antes de cavar en pantalla de salpicadero, necesitamos esta apuñalar nuestros con iconos por aquí Ahora, en mi barco te gusta, es que tengo tal Y no pude encontrar a este patrón o aquí porque creo que
lo olvidaron . O tal vez ellos no agregué en su versión gratuita. Entonces lo que voy a hacer es que vamos a usar esto estos tres artículos por aquí, y ah, vamos a combinarlo con algo como esto por aquí. De acuerdo, así que déjame mostrarte un poco de descuento. Las especificaciones a ocultar es para estas barras de aire fijas Es 72 dp's 12 dp es un marginal superior aquí. Entonces tenemos 24 dp icono que nosotros. Nuestro texto va a estar sentado en la parte inferior del bloque 20 dp o de la línea de base de 20 db. Y esta línea es básicamente a los DP's para que podamos crearla nosotros mismos. Entonces vamos a hacer eso en esta lección. Entonces empecemos con la creación de esta puñalada están en esto. Escucha, Así que aquí tenemos nuestros archivos, así que me voy de pie solo replicar el cricket. Este es Drop Shin Ki, y lo voy a arrastrar por aquí para crear otra pantalla o aquí, y todavía se están comiendo el fondo. Entonces, no, no
necesitamos estos antecedentes. Rectángulos de tesis. Yo los voy a desbloquear. Entonces vamos a eliminar esto y también vamos a eliminarlo. No necesitamos el logo ahora mismo. A lo mejor las pilas. No necesitamos estos teléfonos que no necesitamos. Y éste y éste sólo estoy guardando este texto por aquí. De acuerdo, Entonces si usamos esta, esta es nuestra barra de herramientas. Es un poco diferente. Entonces lo que necesitamos aquí es algo más cercano a esto. Entonces es Barra de herramientas número 1234 Así que voy a copiar esto ahora mismo y tal vez veamos si
tenemos algo. Está bien, tan genial. Copiarlo. Y lo vamos a deshilachar por aquí y vamos a diluir este. El taburete bar. Vamos a eliminar también los libros. También la parte de status que necesitamos eliminar Este es nuestro cuatro. Entonces lo voy a subir así. Cambiaríamos los colores más adelante. Entonces en este momento sólo vamos dedo del pie quitado las sombras para que no quitara las sombras de esta capa por aquí. De acuerdo, entonces las sombras han sido removidas. Ahora movamos esto. Ah, artículo por aquí, se ve Oops. De acuerdo, entonces voy a subir. Arriba, arriba, arriba, arriba por aquí. De acuerdo, así que tenemos este tercer bar de papá y vamos, ¿
ves? Y lo voy a deshilachar por aquí. Eso algo así. De acuerdo, ahora lo que vamos a hacer es hacer que un poco lo mueva un poco por aquí. Y si hago doble clic en este fondo, estos son los límites. Son básicamente 48 dp's, pero para la pestaña con la que queremos que sea 72 db. Por lo que vamos a aumentar el tamaño a 72 dp's. Eso ha aumentado así la altura, y vamos a moverla. Entonces nuestro indicador está en la parte inferior de este así. OK, así que tenemos que hiciste un fondo muy bonito que se acercan al 200%. Vamos a subir esto un poco. Está bien, cambiémoslo de color. Entonces es más fácil para nosotros, ya
sabes, definir que estamos diseñando algo en algo así. También, este lo vamos a llenar de decolor y a cambio, decolorar dedo del pie nuestro azul primario. De acuerdo, así que esto es más parecido a manera necesidad de diseñar algo a lo largo de estas líneas. De acuerdo, entonces necesitamos nuestro ícono por aquí. Antes de eso, vamos a crear un bloque de 12 dp. De acuerdo, Así que la altura va a ser de 12 porque necesitamos colocar nuestros Icahn's debajo de esto. De acuerdo, Así que mira, usa algo como esto. Voy a usar el color rojo solo para asegurarme de que estos son nuestros lineamientos. Y eso son iconos arrastrados por aquí. Este es nuestro tablero de instrumentos. Esta es una nube un Pourde. Y hubo una actividad más donde sus actividades. Ups. Adelante. Entonces voy a agarrar todos estos, arrastrarlo a mi archivo Photoshopped, Alps en realidad archivo, y voy a dejarlos afuera así. Entonces aquí tenemos esto. Esta es nuestra nube. Este es nuestro tablero de instrumentos. Y esta es nuestras actividades, así que lo voy a alinear con esta línea. puede ver cómo es más fácil ahora para nosotros hacer algo así. Este va a ser nuestro panel de control. Ups. Todo debe estar en las brechas. Bash, Señor. Y esto es un D. Todos
hemos terminado de crear esto. Espero que hayan disfrutado de eso. Cómo Utilizamos las especificaciones dadas por Google Material Design y las usamos para crear algo así. Ahora, hay una cosa más. Creo que debería estar en el medio. Lo mismo. Este. Esto debería estar en el medio. De acuerdo, entonces ahora están buscando crear. Alineemos este icono con grupos. Hay una línea este ícono Lexie con estos iconos son en realidad así que los vamos a arrastrar por aquí cuando tengamos este indicador y todo. Entonces ahora tenemos Ok, Entonces, uh, desde este panel de capas, puedes seleccionar este, y puedes seleccionar archivos de sincronización. Y ahora puedes arreglarlos fácilmente en lugar de, ya
sabes, pelear con estos. De acuerdo, entonces aquí tenemos el tablero así. Y si trato de combinar el tablero, veamos si esto combinado Hay algo raro sucediendo con este archivo SPG. Entonces no voy a combinar nada encendido. Simplemente déjalo así. De acuerdo, Entonces así es como vas a alinear todo. Tu tablero va a ser indicador. Este es nuestro indicador. Y si quiero aumentar el tamaño apagado sobre el dedo indicador tres DP's. Creo que voy a usar este tres d p. Tamaño
del indicador. Vamos a moverlo junto con esta línea. Quitemos esto. Esto se trata de esto fue nuestro intercambio de guías decolor de este fondo a nuestro azul primario , que fue éste. Y también para este, necesitamos del mismo color. Y para la barra de estado B. G. Vamos a usar un tono más oscuro, que es éste. De acuerdo, ahora puedes ver a nuestro papá. Bod está completo. Este va a ser el título de nuestra AARP más que la experiencia de usuario. Diseño GP Herramientas Año Talon 18. Vale, No, hemos creado esta barra superior, barra navegación o tabulador son básicamente esta es nuestra barra de aire con pestañas fijas tres Debs, Y vamos a usar eso en nuestro diseño una y otra vez. Está bien. Por lo que espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección donde vamos a crear el contenido fuera de este panel . A continuación, cámbialo el dashboard. Entonces nos vemos pronto en el próximo
30. avatar y graph de de los profesionales y Graph: ahora en esta lección, vamos a crear la parte superior Por aquí. Tenemos una tenemos la imagen de Everton fuera del doctor y algún mensaje de texto fuera del doctor. Es ampliar la actividad. Y luego después tenemos por aquí un pequeño espectrógrafo de barras circulares. De acuerdo, así que empecemos a conseguir algo por aquí. Entonces vamos a usar un título médico. Doctor, disculpe este título. Voy a usar este texto porque está en solo texto pequeño no es un texto muy grande. Vamos a despejar otra línea. Dejemos la línea. Se. Y para eso, voy a usar, um 12 puntos como este. Y para este, voy a usar 16 puntos, 16 puntos. Siguiente justo ciudad en el color será nuestro color de texto, que es creo que me olvidé de agregar por aquí. Entonces este es nuestro color de texto, y este va a ser nuestro color gris. Si quieres usar esto rápidamente, puedes usar éste. Este es nuestro texto. Curricular, en realidad. De acuerdo, entonces ahora lo que vamos a hacer es que necesitamos elipse,
y, y, um, vamos a usar 58 La pieza que se usaron para el dedo de la tienda. Entonces aquí tenemos 50 años por 58 lo vamos a replicar por aquí. Estoy presionando la tecla no son opción para replicarlo. Y ahora lo voy a hacer es ir dedo del pie habilitar mi cuadrícula cuadrada. Está bien. Por qué lo hice. Te voy a mostrar que voy a dejar 16 margen de aquí 16 de aquí. Y es más fácil para mí alinear cosas así. Y ahora está en medio. Todo se ve muy bien. Mi alineación está hecha. Y ahora voy a agarrar el dedo del pie la imagen de los doctores, que es ,
uh, por aquí en mis imágenes de activos, doctor ,
hembra , hembra. Y voy a dejarlo todo aquí así. Ahora lo voy a hacer es que lo voy a hacer un grande más pequeño y vamos a seleccionar a ambos ellos, click
derecho y mezquita con barco. Que esto es ah, muy apropiadamente. Hazlo porque a veces tengo que, ya
sabes, cambiar de imagen. Y ahora creo que lo hemos hecho. Y para la frontera, voy a usar, um cuatro por aquí y ahora creo que no puedo usar la frontera así que lo que voy a hacer aquí es que necesito otro círculo como este por debajo de éste para tener que mostrar alguna frontera. Entonces voy a crear algún borde fuera de cuatro oops comida que muestra la tetona 100%. No estoy seguro de por qué no es visible. De acuerdo, entonces el problema es que la frontera está dentro, así que la voy a mover afuera. Centra Stroke. Accidente exterior exterior algoto afuera. Por lo que ahora es visible. Muévete adentro. Creo que similar. Lo mismo pasaba por aquí, así que me mudé afuera. Se va a mostrar, por lo que no se está mostrando porque no está enmascarado. Entonces usemos esta frontera. Y el color que estamos usando para esta frontera es un poco diferente, que es, creo, este discreto para la frontera. Creo que necesitamos usar el mismo color para la frontera. Vamos a añadirlo para que podamos usar este color algo así usan el borde para porque se ve demasiado grande. Ok, ahora nuestro día a día nuestra imagen está hecha. Vamos a crear la gráfica por aquí. Está bien. Ahora, para crear este gráfico de barras circulares erigiendo, vamos a pasar por un proceso. Entonces voy a duplicar este, y vamos a quitar la frontera,
Jane,
el Jane, campo a azul y vamos a volver a replicar dedo del pie, esta presiona tecla de opción art. Y voy a cambiar su color dedo del pie blanco o tal vez algo más como esto y hacerlo un poco más pequeño, moviéndome en medio de éste. Seleccione tanto las formas como el sujeto. No, tenemos esta nave de gritos. Esto es sólo un bar, y hay muchas maneras de ocultarlo ahora que importa voy a usar es voy a usar otra forma para esconder, cortar el lote mitad parte de éste. Entonces voy a moverlo así. Muévete. Este en el medio así y seleccionando de nuevo ambas formas. Íbamos a someter, y nos queda con esta nave. Entonces esta va a ser nuestra gráfica. De acuerdo, entonces esta es nuestra barra circular de progreso. Y, um, para este, vamos a esconder la frontera y la sombra, y aquí puedes ver que tenemos el mismo efecto. Ahora bien, si quieres cambiar el color de este en fuera de curso, vamos a cambiar el color a éste. Esto y ahora se puede ver esta es nuestra, um, gráfica. OK, ahora vamos a poner algo de texto por aquí, que va a ser 50 por ciento completo y el tamaño será de 10 10 puntos. Vamos a moverlo en el medio así y vamos a usar 11 para la altura de línea y el color del texto será éste. Así que boca y veamos cómo se ve. Se ve un poco ticker. Entonces si quieres dedo del pie crear línea elástica, puedes hacer lo mismo. Y también hay muchas maneras de hacerlo. También puedes moverlo o cabello o tal vez añadir algo de sombra a éste, algo así para que sea más elegante. Entonces ocultemos este tablero un buen aquí y déjame mostrarte cómo se
ve esto para que puedas agregar alguna sombra que va a ser de este color azul o tal vez el mismo azul por aquí dedo del pie. Ten algo de luz a tu alrededor y también puedes hacerlo como 50%. Por lo que se va a quedar 35% mejor en 35% y algunas cosas más. También puedes usar un poco fuera de tonterías de este azul o aquí así para la sombra. De acuerdo, entonces creo que nuestra esta porción está completa. Nosotros hemos hecho esto. De
acuerdo, Ahora mismo, si quieres unas esquinas redondeadas alrededor de
esta forma, esto no es muy posible porque necesitamos dibujarlo usando pluma entonces y no lo haré. No quiero perder tiempo con la pluma, así que creo que esta técnica es buena. Tú, Si quieres agregar algunas sombras, puedes agregar sombra a ésta o en la forma que hay debajo de ella. Depende de ti. Está bien. Por lo que también podemos agregar algo como esto menos dos. Por lo que la sombra está apareciendo de este lado menos cinco. A la sombra es ahora. Ahora mismo, por aquí de este lado. Entonces también, cinco para este. De acuerdo, así es como estoy usando dos sombras y creando este efecto, pero creo que voy a ocultar esta sombra y usar esta en Lee. De acuerdo, entonces ahora hemos completado nuestra esta sección superior. Vamos a pasar a la siguiente sección en la siguiente lección donde vamos a diseñar el primer guardia en la pantalla
31. Diseño de la sección con la de Dashboard: bien ahora en apuros. Y vamos a crear esta tarjeta por aquí, que son sus actualizaciones de tasación y todo por aquí. Vete al año carcelario, y en la siguiente lección, vamos a crear esto con la carga civil. De acuerdo, así que empecemos. Vamos a ir de pie sobre los documentos que dejamos. Y ahora vamos dedo del pie crear en una maraña por aquí. Um, fuera del tamaño, el tamaño va a ser 192 dips off height y 328 va a ser el Ok, Así que alinémoslo en el medio así. Y no vamos a usar frontera esta vez. Si quieres usar borde, puedes usar algún borde claro norte decolor. Pero si vamos a nuestras bibliotecas C C, creo que teníamos este color de borde es el color de borde. Estos son los colores de borde, básicamente aros. Entonces, ventilemos este color y lo usemos como nuestra frontera. Puedes quitar el campo en este momento. Está bien. Entonces una cosa más que olvidé es que en el fondo fuera del tablero de escombros, nuestro color es diferente, que es F algo clics ver qué era. El color Fue decolor. F siete F nueve f e solar enseñando el fondo F siete F nueve f Ya está cambiado. De acuerdo, entonces éste va a ser blanco. Esto detuvo un rectángulo de parada. Va a ser blanco blanco. De acuerdo, entonces tenemos algo más cercano a esto. Ah, y vamos a usar cuatro dp off round nestlé aquí puedes usar para si quieres dedo del pie, voy a alejarme para ver cómo se ve. OK, así que se ve genial. De acuerdo, antes de eso, nos vamos de pie. Um movimiento Pocas cosas en remolque. Diferentes áreas y secciones. Esto va a ser de lo más alto en la tienda. Entonces si escondí veamos qué hay fuera de éste. Por lo que esta es la parte nueve. Vamos a moverlo en el contenido superior. Estos dos también están afuera. Se lo va a mover por dentro o tener 50% va a ser top. Vamos a esconderla. De acuerdo, entonces tenemos este contenido por aquí. Este es nuestro top. Vamos. Jeet es nuestro cuerpo. Esta es nuestra Margie. Va a ser nuestra guardia. De acuerdo, Entonces todo va a estar dentro de este grupo. Entonces vamos a crear este BG. Esto va a ser de fondo. De acuerdo, entonces tenemos esto alineado. Nos vamos dedo del pie a usar esta línea como un separado o estuvimos aquí algo como esto. Y va a tener el mismo color que este también, si quieres usar alguna sombra alrededor con la sombra. De acuerdo, entonces este es el problema. DoubleClick y el video de sombra que estoy usando es uno y tres para tres para el desenfoque y 16% negro. Algo así. Por lo que se ve como una tarjeta ahora mismo. De acuerdo, entonces tenemos que arrastrar algún icono aquí. Algún texto por aquí y un botón por aquí. Entonces voy a morir el texto y saltarme esto rápidamente. De acuerdo, así que el texto está hecho, me voy con el dedo del pie, que
sea texto de área, y lo voy a agarrar así. Dejó una línea, y vamos a usar algo como esto. Entonces aquí tenemos el siguiente No se va a hacer. Van a ser 16 así que asegúrate de que sean 16 y esto va a ser 24. Supongo que Hagámoslo 2016. 20. Y el siguiente color va a ser éste. Vamos por aquí caducado. Descoloridos porque lo estamos usando una y otra vez. También este color también es nuestro color de texto Gran color X. De acuerdo, entonces tenemos esto bajo control y voy a dejar 12 de arriba. Vamos a crear la carga ahora. Entonces la carga va a estar aquí así. Sin frontera. El sentimiento va a ser nuestro este color primario secundario. Básicamente, lo voy a agregar otra vez por aquí. Y creo que usamos un segundo regular diferente, que era éste. Entonces voy a añadir de nuevo este por aquí, y también lo voy a agregar. ¿ Dedo del pie son laizas por aquí? De acuerdo, entonces tenemos las cosas básicas dispuestas. A lo mejor podemos hacerlo un poco más grande porque tenemos menos cara en la parte superior. Algo así lo vamos a usar a BB de NUS en alguna sombra alrededor de él. Y el color de la sombra podría ser éste o éste o éste, éste. Entonces voy a usar alguna sombra muy clara 40%. Algo así. Eso ha tenido algo de Dexter por aquí. Línea central lo. Vamos a usar el color blanco para este texto. Eso es algo que tú algo así. Alinearlo en el medio así. Y creo que necesitamos un poco más de tiempo Gran Bretaña porque tenemos, sea que los márgenes y las camas en ambos lados. Está bien. Por lo que también podemos usar algo así como 14 por aquí porque tiene más sentido. Es una especie de estatus. De acuerdo, así que tenemos. Entonces ustedes son los diseñadores. Puedes cambiar algunas cosas aquí y allá si quieres. 12. OK, entonces tenemos 12 por aquí. ¿ Cuál es el problema con esto? Porque creo que esto está en el nivel de sub pixel 0.5. Vamos a quitar 0.5. Vamos a usar para 27 y ver cuál es la distancia. Son pequeños desde hace 20 años, y van a ser 16 fanáticos de cerdo por 16 puntos en la parte inferior. De acuerdo, entonces nuestro texto en todo esto todo lo demás está hecho. Y si quieres, también
puedes usar 15 Roberto, y vamos a usar esto algo como esto. Y creo que el 14 se ve mejor porque tenemos más? Um, ya
sabes, más espacio por aquí, y se ve mejor. De acuerdo, entonces ahora vamos a replicar este texto por aquí. De acuerdo, entonces tenemos este texto por aquí. Hagámoslo texto de línea, y lo voy a alinear aquí así. Hagamos esto un poco más grande en el color del texto. Voy a usar esto. Crear, ext, porque es una especie de estudio. Y vamos a graham sobre los iconos y ponerlos por aquí. Estos son afirma thes iconos animales. Cuando teníamos éste,
otro es el de éste Agarrarlos y prepararlos aquí. Los arrastró uno por uno. Muévete adentro. Por aquí. Así. También éste. Ahora voy a aumentar sus tallas. Entonces van a ser 36 y este es Vamos a mantener este tal como está. De acuerdo, entonces vamos a usar la er física para ser algo así. Color del texto también para este centro. Alinearlo con esto, En realidad, ¿cuál es la distancia entre éste y la frontera 12 también para éste, En realidad, debes importarles poniendo unos 24 grandes vendedores 24 dp block por aquí. Entonces la forma correcta es que si quieres, puedes usar algo como esto. 24.24. Pero tú vas adelante. De acuerdo, entonces no son básicamente 24. Entonces vamos a usar una cuadra de 36. Usemos una cuadra 40 40. Algo así como esa puerta de aquí para éste. Cerremos este telón de fondo porque no necesitamos mover un ahogado. Dejémosles como los dos y muévalos aquí así. De acuerdo, así que básicamente, necesitas hacer algo así. Pero no estamos usando esto así. Estamos usando nuestros ojos para, ya
sabes, para alinear las cosas. Entonces voy a creer este rectángulo así, y creo que se ven bastante bien en No siente ningún problema al ver esto. Y ahora si tengo todo se ve, mueve todas estas dentro de esta tarjeta, y si quiero moverla hacia arriba, puedo moverla. Algo así. Este icono se ve un poco al fondo y no se alinea con éste. Ahí hay una línea ella para rematar este texto. De acuerdo, entonces creo que está buscando. Crear Si quieres mover este ícono o hacerlo un poco más grande esta vez, bicicleta en este escaneo de pulgar, puedes usar 36 por 36 algo como esto y cambiar el dedo del pie de color. Este tal vez éste. Por lo que esto se ve genial. También alinearon los bordes izquierdos de estos iconos, éste en éste así. De acuerdo, entonces en la siguiente lección, vamos a crear el siguiente contenido, que es nuestra siguiente tarjeta. Entonces pasemos a la siguiente lección.
32. Diseño de tarjetas de Dashboard: antes de crear la segunda parte de esta tarjeta, me voy a enseñar algunas cosas que hice, que cambio en esto. De acuerdo, entonces lo primero es que ajusté el tamaño de este texto a 16 puntos, que básicamente está sobre partido cuatro lados, así que no quiero meterme con eso ya que 14 es básicamente un tamaño más pequeño que estamos usando. Entonces esto es 14. Se trata de 16. Además, este icono es 36 este me cambié a 28 DP's. De acuerdo, así que esto se va a continuar a los 28. O aquí también hizo el tamaño fuera este 1 98 altura y ancho. Deberían ser 3 28 No estoy seguro de por qué lo es. Uh ver 100 fin 20. De acuerdo, entonces tres y 28. De acuerdo, así que este es el tamaño. De acuerdo, Ahora vamos a replicar esta, esta tarjeta, y vamos a ver donde esta tarjeta waas Vale, entonces aquí tenemos. Voy a estar de acuerdo, Mandy y tenemos esta otra tarjeta, y voy a arrastrar por aquí, y necesitamos no necesitamos pocas cosas, así que voy a eliminarlas como esta línea. De acuerdo, así que he borrado las cosas innecesarias. Voy a redimensionarlo y sólo arrastrar lo nuevo me he ido por aquí, Jane, los mazos. Entonces lo voy a acelerar. No. Vamos a usar el botón y cambiar su color al botón desactivado, que era nuestro en este color por aquí. Discapacitados. Cargado. De acuerdo, así que voy a hacer click esto quitó la sombra, y eso es todo Vamos a cambiar el dedo del pie del texto. Um, no hay necesidad de centrar. Alinearlo desde nuestro turno. Ver em. Y está en medio. Creo que para, uh, para el sistema operativo Mac. Los atajos son un poco diferentes, creo. Marzo, si C o r tal vez controlar Gitano. No recuerdo. De acuerdo, así que puedes comprobarlo, o puedes usar solo un puerto holgado fuera de ellos y usar estos controles por aquí. ¿ De acuerdo? No, Si quieres hacer algunos ajustes menores como puedes ver por aquí, este icono se ve demasiado cerca de este lado izquierdo. Sí, creo que es sólo tener. Entonces la distancia. Voy a usar 12 dp's y algunos ajustes más como puedes reducir el tamaño de este
dedo 140 algo así y mover este botón de sincronización de carga por aquí. Un top grande también nos revisó los márgenes derecho e izquierdo, por lo que deben ser 12 DP. Estoy usando 12 alrededor de los márgenes, que es, creo, el estándar para el diseño de materiales, Google Material Design. Y creo que eso es todo. Si quieres cambiar algo más, la distancia entre estos dos es de 12 DP. Si querías aumentar el 16 de profundidad es que puedes hacer eso y se va a quedar así también. Si quieres, quita las sombras, puedes quitar las sombras, y va a ser las mismas pruebas. Esta va a ser la misma elección de las Sombras. Es el básicamente el efecto que diseñamos para en para un shock, porque este botón no es elevado y esto está marcado porque significa que esto es, uh, esto es básicamente interactivo. Entonces eso se trata de crear este tablero. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección
33. Pantalla de actividades de diseño de ♥: antes de diseñar la pantalla de actividad se están moviendo a lo siguiente. Te voy a dar algunos consejos por aquí para arreglarlo. Ah, están haciendo un mejor uso del espacio de lucha en tu diseño. De acuerdo, así que ahora si miras por aquí, tenemos 16 dp margen en ambos lados para sostener estos autos. Y esto estos elementos No. Seguro que tal vez te estés preguntando que estos elementos se ven un poco diferentes al pasado Ejemplo. . Porque estas líneas por aquí, se
puede ver que este, uh, texto y esta imagen quiero dedo del pie moverlo más para el interior de la ciudad. De acuerdo, entonces lo que estamos tratando de hacer todo es Déjame mostrarte. Eso vamos a encender la grilla. Ah, cuadrado, Greg. De acuerdo, entonces vamos a acercar y te voy a mostrar. Se puede ver aquí tenemos este contenido y está empezando desde 1234 casi por aquí y aquí tenemos el contenido, que está partiendo de esto, y también está mirando fuera de esta zona. Entonces lo voy a hacer es que lo voy a mover adentro así por aquí. O tal vez por lo menos por aquí donde se emparejan entre sí. Ok, así también, vamos a hacer lo mismo por esto. Eso parecía lo que tenemos o aquí. De acuerdo, entonces vamos a agruparlos juntos. Esto es una trampa. Entonces ahí tenemos algunos fuera de los problemas fuera de estos elementos extra, así que voy a moverlo más dentro de esto también esta divertida. Ups. Entonces tal vez creo que necesito mover a estos dos uno con el otro así. De acuerdo, ahora también podemos mover estos dos. Yo escogí más por aquí. O tal vez 24. De acuerdo, así que esto se ve mejor. De acuerdo, así que salgamos espacio y terminemos este grado y veamos los resultados. Ahora puedes ver que se ven más alineados. Más mejor metro espaciado. Aunque quieras acercar esto un poco más a esto. Ah, aquí. De esta manera, puedes hacerlo. Y ahora puedes ver que se ven más alineados el uno con el otro. De acuerdo, entonces esto es solo un simple puntillas. Alinee su usted un elementos de diseño. No. Vamos a mover dedo del pie esta pantalla de actividad. Vamos a replicar este panel y nombrarlo actividades. Lo es. Ahora vamos del dedo del pie Habilita esto en el área superior del tablero. De acuerdo, entonces para habilitarlo, vamos a DoubleClick. DoubleClick y vamos a utilizar nuestra capacidad, llenar su usando 70%. Vamos a usar el 100%. También este ícono. Vamos a hacer que sea un gran 100% de ella y hacer el resto por éste. Vamos a desactivarlo o vamos a usar el dedo del pie. Ah, mordió menos transparencia por aquí. Entonces vamos a usar algo así como el 2%. Por lo que está usando 70%. Seguro. Vamos a usar el 70% para el siguiente. Usemos el 70%. Simplemente mover este indicador de qué? ¿ Pelo? Selecciona barco fuera de ellos huesos e indicador. Y vamos a alinearlo en medio así. De acuerdo, entonces esto está activado. No, hicimos algo. Estamos aquí. Y para eso, vamos a quitar todo esto. Justo éste en éste. A lo mejor nos vamos a quedar con éste. No necesitamos esta gráfica. Entonces, ¿lo vas a borrar? Y también nos vamos de pie Relacionar estos? Supongo que sí. Vamos a diluir este. Y también este. No, este texto se va dedo del pie sirven como nuestro texto superior, que es para nuestra lista los ítems básicamente estaban creando elementos de lista. Vamos en grupo al principio. Está bien. Entonces en este ejemplo, voy a usar tres líneas fuera de texto por aquí, y este es nuestro círculo principal. Voy a reducir su tamaño a 40 que en realidad es el tamaño en tratamientos globales. Entonces voy a usar 40 para este. De acuerdo, entonces tenemos dos elementos por aquí. Necesitamos una cosa más, que es nuestro icono de flecha. Vamos a arrastrar el icono de flecha por aquí. Este es nuestro icono de flecha, y lo vamos a arrastrar a Adobe X'd. Muy bien, adelante. Esa es una línea así para algunos. Siguiente dentro de ella. Entonces 01 Algo así como ese dedo del pie wiki. Hazlo una línea en el barco holgado medio fuera de ellos así. Aligándolo en el medio. De acuerdo, entonces creo que nuestro texto y todo los ojos casi alineados. Acerquémoslo a éste. Porque la distancia debería ser, creo, casi. Ups. Entonces tenemos dos overs por aquí. Vamos a mover la frontera a su alrededor. Y ahora son exactamente 40 dp's. De acuerdo, así que este es el tamaño exacto que Google recomienda para algún estado o imágenes o aquí. Entonces estoy usando este. Ahora vamos con el dedo del pie. Acércate esto y va a estar a 16 db de aquí. Estas son las especificaciones exactas. También, esto va a ser 16 para estar lejos de aquí. De acuerdo, entonces tenemos todo casi alineado. Cambiemos su color del dedo del pie este azul, que es nuestro color activo. Y lo que necesitamos aquí es algún rectángulo con er vital. O tal vez podamos usar algo más. Vamos a usar. De acuerdo, Así que usemos un rectángulo fuera de altura 88 y movimos la frontera. Phil estará peleando, y lo vamos a mover por debajo de todo. De acuerdo, así que terminamos con este. Vamos a la de en medio de esto. Entonces lo que vamos a hacer es que los vamos a agrupar, así que vamos a agruparlos. Se trata de nuestros alumnos, algo así. Y lo vamos a alinear en medio de esto. También, estos dos iban dedo del pie agruparlos al siguiente. Ahí está permitiéndolo en medio de éste, y también éste. De acuerdo, así que casi hemos completado esto. Lexie, ¿Cuál es la distancia de aquí? Hagámoslo 24 en lugar de 25. De acuerdo, así que esto está hecho. Necesitamos una línea más en la parte inferior para un separador. Entonces voy a caer en línea, y vamos a usar decolor este color de borde muy tenue, que va a quedar muy bien por aquí. Y lo vamos a alinear al fondo de esto. De acuerdo, así que ahora puedes ver que tenemos todo por aquí. Ahora, vamos a la ONU agrupar este texto porque vamos a actualizarlo con el uso de un archivo de texto. No, Vamos a hacer un grupo fuera de todo esto, y vamos a crear codicia repetida, o vamos a usar una repetición. Extraño. Entonces voy a seleccionarlos a todos. Haga clic en repetir. Bien. Y esta es nuestra repetición. Bien. No. Ve la magia
fuera, será extra. Entonces vamos a crear una gran lista de repetición como esa. 3456 artículos. Supongo que vas a necesitar seis artículos por aquí así. Y ahora ve en medio de esto y trata de reducir el tamaño mover hacia arriba, y va a ser cero dedo del pie. Que sea perfecto. Está bien. Para que puedas ver, ninguna otra lista está completa. terminamos con estas actividades. Si quieres cambiar algo, puedes hacer doble click y Jane los colores fuera de este. Antes de eso, vamos a hacer una cosa más. De acuerdo, entonces vamos a actualizar este texto tasaciones. Por lo que ya he hecho un archivo de texto, y esto es para actividades. Entonces voy a arrastrar este archivo y lo voy a soltar sobre esta presencia, así que ahora va a cambiar todo. El problema es, creo que mi texto estaba alineado en medio, por lo que eso creó algunos problemas. Por lo que antes de eso, vamos a volver al primer paso y a un barco como este y hacer que quede alineado a la izquierda
También este. Hacerlo a la izquierda una línea. Ahora de nuevo, crea eso. Repito, ya está ahí, así que voy a repetirlo de nuevo. Reducir el tamaño en el medio. Está bien. Y ahora vamos a dejar caer el siguiente, o aquí ahora puedes ver que no reemplaza a nuestra expedición de cambio. De acuerdo, Así que también puedes mentalmente y por aquí, como el dedo cero algo así. Si quieres y ah, unas
cuantas cosas más. Por ejemplo, si quiero cambiar algo por aquí, tal vez quiero que el color fuera éste sea cambiar de dedo este azul espera. Entonces antes de eso, me voy dedo del pie un grupo mi grilla. De acuerdo, entonces voy a cambiar mi color en Lee este artículo. Entonces esto va a ser blanco, y esto va a ser también blanco. Y sigamos decolorar igual, ¿de acuerdo? Y no, ésta la podemos usar. Ah, tal vez algún otro color. A lo mejor éste. Entonces esto es diferente esquema de color que antes, pero creo que realmente me gusta muy afilado. Muy bonito. Entonces esto es sólo para asegurarse de que algo es muy importante pasando por aquí. O tal vez algo así o usuario necesita atención a éste, o esto es posible o algo así. Otro esquema de color con el que puedes ir es éste. Puedes usar este fondo así, y para éste, puedes ir con un color más oscuro, que es éste, algo así. Y para esto también puedes ir con este color más oscuro. Entonces, en
realidad, usé este porque este es nuestros colores primarios. por lo que no quiero que se use mucho dentro de mi app. Por lo que esta pantalla está completa. Esta es la magia fuera de grado repetido, y ahora vamos a duplicar la pantalla, dedo del pie otra y despejar la pantalla del fregadero en la siguiente lección.
34. Pantalla de sincronización de diseño de ♥: De acuerdo, ahora en esta escucha, vamos a crear pantalla de canto, y vamos a replicar esta porque es muy similar a esta pantalla. Entonces primero, vamos a usar esta puñalada y activar estos archivos de sincronización por aquí en lugar de estas actividades. Entonces voy a entrar con los pies y ah, haz lo mismo. Hacer esto 70% o 60%. Y este texto va a ser del 70%. Y esto va dedo del pie. Esto es básicamente sentir. Entonces voy a perder este. Y este es nuestro Este es nuestro ícono. Ahí está este ícono. De acuerdo, así que aquí lo tenemos. Hagámoslo 100%. Y esta barra de línea se va a mover. Por lo que éste se activa que preguntar, desactivado. Y ahora lo que vamos a hacer es que vamos a eliminar esto. Eliminar esto Realmente esto creo esto y libere esto Ahora también vamos al grupo de la ONU esto, así que me voy dedo en grupo. Entonces tenemos todas estas capas puestas. Ahora vamos a volver a grandes creadores grado B. Y ahora necesitamos sólo cuatro artículos de 123 y uno más así. No, estoy bien. Realmente Usa el espacio a cero otra vez. Subiendo cero. Perfecto. Y vamos a dejar caer la otra vez. El archivo por aquí. Archivo de texto Si no sabes cómo sucede realmente esta magia, estos son Este es básicamente un archivo de texto en cuatro líneas y ya he tecleado. Entonces lo voy a arrastrar y soltar sobre mi Lear, que quiero cambiar este. Y ahora se puede ver que se ha cambiado mucho en 44 archivos, Cuatro entradas. Si quieres cambiar algo por aquí, puedes hacerlo. Los hombres fueron liderados por doble clic, doble clic y entrando por aquí. Entonces voy a usar esto como mi pantalla desactivada. Entonces hagámoslo diciembre. ¿ De acuerdo? Entonces primero que vamos a hacer es ir de pie a la noticia la opacidad y hacer de esta
capacidad de texto al 60%. Ups. Por lo que necesitamos desenvolver esto Básicamente primero bajo rejilla. ¿ Dónde está nuestra grilla? Ese hijo lo agrupa porque estamos cambiando los estilos o aquí, así que la capacidad, reduciendo la opacidad de la capacidad de texto dedo del pie 60% así. Cambiemos su color a otra cosa como ésta. O tal vez algo así. Y también este. Voy a usar algo. Vamos usuario sculler toe opacidad este Usemos opacidad s así que voy a hacerlo 60%. Ahora puedes ver que esto se ve claramente inactivo o deshabilitado porque no podemos usarlo. Y si quieres cambiar el estado, por ejemplo, mis imágenes para descargar nuestras como 10 imágenes, entonces también puedo hacer una cosa más. Puedo cambiar su color a éste. Algo así. O tal vez sombra más oscura de este. Abramos nuestras bibliotecas y veamos que teníamos otros colores por aquí, así que no, voy a usar a una madre asesina de la Biblioteca de Asís. Voy dedo del pie selecto. He seleccionado este. Abramos este. Y voy a usar este color más oscuro para enfatizar que esto es importante. De acuerdo, Algo así alrededor de algo así. Entonces, uh, así es como usas tu codicia repetida. Y si quieres conseguir algo dentro de él, puedes hacerlo en Adobe. En realidad, creo que es más fácil, ya
sabes, cambiar las cosas. Voy a hundir archivos. Vamos a renombrarlo. Necesitamos un botón más y estado por aquí para que podamos hacer una cosa que limpiemos esta valoración de
botella como símbolo. Que sea un símbolo. Ve a la biblioteca de símbolos y la voy a arrastrar y soltar por aquí así. Ya sabes, voy a hacer click derecho, y voy a desenvolver los dedos del pie. Este grupo es y un símbolo de grupo, porque voy a cambiar algunas de las muy 10 caminatas. Por lo que aquí tenemos hundirse a la nube. A ver si va a caber en el mismo tamaño. Voy a arrastrar el icono por aquí, bastado por aquí en alguna parte. Arrástrelo por dentro. Este zoom en looks viene, más ism in, y tenemos que alinearlo en medio de esto. Entonces voy a usar esto. Se lo está permitiendo por aquí. Entonces voy del dedo del pie 11 tau 12.12 puntos o 12 dp's de aquí y también el texto, y éste va a tener abejas de calidad. Se ve genial. Vamos a mover esto en medio de ello. Off esperanzas hunden todo la nube, pero y hacer una carga más grande. Es más fácil chaleco de dedo o haga clic por cualquier usuario espera. Hagámoslo otra vez algo así. A ver. ¿ Cuál es la distancia entre? Debe ser superior a 12. Esto se ve genial. Voy con el dedo del pie. Alinearlo en el medio. Ups. Siguiente grupo ID Comando G y luego Alineado Ilimitado. Añadamos el estado aquí en el cochecito de cubierta aquí en la parte inferior. Entonces saquemos el color de este dedo. Cambiemos el dedo del pie este para que éste cree ext alineado en el medio. No voy a usar el medio boto 14. Voy a usar el 14 regular por aquí. Algo así. Es muy bajo en la parte inferior. Entonces voy con el dedo del pie, acercarlo más a éste. Por lo que esto se ve genial. Sería la distancia entre estos dos. Uh, OK, entonces creo que éste está hecho. Si tienes alguna pregunta o quieres saber más sobre las especificaciones, ¿es todo eso lo que utilicé por aquí? Se trata básicamente de 88 DP. No estoy seguro de por qué está mostrando el píxel más, pero si haces doble click sobre él, puedes ver que es de 3 60 por 88 DP, que es una especificación para tres. Línea A tres líneas Un elemento de lista de diseño de materiales de Google. De acuerdo, entonces hemos creado esto con éxito. Nos queda una pantalla, que está en la puñalada por aquí es la pestaña de esta pantalla. Creo que me olvidé de agregar la ficha. Entonces vamos a usar algún icono de dab por aquí para mostrar a las pantallas esta
navegación del cajón izquierdo o aquí. Entonces pasemos a la siguiente lección donde vamos a crear la última pantalla,
que es la navegación dibujada a la izquierda.
35. Pantalla de cajón de nav: ok, Antes de empezar a diseñar esta caída de narración habíamos ganado algunos solo queriendo arreglar, que era éste. Entonces vamos a copiar este ícono de la hamburguesa por aquí menú de hamburguesas, y vamos a pegarlo. Copiar, Y lo vamos a pegar en todos estos diseños en el lugar fuera de esto de aquí. Por lo que solo estoy haciendo doble clic para llegar a este. Control V. OK, para que veas que ha vencido en su lugar. Por lo que vamos a dedo usar otra característica off at o B x D. Así que vamos toe klik y seleccionar con turno haciendo clic en todas las diferentes tablas de arte con las
que queremos trabajo del dedo del pie y controlar o comando re. Está bien. Por lo que puedes ver he vencido este elemento varias veces en todos estos libros de arte. Entonces este es un truco muy cool si quieres hacer eso. De acuerdo, así que ahora vamos Esta es nuestra barra de pestañas. Y escuchamos algo por aquí que está en el contenido de la barra de herramientas de nuevo en absoluto. Vamos a eliminarlo de manera similar y vamos a ir con éste, así que sólo necesitamos eliminar estas flechas traseras. De acuerdo, así que todos terminamos con esto, uh, hombres de
hamburguesas , ya
sabes, vamos a crear el lado. Nunca. Y, ah, vamos a usar este tablero como fondo, así que lo voy a replicar. Control de mando, De. Entonces tenemos otra pantalla o aquí ahora lo voy a nombrar, Nunca dibujar. Y lo que voy a hacer es que voy a esconder todo menos el estado de chispa. A Así que voy a mover el estatus, pero en la parte superior como este y menú de hamburguesas y todas las demás cosas, los
voy a agrupar en un solo grupo, uh, se llaman fondo. De acuerdo, así que lo voy a bloquear ahora mismo para que no movamos por error este fondo. Ahora vamos a ir a nuestro tú me las llevo y Reggie camino por gran estudio sencillo, Y nos vamos del dedo del pie cangrejo esta pantalla y lo que realmente necesitamos es pasemos a este
panel de capas . Necesitamos esta navegación dibujar navegación lateral giro giro esta barra de estado. Aunque quieras copiar la parte de estado, puedes copiarla. Y también este trasfondo. De acuerdo, Entonces lo que no necesitamos es éste espera Así que tenemos algún problema. Estamos aquí cualquier esperanza. De acuerdo, entonces vamos a seleccionar esto justo ahora. Control o mando comandado. ¿ Ver? Y lo vamos a pegar en la parte superior de este. De acuerdo, entonces ahora se puede ver de una navegación. Draught está aquí. A ver, ¿cuál es el otro más temprano aquí, cuál es éste? Esto es de fondo sobre. Y esto es vamos a copiar este fondo y basarlo aquí. De acuerdo, entonces ahora vamos a mover esta superposición en la parte de atrás. Pero el cuerpo de status va a estar en la cima así, y lo que vamos a hacer es que vamos a usar algo de capacidad a este 50%. Hagámoslo un 50% de capacidad así. De acuerdo, así que esto es por aquí, y ahora vamos a lograrlo. Desarrollémoslo, hacémoslo y usemos este fondo, y me voy de dedo del pie cangrejo por aquí y lo llenaré de él. De acuerdo, entonces el pellejo está lleno. Ahora, hemos montado nuestras principales cosas por aquí. Vamos a Gleaton los que no necesitamos. De acuerdo, entonces tal vez no necesitamos eso es esto básicamente una lista eso voy a seleccionar todo debajo de esto Sólo necesitamos tres de ellos. De acuerdo, entonces vamos a usar uno es cambiar de perfil o tal vez seleccionar. Ah, año
de tasación. También por aquí. Vamos a usar el nombre de nuestro médico. Usemos este correo como lo que sea que sea por aquí. A ver. Coloca esta imagen por aquí, cada alquitrán y yo voy a cambiar el mapa grande por aquí a esa imagen de doctores rezagados. Estabas aquí imágenes, y este es nuestro bonito Dr. Hay un lugar todo aquí así, y voy a quitar este mapa grande, tamaño y dar clic en otro lugar. Y se puede ver ahora ya ha recortado. Por lo que voy a hacer doble clic y seleccionar esta película. Ahogado. Hagámoslo un poco más pequeño así. De acuerdo, así que esto se ve bien. No estoy seguro, pero creo que éste se ve muy cerca de esta frontera, así que la voy a mover abajo. De acuerdo, así que vamos a ver. ¿ Qué? ¿ Dónde está el tamaño de éste? Entonces esta es nuestra lista, Entonces creo que deberíamos mover de una lista. Por lo menos, um es dp bajado. Entonces algo así. Ahora, déjame ver cuál es la distancia. 10. De acuerdo, así que ahora se ve mejor porque creo que el material diseño de Google material diseñado tienen cierta separación entre lista y otros elementos fuera de un DP, al
menos. Entonces ahora tenemos incentivar la separación, y sólo necesitamos cambiar nuestros iconos por aquí. De acuerdo, Así que voy a arrastrar iconos por aquí. Además, si puedes,
puedes cambiar este fondo, que es esta imagen de máscara. Entonces podemos cambiarlo aquí así. Y voy a traer este fondo de mi carpeta SS, y voy a reemplazar por esta. Acabo de arrastrar la imagen encima de ésta. De acuerdo, entonces si me muevo ahora fuera de
esto, va a ser algo así. De acuerdo, Entonces una cosa más, si
quieres, también puedes superponer algunas cosas más encima como esta, y voy a llenarlo con la decoloración, y voy a usar alguna capacidad como esa . A lo mejor algo como esto sacar afuera y se puede ver este es el mismo efecto que estábamos buscando. De acuerdo, así que arrastremos esta imagen en el medio. Ups. Algo así. De acuerdo, Ahora vamos a reemplazar estos iconos. Entonces vamos a llegar a esto. Los últimos iconos de tarea. Y aquí tenemos el ícono. Este es un perfil uno. Y esta es la cabra ley. Y el cambio aquí es éste. Entonces los voy a agarrar a todos, arrastrarlo a mi archivo, basarlos en el mejor tablero, para que no se mezclen por aquí. Y lo que voy a hacer es copiar y entrar en el icono de esta bandeja de entrada de rol basado por aquí. No, lo voy a alinear encima de esto. Me fui y solo les dejo la llave de icono de caja. Y ahora lo que voy a hacer es que voy a cambiar el color a este color resaltado, que era nuestro este. Ah, color de resaltado
secundario. Entonces así es como se va a ver. Y para éste, puedes ver que han usado algún color sobre el cabello, que es déjame mostrarte cuál es el color de este? 54% de capacidad para Phil color negro. Entonces lo voy a hacer está bien, así que estamos todos bien. Hay una cosa más. Si quieres hacerlo, puedes mover este logo en la parte inferior y poner algo de separación de líneas. Entonces, ley, cabra es diferente a todo esto. Pero si quieres mantenerlo por aquí, eso depende de ti sabes, voy a leer todos estos iconos, y creo que otro sorteo de navegación está hecho. Esta parte va a estar en la cima. El status parte va a estar en la cima. ¿ Todo bien? Porque tiene más elevación y luego ambas fuera de estas cosas. De acuerdo, entonces todo eso se trata de este diseño. Te he mostrado cómo completar completamente diseñado todos estos. Vamos a selectos y moverlos. O aquí, vamos a moverlo dentro de Estos. De acuerdo, así que hemos diseñado seis pantallas y ah, gracias por tomarse su tiempo y construir conmigo en todos estos largos ejercicios. Espero que hayan disfrutado de esta lección y hayan aprendido las
especificaciones de diseño de Google design Madrid y aprendan a usarlos. Yo llego a construir rápidamente tu diseño. De acuerdo, Entonces lo que estamos haciendo aquí es que sólo estamos llenos. Ah, basado en colores y tipografía y unos pocos fuera de los elementos, tamaños y distancias usando material, pautas de diseño de materiales de
Google, y espero que hayan disfrutado de esta lección. La siguiente lección. Vamos a utilizar la función de exportación por lotes por aquí, que está en exportación de distintivos para exportar nuestros todos los activos a diferentes
cubos de resolución . Para xxx dp i xx e p i tres trabajos extra uno siguiente 1.5 x y todas estas resoluciones diferentes las cuales son apoyadas por el diseño de material de Google. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
36. Proyecto de Adobe XD: Está bien. Hasta saber que has aprendido todo sobre el diseño de materiales para Android y cómo puedes usar material para
android diseñado para diseñar APS de aspecto impresionante. Ahora, me
has visto haciendo un ejercicio por ti. Ahora, quiero que creéis otra asignación. Esta va a ser tu última tarea. Entonces vas a crear Ah, aplicación de mensajería
muy simple para mí. Y solo quiero que creéis tres pantallas. Entonces déjenme mostrarles qué y qué pantallas me van a mostrar para sus
asignaciones finales . Crear un equipo ah, esquema
de colores. Y aplicar eso al diseño de materiales. Y niños usados y ah, uh, tratan de traer esta vida. Puedes usar tus propias ideas si quieres. Puedes usar tu propia fuerza personalizada si quieres dedo del pie. Pero quiero estas tres pantallas de ti. OK, entonces voy a cambiar a mi escritorio y vamos a ver qué quiero realmente de ti. ¿ De acuerdo? Está bien. Ahora puedes ver estoy en esta app de mensajes más SMS y puedes ver solo quiero estas tres pantallas de una. Es esta bandeja de entrada la cual tiene todos los diferentes contactos y todos los diferentes mensajes enviados de tus amigos y la fecha y tal vez la hora por aquí. Y estamos usando tres pestañas fijas por aquí puedes ver en la parte superior, y la siguiente pantalla será la pantalla de mensajería donde aparecen los diferentes mensajes y hablas con tus amigos y luego la última reina será contacto. De acuerdo, Entonces, SMS Yo quería nuestro deseo que diseñes sm ists, contactos y llamadas. Si quieres saltarte la llamada, puedes usar este SMS y thes dos pantallas, en realidad abortar. De acuerdo, entonces tres pantallas. Una es con este SMS donde estás hablando o chateando con tus amigos. Uno con los todos estos contactos y uno esta bandeja de entrada donde tienes todos estos smmes. Así que trata de usar a tus hijos blancos. Te he proporcionado en durante los puntajes. Intenta reinventar la rueda. Así que adelante y diseñó este ejercicio. Voy a revisar este ejercicio y te voy a dar consejos sobre hot. Mejora tus habilidades de diseño. Quítate la captura de pantalla de los pantalones cortos. Tus diseños los están exportando como peligro. Puedes diseñar en tres x dos x o cuatro x xxx sdp I pero asegúrate de crear bonita pantalla de tablero de arte de
buen tamaño donde pueda verlos fácilmente. No intentes presentarte a archivos grandes, por lo que me será difícil verlos por separado. De acuerdo, así que asegúrate de las imágenes que vas a exportar de tus tableros de arte para mostrarme incrustadas. Puedes usar un poco más de taza si quieres. Puedes descargar cualquier Samsung o cualquier android como mock up telefono y poner esas pantallas en tres marcas
diferentes y enviarme eso. Esa es una buena manera de presentar tus diseños. De acuerdo, entonces espero y veo lejos viendo hacia adelante y esperando sus asignaciones que empiecen a
diseñarlas ahora.
37. Activos de exportación de lotes en Adobe XD: Está bien. Ahora, en esta lección, vamos a cuidar la parte de extracción de activos de nuestro diseño. Ahora, extracción de
activos es básicamente que necesitamos darle a nuestros desarrolladores todas las diferentes resoluciones
para las próximas dos x tres x Así que una imagen va a ser como duplicada 45 veces. Por lo que tenemos que dar cinco o cuatro archivos para soportar todos los diferentes cubos de densidad Google Android tiene ojos soportados está soportando en este momento. Entonces lo que vamos a hacer es que hay una función muy creativa en Adobe X'd. Por lo que vamos a hacer clic en esto y hacer que sea lote para Mark para las exportaciones de parches. Entonces este es nuestro logo. Asegúrate de que lo vas a nombrar local grande, algo así. Y también este local. Voy a llamarlo Logo Pequeño, algo así. Entonces solo voy a marcar esto Así que esto va a ser en la exportación de insignias. También, éste. Voy a marcarlo como una exportación de insignia. Además, si quieres dedo del pie, usa este registro por aquí, puedes seleccionar ambos de ellos. Vamos G y usa esto como bar Bt y Logan y también comercializa como exportación de insignias. Entonces ibas a batear exportar todos estos activos también esto Pero yo sé aquí, y esta es nuestra carga. Date de alta. Por lo que voy a comercializar como mi activo. Así que sigue haciéndolo por todos los activos que has utilizado. También puedes marcar estos ah, iconos por aquí. Está bien. Para que puedas usar estos iconos y marcarlos, o estás dejando que tu diseño nuestros desarrolladores hagan el resto. ¿ De acuerdo? Para que puedan obtener estos iconos del sistema. Yo causa de diseños de materiales. Para que no tengas que preocuparte por extraer todos estos iconos. De acuerdo, entonces tal vez este botón, necesitamos esta patente Subedi en un Brasil. Voy al mercado. Este es nuestro fregadero de madera. De acuerdo, así que voy a llamarlo fregadero, así que asegúrate de que los estás nombrando correctamente. También puedes hablar con tus desarrolladores sobre convenciones de nomenclatura, qué están usando, si hay usando dash o guión bajo. Ah,
¿ algún otro método fuera de nombrar a sus fuegos algo así. De acuerdo, entonces tal vez podamos esperar esto. De acuerdo, así que este botón, voy a ser la nube n sync. Algo así. De acuerdo, Entonces una vez que hayas seleccionado todo tu extracto y todos los activos que quieras extraer. Simplemente vamos a ir de pie a este menú por aquí Exportar y lote. Por lo que va a exportar todos los activos que tenemos marcados, así que asegúrate de haberlos marcado correctamente. De acuerdo, entonces en esta pantalla de exportación, vamos a seleccionar Android y hemos diseñado al 100% MDP. Nunca cambio esto. Esta es la carpeta que he seleccionado. Puedes exportar a cualquier carpeta que quieras. Formarlo. Siempre intenta usar BMG porque aquí puede apoyar la transparencia. De acuerdo, entonces ,
no, voy a dar click en exportación. Se va a exportar todos los activos. Veamos, dónde están esas afirmaciones y cómo se han exportado a múltiples tamaños diferentes. De acuerdo, Ahora estoy en mi carpeta de exportación y puedes ver que ha creado toda la resolución diferente. Supported hace valer los todos los activos que entran en tu app. Van a estar en estas carpetas. Tribal sdvi triable, ldb I m d b a x DPS xdb I y triple X HD vía Así que si abrimos este, puedes ver los tamaños son muy grandes puedes ver los botones son muy grandes. El logo es muy grande, por lo que si vamos a este, se
puede ver que todos los activos son un poco de tamaño mediano para pantallas extra alta definición y luego éstas y luego más pequeñas para ésta. Entonces si hacemos clic en esto, se
puede ver donde el pequeñito log en Gran Bretaña. Por lo que normalmente creo que no vamos a ir del pie. Necesitan estos dos LDP y STP I vamos a necesitar X m x x y triple X. Así que así es como usas tu adobe X'd para extraer todos los activos utilizados en tu app y
dárselo a tus desarrolladores. En la siguiente lección, vamos a aprender a usar Zeppelin vestido. Extrae todos los colores, desfiladero y todo usando tu Adobe X'd y dáselo a tus desarrolladores. Y ayudará a sus desarrolladores a construir rápidamente el esquema de color y la tipografía o su apagado su aplicación, o incluso ver las especificaciones que verruga botón en el tamaño fuera de la carga en los DP's. ¿ Cuáles son las distancias de los diferentes botones y elementos de hechizo en los DP's? Por lo que esta es una herramienta muy grande. Entonces en la siguiente lección, Vamos a usar Zeppelin. Entonces para eso, voy a ir a mi Mac. Eso siguiente grabación de pantalla será de mi I Mac eso Nos vemos pronto en la siguiente lección.
38. ♥ usar Zeplin y Adobe de Adobe XD en MAC: De acuerdo, ahora en esta escucha, vamos a usar Zeppelin dot io para extraer nuestros todos los activos y todas las diferentes especificaciones de
desarrolladores y todas nuestras guardas de estilo y todas nuestras distancias entre diferentes elementos usando Zeppelin dot io Si has tomado mi ah, será curso extra o flujo de trabajo más que representar llamadas. Quizás ya estés familiarizado con Zeppelin dot io. Así que conoce lo que debes hacer es que puedes registrarte gratis y necesitas descargar Zeppelin dot io para tu sistema operativo. En este momento, está trabajando con la app Mac. Puedes ver aquí tenemos la app de Mac y también hay una app de windows, pero en O b x d Solo tienes que apoyar en este momento en la app de Mac para usuarios de Mac. Entonces si eres usuario de Mac, creo que estás de suerte. Podrás extraer fácilmente todos tus activos y todo usando esto. De acuerdo, Así que descarga esta app, instálala, y vas a lanzar esta app. Y una vez que lo
lances, va a mostrar algo como esto. De acuerdo, entonces aquí tenemos a este Zeppelin. He borrado mis proyectos anteriores, por lo que sólo habrá 13 proyectos. Por lo que estás en un más gratis para que solo puedas quedarte con un proyecto. Entonces voy a crear proyecto divertido y va a ser android. Y voy dedo del pie a presionar, crear. Está bien. Para que pueda cambiar el nombre, Toe GP herramientas, Algo así. Está bien. Y extensiones. Ya agregaron que se va a utilizar examinar. Ahora puedes ver aquí también tienen la guía. Si haces clic en él o en txt, van a mostrar que necesitas ir a Export y Zeppelin para sketch on bx defict. Mente para las tiendas. Fácil. Entonces estos son los cuatro APS completos que están apoyando en este momento, Así que voy a cambiar a mi Adobe X'd y puedes ver por aquí. Aquí está el archivo fueron diseñados. Lo he compartido usando mis bibliotecas CC en la nube. Entonces, ¿cómo? Abrí este abierto y fui dedo del pie archivos creativos en la nube, y este es mi extra en clase y archivo de escritura. Entonces he abierto por aquí, y ahora lo que vamos a hacer es que vamos a seleccionar todos los aburridos de arte van a file export en CEPAL en. De acuerdo, Entonces este es el proyecto que no vamos a reemplazar con importación. Y lo diseñamos MMD p I porque es el Von X. Así que vamos a seleccionar este, así que cambia y haz click aquí, y empezará a subir diferentes pantallas. Si falla alguna pantalla, puede hacer clic aquí y volver a intentarlo una vez más. De acuerdo, entonces tenemos todas las pantallas subidas. Ahora podemos mezclarnos con ellos y elegir diferentes colores y tipografía y todo. De acuerdo, entonces primero me voy a ir con esta pantalla de inicio de sesión. Ahora he abierto esta pantalla y puedes ver si hago click aquí me está mostrando el tamaño en DP's. De acuerdo, Entonces la distancia entre estos dos es de 21 db y ah, esto es ah las distancias de ambos lados. 101101 día sea de alfombras. 213 dp's. Y si miras del lado derecho aquí tenemos este panel donde podemos agregar nuestras tipografías. De acuerdo, así que estas son las cargas donde podemos agregar el color. Entonces si quieres agregar este color a nuestra guía de estilo, click sobre aquí y se agrega. OK, De igual manera, si quiero agregar la cara Styx o el estilo, voy a ir y llamarlo Ah significa nombre AP algo así. Presionar enter. Y eso es todo. De acuerdo, ahora puedes ver en la parte inferior hay una cancha de ejemplo, que a tus diseñadores les va a encantar. De verdad amor. De acuerdo, puedes compartir estos desarrolladores de video y ah, se
van del dedo del pie. Obtén el contenido que puedes ver Aquí está ah, contenido dedos tippy. Pueden copiarlo desde aquí. También este este es Ah, texto por aquí. Pueden copiar de nuevo. Puedes agregar todos estos colores. Estos son más colores se pueden agregar estos Esto es en el estilo que puedo ver como sub encabezado 14 sp. De acuerdo, algo así. De acuerdo, así que ahora mismo estoy agregando todo mi retorno diferente en diferentes colores. Se puede ver Aquí está mi color. ¿ Está activa mi entrada siguiente? Algo así encendido. Entonces tenemos esta contraseña olvidada Contraseña. Se trata de un enlace. Entonces voy dedo del pie llámenlo enlace siguiente. Algo así. Entonces así es como vas dedo del pie acumular tu Steiger juicing Zeppelin dardo ire herramienta. De acuerdo, entonces una cosa más esto son nuestros activos ahora puedes ver que puedes descargarlo en cinco granjeros
diferentes de BND. Entonces tus desarrolladores, se van del dedo del pie, Solo tienes que hacer clic en este y se va a descargar todos los activos en esta carpeta. Por lo que este es el cuatro seco creado Zeppelin para que puedas exportar a esta carpeta así y
puedes ver si doy clic en este botón. Me está mostrando el tamaño de esto, pero solo estoy presionando mi tecla por aquí 90 dp por 42 db Así que esto es realmente bueno. Tus desarrolladores, necesitan a los tamaños en DP's Ok, no las fotos. Entonces de igual manera, si vas a otras pantallas, puedes tener diferentes iconos por aquí. Estos son iconos del sistema también los tamaños apagados. Estos se pueden ver esto es de 80 80 p de alto y 3 60 db vied. Por lo que para este, es un tres db de altura. Por lo que todos estos puedes tenerlos que están aquí. Ok, también, si haces doble click por aquí, puedes ver aquí tenemos el color, así que puedo voy a añadir este color primario. Este también es nuestro asesino para la barra de estado. Entonces voy a añadir esto. De acuerdo, entonces llamémoslo barra de estado. Entonces sé que decolor pertenece a Estado un spot. Además, este color se puede agregar al final como F bar, algo así. Para que tus desarrolladores puedan saber que esto es esto pertenece al ámbar. Por lo que te vas dedo del pie Añade todos los colores diferentes y todos los textiles diferentes. Este es tu 12 punto o 12 SB um siguiente algo como esto. Este es tu texto blanco. Por lo que también vas a usar esta luz blanca. Siguiente su premio Un medio. Es para nuestra barra de aire. Entonces voy a usar una botella aquí. Algo así. Atrás. Volver al panel de control. Por lo que ibas a seguir haciendo esto para toda tu app Y selecciona cada textil de estilo
que has usado cada color que has usado. Y luego vamos a ir a la guía de estilo y puedes ver aquí tenemos todo el médico hecho automáticamente. Aquí tenemos todos los colores Largo,
gris, gris, negro como tal vez enlace robar un negro azul oscuro gris barra de acción. Entonces tenemos todos estos colores y en el lado derecho, se
puede ver si lo invento por cualquiera de los dos. Se puede ver este es el androide y desarrollador anotado por sus textiles y sus
paletas de colores . Por lo que todas las paletas de colores y textiles de pila se generarán automáticamente y
solo podrán copiar y pegar ese frío por aquí. De acuerdo, así que todo se trata de cómo puedes usar Zeppelin. Si quieres agregar más extensiones o quieres compartir esto con alguien que puedes agregar, invitar a otros como hacer clic aquí, invitar por correo electrónico o usar un nombre. Además, se
puede agregar a holgura en. Este es el enlace. Puedes copiar el enlace y ah, una cosa más es que si quieres oh, agrega más extensiones o si estás desarrollando en cualquier otro idioma tus desarrolladores son que no están usando Androids te dijeron. Entonces puedes ir a explorar extensiones, y te va a mostrar otras extensiones que tienen bean desarrollado por Zeppelin o
se desarrollan open source. Puedes ver tu cabello rápido examen Objetivo C, Ill swift y objetivo C es para, um, Mac o IOS iPhones. CSS menos s es para Web. Un CSS también es estilista para Web. El nativo del huevo es otro. Por lo que si quieres agregar puedes nuestro aire a Zeppelin Puedes elegir tus herramientas gp de producto y puedes agregar a Zeppelin. Y ah, así es como puedes usar tu otra extensión por aquí. Está bien. Entonces una vez que haya terminado, me voy a dar click por aquí. Se puede ver estos son uno que puedo seleccionar a cualquiera. Puedo desactivar a cualquiera si quieres. Si quiero reaccionar cancha nativa. Voy a conseguir eso s así que aquí tenemos off hoops eso aquí tenemos el Oops directo. Entonces aquí tenemos toda la corte nativa reaccionar. No es diferente, por lo que se pueden ver colores y contenidos constantes. Textiles. Esto es totalmente diferente. Diferente guía de estilo en diferente patrón de cordones. puede ver en la parte superior ahí diciendo que está reencendida Si quieres cambiar algo o unos ajustes fuera de esto puedes usar heck que asumen un grande estar a ti mismo o lo que sea. puedas decirle a tus desarrolladores que esta es la app con la que vamos a trabajar y te
será más fácil colaborar con tus desarrolladores en este
proyecto de diseño de materiales para android . Espero que hayan disfrutado de esta lección. Si consigo ese tiempo, voy a hacer el video usando el siempre anotado. Este es otro software o app para colaborar con tus desarrolladores en cualquier proyecto aéreo o cualquier proyecto. Y ah, eso es todo. Si tienes alguna pregunta, me
hiciste, pasemos a la siguiente lección.
39. ♥ Adobe XD: Ahora voy a hablar de un concepto muy diferente que se llama nueve Patch Tool y nueve pasado generador de herramientas. Hay mucho apagado para diferentes herramientas en línea donde puedes usarlas como dedo del pie de diseñador. Crea nueve obras de arte de parches para tus desarrolladores. ¿ Saber qué? En realidad nueve significa parche es en realidad, Por ejemplo, si has visto botones en tus dispositivos Android o ah, en tus tabletas android. De acuerdo, Entonces si has visto esos botones, puedes ver que si esa misma carga está en un dispositivo móvil, por ejemplo, déjame mostrarte éste este fregadero a todo, pero se puede ampliar usando obra de arte de nueve parches. De acuerdo, Entonces, por ejemplo, si usualmente estás cambiando al modo tableta o está usando un dispositivo tablet para acceder a tu ah, esta ah, app lo que lo hace esta imagen, esta imagen de nueve parches, Lo que va a hacer es que va a expandir este botón automáticamente para acomodar en la siguiente pantalla. Entonces si el botón de pantalla de tu tablet es uno más grande, vamos a usar solo un elemento gráfico para producir botones de tamaño múltiple los cuales se
van a generar automáticamente por android studio y grabación. De acuerdo, entonces el concepto es muy sencillo. Lo que vamos a hacer es que sólo necesitamos este fondo en la parte de atrás, que es este rectángulo cuatro. Y voy a hacer click derecho y exportarlo. Exportación por exportación, seleccionada a la derecha. Y lo voy a exportar a mi carpeta. ¿ De acuerdo? No, voy de pie acceder a mi carpeta y puedes recoger a cualquiera de estos eso. Voy a recoger este x x HDP I, y voy a arrastrarlo y soltarlo por aquí. De acuerdo, entonces esta es una herramienta muy sencilla. Y ahora puedes ver aquí tenemos algunos fuera de los límites por aquí encima y ah, el déjame seleccionar este xx STP. Fui seleccionado, en realidad. De acuerdo, Así que selecciona este acto. La resolución para la que has diseñado de esta imagen. De acuerdo, Entonces lo que va a hacer es que te vas a Estás viendo algunas líneas por aquí. Estas son pocas líneas negras a la izquierda y a la derecha. Y arriba y abajo. En primer lugar, vamos a entender lo que realmente significan estas líneas. Entonces la línea superior y la izquierda Vale, así la línea de parada y la de izquierda. Significa que esta sección toda esta sección fuera abatido de arriba a abajo, incluyendo esta sombra. Se va a repetir si el botón se va a expandir en dirección horizontal. De acuerdo, así que esto se va a repetir, Repito. Estos cerdos van a repetir por aquí, por aquí o por aquí, y estos rincones serán empujados. OK, entonces en esto en este tipo de off acto, lo que están tratando de hacer es que están expandiendo la carga, pero las esquinas y esta sombra, no
van a, ya
sabes, um, se pixelan o se distorsionan. De acuerdo, entonces esta porción y esta porción va a ser esto se va a repetir. Por eso se llama Parche nueve Batch. Se está repitiendo este parche una y otra vez. Vale, So Okay, ahora se trata de la repetición repetida de las secciones de este gráfico. Ahora, estas dos líneas a la derecha y están en la parte inferior. Esto significa el contenido acariciar. Entonces, ¿dónde va a caer el contenido o el texto de este botón? Si va a llevar de esto a todo este botón en esta zona de sombra. No, no se
lo va a llevar. Toma ese espacio. Entonces vamos a ir a ropa de cama de contenido de dedo y nos vamos de pie justo así. Y necesitamos nuestro contenido o el texto de botón por aquí dentro del espartano. Por lo que ahora se puede ver que estas líneas han sido No, Estas líneas son más pequeñas y se han acortado porque hemos arreglado sumando contenido peleando por aquí. De acuerdo, así que ahora se pueden ver estas son diferentes resoluciones para MDP I extra ph d p i xx sdp I y triple X HDP I Vale, así que se va dedo del pie generar todos los gráficos para todas las resoluciones diferentes. Y vamos a dar sólo un archivo este fondo con sombra incluida, y tus desarrolladores se van a besar tus manos que podemos usar este sencillo gráfico y ah, uh, en cualquier sistema, cualquier tableta, cualquier cosa. OK, entonces se va a expandir por su cuenta. Entonces ese es el concepto mayor detrás de esto. Ah, um generador de almohadilla nueve. Huesos ópticos es yo creo, la orilla re visible, tal vez algo así, pero no sé mucho al respecto. Y no necesitas preocuparte por ello. Tan solo asegúrate de que tus regiones de estiramiento y apuestas de contenido estén definidas perfectamente. De acuerdo, una vez que hayas terminado con esto, vas a dar click en este pueblo. Lord Zip y se va dedo del pie. Descarga el archivo. Déjame extraer este archivo y ah, vamos a abrirlo. Y estas son la resolución 45 que va a apoyar STP MDP I resolución toda diferente que si estás desarrollado, podemos abrirla. Se pueden ver estas líneas en este gráfico, ¿de acuerdo? Y tus cuartos, pueden usar estos y pueden generar cualquier tipo o cualquier tamaño fuera de este indulto sin distorsionar su sombra o sus esquinas. De acuerdo, así que ese es el secreto detrás de esto. Entonces ahora ya sabes cómo puedes extraer tus botones ah. ¿ Son estos gráficos de tipo apagado en estos nueve gráficos de parche de aquí? Y una cosa más es,
es convención de nomenclatura. Se puede ver al final el nombre fuera de este archivo hay punto anexado punto nueve puntos PNG . Entonces cada archivo que vas nombre del dedo del pie, te vas del pie. Nómbralo y el y vas a anexar puerta a nueve. Por lo que básicamente es decirle a tu sistema que es archivo de nueve parches. Por lo que espero que hayan disfrutado de esta lección. Se puede y hacer este tipo de nueve patchwork con todas las cargas. Creo que solo necesitas producir uno para todas estas cargas y tal vez uno para este botón azul más oscuro y listo, no
necesitas dedo del pie crear como cientos de archivos. Simplemente crea a estos nueve activos gráficos de parche, y luego van a servir todos los diferentes botones de tu dispositivo. Espero que hayan disfrutado de esta lección. Y si tienes alguna pregunta con respecto a la regla de nueve pashto o lo que puedas preguntarme respecto a Android, ese diseño de materiales, espero que hayas disfrutado de esta lección. Sigamos adelante y aprendamos algo más.
40. Qué nuevos materiales 2.0: De acuerdo, Entonces esos unos pocos que están vagando por eso Por qué no he contado nada sobre material diseñado para apuntar o la última versión de diseño de materiales. Si nos fijamos en las directrices de diseño de materiales, las han renovado totalmente, y lo han cambiado totalmente todo. Pero la mayoría del 90% de las especificaciones o especificaciones de diseño, son iguales. Entonces les voy a mostrar en estas dos o tres lecciones que lo que es nuevo en el diseño de materiales y cómo pueden obtener beneficios o leer o tomar orientación de estas nuevas
pautas de diseño de materiales . De acuerdo, así que empecemos con lo nuevo. Por lo que han agregado pocas cosas nuevas. Estos son tres nuevos campos de texto de cosas. Tienen diferente patrón. Ahora el patrón de campo de texto es diferente. Hay dos personas que están siguiendo con base en su investigación basada en evidencia es entonces tenemos esta extendida f A B. Te voy a mostrar todo el es tú. De acuerdo, entonces tenemos esta densidad de capa. Entonces en lugar de usar las horas de juego de escritorio y, um, capas
móviles o de alta densidad, lo
han cambiado dedo del pie baja densidad y alta densidad. Entonces si estás trabajando en una pantalla más grande donde los usuarios pueden tener un mouse para hacer clic. Después lo llaman Alta densidad o ah, una pantalla que es muy,
muy alta densidad, como 600 BB I o pantalla muy densa, donde puedes usar tamaños DP más pequeños puntera. Ya sabes, el usuario puede tocar fácilmente esos lados dp porque es muy denso. De acuerdo, así que empecemos. Te voy a mostrar algunas cosas. En primer lugar, les voy a mostrar estos campos de texto que extendidos F bebés que esta
cosa de diseño de densidad . De acuerdo, entonces aquí tenemos al nuevo Leo. Este es básicamente un viejo patrón el cual se está volviendo muy popular con el Este título se mueve hacia arriba y se puede ver este es el nuevo campo de texto, que es mejor, creo que desde el anterior en términos de experiencia de usuario y siguiendo el patrón este es en realidad un campo de texto. Entonces les voy a mostrar dónde tienen. Se trata básicamente de dos tipos de alimentos. Uno es éste. Este es nuestro campo cliente con la etiqueta. Esto es ah, campo con el contorno. ¿ Es Onley el golpe en la parte inferior? De acuerdo, entonces esto es normal y esto son actividades. Por lo que una vez que alguien haga clic en
él, se va del dedo del pie. Mueve la etiqueta hacia arriba y la entrada de entrada se resaltará así. Entonces les voy a mostrar la interacción real. De acuerdo, así se puede ver que hay interacción. Entonces si quieres alguno si quieres usar cualquiera off esto estos en tu diseño puedes usarlos en tu diseño y van a interactuar así. Entonces realmente me encanta esto, este nuevo patrón y ah, esto es ya sabes Ah, Y si quieres saber las especificaciones puedes e ir abajo y hay pocas
alteraciones más que puedes ver aquí, puedes hacer equipo de acuerdo a tu app, puedes ver por aquí. En realidad, he dicho que lo que es este primario en superficie y respuesta para escullers significan Así que puedes ver que solo están usando un color vita en diferentes variaciones. Y para mostrar estos campos de texto, puedes ver aquí tienen este rebosante. Entonces en realidad, en esto una nueva versión off material diseño. Puedes hacer equipo a tu app del color que quieras. Entonces esto es realmente, creo, realmente bueno para los diseñadores, y no los están limitando y se puede ver por aquí tiene otro ejemplo allá que están usando tipografías personalizadas con equipos personalizados. Y ah, si voy abajo, se puede ver Aquí están las especificaciones del campo de texto 56 se esconden a 80. Estos son casi los mismos 16 una línea DP y luego tenemos 12 dp 12 dp en ambos lados. Este es su defecto luchando por yo creo que este tipo de cosas donde hay algún texto dentro de algún contenedor. Entonces si quieres oh, ver más puedes seguir y dar click en las especificaciones y puedes ocultar ropa de cama y dimensiones y texto de línea base. Por lo que la línea base de texto es que el texto se va a sentar en esta línea y su línea base se
basa en cuatro líneas de base de texto db. Así que asegúrate de que si no sabes nada de basal, deberías ver mi curso tipográfico para ti son diseñadores. Ahora me voy de pie, Vuelve atrás. De acuerdo, así que esta es la nueva, uh, cosa que es hacer equipo y estos dos nuevos mecenas para campos de texto. Ahora veamos qué tienen esta fab. Yo sí fui ahí un material diseñado para apuntar o bien, Así que aquí está el Fab, que es tarjeta de acción flotante, pero Y se va dedo del pie tienen diferentes mecenas. Déjame mostrarte. OK, así que aquí está en una dirección que puede realizar. Si haces clic en este botón de acción justa pero flotante, te
va a mostrar más acciones por defecto que puedes hacer con esta pantalla. Se puede ver por aquí esta es su nueva. Se puede ver la cualquier misión detrás de ella. Está teniendo algo de luz, miedo, color y emisión. Y este icono se está moviendo y moviendo de nuevo a una transición. Entonces estas son pocas cosas. También, están mostrando las interacciones sobre que Es oso contexto. Entonces si intentas cambiar entre dos elementos en la parte superior, van a cambiar esto. Ah, puedo por aquí. Está bien, para que veas que vengo dedo del pie ha cambiado. Por lo que estos son pocos comportamientos. Han agregado algunas cosas más y han demostrado que no vas a usar
más de cinco por aquí. Entonces si estás usando algo así, este no es un buen patrón para usar. ¿ De acuerdo? Además, se
puede ver que se puede hacer eso. se puede hacer. Y así esta es una interacción muy nueva. Creo que están agregando algunas cosas más como puedes ver lo que Aquí. Esto es totalmente diferente Compuesto, nuevo y enviado a todos los de. Además, puedes ver que no puedes agregar demasiados artículos son muy pocos artículos. Entonces si quieres uno, va a ser deportivo como tratar cuatro o cinco, tal vez artículos máximos. Entonces esta es su nueva gran Gran Bretaña. También lo va a mostrar en este fab extendido. Esto es fab extendido y se va a mostrar en esta etiqueta y más icono. Entonces va a experimentar algo así. Por lo que va a flotar encima de todo en Cardiff. Estás navegando por el proyecto de comercio e comercio R E app. Se va a mostrar algo así. También puedes ampliarlo por aquí. Si recuerdas los márgenes en ambos lados
, son 16 dp así que no. Por lo tanto, ten eso en cuenta. Aquí tenemos que no puedes usar dos líneas. Necesitas dedo del pie, haz algo así. No uses mucho texto grande en este tipo de botón de acción flotante de Gran Bretaña o fabs. De acuerdo, entonces esto se trata de botón de acción flotante. Han añadido unas instrucciones más y unas emisiones. De verdad los amo. De acuerdo, ahora hablemos de la densidad de la que estaban hablando. ¿ Qué es un tuk denso? Por lo que se puede ver la densidad predeterminada es de esa manera están soportando grandes
objetivos de tap de inicio y márgenes. Por lo que es más fácil para el usuario tocar. OK, pero en la alta densidad, vamos a usar cosas más pequeñas si mejora su experiencia. Por lo que significa que hay blancos de tap más pequeños en esto. Estas pantallas de alta densidad. De acuerdo, ¿y qué? Tengo industria. Entonces aquí hay un ejemplo muy sencillo. Puedes ver esto está en lista fuera de los artículos y necesitas revisarlos por lo que su valor mínimo predeterminado es de 48 DP para cualquier objetivo táctil o cualquier cosa con la que necesites interactuar. No, pero en tu pantalla de alta densidad, puedes reducir el tamaño de 30 puntera. Por lo que significa que se puede ver este es mi cursor de ratón, y puedo fácilmente tocarlo o hacer clic en él usando mi boca. Pero para un dedo
, debería ser algo así. De igual manera, esto es thes. Nuestro texto significa 44 56. Este es su estándar y se puede ver por aquí. Aquí están los botones de acción. Thes están en la parte inferior, como hecho o tal vez ver archivo o algo así Puedes ver u escuchar el toque. Target tap target es básicamente 52. Esta es la zona definida para estos dos 36 aquí tenemos 24. Entonces así es como puedes usar y aplicar que pocas cosas que necesitas del dedo del pie Ah, ancho es si algo está enfocado tarea como algún f o algo. El porción off app te está pidiendo algo de entrada. No vas a usar alta densidad. Aplicar tiene la alta densidad. Siempre vas a usar baja densidad. OK, entonces esto es una cosa. Entonces hay otro ejemplo aquí se puede ver esta es una pantalla de alta densidad y están usando márgenes muy amplios. De acuerdo, Así que piel cruda más pequeña y los márgenes son muy vicios por lo que puede tener más espacio porque tenemos tamaño de pantalla
más grande No, en un tamaño de pantalla más pequeño, tal vez una tableta o tabletas más pequeñas. puede ver que están usando márgenes estrechos más pequeños y la altura fuera de todo verdadero es un poco más grande. Entonces esto es en realidad que son acomodadores para el espacio y, ah, la resolución. Ahora estos Se trata de especificaciones de objetivo táctil. Estos son los mismos. 36 es la altura de la carga mínima, pero es un objetivo de tap va a ser 48. De igual manera, un icono es 24 pero un agonista de paso 48 dp. De igual manera, para estos iconos más grandes del sistema de iconos, el 48 es el tamaño del grifo. Este es el tamaño mínimo. De acuerdo, entonces otra vez, estos son hombres. Hay muchos ejemplos para todos estos artículos relacionados con la densidad. Altura de línea. También puedes cambiar la altura de la línea para densidades tipografías como puedes ver aquí tenemos ah, pantalla
más grande o pantalla de alta densidad donde podemos acortar nuestra línea alta para que puedas ver u escuchar. Esto está sentado a la altura de línea fuera de 20 línea base 20 Sé una señal y aquí puedes ver que
tenemos 30 dedo del pie, por lo que estas dos líneas son dos separadas una de la otra. Entonces aquí tenemos pantalla de baja densidad y aquí tenemos alta densidad pidiéndole que pueden ver que están basados Signo es el mismo para la línea Pickard. Entonces todo eso se trata de estas tres cosas nuevas que tienen, están ofreciendo. Espero que hayan disfrutado de esta lección. Voy a explicar algunos ítems más en las próximas dos lecciones, así que pasemos a la siguiente lección.
41. Nuevas opciones para diseñar: algunas cosas emocionantes que me gustaría discutir aquí sobre material diseñado para apuntar o nueva versión, que es que están soportando algunos elementos de diseño más como esquinas curvas y bordes y esquinas redondeadas. Por lo que puedes ver aquí tenemos este ejemplo en su página web shine app. Si no has visto Google Material Design Conference, creo que esto es solo lo que necesitas saber. OK, así se puede ver por aquí hay una superficie ribeteada por aquí y este contenedor o aquí
tiene algún borde en el lado izquierdo porque su santuario es el me fui fuera el brillo es este diamante? Por lo que están usando a esta chica para mostrar alguna forma de diamante. De acuerdo, así sucesivamente también ahí, se
puede ver lo que se agrega al carrito Icon on. Aquí hay un filo. De acuerdo, entonces esto es muy diferente. Están apoyando todas estas cosas nuevas. Si miras este, lo puedes ver aquí en la Esta es la misma app y está en un tamaño de tablet. Y aquí están mostrando que cómo puedes mostrar tu o transformar todo tu material diseñado en equipo en nuevo nivel entero en diferentes líneas de cuadrícula y diferentes dispositivos móviles
y tabletas de escritorio . Y ah, puedes ver aquí tienen el botón Spartan add to cart. puede ver que realmente se ve bonito. Las sombras también son muy ligeras y ellas no se ven como sombras duras del diseño de material 1.0 y también el uso fuera de este tipo de texto personalizado de cuatro estilos. Esto está haciendo que mirar este sitio web realmente cool. De acuerdo, para que puedas ver el texto que están usando es Rubik light estos Esta es su escala tipográfica . 34 24 2014 16 14 14 12 14 96 es su titular más grande. Entonces esto es realmente bueno diseñadores de Brie y nuestros desarrolladores, ambos
tienen algunas opciones para, ya
sabes, usó su creatividad en más formas que tener ah, street edge o aquí. Entonces hay otro ejemplo Este, este es pantalla Y si lo miras, esto también es tener algunas esquinas redondeadas que puedes ver u oír. Ah, aquí. Entonces esto es realmente genial. A mí me gusta. Tenemos más opciones con las que trabajar. Tenemos más áreas son más se puede ver por aquí. Esta es su pestaña Tab AB son puedes ver que es totalmente diferente a lo que diseñamos por aquí. Entonces somos muy libres de, ya
sabes, diseñar algo así. Por lo que se ve realmente genial en no se ve totalmente el diseño de material. Se busca que tengan algunos dados algunos se puede decir espacio con el que trabajar. Por lo que han dado algunas opciones más a los diseñadores para explorar su creatividad. Entonces realmente me encanta esto. Estas nuevas opciones puedes ver por aquí en la parte inferior de nuestros autos. Estos están teniendo algunas esquinas redondeadas. Se ven realmente bonitos. Realmente genial. Así que ten eso en cuenta Si estás diseñando algo, ahora
estás abierto a diseñar pocas cosas como esa. Si eres diseñadores son tus desarrolladores Lo siento. Si eres desarrolladores, di que no podemos diseñar esto. Esto no es posible en el diseño de materiales que pueda mostrarles estos ejemplos en pautas de
diseño de materiales . De acuerdo, así que todo se trata de este nuevo algo de apertura en las opciones de diseño para diseñadores e incluso desarrolladores. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección.
42. Cuadrícula de espacio en el material 2.0: como ya he mencionado antes en mi lección que su método de espaciado y su guía de línea base y cómo vas a usar colchones de línea clave en tu diseño maduro. Esta es básicamente la base principal fuera de entender el diseño de materiales y cómo se puede utilizar. Ahora puedes ver por aquí todo está alineado con ADP. Lo estoy pasando rápidamente porque ya lo he discutido. Cuatro D B grado Para texto, se pueden ver las cajas pequeñas. Cuatro db Este más grande 12 cajas es ADP. Entonces, Eddie, sé relleno de margen superior en la parte inferior 12 de profundidad Comer. Esto es para la navegación del parto. Por aquí podrás ver tu parte de la línea de navegación antes del cred DP. Y si miras por aquí en el botón Abbott y Acción Flotante alineado dedo del pie grado ADP . Por lo que para el lenguaje basado en DP para texto se puede ver u escuchar aquí tenemos a Kevin y buenos días. Se puede ver que se están alineando con esto. Estas líneas pequeñas o líneas rojas de pelo, son básicamente cada línea es de cuatro dp aparte o cuatro salsas separadas entre sí. Entonces aquí tenemos de nuevo cuatro db aunque estés usando cuatro d B o un D. P. Son múltiplos uno del otro por lo que todo se va a alinear. Si forraste con un profundo, también
se va a alinear con cuatro DP Así que aquí puedes ver en. Entonces tenemos esta lista y 48 dp para un solo artículo y se puede ver en la parte superior Han dejado tres líneas, por lo que significa 12 dp off top relleno o margen. Por lo tanto, ten eso en cuenta. Están usando 12 dp mucho tiempo fuera como su margen se puede ver por aquí. Entonces esto es que esto tiene sentido. Vas a conectar todos los artículos entre sí. Entonces esto es lo mismo. El título para todos estos se va dedo del pie tienen 72 dp off margen desde la izquierda. Entonces todo esto es lo mismo. Puedes seguir adelante y puedes mirar todos estos. De acuerdo, así que ahora puedes ver que tienen esto. Ah, hay bloque tamaño 64 para esto es para otras pantallas pero termina y todas estas. De acuerdo, para que puedas revisar este método de espaciado. Te he mostrado la base fuera del método de espaciado. Esto es lo mismo. Pero pensé que debería explicarlo de nuevo porque han cambiado su
guía de diseño de materiales . Y mira, tal vez podrías confundirte que lo que está pasando por aquí? Ahora puedes ver aquí tenemos este objetivo táctil. Ya tengo asco, Así que espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
43. Botones y estados: Está bien. Ahora, en esta lección, voy a explicar más nuestra revisada ustedes sobre la de Gran Bretaña. Hay algunos tipos diferentes de pero y esto es texto simple, pero Y esto está delineado, pero y esto es contenedor, pero Y este es otro botón, que es botón de toggle. Por lo que se trata de cuatro tipos diferentes de armas. De acuerdo, entonces hay una cosa más que está relacionada con este botón. Este botón muestra énfasis mawr. Es más fuerte. Tiene contenedor más pesado. Esto tiene menos énfasis. Entonces tus ojos se sienten más atraídos por este que éste que éste. Entonces una cosa más. Todo el texto es mayúscula. Este es otro. Creo que no lo usaste en mi diseño, pero creo que deberías usarlo así pero no tenía todas las gorras. Y así es como. De acuerdo, Entonces este énfasis es básicamente del concepto de diseño visual que las cosas que necesitan más atención, deben tener algo visual más vívido. Espera, Así que están usando esto muy apropiadamente. De acuerdo, para que puedas ver estos son sus principios de diseño. Si no sabes cuáles son identificables encontrables claro. Así que asegúrate de que tus botones estén claros, son fácilmente encontrables El usuario puede verlos fácilmente. Este es un cuatro bailes y significantes si recuerdas mi lección de experiencia de usuario diseñada para principiantes identificables. Y pueden ser fácilmente un separado de otros elementos que esto es una carga. De acuerdo, así que estas son algunas cosas que quería mostrarte antes de mover el dedo del pie, ya
sabes, unas próximas lecciones más, y luego tenemos esta jerarquía en colocación otra vez. Han mostrado medios de comunicación de alto énfasis. Memphis es de bajo énfasis. Entonces si estás usando un color muy afilado, es significa alto énfasis. De acuerdo, así que aquí se puede ver estos son algunos artículos por aquí, y ah, este botón va a ser más teniendo más énfasis porque está resaltado y también elevado y de mayor tamaño. Entonces eso es lo que están mostrando aquí contenida. Pero y esto también tiene alto énfasis. Esto tiene el mayor énfasis que éste y luego éste. De acuerdo, entonces esta cosa del énfasis, creo que me olvidé de contarte de éste, y creo que lo han mostrado en su material diseñado para apuntar o guiar, listo, en serio, y Ahora se puede ver por aquí. Es así como se están utilizando estos botones ahí, mostrando que debes usarlos así o no. De acuerdo, Así que no uses demasiado texto grande para este tipo de padres como la mesa de Ezard en este café. Y además, creo que esto no está capitalizado. Por lo que te están dando la precaución de que aunque no es un otro muy grande, pero no debes hacerlo. Espero que hayan disfrutado de estas lecciones. Estos son algunos estados diferentes que fueron enfocados en el seno. Esto va dedo del pie. Haz algo de animación. Esto está deshabilitado. Creo que el uso deshabilitado al usar la opacidad al 50%. De acuerdo, entonces, uh, eso es todo. Creo que necesitas conocer estos estados, y necesitas saber cuál es el énfasis de estos botones y cómo usarlos. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
44. Lista de artículos en el material 2.0: Ahora hablemos de material diseñado para apuntar o listas. Se puede ver aquí está el equipo de material de la grúa. Y tienen estas listas, estas imágenes y estos lugares y son propiedades disponibles. De acuerdo, entonces, igual manera, tienen especificaciones de combustible. Por aquí, hay tres tipos fuera de listas de online, y luego tenemos dos líneas por aquí. Se puede ver doble línea, y luego tenemos tres línea. De acuerdo, Entonces si quieres ver las especificaciones fuera de cada uno de ellos, puedes hacer click aquí y el acariciamiento en ambos lados es de 16 para estos. De acuerdo, 16 para este ítem de lista. Ocultemos las caricias. Ahora tenemos Dimension off. 88 por dos líneas. Son 72 dp's y forzando una línea. Creo que es 56. Déjame ver. Está bien. Sí. Forzar la línea. Es 56. De acuerdo, Entonces si quieres ver alguna de las especificaciones, puedes dar click aquí y déjame mostrarte el ejemplo de dos líneas. Y aquí tenemos el 64. Se trata de otros 1 64 con dos líneas. Creo que están usando esto. Y Gmail, supongo. Leyendo su 2016 en ambos lados. 28. Creo que esto es cuestión de pelo extra. Por ejemplo, hace
dos minutos o algo así. Por lo que están usando este bloque. Estamos aquí. Después tenemos 28 de las líneas de base superiores de 28 DP's. Se va a sentar en la línea 28 dp por aquí. Está bien. Y para este texto
, van a ser 20 en DP Blow este. Entonces básicamente la altura de la línea está tratando de dp por aquí entre estos dos impuestos por aquí. De acuerdo, entonces todo eso se trata de esto. Se puede ver el tamaño de la imagen por aquí. Se trata de 40 DPS, que he utilizado en mi curso. Y si quieres incluir algún ícono por aquí, puedes ver si lo escondo. Ahí hay un ícono, pequeño icono de Bluetooth. Es utilizado por 24 por 24 dp y 32 dp es la distancia entre el icono pequeño y las líneas. Y si tienes más grande, me fui. El recorrido es de 16. Entonces, por ejemplo, quizá alguna imagen marital para la persona que te ha enviado por correo electrónico. Por lo que puedes usar estos para formar un cuadrado o círculo, o puedes usar imagen fuera 100 por 50 60 Pieza por aquí. Ok, entonces estas son las nuevas especificaciones que buscan crear. Y realmente me encanta cómo han implementado este concepto basal en él. Aquí tenemos el ADP y ADP margen inferior superior o petting Puedes ver para los ítems de la lista. De acuerdo, entonces creo que eso es todo. De acuerdo, entonces esto es por el colapso. Un elemento de lista expandida. Entonces si tenemos algo así, tienen 48 dp. El 24 más pequeño es el ícono gastado, y esto es lo mismo para todo. 72 dp Donde el texto va dedo de una línea o aquí en el lado izquierdo. Por lo que 72 dp de la izquierda es nuestra primera una línea vertical donde el texto se va aliando dedo del pie. De acuerdo, entonces eso es todo sobre listas. Por lo que espero que tengan, como, esta Guía de diseño de Material 2.0, para las listas. La mayoría de las especificaciones. 90% de lo mismo. Creo que quizá más del 90% yo si supongo que creo que es 95%. De acuerdo, si tienes alguna pregunta que hacerme, pasemos a la siguiente lección
45. TabBar inferior y superior: De acuerdo, Así que estaba navegando por este diseño de material dos puntos o pautas, y he visto algo nuevo, que es un fondo de barra. Por lo que esta es una nueva tendencia. Básicamente, se basa en el diseño de la experiencia del usuario, y es tal que cualquier cosa que facilite la acción debe estar más cerca del dedo del pie hacia donde
ibas , presionar el
dedo del pie o tocar la pantalla. Por lo que en su mayoría usuarios, van a usar el término. Y este tipo de navegación va a facilitar venir uso más fácilmente. El usuario puede tocar en esta barra de búsqueda también este ícono de hamburguesa y también esta acción flotante, pero en un fab y también este muchos. Pero Ok, entonces este es otro nuevo patrón. qué fechado es que en realidad implementaron el mismo en la parte inferior. De acuerdo, así que una cosa más es que también puedes hacer algo como esto por aquí. Es flexible. De acuerdo, entonces aquí tienen algunos fuera de las pautas que no sólo lo usan para una acción o aquí tratan adictar
a Lee almacenar tres acciones. Por lo que abajo todo el mundo va a proporcionar tres acciones como la barra de menús y esta tal barra. Esto más puedo Todo bien. Estos dos fuera de ellos. De acuerdo, entonces eso es algo nuevo, que creo que eso entró en este. Y se puede ver por aquí. Esto es esto son unos pocos más mecenas estaban centrados en el cabello Fab Britain. Entonces tienen esto y fab en el botón de acción flotante de un lado está a la derecha y son las otras acciones están en la parte inferior así. Entonces este es nuevo patrón. Si quieres ver más sobre lo que puedes aprender al respecto y lo que puedes ver, este es otro patrón. Realmente me encanta este insecto fab. Entonces hay muchas cosas nuevas que vienen para los diseñadores en este material diseñado para
apuntar y se puede ver a ver cuál es la interacción y cómo se ven. Entonces veamos de esta manera, así que realmente me guste. De acuerdo, así que de vuelta. Y luego otra vez mostrando la introducción para que puedas ver ahora esta bandeja de entrada está usando pocas acciones. Cuando alguien presiona el correo electrónico, este botón justo o este botón de acción flotante,
cambia el botón de respuesta del dedo del pie y pocas acciones más. De verdad me encanta este nuevo. Interacción y comportamiento. De verdad me encanta esto. De acuerdo, entonces puedes usar este tipo de cosas en tu nuevo APS usando material diseñado para apuntar. Y volvamos a nuestros viejos en bares que estaban en la cima. Para que veas ya sabes que como van a estar ahí, van a ser consistentes. Estos principios diseñados por el aire que necesitas dedo del pie seguir. Estos son de tipo regular, Deb. Y luego tenemos estas barras de acción extra contractuales que tienen. Al igual, si abres una foto o algo así reflejaba algo que te va a mostrar cruz y diferentes acciones después. Dedo del pie ese artículo de allá. Está bien. Está bien. Entonces veamos qué tenemos también aquí. Estos son pocos los de navegación. Título de Icahn sobre menú de desbordamiento a la derecha. Este 5to 1 creo que ya lo hemos discutido. Entonces otra vez, si quieres ir a las especificaciones, te vas a ir No mucho. Mucho, Mucho al final. Y te vas del dedo del pie Ver todas estas especificaciones. De acuerdo, entonces si le das click, puedes ver estas otras especificaciones. Las imágenes siguen aprendiendo, así que volvamos. De acuerdo, así que aquí tenemos. De acuerdo, Entonces si le damos click. Puedes ver estas son de nuevo las especificaciones 32 de este icono 24 ojos altura icono eso 24 DPS es el icono icono 24 24 24 24 Así que puedes ver los huecos entre ellos es de 24 dp y ah, tenemos 16 dp margen en ambos lados para estos iconos 16 dp superior e inferior ropa de cama y 20 dp es la línea desde abajo donde se van a sentar y donde tu texto se va a sentar basal Así que si escondo esto, puedes ver esto es la línea de base de verano y también puedes usar estos texto y ¿cuál es
el tamaño de las pilas? Puedes ir desde aquí y ver cuáles son las especificaciones. 20 dp Blanco. Esto está en color del texto. Si recuerdas con precisión, entonces esto se extiende Tobar y no estoy seguro de por qué no han mostrado las pestañas. A lo mejor las pestañas están en camino sección en otra sección. Por lo que espero que hayan disfrutado de esta barra de aire superior Una nueva interacción y comportamiento inferior. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección
46. Tablas de materiales 2.0: ¿ De acuerdo? No. Voy a revisar un poco sobre dabs usando la nueva directriz de diseño de materiales dos puntos. De acuerdo, entonces aquí tenemos las pestañas. Y si haces click en el lado izquierdo, puedes ver que hay uso, no yo. Colocación de comportamiento , abs
fijos , pestañas
creíbles, sus estados llenos de especificaciones e implementación para desarrolladores. De acuerdo, Entonces primero necesitas saber que ¿cuál es el comportamiento? Entonces si haces click en él, puedes ver que hay que se están moviendo hacia la izquierda y hacia la derecha. Por lo que el movimiento también se ve en estas conductas. Y realmente me encanta todo esto. Ellos han estado moviendo esto y puedes ver por aquí también puedes moverlos con swipe así. Entonces esto es creo que me perdí en Ah, mis otras lecciones. Esa como se van a comportar. Entonces me encanta cómo han arreglado todo como comportamiento fuera de estos todos estos elementos de
interacción y no yo. Volvamos a las especificaciones. Y creo que le va a llevar algún tiempo a Lord, creo que ya lo hemos discutido cuando lo diseñamos. Entonces esto es muy básico. 48 40 año, 72 24 Tamaño de icono 20. En su mayoría sus tamaños son los mismos 12 12 en la parte inferior y superior. Por lo que si quieres mirar las especificaciones, puedes ir por aquí. Las especificaciones son casi las mismas que las anteriores. En cambio, creo que sólo hay una actualización. No estoy seguro al respecto, pero creo que este 52 no era 52 antes. Waas quizá 56? Supongo. Entonces. Han cambiado esto a 52 en lugar de 56 de izquierda. No estoy seguro al respecto, pero tú puedes. Creo que no hay forma de volver a revisar. A lo mejor puedes ver mi lección más grande que cheque. Están bien. Entonces todo eso se trata de estos. Ah, está bien, así que no hay mucho cambio. Todo. Ojos casi lo similar. Estos son los principios de diseño escalables, informativos Pierce Pierce significan que van dedo del pie actuar como aparece. Tienen, como dos o tres pestañas en lugar de solo una. Por lo que van a trabajar en combinación con otras pestañas. Informativo. Se van dedo del pie mostrar categorías de información. Básicamente, se utiliza para diferentes categorías que se van a quedar en la cima. Escalable significa que podemos tener fijos y de desplazamiento capaces ambos. Ambos se apartan de estos pasos. De acuerdo, entonces si tienes alguna pregunta que hacerme y pasemos a la siguiente lección.
47. Tarjeta de material 2.0: ahora en esto. Escucha, vamos a discutir un poco más sobre tarjetas usando material diseñado para apuntar o nuevas pautas. Y son casi lo mismo. Pero las pocas cosas como no yo, han introducido como no he discutido esta que hay una imagen Avital. Este número uno, este es todo el contenedor. Esto se llama el contenedor fuera de esta tarjeta. Entonces tenemos el contenido dentro de él que en el contenido que tenemos cada vez. Su título texto secundario. Este es un medio, cualquier imagen o tal vez video. Entonces tenemos este texto de apoyo en la parte inferior por aquí de lo que tenemos acción. Pero entonces tenemos algunas acciones de icono de apoyo o escuchar iconos opcionales para las direcciones. Entonces así es como es. Se va a seguir. Este es otro que puedes ver aquí Tenemos medios ricos, La parte superior titulada En segundo lugar, título textos y acciones de apoyo. Entonces esto es un arte Me Aquí podemos ver. También puedes usar algunos fuera de los divisores. De acuerdo, entonces esta es de nuevo la tarjeta, pero está dividida en dos cosas como esta es el bloque de información. Y aquí tenemos las opciones de disponibilidad que puedes seleccionar. Y luego puedes dar click en reserva para reservar este caffee o lo que quieras. Reserva. De acuerdo, así que veamos la interacción. Ups. OK, así que colapsa y expande. Estos autos también pueden colapsar y expandirse. De acuerdo, entonces puedes ver que este es su comportamiento realmente agradable? Animación realmente Cool, transiciones
simples. Veamos más de ellos. Sí. Entonces aquí lo tenemos. Contratando y expandiendo tan pequeño, guardia, solo para mostrar parte de la información. Si eres industrial, puedes abrir todo el contacto así. Entonces, uh, vamos al pie de la iconografía. ¿ Y dónde están las especificaciones? Voy a volver a especificaciones. Por lo que aquí tenemos algunas de las especificaciones. Esta pequeña imagen 80 dp's 3 44 es el tamaño máximo y por qué es porque están viviendo algunos fuera de los márgenes en ambos lados. Por lo que 3 60 dp es de tamaño real y 16 comieron y se comieron su vida en ambos lados. De acuerdo, estos son botones de acción. 16 db por aquí. Entonces básicamente, el air dp es una distancia de aquí para el área capaz y 16 dp es la línea para alinear todos estos, um este texto y todas las diferentes acciones dentro. De acuerdo, entonces 16 dp es el margen en todos los lados. Detente a la derecha, izquierda. Y creo que en la parte inferior también es un 16. Pero el margen real para el área capaz es de ocho. Luchar contra el 1 48 de dp es la altura de la pequeña guardia. Se puede muy esa altura. Eso no lo hace No hay un tema muy grande. Entonces vas a asegurarte de usar esta altura que creo que no la he usado. Estoy usando un poco más. Yo soy o tal vez menos. Yo no lo soy. No recuerdo ahora mismo. De todos modos, así que aquí tenemos este 1 94 db para este, cuanto más grande es
el mayor, mayor tamaño de esta tarjeta. Y aquí tenemos segundo texto y las distancias entre ellos donde están sentados en el texto de línea base 24 30 a 26 entonces 24 es la brecha entre esta separada en línea y texto apoyo dext. Entonces tenemos de nuevo el 36 bloque 36 db off block base Por aquí Entonces tenemos 32 debates por estos ítems que son aplicables. ADP es la distancia entre ellos ADP en el lado izquierdo para este botón de acción porque está alineado por aquí con esto todo este texto. Y en realidad es de un 16 dp. Entonces, acción, ese texto va a estar a 16 dp de aquí. Por lo que estos son todos tipos diferentes fuera de los autos. Se puede ver que estos se llaman tarjetas de esquema y estas son cartas elevadas. De acuerdo, entonces creo que usamos algo como esto. Nuestro guardia de avión en nuestros diseños, no
usamos sombras, por lo que podemos usar algo así sobre titular de línea y algo de este tipo de presencia. Entonces creo que un patrón que no estamos usando en nuestros autos es que estoy usando ah, botón
regular por aquí en la tarjeta. No estoy seguro de si es posible o no en sus especificaciones actuales. Creo que es posible lo he visto en la sección de cargas. Por lo que aquí tenemos botón de botón. Hemos usado un botón por aquí del lado derecho en lugar del lado izquierdo. Creo que están usando a la izquierda, y lo estábamos usando a la derecha. De acuerdo, así que de todos modos, estas son las especificaciones. Asegúrate de que utilizabas 16 puntos son 16 DPS básicamente el margen de DP en todos los lados. Entonces estamos usando, Um, una cosa más. Esta es la tarjeta. Un ancho máximo de tarjeta es de 3 44 Esto es lo que necesitas. Dedo del pie. Cuídate. OK, entonces estos son dos lineamientos de mayores. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta sobre este diseño de tarjetas y todas esas cosas que puedes preguntarme o
puedes adentrarte en estas pautas de diseño maduras. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
48. Tipar nuevos Looks 2.0: Ahora revisemos el nuevo sistema fuera del sistema tipo de diseño de materiales. No hay llamada a un sistema tipo, escala y tipo, y es casi lo mismo. Pero creo que han actualizado su diseño. Y ahí se pueden ver las explicaciones. Ahora son más precisas. Se puede ver que este es el caso. Sentencia de sentencia. Puedes usarlos en la oración, pero en el botón, puedes ver si vas a este botón. Por aquí. Roberto. Mediano 14 talla 14 sp. Todas las brechas y 140.75 ¿Está colocando Allegis? Entonces esto es lo que están usando. De acuerdo, entonces tenemos en el subtítulo 12.4 overline. También es sentencia. Puedes usar una frase larga en subtítulos, pero en botones necesitas guardar tus peores o dos o tres. O quizá cuatro. Máx. Supongo que sí. Estos esta es su nueva escala. Puedes comprobarlo. El 96 es el tamaño más grande. Además, si quieres ir con algún teléfono personalizado, puedes ir con eso. Han mostrado algunos ejemplos por aquí. Déjenme mostrar. Estos son algunos telefono personalizado 60 regular 60. Después han eclosionado tres, que es un guión formal Patriota para regular 48. Y hay pocos ejemplos más. Al igual que puedes ver Roberto Condensado regular 20. Y esto se subtitula Verrill alrededor de otoño Affort. Este es otro de Google Force, y Ah, OK, así es como son. Han mostrado muchos ejemplos diferentes fuera de cómo puedes usarlos. Como puedes ver, tú grande mediano,
14 gorras, 14 gorras, todas las gorras luciendo realmente agraciado en esta, uh, app lo haría aquí. Y ah, creo que eso es todo. Si tienes algún problema o necesitas calcular cosas puedes ver también han mostrado algunas de las conversiones en su seguimiento. De acuerdo, entonces para el seguimiento de tamaño y píxeles de sketch divide por OK, así que en realidad, han mostrado por aquí un archivo de boceto. Déjame mostrarte material diseñado,
tipo, tipo, escala y boceto. Esto se puede descargar y se puede abrir en adobe axity fácilmente. Y ahí verás todas las diferentes cuatro tallas y todo. Entonces vamos a descargar este y en realidad abrirlo para tener más sentido abierto. Y voy a navegar a mi escritorio y abrir éste. De acuerdo, así que esto se ha abierto 14 desaparecidos. De todos modos, no
necesitamos preocuparnos por el fuerte. De acuerdo, entonces aquí tenemos todos los diferentes tamaños. ¿ De acuerdo? Y reportar sobre 96 luz. Por lo que tan pronto como están encabezados se están haciendo más grandes, puede decir que están usando el teléfono ligero ligero, una vez que se dirigen es de tamaño regular. Ahí está utilizando rubro regular reportado 34 regular. Y cuando son un poco, ya
sabes, en las líneas más pequeñas de escala más pequeña, están usando medio o ayudan a que tome para bien. Además, se
puede ver que el espaciado es un poco diferente. Está más espaciado en la carga, por lo que es más fácil de leer en tamaños más pequeños. Eso es todo lo que creo que están usando. Básicamente, seleccióname. Acercar. Por lo que esta es su escala de tipo. De verdad me encanta. Onda. Es más fácil para mí, ya
sabes, abrirlo en Adobe Eckstine. Ah, así que no te preocupes. Si algo está en boceto nuestro archivo de boceto, puedes abrirlo fácilmente con adobe X t Espero que hayas disfrutado de esta nueva escala de tipo, material diseñado tipo escala. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.