Diseño de UI/UX, patrones de diseño de la interfaz de los usuarios: imparte un instructor de UI

1. 1 clase agregada de patrones de diseño: Bienvenido al curso de patrones de diseño de interfaz de usuario. Mi nombre es Erin Lawrence y soy diseñadora Principal de UX y fundadora de una agencia UX llamada UX honey en San Francisco, California. También soy instructor de UX donde imparto diseño avanzado de UX en la Academia de Arte Universidad, también aquí en San Francisco. Este curso es una guía muy práctica para entender la experiencia del usuario y patrones de diseño de la interfaz de usuario. Los patrones de diseño son un conjunto de directrices y reglas de la interfaz de usuario que se refieren a cómo los usuarios utilizan los productos y los elementos de la interfaz de usuario. Una comprensión de estos patrones es una necesidad para cualquier diseñador de UX o UI. Estas son cosas como campos de formulario y desplegables y barras de navegación y casillas de verificación y botones de radio y tabuladores y selladores de fecha, etc. Si estás planeando hacer diseño de experiencia de usuario o diseño de interfaz de usuario. Y no tienes una comprensión firme de estos patrones de diseño. Eso es como ser un panadero de pasteles y no saber nada de los ingredientes de la torta. Porque esencialmente son los ingredientes los que componen un pastel. Y lo mismo ocurre con el diseño de la interfaz de usuario. diseño de la experiencia del usuario, o el diseño de UX, tiene mucho que ver con la comprensión de las necesidades del usuario y qué contenido necesita para lograr su objetivo. Y este contenido es lo que hace que la interfaz. En otras palabras, una interfaz de usuario es sólo bienes raíces para el contenido. Y entender cuál es la mejor inmobiliaria para usar para contenidos específicos tiene mucho que ver con los patrones de diseño y los componentes de la interfaz de usuario. De eso se trata esta clase. Cada video dentro de la clase, haremos una inmersión profunda y cubriremos un siguiente tema o componente de experiencia de usuario. Vamos a empezar con cosas como campos de formulario, botones, desplegables, selladores de fecha, botones de radio, casillas de verificación, alterna, formularios de dirección, Foros de búsqueda, barras de pestañas, barras de título, acordeones, pestañas, información sobre herramientas, sombras, miniaturas, carruseles, modales, lightbox como menús y cajones, magos, pan rallado, paginación, iconos, fotos, y todos estos temas tendrán explicaciones, ejemplos del mundo real, mejores prácticas sobre cómo usarlas, ¿por qué las usas? Y mi favorito vamos a tener ejemplos de hacer y no no hay también. He incluido todo el material fuente dentro de la clase que puedes descargar y puedes guardar para siempre. Y también puedes descargar el archivo Figma que utilicé para esta clase para que puedas tenerlo dentro tu aplicación Figma, también para siempre. Y también como bono, vamos a tomar todos esos patrones de diseño. Y he agregado un área extra a la clase. Bueno, eso es más basado en proyectos, donde vamos a usar la herramienta de diseño figma. Y construiremos todos estos componentes para ver cómo se ven y cómo usarlos en prototipos en vivo. Cosas como botones de radio personalizados donde el estado de flotación y el estado de selección aquí. Haremos menús que se deslizan adentro, deslízate hacia fuera. Haremos modales, acordeones que utilizan técnicas de animación inteligente dentro de Figma. Haremos validación en línea y aprenderemos todo sobre validación en línea en la clase. Y luego lo aplicaremos a un prototipo para permitir que alguien vea los requisitos de contraseña, validar ya que ingresan una contraseña que tenga los requisitos correctos y presione Crear. Haremos hilanderos animados aquí para imitar la carga de la creación de cuenta, haremos desplegables que imiten el desplazamiento de un desplegable real y el estado de selección. Y luego iremos a aprender a hacer esto en dispositivos móviles también. Más. Y lo que es genial es que también he construido un archivo completo de Figma donde la fila superior de cada una de las secciones aquí ha sido diseñada lista para ir prototipo que puedes usar un ejemplo pick apart. Y luego durante los videos pasaremos por cada uno de estos y lo haremos juntos para todos estos diferentes tipos de patrones de diseño. Y también haremos lo mismo por todos los patrones móviles también. Por lo que no sólo estás obteniendo las mejores prácticas y lo haces y no. También te vas a ensuciar las manos y aprender a hacerlo dentro de la herramienta de diseño figma. Esta clase es genial para que cualquiera que estudie se convierta en diseñador de UX o diseñador de UI. O si ya estás en el campo y quieres repasar estos patrones. Muy bien, esa es la intro. Me llamo Erin Lawrence y espero que disfruten de la clase. 2. Estructura de clases: Antes de empezar a la clase, quería hacer un video rápido sobre la estructura de cada video y lo que vamos a cubrir. Cada video va a pasar y profundizar profundamente en un componente de interfaz de usuario y los patrones de diseño existentes que se asocian a ese componente. Cada uno, voy, voy a dar una breve explicación de cuál es el componente, los orígenes del componente. Hablaremos de pros y contras. Hablaremos de casos de uso para ese componente. Mostraré cómo se construye, cómo son los diferentes estados del componente, cómo se ve. Vamos a ver ejemplos de la vida real. Te mostraré cómo combinar componentes existentes juntos. Haremos y no por el componente. Puedes decir lo mismo aquí para pestañas. Nuevamente, los orígenes, qué es una pestaña, ejemplos de mejores prácticas móviles y web. Y de nuevo, terminaremos en hacer y no para cada componente. Muy bien, nos vemos pronto. 3. Introducción a la clase: Muy bien, Bienvenido a la clase. Esto es solo una rápida introducción de lo que se puede esperar para la clase. Y también voy a hablar un poco sobre diseño de UI y los patrones de diseño y diseño de UX también. Pero acaba de empezar desde la cima. Sí, el diseño de interfaz de usuario es el proceso que usan los diseñadores para construir interfaces y sistemas operativos de software o dispositivos. Nuevamente, enfocándose en el contenido y la usabilidad y también en la jerarquía de contenidos. Y el diseño de UX es el estudio de entender las necesidades de tus usuarios y cómo usan una aplicación específica o experiencia de usuario. Hay mucha superposición entre los diseñadores de UX y UI. El diseñador de interfaz de usuario está traduciendo estas necesidades de usuario que provenían de sus pruebas de observación o su investigación en la jerarquía de contenido y contenido. Y este conjunto de información se utilizará se muestran dentro de la experiencia de usuario de una aplicación. Ser un buen diseñador de interfaces significa que tienes una sólida comprensión de qué jerarquía de contenido y contenido necesitas diseñar. Y lo más importante, qué tipos de componentes y patrones inmobiliarios de UI se comunicarán mejor y servirán a esta jerarquía de contenido y contenido. Aquí es donde entender los patrones de diseño es súper útil y de eso se trata esta clase. Los patrones de diseño son solo un conjunto de directrices y reglas de la interfaz de usuario que se refieren a cómo los usuarios usan los productos y elementos de la interfaz de usuario y comprensión de estos patrones de diseño. Es una visita obligada para que cualquiera lo haga en el diseño de UX o UI. Y estas son cosas como campos de formulario y desplegables y barras de navegación y tabuladores. Y me meteré todo en eso aquí en el siguiente segundo. Los patrones de diseño son extremadamente útiles, sobre todo porque nos ahorran tiempo y dinero y nos obtienen mejores resultados más rápido y más rápido. Y esta es una filosofía fundamental para el desarrollo ágil de aplicaciones. Y pide a los diseñadores que podamos aprovechar estos patrones y usarlos en nuestra toma de decisiones diarias de diseño. Porque estos patrones y estos componentes se utilizan todos los días a través de muchas experiencias de usuario. Y los usuarios no se han acostumbrado a cómo eran estos patrones. Por lo que esencialmente sabemos que funcionan y podemos aprovecharlos día a día. Este curso te va a dar una guía muy práctica para entender cuáles son estos patrones de diseño de interfaz de usuario, y cómo los diseñadores los usan, ¿qué reglas se les aplican? Mundo real, ejemplos de la vida real. Cada uno tendrá do do y don'ts para cada componente. Y de nuevo, dominar estos patrones y componentes te ayudará a convertirte en un mejor diseñador, pero también te convertirá en un mejor tomador de decisiones sobre qué bienes raíces de UI usar para el contenido y jerarquía de contenido en la que estás trabajando. Así que de nuevo, te va a hacer más rápido, te hará mejor. Y te ayudará a aplicar una buena lógica de decisión sobre por qué utilizaste un determinado diseño o patrón de diseño dentro de tu diseño. Vamos a cubrir un montón de cosas. Vamos a cubrir campos foráneos, botones, desplegables, recolectores de fecha, botones de radio, casillas de verificación y alterna. Abordar foros y buscar Formularios. Barras de pestañas tituladas barras, acordeones y pestañas , información sobre herramientas y sombras, miniaturas y carruseles, modales, cajas de luz, menús y cajones , magos, pan rallado, paginación, iconos y fotos, y cada una de esos ejemplos, nuevo, vamos a tener mejores prácticas de donde venían, cuándo usarlas, cuándo no usarlas. Y vamos a tener hacer y no es en esos también. Entonces al final, de nuevo, esta es toda una gran información. Si vamos a ir al siguiente nivel, si quieres, vamos a aprender a hacer que todos estos dentro de Figma y Figma como herramienta de diseño. Y voy a suministrar un expediente. Y ese archivo se ve algo así. Ya está preestablecido, prediseñado. Lo que vamos a hacer es que vamos a pasar y crear todos los diferentes componentes de los que hablamos y diseñar patrones de los que hablamos en la clase, como cosas como botones de radio personalizados o incluso justo lo que son los botones de radio. Vamos a crear modales, son menús como este y cerrarlo va a hacer modales. Y aprenda a, no sólo a aprender sobre estos patrones y cómo hacerlos y las mejores prácticas, sino que aprenderemos a hacerlos también hacia el final. Tenemos acordeones aquí. Se puede tipo de ver esa interacción, validación en línea para la creación de cuentas aquí, poniendo spinners dentro de un botón aquí para mostrar estados de carga. Y vamos a hacer desplegables y cómo hacer estos en Figma también. Incluso vamos a hacer todos estos para aplicaciones móviles también. Aprende a hacer esto en prototipos móviles también. Por lo que cubriremos las mejores prácticas web. Haremos esto también en móvil. Y aplicaremos todos estos patrones que vamos a aprender dentro de la herramienta de diseño figma, tener todos los archivos listos para funcionar. Entonces todo lo que necesitas hacer es descargar el archivo. Tengo el ejemplo preconstruido hacia fuera para que puedas separarlo. Durante la clase, lo que vamos a hacer es que lo vamos a ver y ver cómo funciona y luego vamos a construirlo juntos. Así que va a ser súper divertido, es atractivo. Y espero verte ahí y te veré en la próxima clase. Adiós. 4. Materiales para la clase: De acuerdo, solo quería hacer un breve video sobre el material de la clase mostrando tomar unos 30 segundos o un minuto aquí, tengo dos tipos diferentes de formatos. Tengo todo el material en formato PDF, que abriré aquí en un segundo y te mostraré. También tengo todo el material construido dentro de Figma, la herramienta de diseño. He incluido este archivo, es un punto, es clase Figma archivo dot zip. Basta con hacer doble clic en ese archivo. Y se va a abrir una carpeta. En esa carpeta tengo un archivo Figma dot config file, y también tengo instrucciones de clase sobre cómo abrir este archivo, pero me imaginé que voy a hacer un video por ti también. Solo lo que debe señalar, si abre el archivo Figma es no puede hacer doble clic en el archivo Figma y abrirlo. Recibirás este error aquí. Y estoy en un Mac aquí, solo cabezas arriba. Lo que tienes que hacer es que tengas que, tienes que arrastrar este archivoa arrastrar este archivo las secciones de borradores tu aplicación Figma aquí en la parte superior izquierda. Tu sección de borradores puede parecer un poco diferente a mía ya que tengo todos estos archivos aquí. Por lo que de nuevo, borradores secciones arriba a la izquierda. Vamos a agarrar este archivo Figma, arrástrelo. Verás este contorno azul alrededor de la herramienta Figma. Eso es genial. Eso significa que Figma va a abrir esto y vamos a hacer clic y arrastrarlo. Y este es un archivo grande. Puede tardar un segundo para que Figma abra eso. Si bien eso se abre, puedes tomar cualquiera de estos formatos aquí, material en formato PDF, y esto sigue junto con la clase. Entonces la primera clase que vamos a hacer campos de forma. Nuevamente, son un archivo grande, así que tengo que hacer es abrir en una aplicación de vista previa, acercar. Entonces solo puedes navegar desde aquí, ir desde el principio, y trabajar tu camino a través de la derecha de la clase y tener todo este material aquí. De nuevo, soy un gran fan. Deberías simplemente tener estas cosas para siempre, ya sea que lo tengas en formato PDF o en formato Figma. Vamos a ver a Figma. Está bien, genial. Por lo que sigue cargando el archivo. Y así de nuevo, como dije, es un archivo grande. Bien, genial. Se había cargado. Así que vamos a seguir adelante y abrirla muy rápido. El beneficio del archivo Figma aquí es que todos estos son componentes vivos, lo que significa que puedes entrar y agarrar estos elementos y usarlos para tus diseños. Como dije, vamos a hacer una clase al final donde vamos a construir todo esto. Pero estos son todos en vivo. Puedes acercar a Figma, digamos que quieres este selector de fecha aquí. Puedes entrar y agarrar este selector de fecha. Tengo todos los campos de formulario. Tengo un montón de botones aquí puedes agarrar y usar y formar campos por aquí son diferentes estilos en los que puedes entrar y usar y todos son componentes en vivo que puedes agarrar. No he tenido un montón de iconos por aquí que puedas agarrar dos. Así que de nuevo, si tú, respecto al material de clase, si quieres el archivo Figma o también quieres el formato PDF, realmente no importa. Ni siquiera necesitas esto. Los videos son geniales, cubren mucho buen contenido, pero como dije, soy creyente, debes tener este material para siempre y referirte a él siempre que lo necesites. Te veré más tarde. Adiós. 5. Campos de forma: Muy bien, bienvenidos a formar campos. Los factores de un campo de buena forma son sólo un par de cosas. Y luego nos adentraremos en diferentes estilos y estados comunes y nos sumergiremos profundamente en campos de forma y casos de uso para ellos, pero sobre todo son fáciles de leer. Tienen textos claros etiquetados y textos de forma. Son fáciles de hacer clic en un texto de entrada. Hacen buen uso de los textos fantasmas y hablaré mucho de los textos fantasmas, que es un atributo importante de un campo de formulario y tiene un estado definido como el error de desplazamiento activo deshabilitado. Me pondré en diferentes ejemplos de esos estados. Cuenta con bienes raíces para mensajes de error y tiene un claro mensaje de error de lo que erró y qué campo de formulario no error. Y es fácil entender qué campos de formulario se requieren, así como qué campos de formulario son opcionales. Vamos a entrar en algunos estilos llenos de forma. Hay cinco estilos más comunes de campos extranjeros que se ve a través de toda la web y las aplicaciones. Una cosa a mencionar también, es que los campos de formulario son súper importantes ahí. En realidad uno de los elementos de interfaz de usuario más importantes dentro experiencia del usuario y las aplicaciones que tenemos. Sólo porque extrae información de nuestros usuarios. Conocemos información sobre ellas. Ayuda a construir contenido. Es esa barrera entre nuestra aplicación, o es el embudo de comunicación entre nuestra aplicación y nuestro usuario. Si el usuario quiere decirle algo a tu aplicación, va a suceder en un campo de formulario. También es importante para nuestros servicios empresariales como si eres una empresa que vende producto del que necesitas gente para comprarte producto. Y cuando subproducto se están involucrando en un campo de formulario. Entonces, como diseñador de UX, es importante que tengamos un muy buen sentido de las reglas, las mejores prácticas y los patrones entre los campos de forma. Lo primero que tenemos aquí es un formulario esbozado rellenado. Esto es más común. Este es el estado predeterminado, lo que significa que este es el estado, pero eso no está flotando ni inputado todavía, solo el primer estado en el que el usuario vería un formulario de esquema. Es solo el rectángulo aquí, y le tiene un color gris delineado. Y luego tenemos aquí los textos etiquetados. Esto sería como nombre. Y luego tenemos los textos fantasmas. Esos textos fantasmas son en realidad un secreto. Es, es una oportunidad estratégica para que aprovechemos esto. Y hay tantas funciones y secretos diferentes en la industria de cómo elaborar estrategias de tus textos fantasmas para comunicar el formato que deseas para tu usuario. O diseñarla para mostrar a la comunidad el objetivo de comunicación que queremos para el usuario o para incitar a su usuario en esta información, ¿verdad? Entonces eso se llama los textos fantasma. Hablaré mucho de eso. Nuevamente, una buena forma rellenada tiene un mínimo de 50 píxeles de altura, y luego el ancho solo depende del contenido aquí. Este ejemplo de 350 píxeles de ancho, pero realmente depende del ancho de tu forma, del contexto y del contenido que se va a escribir dentro de este campo de formulario. Digamos que era un nombre o un correo electrónico. Vas a querer un campo de forma más largo. Si es un número de teléfono, entonces es posible que solo quieras uno corto como este. El segundo estado, es un formulario rellenado. Y esencialmente son los mismos contextos. Tenemos los textos fantasmas, tenemos la etiqueta, solo está llena en lugar del contorno, tenemos un color de campo aquí. Entonces tenemos un formulario de interfaz de usuario material. mismo tipo de principio aquí. Tiene un texto fantasma y una etiqueta. Es sólo en lugar de un contorno, está usando un rectángulo. Es usar solo una línea para indicar dónde está el formulario. Esta es la interfaz de usuario material fue creada por Google y este tipo de estilo, un campo de formulario es común en productos de Google y dispositivos Android. También tienes una interfaz de usuario material sin el título. A esto se le llama flotador etiquetado donde el título es reemplazo de los textos fantasma. Y lo que sucede aquí es que Eso se llama etiqueta de flujo porque cuando el usuario hace clic en esta etiqueta o en este campo de formulario, verá el título o el texto de la etiqueta aquí flota. Y los textos fantasmas aparecen así. Pero en el estado predeterminado no hay textos fantasma. Es sólo el título aquí. Una cosa que típicamente no uso estos para personalmente es porque no muestran ese texto fantasma en el estado predeterminado. Los textos fantasma solo aparecen cuando el usuario hace clic para escribir información. Y así perdemos esa oportunidad elaborar estrategias de nuestros textos fantasmas en el estado predeterminado del campo del foro. introduce aquí información que ayude a servir a nuestros usuarios o les da indicaciones o consejos sobre el formato que esperamos que ingresen. También he usado estos antes en el pasado donde hemos tenido un formulario de una columna lleno de diseño como este. Donde puedas, tenías algo alrededor como nombre aquí y podrías decir un vestido o algo aquí. Me di cuenta cuando estábamos probando esto con personas mayores y un público mayor, en realidad no sabían dónde hacer clic. En uno, en un caso, el usuario realmente intentaba hacer clic en el nombre aquí. Esto pudo haber sido un poco más apretado aquí, y accidentalmente hicieron clic en la dirección porque la línea no es una indicación lo suficientemente fuerte del área del grifo como para hacer clic o tocar en el área objetivo o el área del grifo. Basado en esos, típicamente me mantengo alejado de ellos. Y se puede ver que cuando se utiliza la más común, que es esta forma de esquema aquí, esto tiene un buen sentido de área de tap. Se puede ver el rectángulo, ahí es donde va a suceder la entrada. Donde la interfaz de usuario material, es sólo esta línea aquí. Otra es, tenemos es una forma de contorno que tiene la etiqueta de flotador. Y de nuevo es sin el título. El título reemplaza el texto fantasma aquí. Y entonces, ¿qué pasa? Es el mismo principio cuando se pasa el puntero sobre el campo del foro. El título luego flota encima del texto fantasma aquí. Así. Mismo principio que escribo, típicamente mantente alejado de ellos solo porque no utilizamos los textos fantasma para las estrategias de comunicación al principio. Algunos de ellos eran todos los estados por defecto. Para los estados de hover tienen foros. Voy a pasar por esto rápidamente. Tu filosofía para flotar es que algo debe cobrarse vida cuando pasas el cursor, y por lo general debe ser de un color más brillante. Entonces si tienes un, a, un color como este formulario lleno aquí, entonces debería ser de un color más brillante en el estado de hover solo para que parezca más vivo. Esa es una especie de filosofía y principios alrededor del hover. Y nosotros hicimos lo mismo aquí por la forma de contorno. Acabamos de hacer azul el contorno. Dicho muy común desde la interfaz de usuario material se obtiene lo mismo para delinear va azul, ya sea una etiqueta de flotador aquí. Y entonces el mismo principio para el relleno del formulario de contorno que tiene la etiqueta de flotador es que acabamos de cambiar el color del contorno a un azul. Muy bien, al siguiente estado se le llama estado de entrada o enfoque. Y esto es cuando el usuario hace clic en el campo de formulario desde un hover AM o toca el campo de formulario. Y la tecnología fantasma cambia al cursor de tipo. Por lo que verás el cursor de tipo aparecer y los textos fantasma y la mayoría de los casos seguirán aquí hasta que el usuario empiece a escribir. Una vez que escriban la primera letra, entonces verás que esto desaparece. Los textos fantasma desaparecerán una vez que esa primera letra empiece a escribir. Muy bien, entonces este es el estado activo, lo que significa o lo siento, el estado de entrada o estado de enfoque. Y todo lo que significa es que el usuario está introduciendo información en este estado aquí, o están enfocados dentro del estado que hay. Tipo cursor está aquí, se enfocó en este campo de formulario. Y es la mejor práctica en hover usar eso. Un color brillante aquí, los azules. Pero cuando llegas al estado de entrada, es mejor solo ir con un gris más oscuro o incluso un negro, o puedes añadir un poco de azul al gris, como lo que hemos hecho aquí también. Pero lo mejor es pasar de este color claro para el estado predeterminado y luego un color más oscuro para el estado de entrada. Aquí. Se pueden ver los diferentes ejemplos aquí, igual para la interfaz de usuario material. Tenían. El azul para el hover solo se oscurece para el estado de entrada. Y luego lo mismo para los otros campos de formulario de etiqueta de flotación. Muy bien, por lo que el estado activo es más o menos una vez que el usuario ha escrito cualquier información dentro y sale, sale del campo de formulario. Este campo de formulario volverá al estado predeterminado. Lo único que cambia es el texto ingresado cambia a un color más fuerte. Muy bien, entonces usamos un color gris claro para el texto fantasma para indicar que no se ha ingresado nada aquí. Y por lo general esto parece un llamado a la acción, como pasante, nombre interno aquí, así. Y queremos poder oscurecer el texto para los estados de entrada. Entonces cuando el usuario escanea todo esto, pueden ver que esos fueron llenados. Nuevamente, lo mismo para el estado lleno. Si estamos usando un formulario lleno, tenemos un blanco más brillante. Y lo mismo para el estado de entrada aquí para los formularios de etiquetas de flujo. Genial. Entonces cada campo de formulario para la etapa de error, cada formulario debe tener su propio inmueble para mensaje de error, generalmente en la parte inferior. Y de nuevo, esto puede suceder cuando el usuario es o bien un mecanografía dentro del campo de formulario. Y tenemos lo que se llama validación en línea, que es cuando error al usuario dentro del campo de formulario. O sucede cuando presionan el botón Guardar o enviar o Siguiente. Y no cumplimos con los requisitos de este campo de formulario. Lo que no se cumpliera para un campo de formulario específico en lo que respecta a los requisitos, debería ser el mensaje de error aquí. Nuevamente, esos mensajes de error deberían ser muy claros en lo que erró. Podrías ver por los formularios de campo, solo podemos hacer que toda la forma sea roja para el contorno. Solo son las mejores prácticas solo para, solo para hacer el contorno rojo en el campo del foro, no necesitas hacer rojo con el texto ni nada por el estilo. Ni siquiera te vuelves demasiado loco. Todo lo que necesitas hacer es solo un poco sutil indicación de rojo para ayudar a señalar al usuario dónde mirar en su mensaje. Y rojo. Lo mismo para los formularios de interfaz de usuario material aquí y la otra etiqueta de flotador aquí. En el último estado que tenemos eso es común en campos de forma como el estado discapacitado. Entonces este es el estado en el que un usuario no puede involucrar o ingresar o editar ninguna de esta información. Y me gusta simplemente usar 30% de transparencia o un gris claro, o incluso puedes usar ambos. Muy bien, así que todos estos son 30% de opacidad aquí. De acuerdo, así que vamos a entrar en la profunda inmersión de los campos de forma ahora. Mira diferentes funciones. Veamos cómo podemos usar el texto fantasma para elaborar estrategias de las diferentes necesidades, un formato y entradas basadas en el campo de formulario que tenemos. Vamos a ver algunos campos de formulario comunes. Uno de ellos son los números telefónicos. Se puede ver el ejemplo de los textos fantasmas aquí es que está dando al usuario el formato que queremos que ingresen en el número de teléfono. No estamos pidiendo un 11. Sólo queremos aquí 1112223333, así. Y entonces lo que pasa aquí es que tenemos estos guiones que puedes ver aquí también. Y así cuando el usuario entra en este campo de formulario, auto poblamos los guiones para ellos. El auto, verán los guiones todavía aquí como parte del texto fantasma. Cuando llegan al primer número dos, y digamos que escribieron los dos siguientes. Les pondremos ese gallardo. No necesitan hacer guiones se auto, auto poblar eso para ellos. Después verás la finalización del campo de formulario una vez que esté hecho. La otra cosa también para saber es que si tienes un campo de formulario de teléfono móvil o un campo de formulario que está directamente ligado a solo números. Cuando estés en un dispositivo móvil, abre el teclado numérico. No abra el teclado de la letra y haga que el usuario regrese al teclado numérico. Esto también está en línea con por qué rellenamos automáticamente el guión, es que si tu usuario escribiendo como escribiendo esto en un teclado, todo lo que necesitan hacer es escribir los números en el teclado. Pueden tener un teclado que es una sección numérica a la derecha. Y luego en un dispositivo móvil, hay clave mal número, teclado se ve así. No necesitan entrar en ninguno de los guiones. Acaban de poner los números y lo haremos por ellos. Nuevamente. Va mucho, mucho atrás a eso, esa primera cosa de la que hablé aquí, que es affordance, la menor cantidad de tiempo y energía para completar una tarea. Entonces estos son grandes. Afordance, yo también hablaré mucho. Y el transportación también son súper importantes. Fecha de nacimiento. Es el mismo principio que usamos los textos fantasma para ingresar, para transmitir al usuario el formato en el que queremos que ingresen información. Queremos mes, mes, día, día, año, año, año. Y el truco con la fecha de nacimiento uno es como mecanografía del usuario, todavía mostramos los textos fantasma. No desaparece cuando el usuario empieza escribir y las barras, Oh, lo apuesto. Las barras se vuelven autopobladas también, ¿verdad? Entonces todo lo que necesitas hacer es en el teclado solo escribiendo los números. Y aquí está mi cumpleaños, 09131983. Las barras son todas autocompletadas para el usuario. Todo lo que tienen que hacer es escribir en el teclado. Malo, Boom, affordance, fácil, no hay problema. Cuando llegue esta fecha este año, ustedes pueden seguir adelante y llegar y enviarme un deseo o regalo de cumpleaños, lo que quieran, yo lo aceptaré felizmente. El formulario de correo electrónico es bastante simple. En lugar de escribir e-mail, solo muestra un correo electrónico falso. Puedes poner loco o puedes poner como nombre. Email.com solo muestra el formato en una diferencia aquí es que cuando el usuario escribe los textos fantasma se van, como aparece justo cuando hacen clic. Entonces tendrías que este cursor de teclado aparezca. Entonces esta cosa aparecería justo cuando ellos, sería un poco más oscuro, pero aparecería cuando empiecen a escribir. Y luego una vez que pongan esa primera palabra , desaparecerá. Pero no aparece como usamos aquí en la fecha de nacimiento ya que están escribiendo, sólo aparece una vez. Hacen click y una vez que escriben se va por completo. Por dinero lleno. Mismo principio, utilizamos los textos fantasma para mostrar la entrada y el formato que nos gustaría. Una vez que el usuario comienza a escribir, eliminamos los ceros. no mostramos los textos fantasmas, pero mantenemos el signo del dólar. signo del dólar no desaparece. Después añadimos comas. No necesitamos que nuestros usuarios agreguen comas para nosotros. Bueno, vamos a poner las comas, pero el usuario debe escribir el decimal. No rellenamos automáticamente el decimal, por lo que necesitan hacer un decimal. Déjenles eso a ellos. Números de tarjetas de crédito. Nuevamente, mira cómo estamos usando los textos fantasma. Se puede ver por qué me gustan los campos de formulario fantasma textos porque es una, Es un elemento aditivo que nos ayuda a elaborar estrategias de las necesidades de comunicación. Y así tenemos 111 espacio, 2222, espacio 333. Teníamos las indicaciones espaciales aquí. Lo que sucede aquí es cuando el usuario escribe, verá el número que está escribiendo. Pero todo lo demás se convertirá en balas. Solo ven el número ahí escribiendo para que puedan saber en qué están escribiendo el número correcto. Pero no estamos exponiendo todo el resto de los números de la tarjeta de crédito solo por razones de seguridad y seguridad. Y adivina qué? Nosotros auto poblamos los espacios para nuestros usuarios. No necesitan volver a hacer eso, todo lo que necesito hacer es simplemente golpearles números en el teclado o ese teclado. Y haremos el resto del formateo por ellos. Y entonces siempre mostramos los últimos cuatro por acaso el usuario tiene múltiples tarjetas de crédito. No lo sé. Digamos que tienes diez tarjetas de crédito y te fuiste a una juerga de compras en Amazon cuando estás borracho y ordenaste un montón de cosas que no necesitabas y acabaste como cuatro o cinco o tus tarjetas de crédito y realmente no te das cuenta de eso. Y luego tres días después, tu novia es como, ¿por qué hay como 50 cajas de cosas de Amazon en nuestra casa? Y entonces eres como, Bueno, no lo sé. Y luego miras tu historia de Amazon y estás como, Oh Dios mío, creo que pedí una billetera Gucci la otra noche cuando estaba borracho como, oh, eso no está bien. Entonces cuando vaya a comprar mi próximo Gucci Wally, no usaré las tarjetas que están al máximo y lo sabré porque voy a ver los últimos cuatro dígitos aquí. Acabo de maquillarme eso. No compré un abrigo agouti. Entonces lo siguiente son los campos de mensajes de forma libre. Son de forma gratuita porque realmente no tenemos un requisito de lo que el usuario va a ingresar. Por eso es una forma libre. Pueden ingresar cualquier cosa que quieran. Usamos esto mucho en UX como campos de retroalimentación. Si queremos. Los tenemos en algunas de nuestras aplicaciones donde entra un cliente y pueden ir a ver la aplicación de usuario. Y tenemos un área pequeña que dice darnos retroalimentación o aplicación de radar. Y abren esto y volvemos a usar los textos fantasma para elaborar estrategias de la pista o el prompt que nos gustaría obtener de nuestros usuarios. Entonces en este caso, siempre nos gusta escuchar acerca los problemas que enfrentan las personas cuando usan nuestro software. Pero nos encanta escuchar sobre las solicitudes de funciones, como si te encantara ver algo que está en la aplicación que no necesariamente hemos leído el momento. Utilizamos este texto fantasma aquí para ayudarnos a elaborar estrategias para que podamos obtener ese tipo de información de nuestros clientes y usuarios. También a veces van a tener un recuento máximo de personajes. Acabas de poner esto aquí en la parte superior derecha. Una vez que el usuario llegue a un recuento máximo de caracteres como este irá esta lectura de Coco. No podrán escribir más también. Por lo que tendrás dos niveles de reivindicación encendida. Ese tipo de requisito es que esto se pondrá rojo y en realidad dejarán de golpear. Una vez que teclea el teclado, no pasará nada. También tenemos este pequeño ícono expansor aquí. Entonces para los campos de formulario abiertos, como no sé si tal vez alguien que quiera escribir un párrafo bastante largo, 500 caracteres es una cantidad bastante larga. Para que puedan agarrar esto y puedan estirar el formulario rellenado hacia abajo y hacia arriba. Por lo que eso ayuda mucho para estos campos de formulario abierto. Muy bien, así que vamos a ver algunos requisitos de contraseña aquí. ¿ Cómo lo llamamos cuando decimos textos de chicas por defecto, eso significa que realmente no lo estamos usando para elaborar estrategias alguno de nuestros objetivos de comunicación. Muy bien, así que éste es sólo entrar contraseña, bastante simple. Creo que eso sucede con las contraseñas sin embargo, es que ni siquiera mostramos el carácter que el usuario está escribiendo. Si escribo un cinco, no mostramos los cinco. Viene como una bala. Por razones de seguridad y privacidad. Podemos agregar el pequeño ícono aquí, el ícono del ojo. Y cuando el usuario haga clic en eso, entonces revelaremos la contraseña, ¿verdad? Entonces el ícono III es como la gente está viendo , no muestres nada. Y luego cuando lo hagas clic y la ropa como la gente no está viendo, muéstrame, muéstrame mi contraseña. La diferencia entre un campo de formulario opcional y obligatorio. Es mejor mostrar solo texto que diga opcional y frente a otro. Cuando tengas un campo requerido, lo que verás son estos pequeños asteriscos aquí. Muy a menudo o no, la mayoría de sus campos de formulario van a ser requeridos. Entonces en lugar de tener todos los campos de formulario con estos pequeños asteriscos y no todo el mundo sabe que el asterisco es un campo de formulario obligatorio, como senior. Los usuarios mayores no se ponen en contacto con eso. Es posible que ni siquiera lo vean. Es mejor solo dejar todos tus campos de formulario requieren según sea necesario y luego escribir donde es el filtro de formulario opcional porque es mejor transporte. Y si volvemos a nuestra, nuestra guía aquí, transporte, ¿es fácil entender información en cuanto se relaciona con una tarea particular? Tan opcional. Escribir el texto opcional significa algo porque es texto, es opcional frente a un asterisco es algo muy abstracto. Al igual que PDD. No todo el mundo sabe lo que eso significa. Entonces cuando pensamos en información fácil de entender relacionada con la tarea, opcional hace mejor. Y entonces lo podrías hacer, tengo todo un video en tooltips verá que podrías hacer un ícono de info y esto te dará un consejo de herramienta sobre hover o si estás en la web, o haz click si estás en la web y luego toca si 're en dispositivos móviles y tabletas, mira, estamos usando los textos fantasma para elaborar estrategias más a lo que se dirige la secundaria. Ejemplo, departamento 111. Puedes usar texto fantasma aquí para indicaciones como helado favorito en lugar de como helado favorito inter, puedes hacer ejemplos como chocolate de vainilla, camino rocoso, todas esas cosas buenas. Recuerda que las personas se agarrarán a través de tus formularios. Usuarios más expertos en tecnología, presionarán pestaña en el teclado y se moverán por cada campo de formulario. Y esto permite al usuario evitar usar el mouse y tener que hacer clic fuera de un campo de formulario y hacer clic de nuevo en él. Nuevamente. Esto se remonta a esa palabra clave, affordance, Al menos cantidad de tiempo y energía para completar una tarea. Si ves aquí, así es como funciona. El usuario estará en el segundo campo. Acaba de completar este texto aquí. Presionarán pestaña en el teclado. La segunda fórmula, la que acababan de poner, volveremos al estado predeterminado. Y luego el tercer campo extranjero cuando la pestaña ahora estará en el estado de enfoque de entrada y listo para que comiencen a escribir. Para que puedan tabularse a través todos tus campos de formulario y nunca tendrán que hacer click en ese mouse. Vamos a meternos en algunas cosas y no. Una de las cosas que es común aquí es la diferencia entre un diseño de campo extranjero de una columna y una columna de dos que es más zigzag. El de la derecha. Se han realizado estudios con prueba de seguimiento ocular, prueba de tiempo también. Descubrieron que los usuarios pasan más tiempo saltando de una columna a la otra cuando hay una columna de herramienta aquí, tus ojos escanean en Z's aquí en lugar de moverse por los campos del formulario. Y cuando tienes un campo de forma de columna es psiquico psicológico, pero se desempeñó mejor porque sientes que estás completando más. Estás moviendo más por la lista, que se sintió como más terminación versus ir de izquierda a derecha. En realidad se encontró que el formulario de una columna rellenado con la misma cantidad de campos de formulario probados contra una columna uno de dos en realidad realizada era más rápido, la una columna fue más rápida que las dos columnas. Muy bien, así que volviendo a ese affordance otra vez, entonces las columnas individuales también hacen un mejor trabajo en transmitir qué campos de formulario. Si alguien toca la tecla, presiona tab en el teclado, ¿cuál va a ser la siguiente? ¿ Dónde se va a bajar dos columnas o va a ir el modelo correcto? Más a menudo que no, funciona en un patrón Z, ¿verdad? Va a ir a la derecha aquí y luego abajo por aquí. Pero los estudios funcionan y una columna forman campos, pueden tener más espacio en blanco. Es posible que no llenen tu interfaz de usuario si tienes un escritorio grande, pero son mucho más fáciles de escanear rápidamente y le dan al usuario una sensación de finalización a medida que se mueven rápidamente hacia abajo. Otro pequeño truco aquí es que puedes espaciarlos dos grupos diferentes, ¿verdad? Entonces si esto tenía que ver con el nombre como y esto tenía que ver con, no sé, la información del empleador. Simplemente usamos un poco más de espacio desde aquí para agrupar esa información juntos. Y ayuda más con el escaneo, poniendo la información en formas sistemáticas. Se puede ver por qué esto es importante, por qué estos campos de formulario y aprender esto es importante es que esta empresa hizo un estudio sobre las razones por las que la gente abandonó su página web durante el checkout. Nuevamente, el 50% de ellos fue porque sus cosas eran demasiado caras. Tenían demasiado altas tasas de compra e impuestos y gastos de envío e impuestos y demás. 28% dijo que el sitio quería crear una cuenta. Tenían un muro de cuenta. No dejaron a un usuario al igual que el pago de invitado. Si alguien te va a dar tu dinero, como que sea lo más fácil posible para que compren tu producto y me des tu dinero. No los hagas en el crear una cuenta. Pero mira aquí, 21% dijo el proceso de pago, los campos de formulario por demasiado tiempo, demasiado largo de un proceso. Complicado checkout. Entonces este es un número, esto es lo que se llama métrica cuantitativa. Es cuantitativo porque es un número con lo cualitativo ¿es por qué? Bueno, ¿por qué fue demasiado complicado? ¿ Entonces? Teníamos que ir a buscar y tomaríamos algunos de estos principios aquí que estábamos aprendiendo hace. Lana, ¿es un campo de forma de columna dual? Si es así, entonces qué va a experimentar en una sola columna. Puedes tener esto fuera. Voy a saltar a éste si aquí se trata de campos de forma mini como este. Ves todos estos campos de formulario a la derecha, como evitar esto, eso es demasiados campos de formulario. Si tienes tanta información, es mejor poner esto en un mago. El mago es genial para formas largas y tengo todo un video al final de la clase aquí donde acabo de hablar puramente solo de magos. En los magos son geniales porque da, rompe toda la información de forma larga en categorías de pequeño tamaño de bocado. Esto da una sensación del usuario, una sensación de ubicación como si estuvieras aquí. Has completado estas dos tareas, por lo que hay progreso y tiempo. Y también el progreso y el tiempo que solo te queda uno más. Se rompió todos estos campos de forma larga que tendríamos aquí a la derecha. Y lo puso en un proceso paso a paso. Nuevamente, la razón por la cual es que esto no parece desalentador frente a un Zoom Outlook a la derecha. Esa es una tarea desalentadora aquí para intentar completar donde esto desde la vanguardia no se ve tan desalentador. Y otro pequeño truco psicológico es si haces árbol realmente fácil y realmente fácil outro para el primer paso, es súper fácil. Y si es realmente fácil, la mayoría de las veces, estudios han demostrado que las personas son más propensas a completar estos pasos en el primero es realmente fácil, entonces el último debería ser súper fácil de escribir. No quieres que la gente se caiga. Ya han puesto en el trabajo y hacer que el último sea súper fácil. Y luego están terminados. Usa otro do y no uses errores útiles. En este caso, podemos ver que las contraseñas no coincidieron. Evita cosas como esta donde estas están presionando el botón Crear y solo dice que algo salió mal, por favor arregla y no sabes qué salió mal, ¿verdad? Por lo que cada uno de estos campos de formulario debe tener su propio error que se aplique a sí mismo. Explora entradas de registro, ¿verdad? No controlas cuánto tiempo son los nombres de las personas. En este punto, necesitamos saber si esta persona tenía un nombre largo. Tenemos dos opciones. ¿ Lo elipamos? Que es lo que me gusta hacer. Dale aquí estos pequeños tres puntos para indicar al usuario que hay más nombre. Y si el usuario quiere ver más nombre, pueden hacer click en esto y pueden flecha hacia adelante con la flecha y verán más del nombre allí. O podemos desglosar esto en dos líneas. Al igual que aquí. Qué, pero lo único con eso es, él , causa más, mueve el campo del foro y crea más ancho o altura aquí. Y como que arroja la asimetría de la consistencia visual de la altura de todos los campos de forma. Por eso solo soy más fanático de la elipse aquí. Pero solo ten en cuenta de ello. No tienes gente, algunas personas tienen nombres muy largos, apellidos realmente largos. No uses un campo de forma corto como este. Si sabes que va a ser una entrada larga. Si es un correo electrónico, dales un espacio lo suficientemente bueno, lo suficientemente bueno. Recuerda que éste ya habló de ello, pero agrupa juntas secciones relevantes. Entonces si tienes grupo uno, grupo dos, y grupo tres, versus como mantener el mismo espacio para todo. Solo usa el espacio. Es todo lo que necesitas hacer. Espacio, espacios. Espace en blanco es tu amigo. Validación en línea. Esto es genial. Entonces usa la validación en línea si puedes. Entonces si estoy escribiendo un correo electrónico y accidentalmente pongo una coma, me error en el punto de que pongo una coma, como una vez que lleguemos aquí, sólo direcciones inválidas. O si pongo un espacio extra aquí, me error en este punto, eso me está errorando en línea significado dentro del campo del foro mientras lo estoy escribiendo, para que de esa manera pueda arreglarlo antes de salir de este campo de formulario. Esto depende de tu base de datos. Esto no es como no hacer esto o que la gente no va a usar tu aplicación, pero es mejor tenerlas validación de mentira. Lo que pasa si no lo haces es que el usuario llene toda la información, presiona enviar, y luego cuando tenga que cazar como ¿Qué? Oh, ¿por qué no pasaron por algo fallido? Entonces entonces tenemos que mirar el punto culminante, el campo del foro aquí, y al volver a escribir el campo de formulario, haga clic en reescribir en él, arreglar el error donde se remonta a esa affordance. Como ya sabíamos que el usuario estaba aquí, sabíamos que era un error. ¿ Por qué dejar que se vayan? Al igual que hagamos que lo arreglen aquí. ¿ Por qué vamos a hacerle esto a nuestro usuario? Hablé de magos. Puede tener todo un video sobre los hechiceros aquí. Vamos a terminar con estos dos últimos hacer y no lo que no. Recuerda el tamaño apropiado. Tenemos que el código postal aquí. Hazlo del tamaño de un código postal, aunque te arroje tu asimetría visual. Porque de nuevo, la usabilidad siempre debe superar la visibilidad o visual. A pesar de que esto puede verse mejor. Peep la forma en que las personas usan la usabilidad de su producto siempre es mejor que la forma en que se ve algo. Hay algo que puede verse genial, pero no se acostumbra muy bien. Algo puede que ni siquiera se vea tan bien, pero la gente lo usa y se desempeñó muy bien. Frente al de la derecha aquí. Y luego nunca, nunca a tres campos de formulario de columna como este, por favor, por favor, no hagas esto. De nuevo, podrías hacer las dos columnas que acabo de poner estar al tanto, esto es un mal, Eso no es una cúpula. Hay veces que esto es, lo hemos hecho, pero simplemente no, en realidad no hagas tres columnas aquí. Sólo voy a terminar de nuevo con sólo unas piezas de alto nivel. Hablé mucho sobre el diseño de una sola columna. Nuevamente, una de las cosas de las que hablar también es autocompletar. Autocompletar. Genial. Entonces autocompletar es, muestro esto en el video donde hablamos foros de direcciones y formularios de búsqueda. Pero esencialmente lo que esto hace es mostrar información relevante basada en las entradas que el usuario ya ha realizado. Y se salta al usuario de escribir toda la palabra. Entonces si solo estás escribiendo mi nombre AIR, los autocompletes van a mostrar un desplegable abajo, y hablaremos de los desplegable en el siguiente video. Pero mostrará un pequeño desplegable rápido de lo que piensa que son partidos con AAR. Dice que puede tener árido y un par de otras cosas que coinciden con ese nombre. Lo que pasa aquí, Lo que es genial es como, digamos que escribí mi nombre y estaba llenando una dirección y un auto terminado Erin puede también auto poblar mi apellido, mi e-mail, mi dirección, mi ciudad, mi estado, y muchos casos la aplicación no proporcionará esto. Chrome como tu navegador de Internet hará esto por ti. Pero solo estar al tanto de la terminología. Eso es lo que es el autocompletar. Recuerda ese mago que mostramos, voy a, hablaré mucho de esto. Pero independientemente de los asistentes, siempre es genial pensar en tipo de experiencias de usuario, tener estos tres aspectos clave para ello, como establecer la expectativa, ubicación, como dejar tus noticias o usuario sabe dónde están en tu experiencia de usuario, tiempo y progreso, van a tener una tarea que completar como, ¿qué han hecho ya? ¿ Dónde están y cuánto tiempo les queda? Qué pasos en el futuro, lo que necesitan. Hablamos de solo queremos asegurarnos de que hablamos de la validación en línea opcional versus requerida dar errores útiles. Recuerdo sólo practicar. Sea explícito sobre cómo desea que la gente trate esos nombres largos en sus campos de formulario y adivina qué ingenieros van a querer notar. Van a preguntar como, de acuerdo, entonces, ¿cómo tratamos a un nombre largo? ¿ Vamos a dos líneas? ¿ Nos elipamos? Y preferentemente me gusta eliparse como te mostré antes. De acuerdo, Genial, eso son campos de formulario. Te veré en el siguiente video. Hablaremos de botones. 6. Botones: Muy bien, Bienvenido a la siguiente clase. Vamos a hablar de botones. Voy a saltarme la Teoría de Button y lo haré hacia el final porque creo que va a ser más relativo y fácil de conseguir una vez que pasemos por todo esto. Muy bien, así que empecemos con algunos tipos de botones entonces me meteré en combinaciones de botones en diferentes estados y mejores prácticas y hacer algunos no. Pero típicamente tenemos nuestro botón cuadrado. Puedes ver aquí, soy un buen botón, tiene al menos 50 pixeles de altura. Buenas áreas Tap, 50 por 50 pixeles. El ancho depende realmente del contexto del botón. Y así quieres un poco de espacio para respirar para tus textos. Voy, mostraré algunos do y no ejemplos de eso. Pero éste, tiene 140 píxeles de ancho. Probablemente puede ser un poco más corto si también lo quisieras. Pero buen espacio de respiración para la topografía dentro del botón. Y por lo menos mínimo 50 píxeles por alto. Tenemos un botón cuadrado que no tiene bordes redondeados. Y se puede ver el de la derecha tiene algunos bordes redondeados a él. Esto se llama botón de píldora. Es bastante autoexplicativo, parece una píldora que tomarías. Es totalmente redondeado, completo redondeado en los bordes. A éste se le llama botón fantasma. Y es sólo un botón fantasma porque tiene un contorno para que el color primario aquí sea el contorno del botón. Y el relleno es la mayoría de las veces blanco o cualquier color del fondo de este botón se sienta. Si todo fuera como una interfaz de usuario oscura, sería de un color más oscuro o si estuviera sobre un fondo blanco, sería blanco como está aquí. Pero esencialmente debería parecer Es sólo un esquema con el texto. Y estos son realmente geniales para los botones secundarios. Hablaré un poco de eso donde se puede ver estos a todo color son geniales para los botones primarios. Y este estilo fantasma es una gran combinación con el botón primario. Y estos son para acciones secundarias. Y hablaré un poco acciones secundarias aquí en un segundo. Contamos con botones de texto o enlaces. Estas son solo palabras sin ningún elemento gráfico al lado. Y si tocas en ellos o haces clic en ellos, lo harán, lo estarán, llevarán al usuario a un lugar. Bastante simple. Todos sabemos qué son los enlaces. O bien tener la textura de color, tienes una línea debajo. Esto tiene, la línea debajo es en realidad en algunos casos mejor solo por la accesibilidad. Si alguien es daltónico, tal vez no vea esto como un enlace. Pero si ven la línea debajo, entonces les indica que ese es el elemento vinculable. Los botones también pueden tener estados de carga en él. Entonces verás que éste es bastante común donde el usuario estará pagando por algo en un sitio y ellos harán clic en el botón de reproducción y en lugar de saltarlos otra pantalla o en otro estado, que es como cargar. Y si algo no pasó, correcto, lo equivocamos. Podemos mantenerlos en el mismo contexto y el botón se convierte en un estado de cargador. Mantiene eso. Da ese nivel de control y retroalimentación y presionas pagar, ves la retroalimentación que recibimos el pago. Solo espera un segundo, lo estamos procesando y luego te daremos un éxito. Al final de esto. Tenemos botones de icono de nuevo, son sólo textos y combos de íconos. Verás los populares como añadir a continuación, descarga. Y luego tienes botones de ícono. Sólo son botones sin los textos, y sólo sirven como elementos de acción. Sin tecnología, por lo general estos son iconos más comunes como las tarjetas de compra y forward o snacks y descarga y cierre y un anuncio. La mayoría de las veces no necesitan texto al lado de ellos porque son íconos comúnmente reconocidos. Y pueden ir dentro del botón como has visto aquí, o simplemente pueden ser iconos mismos. Tengo toda una charla al final, una de las últimas clases de las que hablaré solo de toda una inmersión profunda en iconos, iconografía, mejores prácticas ahí. Vamos a ver algunas combinaciones de botones. Me gusta mucho este combo aquí, que es botón secundario a la izquierda, que es el más claro en color. O me gusta el combo del botón fantasma para esas acciones secundarias y acciones secundarias o cosas como él cancelarán o ropas o en algunos casos tal vez eliminen. Entonces los botones primarios más oscuros en color. Y me gusta el lleno de aquí. Entonces fantasmas en el campo izquierdo, a la derecha. Y esas son tu acción primordial. Entonces esas son lo más importante que quieres que tu usuario haga en un determinado flujo de trabajo o una pantalla que debe estar en combinación o acompañada con el botón principal. Esas son cosas como Guardar y Enviar o siguiente. Puedes ver también puedes usar color para ayudar a indicar esos botones secundarios y primarios. Usted tiene. Un poco menos fuerte de color a la izquierda y un color mucho más fuerte visual a la derecha. Entonces tienes la píldora del botón fantasma cancelar la izquierda y la píldora a la derecha. Cosas bastante simples aquí. Normalmente me gusta usar el mismo ancho de estos botones lado a lado. Entonces si tira este botón de cancelación aquí abajo, es el mismo ancho que el botón Guardar, por lo que se apilan muy fácilmente. Se puede ver eso aquí. Se apilan, apilan muy bien contra algo como esto. Está bien tener tu, tu botón Cancelar, tal vez un poco más pequeño que tu botón primario solo visualmente, da algo más importante para ver o tono más fuerte a la acción primaria. Eso es genial cuando haces este tipo de alineación horizontal, pero cuando se apilan verticalmente así, arroja la alineación vertical. Y no es mala idea sólo que sea el mismo ancho como ese. Vuelve un poco aquí. ¿ De acuerdo? Botón énfasis, tipo de describir esto ya, pero alto énfasis para acciones Kotlin primarias, color más oscuro, énfasis medio, acciones secundarias, color más claro. Y bajo énfasis EF que significa que no hay acción desactivada botones que no tienen ninguna acción a ella aunque deberían ser muy bajos. El énfasis visual o la apariencia visual de un botón. Vamos a ver los estados de botones. Por lo que de nuevo, tenemos este estado por defecto. Aquí tienes un estado de flotación. Y como hablé en el video del foro, las mejores prácticas para el hover es usar un color más brillante. Esto ayuda a que el botón se vuelva más vivo. Es como, Hey, estoy vivo, haga clic en mí tipo de cosa. Pero recuerda cierne solo una acción que usamos en la web, no dispositivos móviles y tabletas deshabilitados, tiendo a usar 30% de opacidad para el fondo y luego 70% para el texto. Todavía quieres que la gente pueda leer los textos si está deshabilitado, solo quieres que se vea muy discapacitado. Aún deben saber que este es un botón de enviar, pero deberían verlo como algo que no parece enganchado o accionable. Muy bien, para que puedas usar sombras en botones. Te voy a mostrar muy rápido algunos botones aquí o algunas sombras aquí. Entonces si fuéramos a sumar una y tengo toda una charla sobre las sombras, pero déjame pasar rápidamente por una pequeña demo rápida sobre sombras aquí. Si fuéramos a añadir una sombra a este botón, una de las primeras cosas que no hacer o evitar como predeterminado, la sombra predeterminada que se obtiene nunca es la mejor, simplemente nunca empiece con el predeterminado. Se puede ver aquí tiene cuatro en la y, es decir, en la línea vertical debajo del botón. Para píxeles hacia abajo y hay 0 en la x Eso significa que no hay sombra apareciendo en el lado vertical de los botones. Así que de nuevo, y en la línea horizontal y x en la línea vertical. Al menos queremos hacer cinco a cada lado y cinco. Ahora la siguiente parte es que este botón son las sombras demasiado duras. Como si entrecerrabas los ojos, aún puedes ver ese botón. No queremos eso. Queremos aquí un botón muy sutil o una sombra aquí. Entonces vamos a seguir adelante y agregarle algún desenfoque . Eso ya está mejor. 20 desenfoque será bueno. Típicamente me gustó incluso independientemente del color de los botones, me gusta poner un poco de azul, solo un poco apretado de azul en la sombra de color de ese botón, ¿verdad? Entonces, independientemente del color es rosa o morado o lo que sea, un poco azulado de azul y el área negra o gris para la sombra siempre es mejor que solo negro puro. Ahí vas. Eso es todo. Danos un poco de profundidad. Se siente como si un botón se siente como algo en lo que puedes tocar. Incluso puedes ir y agregar un color. Puedes agregar el mismo color o color similar a la sombra para otro efecto también. Así que sigamos adelante. Vamos a cambiar esto en realidad. Hagámoslo, hagamos aquí un color azul. Genial. Ahora pasemos al color de la sombra. Cambiemos la sombra a un poco más azul. Eso te da un poco más de una mirada. Voy a acabar con el poco borroso. Probablemente voy a ir un poco más alto en la opacidad. Ahí vas. Muy sutil. Sutil es efectivo. No queremos que la sombra sea muy notable, solo debe dar un poco de profundidad. Se pueden ver estos tres aquí con la sombra. No hay profundidad en este botón. Y estas sombras ayudan con un poco de profundidad aquí. Solo una cosa a recordar es si haces este sistema de emparejamiento donde tienes el botón fantasma a la izquierda y un botón principal a la derecha. Y un usuario va a pasar el cursor sobre el botón Cancelar. Y sientes la cancelación con la naranja aquí, la misma naranja que se usa para el botón primario. Cuando miras este desplazamiento de datos, ambos tienen jerarquía visual igual. Están compitiendo unos contra otros justo en el estado de flotación. Es mejor evitar algo así y usar un flotador que aún esté quizá dentro del área naranja, pero un poco más claro de un tono de color naranja como este es mejor, ¿verdad? Entonces la primaria sigue parecida al botón primario, incluso en estado de flotación. Muy bien, al siguiente estado del botón se llama estado enfocado. Y esto es cuando un usuario Ms destacando este elemento de botón usando un métodos de entrada como una pestaña de teclado. Puede tabularse a través de campos de formulario y también puede tabularse al botón. Este no es el ratón pasando por el botón, pero me gusta usar el mismo estado que el hover donde es un color más brillante cuando se enseña la pestaña del teclado al botón. Entonces, si tiene tres campos de formulario y un botón de envío, el usuario puede tabularse en cada uno de esos campos de formulario, poner información en, y luego tabularse al botón también y presionar Entrar en el teclado como envío. Solo está mostrando que tipo de estado de enfoque también es importante. Nuevamente, siempre y cuando tengas el flotador definido, lo hará, será, este será el mismo estado para eso. Hay un estado presionado. Esto es cuando el usuario ha presionado el botón. Nuevamente, puedes usar un color más claro que el que estaba en el estado de flotación o enfocado. También puedes hacer una animación donde tengas este valor predeterminado, tienes este hover, ellos lo presionan, y obtienes esta pequeña animación que sucede bastante rápido, pero va de presionado 123. Y es realmente sutil, pero le da esa retroalimentación al usuario que haga clic en el botón o toque el botón. Vamos a meternos en algunas cosas y no. Los botones deben tener una o dos palabras, tres palabras Max. Más de tres palabras, no es fácil escanear y ver cuál la acción principal o qué hace el botón, ¿verdad? Debería ser realmente fácil simplemente mirar el botón. Botón va a informar al usuario lo que hace. Y aquí hay que leer dentro de este botón, esto es demasiado largo, demasiado texto. Si estás usando iconos de botón usa alineación horizontal y evita alineación vertical con los textos y los iconos aquí solo crea forma desequilibrada y no es un botón común aquí. Así que sólo evítelo. No hay razón para no hacer algo como esto a la izquierda. Dar un buen espaciado. Para que puedan ver aquí hemos dado el espaciado igual desde la parte superior e igual espaciado hacia la derecha. Y tienes un buen botón como este frente al de la derecha aquí. Tenemos buen espaciado en la parte superior. Bueno, ni siquiera tenemos espaciado a izquierda y derecha, así que necesitamos hacer esto un poco más espaciado. También da buen espacio para respirar desde el texto. Puedes hacer el espaciado igual o puedes agregar más espacio desde la izquierda y la derecha. Esto es útil porque tienes un target tap, el inmueble que toma este botón, qué tan grande es, eso va a informar lo fácil que es tocar o hacer clic, ¿ verdad? Entonces no hay problema. No debería haber un problema con hacer más grande el botón, sobre todo si es el botón principal. Para que sea fácil, tocar y regresar, obtienes mejor espacio para respirar desde el texto en tu botón frente a los de la derecha aquí. Al igual que todos estos botones se sienten apretados. Al igual que los campos de texto muy apretados aquí como no puedo, tengo que mantenerlo así para poder mostrarte el ejemplo, pero de verdad me habría acercado y justo, eso es mucho mejor. Ayer Debería bonito botón ahora, se puede ver que es realmente difícil para mí nazi incluso dejar estos botones como este. Así que de nuevo, vuelve a tocar y hacer clic en el espacio como este debería ser fácil de hacer clic y tocar. Entonces éste necesita más vertical así luce bien. Si estás usando un icono de botón, usa un icono a la vez. No uses más de uno. Se mezcla el estilo de comunicación. Se puede ver que éste es como lo que es esto una descarga o NADH. No lo sé. Usa un color más brillante para pasar el cursor. Entonces también he visto esto una vez. No hagas que el texto sea más grande en un hover. Usa el color como indicador de desplazamiento, no, no texto y tamaño. Si tienes un enlace secundario como éste donde se cancela, encaja muy bien debajo del botón Guardar. No lo pongas en la parte superior porque la gente la mayoría de las veces dejaremos su lectura abajo así. Queremos que el botón principal sea lo primero que alguien escanea y no necesariamente el botón de cancelar porque cancela secundaria. El mismo trato aquí a la izquierda. También puedes apilar ellos. La mayoría de las veces estamos haciendo botones primarios a la derecha y botones secundarios a la izquierda. Puedes cambiar ese orden cuando tengas algo que podría ser accidental. Si lo tienes, voy a apretar. Así que voy a disparar a otra clase. Hablaré de aquí. Este de aquí. Si tienes algo donde alguien va a eliminar algo y un delete, siempre podemos hacer un RU seguro, modal móvil aquí y tenemos un delete y un cancel. En ocasiones aparecerán estos modales y el usuario accidentalmente pincha en la posición principal aquí mismoy accidentalmente eliminará pincha en la posición principal aquí mismo esto. Y esta es una eliminación impactante porque están eliminando una cuenta y estamos como, Hey, ¿estás seguro de que quieres eliminar esta cuenta? Al igual que has hecho mucho trabajo en esta cuenta, vas a perder todo, cierto, así que la primera eliminación que hicieron, disparamos este modal y solo les damos una oportunidad más de decir, ¿ Estás seguro de que quieres hacer esto? Puedes cambiar el orden de estos botones, para que eso no suceda. Puedes poner este por aquí y puedes poner el cancel uno a la derecha, así y cambiar ese orden acaso accidentalmente vuelvan a presionar la cancelación. No es la acción primaria impactante. Esta es una estrategia para, para especie de usar esa combinación aquí para ayudar justo ese caso accidental donde accidentalmente presione Cancelar de nuevo, pero te gustaría que todo lo agradezcas. Hicieron eso. No quise presionar Eliminar donde este realmente tienes que ir. Oh, de verdad quiero eliminar esta relación. Eso es más o menos todo lo que describía aquí. En éste. Aquí estaba puedes cambiar esto un poco. Sólo por esas supresiones muy impactantes que suceden en esas. Cualquier cosa que pueda ser accidental que quieras simplemente asegurarte de que tu usuario no haga esto. Cuando uses un botón en el fondo de una foto como esta, usa tu botón de color de campo como el principal. Y la mayoría de las veces no uses aquí el botón fantasma porque va a impactar la legibilidad del texto donde el de la izquierda aquí destaca mucho más. Cuando se trata de enlaces. Usa la cantidad correcta de palabras para mostrar tus enlaces. Por lo que se ve el de la izquierda. Si acabamos de poner click aquí para ver tus pautas de usuario de CR, el click aquí, los textos azules. Y así todo lo demás es fácil de leer. Tiene buena legibilidad a ella. Y también estamos transmitiendo al usuario que estamos usando intencionalmente azul aquí porque queremos que se involucre con este enlace. Incluso puedes ir un paso más allá y añadir una línea aquí si también lo quisieras. Así como eso. Frente a la derecha, como hacer todo azul, realmente quiero que mis usuarios usen esto. No pueden, en primer lugar, afecta a la legibilidad y legibilidad. Y tal vez no sepan que todo esto se puede hacer clic. Pueden pensar que es parte de tu marca y solo estás usando textos azules para todo. Sé inteligente con tus enlaces, sobre todo si atan dos frases como esta. Usa una línea de texto para tus botones. Nunca hagas esto, donde va a dos líneas. Simplemente arroja la simetría del botón y se ve súper raro. Nuevamente, si no tiene dos líneas, tienes demasiadas palabras. Tenemos que algo tiene que dar tus palabras como botón con algo bonito que dar ahí, pero nunca debería estar en dos líneas. Nuevamente, mantén los botones al mismo ancho cuando los apiles, y luego no mezcle el ancho como este cuando lo apiles. Está bien, creo que eso es todo. Pasemos rápidamente por el color de la teoría de los botones y terminaremos. Una de las cosas que solo quiero llamarlo, oirás que este acrónimo se arroje por ahí. Se llama llamada a la acción. El llamado a la acción puede referirse a dos cosas que pueden referirse al texto en una pantalla en particular, que es como lo más importante que desea un usuario vea en pantalla, o se refiere al botón, el botón de llamada a la acción, que es ese botón principal. Entonces de nuevo tienes secundaria a acción, que es ese botón secundario. Cosas como volver y cerrar, cancelar, cosas así. Recuerde que el botón de tamaño debe sentirse fácil de hacer clic, fácil de tocar las directrices de la interfaz de usuario de Apple. Dicen, cualquier cosa ahí dentro, los dispositivos de Apple o las aplicaciones de Apple Store, cualquier cosa que se pueda tocar o debe ser de 40 píxeles por 40 píxeles. Personalmente creo que eso es demasiado pequeño. Tiendo a hacer al menos 50 píxeles por 50 píxeles como el más pequeño. Nuevamente, recuerda que el color de fondo debe tener un buen contraste y debe destacarse de otros componentes de la interfaz de usuario si es el botón principal, ¿verdad? Por lo que el botón principal debe ser una de las cosas más parecidas, más oscuras en la aplicación. Por lo que es realmente fácil saberlo. Puede mostrarte un ejemplo de eso, de lo que es lo que necesitas hacer, ¿verdad? Entonces si miras esta página aquí, entrecerrar los ojos y mirarla, esta naranja aparece, ¿verdad? Entonces es lo principal que queremos que haga el usuario. Entonces estamos usando la jerarquía visual para transmitir eso también. Además, puedes usar ese color de nuevo para hacer un diferenciador clave entre el botón primario y el botón secundario. Ya hablaba de formas. Así que solo formas prácticamente horizontales de píldora. La colocación también es crucial, ¿verdad? Entonces no importa cuál sea tu color de tu botón o el tamaño de tu botón. Si no está en un lugar donde las personas tus usuarios no pueden verlo o escanearlo fácilmente, entonces no es tan efectivo. Por lo que la colocación de nuevo de estos botones, dependen de tu contexto, pero normalmente en la parte superior o inferior de tus pantallas funcionan mejor. Por otra parte, la copia debe ser corta y dulce, fácil de leer, fácil de escanear. Y si no sabes qué es miembro el botón de copiadora, debe informar lo que va a hacer el botón. Está bien, genial. Eso fueron botones. veré en el siguiente. Nos vemos a todos en el siguiente video. Cubriremos los desplegables. 7. Descenso: Muy bien, hablemos un poco sobre los desplegables. desplegables son elementos más o menos formados. La única diferencia es que se utilizan para la selección. Por lo que tienen algo que al hacer clic en el campo de formulario aquí, ese menú aparece un poco lo que lo llamamos el menú desplegable aquí. Eso tiene variables de selección para el usuario. Son geniales para cualquier cosa que tenga tres o más elementos o variables para que un usuario seleccione. Porque puedes poner un montón de estos artículos. Se puede poner, digamos, 15 de estas selecciones dentro de la pequeña ventana. Y ahorra una tonelada de pantalla de bienes raíces, bienes raíces en lugar de simplemente mostrar las 20 de esas selecciones. Pero si solo lo tienes, di como de dos a tres variables o elementos de selección para un usuario, entonces es mejor solo usar un botón de radio o una casilla de verificación. Y yo, te mostraré los en video aquí. Creo que no el siguiente video, sino el video después nos sumergiremos en botones de radio y casillas de verificación. El criterio para un desplegable es, nuevo, usaremos los mismos estilos para nuestros campos de formulario. Verás el campo del formulario de esquema aquí. Entonces la forma de interfaz de usuario material que acaba de tener la línea. Las únicas distinciones de un campo de formulario y un desplegable es la pequeña zanahoria, esta pequeña flecha azul aquí. Cuando se hace clic en eso, eso abre el menú desplegable. Y lo que es un requisito para el desplegable es que el usuario solo puede seleccionar un elemento, y luego esa selección se convierte en la entrada aquí donde está el texto fantasma. Si tienes más de, digamos, 20 ítems en un menú desplegable, también lo mejor es hacer un tipo de cabeza o autocompletar, que te mostraré un ejemplo aquí en un segundo. Los desplegables son geniales no solo para formularios, sino que también podrías usarlos como menús. Y así los verás mucho en sitios de comercio electrónico. verás en el sistema operativo de tu computadora como Mac. El área de la ventana superior tiene menús desplegables aquí. Verás un montón de desplegables para menús que se ven algo así. Aquí está nuestro sitio de Bobo t en nuestros artículos para el hogar. Y entonces la arquitectura de nivel aparente son los artículos para el hogar. Y la información a nivel infantil basada en artículos para el hogar es almohadas e impresiones de arte y relojes y lo que tienes. Entonces. También verás desplegables en forma de menús llamados mega menús, donde estos son grandes sitios de comercio electrónico y tienen múltiples arquitectura de información donde tienen un nivel padre como artículos para el hogar y tienen un nivel de niño como almohadas, y luego tienen un montón de nietos nivelar una almohada opciones aquí. Voy a conseguir toda esta información y menús y un video creo que hacia el final de la clase hablé de menús y cajones, y nos sumergiremos profundamente en este tema. Vamos a ver algunos estilos desplegables típicos aquí. Entonces tenemos el estilo predeterminado. Nuevamente, tenemos ese flotador donde el contorno se vuelve azul. Tenemos la ventana de diálogo o el desplegable real que contiene los menús. Y también tenga en cuenta que dentro de este menú desplegable, también tiene el hover aquí. Esto seguirá a tu ratón. Nuevamente, pase el cursor por escritorio pero no para dispositivos móviles o tabletas, entonces tienes el estado activo. Por lo que este sería el valor seleccionado aquí. Entonces si un usuario seleccionó algo, entonces usted tiene el estado de error. Tan similar a nuestros campos de formulario y mensaje de error y un esquema para rojo para indicar el error. Y luego otra vez, tienes ese estado discapacitado, por lo que el 30% superan la transparencia o, o un gris muy claro. O incluso puedes hacer ambas cosas para transmitir que este desplegable es para establo. Vamos a ver algunos tipos desplegables y casos de uso. Son geniales para cualquier cosa que tenga valor de rango. Más bien estás diciendo como, ¿cuánta metraje cuadrado es tu casa o cuánto dinero ganas un mes? Y puedes volver a usar los textos fantasma para ayudar a dar un poco del objetivo de comunicación o el prompt como el ejemplo 500 a 100. Cuando el usuario hace clic en esto, ven todos los rangos que pueden seleccionar aquí. Esto es mejor que solo una entrada recta de como mezclé 2300 al mes. En realidad podrías ser 335 dólares al mes. A veces es mejor en esos valores solo dar un rango. Y hace que sea más fácil para el usuario simplemente seleccionar un rango y no es tan intrusivo. Especialmente cuando piensas en cuánto ganas un mes frente a un número exacto frente a un rango. Y lo mismo para el metraje cuadrado aquí. Al igual que tal vez no sepas realmente tu metraje cuadrado exacto, pero sabrás una estimación aproximada del metraje cuadrado de tu casa. Por lo que el rango y los desplegables son buenos para ir juntos. Para que puedas combinar los menús desplegables con campos de formulario. Por lo que aquí se puede ver tenemos nuestro valor de número de teléfono. Digamos esto como un producto internacional, puedes usar el menú desplegable aquí para seleccionar el tipo de número de teléfono que vas a ingresar. Y luego el formato de cuatro números aquí y los textos fantasma cambiarán en base la selección del país que has seleccionado. Otro grande es que de nuevo, si tienes más de 20 ítems, cuando el usuario haga clic aquí en el formulario, verán el desplegable, pero también verán el estado de escritura de entrada. Y a medida que el usuario lo tipifica filtra la lista a continuación. Por lo que verás esto muy común para las selecciones de estados. Y para que a medida que escribas, MA, verás la lista desplegable de elementos filtran en base a ese tipo. Y luego otra vez, podrías ir aquí y hacer click en Maryland, o podrías teclados con flecha hacia abajo en tu teclado e ir y hacer y seleccionar este elemento. Por lo que el estado de hover no solo funciona para flotar el mouse, también funciona si usted fuera un teclado de flecha hacia abajo en su teclado aquí también. Se pasa por alto un atributo importante a ese tipo de. A veces es el estado de hover para este desplegable aquí cuando estás diseñando esto, puedes combinar estos desplegables con casillas de verificación. Entonces digamos que querías algo que tuviera más de un tipo de selección. El menú desplegable predeterminado es solo un criterio de selección seleccionado. Pero en este caso, puedes combinarlo con los desplegables para informar a una selección múltiple. Entonces en este caso, estamos mirando todos los sabores de helado. Ten aquí las casillas de verificación. Y si un usuario hace clic en las casillas de verificación y cierra el menú desplegable haciendo clic fuera de la ventana desplegable. Por lo que en cualquier momento que aparezca ese desplegable, haces clic fuera de él y se cerrará. Y puedes ver aquí las selecciones que se basan en el desplegable multi-select que entra. Y si hace clic en la X aquí, desseleccionaría vainilla dentro del menú desplegable, y también eliminaría este valor aquí. Esto saldría encima y galletas y crema, que se deslizan hasta aquí así. Impresionante en ello. Otra forma en la que podrías usar el mismo desplegable es haciendo un icono de filtro. Por lo que se puede ver donde el desplegable tiene el portador o la flecha para indicar el desplegable. Y luego para el filtrado, usamos un ícono de filtro. Y si abres este ícono de filtro hacia arriba, puedes ver que estás seleccionando tipos de alimentos. Esto sería bueno para como un pedido de servicio de entrega en línea. Y en este caso tenemos comida china, italiana e india siendo filtrada. Y por lo general tendrás el ícono de filtro y en azul o un color para indicar que este campo de formulario se está filtrando. Si no se estaba filtrando, lo que significa que tenías todo el tipo de alimento seleccionado. Podría verse algo así, que es el selecto estos. Apenas el color gris aquí, lo mismo que el color del trazo. Ese sería el estado por defecto. Y si está filtrando la lista, se vuelve azul para indicar al usuario que la información a continuación está siendo filtrada por los tipos de alimentos. Nuevamente, puede usar el desplazamiento dentro del menú desplegable y desplazarse con el ratón para ver las otras selecciones que están debajo del pliegue. Debajo del pliegue significa que estas son las selecciones que no puedo ver debajo de la ventana de diálogo o de la ventana desplegable. Una gran cosa que verás aquí con bastante frecuencia. Y quizá no te hayas dado cuenta es que un menú desplegable móvil, un desplegable en tu dispositivo móvil es un poco diferente de un desplegable en lo que acabamos de ver para web. desplegable móvil utiliza el inmueble completo, el ancho total del teléfono, y hace que sea fácil tocar para seleccionar los elementos aquí y también desplazar los elementos que se encuentran dentro del artículos que están dentro de este desplegable, ¿verdad? Entonces lo que quieres evitar es usar un desplegable móvil de formato web como este porque utiliza menos espacio y puede hacer que sea difícil tocar y deslizar esta zona para ver el resto de la artículos desplegables. Y no utiliza el espacio completo para tap inmobiliaria también. En un dispositivo móvil, tu punto de tap amistoso y amigable. Y lo más fácil de llegar es donde esta cajas grises, Esa es la idea detrás de un desplegable móvil es utilizar el inmueble completo del teléfono, el ancho completo. También facilita al usuario deslizar hacia arriba y hacia abajo dentro de esta selección desplegable. Se ve algo así. Tengo una abierta aquí. Todo lo que tienes que hacer es hacer click en regular dulce I o tocar en hielo dulce regular aquí. Eres nivel de dulzura se mostrará y si hubiera más campos, simplemente pinchaste y arrastra nuestro deslizamiento. Y mostraría diferentes valores de nivel de dulzura aquí. Y si seleccionas dulce regular o semi dulce aquí, se va a cerrar el desplegable. Te tapioca grande si quieres. No quiero hacerte hambre de Ababa t Pero sí, ese es esencialmente el desplegable móvil ahí. Por lo que de nuevo, los menús desplegables evitar estilo web en dispositivos móviles, puedes hacer estos para tablet. Pero como nuestra inmobiliaria es tan pequeña en nuestros dispositivos móviles, es un deslizamiento hacia arriba desde abajo. Y luego cuando toca tu selección, se desliza hacia abajo. Vamos a meternos más en algunos hacer y no. Nuevamente, un desplegable es genial para tres o más valores. Otra cosa es para el formulario de fecha rellenado, es mejor que el usuario simplemente ingrese la fecha aquí. Mes, mes, día, día, año, año, año. Entonces versus hacer los desplegables por meses, días y años separados de nuevo, porque esto es un affordance, va a tomar al usuario ya sea tres pestañas o tres clics para entrar aquí y introducir esta información y luego encontrar la fecha. Digamos que estás mirando tu cumpleaños o algo por el estilo, para desplazarte hacia abajo y encontrar la fecha en la que estás en contra de solo enganchar una vez, números de un teclado con un solo clic, entrada y poder introducir los números basados en ese teclado. Son geniales para la forma combinada llena de un selector de fecha. Entonces lo que es esto es que tengo una charla justo en los recolectores de fechas en el siguiente creo que el siguiente video hablaremos todo sobre los recolectores de citas aquí. Pero esencialmente puedes entrar, puedes escribir la fecha aquí, o puedes hacer clic en el icono del calendario, que luego mostrará el selector de fecha. Y puedes ir el día de hoy como predeterminado o puedes avanzar en el tiempo o retroceder en el tiempo basado en el contexto de esto, si es como programar una cita, entonces solo estás va a estar haciendo adelante en el tiempo. Si se trata más de una referencia de fecha de hora pasada, como quieres que mire analítica o algo que sucedió ayer en tu sitio web, entonces puedes hacer clic de nuevo en los días y no irás. No podrás ir a futuro estado aquí también. Pero me meto en todo eso en el video selector de fechas aquí en un segundo. De acuerdo, entonces si tienes menos de tres valores, es mejor exponerlos como botones de radio o casilla de verificación porque de nuevo, vuelve a affordance es menos clics y expone la información en el nivel de la cara y no dentro del desplegable. Así que evita si la pregunta es que tienes más de 21 años, usa los botones de radio sí o no versus ¿Tienes más de 21 años? Haz click, y luego ahora tienes que ir a hacer otro click. No. Por lo que es un clic más. Mejor hacer una versión como esta con los botones de radio. Desplegable. El ancho debe ser mínimo como mínimo. Entonces la ventana aquí, esta cosa, este ancho tiene que ser al menos la longitud del formulario desplegable rellenado. No haga que el campo de formulario aquí menos ancho que el real o el cuadro de diálogo desplegable. No hagas eso menos ancho en el campo de formulario aquí. Está bien si repasan como si pudieran ir un poco más anchos que el desplegable real en sí. Simplemente no lo hagas menos ancho aquí a la derecha. Puedes hacer cualquiera como este campo de formulario puede vivir por encima de este desplegable aquí. Al igual que cuando haces clic en él, no puede ir por encima del valor. O puede ver que puede hacer lo que está haciendo aquí, que es que se desliza debajo del campo de formulario, ya sea uno o totalmente bien. Para que pueda ver el ejemplo aquí como si haga clic aquí y el cuadro de diálogo del campo de formulario aquí. Se va encima de este favorito para el desplegable de color. tanto que aquí va justo abajo. Aquí no hay bien ni mal. Dicho ambos son aceptables. Recuerda dar un buen espaciado entre la flecha aquí y el texto. Y siempre usa el ancho que determina el ancho de tu desplegable basado en la palabra más larga que tengas dentro del área desplegable. Eso será que determinará el ancho cuando sea seleccionado. Entonces si tienes una larga palabra aquí, asegúrate de que esto cubra la larga palabra aquí. Y si va más largo que eso, déjame escribir esto en muy rápido. Genial. Entonces si va más largo que el desplegable, lo que puedes hacer es que tengas opción. Puedes ir a dos líneas, que típicamente no me gusta hacer. O de nuevo, podrías hacer lo que hemos hecho en el pasado, que es elipse off. Bien, solo ve tres más así. Pero digamos que tu palabra es justo donde está. Digamos que solo tienes la palabra más larga en ese desplegable es aquí donde solo tienes una palabra en la segunda línea. Es mejor solo agregar un poco más de ancho a tu desplegable. Saca eso que está demasiado apretado aquí. Agrega esto un poco más. Ahí vas. Ese debería ser un buen ancho para la palabra más larga dentro de su menú desplegable. Entonces esto sería como el sabor de helado más largo del mundo aquí. Voy a deshacer eso. Así que de nuevo, solo da un espaciado bueno, adecuado aquí para estos desplegables. No aprietes la flecha ni los textos dan espacio para que estas cosas respiren. Nuevamente, elipse las palabras largas aquí, y no vayas a dos líneas. Creo que sólo se ve raro al arrojar la alineación asimétrica también. Nuevamente, dar un buen espaciamiento entre los textos y los campos de formulario. No apaguen estos así, ¿verdad? Esto debería ir, darle algo de espacio para respirar. Bueno demasiado apretado aquí asfixiando esta cosa debería poder respirar un poco. Como siempre, usa la cantidad correcta de longitud para que el cuadro de lista de diálogo se desplace, ¿verdad? Por lo que todo este contenido dentro aquí debería poder desplazarse. No hagas que el cuadro de lista sea tan grande como este que muestre todos los elementos porque eso no cabrá en tu dispositivo o en tu escritorio. Y vas a estar desplazando todo el asunto para bajar. De todos modos, si tienes una lista tan larga, es mejor hacer un tipo de cabeza. De todos modos, solo muestra aquí la lista si el usuario quiere desplazarse hacia abajo y encontrarla genial. Pero también pueden escribir en el teclado y filtrar rápidamente esa lista y luego encontrar el valor de la variable o la selección de entrada que están buscando. Muy bien, eso fueron desplegables. Y en el siguiente video aquí vamos a cubrir recolectores de citas. Te veré ahí. Adiós. 8. Seleccionadores de fechas: Muy bien, hablemos de los recolectores de citas. Un selectador de fechas es más o menos un desplegable para las fechas. Y permite a un usuario seleccionar fechas interactuando con una superposición de calendario. Y en su mayoría hay dos tipos comunes de funciones de selección de fecha. El primero aquí se utiliza para seleccionar una fecha específica. El otro más común es seleccionar el intervalo de fechas. Empecemos con el primero aquí. Si se utiliza para seleccionar un día específico, es comúnmente utilizado para la programación. Si fueras a concertar una cita, digamos en el Genius Bar, Apple Genius Bar, o en un vuelo de ida. O no creaste una cita para tu Diego vea a tu dentista para que te limpien los dientes. Y lo que pasa aquí es, funciona igual que un desplegable y haces clic en el campo del formulario mismo. El desplegable de superposición de calendario muestra que tienes un pequeño cuadro gris que indica el día en que estás y luego tocas en cualquier parte y verás aparecer la estancia activa no solo donde estaban los textos fantasmas, verás el texto completado activo. Y también verás una representación de esa selección en la superposición del calendario también. Entonces se complica un poco más cuándo usar para seleccionar un rango de fechas, y de nuevo, comúnmente utilizado para vuelos de ida y vuelta o estancias en hoteles. Ejemplos que puedes encontrar esto como en Google Vuelos o Travelocity. Y lo que sucede aquí es si ambas fechas de check-in y fechas de salida o salida y llegada. Fecha de llegada o salida. Estos aparecen como una superposición de calendario igual, pero dos tipos diferentes de campos de fecha. Y lo que sucede aquí es cuando haces clic y dices fecha de check-in, tu primera selección hace que la primera fecha. Y luego en la misma superposición de calendario, puedes ir adelante meses o meses atrás. Y la segunda selección hace que el intervalo de fechas. Y presionas hecho o puedes hacer clic fuera de la ventana desplegable y cerrarla. Y la primera selección ingresará el valor para el primer selectador de fecha. Y la segunda selección aquí, ingresaremos el valor para el segundo selectador de fecha. Así que vamos a ver a los estados para un recogedor de citas aquí. Nuevamente, tienes los dos tipos de estilos más comunes. Tienes esa interfaz de usuario material para eso solo tiene la línea. Y luego tienes el formulario de contorno aquí estamos turnos y contorno rectángulo. Nuevamente, el estado de flotar, volviendo al principio donde algo ilumina o se siente como si estuviera vivo. Vamos a usar el azul para el contorno o para la interfaz de usuario material caído, selector de fecha, regla desplegable, usar la línea para, la línea se volverá azul. Y luego volvemos a tener el estado activo, ese es sólo el estado de entrada. El error se queda aquí. Y un estado discapacitado como el 20% de transparencia dentro del selgador de diálogo calendario. Esto es bastante complicado en sí mismo, solo la caja aquí porque tiene mucho que pasar. Puedes retroceder un mes, podrías ir adelante un mes. Como dije antes, tienes la caja del rectángulo gris alrededor de los datos. Es hoy. Tiene la indicación azul, que es la fecha seleccionada o actuada. Y entonces también tienes un estado de hover que pasaría por ahí y seguiría a tu ratón aquí. Por lo que hay mucho que ir dentro del cuadro de diálogo. También puedes usar estos y otra vez, puedes combinarlos con un campo de fecha. Si tienes una selección de fecha, el usuario puede entrar y escribir igual que lo haríamos el campo de fecha en los campos de formulario que vimos antes, solo abren un tipo de teclado en los números, harán las barras ellos y luego completarán eso. O pueden hacer clic en el ícono Menú, que luego abriría el desplegable selector de fecha o ventana de diálogo donde podrían seleccionar, hacer la selección para la fecha. También puedes conseguir bastante astucia con tu cuadro de diálogo de fecha o selección desplegable. Y puedes hacerlo un poco más fácil para seleccionar años en el pasado y puedes sumar meses. Y de nuevo, esto ayudaría con el affordance le da un poco más fácil para el usuario volver años atrás, entrar en diferentes meses aquí, y luego hacer las selecciones aquí también. Cuando lleguemos a los recolectores de fecha móviles , te recomiendo que, y es la mejor práctica tomar el inmueble de pantalla completa. Y te mostraré algunos ejemplos que construimos para una aplicación en la que estoy trabajando. Esto es genial para. Nuevamente, toque inmobiliario en utiliza los inmuebles de pantalla completa que tenemos, el precioso. Pantalla inmobiliaria que tenemos en dispositivos móviles. Y hace que sea realmente fácil deslizar dos años diferentes también. Te mostraré un ejemplo aquí en un segundo. Nuevamente, deja muy claro el uso de la, si esto toma la pantalla completa inmobiliaria, puedes utilizar estas barras aquí es para en ella para indicar que el intervalo de fechas en que has seleccionado para un individuo fecha también. Y de nuevo, es un inmueble más tappable, fácil de deslizar hacia arriba y hacia abajo y ver los meses futuros. Podrías verlo o meses pasados lo puedes ver en ejemplos de Google Flight. Si vas a ver Google Vuelos en tu teléfono. Y luego aquí está el selgador de fechas que, usamos para una aplicación en la que estoy trabajando. Esto es para una aplicación solar, y esencialmente tienes el selgador de fechas aquí. Puedes retroceder en el tiempo y puedes analizar tu sistema. Y si haces clic en este martes o toca este martes, volverás a ver la fecha deslizar. Puedes volver. En este punto, mira lo fácil que es deslizar los últimos meses diferentes. Está bien, para que pueda ir fácilmente al pasado. Digamos que quería ir a ver el 23 de septiembre aquí, puedo dar click en el 23, pulse Done. Y eso cambiaría mi selección aquí. Mucho más fácil que ir y venir en estas flechas, como una forma rápida de entrar ahí y seleccionar una fecha. Y luego te mostraré aquí el campo de fecha personalizado. Entonces mismo principio aquí. Presionamos la costumbre, las diapositivas en y tienes las fechas de inicio y finalización. Nuevamente, realmente fácil para el en un dispositivo móvil deslizar estos diferentes meses. Digamos que quería hacer aquí el 29 de septiembre, todo el camino hasta el 13. Y se pudo ver la indicación de las barras naranjas para transmitir al usuario el rango de fechas. Y si presionas Hecho, aquí tendremos el rango. Y el usuario puede volver a entrar, agregar diferentes fechas que necesite. Eso es mejor practicar para los recolectores de citas en la web, puedes usar cosas así como esto se ve muy bien. Y luego podrías usar este tipo de interacción para los recolectores de fecha móviles también. Entrémonos en algunos do y no utilicemos un campo de formulario de fecha para cumpleaños. Así que de nuevo, si estás haciendo una fecha de nacimiento, usa el formato como este donde te mostramos MM, DD, YY. Nunca use un selechador de fecha para un campo de formulario de fecha de nacimiento. Esto se mostrará cuando haga clic en esto, cuando el usuario haga clic en el campo del formulario selector de fecha, el menú desplegable va a la fecha predeterminada de hoy. Así que si te imaginas, nacido en 1979, llegué a volver y aprovechar hasta 1979 en estos meses. Como nadie va a querer hacer eso donde en un campo de formulario aquí puedo simplemente escribir fácilmente el formato ba, ba, ba, ba, ba, ba, ba, done. Recuerda para dispositivos móviles, dale suficiente espacio para tu calendario y también recuerda darle un buen espacio de Tap. Si recuerdas en el video pasado, hablé de que las pautas de la interfaz de usuario de Apple son al menos 40 pixeles por 40 pixeles para cualquier tipo de tap inmobiliaria en tu dispositivo móvil. Puedes ver aquí si hicimos el calendario realmente pequeño, va a ser muy difícil tocar un valor específico, sobre todo si tienes pulgares o dedos grandes. Así que aquí hay 50 por 50 pixeles. Se puede ver que eso es, eso no es, eso no es lo suficientemente bueno. Va a hacer que alguien realmente difícil seleccionar solo uno de estos valores donde aquí, cada una de estas letras son estos números aquí está precisamente espaciado a 50 por 50 píxeles. Para que sigamos ese principio. Muy bien, así que eso fue en forma de fecha, recolectores de fecha. Y te veré en el siguiente video donde cubriremos botones de radio, casillas de verificación, casillas de verificación, y alternaremos patrones y componentes de la interfaz de usuario. Nos vemos ahí. 9. Botones de radio, cajas de verificación, Toggles: Muy bien, en este video vamos a hablar botones de radio, casillas de verificación, y alterna. Para botones de radio. Se usan cuando hay una lista de dos o más opciones. Su función permite al usuario seleccionar exactamente una opción. Eso es todo lo que obtienes. Una opción con los botones de radio. Y si está haciendo clic en un botón de radio no seleccionado, deseleccionará el otro botón de radio que se seleccionó. Por lo que es sólo una función de elección. El origen aquí es un botón de radio fue realmente modelado después de estos botones de radio físicos que estaban en autos viejos. Y lo que pasa es que tendrías estas estaciones predefinidas favoritas que harías, el usuario seleccionaría. Si haces clic aquí en esta selección de soy, entonces el auto volvería a reproducir esa emisora de radio definida preseleccionada que tenías. Y si haces clic en la otra estación AM, la que estaba justo ahí volvería a salir, y ésta volvería a aparecer en tocar la otra emisora favorita que tendrías. Entonces fue una funcionalidad similar de botones de radio, lo que significa que es solo una selección a la vez. Y en lugar de salir y estallar, mundo de hoy, se ven más así. Hay círculos para un estado predeterminado, y luego está para el estado activo, obtendrás los dos círculos aquí y los círculos internos se llenan, siempre llenos así. Puedes personalizar estos. Te mostraré cómo personalizar estos aquí en un segundo. Pero en la mayoría de los casos, suele haber ya un botón de radio predefinido todavía en el estado activo seleccionado. Incluso si llegaste a una pregunta de botón de radio como esta, dije, ¿eres mayor de 21 años y presionas sí. Ahora no hay forma de anular la selección de esto. No se puede simplemente anular la selección de este estado, es decir, volver a este estado. Una vez seleccionada una, se mantiene seleccionada y ahora hay que elegir es una u otra, ya sea sí o no. Esas son las funciones primarias del viento y por qué debes usar un botón de radio, especialmente sobre una casilla de verificación. casilla de verificación te da múltiples selecciones. Fueron un botón de radio es sólo un criterio de selección o función. Puedes ver aquí algunos casos de uso aquí es si fueras a seleccionar a qué hora quieres, ¿ qué hora es tu hora de la cena? Y seleccionas las cinco, o las seis o las siete, sólo va a ser una vez. Sólo tienes una vez, di en este día que vas a cenar. Si hubo otras veces que no estás viendo, es como puedes combinarlo con un campo de formulario abierto si presionas Otro que el formulario abierto rellenado va desde el estado deshabilitado, que de nuevo está en 20% de opacidad y ahora se convierte en el estado predeterminado. Y un usuario puede ingresar a una ranura que no está viendo en base a su hora de la cena aquí. Genial. Puedes hacer botones de radio personalizados aquí donde en este caso tenemos un selecto tu género. Y así, o eres hombre o mujer. Y si eres una hembra, tú, cuando pasas el ratón por aquí, verás el contorno rosa como un flotador. Y luego tendrás este estado seleccionado, que es el estado a todo color aquí. Pero de nuevo, estamos usando botones de radio para la cantidad correcta de contenido o función, que es una sola selección. Se puede ver que este es un estilo personalizado para una radio, pero no se ve como un botón de radio, pero funciona exactamente de la misma manera un botón de radio donde si fueras a hacer clic en Mel, desseleccionaría el y seleccionaría al macho. Aquí. Se puede ver la misma selección aquí es que tengo Mel seleccionado y femenino no. Y si tuvieras que pasar el ratón sobre el estado femenino aquí, pincharía y hacía clic. También seleccionarías aquí la tarjeta femenina. La diferencia es que en realidad incluimos el botón de radio aquí en la propia tarjeta, ¿verdad? Por lo que agregamos la tarjeta. Sin la tarjeta, se vería algo así. Agregamos aquí la tarjeta para darle un poco más de pulir de estilo. Si tienes más de tres selecciones de botones de radio como esta, dispóngalas verticalmente. Está bien hacerlas lado a lado aquí. Si tienes dos o tres, probablemente puedas empujar a cuatro. Pero más que eso, quieres colocarte verticalmente, más fácil de leer y más fácil de escanear. Muy bien, así que aquí tienes una selección donde tienes un montón de estos botones dispuestos aquí. Y lo que pasa cuando están dispuestos verticalmente así es que quizás no tengas suficientes bienes raíces para que todos estos quepan y definitivamente no quieres descomponerlos en dos líneas, solo ve lo raro que se ve. Y lo que sucede es que el usuario tiene problemas para escanear la asociación entre el botón de radio que seleccionó y el tiempo. Entonces se puede ver que se inpute a las siete en punto, pero a veces puede ser confuso si ponderado es el botón aquí más a las seis en punto, o es a las siete en punto? Donde si lo colocas verticalmente así, puede tomar más pantalla inmobiliaria. Pero en lo que respecta a la función, es mucho más claro en la relación entre el botón de radio y el campo de tiempo. Si tienes más de, digamos, diez opciones, entonces es mejor solo volver a usar un menú desplegable. El desplegable sirve a la misma función. Es una selección a la vez. ¿ A qué hora te vas a la cama? Y tú vas a hacer nuestro texto fantasma aquí. Entonces ejemplo 1030, pueden entrar, hacer click en el menú desplegable, hacer click en el menú desplegable, seleccionar 1030 o lo que sea, sea cual sea la hora que llegues a la cama, tal vez cuatro AM. Estamos aquí. Ocupa un poco demasiada pantalla de bienes raíces. Y es mucho que escanear para un usuario de inmediato para ver todas estas opciones donde un desplegable es mejor porque lo ocultará dentro de la ventana. Guardarás la pantalla de bienes raíces y el usuario puede desplazarse o deslizar para encontrar su ventana de tiempo preferida. Muy bien, entonces lo siguiente aquí es solo recordar una opción a la vez. Únicamente. Escoge un número uno a cinco, solo los escoges un número, número uno. Aquí se puede ver que estamos rompiendo las reglas fundacionales de los botones de radio. No se puede tener más de uno seleccionado. Eso se refiere más a un tipo de interacción de casilla de verificación y no a un tipo de interacción de botón de radio. Muy bien, tan buen segue. Vamos a hablar de casillas de verificación. Así que de nuevo, las casillas de verificación se usan cuando hay una lista de dos o más opciones. Y su función permite que un usuario seleccione más de una opción dentro de los valores de selección. Por lo que no hay, no hay casilla de verificación está seleccionada por defecto y el usuario puede entrar y anular la selección más de una opción a la vez. O puedes tener algunos casos en los que estás filtrando una lista. Puedes tener todos estos preseleccionados ya y el usuario puede entrar y anular la selección en base a eso. Pero en este caso, queremos que vengas y selecciones tus sabores favoritos de helado. Puedes ver aquí donde el usuario hace clic o toca alguno de estos. Y luego verás la selección múltiple aquí con la casilla de verificación. Nuevamente, puedes combinar las casillas de verificación con los desplegables como hablamos en el video desplegable donde tenemos el campo de formulario aquí haces click, tienes las casillas de verificación aquí haces click en Galletas y cremas de camino rocoso de vainilla. Y luego verás que las selecciones de formularios de píldora aquí aparecen. Y de nuevo, el usuario puede hacer clic en uno de estos para eliminar que también lo desmarcaría en la casilla de verificación. Los estilos son bastante simples, solo tiene un esquema por defecto. De nuevo, puedes hacer dos cosas por el hover. Puedes hacer que el contorno vaya azul o puedes llenarlo de azul y luego el estado activo cuando está seleccionado, tienes la pequeña marca de verificación. Y luego se puede tener el estado deshabilitado cuando algo está seleccionado en el estado activo. Por lo que de nuevo, 30% de opacidad. O puedes tenerlo en el estado predeterminado donde no hay nada seleccionado. Y de nuevo, eso es 30% de opacidad. Puedes personalizar casillas de verificación. Así que de nuevo, solo usando estos para el tipo correcto de contexto antes de usarlos para como ¿Eres 21 o mayor? Sí o no, ¿o varón o mujer? Una selección por criterios donde para los botones de radio donde las casillas de verificación podemos hacer múltiplos. En este contexto, vamos a preguntarle a alguien cuál es su favorito, seleccionar su actividad favorita. Cuando el usuario coloca el ratón sobre cualquiera de estos, podemos usar el trazo de contorno para indicar que estos están vivos y se puede hacer clic y se puede pulsar. Y cuando hacen clic y tocan en uno de estos, llenamos aquí la forma de la tarjeta. Y ahora se pueden ver estas son casillas de verificación personalizadas. Permiten a un usuario seleccionar más de uno y luego un poco más fantasioso que solo la casilla de verificación aquí con texto a su lado, podemos agregar pequeñas ilustraciones e iconos geniales. También tengo todo un video sobre solo iconos e iconografía y las mejores prácticas torno a usarlos hacia el final de la clase. De acuerdo, vamos a pasar a alternar. Los alternadores son más o menos un interruptor que lo representa permite a un usuario encender y apagar las cosas. Y representa mucho de lo que vemos en nuestras casas, que son interruptores de luz. Por lo que hay elementos más accionables utilizados en los ajustes. El asunto es como Wi-Fi y Bluetooth. Verás mucho esto o desactivando las notificaciones. Pero la función de núcleo a un toggle encendido y apagado. Te estás poniendo algo o estás apagando algo. Donde una casilla de verificación es más de un criterio de selección y un botón de radio es también un criterio de selección. Un toggle tiene un poco más singularidad en ese sentido porque es más de un tipo de interruptor a menudo en. Lo ves aquí como las notificaciones recibidas. Verás que el estado predeterminado es gris. Y luego cuando el usuario lo encienda, dirán activar las notificaciones de encendido. Cuando esté encendido, dirá desactivar las notificaciones. Una forma en que puedes cambiar los textos etiquetados para ayudar a indicar el estado en el que se encuentra esto. También puedes hacerlo aquí. Recibió las notificaciones que pospuso a la izquierda, en la oficina derecha un color más oscuro ahora es del mismo color que el botón de radio o el toggle. Y luego cuando lo enciendas, se enciende, se convierte en el estado de color que se usa para el on-estado del toggle y off vuelve a ese estado gris. El mismo trato aquí. Aquí hay otro ejemplo donde es un poco más pequeño y más común en la web es este tipo. Y haces click en el círculo, se desliza por encima. Nuevamente, agregamos algún color para indicar que esto está encendido. Y luego puedes apagarlo de nuevo como el llamado a la acción o encenderlo cuando está en el estado predeterminado aquí. Vamos a meternos en algunos do y no hay aquí. Nuevamente, como mencioné antes, usa el color no solo en el interior del cuadro, sino también en el texto para indicar el estado actual. Y evita hacerlo donde el texto está dentro del toggle porque no está claro si estás mirando esto, si lo estoy apagando deslizando o si el estado está apagado, o en este caso aquí, ¿ está encendido o voy a encenderlo por, al involucrarse con este toggle? Entonces nuevamente cambie los textos para que el usuario sepa lo que está sucediendo. Entonces en lugar de un texto de llamada a la acción, también se puede dar a los textos estatales donde solo decir cuál es el estado de este toggle en el momento actual, que Wi-Fi está apagado. Y cuando toque y deslice o toque y haga clic, verá que el cambio de texto Wi-Fi está activado. Nuevamente, evite algo como esto con la casilla de verificación donde solo dice Wi-Fi encendido y está comprobado y Wi-Fi activado. El checkbox de nuevo, es más de un criterio de selección donde si tuvieras un Wi-Fi en tipo de criterios como este es mejor usar un toggle. Recuerda que la izquierda es siempre la fuera del estado y la derecha es siempre el on-state. Nuevamente, coincida con las convenciones actuales de alternancias existentes. No cambies esto donde está apagado y la izquierda está encendida. Está bien, genial. Eso fueron botones de radio y casillas de verificación y alterna. Y el siguiente que voy a cubrir en el video son formularios dirigidos y formularios de búsqueda . Y te veré ahí. 10. Direcciones y formularios de búsqueda: Muy bien, así que hablemos de formularios de dirección y formularios de búsqueda. Estos dos son tan comunes y suenan fáciles, pero en realidad son bastante complicados, sobre todo foros de búsqueda que solo quería romper estos y simplemente hacerlo, hablar y ejemplos y hacer y no sólo en estos dos tipos de campos de formulario. Nuevamente, un formulario de dirección como suena, son formularios para tu dirección. Son muy comunes. Los usamos todo el tiempo. Mi favorito para usar es el campo de un formulario, formulario de dirección autocompletar. En lugar de tener la dirección de domicilio con la, ya sabes, tu dirección, tu ciudad, tu estado, tu código postal, tu país. Lo que puedes hacer es que puedas hacer algo como esto donde tengas tu domicilio, tienes los textos fantasmas, solo por defecto ingresa tu dirección. Y al escribir aquí la dirección de domicilio, usarás la búsqueda automática o autocompletar aquí abajo, y eso va a buscar en la base de datos de direcciones basada en el recuento de caracteres que has metido en tu auto, en tu formulario rellenado aquí. Por lo general, estos no comienzan hasta que tengas al menos tres o cuatro caracteres en los campos del formulario. Y entonces eso comenzará a estrecharse, estrechando esta lista desplegable de resultados. Y dentro de la lista aquí, posible que tengamos 30 o 40 resultados basados en tu entrada aquí, pero solo mostramos cinco guión siete a la vez. Es más fácil para un usuario escanear cinco o siete de estos para ver si son coincidencias allí. Si hay, no veas el partido, pueden seguir escribiendo fácilmente apretado. A medida que siguen escribiendo, esta lista de direcciones autocompleta se va a filtrar en función de los recuentos de caracteres. Y ese resultado de búsqueda será más pequeño y más pequeño y más pequeño y más exacto a la dirección que estás introduciendo como usuario hasta que encuentres tu dirección. Entonces en este punto el usuario puede dejar de escribir. Aquí, ver la dirección que quieren poner, que es cinco por cinco Gary Street, San Francisco. Pueden arrojarse hacia abajo en su teclado. Nuevamente, es necesario tener el estado de desplazamiento aquí, o el estado de desplazamiento también aparecería cuando el error, cuando el usuario estaba tecleando hacia arriba y hacia abajo en el teclado. Después cuando presionan Enter, se puede ver ahora que el formulario de una dirección tiene el nombre de la calle, la ciudad, el estado, y también el país. Y incluso puedes agregar código postal a esto también. Puedes presionar fácilmente X o pulsar X en el campo del foro, que te llevará de vuelta al estado predeterminado aquí. Así que una manera muy fácil de conseguir la dirección de alguien volviendo a esa palabra clave, affordance, como la asequibilidad del usuario, ahorrándoles tiempo, ahorrándoles energía. Aquí hay más de una forma manual tradicional. Nuevamente, no es una marca o un descanso. Verás esto todo el tiempo. Pero te mostraré una forma en la que aún podríamos utilizar la base de datos de búsqueda automática automática de campos de dirección para poblar toda la información que necesitas para una dirección aquí, incluso si tienes que romperla fuera así, donde tienes la dirección, la ciudad, y el estado, y el código postal. Entonces, tradicionalmente, lo que se vería esto es algo así y tendrías que escribir tu dirección. Tendrías tu segunda dirección, tecleas en tu ciudad. Tendrías un desplegable para tu estado. Tendrías un código postal y un desplegable para tu país. Nuevamente, nunca use desplegable para una ciudad. Siempre se puede utilizar el menú desplegable para una selección de estado. Rara vez se escribe en el estado aquí. Por lo que siempre usa aquí un texto de forma libre para la ciudad y un desplegable para el estado así como para el país. Vale, así que de nuevo, si puedes evitar esto, hazlo. Y aquí hay una forma en que puedes combinar la que acabo de mostrarte arriba con este tipo de interacciones de campo de formulario. Entonces digamos que tienes la dirección 12, tienes la ciudad, el estado, el código postal. Y ya sabemos que la mayoría de la gente va a ser por nuestro servicio que brindamos son en USA. Podemos salir de ese EUA. Entonces lo que pasa aquí es que un usuario entra en el campo de dirección número uno, escriben en su dirección, ven el partido. Yep. Esta es la calle Geary 515, San Francisco. Hacen click en eso. Y lo que hace es poblar la dirección, la ciudad, el estado, el código postal, y el país dentro estos campos de formulario para que no tengan que entrar en cada uno de estos. Esta es una forma inteligente de hacer la dirección Formularios. Vamos a ver el formulario de búsqueda. Entonces el cuadro de búsqueda es esencialmente una combinación de un campo de entrada y un botón de envío. Y parecen súper fáciles. Pero en realidad hay mucho para ellos. Y para sitios complejos, el cuadro de búsqueda puede ser la principal forma en que un usuario encuentra algo o lo primero que hacen cuando vienen a tu sitio, piensa como Amazon. Lo primero que haces un Amazonas es ir a buscar. Buscas lo que estás buscando. En estos casos, el formulario de búsqueda es un gran problema. Y la página de resultados que el cuadro de búsqueda te da como también gran cosa. Recuerda que la búsqueda solo es necesaria cuando tienes mucho contenido. Si no tienes mucho contenido en tu sitio, no necesitas buscar tamaño extraño donde estamos priorizando productos que estamos construyendo. La búsqueda viene más tarde después de que tengamos más cosas como si un usuario ingresa un montón de información que necesita buscar. Normalmente no empezamos con la búsqueda porque ni siquiera tenemos un producto todavía. Lanzamos sin búsqueda, dejamos que los usuarios ingresen información que la esperaron técnicamente quieres buscar en algún momento de nuestra aplicación. Y luego en ese punto añadiríamos la búsqueda más adelante. Entonces eso es solo una especie de mecanismo de alcance o una prioridad establecida para lanzar nuevos productos. Pero si tienes un sitio de comercio electrónico donde solo vas a tener un montón de cosas que alguien que necesita encontrar, entonces busca súper importante y debería ser casi lo número uno que harías, comenzarías a construir además del contenido y los productos en los flujos de checkout que tendrías. Nuevamente, haz que la búsqueda sea accesible en cada pantalla de un sitio complejo y no dificultes para los usuarios encontrar la búsqueda. Por lo que normalmente se encuentra en la parte superior derecha o centro de su barra de navegación en su sitio de búsqueda. Aquí hay un par de ejemplos. El primer ejemplo aquí es un campo de búsqueda común, pero no hay botón de enviar. Y el botón de enviar se activa haciendo teclado Enter en tu teclado. Y eso presentará aquí el campo de búsqueda y llevará al usuario a la página de resultados. Por lo que en ese caso, de nuevo, autocompletar es muy importante. Y puedes usar textos fantasmas para insinuar algunas de las posibles búsquedas que queremos que busque un usuario. El segundo ejemplo aquí es un botón físico. Nuevamente, el usuario aún puede presionar Enter en el teclado para enviar la búsqueda e ir a la página de resultados de búsqueda. O pueden hacer clic en el botón Buscar el cual los llevará a la página de resultados de búsqueda. Y en ambos casos, autocompletar sigue siendo súper importante. Pero recuerda que el botón de búsqueda física visual transmite al usuario que si no hay coincidencias en el autocompletado, que aún pueden presionar el botón de enviar e ir buscar cualquier partido que tuviéramos que nosotros no pudo encontrar el autocompletar. Sé que suena algo complejo, pero déjame, déjame mostrarte el ejemplo aquí. Por lo que Google es un gran ejemplo de un campo de búsqueda sin el botón de enviar. Pero quiero mostrarte cómo cualquier manera ya sea que estés enviando en el teclado o tienes un botón físico en el que puedes hacer clic o aún poder presionar Enter en tu teclado como envío. Pero quiero mostrarles cómo toma la autocompleta, toma un papel en esto. Digamos que aquí estoy en Google y estoy escribiendo tipografía. Se puede ver que me está dando el en este caso, me está dando, creo que diez resultados de búsqueda aquí que son más comunes. En este punto, lo que podría hacer es que puedo arrojar mi teclado, me estoy estrechando. Voy a flecha hacia arriba. Puedo salir X o puedo hacer click en uno de estos editar, llévame a mi página de resultados. Pero a medida que sigo escribiendo, los resultados de búsqueda comienzan a conseguir cada vez menos. Y voy a empezar a escribir algunos números raros aquí. Muy bien, así que ahora ya no hay más resultados de búsqueda. Pero aún puedo presionar Enter en mi teclado. Sea cual sea el sistema que estemos haciendo va a hacer su mejor trabajo para igualar las opciones que estuvieran allí. Y dame la página de resultados aquí. Ahí es donde entra el autocompletar, es muy útil. Y también el botón Buscar, porque el botón de búsqueda siempre transmitirá al usuario que no importa cuál sea su entrada, aún se puede buscar. Puede haber estos raros casos en los que tu página de resultados no resultó nada. Puedes volver a la página resultados sin resultados en este caso, puedes ver que Google tiene cerca de ocho resultados. Con base en eso. Esto es buscar en toda la web un nombre realmente extraño como este, y todavía hay ocho resultados. Veamos si podemos conseguir que haga como ningún resultado aquí. Sí, sigue siendo, sigue siendo resultados. Entonces se puede tipo de ver a lo que quiero decir aquí es que el, si estás diseñando algo para la búsqueda, no solo el campo de formulario de búsqueda, que pensar en la forma en que el usuario autocompleta su búsquedas. La forma en que seleccionan la autocompleta. La página de resultados de búsqueda que coincide con los resultados. Y si no hay resultados, aún pueden presionar Enter en el teclado e ir a una página de resultados. Y si no hay resultados, tenemos que pensar en esa experiencia de usuario. ¿ Acabamos de tener claro texas lo ha arrepentido, no hubo resultados en esa búsqueda. Y sin embargo nos acercamos ese tipo de caso de borde es importante. Nuevamente, cuando piensas en solo buscar, suena fácil, pero es mucho más complejo. Y te mostraré algo más de complejidad cuando entre en una interfaz móvil sobre cómo funciona la búsqueda. Rápidamente, vamos a pasar por el auto-completado. Así que de nuevo, coincidimos cinco a siete en el caso de Google, parece que hicieron diez. Los coincidencias que son más comunes en base a la selección que el usuario ha realizado. Este caso, solo estamos mirando a la OPS. Estamos tratando de emparejar teléfono aquí es lo que estamos asumiendo que el usuario quiere buscar en base a las funciones de búsqueda más comunes que hemos tenido en nuestro sistema que comienzan con la OPS. Nuevamente, la x aquí, el usuario puede cancelar esto. Y luego como acabo de hablar del autocompletar SOS arriba, este menú desplegable solo aparece después de las tres primeras búsquedas. Le da al usuario una lista mucho más clara definida de lo que está buscando. Nuevamente, no sobrecargue a sus usuarios con sugerencias en cinco guión siete a diez opciones aquí en el autocompletar funcionará muy bien. Y no te olvides de definir lo que el estado de desplazamiento o el estado de flecha arriba y abajo del teclado puede ser el estado de desplazamiento o el estado de flecha arriba y abajo del teclado. De nuevo, puedes usar la misma interacción para búsqueda en tu barra de navegación web. Y se puede hacer un estado predeterminado como este donde realmente mostramos la búsqueda de palabras y mostramos el icono de búsqueda flotando, se ilumina y un estado activo. Podemos tomar más bienes inmuebles como este, podría empujar el texto o podría ocultar todo el texto. Aquí. Puedes hacerlo muy largo. Y el usuario comienza a escribir. Añadimos el autocompletar caído. Pueden presionar X aquí para eliminar la lista. O pueden presionar la OPS y en realidad presionando el teclado enter. Y tendríamos que definir una página de resultados de búsqueda para lo que creemos que son las mejores opciones para OPS o si no hubiera resultados. O pueden decir todo lo que realmente estaba buscando fundas telefónicas. Haga clic en fundas telefónicas y las llevamos a una página de resultados que muestra de forma las fundas telefónicas. Y en esa página de resultados, aún deberían poder buscar, deben estar en todos los lugares. Aquí está la misma interacción de búsqueda para el móvil. Y todo lo que hicimos aquí es que tengo un video donde hablo menús y cajones aquí hacia el final de la clase, hablaré mucho cómo funcionan estas navegación a nivel padre en tu barra de navegación se colapsará en iconos de menú, o en este caso como un menú desplegable. Todavía tenemos aquí la barra de búsqueda. Y para el móvil tomará la barra de navegación completa aquí bloqueo del usuario y los mantendrá enfocados en este estado de búsqueda. Otro do, algunos lo hacen y no son para las cuotas por la web es sólo en realidad mostrar si tienes la inmobiliaria, mostrar la palabra buscar. Se ahorra, tomará un poco más de espacio. También puedes ampliar el estado activo de la búsqueda para dar un poco más de bienes raíces para el usuario escribiendo. Pero si tienes la sala, mostró la barra de búsqueda para dar o el texto de búsqueda aquí y el campo de formulario de búsqueda aquí como mejor transporte. Y muestra al usuario, también les da un poco más de tap target, dónde tocar la barra de búsqueda en lugar de hacer algo como esto, aunque se ve elegante, es solo este pequeño ícono de búsqueda. Si tienes la inmobiliaria, muestra el formulario relleno shell, el texto fantasma de búsqueda aquí, Es más clicable inmobiliaria otra vez, affordance. Tiene un transporte más fuerte, siempre recordando al usuario que hay una búsqueda aquí frente al ícono. Pero si solo tienes el, cuando esta respuesta es esta barra de navegación aparece en una interfaz móvil. Entonces es bueno mostrar solo el icono real en sí porque no tienes la habitación para toda la barra de búsqueda. Es sólo cuando tienes la habitación ¿ quieres mostrar los textos de búsqueda y el campo extranjero? Y evita hacer algo como esto para web cuando obviamente tienes la sala para mostrar el campo del foro y la barra de búsqueda. E incluso en móvil si tienes la habitación para hacerlo aquí, pero es aceptable si tuvieras algo como esto también donde era solo el icono de búsqueda real aquí cuando está en móvil. Cosa que quería llamar para móvil también es que es una especie de interacción complicada que no necesariamente recogerías de inmediato a menos que te involucres mucho con la búsqueda en este tipo de mentalidad. Así que cuando lo estés, cuando estás haciendo diseño de interacción o una perspectiva UX, cada vez que estés usando dispositivos, solo piense en cómo se comportan estas cosas. Esta es una interacción muy común en Apple. Interfaces es el cuadro de búsqueda de mensajes. Si miras el mensaje Turcos en este momento en mis mensajes, puedo crear un nuevo mensaje aquí con la pequeña caja azul aquí. También tengo la configuración con los tres iconos aquí, y tengo aquí esta barra de búsqueda. Lo que sucede cuando hago clic en la búsqueda o toque en la barra de búsqueda aquí es esta barra de búsqueda realmente flota. Y me pone en un modo de búsqueda donde todo lo que puedo hacer en este punto es que me está enfocando en la búsqueda. O busco, puedo presionar Cancelar, y volver al modo que estaba antes. Puedo escribir en mi búsqueda, empiezo a ver el auto completa y los coincidencias a mi búsqueda a continuación. Puedo presionar X a X fuera el texto fácilmente y seguir escribiendo otros textos. Esta es una interacción muy buena porque enfoca al usuario en un objetivo y tarea específicos, que en este caso es la búsqueda. La cosa que querrías evitar. Este tipo donde digamos que solo presiona Buscar. Ahora estoy en el modo de búsqueda y no estoy enfocado en el mismo punto de búsqueda. Puedo entrar y presionar Crear nuevo mensaje. O podría entrar en la configuración aquí, puedo seleccionar nuevos mensajes, puedo editar los nombres, puedo hacer las fotos. También puedo ver los textos de mi mamá aquí dentro del estado de búsqueda también. Por lo que no es mantener al usuario enfocado en este tipo de estado. Hay demasiadas acciones sucediendo además, lo único que estamos tratando de lograr para este usuario es la búsqueda. Tocan la búsqueda. Están informando a la interfaz de usuario que quieren una búsqueda. Entonces hacerlos enfocados en esa interacción es importante frente a algo como esto. Es una interacción complicada, complicada, pero tú, ya ves por qué lo hacen. Esto, tiene mucho que ver con transporte y mantener al usuario enfocado. Versus aquí, hay demasiadas cosas sucediendo a la vez. Impresionante. Para que envuelva formularios de dirección y formularios de búsqueda te verá en el siguiente video. Hablaremos de barras de pestañas y barras de título. 11. Tab-Bars y barras de Tab-Bars: Muy bien, Bienvenido al siguiente video. Vamos a cubrir barras de pestañas y barras de título. Empecemos con barra de pestañas. Por lo que unas palabras tabú también se conocen como barras de navegación inferior. Y aparecen en la parte inferior de las pantallas de nivel padre de una aplicación. Y permite a los usuarios cambiar rápidamente entre diferentes secciones de la aplicación o destinos dentro de la aplicación. Y se utilizan para aplicaciones móviles y tabletas o al ver un sitio web en un dispositivo móvil o tableta. Pero evite usar estos para cualquier cosa que esté relacionada con el escritorio del sitio web. Todos los hemos visto. Se ven como estos aquí en la aplicación bot beauty, esta pequeña sección aquí, esa es tu barra de pestañas. Entonces es un elemento de interfaz de usuario de navegación. Y antes de meternos en algunas de las mejores prácticas y algunos consejos sobre usarlas, sí quiero hablar un poco arquitectura de la información porque como vamos a empezar a meternos en más videos, hablaremos no sólo de niveles de arquitectura de la información, sino que también se aplica a la navegación. Entonces, si piensa en navegar contenido dentro de su sitio o barras de navegación o cómo navega una aplicación de experiencia de usuario solicitante de usuario, o cómo se navega el usuario a través de su experiencia de usuario? Mucho de eso tiene que ver con la arquitectura de la información o IA. El fundamento básico justo en un nivel básico es que tenemos un sistema como este donde tienes un nivel padre y luego tienes un nivel hijo. Entonces el niño tiene una relación con el padre, y luego usted tiene un nivel de nieto. Entonces el nieto tiene una relación con el nivel hijo. En el mundo de, en este ejemplo voy a dar es como helado. El nivel de los padres es como tamaños de helado , tamaño pequeño, mediano, grande o cono. Y el nivel niño, de la información que se relaciona con el nivel padre de tamaños de helado es sabores de helado. Porque si eliges un tamaño grande, puedes obtener tres cucharas de diferentes sabores. Bueno, si eliges un pequeño tamaño de sabor a helado e-mail y obtienes uno o un sabor si eliges un tamaño pequeño. Para que puedas ver cómo hay una relación entre ese nivel hijo y ese nivel padre. Y luego desde el nivel nieto en la analogía de helados aquí hay coberturas de helados. Y tiene una relación con los sabores porque los sabores dictarán o indicarán qué tipo de topping querría en su helado. Cuando pensamos en niveles importantes de información, el padre es lo más importante. Segundo para el padre es el hijo, y tercero para el niño es ese nieto. Y en lo que respecta a la jerarquía e importante ver, una de las cosas que aquí es interesante es que esto se aplica a la forma en que la gente piensa también en la información. Eso se llama modelo mental. Y hablaré de esto cuando lleguemos a los videos del menú. Pero si vas a cualquier heladería en cualquier parte del mundo, lo primero que te preguntaron que son los tamaños de helado. No entran y te preguntan un cool Muy bien, bueno, ¿qué coberturas te gustaría? Eso es algo extraño. Por lo general comienza con este nivel establecido de arquitectura de la información que se aplica a la convención común de helados, jerarquía y modelos mentales de helado que existe en el mundo. Por lo que comienza con tamaños que va a sabores y que va a coberturas. Este nivel de comprensión de cómo información se relaciona entre sí en un punto de vista jerárquico es importante a medida que pasamos por estas clases. Está bien, genial. Así que hablemos de las mejores prácticas para las barras de pestañas. Entonces como dije antes, categoriza el contenido de nivel superior en tu barra de pestañas. Entonces esos destinos son esas categorías deben ser nivel padre como casa, perfil, tienda, navegar, ese tipo de cosas. Utilice la barra de pestañas estrictamente para navegación y destinos, en realidad no elementos no relacionados. Entonces no debería ser como cosas donde un botón de acción o harías algo. Se trata de destino enfocado y la navegación enfocada. Para tu móvil y tablet. Tabs. Sólo por lo menos, hay que tener dos categorías. Y al máximo, puedes tener cinco, pero no más de cinco y no arriendo menos de dos, y me meto un poco más que eso en el do's y no lo hagas. Nuevamente, no utilices estos para el escritorio web. Son los mejores para dispositivos móviles y tabletas. Y no ocultes la barra de pestañas cuando el usuario toca otra opción dentro de la barra de pestañas. El tamaño del grifo por pestaña es alrededor de 40 píxeles por 40 píxeles como mínimo. Pero puedes conseguirlo hasta 75. Por 75. Son mejores que lo que llamamos el menú de hamburguesas. Si recuerdas, lo tengo, tendré todo un video en solo menús, pero el menú de hamburguesas es una especie de elemento A UI que alberga opciones de menú es donde el usuario hace clic en él. Revela esas opciones al usuario, lo que nos ahorra bienes raíces. Y puede albergar muchas más opciones de las que podríamos mostrar en pantalla. Pero si podemos categorizar nuestro sistema de pestañas o nuestro perfil o nuestro sistema de navegación a nivel padre necesita al menos dos a cinco, entonces no necesitamos una hamburguesa. Podemos usar la barra de pestañas y funciona mejor porque expone estas opciones en el nivel principal de una pantalla. Así que de nuevo, se remonta a ese affordance. El usuario no tiene el resplandor. Haga clic en el grifo en el menú. Ver el menú toca de nuevo en el elemento de menú y luego ir y adelante. Pueden fácilmente con una pestaña, ir a través de las secciones de nivel padre de su sitio web o experiencia de usuario. La barra de pestañas, recuerda, siempre permanece fija a la parte inferior de tu teléfono o tablet. Nunca debe desplazarse. Y asegúrate de que haya un claro activo y por defecto permanecer activo cumpliendo el estado en el que está el usuario. Y un estado predeterminado, los estados que el usuario o los destinos o toques al que el usuario no ha ido y no está encendido, entonces nunca tienen una opción de pestaña de estado deshabilitada. Todas estas opciones de pestaña deben ser tappables y no deshabilitadas una donde no pudieras ir aquí. Puedes hacer estas secciones aquí unos 90 píxeles de altura a una altura de 100 píxeles. Y luego de nuevo se puede ver este rectángulo de puntos rosa es de 50 píxeles por 50 píxeles. Entonces el área objetivo, es decir, el área de tap para el usuario. No es el ícono. El área superior es un espacio invisible. Queremos hacer ese espacio más grande que este ícono de aquí, ¿verdad? Por lo que todos estos tendrían un área de tap que se vería así. Y asegúrate de que toques áreas con un mínimo de 40 píxeles por 40 pixeles. Pero de nuevo, tiendo a ir con 50 por 50 solo para que sea un poco más fácil para los usuarios tocarlo. Algunas opciones más aquí se puede ver la pantalla de perfil aquí. El usuario toca el icono de ilustración de Bubba. Llegan a un sitio de compras de bobo aquí y pueden agacharse en cualquier punto al checkout y luego empezar a entrar en el flujo de trabajo de checkout. Algunos otros ejemplos aquí para una de las aplicaciones y actualmente trabajando en. Y se puede ver el teléfono. Vamos a apretar en las cuatro opciones de pestaña. Y cuando lleguemos a una tablet, podemos espaciar esto para encajar el inmueble que tenemos para tablet. El motivo por el cual estos funcionan tan bien es que se colocan en el inmueble más aprovechable en dispositivos móviles. Si estás usando una mano, si eres zurdo, toda la zona verde de tu dispositivo móvil es fácilmente tappable y no tienes que estirarte o no es difícil llegar. Si estás en la mano derecha. Al igual que la mayoría de los usuarios, entonces esto es todo. El verde es genial, natural, fácil de sujetar, fácil de pasar. Por lo que se colocan con alrededor del 80% dentro de un espacio natural, 80 al 90% para que un usuario toque dependiendo de su mano izquierda o derecha. Y entonces esta área de aquí arriba es difícil si estás donde estas cajas grises aquí, esa es una zona dura, pero algunos de los teléfonos más grandes que usamos nuestra mano izquierda. Así que si soy diestro, estoy sosteniendo este teléfono aquí. Usaremos nuestra mano izquierda para cerrar las cosas aquí. Y así que si tuvieras aquí un botón X, en realidad es mejor poner aquí tu botón x. Que sea un poco x. Está bien, genial. Por lo que es mejor tener tu botón x aquí en dispositivos móviles. Entonces por aquí. El motivo por el cual es en realidad bastante cómodo sacar provecho de esta x con la otra mano. Así que estás sosteniendo el teléfono con mano derecha y presionas con dedo o el pulgar con la mano izquierda en la parte superior aquí. Vamos a meternos en algunos do y no hacer un buen uso de Tab Bar, pero más o menos sólo sigue este patrón aquí y vas a ser bueno para ir. Vamos a meternos más en el do's y no lo que no. Así que de nuevo, usa tu uso tu barra de pestañas 45 destinos o cinco iconos son pestañas, max. Y mantén los dibujos muy sencillos como este ejemplo que te estoy mostrando aquí con esta casa detallada así. Esto es tan complejo como se quiere conseguir algo más que eso. Es demasiado complicado. Entonces lo que hay que evitar es no usar más de cinco destinos. Aquí hay seis pestañas y destinos. Todos estos son demasiado apretados. Y cuando creas una aplicación apple, tienes que enviarla a la App Store y Apple revisará tu aplicación. Y si no se ajusta a sus pautas de interfaz de usuario, en realidad te negarán de lanzar tu aplicación en la App Store. Y cuáles son sus estrictas políticas de directriz es que estas tabulaciones solo tienen cinco destinos y no seis o siete. Así que deja en claro cuál es el paso activo, el paso que el usuario está en cosas que ves en el hogar aquí tenemos este pequeño punto naranja, y también hicimos el hogar mucho más oscuro en color. Y los estados por defecto aquí de estos iconos, el perfil y el análisis. Se puede ver cómo estos son un poco más grises. Y el color más oscuro, fuente más audaz y el pequeño punto naranja ayuda. Se puede ver éste aquí. El, el, Aunque el hogar es audaz aquí y sí tenemos un poco de un contorno más negro más grueso para el ícono de casa. Todavía no está suficientemente claro en qué paso los usuarios en qué sección de la aplicación está el usuario? Estamos en el de la izquierda. Si entrecerrar los ojos y mirar, se puede ver el hogar realmente aparece por aquí. También. Recuerda usar iconos consistentes, no mezcles iconos rellenos o acariciados. Se puede ver el de la derecha aquí. Tenemos un lenguaje visual inconsistente aquí al mostrar un icono lleno para el perfil en un ícono de trazo aquí para el hogar. Nuevamente, queremos ser coherentes y estar uniformados con nuestro lenguaje visual. Entonces se utilizan cualquiera de las mejores prácticas, usa iconos rellenos y solo iconos rellenos. Iconos acariciados y solo usan iconos acariciados, pero no mezcle los dos. Pero aquí está el pateador. Puede utilizar un icono lleno para el estado activo. Nuevamente, todos son trazo cuando su estado predeterminado. Puedes ver el valor predeterminado aquí para perfil y un valor predeterminado para analizar aquí. Pero cuando el usuario toca estos, llenamos esta sección de la página analizada. También llenamos esta sección del perfil con nuestra marca. Contamos con una marca de color naranja. Puedes ver cómo puedes usar eso para ayudarte aún más y formar el estado activo de tu aplicación. Y ayuda a traer un poco de marca y un poco de sabor a los iconos también. Nunca añadas un botón en la barra de navegación. Éstas son para fines de destino, no acciones. Y luego nunca use una opción de pestaña como en casa aquí. Al igual que si solo tienes una opción, no necesitas una barra de pestañas. No hay necesidad de navegar. Usa textos pequeños, pero usa un buen espaciado entre letras en el texto pequeño. Por lo que los pequeños textos que puedes usar son de unos diez píxeles. Puedes ir todas las gorras. Utilice un espaciado de letras de 1.5 píxeles. O podrías hacer 12 pixeles. Lo que tengo aquí tout píxeles altos, altura, todos minúsculas, pero ambos tienen un espaciado de letras de 1.5 píxeles. El espacio del espaciado entre letras es el espacio entre las letras aquí. Este tipo de espaciado. Quieres un poco de MIP, espaciado de letras extra para el texto pequeño solo porque hace que sea más fácil de leer. Y no terminarás con que tus cartas estén demasiado revueltas juntas. Te mostraré aquí así. Como si fuera demasiado apretado. Eso probablemente sea demasiado espaciado entre letras. Y al igual que teníamos estaba bien. Está bien, genial. Y luego nunca use dos palabras. Se puede ver compras, casa aquí ha bajado a dos palabras, abarcar dos líneas o texto grande. Por lo que se puede ver este texto es demasiado grande. Sólo se ve caballo. No se ve resbaladizo, no se ve moderno. Y estos son, estos están destinados en su mayoría a ser piezas de navegación y no deben ser demasiado pesados como en el peso visual. Porque quieres que el usuario mire el contenido que estas pestañas albergan y cuatro y un informe versus algo que se destaca realmente fuerte así. Muy bien, pasemos a la barra de pestañas, nuestras barras de título. Por lo que una barra de título proporciona una forma confiable de guiar a los usuarios a través de una aplicación. Y una barra de título muestra información y acciones que están relacionadas con la pantalla actual. Y también se mantiene fijo, lo que significa que no siempre se queda en la parte superior, incluso cuando el usuario desliza o Scrolls. A menudo se emparejan con una barra de pestañas en aplicaciones móviles o tabletas. Por lo más común, verás un sistema como este, donde tienes el título aquí. Tienes un área de acción a la izquierda, un área de acción a la derecha. Y luego tenemos la barra de pestañas que acabamos de hablar aquí arriba en la parte inferior. Verás en una de las aplicaciones más populares es el instagram. Y usan una combinación de una barra de título y una barra de pestañas. Por lo que tienen aquí la barra de pestañas. También utilizan la técnica de un ícono lleno para el estado activo y el pequeño punto aquí para el estado activo, el estado en que se encuentra el usuario. Y luego usan la barra de título para su logotipo y algunos en la página de inicio de nivel muy aparente. Y utilizaron el lado derecho para elementos de acción. Pero puedes ver aquí cuando el usuario toca desde un nivel padre, esta sería una pantalla de nivel padre. una pantalla de nivel hijo, seguimos guardando la barra de pestañas, pero usamos más de una barra de título tradicional aquí donde tienes a los Bulldogs franceses aquí en el medio como el título y la parte posterior botón para volver a esta página de inicio. Y luego tenemos el menú de tres puntos aquí más para configuraciones que se relacionan con esta página. Y solo mira a esos lindos perritos. Mira a este pequeño de aquí. Está bien, genial. Me encanta este tipo. Tengo uno de estos perros. Su nombre es masticable. Soy un gran fan. Aquí está el desglose. Esta área aquí donde ves la batería y tu tiempo y tu conectividad Wi-Fi, eso se llama barra de estado. Y esto es un, un iOS o Apple, android tiene una versión del mismo. También se les llama barra de estado. Simplemente se ven un poco diferentes para Android versus iOS. Aquí se pueden ver los dos. Esto es Android, esta es Apple. El desglose en su mayoría es la sección superior izquierda aquí. Esto se usa principalmente para el botón Atrás o un icono de menú. El apartado medio aquí es para el título para dispositivos Android, el título puede ser sobre alinear a la izquierda. Prefiero que estos estén en el medio, pero depende de la, si estás diseñando una aplicación para Android versus Apple, tienen dos tipos diferentes de experiencia de usuario y usuario lineamientos de interfaz, y hablaré con ambos a lo largo de la clase. Puedes hacer esta sección aquí con la barra de estado encima de la barra de título estando del mismo color. Tengo una altura de 50 a 80 pixeles. Y de nuevo, esta zona correcta es un gran lugar para las acciones. Por lo que un poco tienes este título. Da contextos y ubicación para el usuario. Tienes el botón Atrás que permite al usuario navegar de regreso a donde eran. Y luego tienes elementos de acción en la parte superior derecha que se basan en los contextos que el usuario está viendo. También puedes tener botones aquí arriba. Puedes tener cancelaciones salvo la belleza de éste es que los botones son muy como siempre en tu cara. Si te estás desplazando por un sitio, los botones siempre están ahí, se quedan fijos donde hablamos con las barras de pestañas. No queremos ningún botón en nuestros sistemas de tap, pero podemos tenerlos en la barra de título. Estas son cuatro acciones muy importantes aquí como guardar o cancelar espectadores, poner algo de información y basado en tu configuración. O queríamos que estos botones no se perdieran. Para un relleno muy moderno. Personalmente me gustan los textos pequeños, todas las tapas con mucho espacio entre letras. Se puede ver el ejemplo aquí. A la izquierda, tienes título, de nuevo, todos los gorras. Y se puede ver el de la derecha. Estoy usando 12.1212 píxeles de altura, todas las mayúsculas con espaciado de letras de 2.5 píxeles. Y sólo hace que la aplicación se vea mucho más moderna como, Bueno, lo haremos ahora mismo con este texto aquí. Si lo selecciono, le di mucho espacio entre letras aquí. Hace que la aplicación se vea un poco más elegante, hace que se vea un poco más moderna. Y lo que queremos hacer es evitar algo demasiado apretado como si estuviéramos pasando aquí. Demasiado apretado como esto es solo 0. Esto es por defecto. Para mí eso es demasiado apretado. Tenemos que hacer que esto respire un poco más. Poco pro tip para ti ahí. De acuerdo, Así que las barras de marea en Apple, tienen dos tipos diferentes. Tienen aquí un título estándar que tiene el, lo que acabamos de hablar, una acción a la derecha, botón Atrás a la izquierda y el título de la página que estás mirando en el medio. Y tienen un título de texto grande, que es el título en la parte superior se mueve debajo del, el botón Atrás. Y de nuevo, nada cambia con el ítem de acción. Y esto ocupa más pantalla inmobiliaria frente a la de la izquierda. Simplemente depende la aplicación y a veces del dispositivo Apple, te permitirá establecer grandes títulos dentro del sistema operativo. Di por, por un poco mayor, tus ojos no son tan buenos. Es lo que llamamos una función de accesibilidad. Y ayuda a las personas que no pueden ver pequeños textos a ser capaces leer estos poco más fácil para ellos. La diferencia aquí entre Android a la izquierda y apple, también conocida como iOS a la derecha, es más o menos lo mismo. Es sólo que el título generalmente se centrará para los productos de Apple. Y luego en Android dejarán alinearlo por aquí. El mismo tipo de trato cuando se trata elemento de acción es en su mayoría siguen el mismo paradigma donde tienes elementos de acción en la parte superior derecha de tu barra de pestañas. Es, los títulos irán a la izquierda frente a medio aquí. Me gusta medio porque nos permite utilizar este espacio aquí para cualquier botón trasero o ese tipo de navegación. Normalmente me gusta estilo donde tienes los elementos de acción del botón Atrás aquí y un título en el principio o en el medio. Y no importa, aún podrías diseñar una aplicación Android. Y todavía puede tener el título aquí en el centro del botón Atrás, los elementos de acción a la derecha, y está totalmente bien. Muy bien, otra cosa que puedes hacer aquí Eso es bastante limpio como de nuevo, la corteza del título siempre se mantiene fija. Lo que significa que a medida que el usuario desliza hacia abajo en una aplicación móvil o tableta, la barra de título no va a ninguna parte. Pero puedes hacer este truco donde como usuario estoy deslizando hacia abajo, nuestro deslizar hacia arriba. Y así estoy empujando el contenido hacia arriba, es decir que estoy interesado. Quiero ir a ver más de esta sección, lo que esta sección tiene para ofrecer. Cuando eso suceda, en realidad puedes mover la barra de título en una posición, verás que se va. Y luego cuando me muevo hacia abajo, lo que significa que quizá quiera navegar fuera de esta sección, entonces verás que la barra de título reaparece en base a esa interacción. Verás airbnb usa esto en su aplicación móvil o en su, su sitio web en la web también cuando vayas en dispositivos móviles o tabletas. Y te voy a mostrar un pequeño adelanto aquí. Ya lo puedes ver. Aquí está su barra de título en la parte superior. Esto es que también han agregado algunos filtros en el título. Y tienen la barra de pestañas aquí en la parte inferior. Puedes tocar entre como riesgo, inicio de sesión, deseos, tus estancias. Cuando desliza hacia arriba o desplázate hacia abajo, ves cómo se fue la barra de título y ellos también quitarán la barra de pestañas. Entonces, cuando desliza hacia atrás hacia abajo, verás que aparece cuando desliza hacia atrás hacia arriba. Muy bien, así que estoy deslizando hacia abajo. Nuevamente. La idea aquí es que te interesa, sabes que tu acción es informar al sitio que estás más interesado en el contenido en este momento, cuando desliza hacia atrás hacia arriba, tu acción podría ser relevante para, Oh, ¿necesitas hacer algo con este contenido o navegar fuera de esta pantalla? Se puede ver cómo responde esto, así que están diciendo, vale, aquí está, aquí está su tableta. Te vamos a dar esa barra de pestañas. Aquí está tu móvil. Te vamos a dar esa barra de pestañas. Pero ya ves cuando vamos a la web, no usan la barra de pestañas. La barra de pestañas no es un patrón de palmada. Es un patrón móvil y tableta. Muy bien, genial. Así que lo último que que ver antes de entrar en algunos do y no es que la barra de título realmente puede cambiar y mostrar acciones basadas en la entrada del usuario. Por lo que tenemos aquí una barra de título de navegación predeterminada. Y lo que sucede es cuando el usuario toca una de estas fotos, la barra de navegación cambia y daremos acciones basadas en esa interacción del usuario. Han tocado una foto. Ahora la barra de pestañas cambiando de contextos, lo siento, la barra de título cambiando de contextos a una barra de título orientada a la acción. Por lo que es dejarte saber que tienes uno seleccionado y te está dando opciones que podrías hacer. Podrías eliminar éste, puedes enviarlo. Y luego tienes el menú de desbordamiento, que también se llama menú de kebab sheesh o un menú de kebab aquí, que solo alberga más acciones que están relacionadas con esto también. Es así como puedes usarlo desde un punto de vista de interacción y no solo tenerlo estrictamente para comunicación y contextos y ubicación, sino que puedes tenerlo orientado a la acción. Recuerde resumir, la mayoría las aplicaciones que utilizan la barra de pestañas en la parte inferior, barra de título en la parte superior, es un patrón de diseño común. Ahora vamos a conseguirnos algunos hacer y no lo que no. Tu título para una barra de pestañas debe ser lo suficientemente corto como para adaptarse al espacio. Es como preguntas frecuentes. Y entonces no hagas el título demasiado largo que tenga dos elipses de los tres pequeños puntos aquí. El título debe ser lo suficientemente corto como para volver a encajar el espacio. Y luego otra vez. No hagas el título II largo que tenga que entrar en dos líneas eclipsando, o dos líneas aquí. Coloca aquí las acciones suficientemente ajustadas en la barra de título como tres a cuatro max, cinco es una especie de empujarla. Ves seis aquí es demasiado. Y si tienes un título largo, simplemente no va a fluir con las acciones aquí. Tres es tu número mágico. Ten cuidado con la altura, sobre todo cuando esto se va a arreglar. Esto va a tomar bienes raíces ya que un usuario pasa por su aplicación, también puede tener una barra de pestañas aquí en la parte inferior derecha. Así que eres, eres, eres, estás limitando tu contenido visible aquí solo por esta sección aquí. Así que ten cuidado con la altura de esta barra y no quieres ni por tu barra de título y no quieres que sea demasiado apretada, demasiado alta que otra vez, constricta el contenido abajo y no le da suficiente espacio para ese contenido. Ahí vamos. Hay barras de pestañas y barras de mareas. Te veré en el siguiente video donde cubriremos acordeones y pestañas. Te veré ahí. 12. Acordion y Tabs: Muy bien, vamos a hablar de acordeones y pestañas. El menú de acordeón es una lista de encabezados apilados verticalmente en los que se puede hacer clic, tocado , para revelar u ocultar detalles importantes de una sección. El término acordeón proviene del instrumento musical en el que la función primaria es ampliar y contraer. Entonces de ahí es de donde sacamos eso. Se trata de un menú que se expande para mostrar información y luego se contrata para ocultar información. Lo verás usar para como preguntas frecuentes donde la pregunta es el encabezado o el titular y luego lo abres y ves las respuestas a esas preguntas. Lo verás para anuncios de eventos donde el evento es el encabezado. Y luego tocarás y se ampliará y mostrará los detalles de ese evento. Hemos utilizado recientemente en una aplicación de automóvil donde puedes abrir el acordeón para ver complementos y seleccionar qué tipo de complementos querías decir para estéreo o rems o el interior de un auto. Se veían así. Este es el estado predeterminado donde contiene la información de nivel padre. Usted tiene. Aquí los encabezados. Como un usuario toca sobre él, nos aseguramos de resaltar el encabezado para que el usuario sepa a qué se refiere o se relaciona el nivel secundario de información. Y también la flecha aquí, va unos 180 grados para transmitir aún más que esta cabecera está abierta. Nuevamente, tenemos el estado predeterminado, tenemos el estado activo. Y la función realmente importante de un, un acordeón es que cuando el usuario toca en Wi-Fi es lento, lo que sucede es que cierra el titular que actualmente está abierto, abierto, y luego revela al niño información de nivel en el titular que el usuario acababa de tocar o hacer clic. Se cierra, paga mi factura, paga mi factura va al estado predeterminado y en Wi-Fi es lento, va al estado activo y revela la información de nivel infantil. Basado en ese nivel de padres. Los pros y los contras para estos es el proceso que ayuda a los usuarios a encontrar contenido que son que están buscando simplemente categorizando encabezados. Simplemente pueden descremarse a través de todos los encabezados, encontrar el que buscan y abrirlo. Hace que sea fácil escanear esa información del nivel de los padres y de nuevo, sumergirse más profundamente en la información del nivel del niño. Y es una herramienta útil cuando tienes mucho contenido. Y quieres ocultar cierto contenido, haciendo que el conjunto de contenidos sea más digerible de un vistazo. Y luego el usuario puede decidir en cuál quiere sumergirse más profundo. El estafador es tratar de no usarlos por más de diez opciones porque saltan mucho y tratan de no tener demasiada información de nivel hijo que haga que el próximo encabezado vaya por debajo de la reunión de pliegue, debajo del área de visualización que el usuario está mirando, entonces no puede ver la opción de nivel padre. Si tienes muchas opciones de nivel infantil que empuja todo, todos los demás padres bajan. Y el usuario tiene que ir bastante lejos para ir a buscar otro nivel padre, o tienen que volver a tocar ese encabezado de nivel padre aquí. Entonces si el usuario vuelve a tocar, paga mi factura de nuevo, se cerrará. Entonces paga mi factura aquí, abre, toca pagar mi factura aquí cierra también. Pero si tienes mucha información de nivel de padres o lo sientes, información de nivel hijo, empuja todos estos encabezados hasta el final por debajo del pliegue así. Al abrir y cerrar diferentes cabeceras, tienden a rebotar alrededor y no mantenerse consistentes en la ubicación. Y esta es la ventaja que te hablaré de pestañas. Como las pestañas no saltan, se mantienen en posición cuando el usuario las toca. Pero acordeones, ya sabes, como tú, como estás mirando pagas mi factura y tomas Wi-Fi es lento, se cierra, paga mi factura y el Wi-Fi salta aquí para que reboten en ese sentido. También puedes usar botones plus en lugar de las flechas. Y luego en el estado activo, los botones del botón más van a menos. Puedes utilizarlos en combinación con casillas de verificación también. Puedes ver aquí tenemos características tecnológicas que tocas. En realidad estamos mostrando un número, por lo que tienes 0 seleccionado, tenemos cuatro opciones. El usuario puede tocar fácilmente en C, las cuatro opciones que desea. Tenemos las casillas de verificación aquí a la derecha primero con el precio basado en cada característica. Y pueden seleccionar cualquiera de estas características que tenemos que también crece el número aquí a partir de dos de cuatro opciones. Simplemente tenga este nivel paralelo que el usuario pueda ver. Tal vez tengan que hacerlo. No haríamos de esto un color diferente. Haríamos esto algo así como azul, así. Pero a nivel de padres, pueden ver cuántas actualizaciones ya han seleccionado en función de características tecnológicas o actualizaciones de audio o altavoces. También vamos a las opciones conseguirles 20 gemelos, digo. Muy bien, genial. Así que recuerde mantener el contenido de nivel hijo. Ese es el contenido en el interior que se relaciona con el nivel padre. Mantén ese contenido corto y dulce. Entonces recuerde, no use, evite usar mucho contenido de nivel hijo. Se puede ver como si dijera pagar mi factura y abro esto, estoy como, whoa, eso es mucho. Ahí es donde si tienes esto de acuerdo, no es el mejor mecanismo. Es posible que desee simplemente llevar al usuario a una página separada. O tengo un video aquí en modales y cajones. Y esta sería una opción perfecta para mostrar una fila de tareas solo toma el inmueble completo y el usuario puede cerrar de nuevo y terminar aquí. Si tienes ese problema, este no es el mejor patrón para eso. Si tienes mucha información infantil, este no es el mejor patrón para eso. He visto esto una vez y esto es súper raro. No coloques un acordeón dentro de acordeones. Al igual que los acordeones no deberían tener un padre, un hijo y un nivel de nieto. Es sólo padre e hijo. Así que vi esto una vez y fue súper raro y rebotó alrededor. Realmente me perdí en cuál estaba abierto, ¿cuál estaba cerrado? Por lo que de nuevo, no noten acordeones dentro del propio acordeón. Entonces recuerda, si un usuario va a tocar otra opción, cierra la que ya estaba abierta. No dejes que el usuario abra más de una opción a la vez. Entonces también asegúrate de tener distinciones claras entre los encabezados. Se puede ver aquí usamos las líneas en ésta aquí y vemos estas lineas aquí, estas líneas grises, ayudan a dar las secciones. Y así cuando no tienes esas secciones y abres el acordeón, es difícil ver dónde termina la información de nivel hijo y dónde entra el siguiente titular padre. Eso es acordeón. Entonces vamos a hablar de pestañas. Las pestañas son una de las formas más comunes presentar secciones de categorías. Y permiten que un usuario haga clic y toque en cada categoría, vea el cambio de contenido en función de su selección. Nuevamente, son muy similares a la barra de pestañas de la que hablamos. Simplemente aparecen en la parte superior de los sitios web y por lo general no aparecen en la parte inferior si se cierran en un botón en la parte inferior o necesitas navegación inferior, luego ve a usar las reglas que pertenecen a la Barra de pestañas. Se llaman pestañas porque el origen de la misma, se relaciona de nuevo con el archivador de oficina. Y puedes notar las pestañas sobresalen como estos nivel de información de los padres. Y luego podrías sumergirte en estos, abrirlos y ver que son información relevante de nivel infantil aquí para que puedas ver cómo se remonta a esa arquitectura de la información Hablé en el último video. Estos son comúnmente utilizados para los menús de pedidos de alimentos. Utiliza fichas para el desayuno, el almuerzo, el desierto, o diferentes tipos de categorías de alimentos como comida china o pizza, hamburguesas italianas. Son geniales para dashboards, son geniales para herramientas analíticas. Las barras de navegación en dispositivos Android las usan mucho. Resultados de búsqueda de Google, puedo pensar en todas las imágenes, etcétera Muchos, muchos, muchos casos de uso para pestañas. Son mucho más comunes que los acordeones. Puede ver pestañas para móvil, de nuevo, la barra de pestañas siempre debe ser fija y en la parte superior, nunca poner estas en la parte inferior. Porque si vas a usar estos para la parte inferior, ve a recoger una barra de pestañas y usa ese conjunto de reglas. Hay un conjunto diferente de reglas aplicadas a las barras de pestañas luego solo pestañas. Puedes usar hasta cinco opciones como máximo, sin deslizar horizontalmente, lo que significa que el usuario en una tableta o dispositivo telefónico puede deslizar horizontalmente diferentes pestañas. Esa es realmente las distinciones claras entre una barra de pestañas y pestañas es que barras de pestañas están en la parte inferior y las barras de pestañas nunca tienen deslizamientos horizontales. Sólo hay cinco opciones, max y pestañas. Estos pueden vivir siempre en la parte superior de un sitio, y pueden tener un golpe horizontal, lo que significa que pueden tener más de una opción. Pero por lo general se quedan en la cima porque son configuraciones globales ahí de nuevo, similares a los destinos. Y puedes tener mucho más de cinco con deslizar horizontal. Puedes ver aquí tenemos la barra de título en la parte superior con el logo y nuestro menú de perfil aquí. Entonces tenemos un menú de barra de pestañas secundaria en la parte superior, tiene 90 píxeles de altura. Tenemos los textos que todos los mayúsculos aquí, 11 píxeles de altura con dos píxeles de espacio entre letras otra vez, por lo que todo tapas poco de espacio entre letras. Se puede ver cómo funciona esto como usuario al que solo toco. Y pude ver el elemento no es contenido que se relaciona con el ítem dos aquí. Y si vuelvo a tocar a uno, degustando de nuevo a uno, si toco en tres, me lleva de vuelta a tres. Aquí hay algunos ejemplos de pestañas para la web. Tenemos más de cinco opciones aquí siempre y cuando encajemos en web en consecuencia. Y de nuevo, el usuario puede aprovechar estas diferentes pestañas. Este tipo de imita esa estructura de archivo del gabinete. Cuando piensas en este tipo de información, esto es similar a la donde estás haciendo clic en diferentes pestañas para revelar la información del nivel padre. Y aparentemente la información podría tener botones y texto y fotos e ilustraciones e iconos. Aquí hay una navegación de estilo de pestaña superior. Puedes usar esto para web. Entonces tienes una navegación de pestañas de nivel lateral que puedes usar para web, pero puedes utilizarla solo para tablet. Pero no tenemos suficiente con bienes raíces para dispositivos móviles. Para esto. Si se trataba de un dispositivo móvil, realidad solo estás mirando algo así como mucho de bienes raíces, ¿verdad? Por lo que están mejor para dispositivos web y tablet. Y si hace clic en el elemento dos aquí, se abre el elemento dos y se puede ver la idea que hizo clic en el elemento uno va al elemento uno. De acuerdo, vamos a ver el golpe horizontal. que puedas ver aquí tenemos un sistema de pestañas en la parte superior que tiene más de tres opciones aquí no sabemos realmente cuántas opciones son. Pero hacemos una técnica poco explícita es que queremos una de las opciones, digamos esta opción para que aquí se corte a la derecha. Lo que esto hace es esto es el traspaso. Transmite al usuario que hay más opciones ocultas para que puedan ir y deslizar. Donde si acabas de tenerlo, donde eran sólo las tres opciones y estaban perfectamente igualmente espaciadas aquí, así. Eso no transmite deslizamientos horizontales. Así que siempre queremos cortar uno de estos fuera sólo para dar esa señal visual que hey, usuario en la opción número cuatro y estoy por aquí, ven, ven a buscarme. Tipo de cosa. Solo recuerda, este deslizamiento horizontal solo debe usarse para tabletas y dispositivos móviles. Nunca use desplazamiento horizontal para web. Nadie quiere desplazarse horizontalmente con como el, la barra de navegación en web como esa es simplemente demasiado. A menos que estés haciendo una hoja de cálculo, si estás diseñando un sistema en un dispositivo de escritorio que es una hoja de cálculo entonces sí, puedes usar desplazamiento horizontal, pero no aquí. Ejemplo de la aplicación que actualmente estoy trabajando aquí. Puedes ver, puedes ver las pestañas aquí, día, mes y año. Puedes deslizar horizontalmente para más opciones. Y de nuevo, intencionalmente hicimos este ciclo de factura uno fuera a la derecha solo para informar al usuario que aquí hay más que puedes deslizar. Nuevamente, estos permanecen en posición. Puedes ir a mes, puedes ir al año y ver lo fácil y suave que puedes transitarlos. Doordash tiene el mismo ejemplo aquí, por lo que tiene las pestañas aquí. Si toca y tira y empujas, a la derecha, verás más de la pestaña. Entran ejemplos y están cortando un poco de los regalos. Y te mostraré que así es como se ve en su sitio móvil. Un poco de corte pasando aquí. Se puede ver el mismo sistema aquí usado para web, pero no hacen desplazamiento horizontal. Te dan estas pequeñas flechas y te permitirán ir y venir. Todavía está cortando algunos de estos temas aquí en estas pestañas. Pero así es como funciona. Y si entras en Regalos, entonces va a informar todo el contenido relacionado con el regalo. Se puede ver cómo funciona eso. Y luego volviendo ahora, esto es en un dispositivo móvil, lo harías en la web. Pero si dice en mi dispositivo móvil, sería capaz de deslizar estas categorías, mirando cómo keith, esto es estos pequeños hover. A ver que todos tienen pequeñas ilustraciones a ella. Súper lindo. Vamos a entrar en algunas mejores prácticas para las pestañas. Siempre toma el ancho completo. Incluso si tienes dos artículos, toma el ancho completo. No hagas sólo como un ancho proporcional para móvil, como este espacio vacío aquí. Nunca hagas una pestaña. Si tienes una pestaña, no necesitas hacerlo. Al igual que si solo tienes un nivel de información, no necesitas una pestaña, al igual que deshazte de ella. Utiliza deslizar horizontal en pestañas móviles. Si lo mantiene en la parte superior, y luego nunca poner deslizar horizontal en la parte inferior aquí. Y la razón por la que es muy extraño tu pulgar pase y deslizar estos diferentes artículos aquí. Y si solo quieres, solo dale un tiro, ve en tu teléfono y solo con pulgares empieza a deslizar hacia la izquierda y duele como si fuera fuera extraño después de un rato. Al igual que nuestros dedos están más adaptados para deslizar hacia arriba y abajo y no izquierda y derecha. Está bien, genial. Eso fueron acordeones y pestañas en pocas palabras, y espero que haya disfrutado ese, te vea más en tooltips y sombras en el siguiente video. 13. Consejos y sombras de herramientas: Muy bien, Bienvenido al siguiente tema donde vamos a hablar de tooltips y sombras. Sugerencias sobre herramientas. Es un mensaje aditivo afirmativo y útil que aparece cuando un usuario interactúa con un elemento o una pieza de contenido. Y las sugerencias sobre herramientas generalmente se inician a través de un clic del ratón o toque en un dispositivo móvil. Y de nuevo, son informativos. No deberían ser instrucciones. Solo deberían ser un poco de información adicional si un usuario quiere saber un poco más sobre una pieza específica de contenido que está mirando. Se veían así. Digamos que tenías, aquí tienes un ejemplo de un ejemplo de icono de signo de interrogación donde tienes número CVE y si los usuarios no están seguros de qué es un número CVE en su tarjeta de crédito, pueden pasar el puntero o tocar este ícono. Y entonces esto te daría un poco de información sobre cuál es el número CVE. Y de nuevo, si haces este hover, solo recuerda que puedes hacer clic fuera de esto cuando r, Si haces click en esto, puedes hacer clic fuera de ella para cerrarlo. Si está en el hover, esto se cerrará automáticamente con el ratón alejándose. Y luego para dispositivos móviles puedes tenerlo flotando para web. Y luego para Mobile hazlo donde un usuario toca sobre él para abrirlo y le tocan, luego se cierra. También puedes usar el otro común que es un ícono de info. En lugar de una pregunta que icono de información, mismo tipo de principio aquí este pequeño consejo de herramienta aparece este pequeño consejo de herramientay de nuevo, esta es la información sobre herramientas. Es esta pequeña esta cajita aquí que es la información sobre herramientas usualmente tiene una pequeña flecha apuntando a algo, pero no tienes que tener eso. Pero es otra vez, una pequeña pieza aditiva de información. Puedes usarlo para aclarar un ejemplo de acción aquí. Entonces si tienes opciones de envío o botón que puede no ser tan claro para el usuario cuando se desplaza ahí, mouseover , te da un texto un poco más descriptivo de lo que hace ese botón. puede hacer lo mismo para los iconos. Tienes este ícono aquí, esto aparece. Pero solo recuerda si esta es tu forma principal de educar a un usuario de lo que hacen estas acciones, y esta experiencia de usuario va a vivir en tabletas y productos móviles de lo que no es esto, este no es lo suficientemente bueno porque no hay no hay flotación en productos móviles y dispositivos de tableta también. Así que mejor tal vez agregar algo de texto por aquí para decir duplicado versus solo un icono. Si ese es el caso. Si solo es una aplicación web, entonces sí, puedes hacer algo como esto y utilizar hover para dar esto. Voy a ir a abrir mi email muy rápido y puedes escribir algunos de los emails para mí. Sólo estoy bromeando. Se podía ver cómo en Google lo hacen. Como ¿Cuál es esta pequeña pregunta? Oh, es apoyo. ¿Qué es este pequeño ícono? Oh, es ajustes. ¿ Qué es esto? Oh, es Google Apps. Hicieron lo mismo aquí por esto también. Nuevamente, cuando tú, cuando usas un consejo de herramienta y no estás seguro basado en la información con la que estás trabajando. Si necesitas un consejo de herramienta, solo pregúntate esto, como mira esa información y ve, es esta información que quieres poner en una punta de herramienta necesaria o importante para que el usuario complete su tarea. Si es sí, entonces muestra la información. No lo ocultes en una información sobre herramientas. Si no lo es, no es necesario, solo es texto útil o contenido útil, entonces sí, puedes ponerlo en una información sobre herramientas. He usado este en un producto para editar, realizado muy bien, es que tienes este conjunto de campos de formulario aquí. Del estado predeterminado. Sólo son estas cajas grises. Pero tan pronto como un usuario coloca el mouse en uno de estos campos de formulario, esta información cambia y se basa en el formulario que estás rellenando. Si no estás seguro de qué es un número de medidor eléctrico en tu casa. Una vez llegas a esto y pasas el cursor sobre el ratón o estás haciendo clic en este campo de formulario. Este consejo de herramienta cambiará para dar información explícita sobre lo que es este medidor eléctrico. Una pequeña foto aquí, fue junto con ella para mostrar cómo encontrarla. Esto se llama información sobre herramientas en línea, lo que significa que aparece cuando el usuario está en línea o en enfocado o flotando sobre uno de estos elementos aquí. Teníamos aquí la misma caja que relacionada con los estados del servicio eléctrico. Entonces cuando el usuario estaba en la fecha de servicio o flotó su mouse sobre esta sección, presentó esta herramienta o se presentó este consejo de herramienta para dar una explicación de lo que era esto y lo que esto tipo de contenido fue. Me encantan estos. Creo que estas son formas súper inteligentes de hacerlo. Y si recuerdas el primer video, hablé de hacer solo una forma de columna diseños como este se empareja bien con el espacio vacío para un diseño de una sola columna, un poco más complicado si está en el móvil. Plataformas móviles, pero para web que somos realmente geniales. Vamos a entrar en algunos do y no recuerden, no pongas demasiado contenido. Demasiado. Simplemente debería ser un poco útil de la mayoría como tres o cuatro líneas de mensajes de texto simplemente no debería ser como una frase. Recuerda, no uses cierres, tu herramienta principal para las comunicaciones. Sobre todo si esto va a vivir en un escritorio o una tableta o producto móvil, agrega contextos si es para usuario móvil, como poner aquí la palabra duplicar. Y también puedes hacer lo mismo y sobrecomunicarte para web cuando el usuario pasa el puntero sobre eso. No pongas información importante en un consejo de herramienta. Si estás haciendo que alguien ponga una contraseña y hay requisitos de contraseña, no los tengas en la información sobre herramientas mejor para hacerlo aquí. También puedes fallar lo que llamamos validación en línea, que hablé antes. Puedes dar indicaciones verdes y rojas sobre si hay reescribiendo su contraseña o estableciendo aquí una contraseña que está pasando este criterio. Estamos viendo que la contraseña no puede ser la contraseña antigua. Decían: Oh, parece que no pusiste una mayúscula, al menos una letra minúscula. Te pusiste bien. Tienes ocho personajes más. Tienes al menos dos cartas y otra falla, necesitamos al menos un número para hacer una contraseña adecuada, ¿verdad? Por lo que no quieres que estas cosas oculten en una información sobre herramientas. Esta es información importante para que el usuario complete su tarea. Deberíamos exponerlo. Vamos a repasar las sombras. La regla número uno es no solo usar una sombra predeterminada, nunca. Justo cualquiera que sea el estado predeterminado de sombra, no lo use. Tienes que agregarle. Entonces aquí están los pasos. Tienes la sombra predeterminada aquí tengo esta pequeña tarjeta con un pequeño icono de helado lindo. Quiero agregar una sombra predeterminada a esto. Aquí mismo. Nos va a dar cuatro píxeles en el eje y. Entonces abajo y 0 en la x, realmente nada en la x por aquí, Blair va a ser cuatro. Llegamos aquí con veinticinco por ciento de opacidad. Por lo que el siguiente paso aquí en el paso dos es sumar más al eje x y al eje y. Por lo que dimos 55 en este punto. Ahora puedo ver un poco más de sombra en la línea vertical aquí en el eje x. El siguiente paso, el más importante es agregar algún desenfoque. Pasamos de cuatro a 35 píxeles desenfoque en él. Y se pueden ver las sombras demasiado agudas ahí, es demasiado dura. Como recuerdo en el video de los botones, decíamos mirando las sombras de botones y no seas demasiado duro con las sombras como si hubiera que ser suave y sutil. Entonces puedes ir por la milla extra aquí. Puedes añadir un poco de color a la sombra. Usualmente me gusta usar un gris azulado, no demasiado azul, no demasiado gris, sólo un poco justo en el medio ahí. Haremos que esto parezca muy moderno. Muy limpio. Te da esta bonita sombra de aspecto frente a este borde duro predeterminado. Por defecto aquí, empezando a mejorar un poco con el desenfoque. Y entonces es solo el sutil, bonito gris lo que hace que esto sea realmente bonito. También puedes usar unas sombras interiores. Esto ayuda a crear profundidad aquí para que no puedas ver ninguna sombra interior aquí. Y ahora que tenemos la sombra interior para esto, este círculo de progreso o círculo pastel aquí. Y crea un conjunto de profundidad que esto se está llenando. Esa sombra interior ayuda mucho y son los mismos principios con la sombra interior. No demasiado duro. De nuevo, sólo debe ser, darle un poco, darle un poco de borroso agradable, algún color agradable. Algunos lo hacen y no. Y entonces voy a, en realidad sólo voy a hacer algunas sombras rápidas para que puedas ver, no pongas sombra en el texto. Si tienes una foto aquí y estás como, Oh hombre, mi texto no lee, bueno, no lo resuelvas poniendo una sombra. Lo que hay que hacer es ajustar la foto para que puedas ver aquí hemos añadido una superposición más oscura sobre la parte superior de la foto y luego poner el texto encima para que destaque. Cuando estuve en la escuela de diseño durante todos los años que estuve allí, había en San Francisco en la Academia de Arte Universidad. Había una mujer llamada Mary Scott durante los cuatro años enteros y todo el programa, incluso si te fuiste a un maestro, dijo masticada y fue infalible. Nunca querría ver sombra en un texto nunca. Y luego fue gracioso porque simplemente nunca ponemos sombra en los textos. Y un día tuve mi primer trabajo. Uno de los directores creativos viene porque hago pop ese texto, le pongo una bonita sombra. Estoy como, está bien, genial. Así que de nuevo, se trata de conocer las reglas, pero también se trata de saber cuándo romper estas reglas. Pero regla bastante dura aquí que podrías seguir es simplemente no lo pongas, no resuelvas textos siendo legible sobre una foto con una sombra como tú tienes que manipular la foto. No hagas que tus sombras sean demasiado fuertes. Como esto es demasiado fuerte. Se puede ver el de la derecha. Este tiene un agradable, apenas poco sutil sabor de una sombra. Lo divertido es que puedes hacer que la sombra oscurezca en ese color y opacidad en el hover. Recuerda que la filosofía de un buen hover es que cobra vida. Es como comprometerse conmigo. Aquí se puede ver que esta es una gran técnica para una bonita sombra y luego nos pondremos un poco más oscuros. El color, la opacidad para el hover. Realmente crea el sentido de profundidad donde esta cosa es como un poco más alta que la que está debajo de ella es la de aquí. Así que de nuevo, agradable, agradable, sutil uso de un hover allí. Y luego normal. No pongas demasiado color a la sombra. Como esto es demasiado Como esto está bien. Esto es demasiado. No uses estos bordes duros. Mantén los bordes suaves. Vamos a seguir adelante y simplemente hacer una sombra rápida. Voy a copiar este círculo por aquí. De nuevo, estamos tratando de llegar a este tipo de funciones aquí, pero nos divertiremos un poco. Tenemos la tarjeta blanca que voy a la herramienta llamada Figma. Tendré unos pequeños proyectos al final de los videos que van a pasar y en realidad construiremos algunos de estos patrones de diseño que también estás viendo aquí. Pero antes de que lleguemos, solo puedes ver cómo funciona una sombra dentro de la herramienta figma. Vamos a tirar de esto un poco. De acuerdo, así que voy a añadir un efecto aquí. Y tenemos nuestras gotas, sombra aquí. Aquí están las variables. Entonces aquí está mi x, aquí está mi y otra vez para querer hacer 55. Muy bien, así que tenemos nuestro eje x e y en marcha. ¿ Qué es lo siguiente que haces? ¿ Qué hacemos otra vez? Aire y se supone que debemos hacer borrón. Oh sí, así es, difuminar. Vamos a volar esta cosa. 35. Eso solo ya se ve realmente bien. Y luego otra vez, iremos agregando un poco de gris azulado a la sombra. Boom, ahí tienes, eso es genial. El gran look. Ashanti se acabó un poco esos bordes. Eso se ve bien. Vamos a ver la sombra interior. mismo tipo de principio aquí solo agregamos una sombra, Omeka, sombra interior. La única diferencia con las sombras interiores que quieres poco, no tanto desenfoque. El mismo principio sin embargo. 55 aquí, los bordes duros siguen apareciendo. Solo queremos suavizar esos bordes. Por lo general como 15 será bueno. No necesitas ir a como 35 porque lo que pasa es simplemente llena toda la forma. Apenas 15 es bueno. De nuevo, queremos hacer un poco de lo azul. Puedes añadir un poco de color aquí si así lo querías. Ahí vas. Esa es una bonita sombra. Genial. Entonces hay información sobre herramientas y sombras, y te veré en la siguiente clase. Hablaremos de miniaturas y carruseles. Nos vemos ahí. 14. Miniaturas y Carousels: Muy bien, Bienvenido a la siguiente clase. Vamos a hablar de miniaturas y carruseles. miniaturas son bastante simples ahí, hay pequeñas imágenes que dan a un usuario una visión general de múltiples imágenes. Es una especie de adelanto de lo que viene a continuación. También suelen estar emparejados con una imagen maestra más grande. Y cuando el usuario hace clic y toca o toca una miniatura, la imagen maestra entonces revelará aparecerá como la misma imagen, lo que estaba en la miniatura en ese punto. Por lo general, puedes marcarlos como unos 100 píxeles de altura por un ancho de 100 píxeles. Son realmente geniales para mostrar diferentes fotos de productos. También ayuda a cargar imágenes más rápido ya que el navegador no necesita cargar todas las imágenes de tamaño completo, solo puedo cargar las pequeñas miniaturas y solo cargar una imagen renderizada completa de tamaño completo. También es genial si los usuarios quieren. Permite a los usuarios navegar rápidamente a través de colecciones de imágenes. Y esto es muy similar a la fototeca de tu dispositivo móvil. Estas son todas pequeñas miniaturas aquí. Algunos lo hacen y no. Nuevamente, la miniatura debe llenar el espacio del mismo tamaño. Y se pueden ver los de aquí donde estas miniaturas no están llenando el espacio. Son sólo que podrían ser imágenes diferentes tamaños de algunos pueden ser horizontales. Formato de imagen, algunos pueden ser como versiones retrato u horizontal. Aquí se puede ver el paisaje de éste , el retrato de éste. Pero de nuevo, todos estos deberían llenar este espacio. Para que así tengas esta bonita imagen de campo, no tienes estos raros espacios blancos, inconsistentes. Se puede ver esto mucho. Realmente me gustan las miniaturas de Nike aquí. Ahí. Puedes tener un pequeño video de este tipo luciendo sus zapatos aquí. Y luego de nuevo, puedes hacer click en estas miniaturas a la derecha aquí, y se mostrará por aquí. Bastante genial. Creo que realmente buen trabajo de imágenes maestras y miniaturas pasando por aquí. Soy como el sitio web de Él. Pasemos a los carruseles. Entonces los carruseles lo son, casi permiten que múltiples piezas de contenido ocupen un solo espacio. El usuario se involucra mucho como una presentación, como me gusta, como una presentación de diapositivas. Y a veces un carrusel puede reproducir automáticamente, lo que realmente se ve como una reproducción automática de una presentación donde cada pieza de contenido se mostrará por un breve periodo de tiempo. Y luego otra pieza de contenido saltará por la misma cantidad de tiempo y se carrusel a lo largo de ese tipo de contenido. Es por eso que se llama carrusel. Es como un eres como si estuviera moviendo carrusel con caballos. Como uno. Cada cosa tipo de juega a la vez. Si quisieras hacer un sitio web como este donde tengas imagen aquí, imagen uno, un texto de llamada a la acción. Y luego esto permanece por un periodo de tiempo. Y luego entra otra imagen y tienes una imagen para, otra imagen se convierte en una imagen de ti planeas hacer eso. Detener. Sobre todo si esta es la imagen héroe de un sitio web. Definitivamente no hagas eso. Esta es una especie de anti-patrón para las células de cuidado. Entonces lo que queremos es tan pronto como un visitante acuda a tu página web, ellos deberían poder contar qué se trata tu negocio. Eso significa tener un solo mensaje claro y un pedazo de contenido que sea fácil de entender. Si estás reemplazando ese solo mensaje claro o contenido con múltiples ideas y mensajes, aumenta el riesgo de que la gente realmente entienda lo que hace tu empresa. Y peor aún, disminuirá tus tasas de conversión. Algunos lo hacen. Se puede utilizar cuando la información es simple y no requiere mucho enfoque. Nuevamente, nunca lo utilices para secciones de héroes. Pero puedes ver cómo lo hemos usado para un sitio aquí. Esto es lo que tenemos ahora para la sección héroe. Lo tenemos aquí para ti. Es fácil y rápido personalizar tu libro, subir tu libro y puedes hacer click en estos. Se quedará una vez que el usuario empiece a hacer clic. Haga clic en el modo ahora. Y creo que se quedará por tiempo y luego volverá a jugar auto. Sí, ahí tienes. Entonces otra vez aquí lo usamos para servicios creativos. Puedes ver esto muestra ilustraciones y edición de copias y diseño de portada de libro y servicios como ese. Sólo para felicitar nuestra comunicación por aquí. Puedes usarlo mucho para un carrusel sin el auto-play, que es más común. Y le das al usuario el control sobre él. Esto es lo que va a ver. Apple tiene uno bastante bonito donde muestran sus AirPods aquí. Y tienen esta pequeña paginación. Tengo toda una charla sobre la paginación. Al final de la clase a eso puedes chequear y hablaremos de esto. Pero ya ves que tengo una flecha derecha. Puedo decir que hay tres secciones diferentes en este carrusel. Cada tres tiene uno de estos tiene tres productos. Así que estoy asumiendo que va a haber nueve productos en total dot con esta paginación. Y puedo volver atrás, puedo seguir adelante. Oye, mira, sólo hay uno aquí. Pero esencialmente este es el carrusel. Es sin la reproducción automática dando el control del usuario. Colas, eso es lo que tenemos aquí. Dar lo puedes combinar con miniaturas es como quieras golpear las miniaturas. Y luego también tienes control de usuario aquí, estas flechas para ayudar a voltear a través de cada una de estas miniaturas. Aquí es donde la reproducción automática es genial. Si vas a servicios de televisión inteligente, tienen carruseles. Verás esta imagen de héroe aquí, la paginación. Van a haber cinco de estos. Y esto se reproducirá automáticamente. Usted tipo de ver como entran estas nuevas series. Ten cuidado con tu reproducción automática, no debería, no debería ser demasiado rápido. Sólo un tiempo suficiente para que el usuario obtenga el punto. Y luego entra el siguiente. Sí, este patrón de diseño, aunque no funciona, no funciona para sitios web, como lo es el objetivo de comunicación, se vuelve inconsistente porque sigue encendiendo al usuario. Pero cuando estás en Modo Browse viniendo a tu televisión y quieres ceder algo. Aquí es donde ayuda. Aquí es un buen patrón. Está bien, genial. Eso fueron miniaturas y Carruseles. Te veré en la siguiente, hablaremos de modales y cajas de luz. Nos vemos ahí. 15. Modales y cajas de luz: Muy bien, hablemos de modales y pop-ups. Un modal o un pop-up es un elemento de ventana que se encuentra en la parte superior de una pantalla de aplicación. Y crea un modo que desactiva la pantalla principal, como la pantalla de los padres, pero mantiene visible la corriente principal en segundo plano. Al ver fuera de la ventana modal, los usuarios deben interactuar con este modal antes de que puedan volver a esa pantalla principal o a la pantalla de padres, ya sea haciendo clic o tocando fuera de la modal y cerrando el modal. Y de nuevo, se remonta a esa arquitectura básica de la información, ¿verdad? Donde tengas ese nivel padre, que es la pantalla principal, y luego tienes ese nivel hijo, que es el modal o el pop-up. Su principal valor es que permite a un usuario ver fácilmente contexto adicional, nuestro contenido, sin perder el contexto de la pantalla principal. Eso tiene que ver mucho con la ubicación. Al igual que llegan a ver información adicional, pero no pierden el contexto de su ubicación actual. El estafador de modales es que pueden ser muy intrusivos. Y en su mayoría se garantiza que su usuario verá el modal, pero se asegura de usar para algo que sea valioso y no publicitario. Agregar pop-ups intrusivos que salen de la nada pueden interrumpir enfoque de los usuarios y crear desconfianza en su producto o UX. Déjame mostrarte una aquí. Aquí hay una especie de lo que estamos hablando. Estaba en este sitio aquí solo mirando a su alrededor, leyendo artículos de noticias todo el día y esta cosa simplemente aparece de la nada para un histograma videos tutoriales. Like No, soy bueno en tutoriales de Instagram. Es intrusivo, definitivamente se queda ahí. Tengo que interactuar con esto. Y voy a seguir adelante y cerrarlo y volver a mi material de lectura aquí. Te veré más tarde. Sólo bromeando. De acuerdo, Así que eso es una especie de lo que quieres evitar, ese tipo de anuncio modal como aparecer. Yo también pensé que esto era gracioso. Esto fue como, Aquí está el Sol y aquí está el mercurio. Y luego aquí está mi dedo. Y aquí está el botón Agregar ropa, como todos hemos visto en esos modelos, el anuncio, pero el botón cerrar es así, tan pequeño que apenas se puede meter mi dedo en él. Pero eso eso fue un poco gracioso. Muy bien, así que hablemos de cuándo usar aquí un modal. Por lo que es genial cuando capta la atención del usuario. Así que úsalo cuando quieras interrumpir la tarea actual del usuario y captar toda la atención del usuario por algo súper importante. Digamos que necesitas la entrada del usuario. Esta es la forma de obtener información de tu usuario, como en este ejemplo donde estás listo para comprar un artículo, haces clic en el botón Checkout, y luego aparece un móvil, un modal pidiéndole que registres en con sus campos de correo electrónico y contraseña y formulario. No pierde la ubicación del usuario. No se fueron a otra navegación o destino en el sitio. Probablemente también querrás agregar like, no tengas una cuenta de registro o invitados continuos también. Es genial si quieres mostrar información adicional sin perder el contexto de la página principal. lo que un ejemplo aquí es mostrar imágenes más grandes, hacer clic en una imagen y verla más grande o hacer clic en un video, diciendo que el video muestra información adicional como Aprender más o FAQs Preguntas Frecuentes. Puede mostrar información que no está esencialmente directamente relacionada con la página principal. Cosas como notificaciones o oportunidades de marketing como invitar a cinco personas y ganar $500 o Bienvenido contenido o incluso compartir funcionalidades. Entonces podrías mostrar, usa el modelo para mostrar información que está directamente relacionada con la página principal. Cosas como un mensaje de éxito o errores de carga. O si vas a hacer click en algo que sea impactante por parte del usuario, podemos lanzar un Ru seguro. Y pueden elegir sí o no, o tienes algo que acaba de pasar en nuestra base de datos mientras tratabas de editar algo o hacer algo, podemos lanzar un modal hasta solo dice, tú saber, algo salió mal. Es posible que tengas que refrescar o cerrar el modal y empezar, volver a empezar porque nuestro centro de base recibió la información, cosas así. Un par de ejemplos aquí, sólo voy a mostrarte el ejemplo en vivo para este modal aquí. Esto es para un sitio en el que trabajamos, y eso es bastante genial. Como usuario, puedes ir y hacer click en, estas son para baterías domésticas. Estas baterías cargarán tu hogar y suministrarán energía a tus hogares. Como usuario, puedes pasar y hacer clic en qué tipo de electrodomésticos querrías que se alimente esta batería si estuvieras en un corte de energía. Y luego puedes ver que te muestra cuántas horas una batería podría cargar tu casa si tuvieras todos estos electrodomésticos encendidos. Ya que estamos educando a un usuario sobre el uso de energía, uso doméstico y los electrodomésticos y la cantidad de energía que utilizan. Agregamos aquí esta pequeña carta energética que abre un modal. Ese modal es una información de nivel hijo que se relaciona con el padre. Y esto muestra información sobre qué tipo de electrodomésticos causó la más utilizada la energía, y lo que eso equivale a también como una factura de electricidad más alta. Entonces si estás manejando una C todo el día o autos eléctricos y luces, esos contribuyen mucho a un mayor consumo de energía. Nuevamente, el usuario puede simplemente cerrar esto. Volver a la página principal. Entonces ese es un buen caso de uso para un modal. Otra en la aplicación en la que trabajamos es en este laboratorio móvil. Si se trata de una app que monitoriza tu sistema solar en tu hogar. Y si algo sale mal en el sistema solar, aquí abanderamos una pequeña advertencia que se puede ver como un signo de exclamación y una pequeña burbuja de altavoz. Y si el usuario toca ese modal, solo les dejamos saber que pasó algo y que deben contactarnos para que podamos analizar el tema. También sé que es bueno poner la x para dispositivos móviles en la parte superior izquierda, especialmente para las personas que son diestros porque estarás sosteniendo tu teléfono aquí con la mano derecha y puedes usa tu mano izquierda para controlar fácilmente eso, para cerrar esa x. esa es una colocación bastante común para la x. Si estás en un dispositivo móvil y puedes ver este en acción aquí. Aquí mismo. El usuario hace clic en este signo de exclamación aquí. Verás entrar en juego el modal y luego puedes cerrarlo aquí también. Ejemplo tan bastante simple de eso, como boop, algo salió mal. Inténtalo de nuevo. Y también puedes usar para dispositivos móviles y en tablet y web, puedes hacer lo que se llama modal de pantalla completa donde lleva toda la pantalla. Y así el usuario no ve la página principal en segundo plano, solo ven la X. Y si te has dado cuenta, mira si tienes algún dispositivo, las pantallas nativas de notificación, esos son modales como este es un modal también. Aquí hay un ejemplo de algo que no necesariamente ata a la página principal. Contamos con un sistema de referidos y una de las aplicaciones que somos para las que gestionamos y diseñamos. Y si puedes referir a la gente al servicio, y si alguien realmente se inscribe y completa su proyecto, entonces ganarás $500. Y así esta voluntad modal, se mostrará en cualquier momento durante la experiencia del usuario. También desencadena un correo electrónico a un usuario, pero si pueden venir desde el correo electrónico, pero también se mostrará si solo estás en la aplicación haciendo algo, esto simplemente se disparará y es intrusivo. Pero mira cómo eso es un gran intrusivo. Es como si acabaras de conseguir 500 dólares, como seguir adelante y reclamar tus ganancias te iban a enviar un cheque por 500 dólares. Este es un ejemplo aquí de una RU. Seguro. Si eliminas una cuenta aquí, vas a eliminar mucha información que vincula a esa cuenta. Y despedimos esto para simplemente eliminar accidentes por algo impactante. Si eres usuario y fuiste a ir a hacer click en algo y eliminarlo. Simplemente vamos a dar un paso más adelante en algo que esté relacionado con la cuenta y solo hágales saber, como ¿estás seguro de que realmente quieres eliminar esta cuenta? Hay mucho trabajo, muchos reportes ligados a esto. Y de nuevo, si fue un accidente, pueden cancelarse. Si se trata de una eliminación, pueden eliminar. Aquí hay uno que se vincula a la página de nivel padre. Aquí está editando la información de nivel de su cuenta. Pulsa el botón editar muestra un modal, ingresa la información de la cuenta. Y estos son geniales porque tu bifurcación en tu usuario, estás diciendo que o bien vas a actualizar esta información o vas a cancelar o cerrar. No hay otra forma de salir de esto. No puedes estar a medio camino y luego ir a otro lado. Como si tuvieras que terminar o completar. Y eso es lo bueno de estos modelos para, como realmente lo hace, bifurcar a tu usuario para que vea este modal y luego bien completando la tarea o cerrando la tarea. Personalmente me encantan los modales de búsqueda de pantalla completa. Si hace clic en el icono Buscar aquí en este sitio, se abre un modal de búsqueda a pantalla completa. El fondo es un poco más oscuro. Es alrededor del 90% de opacidad. Todavía apenas se puede ver la pantalla de los padres detrás de ella. Pero es súper elegante porque se siente como si estuvieras, te estás involucrando dentro de la interfaz, como si estuvieras, estás en la interfaz y no se siente pequeño o débil, realidad se siente súper moderno y resbaladizo. Y a medida que estás escribiendo en el campo de búsqueda aquí verás resultados de búsqueda. De nuevo, puedes cerrar esto con la x o puedes ir a encontrar tus resultados de búsqueda como Erin Anderson aquí e ir al sitio de Aaron Anderson. Personalmente me encantan estos. Creo que estos son grandes y grandes casos de uso para modales de pantalla completa. Vamos a meternos en algunas cosas y no. Por lo que de nuevo, un modal a la vez. Y esta es una regla muy difícil para que las aplicaciones no hagan modales encima de modales como este aquí. Como si tuvieras aquí un modal y tienes un modal aquí, eso no está bien, Eso no es Bueno. Está bien. Si tienes como sistema operativo como yo estoy en mi computadora, podría entrar en mi buscador. Eso es técnicamente un modal. Tengo otra como esa está bien cuando estás haciendo un sistema operativo como una computadora como esta. Pero para las experiencias de software y de usuario, evite estas. Otra que vi aquí está en mi solicitud de crédito. Y voy a ver mi reporte crediticio y recibo notificaciones como tu puntaje crediticio bajó sin razón aparente, que soy como, ¿Qué hice? Yo incluso hago cualquier cosa y va abajo. Pero se puede ver lo que pasa aquí. Dice ver tu nueva puntuación y se abre un modal. Este es un modal. Y hago clic en la X y me cierra y se remonta. Y si agrego toque a esta pequeña cosa de tres puntos, mira lo que pasa. Abre otro modal encima de un modal. Ahora estoy mirando a dos Xs y me gusta, bueno, ¿ cuál es la x? Entonces esto es lo que se quiere evitar este modal sobre interacción modal. Recuerda como los modales son geniales, solo hacen nivel de padres y nivel hijo. No se puede lanzar otro modal encima de esto para hacer un nivel nietos de arquitectura de la información. Pero están muy bien para esta relación de nivel padre e hijo. Al igual que el 70 u 90% de opacidad para el color de fondo aquí puedes ver y evitar hacer como muy baja opacidad de fondo, como quieres que el usuario se centre en la tarea que nos ocupa. En este caso, estoy dando, dándonos retroalimentación en la aplicación. De esta manera No hay enfocado, hay, no hay suficiente capacidad. hay demasiada capacidad en Aquíhay demasiada capacidad en el color y el fondo, y está pasando mucho. No es crear el foco que necesitamos para un modal. También modal debe caber en la pantalla, principalmente para escritorio. Y puedes desplazarte dentro de este modal. Como si pudiera meter mi ratón y desplazarse por esta información. No hago el modal demasiado tiempo que salga por la ventana aquí, ¿verdad? Al igual que quieres poder encajar directamente en la ventana de tu aplicación de escritorio. Bien, vamos a ver cajas de luz. Las cajas de luz son más o menos la misma interacción que un modal, las diferencias que la caja de luz refiere a una galería de fotos. Es todo lo que necesitas saber. Los mismos principios se aplican a los modales así como a las miniaturas que se aplican a la caja de luz, ¿verdad? Entonces déjame mostrarte un ejemplo de eso. Entonces si recuerdas, tenemos este lado en el que trabajé y construí. Tenemos estas miniaturas, ¿verdad? Por lo que las mismas reglas que se aplican a esas miniaturas hablan que sí aplicamos a estas miniaturas. Y cuando veas entrar la caja de luz, puedes ver que es más o menos un modal. Y la diferencia es que tiene alguna más funcionalidad construida dentro de él. Todavía puedo cerrar esta imagen. Aquí es una imagen bonita. Pero puedo navegar de ida y vuelta a través de estos modales. Y la caja de luz es más o menos eso, Ese es el término se usa solo para el modal. Es como crear una caja para ver tu imagen. Y el fondo sigue siendo visible desde la galería aquí, pero es esencialmente la caja que sale de la luz. Estás viendo tu imagen y luego la vuelves a poner en la galería de fotos aquí cerrándola. ¿ Cuándo utilizas estas? Usa si tienes muchas fotos para caber en una página, de nuevo, son geniales para mostrar diferentes tomas de producto como un sitio de comercio electrónico o una fototeca y aplicaciones que se integran con tu cámara fototeca fotográfica. Este sitio aquí fue más para un fotógrafo. Y puedes ir a comprobarlo aquí. Aquí está la URL también si es necesario. Sí. Así que solo recuerda dentro del lightbox modal, puede haber descripciones como acabamos de ver. Puedes hacer que el pitcher cuente aquí, ocho de 25. No se puede tener una descripción también. No es obligatorio. Puedes moverte hacia adelante y hacia atrás en los botones. Puedes cerrarla. Recuerda que los botones tienen un estado de flotación también. Se puede ver aquí. Puedes moverte a través de esas fotos. Está bien, genial. Si eso fuera modales y pop-ups, y te veré en el siguiente video. Hablaremos de menús y cajones. 16. Parte 1: menú y cajones: Muy bien, hablemos de menús y cajones. Los menús son una lista de contenido, categorías o características que normalmente se presentan como un conjunto de enlaces dentro de la barra de navegación, se fueron en la web, o se pueden agrupar dentro de un icono como una hamburguesa o un kebab cuando están encendidos dispositivos móviles y tabletas, te mostraré un montón de ejemplos de esos. Los menús son patrón UX de prioridad súper alta porque ayudan a los usuarios a navegar a lo largo su experiencia de usuario de servicio o aplicación. Y de nuevo, puedes tener las características más valiosas, contenido más convincente, es impresionante, pero es inútil si la gente no lo encuentra. Menús o fuente allí. Tan importante que los encontrarás en cada página web, cada pieza de software que alguna vez contrarrestarás. Es muy crítico entender cómo funcionan estos menús. No sólo para software y aplicaciones, sino para sitios web receptivos. Ahí es donde realmente les resultan útiles, y ahí es donde este combo de menú y cajones realmente son útiles es para sitios web receptivos que les tienen cierta mirada en la web, y luego responden para adaptarse a su contenido y sus necesidades de navegación para aplicaciones húmedas, para móviles y tabletas. Déjame mostrarte un rápido ejemplo de eso. Así que aquí está el sitio web de Nike, aquí está su menú para dispositivos de escritorio web. Y se puede ver esto es todo lo que va a cambiar cuando vaya a la tableta. Y se puede ver que usan el menú de hamburguesas aquí. Y luego cuando voy por aquí a un dispositivo móvil, usan el menú de hamburguesas para albergar ese tipo de información. Ese es un sitio web receptivo. Y de nuevo, el cajón es el más utilizado para cómo los diferentes elementos como los enlaces de menú. Pero también se puede utilizar para ayudar a otros, cómo es otro tipo de información y UI y contenido que se relaciona con la aplicación. Nuevamente, el cajón es este almacenes todos los enlaces. Tienes aquí el ícono Menú, y luego tienes este cajón que se desliza así. Y para que cajón, Es genial albergar navegación, menús y enlaces, pero también se puede utilizar como una interacción separada para mostrar información de nivel hijo basada en cualquier contenido o acción que tenga un usuario hecho en su sitio. Te mostraré ejemplos de cómo simplemente usar el cajón. Pero verás esto mucho como un combo. El menú y el combo cajón. Nuevamente, ese cajón se refiere de nuevo a cajones de tocador. El cajón del aparador aquí alberga información la puedes abrirla y cerrarla. De ahí vienen los orígenes del cajón. Aquí está nuestro menú de navegación aquí para web, tenemos nuestras cuatro opciones para nuestro usuario. Tenemos nuestra barra de búsqueda. Entonces se podía ver el mismo estilo de navegación aquí. Para aplicaciones móviles donde ponemos el menú o el menú de hamburguesas arriba. Y albergamos todos los enlaces y necesidades de navegación dentro de ese menú de hamburguesas. Aquí está el ejemplo donde los menús en la parte superior derecha. Y te mostraré algunos ejemplos aquí, aquí en un segundo cómo funciona esto. Aquí hay un ejemplo del menú de hamburguesas de la izquierda. Entonces aquí está el ejemplo del cajón de pantalla completa que entra en su lugar que el usuario puede X fuera en cualquier punto. Vamos a ver esos muy rápido. Aquí está el que está a la izquierda. Se puede ver esa diapositiva de cerca. Golpeas fuera de este cierra. Aquí está el que está a la derecha. Y toca en. Éste viene de la derecha. Si tus menús a la derecha, asegúrate de que venga desde la derecha. Eso está a la izquierda. asegura de que el cajón entre por la izquierda. También tenemos la pantalla completa aquí. Para que puedas ver cómo se lleva la pantalla completa. Entonces tendremos que tener una x aquí porque tenemos que tener una forma de que nuestro usuario salga. También pueden tocar en la pantalla de inicio. Haría eso también. De acuerdo, así que vamos a ver mucho de este menú y navegación y cajones. Tienen mucho que ver con arquitectura de la información y entender qué niveles de información para los que estás diseñando y qué niveles de navegación van a necesitar para pasar tus usuarios en todo su sitio web, su aplicación web, o su aplicación móvil y tableta también. Puedes ver aquí con página web de Nike aquí es que tienen este nivel de padres. Nuevos lanzamientos, hombres, mujeres, niños, y vender. Esa es la información de nivel de padres. Entonces se pudo ver aparecer el menú desplegable y esto tiene el nivel hijo y el nivel nietos. Esto también se refiere, como lo llamamos como un mega menú. Es como un enorme menú lleno de muchas cosas. Se puede ver que el nivel padre fueron los nuevos lanzamientos, el nivel hijo era nuevo y destacado. Y luego tienes el nivel nieto, todas las cosas que se relacionan con lo nuevo y característica y destacado. Se puede ver cómo funciona esto para un dispositivo móvil. Tienen el ícono de la hamburguesa, abre la información a nivel de padres. Y luego si toca nuevos lanzamientos que van a la información de nivel hijo, y luego se sube a la información a nivel nieto. Están usando un cajón, pero se puede ver lo flexible que es este cajón. Puede tener múltiples niveles de contenido dentro de este cajón. También puedes hacer clic o pulsar sobre el logotipo. En muchos casos se utilizará para permitir que su usuario regrese a la pantalla de inicio o a la pantalla maestra. Vamos a ver eso en vivo. Entonces antes de entrar en el siguiente ejemplo, así que aquí está tu nivel de padres, nietos, nivel hijo, y puedes ver cómo esto cambia en base la receptividad o adaptatividad de este sitio web. Así que ahora estamos en modo tablet, y ahora vamos a meternos en lo no modal. Haga clic aquí nuevos lanzamientos. Ahora estoy a nivel hijo y ahora conocí ese nivel de nietos y puedo volver atrás, atrás y cerrar. Muy bien, tan bastante efectivo, simple pero efectivo. Puedes ver otro ejemplo aquí de un menú que se usa comúnmente, que es el menú del cajón de la derecha. Se puede ver en Web no ocultamos toda esta información dentro de un menú de hamburguesas. Lo exponemos. Y lo mismo en la tableta. Está expuesto aquí a la izquierda. Y luego cuando llegamos a la vista móvil, en realidad usamos el menú, la hamburguesa, el ícono del menú, y el combo de cajones, ¿verdad? Entonces si tenemos los inmuebles en la web, no muestres el menú de hamburguesas, como mostrar toda la información porque vuelve a esa declaración , user affordance. Cuantos menos clics y toques se necesita para que alguien haga algo y complete su tarea en su sitio web, mejor. Vamos a ver a Shopify como ejemplo. Para que puedan ver su menú aquí a la izquierda, voy a exponer para web, se llega a la tableta. Nada cambia. Entonces nos metemos en la vista móvil y aquí está su combo de cajones de menú de hamburguesas, ¿verdad? Genial. Gracias. Consigue la foto. Vamos a ver diferentes tipos de menús. Se puede ver aquí está en Android tiene dos menús muy comunes. Cuenta con el menú de hamburguesas. Y de nuevo, esas casas de hamburguesas dominaron navegación como los enlaces de navegación a nivel padre. Entonces tienes lo que se llama el kebab o el menú de desbordamiento. Y este menú suele estar destinado a albergar las acciones que aquí no caben en esta barra de título. Entonces como acciones, a medida que esta barra de título se hace más pequeña y más pequeña, el desbordamiento, que es exactamente por lo que lo llaman desbordamiento. Cualesquiera que sean los menús que se desbordan se meten en esto. Nuevamente, esta interacción kebab aquí es común en Android, pero no es demasiado común en las interfaces de Apple o los productos Apple. Algunos otros comunes solo obtienen el menú de hamburguesas porque parece una hamburguesa. Aquí tenemos el menú de Bento. Esta se ve como una caja de bento, y esta suele ser la muestra diferentes aplicaciones que tienes como empresa. Al igual que si tienes Google, tienes muchas aplicaciones diferentes como Drive y Google y calendar. Por lo que esto muestra diferentes aplicaciones dentro de un servicio. Tienes el menú de kebab porque esto parece un barco Khabbab. Y luego tienes aquí el menú de la bola de carne porque parece bolas de carne. Y por lo general éste es más para los ajustes y en el menú kebab es más para el desbordamiento. Las secciones también se pueden utilizar para configuraciones. He visto también usar el menú de desbordamiento para la configuración. 17. Parte 2: menú y cajones: Se puede ver cómo se utiliza este tipo de cosa de menú de bento box en diferentes tipos de productos para mostrar sus aplicaciones, ¿verdad? Por lo que verás esto un Microsoft Outlook. Si hace click en ese menú de Bento aquí, se muestran todos sus productos que ofrecen, Outlook y PowerPoint, viejo PowerPoint y Word y Excel y algunas de las otras cosas allí. Y luego lo mismo con Google que tiene el cuadro Bento aquí en la parte superior. Y si hace clic en el menú de la casilla Bento tipo de cosa, se mostrará todas sus otras aplicaciones. Tienen YouTube y calendario y algunas otras cosas. Quiero mostrarte un pequeño consejo realmente súper valioso que puedas. Puedes usar cajones para, eso. Puedes albergar más que solo opciones de menú y cajones cuando estés pensando en un sitio receptivo. Cajones o tu mejor amigo. Son super, super geniales. Son realmente útiles. Y señalaré por qué aquí una vez te dé este ejemplo. Entonces aquí hay un ejemplo donde tenemos una interfaz de mapa y el usuario toca este hito específico aquí. Y abrimos un cajón. Más detalles relacionados con lo que el usuario acaba de mirar. Presionan la X y los lleva de vuelta al mapa. Ahora vamos a ver esta interacción desde un iPad. Mismo trato aquí el usuario toca el mapa aquí, ve esta información relativa aparece. Es la misma interacción que la web. Simplemente se necesita tal vez un poco más bienes raíces de lo que haría en la web. Este cajón aquí, y se puede cerrar, todavía funciona. Es una gran interacción y mantiene al usuario enfocado. Y luego se puede ver cómo funciona la misma interacción para el caso móvil. Pulsas en este artículo aquí en el mapa y se lleva la pantalla completa inmobiliaria, puedes cerrar con la X y volver. El beneficio de este sistema usando cajones es que este modelo de interacción funciona igual y es la misma funcionalidad, ya sea de escritorio, tableta o dispositivos móviles. Entonces lo que eso significa es que puedes diseñar esta vez, y funciona para los tres tipos diferentes de plataformas. Este modelo de interacción funciona muy bien para todo. Vamos a mirarlo en acción aquí en un producto real. Aquí hay un producto solar en el que estamos trabajando. Estos son su cliente, estos son sus paneles solares aquí en azul. Y si quieres aprender un poco más sobre tu panel, escuchar o ver la producción de ese panel solar, toca en él. Lo destacamos y vomitamos un cajón. Y el cajón aquí tiene la x, puedes cerrarla. Y luego se ve información relacionada con esa área específica de un panel específico aquí y panel solar que tocaron. Ahora vamos a ver eso en el iPad. Misma funcionalidad. Toca el panel solar, consigue el cajón. Puedes deslizar en este cajón, puedes ver más información relacionada con él. Entonces puedes ver lo mismo aquí. Ser utilizado para la aplicación móvil. Toca en el cajón, da el cajón modal de pantalla completa aquí el cajón modal de pantalla completade pantalla completa y lo cierra. Muy bien, Así que esa es una gran relación de nivel padre-hijo. Y el beneficio también es que los cajones, A diferencia de los modales, no se puede tener un modal. En un modal. Los cajones pueden tener más información dentro de ella. Se puede ver este aquí tiene, estamos usando acordeones dentro de este cajón aquí para nuestras preguntas frecuentes son preguntas frecuentes. Entonces estos son grifos, esto que abre la respuesta a esta pregunta, ¿verdad? Entonces entonces tenemos tres niveles de arquitectura de la información. Tenemos la pantalla de nivel padre, tenemos la pantalla de nivel hijo para este cajón, y tenemos aquí la pantalla a nivel nieto para el acordeón dentro de este cajón. Se puede ver que es un modelo de interacción e interacción muy práctico e inmobiliario de UI para diferentes tipos de necesidades de arquitectura como esa. Vamos a entrar en las mejores prácticas aquí. Así que recuerda poner los menús en la parte superior porque encajan a nivel global o maestro de arquitectura de la información. Estos, este menú navega por todo el sitio por lo que demandan el espacio que normalmente deben estar en la parte superior. Además los usuarios solo están acostumbrados a ver estos ya sea en la izquierda o en la derecha de las barras de navegación. Y luego dígale a tus usuarios dónde están cuando se van a diferentes partes de tu UX. Podrías usar la sección de título en tu barra de título aquí para mostrar y resaltar las secciones del menú están en. En escritorio. Tenemos un estado activo para el menú. Esta es la mercancía para el hogar. Y luego para móvil, verás que el usuario entra en el menú, puede tocar artículos para el hogar, y usaremos el título aquí para recordarles dónde están. Recuerda mantener el menú fijo como si se queden en un solo lugar cuando el usuario se desplaza. Hace que sea fácil para el usuario ir y navegar fuera de cualquier situación o cualquier destino en el que se encuentre y no tenga que ir todo el camino de regreso a la página. Entonces no te olvides de cómo va a volver tu usuario a la pantalla de inicio. Si no tienes casa en tu cajón y el usuario se mete como joyas aquí. ¿ Cómo volvieron a la pantalla de inicio? Ya no tienes el logo porque reemplazamos el logo por el título. Recuerda ese tipo de interacción aquí. Y si necesitas agregar la pantalla de inicio, agrega la pantalla de inicio y lleva al usuario vuelta. Te vendría bien eso. Recuerda ese combo de cajón de menús, menú desplegable combo aquí para adaptarse a las necesidades de navegación padre-hijo y nieto. Podrías usar lo mismo para dispositivos móviles que vimos. Nuevamente, piensa en estos mega menús aquí, como artículos para el hogar como el padre, tienes almohadas, arte, estampados, relojes, relojes de pared, mantas como estas se relacionan con los artículos para el hogar como el nivel infantil. Y luego estamos en almohadas aquí vemos un montón de almohadas. Ese nivel de nietos. Vimos lo mismo para Nike. Para sitios web receptivos, si solo tienes tres o cuatro enlaces de menú para tu dispositivo móvil. Aquí tenemos como ropa y joyería y artículos para el hogar. Podemos cambiar a una barra de pestañas secundaria en lugar del ícono del menú de hamburguesas. Y de nuevo, esto tiene que ver con pagar pulgada. Al igual que estos menús ahora están expuestos y el usuario puede con un toque, navegar fácilmente por los tres de estos menús o elementos de destino versus tener que volver a un menú, seleccionar el elemento y el menú fuera. Si solo tienes 234 tops de estos, puedes usar la barra de pestañas siempre y cuando encaje. De acuerdo, entonces si tienes para web y tienes los inmuebles exponer todas tus necesidades de navegación. No hay necesidad de un menú, un ícono de hamburguesa en la web aquí. Simplemente se puede ver si tiene el inmueble. Si tienes el inmueble, ve a sacar todos estos artículos del menú de hamburguesas y ponerlos aquí para que el usuario no tenga que hacer clic varias veces en esas necesidades de navegación. Cuando salieron estos menús de hamburguesas por primera vez. Esto es alrededor cuando acaba de lanzar el iPhone. Hubo mucho retroceso con la comunidad UX sobre el uso de estos menús de hamburguesas. Y lo que fue es que no fue que no sean súper valiosos. Ya verás, puedes verlos obviamente en todos los servicios más comunes y grandes aplicaciones que usamos, fue que se estaban utilizando mal así. La gente solo los usaba cuando obviamente tenían el inmueble para toda la información aquí. Entonces de ahí es un poco de donde vino todo eso y la contragolpe. Pero aún así hay un papel esencial para navegar y destinar a las personas a lo largo de su sitio web. último pero no menos importante, recuerda si tienes un elemento de menú a la izquierda, abre el cajón desde la derecha o desde la izquierda también, donde las puertas están abiertas, donde esté el menú. No hagas esto. Donde entran los menús la izquierda y el cajón de la derecha. Está bien, genial. Eso es menús y cajones. Os veré a todos el siguiente video. Cubriremos magos, migas de pan y paginación. 18. Hechiceros: Bienvenido a magos, pan rallado y paginación. Voy a romper este en tres videos diferentes. Haremos un video por cada uno de estos temas. Entonces empecemos con Wizards. Un Asistente de formularios es un patrón de diseño de interfaz de usuario que permite a los usuarios no capacitados o nuevos alcanzar un objetivo a través de una serie de pasos. Y el usuario ingresa información en cada paso y luego pasa al siguiente paso hasta las terminaciones. Y los magos ayudan a romper lo que podría parecer una larga tareas desalentadoras para completar en orden en pequeños pasos digeribles. Y los estudios han demostrado que si hace el primer paso del asistente sea fácil de completar, es más probable que el usuario complete todos los pasos en su tarea. Puedes ver aquí tenemos la solicitud de chequeo de crédito aquí. Nuevamente, lo hicimos realmente fácil para el paso de revisión. Lo agregamos bastante simple para el paso de divulgación. Y luego hicimos la verdadera carne aquí está en tu info. Tenemos que poner algo de información para ejecutar este cheque de crédito. Y entonces también es bueno hacer los últimos pasos súper fáciles también. No quieres que la gente se caiga cuando se pone, ya han pasado por tres pasos cuando llegan al último paso, si es aún más información de la que podrían, podrías arriesgar el riesgo de ellos cayendo en ese punto porque son como, simplemente no quiero seguir haciendo esto. El primer paso super fácil de hacer el último paso súper fácil como el mejor enfoque aquí. Esta es una interacción realmente buena, no sólo para romper largo proceso desalentador hasta los pequeños pasos del tamaño de un bocado. Pero los magos también transmiten tres cosas muy importantes que son fundamentales para la experiencia del usuario. Lo primero es la expectativa. Da un alto nivel de cómo se ve todo el proceso, así como cuántos pasos hay. Y le da a esa segunda parte ubicación correcta mientras que el usuario en, en estos pasos y en cualquier momento durante este proceso, entonces también les permite ver el tiempo. Entonces, ¿cuántos pasos o menos, o progreso, cuántos pasos has completado y cuántos quedan? Cuándo utilizarlos, utilízalos cuando tu usuario necesite realizar una tarea o un objetivo que tenga mucha información, acción o entrada de datos. Nuevamente, estas tareas son más fáciles de lograr dividiendo este proceso en pasos más pequeños y poco simples. Y un ejemplo es como llenar información fiscal que requiere mucha información. Y esa información debe agruparse en diferentes categorías, secciones como información personal, información empleador, información financiera. En pasos de confirmación ahí. Use esto cuando el usuario necesite orientación, el usuario quiere lograr un objetivo general, pero puede no estar familiarizado con los pasos necesarios para alcanzar cada uno de estos objetivos son información. El ejemplo fiscal es genial porque impuestos, hay gente que todo su trabajo es hacer los impuestos de la gente porque es complicado, ¿verdad? Por lo que estas son grandes formas de romper esa complejidad en pasos y guiar a tu usuario a través de cada paso sin sentir que necesitas saber todo a la vez. Cuando cierta información o categorías de información son dependientes unos de otros. Por lo que en el caso, si la información necesita ser revisada o comprobada en cada paso para recibir un resultado final. Entonces esto es genial cuando tuvimos un running para este modelo aquí a la izquierda donde tuvimos que usar esto para un cheque de crédito aquí. El motivo por el que lo separamos en un mago es que los usuarios, antes incluso de obtener información de ellos, tienen que aceptar nuestros términos y condiciones que vamos a utilizar su información para ejecutar un cheque de crédito, golpear a la oficina de crédito y obtener un cheque de crédito para ellos. Antes de que hasta consigamos su información. Por ley, necesitamos que estén de acuerdo con estos términos. Y luego segundo, obtuvimos la información y luego el tercero es el resultado de la verificación de crédito. Al igual que la mayor parte del tiempo se aprueban, pero a veces son rechazados. Se puede ver que la segunda parte aquí es cuando la teníamos, enviar esa información rápidamente a nuestra base de datos, ejecutar la verificación de crédito, y luego devolver el resultado. Por lo que el tercer paso depende del segundo paso. También son geniales para flujos de embarque a bordo donde los usuarios necesiten ingresar un conjunto de información para comenzar a usar tu aplicación como nombre de usuario o perfil pick o seleccionar categorías de intereses, que tipo de cosa. Vamos a ver unos pasos para crear un buen mago aquí. Así que lo primero que vas a querer hacer es desglosar toda la información que necesitas para tener la entrada del usuario. Y nuestro selecto, vamos a usar este ejemplo de helados, como definitivamente sabemos que la gente quiere, necesitamos que la gente seleccione su tamaño de helado una cucharada para sacar, tres palas de hielo Sabores de crema. Aquí obtenemos las páginas de chocolate, chocolate chip, el pinup, camino rocoso, luego información de pago de rehabilitación , dirección de entrega de nombre, teléfono o número de tarjeta de crédito, fechas de vencimiento, número CVE y dirección de facturación, correcto, así que eso es más o menos va a completar parte de nuestro flujo de trabajo aquí. De acuerdo, entonces querrás que encuentre el orden de jerarquía de información que, que coincida con el modelo mental actual del cliente. Esto es realmente agudo. Entonces el modelo mental es una comprensión de cómo un usuario ordena u organiza información o sistema. Muy a menudo este modelo viene como un artefacto o un resultado de hacer investigación de usuarios. Y así cuando piensas helado en el sistema actual o convención y forma en que las personas mentalmente modelan u organizan información de helados. Los usuarios tienden a entrar y primero ordenan tamaños de helado. ¿ Cuál es el tamaño? No comienzan con coberturas. Para que puedan ver ese orden sucediendo ahora. Empiezas con el tamaño y luego lo haces los sabores. Y entonces usted puede obtener el tamaño determina cuántas palas que se obtiene. Y luego el número de palas determina cuántos sabores obtendrás. Y luego a base de esos sabores, es posible que desee ciertos coberturas. Se puede ver que eso es un modelo mental. Así es como tu cliente piensa u organiza esta información. Y yo realmente buen libro aquí es, si vas al diseño de Everyday Things de Don Norman aquí, él habla mucho sobre modelos mentales en este libro. Y es super bueno. Si quieres conseguir realmente, si eres de todos modos, hacer UX o UI como esta es una lectura fundacional aquí. Entonces, si no lo has leído, solo recíbelo como un gran libro. Habla mucho de puertas, uno de mis capítulos favoritos y acaba de ir, simplemente se vuelve loco en diseño de puerta y cómo diseñas manijas para informar a la gente como de qué manera abres una puerta que empujar o tirar, Eso depende del diseño del mango versus un letrero. Tan muy, muy interesante. Buen libro aquí, compruébalo. Una vez que tengas organizado tu modelo mental. El siguiente paso aquí es modelar la jerarquía de la información en categorías y emparejarlas con las órdenes y los pasos del modelo mental. Puedes ver esta información diagrama aquí tenemos los tamaños de helado, tenemos nuestros sabores, tenemos nuestros coberturas, y tenemos que información de pago aquí. Para que puedas ver este tipo de Mago saliendo como paso uno, paso dos, paso tres, paso cuatro. Ahora que tienes esto, puedes ir a crear un prototipo de baja fidelidad. Podrías empezar a sumergirte un poco más en el contenido que no necesitarías como cosas como imágenes y descripciones y campos de formulario. Y entonces querrías probar esto con tus clientes para asegurar el contenido, el modelo mental, el flujo de trabajo, todo tiene sentido y es fácil de usar. Sólo un poco más o menos ponemos un wireframe aquí. Tienes tu, tu mago aquí, Talla, elige tu talla. Cucharas medianas, pop sobre sabores, golpeó tus sabores, y luego iba a ir a coberturas. Y luego presione Siguiente presione el botón Atrás, y luego finalmente llegar a ser capaz de pedir varios de sus, los tamaños de helado o productos de helado aquí y luego pagar. Entonces vamos a desglosar lo que hace que aquí sea un buen mago. Se puede ver el paso completado aquí le permite al usuario saber lo que se hace. El paso naranja aquí le permite al usuario saber en qué paso está. El paso por delante aquí, eso es sólo gris, que permite al usuario saber qué pasos están por venir. Realmente siempre es bueno tener un título bajo cada uno de estos, de nuevo, que establezca la expectativa de lo que el usuario va a esperar y qué tipo de información va a venir a continuación. Y entonces cada uno debe tener una descripción o una llamada a acción para decirle al usuario qué hacer durante este paso. Entonces un buen asistente también tiene el botón Siguiente permite al usuario proceder adelante. Permite al usuario retroceder como botón secundario. Si se pierden algo en o necesitan cambiar algo que simplemente no lo hicieron. Paso uno o paso dos, pueden volver atrás. Y luego dejan que el usuario, dejen que el usuario cancele. Entonces el cáncer, todo esto, todo esto si es necesario. Algunos lo hacen y no recuerdan, muestran progreso de pasos. Eso es bueno. transportador muestra el tiempo y el progreso realizado, no mostrando aquí pasos de progreso. Al igual que estás en tu info y no sabes si acabas de completar estos. Mostrar buenos estados visuales para pasos terminados. Y el paso activo aquí, el paso por venir. Esto, incluso hemos hecho este color más grande, más brillante. Se puede ver que estamos usando las casillas de verificación aquí para los pasos terminados y no pasa nada para este paso y el futuro. Apenas un pequeño punto gris. Evita esto. Al igual que no está claro qué paso en auto en ninguna parte audaz esto y haciendo un poco mejor, pero ser más impactante, más intencional al respecto. Y así no se puede ver realmente ese tipo de progreso o esos fundamentos de lo que hace un buen mago entre las cosas que se habían hecho. Gracias por paso terminado en el que estás, Pasos a completar. Solo recuerda que cada paso debe tener la categoría de información que se relaciona con ella. Entonces si estás diciendo tu nombre o tu información aquí, ten el nombre, LastName. No uses cada paso para información específica. He visto esto una vez donde estaba como nombre, correo electrónico, teléfono, soy como, Bueno, eso es tan fácil. ¿ Por qué tengo que hacer esto en un mago? Como si pudiera hacer esto todo en una sola sesión. Entonces ese es el objetivo de estos es romper la larga tarea desalentadora y ponerla en pasos donde si es sólo nombre, correo electrónico, número de teléfono, cumpleaños, no necesitas un mago, como simplemente se cumple. Entonces déjame entrar a eso. Recuerda tener un botón Atrás que te permita volver fácilmente al pasado. Pero aquí está el pateador. Guarda esa información. Al igual que si el usuario ingresa información y retroceden un paso y van adelante un paso a este paso que acaban de seguir. No hagan que vuelvan a llenar esa información, salvo eso y como lo llamamos el front-end. Cuando vuelvan a la parte posterior, hagan un cambio, vayan adelante de nuevo, esa información debe seguir ahí. El botón Atrás es algo importante porque si dejas que el usuario regrese en el navegador y luego van hacia adelante en la aplicación. Es posible que no podamos guardar esa información que acaban de almacenar. Está bien, genial. Vámonos. Vamos a hablar de migas de pan, pero lo voy a hacer en otro video, así que te veo en el otro video. 19. Breadcrumbs: Hablemos de pan rallado. migas de pan son pequeña lista de enlaces de navegación que ayudan al usuario a ver la estructura jerárquica de un sitio a partir de la página principal. Esta forma de navegar por la estructura del sitio se denomina típicamente wayfinding. Son bastante simplemente se ven así. Tienes la computadora electrónica doméstica y los altavoces, y yo estaría mirando a los altavoces en el sitio. Se les llama pan rallado porque imitan pequeños trozos de pan que habían quedado en tu escritorio. Y realmente están destinados a ser pequeños y nunca reemplazar la navegación de nivel superior con estos, solo hay niveles adicionales de navegación utilizados para ayudar al usuario navegar sitios complejos muy grandes y aplicaciones. Son súper simples de diseñar ya que no varían de este ejemplo aquí que te estoy mostrando. Lo verás mucho en grandes aplicaciones de comercio electrónico. Lo verás aquí en Amazon. Lo verás aquí en Best Buy. Y de nuevo, muestran la estructura jerárquica de la arquitectura de la información de un sitio. Se puede ver aquí estoy en Amazon en este momento y estoy mirando prismáticos. Y me está haciendo saber que los prismáticos y mirando empieza desde la electrónica de casa y luego binoculares de cámara, binoculares. Pero si vuelvo a las fotos de la cámara por aquí, déjame simplemente desplazarse hacia abajo y agarrar otra de estas aquí. Vamos a ver las computadoras aquí. Vea cómo cambia esto por ejemplo, un monitor mirará este monitor. Voy a encontrar uno por aquí y lo hará, se actualizará. Sólo dame un segundo. Permítanme dar click en uno de estos. De acuerdo, entonces ves cómo es sólo hacerme saber que estoy mirando monitores, pero vino de accesorios de computación y electrónica aquí. No es que no me esté mostrando mi historia de donde apuesto a que solo me está mostrando la arquitectura del sitio. Esa es la pieza clave para estos. Hablemos un poco sobre uso y los mejores consejos para ellos. Por lo que solo use pan rallado para aplicaciones de sitios grandes con mucha información y contacto. Contacto. Lo mejor para grandes sitios de comercio electrónico como acabamos de ver con Amazon. Realmente no están pensados para arquitectura de información a nivel de padres, como un sitio de cartera o como un sitio web básico de la estrella de mamá y Pops. Las migas de pan, de nuevo nunca reemplazan esa navegación global. Y las migas de pan deben mostrar la ubicación actual y los sitios. Nuevamente, la estructura jerárquica, no la historia de la sesión. Ahí es donde creo que algunas personas se equivocan esto. No muestra dónde he estado. Solo está mostrando la estructura del sitio. Si sí mostraste el historial de donde nuestro bin de usuario y rápidamente se va a hacer largo y confuso con mucha repetición. Además, incluya siempre la página actual como último elemento en el rastro de miga de pan. Y eso no debería ser un vínculo. Debería verse así. El sendero de la miga de pan, que es el sendero que conduce a la página actual en la que estás. Todas estas páginas deben ser páginas de nivel padre de la estructura jerárquica, no páginas de nivel nietos. Estas son páginas de nivel padre y la página en la que estoy en los oradores aquí que está bien para mostrar al nieto o chatear arquitectura de información a nivel hijo en la miga de pan. Así, esto puede llegar a ser muy granular, pero estos están destinados a ser nivel de padres porque me están mostrando dónde vive este niño o nieto vive en relación con la información de nivel de los padres arquitectura. Nuevamente, el rastro de miga de pan siempre debe comenzar con un enlace de vuelta a la página de inicio o al nivel muy alto, como si estuvieras en casa. Ahora Amazon aquí se puede ver que tiene electrónica aquí. Estás buscando y buscando desde la electrónica. Por lo que te está empezando desde la electrónica aquí, no necesariamente la página de inicio donde puedes ver Best Buy aquí tiene Best Buy como página de inicio. Y va a entrar en ese tipo, éste es mejor. En mi opinión, siempre debes tener la homepage al principio. Nuevamente. Así que mostrar buen enlace transmitir, transportación, como mostrar al usuario puedes hacer click en estos diferentes y no en el que estás. Aquí no hay ningún enlace de transportación aquí. claro traspaso del paso, la zona de usuario, puede ver los altavoces aquí es un poco más oscuro, o el de la derecha, todavía no es un enlace claro de la transportación, y no está claro cuál usan es sobre esto. Siempre debe estar en una línea. No rompas el sendero del pan en dos líneas. Si te quedas sin espacio aquí, simplemente elimina una de las arquitecturas del sitio de nivel padre. Entonces no necesitamos computadoras aquí. Simplemente regrese a la electrónica doméstica y a los altavoces. Bastante simple, Eso es pan rallado. Te veré en el siguiente video, vamos a hablar de paginación. Te veré ahí. 20. Paginación: Muy bien, hablemos de paginación. Entonces la paginación es un componente de interfaz de usuario de navegación de páginas que ayuda a los usuarios a navegar mucha información y contenido que no se puede mostrar en una sola pantalla. Y así este método divide todo el contenido en múltiples páginas y presenta solo suficiente contenido de una manera digerible limitada por pantalla. Hay más comúnmente utilizado para páginas de página de resultados de búsqueda para grandes sitios de comercio electrónico que tienen mucho contenido o producto para ofrecer. Usuario que quiera navegar y mirar este tipo de estos productos e involucrarse con estos productos. Y si planeas usar un componente de paginación, entonces debes tener una función de búsqueda y también buenas opciones de filtrado para ayudar al usuario a reducir lo que busca. Se ven así. la lista de páginas que tienen cada nivel de contenido. Voy a romper esto en un minuto. Algunos de ellos te permiten saltar adelante a una página. Pero el punto es, es que nadie quiere pasar por 22 páginas tratando de encontrar lo que necesitan. Si tienes buena búsqueda y buen filtrado, entonces pueden reducir esa lista y poder encontrar cuál es su necesidad. A veces la gente sólo está de compras. Te voy a mostrar En el mismo, este mismo video, lo que se llama pergamino infinito, que es más o menos el asesino de paginación. Es como, no, ya sabes, más o menos mata esto si estás comprando algo. Verás esto también en Google. Si buscas un sitio de Google y puedes entrar en diferentes páginas aquí. Y también lo verás bastante sencillo así donde solo tienen flechas y los números. Aquí hay un ejemplo de ello. Voy a ir a ver los zapatos de DC aquí. Voy a ir a mirar ahí. Vamos a ver a sus hombres eligen por aquí. Se puede ver ahí paginación en la parte superior aquí. También lo tienen en la parte inferior. Para que pueda ir a la segunda página aquí. También puedo hacerlo en la parte superior. Aquí está esencialmente el desglose. Siempre puedes ver la página actual en la que estás representada en azul aquí. Si tienes un número para esa página futura o un número uno, aquí está la página de atrás. Las pequeñas elipses, los tres puntos aquí, eso no está comprometido. No puede hacer click en eso, pero solo muestra que hay pintar las páginas entre 522. Esto ayuda a darle al usuario una indicación de, wow, tengo mucho por qué olfatear para encontrar lo que estoy buscando. De nuevo, tienes estas flecha hacia adelante flecha hacia atrás página, teclas, botones aquí. Y luego tienes este formulario de goto, que si estás tratando de llegar a la página 17, esta es una forma más rapida de llegar allí. Simplemente entra y pon el número de página en el que te encuentras, presiona Enter, y luego pasará a 17 aquí. Verás que esto también es bastante común, es la casilla de verificación o el desplegable aquí. Esto le dará un número de la lista de contenido o tipos de productos que se muestran por página. Por lo que puedes ampliar esto de 15 para decir 50. Esto te mostrará los resultados. Cuántos se muestran en este momento, tenemos uno a 15 y sumamos tus resultados de búsqueda. Hay 324 productos mostrados a lo largo de 22 páginas con 15 productos por página. Así es como funciona eso. Verás mucho paginación que se usa comúnmente en la incorporación. La incorporación es una forma visual de educar a tu usuario, o lo siento, tus nuevos usuarios sobre cómo funciona tu aplicación o qué esperar en tu aplicación. Y usamos esto en una aplicación en la que estoy trabajando en donde obtienes un nuevo usuario, ellos inician sesión. Y estos tres pequeños puntos aquí que se conoce como paginación. Y el usuario presionará aquí el siguiente botón, tocarlo, y verá que el siguiente punto se oscurece. Así que de nuevo, esto le da al usuario lo mismo de lo que hablamos, de qué magos, les da una sensación de expectativa. ¿ Cuántas pantallas van a pasar por el tiempo, la ubicación, el progreso? Y pueden pasar por cada uno de estos. Vamos a desglosar esto para la incorporación muy rápido. Siempre incluyo un botón Skip. Cuando haces la incorporación, lo mejor es mantener esto a tres o cinco pasos. No hagas esto demasiado desalentador para el nuevo usuario que entra en tu producto que solo quiere ir a usar su producto. Como solo de tres a cinco pasos. Manténgalo simple, pero siempre mantén un botón Skip y generalmente arriba a la izquierda o superior derecha. Y permitirá al usuario omitir todas estas pantallas. Entonces verás el desglose de paginación aquí. Entonces tenemos cinco pantallas. Cada círculo representa una pantalla. Un círculo lleno representa los pasos en los que está el usuario, nos da una sensación de ubicación. Y las de calificación representan las pantallas que el usuario ya ha visto y completado. Y de nuevo, eso puede enfrentar el progreso. Así que vamos a ver el desplazamiento infinito. desplazamiento infinito es el reemplazo de la paginación. Permite cargar contenido nuevo cuando el usuario se desplaza hacia abajo por la página. Y esto hace que sea mucho más fácil navegar por contenido en lugar de tener que hacer clic como página por página. Nuevamente, como mejor affordance. desplazamiento infinito puede ser adictivo. Eres igual que seguir desplazándote y desplazándote a través de nuevos productos y nuevos productos. desplazamiento infinito siempre mejor que el periodo de paginación. Nadie quiere hacer clic a través de cientos de páginas para encontrar lo que necesitan. Para que puedas ver los zapatos DC aquí tenía esa paginación. Vamos a ver a Nike que usa el desplazamiento infinito hacia abajo, desplazándose por los zapatos DC. Y a diferencia de nosotros, cool, llego al fondo y tengo que hacer click y mirar. Está cargando. Tiene que volver a través de scroll, volver a la parte inferior. Se puede hacer que sientas este sentido de que es un poco desalentador. Sólo va de ida y vuelta, de ida y vuelta. Mira en Nike lo hace. Vamos a ver los zapatos Nike. Vamos a ver algunos jordanos, algunos desplazándose hacia abajo y miramos cuando llegue al final. En realidad me dejaré, déjame ir. Sólo ve a hombres que fue, necesito infinitos productos aquí. Lo siento. Vamos a ver a elegir. Ok. Ahora míralos desplazándose por los zapatos aquí, boom, boom, boom. Mira ese pequeño giro. Pergamino infinito. Relojes tan rápido. Pero véalo, puedo ver mi cursor en el navegador aquí moviéndose hacia abajo. No es bastante bueno Internet, pero viste ese pequeño spinner ahí. Y sólo voy a mantener puedo seguir yendo para siempre y para siempre y sólo va a seguir cargando productos y cargando productos. Y solo puedo ver aquí, solo navega hasta que mi corazon desee y en realidad no comprar nada, pero solo, sólo puedo mirar esto. De acuerdo, así que eso es un desplazamiento infinito en pocas palabras. Y luego hay un sitio aquí llamado Gymshark, y usan una mezcla de ambos. Si estás desplazando abajo pantalones cortos aquí. Llego al final de todos los pantalones cortos aquí. Puedo hacer cargar, cargar más, arte, podría verlos todos y cargar más. Tipo de hace ese desplazamiento infinito aquí cargo más productos. Es una combinación de ambos ahí se puede ver. Excelente resumen. Utilice siempre paginación para las pantallas de incorporación. Son geniales. Se utilizan al mostrar mucho contenido y productos. Si puedes evitar la paginación, entonces siempre usa scroll infinito y siempre asegúrate tener una función de búsqueda y buenas opciones de filtrado también. Muy bien, genial. Por lo que terminamos paginación y te veo en el siguiente video, el último hablaremos de iconos y fotos. Te veré ahí. Adiós. 21. Iconos: Muy bien, hablemos de iconos y fotos. Voy a dividir esta sección en dos videos. Voy a hablar primero de iconos y luego voy a ir a hablar de fotos. Apenas empieza. Los iconos de alto nivel son ilustraciones muy simples de temas o acciones. Se usan en todas partes. Ayudan a los humanos a comprender los puntos comunes de las acciones y contextos de navegación utilizados por el software del sitio web, los signos del sistema operativo. Son geniales porque son universales. Y de nuevo, entendida por la mayoría de cualquier persona y también Puente barreras lingüísticas para entrenar un ícono de un tren se entiende en cualquier parte del mundo. Algunos iconos como Inicio Compartir, Imprimir, pausar, reproducir mensaje de vuelta a continuación, como agregar cerrar borrar perfiles, buscar. Todos son tan comunes que no requieren explicación como la gente sabe exactamente lo que hacen cuando y donde los vea. En general, se pueden pensar dos tipos diferentes de iconografía. Se puede pensar en más orientado a la acción, que es que la gente los va a utilizar. Se puede pensar en más orientada a la ilustración, que sirve a los objetivos de comunicación. Cuando nos referimos a la experiencia del usuario, los iconos se referían principalmente a iconos que la gente usa. Los iconos que están más orientados a la acción tienden a ser menos ilustrativos y los que sirven objetivos de comunicación son más ilustrativos y esos, los que viven más del lado gráfico de las cosas. Si bien muchos diseñadores de UX crearán ambos tipos de iconos para servir mejor la comunicación de una pantalla específica O y la usabilidad de una aplicación o un sitio web. Nuevamente, en general, es una buena práctica no hacer que los iconos de acción sean muy ilustrativos. Estos iconos deben ser muy simples, fáciles de escanear, fáciles de entender. Nuevamente, los beneficios de los iconos. Hay mucho más fácil de escanear y leer de un vistazo y los textos reales se remontan a esa palabra mágica affordance. Hay una especie de retrocede a como las imágenes dicen 1000 palabras, lo mismo con los iconos. Pueden comunicar mucho más que palabras. Como dije antes, el universal entendido por todos los idiomas. Sirven como objetivos de acción gris para las interfaces de usuario. Cosas que la gente puede tocar. Se piensa en cuando hicimos la pestaña, barras de pestañas. Teníamos el fico por aquí a Instagram. puede ver como tienen cinco íconos a la parte inferior para la barra de pestañas y tres arriba para la barra de título. Dije que tenían iconos que sirven como objetivos de acción a lo largo de su aplicación. Eso es genial. No serías capaz de encajar todo eso con texto. El icono, es una especie de hablar más que muchos casos que en texto. Nos ayudan a ahorrar pantalla inmobiliaria y espacio. Y son visualmente atractivos y ayudan a transmitir tipos de marca específicos. Puedes influir en tu marca a través del estilo de tus iconos. Puse un montón de iconos comunes por aquí. No voy a pasar por todas ellas, pero solo pasaré por algunas más comunes. Pero ya sabes, cosas como casa y editar y buscar, perfil y menú y pausar y favorito y jugar y eliminar y añadir un mensaje y errores y micrófonos y carritos de compras, favoritos, calendarios, ampliar, delete, recortar notificaciones. Basado en todos esos iconos que puedes preguntarte, ¿qué tienen en común todos estos? Y se usan comúnmente a través múltiples experiencias de usuario y aplicaciones. Entonces, si planeas usar uno de estos, no, no reinventes la rueda. Usa la forma más popular de ese ícono porque es muy probable que los usuarios ya lo hayan visto y lo usado en otras aplicaciones. Entonces puedes esperar que lo sepan exactamente cómo es, o cuál es el ícono, cómo usarlo, y qué hace en tu UX. En cuanto a las etiquetas. Si no estás seguro de si un usuario va a entender lo que hace tu icono o saber exactamente lo que es de un vistazo, entonces agrégale una etiqueta. Se puede ver que esto es una billetera. Añadimos mi billetera. Esto solo el texto ya indica que es mi es un lugar para mí y billeteras donde voy a poner mi dinero, donde esta billetera podría no ser tan específica sin el texto. También puedes agregar un consejo de herramienta como lo hicimos aquí con el ícono que sobre ayuda a indicar qué hace el ícono cuando pasas el cursor sobre él. Pero de nuevo, solo funciona para dispositivos de escritorio y no funcionará para móviles y tabletas. Por lo que no debería ser la principal forma comunicar un ícono abstracto. Las mejores prácticas, como dije antes, no, no reinventan la rueda. Los iconos familiares funcionan mejor. Usa iconos que se reconozcan y se hayan visto antes. No los uses en exceso, se decoran excesivamente con ellos porque puede diluir su propósito. Si se vuelven más ilustrativos o de uso excesivo, es posible que ya no sirvan como objetivos de acción y el usuario podría pensar que es más decorativo. Usa la regla de 5 segundos. Eso es si tú, estás probando tus iconos y le lleva a alguien más de cinco segundos pensar lo que hace un ícono o escanear el ícono, entonces probablemente no funcionará o no sea lo suficientemente efectivo. Mantén tus iconos simples. Nuevamente, no más los ilustren. Y luego prueba tus iconos con los usuarios, mira si necesitas una etiqueta o no. Acabas de mostrar tu ícono, te preguntaste a usuario, ¿en qué crees que está ese ícono? En la segunda parte de esa pregunta, ¿qué crees que hace? Entonces, para los dispositivos móviles, decide que debe ser de al menos 40 píxeles por 40 píxeles para un objetivo de toque adecuado. Y déjame mostrarte la mejor práctica para tu área objetivo usando un icono pequeño. Así que de nuevo, usamos iconos pequeños todo el tiempo porque son efectivos, son fáciles de escanear, no saturan tu interfaz de usuario. En la mayoría de los casos se asegura de que tu objetivo de clip o toque sea más grande que el icono en sí. Esto ayuda generalmente hace que sea fácil relacionarse con el ícono y al usuario no tiene que gustar doblar, duplicar , hacer clic o tocar en él. Si tienes un icono aquí, no solo hagas el ícono, el toque objetivo, es decir, el área en la que se puede hacer clic y se puede tocar. Así que sólo la pequeña x aquí. Entonces el rectángulo transparente rosa o cuadrado aquí representa nuestro objetivo tecnológico. Si ponemos aquí un ícono que es realmente pequeño, una vez que el tap apunte al menos 50 pixeles por 50 pixeles, el ícono, puede ser más pequeño que eso, pero el área del tap es más grande. Veo esto mucho con los alumnos que imparto. Soy los iconos a través sus aplicaciones tienen diferentes espesores de trazo y crea un lenguaje visual inconsistente incluso puede hacer que la interfaz se vea un poco descuidada, mi opinión. Así que mantén el mismo grosor en tus trazos. Se puede ver que aquí hay un trazo diferente para el mensaje. Incluso puedo decir que hay un trazo diferente para la cabeza del perfil. O si miras por aquí a la derecha, todos estos son exactamente el mismo ancho de trazo. Esto lo vimos en las mejores prácticas para las barras de pestañas. El solo recuerda no mezcle tu derrame cerebral, no hagas derrame cerebral. Los iconos de esquema son iconos de contorno acariciados e iconos llenos. Usa uno de los otros, pero generalmente no mezcles estos porque le da más peso visual a la que está llena frente a la que está delineada. Normalmente tiendo a usar más de los contornos acariciados como este de aquí. Sólo por esa razón ahí, estos son objetivos de tap. Generalmente son accionables o pueden servir como destinos. Y queremos destacar y felicitar nuestro contacto. Estas son solo formas de navegar y hacer cosas que nuestra aplicación. Y si son demasiado pesados, entonces pueden distraerse del contenido que hay en la página. Normalmente me gusta hacer el contorno. Y también son más comunes en todas las aplicaciones de experiencia de usuario. Vamos por algunas cosas y no. Nuevamente, mantén tus iconos consistentes y puedes ver por aquí estos parecían unos trazos consistentes familiares. Todos están usando delineado aquí a la derecha. No parece una familia. Tienes bordes duros. Tienes algunos iconos que tienen bordes redondeados. Están llenos, acariciados, son algo así por todo el lugar. Nuevamente, manténgalos simples y modernos. Parecerán utilizables, pero también durarán la prueba del tiempo. Cuando te pongas más ilustrativo como este y pones más color en un ícono, pueden verse más decorativos y menos utilizables, y tampoco soportarán la prueba del tiempo. Simple siempre funciona, siempre eficaz. Cuanto más se agregan cosas y se agregan ilustraciones y se agregan elementos gráficos. Muchas veces nuestras tendencias de UI se desarrollan con el tiempo o nuestros lenguajes visuales se desarrollan y estas cosas pueden durar la prueba del tiempo donde esta flecha aquí, eso va a ser una flecha para siempre. Como una flecha bonita, limpia, simple, delgada durará para siempre. Asegúrate de que tus iconos tengan el mismo tamaño. Y aquí está el verdadero pateador visualmente. Se puede ver aquí tenemos, tengo esta línea rosa aquí. En su mayoría todos los iconos a excepción de la nota musical. Encajan dentro de este espacio vertical. Cuando miras el segundo aquí, se ven exactos. Literalmente se ven de tamaño uniforme visualmente. Aunque no lo es, se pueden ver las líneas rosadas. Y si miras el de arriba a la derecha de aquí, hemos reducido el ícono de la música para ajustarse a la altura vertical de esta línea rosa. Y cuando miras hacia abajo aquí, ese ícono de la música se ve un poco pequeño y un poco más alto que los otros íconos. Y es muy, muy sutil, pero estas cosas son importantes. Estos son como Deberías sudar los detalles aquí. Visualmente siempre es mejor que extraviar precisa. Para que puedas mirar con precisión aquí, pero gracias, debe ajustarse más visualmente que con precisión. Lo mejor de ustedes, vamos a ir a lugares para ir a buscar iconos. Tu mejor conjunto de libre del conjunto libre de iconos más grande del mundo se llama Noun Project. Lo tengo abierto aquí. Proyecto sustantivo es genial. Vamos a ver los iconos del helado. Vale, entonces mira cuántos. Voy a alejar un poco para que puedas ver que solo hay toneladas de iconos de helado y puedes mostrar más. Creo que fueron como 200 más aquí. Todo gratis, super fácil. Digamos que nos gustaría este pequeño camión de helados aquí. Es un poco lindo. Quiero este ícono. Descarga básica. Ir a SVG. Este sitio es tan grande y es gratis. Soy como fuera de todos los sitios que uso que son gratis, en realidad soy como si estuviera feliz de pagar Nun Project un costo mensual. No sé, $20 más o menos solo para usar todos estos sitios web, estos, estos iconos significan que es genial. Lo tomaré gratis. No me malinterpretes. Um, pero sí, feliz de, feliz de pagar estos. Yo uso esto con tanta frecuencia. Ya ves acabo de descargar el ícono del helado. Lo arrastré a la herramienta de diseño que estoy usando llamada Figma. Voy a seleccionar este ícono y comprobarlo. Puedo usarlo en mi diseño muy rápido. Voy a seguir adelante y vestir esto un poco. Bajar el tamaño de esto. Esta es una forma vectorial, por lo que puedo entrar aquí y puedo añadir un poco de color a este ícono aquí. No lo sé, vamos a hacerlo rosa. Como downsizes cosa aquí. Super cool. Dale un poco, poco de escape. Un pequeño movimiento aquí. Haz esto azul. Voltea esto. Está bien, no me volveré muy loco aquí, pero ya ves la idea. Puedes conseguir un montón de iconos gratis aquí y mirar a ese lindo dueño de camionetas de helado. Voy adelante y tatué ese pequeño tatuaje en mi brazo. Muy bien. Algunos otros sitios que puedes consultar es ICANN eight.com. Tienen un gran conjunto de iconos libres para que se hagan más ilustrativos aquí. Pero son realmente lindos y bonitos. Se pueden ver los de aquí. Tienen colecciones con ellos también, por lo que puedes hacer click en una y puedes descargarla. También tienen HTML incrustado en él también. Y luego puedes ir a ver la otra colección aquí por esta persona. Entonces el otro que aquí está realmente limpio se llama, dibujas o lo sientes, OnDraw. Este es impresionante. Entonces estas son todas ilustraciones vectoriales. Y lo que es realmente genial éste es que puedes buscar donde quieras. Así que ya he buscado comida. Espero que te haga hambre. Puedes cambiarlos a cualquier color en vivo. Estoy cambiando de colores en la rueda de colores aquí y todos están actualizando. Así que vamos a poner algo de rosa alto en esto. Voy a mirar a este lindo , lo que el perro. De acuerdo, y voy a descargar el SVG, boom, descargado, arrastrarlo a Figma. Mira, tengo una linda mirada a este lindo perrito de aquí. Sí, tengo a este lindo perro. Se come. Tengo un lindo camión de helados por aquí. Déjame ahí que vayas. Reposicionar esto. Realmente rápido. Tengo entrega a mi helado. Se va a dar a mi perro un helado y luego se va a hornear para golosinas. Probablemente quiera ir a dar un paseo después. Pero sí, puedes ver un montón de cool on draw es realmente, realmente cool en ese sentido que puedes cambiar estos colores en vivo y poner los colores de tu marca en y luego ir a agarrar estos iconos. Está bien, genial. Voy a terminar con iconos y voy a hacer otro video donde vamos a profundizar en las mejores prácticas en fotos e imágenes y cómo elaborar estrategias allí. Y te veré en el otro video. Nos vemos pronto. 22. Fotos: Hablemos de fotos e imágenes, y es cliché, pero las imágenes sí hablan más fuerte que las palabras y las imágenes son más que decoración. Es una herramienta súper potente para ayudarte a comunicar tu contenido, objetivos, tu producto y tu marca. Las imágenes se utilizan para configurar la voz de una marca y construir el tono de la marca. Y una buena foto puede transmitir más información que párrafos de texto. Lo más importante es que una buena imagen puede ayudar a educar o transmitir el objetivo de comunicación mucho más rápido que tener un usuario leído. Y la mayoría de las veces en UX, no asumas ni aterrices en el hecho de que la gente va a leer nada. Pero a la gente ni siquiera le gusta leer. A lo mejor les gusta leer libros, pero cuando se trata de aplicación, solo quieren entrar, hacer lo que quieran y salir. Y con tanta frecuencia o no, tendré palabras en la aplicación que describen qué hacer y lo probamos. Y a la gente como ser una brisa justo a través, es algo bueno. No queremos que sientan que quieren detenerse y tener que leer todo y seguir las instrucciones. Solo querían entrar y hacer lo que hiciera la aplicación y salir y seguir adelante con su vida. Las imágenes ayudan mucho en ese sentido de configurar el objetivo de comunicación o comunicar algo más con una foto, luego un montón de textos, de nuevo, siempre se remonta a esa palabra mágica, affordance, tiempo y energía gastada. Entonces vamos a ver algunas imágenes y la forma pensar en las imágenes o de categorizarla o medirla, es que las imágenes evocan emociones y pensamientos. Y esas emociones deben estar atadas a algún nivel de adjetivos. Y esos adjetivos se deben usar para describir su marca. Si eres un banco, es posible que quieras adjetivos que sean iguales, ya sabes, confiables y calmantes. Y si tus hijos pequeños juegan marca house, vas a querer algo divertido y enérgico. Y hay todas las formas diferentes en que podemos comunicar esos diferentes estilos donde si era tranquilo, quieres que los colores azules entren en alguna teoría del color. Colores azules y si es enérgico y divertido, quieres colores realmente brillantes y rosas veraniegas y cosas así. Pero veamos un par de fotos y hablemos qué tipo de emociones están saliendo de estas fotos. La segunda parte es que las fotos también pueden despertar pensamientos. Si miras esta foto aquí, tiene una sensación de calma a ella solo estar en el aeropuerto donde la gente está peleando. Esto tiene este verdadero agradable sentido de calma y es debido al color naranja que ayuda a calmar la foto. lenguaje corporal de esta persona se ve súper relajado, simplemente escalofriándose en una silla, se levantó los pies en su equipaje. Parece un poco de aburrimiento como si sólo parece que está esperando. Y también evoca algún pensamiento alrededor, ¿esta persona se perdió su vuelo como es que su avión saliendo y tú igual, oh hombre, llegué a descifrar el siguiente vuelo o es simplemente llegó a la en un buen momento y sólo está esperando. Se suponía que tenía esta foto. Mira a estos dos niños y mira esta cara de niños pequeños así es, eso es pura alegría saliendo de la cara de este chico. Sólo es amor. Probablemente nunca llegó a hacer esto. Y luego hicieron esta sesión de fotos. Estás como, sí, adelante y solo toma las almohadas y los nazis de cabra, él y su amigo, o tal vez sea su hermano, tal vez su hermana o algo así. Están teniendo una explosión. Para que puedas pensar esta foto es que sus rostros desprenden emociones. Y es emocionante basado en el lenguaje corporal y el movimiento. Hay mucha acción en esta foto, la hora del día, tal vez esta es hora de la mañana o tarde. Se ve súper divertido basado en el contenido. Acaba de unirse a ellos mismos. También puedes pensar en esto. ¿ Es así como juegan los niños por todas partes, o es esta una única cultura? Y luego trae otro punto que algunas fotos y fotos que elegimos, pueden tender puentes sobre las normas culturales, es decir, algo claro que funciona en cualquier cultura. O no lo hacen. Sólo trabajan en algunas culturas. Cuando tienes un producto internacional, tienes que estar al tanto de las normas culturales y cosas así también. Este es interesante aquí porque como que tienes la sensación de trabajar desde casa. Es aburrido porque el uso de fuertes colores grisáceos, es casi como el tono mono. No es realmente brillante. Es una especie de más de un tono retrocedido colores, realmente relajado aquí basado en el movimiento del cuerpo. Pero hay este sentimiento de mundano o como falta de incitación por trabajar desde casa. Y evoca ese tipo de pensamiento es esta persona, son, ¿quieren salir o se quedaron en casa? los perros probablemente les guste en cuanto te levantes y salgas de la habitación, voy a arrancar este lugar. Pero sí, esos son solo algunos ejemplos de cómo puedes probar tus fotos así. Como si realmente te interesa el desarrollo de marca, puedes conseguir fotos como esta y preguntar a la gente qué tipo de emociones y pensamientos obtienen de estas fotos? Y mira si atan a los adjetivos de tu marca en tus objetivos de comunicación de marca. Vamos a ver algunas de las mejores prácticas de hacer y que no lo hacen. Entonces si tienes una foto y otra vez, estamos pensando estratégico aquí, como las fotos están aquí para ayudarnos a comunicar nuestros objetivos. No son sólo algo que simplemente sacamos de la nada y Dios, sólo tirar una foto sobre la cosa. Ya sabes, son bastante meticulosos. Están aquí para ayudarnos a comunicarnos eso. Y en este contexto aquí queremos comunicar una reunión en línea. Lo que quieres hacer es que sea realmente fácil mostrar el concepto de tu imagen. Si miras a la izquierda, puedes decir que es una reunión en línea. Están haciendo FaceTime. Aquí hay un temporizador en juego. El de la derecha. Tienes que cazar ese concepto. ¿ Están teniendo una reunión en línea o simplemente le gustó de verdad? Llegué a conocer la pasta de dientes y ella está mirando un montón de pasta de dientes es así uno para 299 es fantástico. Cuándo pedirlo mañana o algo así. Pero un poco consigues el punto aquí. Ten cuidado al usar fotos de stock de personas porque te encuentras si vas a comunicarte en este caso, el ejemplo es que la reunión de oficina como debería parecer una reunión de oficina real, reunión. Las fotos de stock tienden a tener lo que puede parecer, no contexto real. O incluso personas que parecían actores y actrices. Entonces el de la izquierda, esto parece una reunión y hay una reunión que entraría todos los días. Justo ahí. Tienen algunas ideas escritas en notas adhesivas. Están compartiendo conocimiento es como una buena reunión de UX aquí mismo. A lo mejor esta persona se dibuja como un perro o un cono de helado o algo así. No lo sé. No lo sé. He estado en muchas reuniones mi carrera y nunca he entrado en una reunión y vi a todos hacerme esto. Sonriendo a este halo, señor, ¿quiere una buena y agradable taza de café conmigo? Este tipo está sonriendo. Se lo podría decir simplemente, parece stock. No lo hace, son personas reales obviamente, pero simplemente no lo hace, no parece una reunión real. Se ve configuración. Así que definitivamente usa usa contextos reales y ayuda a que tu producto se llene más cerca de lo humano y más natural. Muy bien, entonces mi favorita es pensar en diferentes formas de rodar tus productos. Si tienes un producto que estás vendiendo. Personalidad expresa que se relaciona con tu objetivo de tu producto. Y mostrar personalidad siempre ayuda a invocar esa emoción. Y la emoción ayuda a crear impacto y significado. Y eso es más genuino. Recordarás una foto que evoca emoción. Y los estudios han demostrado este trato. Recordarás cosas que son más únicas y evocaron algún tipo de emoción, ya sea nostalgia o algo así. Más que solo un tiro plano. Consigue fotos de personas haciendo cosas interesantes con tus productos versus así, aburridos, como, aquí está mi maquillaje. Sobre una encimera de granito. Como esto es impresionante aquí. Esto muestra a FADH, muestra personalidad humana. Están haciendo algo único. Simplemente, hay mucho gran cosa en esta foto aquí por el ejemplo de una línea de maquillaje. De acuerdo, Genial. Menos es más. Así que aquí hay un evento de globo aerostático que estamos haciendo a veces demasiado contenido significa más tiempo. Alguien tiene que escanear y mirar toda la información que está pasando aquí. Y de nuevo, eso tiene que ver con un affordance. A pesar de que esta foto es genial, como look, ahí está este pequeño cerdo uno por aquí. Tiene elementos interesantes en ella. Pero de nuevo, lleva más tiempo mirar y ver esta cosa en el conejito energizador de aquí frente a solo un globo aerostático muy simple. Al igual que la simplicidad funciona mejor. Hablamos un poco de esto con botones y también cuando hablamos de sombras. Cuando pongas texto sobre una imagen, solo asegúrate de que sea legible y fácil de leer. No añadas sombras al texto, más bien, manipule la foto para que los textos sean realmente fáciles, ¿verdad? Para que puedas ver sin esto, tenemos un negro. Empieza negro en la parte inferior y es 100% transparente en la parte superior. Podemos posicionar esto de la manera que queramos. Puede ir a mitad de camino, puedo cubrir la foto, pero se puede ver cómo se ve sin ella. No se puede leer ese texto. Si miras a la derecha o simplemente vas y solo vamos a añadir una sombra paralela a los textos. Eso no funciona. Hace que parezca anticuado. No es una versión moderna de la tipografía y voy a escribir compañeros. Me encanta la tipografía. Y sí, solo la regla general, nunca añada una sombra en los textos como manipular otros elementos a su alrededor para que el texto se vea bien. Usa buena calidad, pero de nuevo, ten cuidado con el tiempo que toma la foto en cargarse. Así que trata de mantener tamaño de tu foto debajo de un megabyte para la web. Nuevamente, cualquier cosa más que eso retrasará el tiempo de carga. Y también asegúrate de que la foto tenga buena resolución. Por lo que es un equilibrio entre calidad de la foto y el tiempo de carga también. Y puedes ver aquí esta es una gran foto aquí. Tiene buena calidad a ella. Y luego se puede ver aquí, aquí está el señor Warhol comiendo una hamburguesa con queso, y esa es una foto súper pixelada aquí. Por lo que queremos fotos, fotos bajo un megabyte para web. Sí. Entonces una cosa que puedes hacer para ayudar con la calidad y el tiempo de carga es que puedes usar un sitio de compresores. Yo uso este se llama compresor I0. Y lo que hará es que le tomarán una foto que le tenga una cantidad decente de megabytes y lo reducirá significativamente. Entonces veamos este. Cuenta con 1.1 megabytes. Está bien, se ve como esta foto de aquí. Vamos a arrastrar esto y veamos cuánta compresión puede hacer eso. Al igual que lo tomé de un megabyte a 130 kilobytes. Probablemente estés pensando, Bueno, Aaron, Probablemente parece basura. Vamos a comparar los dos. Voy a abrir otra ventana aquí, ve a mis Descargas. Aquí está el que acabamos de bajar de tamaño. Ahora está en un 140 gigabytes. Eso es genial. Aquí está el que está en 1.1 megabyte. Ni siquiera se puede decir la diferencia. Muy bien, por lo que siempre puedes usar este compresor para que lo uso mucho para activos antes de que se lo dé a cualquier ingeniería o lo puse en cualquier sitio en el que esté trabajando. Simplemente los tiraré a la herramienta del compresor y simplemente los comprimiré hacia abajo. Otra cosa es que esto es bastante obvio, pero nunca estires tus fotos, como llenar la foto en su lugar, hemos acercado esta foto en lugar de recortar griega esta foto y la llenamos. En lugar de hacer algo como esto, todo lo que necesitamos para llenar las formas. Así que déjame simplemente, déjame simplemente estirarlo así y estirarlo para que puedas ver el de la derecha se ve muy obviamente estirar, así que solo evita eso. Otra cosa que puedes hacer que es bastante cool es que puedes agregar superposiciones de color de portada a una foto para que sea más marcada o para darle a la foto un poco más tratamiento visual también. Puedes usar una de las fotos de los elementos de tu marca aquí. Digamos que nuestra marca es verde azulada y naranja, como el ejemplo aquí. Y lo voy a hacer muy rápido. Es bastante simple. Aquí Simon Figma. Sólo voy a agarrar un rectángulo. Y vamos a agarrar un rosa. Hay algo que podrías hacer aquí. Hay un, hay filtros de transparencia que puedes usar. Una cosa que podría hacer es que sólo puedo hacer transparente el rosa. Eso es lo que estoy haciendo ahora mismo. Se obtiene lo que yo llamo almidón, donde no consigues el, empiezas a perder el rosa y la foto se vuelve almidonada o aburrida. Y demasiado rosa, no se puede ver la foto. Entonces si te metes en tus ajustes de opacidad y haces una multiplicación por aquí. Multiplicar traerá la foto. Esta es una, una opacidad del 100% en este momento. El multiplicar traerá todos los colores de la foto, esa oscuridad del color a este color rosa aquí. Por lo que hace que sea mejor superposición. Puedes hacer todas tus fotos así. Digamos simplemente, no sé, tenías una marca que sólo es blanco y negro y puedes hacer a alguien que sea rosa aquí. Incluso puedes divertirte un poco más. Podrías hacer como la mitad de ella es rosa. Incluso puedes hacer efectos fotográficos donde nos gusta algo así. Simplemente creando intereses visuales con tus fotos. Hablando de intereses visuales irá al siguiente consejo. Para que puedas, puedes enmascarar tu contenido fotográfico y los elementos gráficos del anuncio para que se vea más branding o más emocionado que otra vez, esto es más artístico, pero mira, se llevaron a este tipo es foto, le han pedido salir. Hicieron algo de color, algunos en blanco y negro. Tenían algunos garabatos. Lo pusieron en algún papel texturizado, algunas formas aquí. Era algunos textos y algunas lágrimas. Tienen a este tipo por aquí a la derecha. No lo sé. Simplemente le cortaron los ojos. Entonces eso fue un poco extraño, pero agregaron texto y elementos gráficos de la naturaleza y alguna ilustración de libros, impresiones de libros en la parte de atrás aquí y garabatos y cosas. Es realmente bonito. Esto es como un muy bonito. Casi empaques de chocolate pasando aquí. Pero esta es otra forma de tratar las fotos. No hace falta que solo seas una foto cuadrada. Puedes poner fotos y diferentes formas de contenedores. Pueden estar en cualquier forma. Puedes crear diferentes formas de la misma foto. Hice esto antes en un sitio lucir bastante cool donde teníamos una foto aquí y acabamos de copiar la foto, recortamos a donde se vería a la derecha. Y hicimos otra forma, en realidad sumamos otra también. Teníamos dos rectángulos aquí. Se pueden añadir diferentes colores. Se puede añadir en la naranja y teníamos un poco de verde. Y así tuvimos la toma en vivo de la foto y tuvimos un par de los clips. Siguen apareciendo las fotos otras formas. Y teníamos colores en esas formas y lo hacía un poco más emocionante. Lo mismo con esto. Puedes enmascarar tu foto y ponerla encima de formas. Se puede ver la plaza aquí en el panel sentado en la parte superior de la plaza. O puedes usar un rectángulo o una forma de triángulo. Y de nuevo, todo lo que estamos haciendo es que estamos tomando una mundana, acabamos de ver una foto normal de algo. Y estamos haciendo un emocionante agregándole estos toques visuales. Muy bien, genial. Así que vamos a ver los recursos de imagen gratuitos. Entonces mi favorito es Unsplash. Puedes conseguir cualquier cosa aquí. Volvamos a nuestro helado. Puedes ir a todas estas imágenes aquí y hacer eso se ve bien. Puedes agarrarlo y puedes descargarlo gratis. Descárgalo y lo vamos a hacer estallar en Figma probablemente vaya a venir bastante grande aquí. Así que déjame alejar un poco. Y ahí está tu foto. Alta calidad, buena foto. Y la mejor parte, gratis, gratis, gratis. Está bien, genial. Otro al que puedes acudir se llama pixeles aquí, PEX, ELS. Y de nuevo, puedes buscar helados, película entera haciéndote hambriento, todas fotos gratis. Puedes ir a descargar a lo mismo que acabo de hacer con el Unsplash. El otro es Pixabay. Lo mismo. Adelante y pones unas tomas de helado y bada bing, bada, boom. Luego está, cuando uso bastante a menudo se llama ice stock.com. Son unos 12 pavos la foto. Pero tienen fotos, ilustración, animaciones, todos los diferentes tipos de fotografía y elementos gráficos. Nuevamente, estos están hechos profesionalmente, por lo que podrías encontrar esto lo que buscas en Unsplash. Pero a veces necesitas una foto muy dirigida. Y yo stock es uno de los mayores proveedores de fotos filmadas profesionalmente. verdaderos fotógrafos vienen aquí y usan este helado de niños que comían aquí. Qué lindo. Sí, 12 dólares no están mal para una buena foto y estás apoyando a alguien. Hay una persona detrás de aquí que sube la foto y van a conseguir una parte de eso. Entonces es una especie de ganar-ganar. Muy bien. Eso es una envoltura. Solo recuerda, quiero dejar en una nota de lenguaje justo y escribiste un recordatorio de qué tipo de lenguaje utilizamos para describir nuestras interfaces de usuario y algunos de los fundamentos de junior entran a un buen interfaz de usuario. Creo que empecé los videos de esta manera. Terminaré de esta manera antes entrar en cualquier trabajo de proyecto que vamos a hacer aquí en un segundo. Pero una buena interfaz es como una buena broma y no necesita explicación, necesita saber dirección sobre cómo usar solo la gente lo usa. La forma en que hablamos de nuestras interfaces. Tiene personalidad, que es el valor de marca. Pero me oyó decir mucho hablar de mucho sobre el transporte. Realmente buena palabra para describir su trabajo y las decisiones en torno a por qué su interfaz es la forma en que es. Recuerda que eso se debe a que es fácil entender la información o se relaciona con una ubicación de tarea en particular. Me oyó describirlo mucho. Al igual que estos son todos los mecanismos que te ayudan a describir tu decisión, sea cual sea la elección que hubieras ayudado a informar al usuario de su ubicación o no los llevó demasiado lejos de su ubicación si todos eran como nivel aparente y entraron en un modal de un nivel hijo. Todavía pueden ver el nivel de padres en ese modelo. Nuevamente, el flujo de trabajo y el progreso y controles como cancelar, guardar atrás, editar, eliminar, confirmar y retroalimentación. Error de éxito cargando mi favorito, affordance, cantidad fácil, menor cantidad de tiempo y energía para completar una tarea. Jerarquía de información, orden de contenido que se ajuste a sus necesidades de usuario. Y de nuevo, cuando todos estos se combinan y se toman en consideración, interfaz se siente muy fácil de usar. Tom Olsen, visible para el usuario. Y como que me envuelvo en, usa esto como tu lenguaje visual. Está bien, genial. Espero que haya disfrutado el nivel de contenido más de este curso. Vamos a patear en un par de proyectos donde voy a mostrarte cómo tomar parte de este contenido que hemos hecho y diseñarlo dentro de Figma. que puedas ver como construir, cómo construir un móvil, un modal y algunas otras cosas. Entonces te veré ahí y gracias de nuevo. Adiós. 23. Introducción a la sección de proyectos: Muy bien, bienvenidos a la sección de proyectos de la clase donde vamos a construir algunos de estos patrones de diseño que aprendimos en la última serie de videos. He creado un archivo Figma para que descargues, subas a Figma y podemos hacerlo juntos. Y si no tienes Figma o no conoces a Figma, está bien. Puedes, es gratis, es una herramienta gratuita. Puedes descargarlo y luego puedes subir este archivo y puedes seguir junto conmigo. Vamos a echar un vistazo a todo lo que vamos a aprender aquí. Entonces vamos a empezar con algunos prototipos web. Y vamos a aprender a hacer los botones de radio personalizados aquí. Bastante simple. Vamos a empezar muy sencillo aquí. Aprenderemos a hacer el menú y el cajón. Usted ve aquí. Vamos a hacer algunos modales. Vamos a hacer algunos acordeones. Vamos a hacer validación en línea y crear una cuenta, y luego cambiar el botón Crear aquí en un spinner. Y aprendimos que durante el video del botón. Vamos a aprender a hacer un desplegable y luego rodar patada hacia el lado móvil. Aprenderemos a hacer algunos de estos en dispositivos móviles. Digamos aquí que tienes un modal de pantalla completa hará una versión modal de un menú desplegable. Por lo que los desplegables o diferentes de web de lo que son en móvil, aprenderán a hacer un modal on. Un dispositivo móvil, hará menús para dispositivos móviles. Haremos la barra de pestañas. Voy a hacer click a través de estas barras de pestañas aquí y cómo se mantienen fijos. Y terminaremos con poco, algo un poco más complicado, eso está bien como deslizar horizontal. Y cada video o cada sección aquí, he creado un archivo Figma que tiene el ejemplo ya construido. Aquí se puede ver con el botón de radio que el prototipo ya está ahí. Para que puedas abrir esto, puedes escoger aparte, puedes ver cómo funciona esto. Entonces tenemos la sección que dice que sí. Y vamos a hacer esto juntos. Vamos a pasar por cada uno de estos build-out y menu en un cajón y un modal, y ahí siempre está el ejemplo. Entonces en caso de que te quedes atascado o algo así, o quieras simplemente escoger esto aparte, puedes usarlo y luego puedes seguirlo en el video y pasaremos por cada uno de estos y lo construiremos. Impresionante. Y también podemos ver que he hecho lo mismo por los dispositivos móviles también. Súper divertido. Está bien, genial. Así que voy a seguir adelante y hacer otro video para instrucciones sobre cómo descargar este archivo y abrirlo en Figma. Y te veré ahí. Adiós. 24. Suba archivos de proyecto: Muy bien, así que sigamos adelante y descarguemos el archivo Figma. Y en este video te mostrará cómo abrir el archivo. Una vez que tenga el archivo descargado, debería verse así. Es un proyecto de trabajo de clase Figma. Dot ZIP. Todo lo que tienes que hacer es hacer doble clic o triple clic en ese archivo. Y eso lo va a descomprimir. Y ahora tendrás aquí una carpeta llamada Figma class working project file. Bueno, tienes que hacer es entrar en esta carpeta. Te he dejado presentar instrucciones por si acaso, pero voy a pasar por estas en el video de aquí. Pero si quieres pasar por las instrucciones, es lo mismo que voy a mostrar en el video aquí. Pero en realidad todo es que no se puede hacer triple clic en este archivo para abrirlo en Figma. Si hago triple clic aquí, ya ves que me sale este error. De nuevo, estoy en un Mac. Lo que tienes que hacer es que tengas que ir a Figma. Tienes que ir dentro de tus borradores. Y tus borradores pueden parecer un poco diferentes a los míos porque yo solo tengo aquí toneladas de archivos. Sí. Querrá ir a sus secciones de borradores aquí en la parte superior izquierda. Y lo que querrás hacer es simplemente arrastrar este archivo a tu aplicación Figma. Dentro de la carpeta de borrador. Verás que voy a arrastrar y verás que me estoy consiguiendo un contorno azul. Una vez que obtienes el contorno azul, eso es bueno. Simplemente arrástralo y verás que esto puede tardar un segundo, pero verás el nuevo archivo abierto aquí, adelante y presiona Hecho. Y tu expediente debería verse algo así a la izquierda. Bastante fácil. Ahora todo lo que necesitas hacer para entrar en ese archivo es solo hacer doble clic. Y ahora estás en el expediente, estás listo para irte. Muy bien, voy a ir en el siguiente video y vamos a empezar esto. Te veré ahí. 25. Crea botones web-Radio: De acuerdo, sigamos adelante y pateemos y pasemos un poco de diversión y construyamos algunos de estos componentes y aprendamos a construir los patrones de diseño dentro de ellos. Si no has usado Figma antes, es bueno hacer un poco de una inmersión profunda en Figma. Pero si no, también está bien. Probablemente podrás estar bien caminando por el video y haciéndolo conmigo aquí. Y voy a ir ir bastante lento en absoluto. Hablaré de lo que está pasando aquí, pero lo he configurado todo, así que debería ser bastante simple. En este video, vamos a quedarnos en el prototipo web aquí. Haremos todo en la web, y luego pasaremos al prototipo móvil aquí. Entonces estas son tus capas de página aquí. Y si haces click en alguno de estos, estos son solo diferentes tableros de arte para los que puedes hacer trabajo de diseño y trabajo de prototipo. Pero en este caso, tenemos un prototipo web y tenemos un prototipo modal móvil. No te preocupes por la portada que cubre el justo la portada para el archivo Figma aquí. Entonces sólo vamos a estar en el prototipo web y el prototipo móvil también. En este video, vamos a hacer los botones de radio, el menú en el cajón, y haremos el modal. Así que vamos a hacer esos tres, y luego vamos a dar una patada para el siguiente video. Pero vamos a echar un vistazo al botón de radio aquí. Entonces lo que voy a hacer es seleccionar este tablero de arte en la parte superior izquierda donde dice Mac 13. Voy a seguir adelante y seleccionar eso. Y se puede ver en la parte superior justo aquí estoy en la pestaña Diseño. Entonces, ¿algo relacionado con el diseño aquí? Si estoy seleccionando una forma o un ícono, ahí es donde puedo cambiar cualquier cosa aquí en base a mi selección. He seleccionado el tablero de arte. Y lo realmente importante aquí es que vayas a la pestaña Prototipo aquí, mira dónde dice Diseño. Vamos a entrar en el prototipo de aquí. Verás este inicio aquí. Una cosa que estoy haciendo es que estoy presionando la barra espaciadora en mi teclado y lo estoy sosteniendo y estoy haciendo clic y arrastrando. Y eso me permite mover el espacio del tablero de arte por ahí. Realmente fácil. Otra cosa que estoy haciendo es que voy a Command Plus a acercar y mandar menos para alejar. Y si estás en un PC, eso es Control Plus y Control menos. Y entonces lo último es que si sostienes z y haces clic y arrastra z te va a dar la herramienta Zoom. Si hace clic y arrastra a esto, se acerca el zoom. Por lo que hago mucho acercamiento y luego barra espaciadora con mi clic y arrastre para moverlo. Voy a alejar el zoom. Lo realmente importante aquí es que tengo este pequeño rectángulo azul Start con el botón de reproducción en él. Eso va a arrancar el prototipo a cualquier pantalla en la que esté esto va a ser la primera pantalla de ese prototipo. Vamos a mover esta pequeña estrella por cada una de estas secciones para que podamos empezar el prototipo en cada uno de estos componentes que vamos a diseñar. Antes de hacer eso se asegura de que te parezca yo aquí donde he tenido el Mac 13 seleccionado. Estoy en la pestaña Prototipo aquí. Y pude ver que el inicio aquí está en el botón de radio Custom. Y ahora en la parte superior aquí, verás el pequeño botón de reproducción. Darte un segundo para ir por ahí. Ahí es donde dice presente. Ese es tu prototipo. Vamos a seguir adelante y hacer clic en eso. Esto va a cargar el prototipo. Y de nuevo, la primera pantalla que vamos a ver aquí es la pantalla que tiene que iniciar rectángulo en la otra pestaña. También se puede ver que está hecho dos pestañas, ¿verdad? Así que ahora estoy en una nueva pestaña en la parte superior llamada prototipo web. Y si quiero volver a mi archivo de diseño, vuelvo al archivo de diseño y estoy aquí. Si ya eres un profesional en Figma o lo usaste antes, entonces todo esto es predicando al coro de ERD probablemente sean pro aquí, pero eso es esencialmente muy fundamentos de usar Figma y se pone más avanzó aquí, pero lo mantendremos bastante simple por el bien del proyecto. Lo que tenemos aquí es el botón de radio y vamos a empezar muy fácil. Y nos vamos a poner un poco más complejos a medida que avanzamos. Lo que estamos haciendo aquí es que sólo tenemos nuestro botón de radio personalizado aquí. Y si vas a mujer, vas a ver el estado de flotación. Y si hago clic en él, se obtiene el estado activo. Y si hago clic fuera de ella, estoy de vuelta en el estado predeterminado. Si vuelvo a pasar el ratón sobre él, obtengo el estado de flotación. Vuelve a hacer clic en él. Bastante simple. Vamos a seguir adelante y construir eso. Lo que tenemos que hacer aquí es estar en la pestaña Prototipo donde se puede ver este pequeño rectángulo azul aquí. No quieres estar en la pestaña Diseño. Quieres estar en la pestaña Prototipo aquí. Y lo que quieres hacer es hacer click en ese pequeño Empezar rectángulo azul aquí y hacer click y arrástralo hasta el archivo aquí que dice Max 16, el tablero de arte aquí verás un punto culminante, mira cómo destaca azul así. Eso es lo que quieres. Por lo que ahora estamos pasando del ejemplo al que dice que haces aquí. Esta fila de aquí es lo que vamos a construir esto. De acuerdo, así que lo primero que vamos a hacer aquí es agarrar el tablero de arte máximo 16 aquí. Se puede ver si hago clic dentro del tablero de arte, selecciono elementos de ese tablero de arte. Pero si hago clic en la parte superior o el nombre de ese tablero de arte es máximo 16. Seleccioné ese propio tablero de arte. Y si quiero renombrar esto, puedo ir a mis capas aquí a la izquierda. Ver dónde dice Matt 16. Y voy a nombrar esto, digamos prueba. Haga clic de nuevo hacia fuera. Y ahora lo verás decir prueba aquí. Ahora que tenemos seleccionado el tablero de arte, vamos a copiarlo un par de formas que puedes copiar. Puedes hacer Comando C o Control Z, C, C como en cat. Si estás en un PC, es Control. Si estás en un Mac, es comando. Y luego puedes hacer un Control o Comando V. Si estás en un PC, es Control V, como en Víctor. Y si estás en un Mac, aquí está el Comando V. Y se puede ver reemplazado por aquí. Esa es una forma de copiar y pegar. Una que me gusta hacer es la opción de mantener, y voy a ver cómo mi ratón entra en un ratón doble aquí. Me gusta sostener Option y hacer clic y arrastrarla y copiarla de esa manera también. De acuerdo, entonces en este punto queremos construir el estado de diseño para el hover. Lo que voy a hacer es acercarme a este tablero de arte. Voy a seleccionar justo, soy una mezcla. Estoy en modo diseño. Se puede ver aquí estoy en modo prototipo. Entonces vamos a hacer el modo prototipo aquí en un segundo. Volvamos sobre el modo de diseño. Esta tarjeta está agrupada. Entonces lo que quiero hacer es que quiero hacer triple clic en esta tarjeta. Otra cosa que podría hacer es que puedo hacer clic derecho. Hagámoslo este. ¿Por qué lo desagrupa por ahora? Sólo estoy Desagrupar. Ahora puedo seleccionar los textos, puedo seleccionar el ícono, y puedo seleccionar esta pequeña tarjeta de atrás aquí. Entonces lo que queremos hacer es seleccionar la tarjeta de atrás. Estoy en la pestaña de diseño por aquí. Voy a ir a la sección de accidentes cerebrovasculares. Agrega un plus, eso va a agregar un trazo alrededor de esa carta. Me gusta mantener los trazos gruesos. No me gusta hacer solo un pixel trazos en este caso, hagámoslo como 77 es un buen número. Vamos a seguir adelante y cambiar este color aquí. Cuando vayas a la selección de colores aquí en el trazo, verás que tienes todos los colores listos para ti aquí. Toda la biblioteca de colores, todos los colores del mundo están aquí. Verás en los colores del documento a continuación aquí, estos son algunos colores que ya existen en este documento. Podrías recoger el rosa aquí con solo dejar caer el rosa. También puedes simplemente ir aquí y tomar tu mejor conjetura en lo que es ese rosa o donde dice trazo aquí. También tengo el set de estilo. Entonces hay un poco como Foursquare, cuatro puntos aquí en un cuadrado. Si haces clic en eso, eso te dará estilos que están asociados a este proyecto. En realidad mentí, no tengo los estilos aquí, así que en realidad hagamos uno. Ahora que tenemos esto un color rosa aquí, voy a seleccionar el icono muy rápido. Ahora que tenemos este color rosa, adelante y haz click de nuevo en esos estilos y mira dónde dice, además, hagamos de esto nuestro coloide rosa, meinoso, lindo mesita. Ahora cuando vamos y seleccionamos de nuevo nuestro trazo, lo que podemos hacer es hacer retroceder en ese pequeño estilo y comprobarlo. Tenemos nuestro color rosa aquí. Un poco meinoso. Voy a seguir adelante y pinky. Está bien, genial. Más o menos hicimos el estado de flotación. Vamos a repasar ahora y hagamos el próximo estado, que se ve algo así, donde está lleno. De nuevo, voy a hacer lo mismo que voy a cubrir. Voy a seleccionar este tablero de pruebas aquí. O puedes hacer un Control C, como en cat si estás en un PC o si estás en un Mac, es el Comando C. Voy a pasar a la derecha aquí. Y luego voy a hacer Control V como en Víctor, o Comando V como en Víctor. Si estás en un Mac y tengo mi nuevo tablero de arte, alguien alejar, tu tablero debería estar así. Tenemos el estado por defecto aquí. Hemos hecho este estado de hover. Ahora vamos a ir a hacer el estado activo donde si el usuario seleccionó aquí la tarjeta Icono Femenino se va a llenar con el color rosa que acabamos de hacer llamado pinky. Ya puedes ver que he seleccionado el fondo ahora. Está lleno de blanco. De nuevo, puedo abrir aquí el relleno y puedo usar cualquier color que queramos. O puedo volver a ese estilo que acabamos de crear. Y puedo llenarlo de rosa. Y ahí vas. Llenó el interior. Pero camino Aarón, ¿a dónde fue el ícono? Eso es aquí. Es del mismo color que meñique. Bien, hagamos que este icono sea blanco. Lo que tenemos que hacer es si haces click en Pinky, solo abre los estilos aquí. Es posible que no veas los aquí que dicen color girasol. Es posible que solo veas los estilos normales aquí. Lo que tenemos que hacer es que necesitamos desmontar a Pinky. Ya ves cuando nos acercamos a Pinky y ves este pequeño ícono de eslabones de cadena de ruptura y dice desenganchar estilo, solo adelante y despegarlo. Eso significa que ya no será mecoso y será un color de forma libre que podamos elegir. Vamos a hacer esto blanco. Vamos a seguir adelante y mientras estamos aquí, vamos a añadir esto a nuestro estilo de color. Ahora que tenemos blanco seleccionado, puedes presionar el pequeño plus, o lo siento, no el más P0. En realidad, veámoslo. Cuando presionas el plus, esto es algo que sucede mucho. Quieres ir a tus estilos de color, pero presionas Plus y ves cómo acabo de agregar otro color negro al 20% de opacidad aquí. Y terminamos con dos colores. Simplemente puedes agregar más colores. Si eso sucede, solo presiona el menos. Así como eso. Entonces volverás a tu blanco. Si accidentalmente borraste tu blanco a, no habrá relleno. Esta forma no tiene relleno, ni trazo, nada. Por lo que de nuevo, queremos agregar otro color. Simplemente agregamos un valor predeterminados a gris, haciendo click cerca de color. Ve a hacer eso blanco. Muy bien, estamos cocinando con fuego. Ahora queremos simplemente agregar esto de nuevo a nuestro estilo de color solo para que sea fácil para cualquier cosa que sea blanca, solo podemos seleccionar el estilo de color y no tenemos que ir a buscar el blanco. Nuevamente, los cuatro puntos aquí donde dice estilo, da click en eso. Ahora que estamos en nuestros estilos de color, el icono de pequeño plus para crear un nuevo estilo. Aquí tienes. Y simplemente llamaremos a éste blanco. Y boom, nos pusimos blanco como estilo de color. Hagamos también el texto aquí. Vamos a hacer ese blanco también. Muy bien, genial. Conseguimos nuestro estado activo, el estado en el que el usuario hace clic en esto. Tenemos nuestro estado de hover y tenemos nuestro estado por defecto. Vamos a prototipar esto juntos. Por lo que en este momento estamos en la pestaña Diseño. Pasemos al prototipo. Asegúrate de tener el comienzo. Aquí en el que dice prueba que acabamos de hacer. Voy a seleccionar hembra. C justo así. Cuando estoy en el modo prototipo, verás este pequeño plus siempre en el centro del objeto a la derecha. Si no lo ves, podrías estar en el modo de pestaña Diseño, ¿verdad? Entonces si no estás viendo lo que estoy viendo, ve a la pestaña Prototipo en la parte superior derecha. Ahora solo haz click y arrastra esto. Verás al principio que se va a a mi imagen, iba a decir, ¿quieres esa imagen y simplemente decir que no, solo sigue moviéndola. No hay imagen. Y pasa a la siguiente a la derecha. Una vez que lo hagas, verás el azul en el próximo punto culminante del tablero de arte. Eso significa que tenemos una buena selección. Y ahora tenemos los detalles de interacción. Normalmente tendrás una pareja, tendrás arrastrar desclick mientras estás flotando, mientras presionas. Y el resto de ellos, teclado, ratón, enter, mouse. Ni siquiera te preocupes por ninguno de estos. Ni siquiera los uso. Yo solo uso onclick o mientras flotando. Vamos a hacer esto mientras flotando. Boom, tienes tu primer prototipo. Lo que queremos hacer aquí es que quieres hacer preservar la posición de desplazamiento. Eso es si tienes un sitio web largo y has vinculado estos tableros de arte juntos, predeterminado es si tienes un botón en la parte inferior de tu tablero de arte aquí, digamos que tienes un tablero de arte largo y tienes un botón en la parte inferior. Y quieres que el botón cursor y lo coses al siguiente tablero de arte y no has conservado la posición de desplazamiento, lo que significa guardar. Mantenga al usuario en esa misma posición que el desplazamiento. Volverá a la parte superior de la siguiente pantalla de eso, nuestra junta directiva. Y el usuario en el desplazamiento hacia abajo para ver el botón ahí. Si toca este botón conserva la posición de desplazamiento. Eso significa que puedes hacer clic a través elementos en todo tu tablero de arte. Y exactamente que preservará dondequiera que esté el usuario en cada uno de estos tableros de arte para que no salten a la cima de cada tablero de arte. Vamos a seguir adelante y hacerlo sólo por nuestro bien. No tenemos tableros de arte largos para este ejemplo, pero vamos a encender esto ahora mismo. Simplemente déjalo al instante. Genial. Así que felicitaciones, has hecho tu primer prototipo. Y lo que queremos hacer aquí es solo asegurarnos el rectángulo de inicio esté aquí en el tablero de arte. Adelante y presiona play en la parte superior. Verás algo como esto para mí que estoy viendo. Nuevamente, mira cuando pasas el cursor sobre el ícono femenino, verás que pasó esa forma. No hay transición. Es como a menudo encendido, vamos a agregar una transición a esto. Voy a hacer click donde dice mientras hover mezcla, estoy en modo prototipo. Y se va a abrir los detalles de interacción donde dice animación. Vamos a hacer sólo disolver. Eso significa que va a aliviarse. Hagámoslo en lugar de facilidad fuera, facilidad en. Hagamos 800 milisegundos. Después sigue adelante y cierra esto y ahora vuelve a, puedes presionar play para volver a tu prototipo, o puedes volver a las pestañas superiores aquí en la parte superior. Y se puede ver cómo ahora eso tiene alguna agradable transición suave. Sí, eso es bueno, eso está bien ahí. Muy bien, así que ahora vamos a hacer el estado de los clics, como volver al hover. Asegúrate de estar en modo prototipo. Y de nuevo, solo arrastra tu prototipo pequeño brazo GUI al tablero de arte click. De nuevo, podría haber hecho eso demasiado rápido, como sígueme. A ver cómo he cosido el flotar hacia el estado activo. Tenemos onclick. Y hagamos un poco más rápido. Disuelto 300 milisegundos. Debería estar bien. O puedes hacer instantáneo realmente no importa en resolución estándar. Depende de ti. Cierra eso más. Ahora tenemos nuestro hover. Tenemos nuestro click. Eso se ve bien. Ahora vamos a agarrar el estado. Voy a alejarme un poco, asegurarme de que estoy en modo prototipo. Y voy a ir a coserlo de nuevo al que acabamos de empezar, el prototipo muy predeterminado. Tablero de arte. Y disolver clics debe estar bien. Y volveré a nuestro prototipo. Haga clic en hembra y mueva el ratón por la espalda. Ese defecto, tenemos el hover, tienes el click. Tienes que hacer clic si tu mouse hacia abajo o estarás en estado estacionario de nuevo. Y se puede ver ese trabajo ahí dentro. Impresionante. Ojalá eso fuera realmente fácil para ti. Y sigamos adelante y pasemos al menú y al cajón. Voy a hacer un nuevo video que tardó un poco más de lo que esperaba. Pero sí, voy a hacer un nuevo video y saltaremos y veremos en el menú y el cajón. Te veré ahí. Adiós. 26. Crea - web- de la web - de menú: Muy bien, bienvenido de nuevo. Antes de pasar a los diseños de menú y cajón, recuerda agarrar la vuelta a tu pestaña Prototipo, no a la pestaña Diseño, sino a tu pestaña Prototipo en la parte superior derecha. Y agarra el arranque, que iniciará el prototipo a cualquier pantalla que esté en esta. Esta será la primera pantalla y el Prototipo. Alejar un poco, haz clic y arrastra este inicio, y arrástralo al tablero de arte Mac nueve donde dice Menu y cajón al ejemplo uno, no al que vas a hacer, solo el ejemplo porque lo que va a echar un vistazo a este verdadero rápido. De acuerdo, así que solo selecciona aquí el tablero de arte Mac nueve. Presione Play. Y esto es lo que vamos a construir. El menú y el cajón. Bastante resbaladizo. Es bastante fácil. Volvamos a nuestro archivo de proyecto de nuevo, estoy en la ventana de la pestaña Prototipo en la parte superior. Lo que quiero hacer es volver a donde dice diseño de patrones de bateador archivo de proyecto en la parte superior izquierda. Agarra el inicio, rectángulo, muévalo hacia abajo a ti sección Do. De acuerdo, entonces tenemos aquí el tablero de arte ya creado para este diseño. Ahora sólo tenemos que hacer el tablero de arte para el menú. En Figma tiene herramienta de tablero de arte y parece la pequeña herramienta de cultivo en la parte superior izquierda. Adelante y haz clic en eso. Por defecto, te da un montón de tableros de arte y tamaños de marco para diferentes pantallas de iPhone, pantallas de tablet, escritorio, presentaciones, relojes, redes sociales, todo tipo de cosas. También puedes simplemente hacer clic y arrastrar y hacer uno personalizado también. Vamos a hacer clic y arrastrar y hacer uno personalizado y hacer la forma que estoy haciendo aquí como un rectángulo vertical realmente largo. Podemos hacerlo un poco más grande que el tablero de arte de la izquierda aquí. Si ves lo estoy aguantando. No arrastre esto al otro tablero de arte como este. Puedes hacer tableros de arte dentro de tableros de arte, lo cual se pone un poco complicado. Por ahora. Sólo manténgalo a la derecha. Bastante simple. Vamos a seguir adelante y volver a nuestra pestaña Diseño. Y vamos a darle a esto un color de fondo. Entonces cuando selecciono el tablero de arte donde dice 596, vamos a cambiar el nombre de esto en las capas de nombre nomenclatura. Llamemos a esto el menú. Llamemos a este cajón. Haz que sea un poco más fácil hablar a través de esto. que puedas ver cuando selecciono el cajón, no hay nada, no hay patrones de diseño en este ni en ningún elemento de diseño en la pestaña de diseño aquí. Una vez que seleccioné, he seleccionado el tablero de arte porque aquí no hay nada más que tablero de arte. El tablero de arte tendrá un color de relleno predeterminado como blanco. Entrémonos en el color de relleno. Funciona sólido. Hagamos un gradiente. Verás donde dice lineal. Eso es un gradiente lineal o lo mismo solo significa una transición de dos colores. Hagamos lineal. Por lo general comienza con blanco y blanco. El blanco a la izquierda sin embargo, es 100% de opacidad. El blanco a la derecha es 0% de opacidad. Y se puede ver que aquí hay un pequeño deslizador de opacidad y un porcentaje de opacidad aquí. Por lo que verás un 100% cuando estés seleccionado el color de la izquierda, y verás 0% a la derecha. Lo que queremos hacer es hacer el color ahí dentro, correcto, una opacidad del 100% también. Vamos a agarrar el color de la izquierda. Ahora. Hagámoslo rosa por un lado. Y hagámoslo un poco más morado en la parte inferior. Sí, eso debería ser que debería estar bastante bien ahí. De nuevo, se pueden controlar estos. Puedo hacer click y hacer los gradientes. Ahora todo esto es vertical, pero puedo hacerlas horizontales. Puedo hacer un más angulado como este. Puedes empujar un color hacia abajo o hacia arriba. Puedes jugar con esto por tu cuenta, pero lo mantendremos simplemente bastante sencillo, arriba y abajo por ahora. Adelante y cierra esto. He añadido los elementos aquí junto a este cajón ya que estamos aquí en el ejemplo anterior. Adelante y solo selecciona todos esos y simplemente arrástralos a tu cajón aquí. Bastante fácil. Si no lo haces. Una forma de probar esto, a veces arrastras elementos a un tablero de arte. Ve a tu prototipo y no los verás. Y una forma de asegurarse de que entrara en el tablero de arte es seleccionar donde dice cajón. Así que selecciona el tablero de arte real y muévelo. A veces verás esto donde se verá esto. Está en la cima del tablero de arte. Y luego vas a moverlo. El contenido se queda, ¿verdad? Entonces lo que quieres hacer es asegurarte de que esto esté en el propio tablero de arte. Otra forma de hacerlo es seleccionar todos los elementos aquí. Presiona el Comando C, ve a tu tablero de arte y presiona Comando V, y se pegará dentro de este tablero de arte. Ahora puedo asegurarme de que esté ahí. Ahora que tenemos nuestro tablero de arte, vamos a moverlo un poco más cerca de la pantalla de la izquierda. Lo que queremos hacer es que queremos seleccionar el menú. Ya lo tengo agrupado para ti. Basta con seguir adelante y seleccionar el menú. Vaya a nuestro modo prototipo aquí. Haga clic y arrastre el brazo GUI sobre el cajón. Aquí es donde se pone un poco amado nivel profundo es que lo tenemos en onclick. Vamos a moverla a de Navigate a, para abrir superposición. Voy a hacer eso una vez más. Entonces tuvimos un onclick como la acción y la función en lugar de navegar a otro cajón, queremos que esto abra y use ese cajón y lo abra como una superposición. Superposición abierta. Y obtendrás un conjunto completamente nuevo de detalles de interacción basados en la superposición. Por lo general, por defecto se centra. Y vamos a hacer eso aquí en un segundo. El siguiente video para el modal. Lo que queremos aquí no está centrado. Queremos en la parte superior izquierda te da los iconos más comunes aquí también que puedas seleccionar centrado arriba, izquierda, abajo. Adelante y haz clic en Cerrar al hacer clic afuera. Y agrega fondo detrás de la superposición. Y hagamos como 70% de opacidad aquí. Ahora lo que eso va a hacer es darte un trasfondo. Entonces verás qué dormir la animación por ahora vamos a cambiar esto en un segundo. Probablemente te hayas disuelto o tal vez incluso en estado aquí. Pero sólo hagamos vamos, vamos a ponerlo como incidente por ahora. Y luego nos divertiremos un poco más. Nuevamente. Tenemos onClick, abrir superposición, arriba a la izquierda cerrar al hacer click afuera, añadir fondo detrás superpuesto, tenemos aquí un color negro. Se puede cambiar el color del fondo, pero simplemente hacer negro y 70% de opacidad animación instantánea. Adelante y cierra esto. Vamos a presionar play en la parte superior derecha están presentes. Eso nos llevará al prototipo y veremos lo que pasa. puede ver que abrió la superposición. Este es el 70% negro. Tenemos el menú aquí, pero no puedes salir de esto ahora mismo. No hay forma de salir. Así que vamos a cerrar el botón X y llevarte de vuelta a esta página. Entonces entre el cajón todavía en modo prototipo, seguir adelante y seleccionar la x y simplemente arrastra esa de vuelta al tablero de arte de Baba t y hacer onClick navegar a está bien. Instantáneo debe ser perfecto. Adelante y cierra eso. Ahora volvamos y podemos volver a presionar play. Vuelve por el menú. Y ahora cuando hacemos clic en X, lo verás cerca aquí. Ya verás cuando yo, cuando seleccioné el tablero de arte y presioné Play, acaba de cargar el tablero de arte aquí. Muy bien, por lo que también cargará el prototipo basado en cualquier tablero de arte que hayas seleccionado. Entonces lo que hice es que volvía hacia atrás o puedes volver aquí, volver a Imax 17, presiona play en la parte superior derecha. Ahí está tu menú Cerrar y eso se ve bien, pero no tiene ninguna transición y sí tiene frescura. Vamos a agregarle algunas cosas geniales. Entonces en este punto, lo que queremos hacer es asegurarnos de que estemos en modo prototipo. Ve a agarrar nuestro prototipo de menú aquí, abre los detalles de interacción. Lo que queremos cambiar como la animación desde el instante, queremos que se mueva. Cuando se mueva, podrás definir en qué dirección se va a mover . Y estos son un poco divertidos. Puedes hacer mudarte desde arriba, moviéndote desde abajo, muévete desde la izquierda, o muévete desde la derecha. Puedes meterte con estos. Vamos a tener más opciones cuando lleguemos a los prototipos móviles para mostrar cómo estas diferentes direcciones de movimiento y formar el sobre el cajón del menú. Pero en nuestro caso, queremos que se mueva desde la izquierda y se mueva a la derecha así que queremos, y te da un pequeño adelanto aquí. Queremos que se mueva bien. Va a entrar de la izquierda y moverse por la derecha. Y no te preocupes por la facilidad ni nada que debería estar bien ahí. Entonces sigamos adelante y cerremos eso. Y ahora volvamos a nuestro prototipo aquí. Presiona el menú y mira esa diapositiva en. Ya ves cómo esa hendidura adentro. Aún no hemos aplicado nada de la x. Pero se movió. Y actuó como un bonito menú de transición. Pero boom, enfrían Thich Nhat de efectos de sonido, pero raramente. Vamos a cerrar esto. Ahora vamos a agarrar la x aquí, agarrar ese prototipo. Y en la animación Agregar, lo que queremos no es mudarse. Queremos que se mude. Queremos la dirección opuesta, ¿verdad? Por lo que definimos el menú para entrar de la izquierda y movernos hacia la derecha. Y queremos que se mueva de derecha a izquierda. Y se puede ver que ya está incumplido a la izquierda. Ese es el que queremos. Vamos a cerrarlo. Vuelve a nuestro prototipo aquí. Muévete por la izquierda, muévete, mira cómo funcionó eso. A veces lo que va a pasar es que terminarás con la x. vas a, terminarás con no una mudanza, sino con una mudanza. Y mira la diferencia aquí. Cerrar la x. Fue un poco maravilloso. A ver cómo es como que no está mal. Pero notarás que no se mueve en un lugar como se mueve y desaparece. Solo ten en cuenta que si lo estás mirando, se ve un poco incómodo. Estamos hablando del prototipo del cajón aquí. Si algo se movió y mostró el cajón y tú y tu cierre el cajón siempre deben estar en Adam, muévete y luego selecciónalo de nuevo para salir. Y ahora verás que la línea del arroyo se mueve hacia fuera. Es sutil pero es importante. De acuerdo, Genial. Eso envuelve el menú y el cajón. Voy a hacer otro video sólo para mantener estos cortos, dulces. Y iremos a modales. Te veré en el otro video. Adiós. 27. Crea - web: modales y acordeones: Muy bien, Bienvenido de nuevo. Espero que te estés volviendo bastante bueno y familiarizado con Figma. Vamos a ver modales. Voy a alejar un poco, solo mando menos o Control menos si estás en un PC. Recuerda, vuelve. Si no ves este pequeño rectángulo que dice start, podrías empezar a diseñar pestaña. Así que ve click en la pestaña Prototipo en la parte superior derecha. Adelante y agarra este rectángulo y arrástralo hasta la sección modal donde conseguimos Mac diez ya que el iMac diez es la capa. Vamos adelante y voy a sostener z. así que estoy sosteniendo z y estoy haciendo clic y arrastrando con mi lupa. Y voy a dejar ir y va a acercar. Y te pones bastante bueno en esto donde estás, estoy en un Mac, recuerda que estoy haciendo Comando, Comando Minus Comando Más Comando Menos Comando Más, y luego estoy sosteniendo z, no me muevo. Y entonces estoy sosteniendo la barra espaciadora con la mano para moverme, por lo que toma un poco de tiempo, pero eso se volverá muy intuitivo para ti si no lo es ya. Así que de nuevo, tenemos el rectángulo prototipo de inicio a la derecha, sobre el que dice ejemplo. Esto volverá a cargar el prototipo a esta sección. Entonces esta será la pantalla que empiece primero. Así que adelante y vuelve a tu pestaña Prototipo o en la parte superior aquí, presionas el botón Presentar y ahora estará en el prototipo modal. Y si haces clic en modal, se abre un modal. Si presionas la X, eso se cierra. Súper fácil. Esto será divertido, será rápido. Probablemente ya te pongas realmente bueno en esto. Conseguir la idea. Espero. Vamos a agarrar el comienzo. Vamos a llevarlo a esta sección que dice que sí. puedes ver que ya he tenido los elementos para ti aquí. Tengo la alta y la x aquí. Lo que queremos hacer primero es que queremos volver a nuestra, nuestra herramienta de marco aquí. Y queremos hacer click y arrastrar, luego simplemente hacer un cuadrado o un rectángulo. Eso es realmente importa el tamaño siempre y cuando el tamaño no sea tan grande como el tablero de arte aquí a la izquierda, derecha, así que solo queremos un tamaño decente aquí. Ni siquiera es el modo de pestaña Prototipo. Lo que quiero hacer es pasar al modo de pestaña de diseño. Voy a arrastrar lo alto a este marco aquí. Y también voy a arrastrar la x a esto aquí. Mi nombre marco 936 aquí, voy a nombrar a éste el modal, sólo para que sea fácil conversar y hablar de esto. Ahora voy a seleccionar el modal y lo voy a mover. Si lo estás moviendo y lo alto no se movió, era como si no tuvieras el alto aquí en el tablero de arte. Entonces haz clic y arrástralo. Espere hasta que resalte azul. Entonces lo tendrás adentro. Tenemos todas las piezas que necesitamos. Va a ser bastante simple. Sólo adelante y voy a acercarme un poco. Selecciona el botón modal. Vaya a nuestro modo prototipo. Arrastra, no vayas, no vayas a esa foto. Queremos ir al modal. Será azul DUE armarse al modal. Nos dieron los valores predeterminados aquí de la última animación que acabamos de hacer. Por lo que queremos onclick, pero en lugar de navegar a, queremos superposición abierta. Nuevamente. Onclick es bueno. Y en lugar de navegar a, queremos superposición abierta. Mira por defecto al centro. Eso es exactamente lo que queremos. Queremos cerrar al hacer click afuera. Y queremos sumar la superposición de fondo y todavía hacer 70 per se aquí. No necesitamos una transición aquí, sólo vamos a mantenerla en su lugar. De acuerdo, ahora vamos a bajar. Debería abrir el modal. Seleccionemos la X y vamos a cerrarla. Si arrastra la X por aquí, puedes hacer onClick, navegar a, y no hacer ninguna mudanza ni nada, solo hazlo en su lugar. En la animación estatal, preservar la posición de desplazamiento es genial. Cierra esto. Vamos a seleccionar la capa iMac 18. Presente de prensa. Recuerda se asegura de que tu inicio esté a tu lado. Presiona el modal y ahí está tu superposición, tu pequeño modal. Presiona la X y la has cerrado. Agreguemos un poco de transición a esto. Vamos a seguir adelante y seleccionamos el prototipo de botón modal que conecta el botón con el modal. Y donde tenemos animación, vamos a disolver. Y 300 milisegundos es genial. Cierra eso. Vamos a hacer lo mismo a la x aquí. Adelante y haz click en la x. si estás haciendo click en la X y no puedes ver los detalles de transición. Como si te fuiste y hacías clic y me gusta, Hey, no puedo conseguir esos detalles de interacción. Se puede hacer click en la parte superior donde dice interacción, y simplemente haga clic allí y también los abrirá. O puedes hacer click en el pequeño brazo GUI. Y eso lo abrirá también. Adelante y hazlo disolver. 300 milisegundos es perfecto. Ahora verás que la transición se disuelve un poco. Cerrar disolver. Vale, genial. Empacemos dos en un video aquí. Pasemos a acordeones. Voy a arrastrar el get among, volver atrás y no en la pestaña Diseño sino en el modo de pestaña Prototipo. Voy a agarrar el comienzo, ponerlo al ejemplo del acordeón. Seleccione iMac 11. Presione Play. Tu debería verse como este acordeón. Solo quería hacerte saber que eres impresionante. Te amamos, a mí y mi novia o a mi perro y a mis amigos. Y feliz diseño. Vamos a hacer clic en tu impresionante. Y se ve como ese acordeón mira esa transición que fue hermosa. No se llenó. No me sentí como un salto muy grande. Fue una buena transición. Vimos la pequeña zanahoria o la flecha ir moverse a 180 grados. Se volteó. Vimos que el estado activo ahora por tu impresionante, ve al rosa. Y reveló que la información a nivel infantil. Y vimos lo alto. Bien, genial, volvamos. Volvamos al modo prototipo. Vamos a agarrar este comienzo aquí. Arrastra eso hasta donde dice iMac 19. Y el que dice que sí. He construido uno de los titulares de acordeón aquí, así que voy a entrar en el modo tabulador. Lo primero que voy a hacer si eres un prestar atención es que escribí mal acordeón? No sé si cogiste eso. Entonces lo que vamos a hacer es que vamos a aprender la herramienta de texto. Para que pueda entrar en la herramienta de texto aquí. Y puedo seleccionar esto de acuerdo con la herramienta de texto. Y puedo hacer la a. puedo presionar Escape en mi teclado para sacarme de la herramienta de texto. O puedo simplemente hacer triple clic en este campo de acordeón así, y cambiarlo y mantener el turno porque es capital. Y puedo cambiar esto a acordeón. Puedes ver que tengo, puedes seleccionar tu impresionante. Se puede seleccionar la, la zanahoria o la flecha y el fondo. Lo que queremos hacer es que queremos seleccionar todos esos y queremos agruparlos. Así que tienes tu impresionante. Voy a mantener el turno. Voy a seleccionar la zanahoria aquí. Y voy a mantener el turno, seleccionar el fondo. Y puedo ya sea Comando G en un Mac o Control G, como en Greg. O podría hacer clic derecho. Y puedo agrupar esta sección C donde dice grupo. Ahora esta será una agrupación. Si hago clic una vez y lo muevo, eso es lo que significa. Está agrupada. Y si quiero entrar y seleccionar diferentes áreas, puedo hacer triple clic. Y ahora puedo meterme en la agrupación y luego hacer clic fuera o presionar Escape. Y te sacará de esa agrupación. De acuerdo, así que voy a copiar esto, voy a mantener Option otra vez, estoy en el Mac. Si estás en una opción de PC, en mi click y arrastre, voy a mantener el turno como lo hago. Si no sostengo Turno, me da esto. Soy capaz de mover esto por ahí. Si sostengo turno puedo. Es mantenerme alineado con el objeto que estoy copiando. Voy a dejar ir aquí. Mi zoom en un poco. Y voy al teclado de flecha. El segundo encabezado arriba solo un poco, solo para que haya un poco de distinción entre el superior y el inferior. El nombre de mi perro es masticable. Di masticable te ama. Puedes escribir lo que quieras. Nuevamente, este es tu mundo. No se puede hacer, cierto. Puedes hacer el nombre de tu perro. Voy a hacer lo mismo. Voy a sostener Opción. Voy a hacer clic y arrastrar hacia abajo. Voy a mantener el turno, ¿verdad? Entonces estoy sosteniendo Turno. Entonces no turno, turno. Realmente no puedo moverme. Vuelve a bajar otra vez. Nuevamente. Voy a flechazar el teclado. Perfecto. Digamos que vamos a añadir éste. Ama la comida. Oh, le encanta la comida. De acuerdo, entonces ahora tenemos nuestras tres categorías de nuestro acordeón. Lo que voy a hacer es que voy a agarrar al masticable te ama. Voy a sostener Shift, agarrar el masticable ama la comida. Estos dos, voy a agrupar estos. Voy a hacer un Comando G o Control G. Si estás en PC. Yo lo haré, te mostraré la otra forma en la que puedes hacer clic derecho hacer sección Grupos. Ahora lo que vamos a hacer, voy a mover el alto por aquí. Vamos a copiar este tablero de arte, conseguirles opción de sostenimiento, y ver cuando sostengo Shift, puedo hacer lo mismo con el tablero de arte en este momento. Sin turno, turno lo mantiene en línea. Voy a moverla por aquí. Con mi alto sobre. Vuelve a la nueva que acabamos de seleccionar. Los que agrupamos. Chewy te ama, masticar ama la comida. Va a mover eso hacia abajo. Voy a llevarme tu impresionante. Voy a agarrar eso y agruparlo también. Ahora voy a desagruparlo. Voy a hacer clic derecho. Y Ungroup. Ahora debería poder seleccionar el texto y la flecha. Suprime la flecha, borra el texto. Y voy a estirar, seleccionar el elemento de fondo, estirarlo hasta donde dice, masticable te ama. Voy a moverla un poco solo para tener un poco de espacio entre los dos. Ahora se ve bien. Voy a salir al Comando Minus. Ahora voy a seleccionar mi triple clic. Sí, sí, sí, sí. Sí. Yo triple clic drivel Glick, Drew legging libro. Soy un triple clic para agarrar solo el rectángulo donde dice Eres impresionante. Y voy a ir a nuestros estilos, haré que ese mequi, mequi por aquí. Perfecto. Voy a agarrar el texto. Eres increíble. Si no lo estás consiguiendo, estás a nivel grupal. Triple-click, doble clic habitación de like, ok, ahora están en tu impresionante. Vamos a ir a mis estilos aquí. Vamos a seleccionar el color blanco. De nuevo, voy a repasar triple clic, triple clic, triple clic. También puedes seleccionarlos en la paleta de capas a la izquierda aquí. Pero voy a seleccionar la flecha. Y también vamos a hacer eso blanco. Entonces lo que vamos a hacer con esta flecha es que la vamos a rotar. Entonces si pongo el ratón a la esquina de la flecha, hay que acercar para esto. Si estás demasiado alejado, no verás cambiar tu mouse. Tienes que ir como realmente acercado. Y si coloca el ratón sobre cualquier esquina de un elemento u objeto, puede rotarlo haciendo clic y arrastrando. Y así queremos rotarlo 180 grados. Luciendo bien. Vámonos con la palabra Preparatoria, colóquelo aquí. Y ahora tenemos el acordeón abierto. Nuevamente. Ve a agarrar iMac, capa de 22 años aquí. Simplemente muévala para asegurarte de que esa altura llegara allí. A veces verás que la altura parece que está encima de tu tablero de arte. Se verá así. Parece que está ahí. Estarás mirando el prototipo y estarías como, ¿Por qué no está el alto ahí? Puedo verlo en mi diseño, pero no lo veo en el prototipo que te enloquece. Pero simplemente mueva el tablero de arte solo para asegurarte de que esté ahí dentro. Y si no se mueven en la mesa de trabajo y no lo vas a ver en el prototipo. Voy a seguir adelante y Comando C. Esto selecciona mi tablero de arte Comando V o Control V. Si estás en un PC, nos vemos bien. Volvamos. Entrémonos en nuestro modo prototipo. Haga clic en la parte superior derecha aquí, asegura de que tengamos el rectángulo de inicio junto al que dice que sí. Click, eres impresionante. Y arrastra eso al tablero de arte del iMac 22. Onclick. ¿ Qué se debe para la animación? Simplemente haz instantáneo. Tenemos onclick, navega a un instante. Vamos a agarrar el que está activo a la derecha. Vamos a arrastrarlo a este tablero de arte. Lo mismo, onclick, navega al instante. Eso debería abrirse y cerrarse. Agregará algunos efectos geniales a esto aquí en un segundo. Vamos a ver el prototipo. Voy a ir a la parte superior derecha. Tengo que presentar tu impresionante, abre eso. Y luego vuelve a hacer clic en él, restringir, cerrarlo. Pero no hay error de transición y no hay cosas geniales sucediendo en él. Voy a querer mis productos, estaría genial. Lo vamos a sumar. Aguanta, solo sostén tus caballos. Vamos a hacerlo genial. 1 segundo. Volvamos a nuestro diseño aquí, y hagámoslo fresco. Lo vamos a hacer es que vamos a ir a su impresionante. Voy a seleccionar el prototipo aquí en animación. Vamos a hacer animate inteligente. Eso va a hacer que se enfríe. No te preocupes por la facilidad en ni la duración del tiempo. Haz lo mismo con tu impresionante. Adelante y selecciona aquí la línea prototipo. Ir a smart animate. Vamos a ver si todo funcionó aquí. Haga clic en él. Parece un acordeón de verdad. Esto es tan impresionante. ¿ No es genial diseñar? Wow, esto es como Bob Ross en el futuro. Este es el siguiente nivel, Bob Ross tipo de cosas aquí mismo. Sólo puedo ver aquí y simplemente haga clic en esto por días. Sabes qué, sólo voy a hacer clic en esto por un rato. Ojalá la tuya se vea así. animate inteligente se vuelve bastante loco cuando haces esta función. Hay una razón por la que te tenía grupo. El masticable te ama. Y al masticable le encanta la comida. Y también asegúrate de que esté agrupada por aquí. Es que a veces voy a ver si puedo reproducir esto. No me sigas. Sólo te voy a mostrar, voy a desagrupar todo esto. Tengo estas secciones aquí donde dice Shu, Él te ama, mastica, ama la comida y todo esto. Lo tengo desagrupado en ese tablero de arte y lo tengo agrupado por aquí. A veces eso lo hará no tan resbaladizo. Todavía estaba bien. Se puede ver que hay un poco de rezago aunque no tuvo el chasquido es como lo hizo cuando nos agrupamos. Voy a volver atrás y deshacer esto muy rápido. De acuerdo, entonces estamos de vuelta en donde agrupamos todo estaba bien. Vuelve aquí una vez más. Asegúrate de que esto esté agrupado. Mira eso, mira cómo obtienes esta agradable transición suave. Eso se debe a que ambos son elementos agrupados que los mismos elementos en el tablero de arte. Cuando utilices la función Smart Animate, asegúrate de que lo que no quieras animar esté agrupado y asegúrate de que la agrupación sea la misma en cada una de estas páginas. Entonces cada una de estas páginas prototipo, asegúrate de que esas agrupaciones sean las mismas. Es, es, es una cosa invisible que está dentro de Figma. Pero puede volverte loca a veces por qué tu transición no se ve tan suave y tan resbaladiza. Y suele ser por las agrupaciones. Entonces si estás teniendo ese problema, solo agrupa elementos y luego trabaja de ida y vuelta entre esas dos páginas aquí y asegúrate de que los mismos elementos estén agrupados y eventualmente debería llegar a eso punto. Mira solo una vez más, mira lo suave que es esto. Ahora vamos a desagrupar todas estas cosas aquí. Ahora mira. No tenías a ese género asqueroso de esa bondad a ella. Eso es porque está desagrupado. Muy bien, eso envuelve acordeones. Te veré en la próxima clase vamos a hablar de nuestro próximo video. Vamos a hablar de creación de cuentas y validación en línea, que aprendimos en uno del pasado. Nos enteramos de la validación en línea en la charla de formulario que hicimos. Te veré ahí pronto. Adiós. 28. Crea -web: creación de cuentas + valorización en línea: Está bien, genial. Así que sigamos adelante y pasemos de los acordeones y pasemos a la creación de cuentas y validación en línea. De nuevo, voy a asegurarme de estar en la pestaña Prototipo para poder ver este pequeño rectángulo azul. Si no lo estás, probablemente estés en la pestaña Diseño en la parte superior aquí. Ir al prototipo. Empieza, adelante y mueve eso hacia abajo al iMac uno. Ahora estamos en el ejemplo. Y sigamos adelante y presionemos play en la parte superior derecha para mostrar el prototipo. Vamos a entrar en el prototipo aquí. Lo que vamos a hacer es que vamos a mostrar una pantalla de creación de cuenta donde tenemos nuestro correo electrónico y contraseña. Y si hace clic en la contraseña, una vez, tenemos validación en línea mostrando los requisitos de contraseña se están cumpliendo a excepción de uno. Y cuando vuelvas a hacer clic, digamos que agregó ese último número dos, tu contraseña. todos los requisitos de su contraseña. Pulsas Crear. Y tenemos un pequeño spinner en el botón para crear tu cuenta. Y eventualmente esto te llevaría a la página principal del sitio Bobo me. Y sería capaz de pedir delicioso buen Bobo T a la entrega en un plazo de diez minutos. De acuerdo, Genial. Por lo que nos enteramos de que este botón se convirtió en un spinner. Cuando hicimos la clase de botones, quería mostrarte cómo construirlo dentro de un prototipo en vivo. Voy a ir a la parte superior izquierda aquí a la pestaña diferente en la parte superior donde dice el archivo de proyecto de patrones de diseño. Haga clic en eso. Voy a bajar un poco del ejemplo al que dice que sí. Voy a hacer clic y arrastrar, ponerlos en el modo de pestaña Prototipo, no en modo de diseño, modo de pestaña Prototipo. Haga clic y arrastre el inicio de nuevo al iMac 20. Esto iniciará el prototipo en esta página. Y lo mejor es que ni siquiera necesitamos hacer nada en esta página. Lo que queremos hacer es sólo copiarlo. Alguien que ostente Opción. Haga clic y arrastre. Puedo sostener Shift para mantenerlo alineado y copiar esa página. Queremos imitar esta página aquí donde tenemos la contraseña Crear Cuenta que está enfocada y en el estado de entrada del formulario. Y queremos hacer la validación en línea mostrando que se están cumpliendo los requisitos de contraseña. Vamos a agarrar esto. Esto ya está agrupado. Lo que podemos hacer, podemos desagruparlo, no vamos a hacer cuando sea inteligente animar cosas. Así que vamos a desagruparlo. Podrías hacer clic derecho. Puedes hacer un Cambio de Comando G o Control Shift G si estás en un PC o puedes hacer clic derecho y simplemente desagruparlo. Voy a seleccionar el rectángulo y una mezcla que quiero diseñar pestaña por aquí, derecha, no ficha de diseño prototipo. Ver el color del trazo. Voy a hacer clic en ese color. Y lo voy a hacer negro. Sólo hazlo negro. Ahora voy a seleccionar los textos fantasma. Voy a hacer click en esto. Y voy a hacer un Turno ocho o lo siento. Comando o comando Z. Comando Shift, Sí. Está bien, genial. Opción, lo siento, opción a para las balas. Y luego voy a hacer un guión de turno en la parte superior y seguir adelante y hacer este color aquí. Se puede ver que se pone en gris para Rompamos eso. Vamos a separarlo, romperlo. Hagámoslo solo negro. Fácil de peasy. Ojalá fuera fácil-peasy. Vamos a seguir adelante y seleccionar el texto aquí donde dice requisitos de contraseña. Voy a tener la herramienta de selección. Sólo voy a hacer triple clic en él. Fueron atrapados, atrapados, atrapados, atrapados, triple clic. Selecciona al menos dos letras, al menos todo el camino hasta una letra mayúscula. Sólo estoy haciendo clic y arrastrando a Juju. Voy a ir a mis colores aquí. Voy a seleccionar un bonito color verde. Y voy a ponerlas verdes. Eso debería ser bueno. Vamos a acercar un poco. Ves que tengo estos pequeños círculos aquí. Selecciona los círculos que voy a mantener turno. Vamos a quitar el trazo. El trazo en este momento es ese cinco gris, solo quita el trazo. Vamos al relleno. Y hagamos también de esto un verde. Puede ser el verde a juego o puede ser de un color diferente, verde. Está bien desde el texto. Como caramelo manzana verde. Sí, eso es un poco genial ahí. Perfecto. Ahora estamos mostrando validación en línea. Estamos mostrando al usuario que tiene una contraseña, se ve bien, pero hay que agregar un número. Así que alejemos un poco. Voy a copiar este tablero de arte, iMac 23. Mantenga la opción en mi teclado, obtenga la flecha doble, haga clic y arrastre el arco. Te conseguí un nuevo tablero de arte. Eso es correcto. Bien, ahora estamos de vuelta en el tercer tablero de arte. Si alejo el zoom, vaya al tercero. Vamos a agregar un par más opción ocho. Ahí vas. Y ver dónde dice esto al menos un número. Vamos a seguir adelante y agarrar eso. Ahora iremos a Rellenar color, pero eres como zona. ¿ Cómo obtenemos ese verde que acabamos de hacer. Considerando que un par de formas podemos hacerlo. Podemos agarrar el cuentagotas y puedes colocarlo sobre uno de los colores verdes. Selecciona y podrás ver el cuentagotas y la parte superior derecha, selecciona ese color verde. Esa es una forma. Pero puedes ver que está apagado porque no te da el color exacto. Por eso hacemos estilos. La mejor manera es seleccionar este verde. Adelante y mira dónde dice 008937. Hagamos eso en un estilo. Adelante y haz click en los cuatro pequeños puntos aquí estilo. Ahora haz el signo más. Hagamos esto verde. De acuerdo, así que ahora para seleccionar el texto aquí, al menos uno, ve a nuestros cuatro pequeños puntos aquí. Se puede ver el color verde que acabamos de hacer ahora es una Biblioteca de Estilo. Presiona greenie, bang. Pero ahora vamos a hacer el mismo cuentagotas aquí con, voy a acercar. Estoy usando, sé que hice tan rápido. Estoy usando Z en mi teclado para acercar esta área. Selecciona el último círculo, mira la palabra raspar cinco trazos, elimínalo. Voy a meterme en el blanco. Y aquí es donde el cuentagotas. Perfecto. Adelante y haz clic en el cuentagotas dentro de la ventana de diálogo de color, arrástralo y ahora agarra ese verde. Eso funcionará. Tenemos el estado aquí donde tienes el valor predeterminado y haces clic en tu tipo en tu contraseña, necesitas agregar un número. Has cumplido con todos sus requisitos. Copiemos aquí una pantalla más. Estoy sosteniendo opción en mi teclado y turno, soy una copia que la pantalla arriba comprando. Vamos a seguir adelante y seleccionar el color gris en la parte superior. Por lo que voy a hacer click en éste. Aquí está nuestra banda gris de contorno C D. A medida que aprendes mejor manera de reutilizar tus colores, hagamos un estilo para el gris. Crea un nuevo estilo. Llama a esto gris. Gris. Bueno, genial. Bueno, está ahí Cool. Está bien, genial. Vamos a seguir adelante y entrar en las balas aquí. Eliminar el guión, la slash. Vamos a seleccionar solo el rectángulo. Volvamos a nuestros estilos. Recuerda aquí los cuatro puntitos al lado del trazo. Hagámoslo tan gris. Lo recuperaré en ese estado predeterminado. Voy a seleccionar este botón, está agrupado. Entonces conseguí hacer doble clic, hacer clic en true. Todo bien. De acuerdo, ahora tengo que crear, borrarlo. Eliminar en el teclado. Boom. Si te fuiste así, eliminaste el botón. Eso significa que no hiciste triple clic, triple clic, triple clic, triple clic, triple clic. Alguien para alejar. Voy a ir a la de arriba aquí. Voy a seleccionar este spinner. Voy al Comando C, como en cat, o Control C. Si estás en un PC, en el Mac, me aseguraré de seleccionar este tablero de arte aquí. 25, estoy en un Mac, así que voy a Comando V, como en Víctor, y se pegará en su lugar. Si estás en un PC, haces Control V y se pegará en su lugar. Si no lo hace, está bien. Simplemente muévelo encima de ese botón. Agarra este tablero de arte. Estoy a los 25. Muévela. Asegúrate de que todo se mueva con el tablero de arte. Si no lo hace, no está en el tablero de arte, no se mostrará en el prototipo. Muy bien, vamos a unir esta cosa. Costura bastante simple. Agarra la contraseña creativa, ve a tu prototipo, la parte superior. Arrastra el brazo GUI a ese. Queremos onclick, no queremos animate inteligente. Simplemente hazlo instantáneo. Ciérrala. Ve a la siguiente. Todo lo que tenemos que hacer es el formulario aquí. Arrástralo por aquí. Instantánea. Todo lo que necesitamos onclick navegar al instante. El mismo aquí. pestaña Prototipo agarró un pequeño brazo GUI conectado a la siguiente pantalla, onclick navegar al instante. Y eso debería ser una validación completa en línea con el spinner bonus en el botón. Asegúrate de tener la orina, la pestaña Prototipo. Asegúrate de estar al lado de la u du. Pulse aquí la capa iMac 20, presione play, haga clic en crear una contraseña, Validación de línea. Una vez más. Agregamos ese número. Y aún tenemos que hacer el Create. Volvamos por la pestaña superior izquierda y volvamos a nuestro archivo de diseño. Se puede ver esta pantalla simplemente seleccionándolas. Cuando tengas el clic en la pestaña Prototipo, verás los brazos de la GUI del prototipo que conectaron. Tenemos esta conexión. Hicimos la equivocada. Por eso puedes ver que hice el formulario aquí. Puedes hacer Período de comando para mover las herramientas también alrededor, como esconderlo todo en Figma, comando Barra espaciadora de periodo. Se puede ver cómo le puse este brazo a ese, el campo de formulario por aquí. Y éste no debería ser el campo de formulario, debería ser el botón. Voy a hacer otro periodo de mando, o si estás en un control de PC, periodo de control. Voy a eliminar este brazo. Entonces cómo lo eliminas como un par de cosas puedes ir a interacciones aquí en la parte superior, solo estoy presionando menos y eso lo eliminará. O simplemente puede hacer clic en el brazo GUI apagado. No lo conectes a nada. Simplemente suelta tu ratón, haz clic y arrastrado, solo déjalo ir. Y ahora vamos a agarrar el botón Crear y arrástrelo por ahí onclick navegar a su lugar. Vuelve a nuestro prototipo aquí podemos presionar play. Automáticamente te pasa a la pestaña Prototipo. Presiona Crear. Mira. Bastante impresionante. Te veré en el siguiente video. Vamos a cubrir los despachos. Te veré ahí. Adiós. 29. Crea - web- Desplazamiento de la web: Muy bien, Bienvenido al siguiente video donde vamos a cubrir los desplegables. Nuevamente, recuerda el modo de pestaña Prototipo agarró un pequeño rectángulo de inicio. Arrastra éste todo el camino hasta el ejemplo del desplegable hizo Eso va a arrancar el prototipo desde esta sección aquí para que podamos ver cómo se ve el desplegable. Adelante y presiona play en la parte superior. Muy bien, así que aquí está nuestro menú desplegable. Queremos seleccionar un estado. Haga clic en el desplegable, la flecha va a 100, un 80 grados a medida que gira el volteo. Y luego esto es lo que vamos a averiguar en Figma es que puedo desplazarse justo dentro del desplegable. Como un paseo por todas estas opciones aquí. Y si hago clic en, digamos California, verás California. Vuelvo a hacer clic en ella. Veo el desplegable. Puedo hacer clic atrás hacia fuera. Bastante simple, pero también tiene cierta complejidad a ella, pero debe ser bastante fácil. Volvamos y asegurarnos de que estamos en modo prototipo aquí. Agarra el brazo de arranque, tráelo a ti. Hacer. Y voy a acercar un poco. He agregado todo el texto aquí para todos los estados al lado de la derecha. Vamos a mover eso un poco. Sólo muévete eso. Voy a agarrar aquí el tablero de arte del iMac 21. Obtener No estoy agarrando los elementos dentro, agarrando el tablero de arte. Estoy sosteniendo opción. Voy a copiarlo a la derecha. Vamos a conseguir el estado abierto para el menú desplegable. Entonces lo primero que se puede ver ya que está agrupado, solo desagrupa todo, derecho G, Haga clic con el botón derecho desagrupar. Vamos a seleccionar la Esperanza puede tener que desagruparlo de nuevo. Seleccionemos solo la zanahoria o la flecha y volvamos a rotarla. Tienes que acercar. Estoy sosteniendo z, acercando. Adelante y voltea esos 180 grados. Así como eso. Queremos hacer es que queremos hacer esta pequeña caja blanca aquí. Voy a entrar en la herramienta rectángulo. En la parte superior izquierda, verás que tienes las herramientas de forma. Tienes rectángulos y líneas y flechas y elipses y polígonos y estrellas y muchas otras cosas. Pero vamos a entrar en la herramienta rectángulo, simplemente haga clic en ella. Será por defecto como gran gris. Sólo voy a hacer clic y arrastrar en mi tablero de arte. Nuevamente. Mueve la mesa de trabajo alrededor, asegúrate de que esas cajas grises allí. Se ve bien. Ahora vamos a darle sombra a esta caja gris. Pero antes de que hagamos eso, hagámoslo blanco. Así que vuelve a nuestros estilos aquí. Vamos a agarrar nuestro blanco. No podemos verlo. Vamos a seguir adelante y vamos a nuestros Efectos. Si estás en la pestaña Diseño, solo sígueme aquí. Voy a ir a efectos. Voy a añadir un efecto. Se va a dejar caer sombra por defecto. Recuerda lo que dije en mi Clase Sombra, no quieras usar nunca sombras paralelas predeterminadas. Se puede ver lo que hice aquí. Hay un poco parecido, parece una bombilla o un ícono que respira el sol. Es tu configuración de efectos. Queremos editar los estados predeterminados de esta sombra paralela. Entonces tienes cuatro en la y, que es la parte inferior, la línea horizontal. ¿ Qué es seguir adelante y hacer cinco en la x, que es la sección vertical, cinco en la y Entonces, ¿qué hacemos siempre? No sé qué hacemos en este punto error? Agregamos desenfoque, mucho desenfoque. Al igual que 30, estoy sosteniendo turno. Sólo puedes escribir 30. Vamos sólo 30. Vamos un poco menos que eso. Hagamos 20. Está bien, genial. Ahora vamos a añadir un poco de un gris azulado a las sombras demasiado fuertes. Eso se ve bien como ahí. Eso es 909. Se puede simplemente un poco en cualquier lugar allá arriba. Está bien. Al igual que esta zona está bien. Ok. Cierra esto cerrar el diálogo de sombra. Perfecto. Tenemos nuestra sombra paralela. Vamos a empujar esto un poco hacia arriba en las flechas del teclado que van. Ahí vas. También voy a agarrar la herramienta rectángulo y clic y arrastrar y simplemente hacer el pequeño brazo de desplazamiento. Nuevamente, no podemos usar Figma para hacer este pergamino como lo haría cuando se construyó. Pero ayuda a informar al usuario y al prototipo. Si fuéramos a probar esto, que esta información, todos los estados de la derecha aquí son desplazables. O no puedes hacer este movimiento, ¿verdad? Como cuando estoy en esto, no puedo estoy desplazando. Esa es otra Es un poco más. Puedes, pero es toda otra clase de antemano. Clase y probablemente ni siquiera vale la pena el esfuerzo por hacer que esta cosa se desplace. Poca, pequeña forma gris ahí. Voy a agarrar todos los textos aquí a la derecha. Voy a arrastrarlo a mi expediente. Se puede ver cuando va en el expediente porque no debería salir del tablero de arte. Voy a arrastrarme a mi tablero de arte. Debe destacarse así. Se debe recortar, ¿verdad? Entonces cuando entro aquí y lo arrastro, quiero que entre ahí y recorte ahí vas, así así. Vamos a moverlo un poco aquí, asegurarnos de que esté recortada. Voy a acercar un poco. Aquí está el pateador aquí. Es que lo que vamos a hacer es que vamos a hacer clic derecho sobre esto. No importa dónde lo posiciones. Puedes colocarlo en cualquier parte de la foto. Realmente no importa por ahora. Vamos a hacer clic derecho sobre él e ir a la selección de fotogramas una vez más, ¿verdad? Es súper importante. Súper, super importante. Haga clic derecho. Y luego hacemos Selección de Marcos. Bien, genial. Por lo que ahora esto ha creado un marco. Si miras en la paleta de capas de la izquierda, tenemos un marco. Y si haces clic y abres eso, tenemos todos los estados aquí, no tienes que hacer esto. Voy a Comando Z para volver. Para que puedas ver esto. ver cómo en las capas tengo todos los textos aquí para todos los más o menos un cuadro de diálogo para el texto y todos los estados aquí. Si hago clic derecho en esto, voy a enmarcarlo. Y casi tiene como una agrupación. Pero la agrupación de cuadros es un poco diferente de un grupo. Ahora lo que queremos hacer es que quiero alejar y agarrar la parte inferior de este marco. Por lo que voy a seleccionarlo. Voy a agarrar el fondo. Y estoy en un Mac, voy a mantener el Comando. Al mantener el mando, estoy empujando este marco hacia arriba. Deberían verse así. Si se ve así. Sí, estás bien. Vale, así que sí, solo asegúrate de tener mando. Asegúrate de tener la capa de marco. Haga clic y arrastre eso hacia arriba. Entonces a la derecha aquí tenemos nuestra sección de marco. Estoy en la pestaña Diseño. Sección de marco. Esto podría ser un poco complicado, pero es bueno. Él es bueno. Bueno, lo que queremos hacer es contenido de clip. ¿ Qué va a hacer? Va a recortar el contenido. Este marco. A ver cómo eso hizo eso. Lo que estaba pasando por eso una vez más. Lo haré rápido esta vez. Acabo de tener mi herramienta de texto. Escribo o simplemente mi cuadro de diálogo de texto. Haga clic derecho en la selección de marcos. Tengo el mando. Si estás en un PC, sí controlas clic y arrastra. Trae esta caja. Se acercó al área de diseño correcta, contenido de clip, boom. Ahora arrastra esto encima de tu desplegable. Y lo que queremos hacer ahora es mantener Comando o Control. Nuevamente, si estás en un PC y recorta esta información para que quepa justo dentro del cuadro de diálogo desplegable. Así como así. Y luego agarra la tenencia superior, otra vez sosteniendo el Comando. Si estás haciendo esto, no estás sosteniendo el mando. Sostenga Comando, o Control. Si estás en un PC y mueve esto a la parte superior derecha. Si no lo estás, si no estás sosteniendo eso, sabrás porque estás moviendo el cuadro de texto. Queremos el comando de capa de marco. También voy a sacar un poco a la izquierda. Ahí vas. De acuerdo, así que vamos a conseguir el siguiente estado que voy a arrastrar. Voy a copiar la primera página aquí a la derecha, solo la página predeterminada. Y vamos a escribir en California, puedes poner en cualquier estado que quieras. Y voy a hacer esto negro. Voy a volver a romper el color por aquí a la derecha o el relleno y simplemente hacerlo negro. Bien, perfecto. Tenemos este sentido del desplegable. Ahora vamos a coserlo juntos contra select y asegurarnos de que tu inicio esté en la sección que haces. Ve a agarrar el estado, arrastra esto hasta el siguiente tablero de arte onclick, navega para instantáneo perfecto. Ahora entonces selecciona aquí la capa de texto y arrastra esa al siguiente tablero de arte. Onclick navega al instante perfecto. Vamos a ver eso entonces vamos a añadir una cosa más. Adelante y ve a la cima justo aquí. Presione Play. Haga clic en su menú desplegable, y puede ver que no se está desplazando. No hay desplazamiento pasando en este momento. Prensa California. Boom. Vale, eso funciona bien. Lo que tenemos que hacer es ir a hacer este pergamino. Ahora, vamos a agarrar este texto aquí. ¿ Dónde vamos a producir? Si lo tienes en diseño, verás que sólo se ve así. En el modo prototipo aquí, ver dónde dice el desplazamiento de desbordamiento. Así que tengo esta casilla seleccionada, haz desplazamiento vertical. Ahora volvamos a nuestros prototipos. Por lo que empieza con la página de inicio. Así ve a seleccionar capa iMac 21. Muy bien, así que volvamos a su página predeterminada. Presione Play. Presente. No vayas con pestaña al prototipo, necesitamos recargarlo. Simplemente ve a presionar Jugar aquí, y luego haga clic en este menú desplegable. Deberías poder desplazarse dentro de esto, también puedes hacer clic y arrastrar y mirar, ahí están todos los estados. Easy-peasy hará clic en California. Boom. ¿ No es eso genial? Muy, muy cool. Agarremos la entrada del Estado de California. Copia ese también. Ahora vamos a seleccionar nuestro menú desplegable. Voy a salir del modo prototipo. Voy a volver al modo de diseño. Simplemente seleccione todas las áreas desplegables. Presiona C o Comando C o Control C si estás en un PC. Y vamos a seleccionar la capa que acabamos de copiar. Este es el iMac 25, y voy, estoy en un Mac así que Comando V, si estás en un PC, Control V, pega eso en su lugar. Ahora vamos a seleccionar el estado activo, correcto, así que acabamos de tener el que estaba abierto. Presionas California. Tenemos el estado activo de este desplegable. Vamos a conectarlo a éste en click y navegar. Y entonces esto ya debería estar enganchado hasta aquí. Genial. Por lo que ahora se puede ver cómo se ve si hace clic de nuevo en el desplegable y selecciona California de nuevo. Está bien, genial. Eso fue una finalización completa de todo para web. Te veré en el siguiente video donde vamos a ir a los prototipos móviles y vamos a crear prototipos de algunas interacciones móviles. Te veré ahí. Adiós. 30. Crea - Iphone: modal en pantalla completa: Ahora probablemente seas un Figma Pro. Te estás volviendo bueno en Figma. Lo vamos a hacer es que vamos a cambiar de su prototipo web aquí. Entonces en la parte superior izquierda, deberías tener páginas aquí en la parte superior. Vamos a cambiar al prototipo móvil, y son las mismas funciones aquí vamos a entrar. Ya tengo todo esto preconstruido. Debe ser divertido. Vamos a hacer esto juntos. Ya lo tengo. Si estás en la pestaña Diseño, se verá así. Si vuelves a estar en la pestaña Prototipo, tenemos ese rectángulo de inicio aquí. Ya tengo el primer prototipo listo para ir aquí, y vamos a hacer éste en el segundo. Así que vamos a ver esto muy rápido. Simplemente presiona Seleccionar iPhone, la capa aquí. Presione Play. Eso va a abrir un nuevo prototipo. Se puede hacer ver y ver cómo eso se raja. Y luego la x se desliza hacia abajo modal de pantalla completa con un movimiento en que sube y luego se mueve hacia fuera si eso baja. Bastante resbaladizo. Y también fácil. Así que de nuevo, lo primero que voy a hacer es asegurarme de que estemos en la pestaña Prototipo en la parte superior derecha, arrastrar la de inicio. Adelante y empuja esto por aquí. Vamos a agarrar una nueva herramienta de marco aquí en la parte superior. Lo hicimos en el último prototipo web. Ve a agarrar el marco. Estoy usando el iPhone 11 Pro X aquí mismo. Con la Herramienta Marco seleccionada. Hice clic en el acordeón de iPhone aquí, e hice Pro X. Y si solo haces clic en eso, dejará caer un tablero de arte para ti. Pasemos a nuestras capas aquí y nombremos a ésta. Llamemos a éste el modal. Está bien, genial. Así que vamos a agarrar de este tablero de arte de aquí. Vamos a agarrar el alto. Basta con seguir adelante y colocarlo Comando C, comando V. Y agarremos el comando x C o Control C. Si estás en un PC. Adelante y coloca eso por aquí. Entonces tenemos todas las piezas aquí. Súper fácil. Vamos a asegurarnos de que esta x no vaya a esta pantalla aquí. Por lo que acaba de quitar la interacción. Puedes agarrar el brazo GUI y simplemente sacarlo. Vamos a seleccionar una vista. Vamos a empezar la pestaña Prototipo. Dale clic sobre a donde dice, hola, tenemos en el grifo, por lo que será por defecto. esta estas pantallas vienen, si recuerdas cuando hicimos la selección de fotogramas, pasamos a pantallas de iPhone. Cuando entras en este modo prototipo, ahora, sabe que estás encendido, estás usando dispositivos móviles. En lugar de onClick. Ahora está en la parte superior o al arrastrar y te da las mismas funciones pero solo cambia de un onclick a un non tap. Bastante fácil aquí. Ya hemos hecho esto antes. En lugar de navegar a, hagámoslo abierto. En realidad, mantén esto igual. Navegar dos es lo mismo. En el grifo. Lo que queremos es en la animación, animación aquí queremos que se mueva y no de la izquierda ni de la derecha o de abajo. Queremos el up. Hagamos esto y volveremos a jugar un poco con esto. Nos aseguraremos de que esto se esté moviendo, no mudarnos. Y luego adelante y agarra la x, arrastra que de vuelta a la pantalla que estábamos justo en y no nos mudamos. Queremos mudarnos. No queremos que volvamos a bajar, así que muévete y baja. De acuerdo, vamos a seleccionar la pantalla Inicio que tenemos aquí, la mesa de trabajo presiona Jugar arriba a la derecha. Nos va a llevar al prototipo. Deberíamos tener lo mismo que solo estás viendo aquí. Y la x se moverá hacia abajo, se moverá hacia arriba, se moverá hacia abajo. Entonces lo que pasa aquí es lo que es interesante. Podrás saber si selecciono la x y vuelvo al prototipo y no me muevo, sí me muevo. Mira lo que pasa. Voy a volver a nuestro prototipo aquí. Simplemente puedes presionar play si quieres. Eso se ve bien. Ahora mira la x. Mira cómo la otra pantalla como fue encima de ella. Mira la pantalla se mueve en la parte superior. Eso es un extraño, nunca tendrías una, nunca verás eso en ninguna aplicación, aplicación móvil que uses. Eso es porque nos sentimos o no fallaste, pero olvidamos poner la x no en un mudanza outs en estado, sino un estado de mudanza. Ahora volvamos. Ahí vas. Esto debe seguir cualquier forma en que entra la pantalla. También debe salir del mismo orden opuesto. Se mueve adentro y se mueve hacia fuera. Vamos a probar otro. Vamos a hacer clic aquí en el botón ver solo por diversión z, digamos que esta pantalla va a entrar de la izquierda. Ahora vamos a ver esa vista presionante, ver cómo entró esa pantalla desde la izquierda. X baja. Eso fue raro porque la pantalla entró de la izquierda. ¿ Por qué va a bajar cuando se mueve? Lo mismo que podemos hacer el X ir pincha ya sea en la interacción aquí en la parte superior derecha o en el brazo GUI aquí. Y en lugar de mezclado, no, no mudarse, mudarse. Y entonces lo que va en lugar de entrar de la izquierda, queremos que y se mueva de izquierda a derecha. Y te da un pequeño ejemplo. gnosis Figma es algo confusa. Entonces dijeron: Vale, esto es lo que vas a hacer, alguien va a parecer. Por lo que de nuevo, muévete a la derecha. Ahora, conseguirás que esto se deslice y la x se deslizará hacia fuera. Y por lo general para esta interacción, no querrías realmente, querrías una flecha, como la flecha para retroceder y luego volverá. Entonces para el otro donde se trasladó cuando fue movido hacia abajo y esto fue un movimiento hacia arriba. Ahí es donde quieres la x, ¿verdad? Por lo que quieres SlideUp X cerrado. Xs es el patrón de diseño adecuado para ese. De acuerdo, genial, Eso fueron modales de pantalla completa. Vamos a hacer un móvil caído, que es diferente a un desplegable web en el siguiente video, y te veo ahí. 31. Crea - Iphone - Desplazamiento: Está bien, genial. Bienvenido de nuevo. Nuevamente. Algo así como empezó el video y asegúrate de que estás en la pestaña Prototipo aquí en la parte superior. Mueve ese pequeño rectángulo de inicio hacia abajo al que dice selección desplegable móvil , superposición inferior. Aquí tenemos el ejemplo. Vamos a seguir adelante y seleccionar este tablero de arte. Presione play en el prototipo. Y verás que tenemos una interfaz más oscura y un desplegable de UI oscuro. Y esto es diferente al desplegable que hicimos en web. Si recuerdas, el desplegable aquí en conejo solo tiene un pequeño desplegable por los campos de formulario. Y puedes desplazarte aquí. Para el móvil, es diferente. Se necesita la totalidad de los bienes inmuebles del dispositivo y entra desde abajo. Eso es un desplegable modal. Es diferente de un desplegable web. Y digamos que selecciono solo porque es más fácil desplazarse aquí. Digamos que selecciono rojo. Ahora tenemos seleccionado el desplegable. Podemos hacer otra versión de un desplegable donde tienes una x aquí para eliminarla. Y ahí lo tienes. Vamos a construir eso. Es bastante simple. Nuevamente, como de costumbre, asegúrate de estar en la pestaña Prototipo. Agarra el rectángulo de inicio, muévelo hacia abajo a donde dice que lo haces. Y más o menos tengo la pantalla de antes y después aquí. puede ver donde dice Select Color y el rojo. Lo que queremos hacer aquí es que queremos hacer esta sección desplegable. Lo que vamos a hacer es agarrar la Herramienta Frame, ir al iPhone Pro X, basta con hacer click sobre ella. Va a caer el mismo tamaño de tablero de arte. Voy a colocarlo entre el menú desplegable antes del predeterminado y entre el predeterminado activo aquí. Lo que voy a hacer es simplemente hacer esto más pequeño. Voy a hacer clic en la parte superior y solo haga clic y arrastre. Sólo hazlo más pequeño. Está bien, genial. Así que vamos a copiar algunas de estas cosas por aquí. Tenemos un sabor selecto. Voy a comandar C o control C. Sigamos adelante y peguemos eso en el comando V, como en Victor o Control V. Si estás en un Mac. Vamos a usar la herramienta de línea para el resto de estas cosas. De nuevo, vamos a ir a las herramientas de forma en la parte superior. Agarra la línea en su lugar. Basta con hacer clic y arrastrar. No tienes que ir a tablero de arte completo con aquí todavía. Solo asegúrate de que esté en el tablero de arte haciendo clic en el tablero de arte y moviéndolo. Está bien, genial. Ahora vamos a llenarlo. Deberías verlo debería, no debería poder verlo si es más largo que el tablero de arte. Si se ve así donde se pueden ver las líneas saliendo del tablero de arte. No está en el tablero de arte y mover la mesa de trabajo. Ver. Queremos asegurarnos de que esté en el tablero de arte. Hagámoslo esa línea negra como 10% de opacidad. Para que puedan ver cómo hice eso. No voy a dejar que pegue esto en muy rápido. Tomamos esa línea negra, acercamos a las capas donde dice pasar, hay un, un 100%, solo haz 10% y luego presiona Enter en tu teclado. Voy a agarrar este texto y voy a hacer triple clic en el lado derecho, agarrar este texto. Sostengo opción, clicé y la arrastré hacia abajo. Triple-click. Lo llamaremos rojo. Y ahora vamos. Ahora que estamos dentro y hemos leído seleccionado, vamos a nuestra capa de fuente aquí. Hagamos como 30. Ahí vas. Ahora voy a hacer de esto un color, cualquier rojo que quieras. Hagamos la siguiente otra vez. Ahora ya ves cómo hice eso. Solo Opción, mantenga presionado, haga clic y Mayús. Triple-click. Ten aquí todas mis capas de texto. Puedo hacer alinear a la izquierda, alinear centro, alineado a la derecha. Puedes hacerlo regular, audaz, lo que quieras. Aunque voy a mantenerlos a todos consistentes. Hagamos esto azul. Voy a hacer cualquier color azul aquí. Uy, no lo tenía seleccionado, así que triple clic, asegúrate de que tienes este texto seleccionado. Vete azul. Ahora vamos a hacer verde. Mismo trato. Bastante fácil. Sólo voy a usar el verde que ya usamos. No lo sé. Vamos a hacer púrpura. Voy a romper el color que acabamos de tener. Ve a agarrar púrpura a cualquier lugar. Puedes hacer cualquier color que quieras aquí. De acuerdo, así que vamos a agarrar las flechas son las líneas y esto es bastante genial. Mira esto. Yo haré esto. Voy a la opción de retención de flecha doble en mi teclado. Haz clic y arrastra la tecla Mayús, ¿verdad? Entonces esto es sin turno, turno, no puedo moverme y simplemente darle una buena horizontal. Estoy mirando 70 pixeles ahí. Se puede ver cómo mis pixeles allí. Estoy mirando 70 pixeles. Puedes hacer cualquier cosa, está bien. Y luego suelta. Y luego hazlo, estoy en un Mac, hago el Comando D, o si estás en un PC Control D y copiará ese mismo espaciado. Ahí vas. Ahora vamos a encajar estos adentro. Centrado dentro de esos espacios. Son púrpuras. De acuerdo, Genial. Muy bien, así que ahora tenemos que hacer es volver a nuestro prototipo, seleccionar el color favorito, pinchar y arrastrarlo por aquí. Y lo hicimos antes de salir de grifo. Y aquí está el verdadero que queremos en lugar de navegar por aquí en la parte superior derecha. Y los detalles de interacción, si no lo ves, basta con hacer click donde dice Tap. Queremos superposición abierta. Y ver cómo se omite a centrado. Queremos abajo centro aquí. Hacer cerrar, salió afuera, añadir fondo. Puedes hacer 70. Presione Intro. No queremos, queremos mudarnos desde lo alto al ya sabíamos lo que queríamos. Genial. Perfecto. Agregando agarrar rojo, haz clic en él al siguiente. Y no queremos nada más que un instante. En el grifo. Instantáneo debe estar bien. Vamos a presionar play en la parte superior derecha. Aquí está su menú desplegable modal. Eso es genial. Y selecciona rojo y se va. De acuerdo, vamos a la x sólo para que podamos cerrarla y jugar con ella. Entonces agarra la x de nuevo, esto está agrupado. Por lo tanto triple clic. Arrástralo por aquí. En cambio en la parte superior. Sí, se ve bien. Haga clic en la X porque de vuelta a la lista desplegable Seleccionar color, modal , móvil, pan, X, dulce, fácil-peasy. De acuerdo, te veré en el siguiente video. Vamos a repasar un pop-up modal debería ser fácil también. Te veré ahí. Adiós. 32. Crea - Iphone: modal, barra de títulos y menú: Muy bien, Bienvenido al siguiente video. Vamos a hacer un pop-up para o un modal en un dispositivo móvil. Súper fácil. Ya lo hemos hecho. Vamos a seguir adelante y agarrar esto, empezar de nuevo aquí y arrastrarlo hacia abajo. Lo hicimos por web. Solo quiero hacerlo rápidamente por el dispositivo móvil. Selecciona aquí el tablero de arte, presiona play. Nuevamente. Ahora estamos de vuelta a un fondo blanco. Aquí tienes tu botón y compruébalo. Ahí está tu modal. Presione Cerrar. Vale, genial. Vamos a revisarlo por aquí. Agarrado asegúrate de estar en la pestaña Prototipo. Mismo trato. Presiona el Inicio abajo por aquí también. Ya tienes todas las secciones aquí. El botón alto y el cierre. Lo que queremos hacer aquí es ir a agarrar aquí la herramienta Artboard. Ir al marco. Haz lo mismo. Iphone 11 Pro X a la derecha. Herramienta de marco, iPhone Pro X. Ahora vamos a hacerlo un poco menos alto, un poco menos ancho. Algo así. Lo sabrás porque puedes moverlo aquí y ver. Sí. Ok. Siempre podemos ajustarlo más tarde. Eso es sólo poner el Alto aquí, pero la x, y vamos a poner la x a la parte superior izquierda, sólo que sea más fácil para el usuario. Si tienen su mano derecha sosteniendo su dispositivo, pueden usar la mano izquierda y el cerrarlo en la parte superior. Lo hemos hecho muchas veces, creo que ya. Adelante y agarra el botón de texto, arrástralo hasta este marco donde dice al grifo, recuerdas que queremos hacer, ¿qué es? Abrir superposición, abierto sobre la derecha. Puede ser una vez centrado, cerca al hacer clic afuera. Hagamos 70. Podemos hacer menos, podemos hacer 50% de opacidad en este punto. Hagamos una transición de disolver aquí. Ahora vamos a agarrar la x que la cierra, arrástrela a esta mesa de trabajo en grifo. Navegar para disolver. Debe ser perfecto. Seleccionemos esta mesa de trabajo presiona play. Golpea el texto. Ahí está tu modal. Puedes presionar X para cerrarla. Se ve un poco demasiado ancho. Vamos a adelgazar un poco. Así que voy a agarrar el tablero de arte, sólo una especie de empujarlo en un poco, poner este st de alta tecnología encima. En realidad voy a encogerlo un poco el espacio vertical también. También podemos hacer es seleccionar aquí el tablero de arte e ir a tu pestaña de diseño y donde tengas. Así que de nuevo, estoy seleccionado el tablero de arte modal movido de prototipo a diseño. En el área del marco, está este pequeño ícono de una esquina llamada radio de esquina. Puedes redondear eso. Hagamos como 15. Ahí vas. Redondeará los bordes de ese tablero de arte. Volveré a entrar. Hagamos nuestra pestaña prototipo aquí en la parte superior. Presione Play. Ahí vas. Eso es mejor. Puedes hacer click fuera de este modal y cerrarlo. Haga clic en la X para cerrarla. Bing, bada, boom, eres un profesional. Ya lo has hecho antes. Vamos a seguir adelante. De acuerdo, así que voy a agarrar el comienzo aquí. En lugar de iniciar un nuevo video, sólo vamos a seguir adelante porque así es como rodamos. Presiona el Inicio, arrástralo al siguiente. Este es el menú y la barra de título más la superposición fija y la izquierda de moverse en el menú se moverá desde la izquierda y lo cerraremos. Vuelve a entrar desde la derecha. Vamos a seguir adelante y presionar play sobre el prototipo, y hagamos esto. Ya hemos construido el menú, pero vamos a aprender a arreglar las cosas. Y se puede ver, puedo desplazarse, puedo hacer click y arrastrar, ver cómo se fija el menú ahí. Y si haces clic en el icono, se desliza, cierra hueso, tu profesional en esto. De acuerdo, así que vamos a agarrar el comienzo. Empujarlo hacia abajo hacia la u du. Creo que ya tengo esta barra de título seleccionada para nosotros. Así que compruébalo. Todo lo que tienes que hacer es seleccionarlo, ir a la pestaña Diseño y donde veas restricciones aquí. Por lo que de nuevo, seleccioné el tablero de arte. Tengo limitaciones. Ver dónde dice posición fija al desplazarse. Vamos a seguir adelante y en realidad antes de que hagamos eso, ve a tu prototipo. Simplemente presiona play. Asegúrate de tener el que dice que sí. No. El ejemplo, el que dice que sí presiona Reproducir y ver cómo la barra de pestañas y la barra de estado, no están fijos. Así es como se ve en este momento. Ahora vamos a seleccionar esta barra de título. Vuelve a nuestra pestaña Diseño en la sección de restricciones. Hacer posición fija al desplazarse. Centro que puedes ponerlo en la parte superior y centro, centro, top center. Vuelve a tu prototipo aquí. Presione Play. Ahora desplázate y mira cómo se mantiene en posición. Súper fácil. Vámonos rápidamente a sacar un menú aquí. Entonces sigamos adelante y vayamos a nuestras herramientas de marco. Agarra marco a la derecha aquí. Hagamos iPhone Pro X. Hagámoslo un poco menos ancho. Y mientras el tablero de arte junto a ella, ¿verdad? Por lo que debe ser tanto tiempo. Vamos a quedárnoslo. Vete de color rosa. Podemos hacer nuestro meñique. Hagámoslo meñique. Agarra nuestro texto aquí, colóquelo aquí en este nuevo marco. Voy a nombrarlo sólo por el bien de nombrarlo llamado el cajón del menú. Solo voy a moverla solo para asegurarme de que mi texto esté en él. Y ya lo hemos hecho. Adelante y triple-click problemas Glick, entra en el tablero que tiene la barra de título, triple clic, triple clic. Prototipo, arrástralo a tu menú. Ya se te acercó a esto de tap, no navegar para abrir superposición. Y sigamos adelante y lo hagamos desde arriba a la izquierda. Cerrado y haciendo clic afuera. Podemos hacer el 50% en este punto si queremos. Recuerda la animación aquí, queremos entrar, no desde la izquierda sino de la derecha. Iremos a jugar con esto aquí en un segundo, sólo para que lo vean. Entonces es bueno que estemos haciendo esto de nuevo porque ahora nos vamos a volver a enloquecer un poco más con esto. Presione Play. Tenemos que arreglar la barra de título en la parte superior. Haga clic en el menú. Boom, ropa exterior. Luciendo bien. Vamos a meternos con el menú aquí. Cuando seleccionamos el menú de animación o interacción detalles del menú. Hagamos a la izquierda, muéveos desde la izquierda. Ahora volvamos. Presiona aquí la parte superior. Ya ves que eso fue un poco raro. Llegó todo el camino desde la derecha. Entonces el mismo trato. Puedes ir a agarrar el menú, los detalles de interacción y también puedes jugar con estas cosas en tu propio tiempo. Puedes hacer a la izquierda o puedes entrar desde arriba. Nunca recomendaría esto, pero oye, lo que sea. Eso es un poco raro. Sigue siendo divertido. Vamos a poner esto de nuevo para entrar de la derecha. Y así es como se ve. Pero es divertido ir a jugar con estos pequeños detalles prototipo y probar cosas diferentes. Voy a empezar otro video y vamos a ir a hacer las barras de navegación inferiores. Te veré ahí. 33. Crea - Iphone - Barra de tabulación: Muy bien, bienvenido de nuevo. Ya conoces la pestaña Prototipo de taladro en la parte superior derecha por aquí. Agarra ese comienzo. Muévelo hacia abajo a la siguiente, que es la barra de navegación inferior o barra de pestañas inferior. Y vamos a mostrar cómo arreglamos esto y los cosimos juntos. Podemos construir ese sistema de barra de pestañas que aprendimos de Dios y presionamos play en el prototipo, muy de arriba a la derecha pequeño botón Presente y compruébalo. Así que mientras me desplazo, tenemos la barra de título estancia en miembro fijo, y ahora tenemos la barra de pestañas permaneciendo fija en la parte inferior. Permítanme decir 123. Si haces clic en pro o toca el perfil 456, vuelve a casa 123, perfil para V6, pestaña y vuelve entre los dos. Está bien, genial. Así que vamos a arrastrar nuestro inicio de nuevo de nuevo del ejemplo al que dice que haces diseño de prensa o en realidad lo mantendré en Prototype. Seleccionemos aquí la mesa de trabajo. Presione play. Y mira las barras navbars en la parte inferior o la barra de pestañas, ¿verdad? Entonces se está desplazando. Nunca debe estar desplazándose, siempre debe ser fijo. En la parte inferior, conseguimos que la barra de título permaneciera fija o no, la barra de pestañas. Vamos a repasar y corregir eso. Así que adelante y vuelve a tu pestaña de diseño. Creo que ya tengo esto agrupado. Sí, vale, ya está agrupada. Recuerda cuando podemos capacitar la barra de título a la parte superior de la pestaña Diseño sosteniendo, seleccionando la barra de pestañas, pestaña Diseño. Hacer posición fija al desplazarse. Pero en este punto haz el fondo, el centro. Ahora repasemos y veamos nuestro prototipo, a ver cómo ahora se fija al fondo. Nuevamente. Entonces una vez más. Posición fija, fondo centrado. Lo que esto hace es que es genial porque puedes, puedes tener un muy largo, no me sigas en éste, pero puedes tener un tablero de arte realmente largo. Así que estoy sosteniendo el mando y estoy estirando mi tablero de arte todo el camino hacia abajo. Voy a mover la barra de pestañas hasta el fondo aquí. Y voy a agregar más números para 456 porque he configurado esta barra de pestañas como una restricción para fijar a la parte inferior de la pantalla al desplazarse. Y lo he puesto a un iPhone, sabe que Figma sabe que no quieres que esto esté en la parte inferior. Quieres que siempre se fije a nivel del iframe. Tu dispositivo, tu viewport de tu dispositivo. Por lo que CASI scroll 456. Entonces mira cómo se ve eso. Se ve raro en mi archivo de diseño porque esto está en la parte inferior. Pero he puesto esa restricción aquí a la derecha. Y cuando voy al prototipo, veo la restricción por no lo veo en el modo diseño. Se ve así y el modo de diseño, pero lo veo en el modo prototipo. De acuerdo, así que voy a volver un poco aquí. Me encanta esta fuente por cierto, a la hermosa fuente llamada Bodoni. Pero no comas poster fuente italic. Una fuente tan hermosa. Te tatuaste eso si quieres. Está bien, genial. Así que vamos a copiar este tablero de arte. Voy a mantener pulsada Opción click y arrastrar. Ahora voy a seleccionar el menú. Nuevamente. Soy un drivel de triple clic Glick, glick impulsado por triple clic. Simplemente mantén triple clic y hasta que consigas el menú aquí para el hogar, haz este 50% de opacidad. Tengo triple clic, triple clic, triple clic. Si él triple-click demasiado, usted podría conseguir el hogar. Eso está bien. Puedes hacer esto para conseguir el ícono de casa. Ve donde dice capa, haz 30% de opacidad, presionando, Enter en tu teclado. Toma aquí el texto. Triple clic, triple clic, triple clic. Si necesitas obtener ese texto, hazlo con regularidad. ¿ Y qué pusimos ese texto que? Vamos a seguir adelante y agarrar los textos de perfil. Pulsa triple en el comando Rellenar C. Y agarremos aquí el hogar, comando V, pegarlo. Ahora vamos a agarrar los textos de perfil cuando las cosas están agrupadas, también puedes mantener el comando. Sólo estoy presionando Comando o Control. Si estás en un PC, estoy en un Mac, automáticamente te dará unas selecciones más profundas dentro de un grupo. Puede mantener presionado Comando y luego hacer clic y no tener que hacer triple clic, triple clic, viaje rápido. Puedes simplemente Comando, Comando dar click hacia fuera. Vamos a hacer triple clic, agarrar esos textos de perfil. Hagámoslo audaz. Que sea negro. Que sea 100% aquí. Y luego también agarra el ícono aquí. Agarra el trazo, hazlo negro también. Por lo que ahora tenemos ese estado por defecto aquí a la derecha. Estado activo para el hogar. Tenemos el estado activo para perfil y estado predeterminado para el hogar también. Vamos a hacer triple clic en el perfil hasta que consigamos esta selección. Si te metiste demasiado profundo, agarraste el ícono. No queremos que sólo triple-click. Ya he agrupado esto en una bonita sección para ti. Más prototipo. Arrástralo por aquí. Apenas en el grifo, navega. Nada elegante. Instancia, perfecta. Agarra la casa. Haz lo mismo. Nada elegante. Vamos a cambiar este texto. Hagamos 45. Sólo estoy triple-click en seis. Ahora volvamos a nuestro prototipo y miremos la pestaña. Boom, boom, boom. Tan bueno. Es como una aplicación real. Impresionante. De acuerdo, Genial. Muy bien, eso fue una barra de pestañas. Terminaremos con deslizar horizontal. En el siguiente video. Te veré ahí. Adiós. 34. Crea - Iphone: desplazado horizontal: Hola y bienvenidos al último. Vamos a hacer deslizar horizontales en una memoria de dispositivo móvil. De nuevo, ve a tu pestaña Prototipo en la parte superior aquí, consiguió el pequeño comienzo. Arrástralo hacia abajo. Voy a acercar, mantener pulsado Z, hacer clic y arrastrar. Sostenga la barra espaciadora. Sube esto un poco. Seleccione esta mesa de trabajo pulse Reproducir. Y esto es de lo que estoy hablando. Vamos a construir esta interacción donde pinchas, arrastra, pincha y arrastra, mira la comida. Un clic y arrastre. 35. Crea - Seleccionador de fechas móvil de Iphone: Muy bien. Sé que dije que fue el último video, pero lanzo uno más para aguinaldo. De acuerdo, entonces vamos a construir el selgador de fecha móvil y para verlo. Nuevamente, asegúrate de que estemos en el modo de pestaña Prototipo en la parte superior derecha. Si no, lo harás, no verás este pequeño rectángulo azul que ha tenido comienzo. Entonces ficha Prototipo, agarra esa cosa. Vamos a moverla hacia abajo a donde dice recolectador de fecha móvil. Y sigamos adelante y seleccionemos aquí el tablero de arte. Presione play. Esto es lo que vamos a construir. Por lo que tenemos el selgador de fechas, tú lo haces clic, va pantalla completa todo el camino hasta la parte superior, se desliza hacia arriba. Si presiona la salida, la parte superior, se desliza hacia abajo. Lo genial aquí es que si deslizas, obtienes todos los días del mes alineados hasta los días del mes o cada día de la semana en la barra de título. Esto se mantendrá fijo y también obtenemos el botón Hecho en la parte inferior. Cuando presionas el botón hecho o si presionaste el 1 de octubre, entonces el botón Hecho, te lleva de vuelta en tus recolectores de fecha rellenados. Bastante interacción resbaladiza. Vamos a construir eso. Así que de nuevo, lo primero que tenemos que hacer es asegurarnos de que estemos en el prototipo, la pestaña superior derecha, no en la pestaña Diseño a Prototipo. Por lo que podemos ver este pequeño rectángulo de inicio. Empuja eso hacia abajo a donde dice que lo haces. Vuelve a la pestaña Diseño aquí. Está bien, genial. Y luego más o menos lo que vamos a hacer es sólo copiar este tablero de arte aquí. Estoy sosteniendo la barra espaciadora para llegar a la herramienta de mano simplemente mueve fácilmente esto alrededor. Voy a seleccionar el tablero de arte, no el selechador de fecha, sino el tablero de arte. Presiona Comando C. Si estás en un PC, es Control C. Y luego Comando V, como en Víctor. O si estás en un PC, Control V, vamos a seleccionar el tablero de fechas, el teclado selecto de fecha, borrar componentes por aquí, solo tienes que seleccionar la sección de barra de título, colocarlo en tu tablero de arte, y luego agarra el botón Hecho. Y mismo trato, coloca esto en el tablero de arte. Pongamos esto al fondo. Nuevamente solo para asegurarte de que estos elementos estén en tu tablero de arte. Agarra tu tablero de arte y muévelo, ¿verdad? Entonces si estos no se mueven con tu tablero de arte, entonces estos elementos no están dentro del tablero de arte. Así que solo revisa eso. De acuerdo, entonces ahora lo que tengo que hacer es que primero debemos arreglar estos elementos. Así que sigamos adelante y seleccionemos solo la barra de título en la parte superior derecha aquí donde estamos en la pestaña Diseño. Ve a las restricciones y ve dónde dice posición fija al desplazarse, solo toca eso, solo tienes que arreglarlo. Y luego lo mismo para la parte inferior donde dice Hecho, selecciona aquí el botón Hecho y haz posición fija al desplazarse. Compré un bang, boom de fondo. De acuerdo, así que hagamos prototipos rápidamente de esto y pongámoslo en marcha. Queremos seleccionar el selgador de fecha en el primer tablero de arte aquí, ve a la pestaña Prototipo. Ver el pequeño prototipo ui. Vamos a seguir adelante y arrastrarlo al tablero de arte a la derecha. En tap como bueno, lo que queremos es que no queremos incidentes y puede animación, queremos mudarnos. Queremos esto no de la izquierda, trasero desde arriba o de abajo a arriba. El extremo derecho aquí. Hicimos el prototipo en grifo. Seleccionamos no instantáneo disolver o animate inteligente mover en. Desde arriba. Ves la pequeña vista previa aquí así que queremos. Y luego voy a soltar triple clic, triple clic, triple clic para conseguir esa x aquí, 123. Y adelante y en el modo prototipo, arrastre eso de nuevo a este prototipo de fecha selecto. Aquí está lo que no queremos mudarnos. Queremos salir y no arriba sino abajo queremos exactamente lo contrario. Vayamos a ver ese rápido. Deslízate hacia arriba. Pulse el botón X. Deslízate hacia abajo. Perfecto. Ahora que tenemos la función, vamos a poner en las selecciones de fecha. Tengo este elemento por aquí a la derecha que tiene todos los meses sobre él. Nuevamente, aquí está la llave, la pieza clave de esto. Ya he agrupado todas estas secciones, pero querríamos que todo se agrupa como un elemento. Y entonces lo que vamos a hacer es que vamos a hacer clic derecho, hacer clic derecho, y selección de fotogramas una vez más. Simplemente asegúrate de que todos estos elementos estén agrupados. Selecciónelo con el botón derecho en selección de marcos Ahora esto está enmarcado. Voy a volver para asegurarme estoy aquí en la pestaña Diseño, no en la pestaña Prototipo, así que no pasa nada funky. Ahora seleccionando este marco, vamos a pasar a la paleta Capas de la izquierda. Llamemos a esta fecha, dámosla por aquí. Así que acabo de hacer doble clic en el marco. Y mecanografiado en fechas. Voy a hacer clic fuera de ella otra vez. Ahora vamos a seleccionar fechas, el marco, y sosteniendo Comando en el teclado. O si estás en un PC que es Control. Agarra la parte superior y deslízala todo el camino hacia abajo. Seguirás viendo los elementos. Todavía ves estas fechas como mayo, junio, julio. Pero acabemos de conseguir que acabemos de hacer septiembre aquí. Deberíamos simplemente tener seleccionados octubre y diciembre con el marco. Nuevamente una vez más. Lo haré rápidamente. Entonces manteniendo el comando o control, si estás en un PC en la parte superior, selecciona fechas, asegúrate de que estás en las fechas de fotogramas y no en los elementos agrupados. El marco de la izquierda se puede decir porque tiene ese pequeño hashtag de crosshair buscando ícono aquí en las capas. Sostenga el Comando M en un PC. Arrastra eso hacia abajo. Acabamos de tener seleccionados octubre y septiembre en la pestaña Diseño a la derecha donde tenemos nuestras Opciones de Marco aquí. Ve donde dice contenido de Clip, recorta el contenido, haz clic en eso. Y ahora solo verás justo el área en la que has, has arrastrado el marco hacia abajo. Y ahora solo está haciendo clic en todo el contenido a ese marco individual. Si lo desclicas, muestra que muestra más contenido de contacto. Voy a agarrar la cita aquí. Voy a arrastrarlo a mi tablero de arte aquí. Y sé que entró en el tablero de arte porque se puso azul. Si no estás seguro, solo toma el tablero de arte de nuevo y muévalo. Asegúrate de que esto esté aquí. Asegúrate de que el tablero de arte se vea bien. Vamos a ver el prototipo muy rápido. Voy a ir a la prensa de arriba a la derecha, jugar que son un gran presente. Presione Seleccionar fecha. Se puede ver que aún no hay desplazamiento, ¿verdad? Tenemos la función, puedes cerrarla. Pero no hay desplazamiento en las fechas todavía. Eso se ve bien. Vamos a seleccionar aquí el marco de fecha. Para que recuerden que estoy en el tablero de arte. Puedo ver que he seleccionado fechas porque puedo ver la selección en el comando de retención de capa izquierda. Arrastrémoslo hasta arriba aquí. Al igual que así. Y luego en la parte inferior, vamos a asegurarnos de que solo vaya a la parte superior del botón aquí. Aquí está el truco. Entonces, una vez que tengamos esta selección de fotogramas, adelante y selecciona solo las fechas. Ir al prototipo. Y ver dónde dice desbordamiento, desplazamiento de flujo lo que queremos. Aquí es desplazamiento vertical. Adelante y haz clic en él. Y ahora volvamos a nuestro prototipo. Voy a seleccionar el primer tablero de arte. Presione Play. Tenemos el recogedor de fecha se desliza hacia arriba. Y ahora cuando hago clic y arrastre, se puede ver cómo todas las otras fechas aparecen bastante resbaladizas. Vamos a hacer una de las selecciones de fechas resaltadas para completar la acción del usuario. Voy a alejar un poco, mando menos o Control menos. Si estás en un PC, voy a seguir adelante y copiar esta clave, este tablero de arte aquí, mando C, y hacer un Comando V y colocarlo. Ya tengo este 13 aquí como elemento. Entonces vamos a agarrar este elemento. Voy a hacer triple clic en él. Triple, triple goteo, goteo, goteo, goteo hará clic, mantenga presionada Mayús C. Puedes ver que he seleccionado solo el círculo pero no los textos 13. Así que voy a mantener el turno también y mantener agarrar los dos. Arrástralo a octubre primero. Suprimir los tres, debe centrarse por su cuenta. Perfecto. Volvamos y cambiemos la fecha aquí en la parte superior. Así que de nuevo, solo voy a triple-click triple tripulación para probar un viaje triple, triple, triple , triple clic, triple clic aquí en el texto aquí. Vencido jueves abreviado. Y apenas 11012022. En este tablero de arte aquí, voy a seguir adelante y agarrar un cuadrado y solo hacer una plaza aquí, solo el gris. Así como eso. Nuevamente, hagamos esto al menos 45 por 45. Simplemente dale un área de grifo más grande. Vamos a seguir adelante y seleccionar esta plaza. Asegúrate de que las plazas en este tablero de arte. Mueve la mesa de trabajo solo para asegurarte de que el cuadrado esté, si no lo es, sigue adelante y colócalo, póngalo sobre el uno y haz doble clic. Si no puedes seleccionarlo, solo haz triple clic. Y ahora ve al prototipo y arrastra eso al tablero de arte. A la derecha. No queremos ninguna animación, solo queremos, en cambio. Debería ser justo instantáneo. Queremos que preserven la posición de desplazamiento. En realidad, lo voy a dejar fuera por ahora solo para que puedan ver cómo funciona esto. Volvamos al modo prototipo. Genial. Ahí está mi de allá. Ahora. Mira sin posición de desplazamiento preservada, mira qué pasa cuando tocas éste? Saltó. No preservó donde estaba en el pergamino. Simplemente me llevó al siguiente tablero de arte y mostró al tablero de arte que no preservaba este pergamino. Volvamos. Vamos a agarrar nuestra plaza otra vez. Entra en los detalles de la interacción. Y ahora hagamos preservar la posición de desplazamiento. Voy a ir a seleccionar el tablero de arte Start. Presione Play. Ahora mira. Voy a desplazarse hacia abajo un poco justo, justo donde ese cuadrado está por encima del botón Hecho. Toca y mira cómo no me saltó por ahí. Preservado donde estaba en el pergamino. Eso es lo que hace esa casilla de verificación. Super-importante. Bastante mucho. Ya casi terminamos. Volvamos a nuestro archivo de diseño. Vamos a seleccionar este cuadrado. Vamos a seguir adelante y hacer la capa de paso aquí 0% de opacidad. Muy bien, ahí tienes. Discúlpate por las sirenas. Debe haber alguien haciendo algo fuera de mi casa. Creo que ahora están bien. Está bien, genial. Entonces vamos a seguir adelante y asegurarnos de que puedas ver lo que pasó, lo que acabamos de hacer. Seleccionamos esa plaza y acabamos de hacerlo lo que se llama punto de acceso. No se puede ver en el prototipo. Pero lo hicimos donde es un hotspots transparentes. Hotspot, lo que significa que es interacción, es interactable. Y si el usuario toca en él, te va a llevar al estado seleccionado. Vamos a seguir adelante y seleccionar el primer tablero de arte con la fecha. Adelante y Comando C eso, y pegarlo a la derecha. Ahora vamos a llenar aquí las fechas. Así que tenemos diez. Tenemos tenemos 12022. Y como este es un estado activo, hagamos negros los textos. Ahí vas. Está bien, genial. Entonces todo lo que tenemos que hacer es decir en esto, seleccionar aquí el botón Hecho. En la mezcla prototipo, estás en la pestaña Prototipo. Selecciona el botón Hecho, arrastra el prototipo hasta el siguiente tablero de arte aquí. Lo que queremos es mudarse y bajar. Y luego lo mismo para este botón Hecho. Lo que queremos es volver a ponerlo aquí al estado predeterminado. Y adelante y haz éste. Muévete y baja. Entonces ahora vamos a cambiar este texto por el texto que fue seleccionado, que sería 10132022. Y hagamos también esto negro. Eso es más o menos un selectador de fecha completo aquí, vamos a probarlo. Suprime el juego en la parte superior derecha. Aquí está su fecha, 1013. Podría verlo aquí si presiono hecho y dijera bajar, deslizarse hacia fuera. Presiono X tal diapositiva hacia fuera. Y luego mira si desplazamos todas las fechas están aquí. Voy a seleccionar el 1 de octubre. Veré la actualizada la cima jueves, 101. Prensa Hecho. Y ahora estoy de vuelta en el selechador de fechas y se actualiza la fecha que he seleccionado. Impresionante. Ojalá el tuyo funcione así. Si no, siempre lo tengo como ejemplo en la parte superior. siempre puedas escoger aparte lo que ya he hecho y ver si el tuyo es diferente y luego hacer esos cambios. Entonces esto está en línea con lo que estás haciendo. Y esta debería ser la última clase. Te veré en gracias. Video. Adiós. 36. Gracias: Muy bien, si estás viendo esta clase, eres increíble. Eso significa que lo lograste. Fuiste hasta el final. Nuevamente, solo quiero agradecerte por tomar la clase. Espero que tengas mucho valor fuera de ella. Espero que te haya ayudado un poco a darte una comprensión de los patrones de diseño y si estás empezando a diseñar o eres veterano calificado de la temporada. Espero que esto te haya dado un poco de valor y te ayude a subir a niveles y diseñar patrones. Y también cualquiera de las cosas que construiste dentro de Figma, espero que tengas un poquito de consejos y trucos ahí. Y de nuevo, con respecto a cualquier cosa que construyas, ¿has terminado? Puedes compartir tu trabajo con la clase. Nos encantaría verlo. Simplemente publicarlo. Sí, publicó en Skillshare aquí y escribe un comentario y nos encantaría ver qué te ocurrió. Nuevamente. Sólo quiero agradecerte y te agradezco mucho por tomar mi clase. Significa mucho para mí y te deseo un buen rato diseñando muchas, muchas cosas geniales y valiosas por